LJ-UI/src/views/plan/workorder/printID.vue

<template>
  <div class="app-container">
    <el-dialog title="" :visible.sync="printDialogVisible" width="1000px">
      <div>
        <el-form inline>
          <el-form-item label="补打版次" prop="factory">
            <el-input v-model="idCardsNum" placeholder="请输入补打版次" style="width:100px"/>
          </el-form-item> 
          <el-button type="primary" icon="el-icon-check" circle @click="showPrint()"/>
        </el-form>
       
      </div>
      <div id="printFrom" class="my-print-box">
        <div v-for="(item, index) in printData.idCardList" :key="index">
          <el-form  class="print-card">
            <el-row>
              <el-col :span="7">
                <img src="@/assets/logo/lanjv.png" class="report-logo" />
              </el-col>
            </el-row>
            <el-row>
              <el-col  class="center-text">
                <span>产品标识卡</span>
              </el-col>
            </el-row>
            <div class="custom-divider"></div>
            
            <el-row class="my-print-foot">
              <el-col :offset="1" :span="10">
                <div class="card-div1">产品名称: {{ item.productName  }}</div><br />
                <div class="card-div1">批次号: {{ item.batchCode }}</div><br />
                <div class="card-div2">生产日期: {{ item.productDateStr }}</div><br />
                <div class="card-div2">板次: {{ item.palletNo }}</div><br />
                <div class="card-div2">数量: {{ item.batchQuantity }}</div>
              </el-col>
              <el-col :offset="1" :span="10">
                <canvas :id="'qrcode-' + index" class="qrcode"></canvas>
              </el-col>
            </el-row>
          </el-form>
          <div style="clear: both; margin-bottom: 30px;"></div>
          <div v-if="(index + 1) % 1 === 0" class="print-page"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import {
  getIdCardList,
} from '@/api/plan/workorder';
import QRCode from 'qrcode';

export default {
  name: "printID",
  components: {
  },
  data() {
    return {
      idCardsNum: null,
      optType: undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectRow: {},
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      printDialogVisible: false,
      // 打印
      printData: {
        printable: "printFrom",
        ignore: ["no-print"],
        workCenter: "暂无数据",
        factory: null,
        idCardList: [],
        //gridStyle:'border: 1px solid lightgray; margin-bottom: -1px;'
      },
      workorderCode: '',
      //工单重新渲染表格
      refreshWorkerTable: true,
      // 表单校验
      rules: {
       
      },
      tableIndex: "tableIndex",
    };
  },
  created() {
  },
  mounted() {
  

  },
  methods: {
      init(workorderCode){
        this.workorderCode = workorderCode;
        this.showPrint();
      },

    // 打印预览-浏览器打印
    handlePrint(params) {
      printJS({
      printable: params.printable,
      type: params.type || 'html',
      maxWidth: 1500,
      font_size: "", // 设置字体大小
      header: params.header, // '表单',
      targetStyles: ['*'],
      style: `
       body { margin: 10mm; padding: 0; }
        .print-page { page-break-after: always; }
      `,
      ignoreElements: params.ignore || [],
    });
    },
    // 打印预览-点击打印预览按钮
   async showPrint() {
      console.log('执行了打印预览');
      let params = {
      };
      if(this.idCardsNum!=null){
        params.palletNo=this.idCardsNum;
      }
     let response = await getIdCardList({workorderCode:this.workorderCode,...params});
     this.printData.idCardList = response;
     this.$nextTick(() => {
      this.printData.idCardList.forEach((item, index) => {
        const canvas = document.getElementById('qrcode-' + index);
        QRCode.toCanvas(canvas, item.palletCode, { width: 350,margin:1 }, function (error) {
          if (error) console.error(error);
          console.log('success!');
        });
      });
    })
    }
  },
};
</script>
<style scoped>
.print-btn {
  margin-bottom: 15px;
  margin-left: 10px;
}

.center-text {
  text-align: center;
  font-size: 63px;
  font-weight: 800;
  color: black;
}

.report-logo {
  margin-top: 15px;
  margin-left: 15px;
  height: 70px;
}

.button-container {
  text-align: right;
  margin-top: 10px;
  margin-right: 10px;
}

.my-print-table {
  font-size: 20px;
}

.my-print-foot {
  font-size: 17px;
}
.my-print-foot2 {
  font-size: 19px;
}

.my-print-box{
  width:100%
}
.custom-divider {
    width: 100%;
    height: 1px;
    background-color: #a5a4a4 !important;
    margin: 20px 0 !important;
    -webkit-print-color-adjust: exact;
  }

.print-page {
  page-break-after: always;
}
@media print {
  .custom-divider {
    width: 100%;
    height: 1px;
    background-color: #a5a4a4 !important;
    margin: 20px 0 !important;
    -webkit-print-color-adjust: exact;
  }
}
.card-div1{
  font-size: 20px;
  font-weight: 600;
  padding-top: 14px;
}
.card-div2{
  font-size: 22px;
  font-weight: 700;
  padding-top: 14px;
}
</style>