vue-print-nb 打印

前端代码

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="检验批号" prop="inspectionNo">
        <el-input
          v-model="queryParams.inspectionNo"
          placeholder="请输入检验批号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户" prop="customer">
        <el-input
          v-model="queryParams.customer"
          placeholder="请输入客户"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户代码" prop="customerCode">
        <el-input
          v-model="queryParams.customerCode"
          placeholder="请输入客户代码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="品名" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入品名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发票号" prop="invoiceNo">
        <el-input
          v-model="queryParams.invoiceNo"
          placeholder="请输入发票号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="LPN" prop="lpn">
        <el-input
          v-model="queryParams.lpn"
          placeholder="请输入LPN"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="QMB" prop="qmbPartNo">
        <el-input
          v-model="queryParams.qmbPartNo"
          placeholder="请输入QMB料号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收货日期">
        <el-date-picker
          v-model="daterangeReceivingDate"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="厂商料号" prop="sku">
        <el-input
          v-model="queryParams.sku"
          placeholder="请输入厂商料号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="原始储位" prop="originalStorageLocation">
        <el-input
          v-model="queryParams.originalStorageLocation"
          placeholder="请输入原始储位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="目的储位" prop="toStorageLocation">
        <el-input
          v-model="queryParams.toStorageLocation"
          placeholder="请输入目的储位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="检验结果" prop="inspectionResults">-->
<!--        <el-select v-model="queryParams.inspectionResults" placeholder="请选择检验结果" clearable>-->
<!--          <el-option-->
<!--            v-for="dict in dict.type.qms_inspection_results"-->
<!--            :key="dict.value"-->
<!--            :label="dict.label"-->
<!--            :value="dict.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-printer"
          :disabled="multiple"
          size="mini"
          v-hasPermi="['system:stock:print']"
          @click="handlePrint(0)"
          v-print="printObj"
        >打印</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:billing:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              :header-cell-style="{ background: '#F5F7FA' }"
              :data="billingList" border="border"
              @selection-change="handleSelectionChange"
              :row-class-name="tableRowClassName">
      <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable"/>
<!--      <el-table-column label="主键id" align="center" prop="billingId" />-->
      <el-table-column label="检验批号" align="center" prop="inspectionNo" :width="flexWidth('inspectionNo', billingList, '检验批号')"/>
      <el-table-column label="客户" align="center" prop="customer" :width="flexWidth('customer', billingList, '客户')"/>
      <el-table-column label="客户代码" align="center" prop="customerCode" :width="flexWidth('customerCode', billingList, '客户代码')"/>
<!--      <el-table-column label="管理库存id" align="center" prop="stockId" />-->
      <el-table-column label="品名" align="center" prop="productName" :width="flexWidth('productName', billingList, '品名')"/>
      <el-table-column label="发票号" align="center" prop="invoiceNo" :width="flexWidth('invoiceNo', billingList, '发票号')"/>
      <el-table-column label="LPN" align="center" prop="lpn" />
      <el-table-column label="QMB料号" align="center" prop="qmbPartNo" :width="flexWidth('qmbPartNo', billingList, 'QMB料号')"/>
      <el-table-column label="数量" align="center" prop="qty" :width="flexWidth('qty', billingList, '数量')"/>
      <el-table-column label="抽样数量" align="center" prop="sampleNum" :width="flexWidth('sampleNum', billingList, '抽样数量')"/>
      <el-table-column label="收货日期" align="center" prop="receivingDate" :width="flexWidth('receivingDate', billingList, '收货日期')">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.receivingDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="厂商料号" align="center" prop="sku" :width="flexWidth('sku', billingList, '厂商料号')"/>
      <el-table-column label="原始储位" align="center" prop="originalStorageLocation" :width="flexWidth('originalStorageLocation', billingList, '原始储位')"/>
      <el-table-column label="目的储位" align="center" prop="toStorageLocation" :width="flexWidth('toStorageLocation', billingList, '目的储位')"/>
      <el-table-column label="检验标识" align="center" prop="inspectionIdentification" :width="flexWidth('inspectionIdentification', billingList, '检验标识')"/>
<!--      <el-table-column label="检验结果 默认0表示为上传检验结果" align="center" prop="inspectionResults">-->
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="dict.type.qms_inspection_results" :value="scope.row.inspectionResults"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['system:billing:edit']"-->
<!--          >修改</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-printer"
            @click="handlePrint(scope.row)"
            v-print="printObj"
            v-hasPermi="['system:billing:print']"
            v-if="scope.row.inspectionResults === '0'"
          >打印
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-printer"
            v-else-if="scope.row.inspectionResults === '1'"
          >已打印</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-printer"
            v-hasPermi="['system:billing:print']"
            v-else
          >基本档缺失
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改开单送签对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="检验批号" prop="inspectionNo">
          <el-input v-model="form.inspectionNo" placeholder="请输入检验批号" />
        </el-form-item>
        <el-form-item label="客户" prop="customer">
          <el-input v-model="form.customer" placeholder="请输入客户" />
        </el-form-item>
        <el-form-item label="客户代码" prop="customerCode">
          <el-input v-model="form.customerCode" placeholder="请输入客户代码" />
        </el-form-item>
        <el-form-item label="管理库存id" prop="stockId">
          <el-input v-model="form.stockId" placeholder="请输入管理库存id" />
        </el-form-item>
        <el-form-item label="品名" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入品名" />
        </el-form-item>
        <el-form-item label="发票号" prop="invoiceNo">
          <el-input v-model="form.invoiceNo" placeholder="请输入发票号" />
        </el-form-item>
        <el-form-item label="LPN" prop="lpn">
          <el-input v-model="form.lpn" placeholder="请输入LPN" />
        </el-form-item>
        <el-form-item label="QMB料号" prop="qmbPartNo">
          <el-input v-model="form.qmbPartNo" placeholder="请输入QMB料号" />
        </el-form-item>
        <el-form-item label="数量" prop="qty">
          <el-input v-model="form.qty" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="收货日期" prop="receivingDate">
          <el-date-picker clearable
            v-model="form.receivingDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择收货日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="厂商料号" prop="sku">
          <el-input v-model="form.sku" placeholder="请输入厂商料号" />
        </el-form-item>
        <el-form-item label="原始储位" prop="originalStorageLocation">
          <el-input v-model="form.originalStorageLocation" placeholder="请输入原始储位" />
        </el-form-item>
        <el-form-item label="目的储位" prop="toStorageLocation">
          <el-input v-model="form.toStorageLocation" placeholder="请输入目的储位" />
        </el-form-item>
<!--        <el-form-item label="检验结果 默认0表示为上传检验结果" prop="inspectionResults">-->
<!--          <el-select v-model="form.inspectionResults" placeholder="请选择检验结果 默认0表示为上传检验结果">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.qms_inspection_results"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="dict.value"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <div style="display: none">
      <el-card
        class="box-card"
        :body-style="{
        padding: '20px',
        minHeight: 'calc(100vh - 100px)',
      }"
      >
        <div id="printArea">
          <!-- 这里是需要打印的内容 -->
          <!-- 第一页-start -->
          <div class="pageDiv">
            <!--          <img-->
            <!--            src="@/assets/logo/logo_title.png"-->
            <!--          />-->
            <div class="listTable">
              <table width="100%" height="100px" cellspacing="0" border="1px">
                <thead>
                <tr>
                  <td colspan="5">
                    <img align="center" width="209" height="19" src="@/assets/logo/logo_title.png"/>
                  </td>
                  <td align="center" colspan="10">供应链管理有限公司</td>
                </tr>
                </thead>
                <thead>
                <tr>
                  <td colspan="15" align="center">检验领料单 <br/>（Inspection Material Requisition Form）
                  </td>
                </tr>
                </thead>
                <thead>
                <tr>
                  <td colspan="6">检验单号（Inspection Order Number）：{{ this.printObj.inspectionOrderNumber }}</td>
                  <td colspan="5"></td>
                  <td colspan="3">日期(Date): {{ currentDate }}</td>
                  <td></td>
                </tr>
                </thead>
                <thead>
                <tr>
                  <td>序号
                    (Serial Number)</td>
                  <td bgcolor="yellow">检验批号<br>
                    （Inspection batch number）</td>
                  <td>客户<br>
                    (Customer)</td>
                  <td>客户代码<br>
                    (Customer Code)</td>
                  <td>厂商料号<br>
                    （SKU）</td>
                  <td>品名<br>
                    (Product Name)</td>
                  <td>储位<br>
                    (Original storage location)</td>
                  <td>储位<br>
                    (TO storage location)</td>
                  <td>收货日期<br>
                    （Receiving Date）</td>
                  <td>发票号<br>
                    （Invoice number）</td>
                  <td>LPN</td>
                  <td>QMB料号<br>
                    (QMB part number)</td>
                  <td>数量<br>
                    (QTY)</td>
                  <td>抽样数量<br>
                    (SAMPLE NUM)</td>
                  <td bgcolor="orange">检验标识<br>
                    (Inspection identification)</td>
                </tr>
                </thead>
                <tbody v-if="this.printObj.type === 0">
                <tr v-for="(item, index) in this.printObj.multipleSelection" :key="item.billingId">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item.inspectionNo }}</td>
                  <td>{{ item.customer }}</td>
                  <td>{{ item.customerCode }}</td>
                  <td>{{ item.sku }}</td>
                  <td>{{ item.productName }}</td>
                  <td>{{ item.originalStorageLocation }}</td>
                  <td>{{ item.toStorageLocation }}</td>
                  <td>{{ item.receivingDate }}</td>
                  <td>{{ item.invoiceNo }}</td>
                  <td>{{ item.lpn }}</td>
                  <td>{{ item.qmbPartNo }}</td>
                  <td>{{ item.qty }}</td>
                  <td>{{ item.sampleNum }}</td>
                  <td>{{ item.inspectionIdentification }}</td>
                </tr>
                </tbody>
                <tbody v-if="this.printObj.type === 1">
                <tr >
                  <td>{{ 1 }}</td>
                  <td>{{ this.printRow.inspectionNo }}</td>
                  <td>{{ this.printRow.customer }}</td>
                  <td>{{ this.printRow.customerCode }}</td>
                  <td>{{ this.printRow.sku }}</td>
                  <td>{{ this.printRow.productName }}</td>
                  <td>{{ this.printRow.originalStorageLocation }}</td>
                  <td>{{ this.printRow.toStorageLocation }}</td>
                  <td>{{ this.printRow.receivingDate }}</td>
                  <td>{{ this.printRow.invoiceNo }}</td>
                  <td>{{ this.printRow.lpn }}</td>
                  <td>{{ this.printRow.qmbPartNo }}</td>
                  <td>{{ this.printRow.qty }}</td>
                  <td>{{ this.printRow.sampleNum }}</td>
                  <td>{{ this.printRow.inspectionIdentification }}</td>
                </tr>
                </tbody>
                <tfoot>
                <tr align="left">
                  <td colspan="5" align="left">开单员（Billing officer）: {{ billingOfficer }}</td>
                  <td colspan="5" align="left">备料员（Material preparer）:</td>
                  <td colspan="5">检验员（IQC）:</td>
                </tr>
                <tr>
                  <td colspan="5">日期（Date）: {{ currentDate }} </td>
                  <td colspan="5">日期（Date）:</td>
                  <td colspan="5">日期（Date）:</td>
                </tr>
                </tfoot>

              </table>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { listBilling, getBilling, delBilling, addBilling, updateBilling, recordsPrint, getInspectionNo } from "@/api/system/billing";
import { getInfo } from '@/api/login'
import VuePrint  from 'vue-print-nb'
import Vue from 'vue'
import dict from '@/utils/dict'
Vue.use(VuePrint)

export default {


  name: "Billing",

  dicts: ['qms_inspection_results'],
  data() {

    return {
      billingOfficer: "", //开单员
      currentDate : this.getCurrentDate(),
      printRow: "",

      printObj: {
        id: "printArea", //要打印的id名 无#号
        extraCss: "", // 打印可引入外部的一个 css 文件
        popTitle: "&nbsp;", //打印的页眉标题，默认浏览器标题 空字符串时显示undefined 使用html语言
        extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "true", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "打印预览", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "打印", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        multipleSelection: [],
        type: "",
        success: "",
        inspectionOrderNumber: null,


        previewBeforeOpenCallback(vue) {
        }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {
        }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {
          getInspectionNo("QI").then(response => {
            console.log(response);
            console.log(response.data);
            this.inspectionOrderNumber = response.data
          })
        }, // 开启打印前的回调事件
        openCallback() {
        }, // 调用打印之后的回调事件
        closeCallback() {
        }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        clickMounted(){
        },
        url: "",
        standard: "",
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 开单送签表格数据
      billingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 检验结果 默认0表示为上传检验结果时间范围
      daterangeReceivingDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        inspectionNo: null,
        customer: null,
        customerCode: null,
        productName: null,
        invoiceNo: null,
        sampleNum: null,
        lpn: null,
        qmbPartNo: null,
        receivingDate: null,
        sku: null,
        inspectionResults: null,
        type: '0',
        originalStorageLocation: null,
        toStorageLocation: null,
        inspectionIdentification: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
    this.getInfo();
  },
  mounted() {

  },

  methods: {

  getInfo(){
      getInfo().then(response => {
        this.billingOfficer = response.user.nickName;
      })
    },
    getCurrentDate(){
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    /** 查询开单送签列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeReceivingDate && '' != this.daterangeReceivingDate) {
        this.queryParams.params["beginReceivingDate"] = this.daterangeReceivingDate[0];
        this.queryParams.params["endReceivingDate"] = this.daterangeReceivingDate[1];
        this.queryParams.type = '0';
      }
      listBilling(this.queryParams).then(response => {
        this.billingList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      getInspectionNo("QI").then(response => {
        this.printObj.inspectionOrderNumber = response.data
      })
    },
    checkSelectable(row){
      return row.inspectionResults === '0'
    },
    flexWidth(prop, tableData, title, num = 0) {
      if (tableData.length === 0 ) {//表格没数据不做处理
        return;
      }
      let flexWidth = 0;//初始化表格列宽
      let columnContent = '';//占位最宽的内容
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      context.font = "14px Microsoft YaHei";
      if ((prop === '') && title) {//标题长内容少的，取标题的值,
        columnContent = title
      } else {// 获取该列中占位最宽的内容
        let index = 0;
        for (let i = 0; i < tableData.length; i++) {
          const now_temp = tableData[i][prop] + '';
          const max_temp = tableData[index][prop] + '';
          const now_temp_w = context.measureText(now_temp).width
          const max_temp_w = context.measureText(max_temp).width
          if (now_temp_w > max_temp_w) {
            index = i;
          }
        }
        columnContent = tableData[index][prop]
        //比较占位最宽的值跟标题、标题为空的留出四个位置
        const column_w = context.measureText(columnContent).width
        const title_w = context.measureText(title).width
        if (column_w < title_w) {
          columnContent = title || '留四个字'
        }
      }
      // 计算最宽内容的列宽
      let width = context.measureText(columnContent);
      flexWidth = width.width + 40 + num
      return flexWidth + 'px';
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        billingId: null,
        inspectionNo: null,
        customer: null,
        customerCode: null,
        stockId: null,
        productName: null,
        invoiceNo: null,
        lpn: null,
        qmbPartNo: null,
        qty: null,
        receivingDate: null,
        sku: null,
        originalStorageLocation: null,
        toStorageLocation: null,
        inspectionIdentification: null,
        inspectionResults: null,
        createBy: null,
        createTime: null,
        updateTime: null,
        updateBy: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeReceivingDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handlePrint(row){

      const billingIds = row.billingId || this.ids
      //获取检验单号
      //JL20241025001
      //JC20241025001
      if (row === 0){
        this.printObj.type=0
      }else {
        this.printRow = '';
        this.printObj.type = 1;
        this.printRow = row
        this.printObj.billingId = row.billingId
      }
      setTimeout(() => {
        this.$confirm('打印是否成功？', '打印反馈', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
          showClose: false
        }).then(() => {
          recordsPrint(billingIds, "0", this.printObj.inspectionOrderNumber);
          getInspectionNo("QI").then(response => {
            this.printObj.inspectionOrderNumber = response.data
          })
          this.getList()
          console.log('用户确认打印成功');
          // 这里可以做进一步处理，如记录日志等
        }).catch(() => {
          console.log('用户确认打印失败');
          // 可以提醒用户重新尝试或其他操作
        });
      }, 1000); // 假设给用户一些时间操作打印机，这里的时间需要根据实际情况调整
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.billingId)
      this.single = selection.length!==1
      this.multiple = !selection.length
      this.printObj.multipleSelection = selection;
    },
    tableRowClassName({row, rowIndex}){
      if (row.inspectionResults === '0') {
        return 'success-row';
      }else if (row.inspectionResults === '1'){
        return 'warning-row';
      }else {
        return 'error-row';
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加开单送签";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const billingId = row.billingId || this.ids
      getBilling(billingId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改开单送签";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.billingId != null) {
            updateBilling(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBilling(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const billingIds = row.billingId || this.ids;
      this.$modal.confirm('是否确认删除开单送签编号为"' + billingIds + '"的数据项？').then(function() {
        return delBilling(billingIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/billing/export', {
        ...this.queryParams
      }, `billing_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .error-row {
  background: #bf7070;
}
</style>

<style lang="scss" scoped>
.feature {
  text-align: left;
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 14px;
}

//默认隐藏需要打印的内容
#print {
  display: none;
}

//打印预览的界面的样式
@media print {
  //设置默认不打印页尾、页码（margin-top: 0;margin-bottom: 0;）
  @page {
    size: auto; /* auto is the initial value */
    margin: 0 20px;
  }

  #print {
    display: block;
  }
  .listTable {
    font-size: 14px;
    color: #000;
    table {
      border-top: 1px solid #000;
      border-left: 1px solid #000;
      border-spacing: 0;
      td {
        border-bottom: 1px solid #000;
        padding: 8px 10px;
        border-right: 1px solid #000;
        line-height: 20px;
        text-align: center;
      }
    }
  }

  //打印内容不满一页时自动分页要打印的内容的div里加style:'page-break-after:always'
  .pageDiv {
    page-break-after: always;
    padding: 30px 0;
  }

}
</style>
<style scoped>
/deep/ .el-table th.el-table__cell {
  user-select: initial;
}
</style>