| | |
| | | <script setup> |
| | | import { hiprint } from "vue-plugin-hiprint" |
| | | import {onMounted, ref} from "vue" |
| | | import {onMounted, reactive, ref} from "vue" |
| | | import TagStyleSet from "@/hook/tagStyleSet" |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import request from "@/utils/request" |
| | | import {useI18n} from "vue-i18n" |
| | | import {useRouter} from "vue-router"; |
| | | import {createTemplate} from "@/hook/createTemplateTag" |
| | | import deepClone from "@/utils/deepClone"; |
| | | import companyInfo from "@/stores/sd/companyInfo" |
| | | import PrintCustomLabel from '@/components/pp/PrintCustomLabelDetails.vue' |
| | |
| | | const company = companyInfo() |
| | | const dialogTableVisibleLabel = ref(false) |
| | | const dialogTableVisibleCustomLabel = ref(false) |
| | | const dialogSaveVisble = ref(false) |
| | | let produceList = ref([]) |
| | | let labelList = ref([]) |
| | | let dataList = ref([]) |
| | | let lastList = ref([]) |
| | | let list = ref([]) |
| | | |
| | | //打印机 |
| | | const printerData = ref() |
| | | const printerList = ref() |
| | |
| | | } |
| | | }, |
| | | { |
| | | tid: 'custom1', title: '自定义1', data: '', type: 'text', |
| | | tid: 'custom1', title: '自定义1', data: null, type: 'text', |
| | | options: { |
| | | title: '自定义1', |
| | | field: 'custom1', |
| | | testData: '', |
| | | width:270, |
| | | height: 16, |
| | | fontSize: 11.25, |
| | | textAlign: "left", |
| | | textContentVerticalAlign: "middle", |
| | | type:'custom' |
| | | type:'custom', |
| | | hideTitle: true |
| | | } |
| | | }, |
| | | { |
| | | tid: 'custom2', title: '自定义2', data: '', type: 'text', |
| | | options: { |
| | | title: '自定义2', |
| | | field: 'custom2', |
| | | testData: '', |
| | | width:270, |
| | | height: 16, |
| | | fontSize: 11.25, |
| | | textAlign: "left", |
| | | textContentVerticalAlign: "middle", |
| | | type:'custom' |
| | | type:'custom', |
| | | hideTitle: true |
| | | } |
| | | }, |
| | | { |
| | | tid: 'custom3', title: '自定义3', data: '', type: 'text', |
| | | options: { |
| | | title: '自定义3', |
| | | testData: '', |
| | | width:270, |
| | | height: 16, |
| | | fontSize: 11.25, |
| | | textAlign: "left", |
| | | textContentVerticalAlign: "middle", |
| | | type:'custom' |
| | | type:'custom', |
| | | hideTitle: true |
| | | } |
| | | }, |
| | | { |
| | | tid: 'custom4', title: '自定义4', data: '', type: 'text', |
| | | options: { |
| | | title: '自定义4', |
| | | testData: '', |
| | | width:270, |
| | | height: 16, |
| | | fontSize: 11.25, |
| | | textAlign: "left", |
| | | textContentVerticalAlign: "middle", |
| | | type:'custom' |
| | | type:'custom', |
| | | hideTitle: true |
| | | } |
| | | }, |
| | | { |
| | | tid: 'custom5', title: '自定义5', data: '', type: 'text', |
| | | options: { |
| | | title: '自定义5', |
| | | testData: '', |
| | | width:270, |
| | | height: 16, |
| | | fontSize: 11.25, |
| | | textAlign: "left", |
| | | textContentVerticalAlign: "middle", |
| | | type:'custom' |
| | | type:'custom', |
| | | hideTitle: true |
| | | } |
| | | }, |
| | | |
| | | /*{ |
| | | tid: 'table', |
| | | field: 'table', |
| | | title: '自定义表格', |
| | | type: 'table', |
| | | //columns:[[null,null,null,null,null,null]], |
| | | "options": { |
| | | "left": 20, |
| | | "top": 20, |
| | | "height": 56, |
| | | "width": 555, |
| | | "field": "table", |
| | | "tableHeaderRepeat": "none", |
| | | "tableBorder": "noBorder", |
| | | "tableBodyRowBorder": "noBorder", |
| | | "tableBodyCellBorder": "noBorder", |
| | | "fields": [ |
| | | { |
| | | "text": "商品名称", |
| | | "field": "orderId" |
| | | }, |
| | | { |
| | | "text": "商品编码", |
| | | "field": "orderNumber" |
| | | } |
| | | ], |
| | | |
| | | }, |
| | | "columns": [ |
| | | [ |
| | | { |
| | | "width": 138.75, |
| | | "title": "商品名称", |
| | | "field": "orderId", |
| | | "checked": true, |
| | | "columnId": "orderId", |
| | | "fixed": false, |
| | | "rowspan": 1, |
| | | "colspan": 1, |
| | | "renderFormatter": "function(value,row,index,options){return `订单号:${row.orderId || '测试商品名'}<br>条码:${row.barcode || '123456'}`}" |
| | | }, |
| | | ] |
| | | ] |
| | | }*/ |
| | | |
| | | ]) |
| | | |
| | |
| | | |
| | | // 必须在 dom 加载完成之后给刚刚绑定上的元素添加上拖拽事件 |
| | | onMounted(async () => { |
| | | let table = { |
| | | /*let table = { |
| | | tid: 'table', |
| | | field: 'table', |
| | | title: '自定义表格', |
| | |
| | | list.push(para) |
| | | }) |
| | | table.options.fields = list |
| | | TgaStyleSet.value.push(table) |
| | | TgaStyleSet.value.push(table)*/ |
| | | await getTags() |
| | | |
| | | await hiprint.init({ |
| | |
| | | } |
| | | //获取打印机列表 |
| | | hiprint.refreshPrinterList((list) => { |
| | | // console.log('refreshPrinterList') |
| | | // console.log(list) |
| | | printerList.value=list |
| | | }); |
| | | }; |
| | |
| | | |
| | | } |
| | | } |
| | | |
| | | const save = (type) => { |
| | | ElMessageBox.prompt( t('components.addNewSignature')+':', { |
| | | confirmButtonText: t('basicData.save'), |
| | | cancelButtonText: t('basicData.cancelButtonText'), |
| | | inputPattern:/^.{1,20}$/, |
| | | inputErrorMessage: t('components.message'), |
| | | inputValue:tag.value.name |
| | | }).then(({ value }) => { |
| | | tag.value.name = value |
| | | let json = $ref(hiprintTemplate.value.getJson()) |
| | | const tableFlag = json.panels[0].printElements.filter(item => item.options.field==='table') |
| | | json.panels[0].printElements.forEach((item,index) => { |
| | | if (item.options.field === 'table') { |
| | | const fields = json.panels[0].printElements[index].options.fields.filter(item => item.type) |
| | | const result = Object.fromEntries( |
| | | fields.map(item => [item.field, true]) // 转换成 [key, value] 数组 |
| | | ) |
| | | //<div style='width: 6.5cm;height:4.95cm;background-color: #5cadfe'> |
| | | let funct = "function(value,row,index,options){return ` <div style='width: 6.5cm;height:4.95cm;background-color: #5cadfe'><br>" |
| | | json.panels[0].printElements[index].options.columns[0].forEach(item => { |
| | | if(item.field && !result[item.field ]){ |
| | | if (company.printShowTitle){ |
| | | funct += item.title+':${row.'+item.field+' || "" } <br>' |
| | | }else{ |
| | | funct += '${row.'+item.field+' || "" } <br>' |
| | | } |
| | | }else if(item.field && result[item.field]){ |
| | | funct += item.title+'<br>' |
| | | } |
| | | }) |
| | | funct+='<br></div>`}' |
| | | //</div> |
| | | json.panels[0].printElements[index].options.columns[0][0].renderFormatter = funct |
| | | } |
| | | }) |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | if(type === 'save'){ |
| | | tag.value.value = JSON.stringify(json) |
| | | request.post('tagStyle/saveTag',tag.value).then(res => { |
| | | if(res.code === '200' && res.data===true){ |
| | | ElMessage.success(t('basicData.msg.saveSuccess')) |
| | | getTags() |
| | | } |
| | | }) |
| | | }else{ |
| | | request.post('tagStyle/addTag',tag.value).then(res => { |
| | | if(res.code === '200' && res.data===true){ |
| | | ElMessage.success(t('basicData.msg.saveSuccess')) |
| | | getTags() |
| | | } |
| | | }) |
| | | } |
| | | hiprintTemplate.value.update(json) |
| | | }) |
| | | const dialogSave = (type)=>{ |
| | | dialogSaveVisble.value = true |
| | | const tagString = JSON.parse(JSON.stringify(tag.value)) |
| | | tag.value.saveType = type |
| | | ruleForm.width = tagString.tagWidth |
| | | ruleForm.height = tagString.tagHeight |
| | | ruleForm.name = tagString.name |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | const getTags = () => { |
| | | request.get('tagStyle/getTagList').then(res => { |
| | | res.data.forEach(item => { |
| | | item.value = JSON.parse(item.value) |
| | | }) |
| | | tags.value = res.data |
| | | }) |
| | | } |
| | | const changeTag = () => { |
| | | const json = JSON.parse(tag.value.value) |
| | | const json = tag.value.value |
| | | //json.panels[0].printElements[0].options.fields.push({text: '商标', field: 'icon'}) |
| | | |
| | | hiprintTemplate.value.setPaper(json.panels[0].width, json.panels[0].height) |
| | |
| | | |
| | | const clear = () => { |
| | | hiprintTemplate.value.clear() |
| | | |
| | | } |
| | | |
| | | const deleteTag = () => { |
| | | request.post(`tagStyle/deleteTag/${tag.value.id}`).then(res => { |
| | | if(res.code === '200' && res.data===true){ |
| | | tag.value = null |
| | | hiprintTemplate.value.clear() |
| | | hiprintTemplate.value.setPaper("A4") |
| | | ElMessage.success(t('basicData.msg.deleteSuccess')) |
| | | getTags() |
| | | close() |
| | | |
| | | } |
| | | }) |
| | | } |
| | |
| | | |
| | | |
| | | const printOrder = (type) => { |
| | | const list = hiprintTemplate.value.getJson() |
| | | hiprintTemplate.value.update(tag.value.value) |
| | | tag.value.value = JSON.parse(JSON.stringify(hiprintTemplate.value.getJson())) |
| | | const list = JSON.parse(JSON.stringify(hiprintTemplate.value.getJson())) |
| | | |
| | | list.panels[0].printElements.forEach(element => { |
| | | element.options.fontFamily = 'Arial' |
| | | if(element.printElementType.title!==''){ |
| | | |
| | | if( element.options.field !== undefined){ |
| | | if(type===3 ){ |
| | | element.options.hideTitle = true |
| | | } |
| | | } |
| | | if(type!==3){ |
| | | element.options.hideTitle = false |
| | | if( element.options.field === undefined){ |
| | | element.options.hideTitle = true |
| | | } |
| | | } |
| | | |
| | | /*if(element.printElementType.title!==''){ |
| | | element.printElementType.title1=element.printElementType.title |
| | | element.options.title1 = element.options.title |
| | | } |
| | | element.printElementType.title=element.printElementType.title1 |
| | | element.options.title = element.options.title1 |
| | | |
| | | if(type===3 && element.options.field!==''){ |
| | | element.printElementType.title='' |
| | | element.options.title='' |
| | | }else{ |
| | | element.printElementType.title=element.options.title1 |
| | | element.options.title=element.options.title1 |
| | | } |
| | | }*/ |
| | | |
| | | }) |
| | | hiprintTemplate.value.update(list) |
| | |
| | | columnsNum = (list.panels[0].printElements[0].options.gridColumns || 1) |
| | | } |
| | | let printer=printerData.value |
| | | if(type===1){ |
| | | |
| | | //判断是否有 嵌套自定义纸张 |
| | | if(tag.value.tagHeight && tag.value.tagWidth){ |
| | | const print =createTemplate(hiprintTemplate.value.getJson(),object,tag.value.tagWidth,tag.value.tagHeight) |
| | | hiprintTemplate.value.update(print.template) |
| | | object = print.printData |
| | | } |
| | | |
| | | if(type===1){//判断使用 队列打印还是web浏览器打印 |
| | | const queuePrinter = new QueuePrinter( object,hiprintTemplate,columnsNum,printer) |
| | | queuePrinter.tick |
| | | }else{ |
| | | hiprintTemplate.value.print(object) |
| | | hiprintTemplate.value.print(object) |
| | | } |
| | | |
| | | } |
| | | const closeDialog = () => { |
| | | const list = hiprintTemplate.value.getJson() |
| | | list.panels[0].printElements.forEach(element => { |
| | | element.options.fontFamily = 'Arial' |
| | | if (element.printElementType.title === '') { |
| | | element.printElementType.title = element.printElementType.title1 |
| | | element.options.title = element.options.title1 |
| | | } |
| | | }) |
| | | hiprintTemplate.value.update(list) |
| | | hiprintTemplate.value.update(tag.value.value) |
| | | } |
| | | |
| | | const selectRecordsData = ref({ |
| | | printList: [] |
| | | }) |
| | | |
| | | // 监听打印次数事件 |
| | | const printNumber = () => { |
| | | selectRecordsData.value.printList = JSON.parse(props.list) |
| | | request.post(`/tagStyle/updatePrintNumber`, selectRecordsData.value).then((res) => { |
| | | if (res.code == 200 && res.data === true) { |
| | | } else { |
| | | |
| | | ElMessage.warning(t('basicData.msg.saveFail')) |
| | | |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const ruleFormRef = ref() |
| | | |
| | | |
| | | let ruleForm = reactive({ |
| | | name: null, |
| | | width:null , |
| | | height: null, |
| | | }) |
| | | const checkWidth = (rule, value, callback) => { |
| | | const width = hiprintTemplate.value.getJson().panels[0].width |
| | | if(value){ |
| | | const regex = /^(?:\d+|\d+\.\d)$/ |
| | | if(isNaN(value)){ |
| | | callback(new Error(`请输入数字`)) |
| | | } |
| | | if(!regex.test(value)){ |
| | | callback(new Error(`请输入保留一位小数正数`)) |
| | | } |
| | | if( value<width){ |
| | | callback(new Error(`打印纸张: ${value} < 标签纸张: ${width}`)) |
| | | } |
| | | } |
| | | callback() |
| | | } |
| | | const checkHeight = (rule, value, callback) => { |
| | | const height = hiprintTemplate.value.getJson().panels[0].height |
| | | if(value){ |
| | | if(isNaN(value)){ |
| | | callback(new Error(`请输入数字`)) |
| | | } |
| | | const regex = /^(?:\d+|\d+\.\d)$/ |
| | | if(!regex.test(value)){ |
| | | callback(new Error(`请输入保留一位小数正数`)) |
| | | } |
| | | if( value<height){ |
| | | callback(new Error(`打印纸张: ${value} < 标签纸张: ${height}`)) |
| | | } |
| | | } |
| | | callback() |
| | | } |
| | | |
| | | |
| | | const rules = reactive({ |
| | | name: [ |
| | | { required: true, message: '请输入名称', trigger: 'blur' }, |
| | | { min: 1, max: 255, message: 'Length should be 1 to 255', trigger: 'blur' } |
| | | ], |
| | | width: [{ validator: checkWidth, trigger: 'blur' }], |
| | | height: [{ validator: checkHeight, trigger: 'blur' }] |
| | | }) |
| | | const submitForm = (formEl) => { |
| | | if (!formEl) return |
| | | formEl.validate(async (valid) => { |
| | | if(valid) { |
| | | const json = hiprintTemplate.value.getJson() |
| | | const tableFlag = json.panels[0].printElements.filter(item => item.options.field==='table') |
| | | if(tableFlag.length>0){ |
| | | alert("已无法保存或修改此类型标签,请使用其他方法") |
| | | return |
| | | } |
| | | tag.value.tagHeight = ruleForm.height |
| | | tag.value.tagWidth = ruleForm.width |
| | | tag.value.name = ruleForm.name |
| | | /*json.panels[0].printElements.forEach((item,index) => { |
| | | if (item.options.field === 'table') { |
| | | const fields = json.panels[0].printElements[index].options.fields.filter(item => item.type) |
| | | const result = Object.fromEntries( |
| | | fields.map(item => [item.field, true]) // 转换成 [key, value] 数组 |
| | | ) |
| | | //<div style='width: 6.5cm;height:4.95cm;background-color: #5cadfe'> |
| | | let funct = "function(value,row,index,options){return ` <div style='width: 6.5cm;height:4.95cm;background-color: #5cadfe'><br>" |
| | | json.panels[0].printElements[index].options.columns[0].forEach(item => { |
| | | if(item.field && !result[item.field ]){ |
| | | if (company.printShowTitle){ |
| | | funct += item.title+':${row.'+item.field+' || "" } <br>' |
| | | }else{ |
| | | funct += '${row.'+item.field+' || "" } <br>' |
| | | } |
| | | }else if(item.field && result[item.field]){ |
| | | funct += item.title+'<br>' |
| | | } |
| | | }) |
| | | funct+='<br></div>`}' |
| | | //</div> |
| | | json.panels[0].printElements[index].options.columns[0][0].renderFormatter = funct |
| | | } |
| | | })*/ |
| | | if(tag.value.saveType === 'save'){ |
| | | tag.value.value = JSON.stringify(json) |
| | | await request.post('tagStyle/saveTag',tag.value).then(res => { |
| | | if(res.code === '200' && res.data===true){ |
| | | ElMessage.success(t('basicData.msg.saveSuccess')) |
| | | } |
| | | }) |
| | | }else{ |
| | | tag.value.value = JSON.stringify(json) |
| | | await request.post('tagStyle/addTag',tag.value).then(res => { |
| | | if(res.code === '200' && res.data===true){ |
| | | ElMessage.success(t('basicData.msg.saveSuccess')) |
| | | |
| | | } |
| | | }) |
| | | } |
| | | |
| | | } else { |
| | | console.log('error submit!') |
| | | } |
| | | }).finally(()=>{ |
| | | dialogSaveVisble.value = false |
| | | tag.value = null |
| | | hiprintTemplate.value.clear() |
| | | hiprintTemplate.value.setPaper("A4") |
| | | getTags() |
| | | |
| | | }) |
| | | } |
| | | |
| | | const closeDialogForm = () =>{ |
| | | ruleForm.width= null |
| | | ruleForm.height= null |
| | | ruleForm.name= null |
| | | } |
| | | |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | </el-select> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-button type="primary" @click="save('save')">保存</el-button> |
| | | <el-button type="primary" @click="save('copy')">复制</el-button> |
| | | <el-button type="primary" @click="dialogSave('save')">保存</el-button> |
| | | <el-button type="primary" @click="dialogSave('copy')">复制</el-button> |
| | | <el-button type="warning" @click="clear">清空</el-button> |
| | | <el-button :disabled="!tag.id" type="danger" @click="deleteTag">删除</el-button> |
| | | <el-button :disabled="!tag?.id" type="danger" @click="deleteTag">删除</el-button> |
| | | <el-button type="primary" @click="htmlPrint">预览</el-button> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | style="width: 100%;height: 100%"/> |
| | | </el-dialog> |
| | | |
| | | <el-dialog |
| | | id="sizeCustomSemi" |
| | | v-model="dialogSaveVisble" |
| | | destroy-on-close |
| | | @close="closeDialogForm" |
| | | style="width: 400px;height:300px "> |
| | | <el-form |
| | | ref="ruleFormRef" |
| | | style="max-width: 600px" |
| | | :model="ruleForm" |
| | | status-icon |
| | | :rules="rules" |
| | | label-width="auto" |
| | | class="demo-ruleForm" |
| | | > |
| | | <el-form-item label="标签名称" prop="name"> |
| | | <el-input v-model="ruleForm.name" type="text" /> |
| | | </el-form-item> |
| | | <el-form-item label="纸张宽" prop="width"> |
| | | <el-input |
| | | v-model="ruleForm.width" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="纸张高" prop="height"> |
| | | <el-input v-model="ruleForm.height" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button |
| | | type="primary" |
| | | @click="submitForm(ruleFormRef)" style="margin-left: 300px"> |
| | | 提交 |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | </el-dialog> |
| | | |
| | | |
| | | |
| | | </template> |
| | | |
| | | <style scoped> |