wcs_client_kate_suzhou/src/view/tab/tools/PrintQRCode.vue

<template>
  <div style="display: flex">
    <div style="margin-left: 10px">
      <h5>批量打印</h5>
      <el-form
          label-position="left"
          label-width="120px"
          :model="printParams"
      >
        <el-form-item label="前置字符串：">
          <el-input class="form-input" v-model="printParams.startString"/>
        </el-form-item>
        <el-form-item label="递增起始数字：">
          <el-input-number class="form-input" v-model="printParams.startNum" />
        </el-form-item>
        <el-form-item label="数字长度：">
          <el-input-number class="form-input" v-model="printParams.numberLength" />
        </el-form-item>
        <el-form-item label="递增步长：">
          <el-input-number class="form-input" v-model="printParams.stepLength" />
        </el-form-item>
        <el-form-item label="方向码：">
          <el-input-number class="form-input" v-model="printParams.directionCode" />
        </el-form-item>
        <el-form-item label="后置字符串：">
          <el-input class="form-input" v-model="printParams.endString"/>
        </el-form-item>
        <el-form-item label="递增数量：">
          <el-input-number class="form-input" v-model="printParams.codeCount" />
        </el-form-item>
        <el-form-item label="打印数量：">
          <el-input-number class="form-input" v-model="printParams.printNo" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="showQr">预览</el-button>
      <el-button type="success" @click="printCode">打印</el-button>
      <h5>单个打印</h5>
      <el-form
          label-position="top"
          label-width="140px"
          :model="printParams"
      >
        <el-form-item label="需要打印的字符串(不建议太长)：">
          <el-input maxlength="30" show-word-limit style="width: 620px" v-model="printParams.sumString"/>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="showQrOne">预览</el-button>
      <el-button type="success" @click="printCode">打印</el-button>

      <div style="margin-top: 10px; font-size: 0.8rem; color: coral">
        您的电脑需要先安装对应的驱动程序<br>
        请先点击预览再打印，请勿一次性打印太多数目<br>
        仅限条码纸大小为 <span style="font-size: 1.5rem">80*60</span>mm，请在打印界面将边距设置为无
      </div>
    </div>
    <el-scrollbar height="calc(100vh - 200px)" style="width: 100mm; margin-left: 50px">
      <div id="printData" ref="printData">
        <div v-for="printCode in printCodes" style="break-after: auto">
          <el-row class="printCodePage">
            <img style="width: 48mm; height: 50mm; margin: auto" :src="printCode.img" alt="二维码">
            <div style="width: 100%; font-weight: bolder; text-align: center">
              <strong>{{printCode.code}}</strong>
            </div>
          </el-row>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
// import  《组件名称》  from '《组件路径》 ';
import qrcode from "qrcode";
import print from "print-js";

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: [],
  emits: [],
  data() {
    // 这里存放数据
    return {
      printParams: {
        startString: '',
        startNum: 0,
        numberLength: 4,
        stepLength: 1,
        directionCode: 0,
        endString: '',
        codeCount: 1,
        printNo: 1,
        sumString: ''
      },
      // 需要打印的条码集合
      printCodes: []
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    showQr() {
      let sumCode = []; // 所有的条码
      let startIndex = this.printParams.startNum;
      for(let i = 0; i < this.printParams.codeCount; i++) {
        for(let c = 0; c < this.printParams.printNo; c++) {
          let defaultCode =  this.printParams.startString
              + (Number(startIndex) + Number(i * this.printParams.stepLength)).toString().padStart(this.printParams.numberLength, '0')
              + this.printParams.endString;
          if(this.printParams.directionCode === 0) {
            let codeData = {};
            codeData.code =  defaultCode;
            qrcode.toDataURL(codeData.code).then(url => {
              codeData.img = url;
            }).catch(err => {
              codeData.img = '';
              console.log(err);
            })
            sumCode.push(codeData);
          } else {
            for(let d = 1; d <= this.printParams.directionCode; d++) {
              let codeData = {};
              codeData.code = defaultCode + '-' + d.toString();
              qrcode.toDataURL(codeData.code).then(url => {
                codeData.img = url;
              }).catch(err => {
                codeData.img = '';
                console.log(err);
              })
              sumCode.push(codeData);
            }
          }
        }
      }
      this.printCodes = sumCode
    },
    showQrOne() {
      let sumCode = [] // 所有的条码
      let codeData = {};
      codeData.code =  this.printParams.sumString
      qrcode.toDataURL(codeData.code).then(url => {
        codeData.img = url
      }).catch(err => {
        codeData.img = ''
        console.log(err)
      })
      sumCode.push(codeData)
      this.printCodes = sumCode
    },
    printCode() {
      print({
        printable: this.$refs.printData,// 标签元素
        type: 'html',
        header: '',
        targetStyles: ['*'],
        font_size:'1.2rem'
      })
    }
  },
  // 组合式 API
  setup() {
  },
  // 创建之前
  beforeCreate() {
  },
  // 创建完成(可以访问 this 实例)
  created() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  // 更新之前
  beforeUpdate() {
  },
  // 更新之后
  updated() {
  },
  // 销毁之前
  beforeUnmount() {
  },
  // 销毁完成
  unmounted() {
  }
}
</script>

<style lang="scss" scoped>

$input-width: 500px;

.form-input {
  width: $input-width;
}

#printData {
  height: 80mm;
  width: 60mm;
}

.printCodePage {
  margin: auto auto;
  width: 80mm;
  //border: #6b778c55 solid 1px;
  //border-radius: 5px;
}


</style>