60.ZBL指令生成，可下载-526互联

  1 <template>
  2     <div>
  3         <el-card style="height:80px;font-size: 30px;">OBA RM LABEL 列印指令生成</el-card>
  4         <el-card>
  5             <el-form :inline="true" style="align-items: center;display: flex;">
  6                 <el-form-item label="开始序号【年份+日期+0000】">
  7                     <el-input placeholder="请输入序号八位如：23080000" type="number" v-model="startValue" @input="handleInput1"></el-input>
  8                 </el-form-item>
  9                 <el-form-item label="打印数量">
 10                     <el-input placeholder="请输入打印数量,1~1000" type="number" v-model="endValue"  @input="handleInput2"></el-input>
 11                 </el-form-item>
 12                 <el-form-item>
 13                     <el-button type="primary" @click="printLabel">生成</el-button>
 14                     <el-button type="success" @click="clear">清空</el-button>
 15                     <el-button type="success" @click="download">下载</el-button>
 16                 </el-form-item>
 17             </el-form>
 18         </el-card>
 19         <el-card>
 20             <el-input type="textarea" placeholder="指令生成" rows="15" :readonly="true" v-model="textareaZBLS"></el-input>
 21         </el-card>
 22     </div>
 23 </template>
 24   
 25 <script setup lang="ts">
 26 import { ref } from 'vue';
 27 import { ElMessage } from 'element-plus';
 28 
 29 const startValue = ref<number | undefined>()
 30 const endValue = ref<number | undefined>()
 31 const zbl = ref('')
 32 const textareaZBLS = ref()
 33 const zbls = ref<string[]>([])
 34 zbl.value = '^XA^FO158,170^A@N,35,33,MYRIAD_SET_BOLD_.FNT^FDRM0' + 23080000 + '^FS ^FO185,35^BXN,8,400,,,^FDRM0' + 23080000 + '^FS^PQ1^XZ'
 35 
 36 const printLabel = () => {
 37     console.log('我点击了打印按钮')
 38     zbls.value = []
 39     textareaZBLS.value = ''
 40     // console.log(startValue.value)
 41     // console.log(endValue.value)
 42     if (endValue.value && startValue.value) {
 43         if (startValue.value < 10000000 || startValue.value >= 100000000) {
 44             ElMessage({
 45                 type: 'error',
 46                 message: '开始序号需要八位数，10000000~100000000之间！！！'
 47             });
 48             return
 49         }
 50         if (endValue.value < 1 || endValue.value > 1000) {
 51             ElMessage({
 52                 type: 'error',
 53                 message: '打印数量必须1~1000！！！'
 54             });
 55             return
 56         }
 57         for (let i = 0; i < endValue.value; i++) {
 58             startValue.value++
 59             // console.log(startValue.value)
 60             zbl.value = '^XA^FO158,170^A@N,35,33,MYRIAD_SET_BOLD_.FNT^FDRM0' + startValue.value + '^FS ^FO185,35^BXN,8,400,,,^FDRM0' + startValue.value + '^FS^PQ1^XZ'
 61             // console.log(zbl.value)
 62             zbls.value.push(zbl.value)
 63         }
 64 
 65         const content = zbls.value.join('\n'); // 使用换行符连接数组元素
 66         textareaZBLS.value = content    //生成的指令再页面中显示
 67 
 68         // console.log(zbls.value)
 69     } else {
 70         ElMessage({
 71             type: 'error',
 72             message: '开始序号和打印数量必需填写！！！'
 73         });
 74     }
 75 }
 76 
 77 //清空指令
 78 const clear = () => {
 79     textareaZBLS.value = ''
 80     startValue.value = undefined
 81 }
 82 
 83 //下载指令
 84 const download = () => {
 85     const content = zbls.value.join('\n');
 86     const element = document.createElement('a');
 87     const file = new Blob([content], { type: 'text/plain' });
 88     element.href = URL.createObjectURL(file);
 89     element.download = 'output.txt';
 90     document.body.appendChild(element);
 91     element.click();
 92     document.body.removeChild(element);
 93 }
 94 //输入监听
 95 const handleInput1=(e:any)=>{
 96     // console.log(e.length)
 97     if(e.length>8){
 98         startValue.value=e.slice(0,8);
 99     }
100     // console.log(startValue.value)
101 }
102 const handleInput2=(e:any)=>{
103     // console.log(e.length)
104     if(e.length>4){
105         endValue.value=e.slice(0,4);
106     }
107     // console.log(startValue.value)
108 }
109 </script>
效果如下：
指令