wcs_java/wcs_web/src/views/tabs/PrintCode.vue

<script setup lang="ts">

import {computed, nextTick, ref} from "vue";
import PrintCodeTypeFormatter from "@/plugin/formatter/PrintCodeTypeFormatter.ts"
import type {IPrintParams} from "@/interface/page/printCode/IPrintParams.ts";
import VueQrcode from '@chenfengyuan/vue-qrcode';
import VueBarcode from '@chenfengyuan/vue-barcode';
import printJS from "print-js";
import MessageUtils from "@/utils/MessageUtils.ts";

const props = defineProps(['isFull']);

const isFull = computed(() => {
  return props.isFull ?? false;
});

const paperTitle = ref<string>("");
const printCodeTypeFormatter = new PrintCodeTypeFormatter();
const codeType = ref<number>(1); // 条码类型
const paperWidth = ref<number>(80); // 纸张宽度
const paperHeight = ref<number>(60); // 纸张高度
const codeSize = ref<number>(180); // 条码大小
const codeHeight = ref<number>(150); // 条码高度，仅一维码生效
const printParams = ref<IPrintParams>({
  startString: "",
  endString: "",
  numberLength: 4,
  startNo: 1,
  tagCount: 1,
  printCount: 1
});
const printText = ref<string>(""); // 纯文本打印的内容
const printCodeList = ref<string[]>([]); // 要打印的条码

const changeCodeType = (value: number) => {
  if(value === 0) {
    codeSize.value = 2;
    return;
  }
  if(value === 1) {
    codeSize.value = 180;
    return;
  }
};
// 打印条码
const printCode = () => {
  preview();
  nextTick(() => {
    printJS({
      printable: 'codePrintDiv',// 标签元素id
      type: 'html',
      header: '',
      targetStyles: ['*']
    });
  })
}
// 打印纯文本
const printInputText = () => {
  if(printText.value === null || printText.value === "") {
    MessageUtils.warningMessageBox('请输入纯文本');
    return;
  }
  previewText();
  nextTick(() => {
    printJS({
      printable: 'codePrintDiv',// 标签元素id
      type: 'html',
      header: '',
      targetStyles: ['*']
    });
  })
};

// 纯文本打印预览
const previewText = () => {
  if(printText.value === null || printText.value === "") {
    MessageUtils.warningMessageBox('请输入纯文本');
    return;
  }
  printCodeList.value = [printText.value];
}
// 条码打印预览
const preview = () => {
  printCodeList.value = [];
  let codes: string[] = [];
  let startNo = printParams.value.startNo;
  const tagCount = printParams.value.tagCount;
  const startString = printParams.value.startString ?? "";
  const endString = printParams.value.endString ?? "";
  const numberLength = printParams.value.numberLength;
  const printCount = printParams.value.printCount;
  for (let j = 0; j < tagCount; j++) {
    let code = startString + startNo.toString().padStart(numberLength, '0') + endString;
    for(let i = 0; i < printCount; i++) {
      codes.push(code);
    }
    startNo++;
  }
  printCodeList.value = codes;
}


</script>

<template>
  <div :style="{marginLeft: '10px',marginTop: '10px', width: isFull ? 'calc(100vw - 20px)' : 'calc(100vw - 280px)' }">
    <h3>条码打印</h3>
    <el-scrollbar>
      <el-row>
        <el-col :span="12">
          <el-card style="width: calc(100% - 10px); margin-right: 10px; height: 350px">
            <el-text type="warning">基础设置</el-text>
            <el-form label-width="160px">
              <el-form-item label="纸张标题：">
                <el-input v-model="paperTitle" placeholder="请输入标题"/>
              </el-form-item>
              <el-form-item label="条码类型：">
                <el-select v-model="codeType" placeholder="请选择条码类型" @change="changeCodeType">
                  <el-option v-for="item in printCodeTypeFormatter.codeType" :label="item.label" :key="item.value"  :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="条码纸宽度（mm）：">
                <el-input-number v-model="paperWidth" :min="20" :max="9999" :step="10"/>
              </el-form-item>
              <el-form-item label="条码纸高度（mm）：">
                <el-input-number v-model="paperHeight" :min="20" :max="9999" :step="10"/>
              </el-form-item>
              <el-form-item label="条码大小：">
                <el-input-number v-model="codeSize" :min="1" :max="9999" :step="1" :precision="2"/>
              </el-form-item>
              <el-form-item label="一维码条码高度：">
                <el-input-number v-model="codeHeight" :min="1" :max="9999" :step="10"/>
              </el-form-item>
            </el-form>
          </el-card>
          <el-card style="width: calc(100% - 10px); margin-right: 10px; height: 170px; margin-top: 10px">
            <el-text type="success">纯文本打印设置</el-text>
            <el-form label-width="160px">
              <el-form-item label="字符串：">
                <el-input v-model="printText" placeholder="请输入字符串"/>
              </el-form-item>
            </el-form>
            <el-row>
              <el-text type="danger">您必须点击预览后才能执行打印和下载动作</el-text>
            </el-row>
            <el-row>
              <el-button-group>
                <el-button type="info" @click="previewText">预览</el-button>
                <el-button type="primary" @click="printInputText">打印</el-button>
              </el-button-group>
            </el-row>
          </el-card>
          <el-card style="width: calc(100% - 10px); margin-right: 10px; height: 420px; margin-top: 10px">
            <el-text type="primary">条码打印设置</el-text>
            <el-form label-width="160px">
              <el-form-item label="起始字符串：">
                <el-input v-model="printParams.startString" placeholder="请输入起始字符串"/>
              </el-form-item>
              <el-form-item label="结束字符串：">
                <el-input v-model="printParams.endString" placeholder="请输入结束字符串"/>
              </el-form-item>
              <el-form-item label="编号长度：">
                <el-input-number v-model="printParams.numberLength" :min="1" :max="9999" :step="1"/>
              </el-form-item>
              <el-form-item label="起始编号：">
                <el-input-number v-model="printParams.startNo" :min="1" :max="9999" :step="1"/>
              </el-form-item>
              <el-form-item label="标签数量：">
                <el-input-number v-model="printParams.tagCount" :min="1" :max="9999" :step="1"/>
              </el-form-item>
              <el-form-item label="打印数量：">
                <el-input-number v-model="printParams.printCount" :min="1" :max="9999" :step="1"/>
              </el-form-item>
            </el-form>
            <el-row>
              <el-text type="danger">您必须点击预览后才能执行打印和下载动作</el-text>
            </el-row>
            <el-row>
              <el-button-group>
                <el-button type="info" @click="preview">预览</el-button>
                <el-button type="primary" @click="printCode">打印</el-button>
              </el-button-group>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card style="width: 100%">
            <el-text type="success">打印预览区</el-text>
            <el-scrollbar style="height: calc(100vh - 200px);">
              <div id="codePrintDiv">
                <!--            二维码区域-->
                <div v-if="codeType === 1" v-for="item in printCodeList" :style="{width: paperWidth.toString() + 'mm', height:  paperHeight.toString() + 'mm', textAlign: 'center', border: '#2c3e5040 solid 1px', marginTop: '8px'}">
                  <div v-if="paperTitle != ''" style="margin-bottom: 0; font-weight: bolder">{{paperTitle}}</div>
                  <div style="width: 100%; height: calc(100% - 45px);">
                    <VueQrcode :value="item" tag="svg" style="margin: auto auto;overflow: visible" :options="{width: codeSize}"/>
                  </div>
                  <div style="margin: 0 auto; height: 20px;width: 100%; font-size: large;font-weight: bolder; transform: translateY(-5px)">{{item}}</div>
                </div>
                <!--            code 128 区域-->
                <div v-if="codeType === 0" v-for="item in printCodeList" :style="{width: paperWidth.toString() + 'mm', height:  paperHeight.toString() + 'mm', textAlign: 'center', border: '#2c3e5040 solid 1px', marginTop: '8px'}">
                  <div v-if="paperTitle != ''" style="margin-bottom: 0; font-weight: bolder">{{paperTitle}}</div>
                  <div style="width: 100%; height: calc(100% - 45px);">
                    <VueBarcode :value="item" tag="svg" style="margin: auto auto;overflow: visible" :options="{width: codeSize, displayValue: false, height: codeHeight}"/>
                  </div>
                  <div style="margin: 0 auto; height: 20px;width: 100%; font-size: large;font-weight: bolder; transform: translateY(-5px)">{{item}}</div>
                </div>
              </div>
            </el-scrollbar>
          </el-card>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<style scoped>

</style>