218 lines
9.0 KiB
Vue
218 lines
9.0 KiB
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> |