| | |
| | | list:null,//勾选的数据 |
| | | faceOrientation:null,//内外面 |
| | | type:null,//标签模板 |
| | | lableType:null//标签类型 |
| | | lableType:null,//标签类型 |
| | | titleList:null,//标题 |
| | | switch:null,//判断是否为新打印, |
| | | lastList:[], |
| | | detailType:null |
| | | }) |
| | | |
| | | const {currentRoute} = useRouter() |
| | | const route = currentRoute.value |
| | | let type = props.type |
| | | let faceOrientation = props.faceOrientation |
| | | if (type.indexOf("英文")>-1 && faceOrientation==="此面为室内面"){ |
| | | faceOrientation='INSIDE' |
| | | } |
| | | else if (type.indexOf("英文")>-1 && faceOrientation==="此面为室外面"){ |
| | | faceOrientation='OUTSIDE' |
| | | } |
| | | |
| | | let lableType = props.lableType |
| | | let switchType = props.switch |
| | | let detailType= props.detailType |
| | | data.value.printList = JSON.parse(props.list) |
| | | onMounted(() => { |
| | | request.post(`/processCard/getPrintCustomDataProjectNoDetail/${type}`, data.value).then((res) => { |
| | | request.post(`/processCard/getPrintCustomDataProjectNoDetail/${type}/${detailType}`, data.value).then((res) => { |
| | | if (res.code == 200) { |
| | | console.log(res.data.data) |
| | | produceList.value = deepClone(res.data.title) |
| | | list.value = deepClone(res.data.data) |
| | | const data = produceList.value[0].value |
| | | dataList = JSON.parse(`[${data}]`); |
| | | labelList = dataList[0] |
| | | const printElements = dataList[0].panels[0].printElements; |
| | | let a = [] |
| | | printElements.forEach(element => { |
| | | if(element.options.field==='table'){ |
| | | element.options.columns[0].forEach(elements => { |
| | | if(elements.field){ |
| | | a.push({ |
| | | title: elements.title, |
| | | name: elements.field |
| | | } |
| | | ) |
| | | } |
| | | }) |
| | | }else{ |
| | | a.push({ |
| | | title: element.options.title, |
| | | name: element.options.field |
| | | }) |
| | | } |
| | | }) |
| | | labelList = a |
| | | for (let i = 0; i < list.value.length; i++) { |
| | | let count = list.value[i].data.length |
| | | for (let j = 0; j < count; j++) { |
| | | lastList.value.push(list.value[i].data[j]) |
| | | if (detailType==0){ |
| | | for (let k = 0; k < list.value[i].data[j].quantity; k++) { |
| | | props.lastList.push(list.value[i].data[j]) |
| | | } |
| | | |
| | | } |
| | | else { |
| | | //for (let k = 0; k < list.value[i].data[j].quantity; k++) { |
| | | props.lastList.push(list.value[i].data[j]) |
| | | //} |
| | | } |
| | | } |
| | | } |
| | | } else { |
| | |
| | | </script> |
| | | |
| | | <template> |
| | | <div id="print" :class="company.printLabel.className.custom.printFlowCardName()"> |
| | | <div v-for="(item1,index) in lastList" :class="company.printLabel.className.custom.entiretyName()"> |
| | | <div class="row4">{{ faceOrientation }}</div> |
| | | <div v-for="(item,id) in labelList" :class="company.printLabel.className.custom.contentRowName()"> |
| | | <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row1" contenteditable="true" @input="updateProductName($event, id,index)" v-text="item.title+':'+item1[item.name]"></div> |
| | | <!-- <div class="row2" style="width: 100%;"><input class="contentRow2" v-model="item1[item.name]" @keyup="updataProductName()" style="border: none;"/></div>--> |
| | | <!-- <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row2" style="width: 100%;" contenteditable="true" @input="updateProductName($event, id)" v-text="item1[item.name]"></div>--> |
| | | </div> |
| | | <div v-html="company.printLabel.custom(item1)"></div> |
| | | <div id="print" :class="company.printLabel.className.semi.printFlowCardName()"> |
| | | <div v-for="(item1,index) in props.lastList" :class="company.printLabel.className.semi.entiretyName()"> |
| | | <div class="row4">{{ faceOrientation }}</div> |
| | | <div v-for="(item,id) in labelList" :class="company.printLabel.className.semi.contentRowName()"> |
| | | <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row1" contenteditable="true" @input="updateProductName($event, id,index)" v-text="item.title+':'+item1[item.name]"></div> |
| | | <!-- <div class="row2" style="width: 100%;"><input class="contentRow2" v-model="item1[item.name]" @keyup="updataProductName()" style="border: none;"/></div>--> |
| | | <!-- <div v-if="item1[item.name] != null && item1[item.name] !== ''" class="row2" style="width: 100%;" contenteditable="true" @input="updateProductName($event, id)" v-text="item1[item.name]"></div>--> |
| | | </div> |
| | | <!-- <div v-html="company.printLabel.custom(item1)"></div>--> |
| | | <div v-if="(id + 1) % 2 === 0" class="pagebreak"></div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | |
| | | |
| | | |
| | |
| | | padding: 0; |
| | | } |
| | | |
| | | textarea { |
| | | border: none; /* 取消默认边框 */ |
| | | padding: 0; /* 取消默认内边距 */ |
| | | margin: 0; /* 取消默认外边距 */ |
| | | resize: none; /* 禁用调整大小功能 */ |
| | | font-family: Arial; /* 设置自定义字体 */ |
| | | font-size: 12px; /* 设置自定义字体大小 */ |
| | | line-height: 1; /* 设置行高 */ |
| | | width: 100%; /* 设置宽度为100% */ |
| | | height: auto; /* 高度根据内容自动调整 */ |
| | | box-sizing: border-box; /* 使宽高包括内边距和边框 */ |
| | | overflow-y: hidden; |
| | | } |
| | | |
| | | |
| | | body { |
| | | body{ |
| | | overflow: hidden; |
| | | font-family: Arial; |
| | | font-size: 7px; |
| | | |
| | | } |
| | | |
| | | #printButton { |
| | |
| | | width: 100px; |
| | | } |
| | | |
| | | .print{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | /*成*/ |
| | | .printFlowCard_finished { |
| | | /* |
| | | font-family: 'Microsoft YaHei', '微软雅黑', sans-serif; |
| | | */ |
| | | flex-wrap: nowrap; |
| | | |
| | | /*半*/ |
| | | .printFlowCard_semi { |
| | | flex-wrap: wrap; |
| | | font-size: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content:space-between; |
| | | } |
| | | |
| | | |
| | | /*成*/ |
| | | .entirety_finished { |
| | | |
| | | /*半*/ |
| | | .entirety_semi { |
| | | width: 45%; |
| | | display: flex; |
| | | text-align: center; |
| | | flex-direction: column; |
| | | margin-left: 10px; |
| | | width: 100%; |
| | | height: 100%; |
| | | flex-direction:column; |
| | | margin: 8px; |
| | | |
| | | } |
| | | |
| | | /*div{ |
| | | font-family: 'Microsoft YaHei', '微软雅黑', sans-serif; |
| | | }*/ |
| | | |
| | | .row3 { |
| | | .row3{ |
| | | text-align: center; |
| | | /*display: flex; |
| | | justify-content:space-evenly;*/ |
| | | } |
| | | |
| | | .row3 label { |
| | | margin-top: 28px; |
| | | .contentRow{ |
| | | display: flex; |
| | | text-align: center; |
| | | } |
| | | |
| | | .contentRow { |
| | | label{ |
| | | font-weight: bolder; |
| | | display: flex; |
| | | text-align: center; |
| | | } |
| | | |
| | | .contentRow .row1{ |
| | | width: 100%; |
| | | } |
| | | |
| | | label { |
| | | /*font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;*/ |
| | | } |
| | | |
| | | .contentRow .row1 { |
| | | width: 100%; |
| | | } |
| | | |
| | | .entirety_finished .row4 { |
| | | font-weight: bolder; |
| | | .entirety_semi .row4{ |
| | | text-align: right; |
| | | margin-right: 20px; |
| | | } |
| | | |
| | | .contentRow .row1, .contentRow .row2 { |
| | | .contentRow .row1,.contentRow .row2{ |
| | | text-align: left; |
| | | } |
| | | |
| | | input{ |
| | | width: 100%; |
| | | border: none; |
| | | } |
| | | |
| | | |
| | | @page { |
| | | size: auto; /* auto is the initial value */ |
| | | margin: 13mm 5mm 0mm 7mm; /* this affects the margin in the printer settings */ |
| | | } |
| | | |
| | | @media print { |
| | | @page { |
| | | size: auto; /* auto is the initial value */ |
| | | margin: 13mm 5mm 0mm 7mm; /* this affects the margin in the printer settings */ |
| | | } |
| | | div { |
| | | page-break-inside: avoid; |
| | | } |
| | | |
| | | .entirety_finished { |
| | | page-break-before: always; |
| | | |
| | | |
| | | .pagebreak { |
| | | page-break-after: always; |
| | | } |
| | | |
| | | } |
| | | |
| | | .printFlowCard_finished1 { |
| | | .printFlowCard_semi1 { |
| | | flex-wrap: wrap; |
| | | font-size: 8pt; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | |
| | | /*成*/ |
| | | .entirety_finished1 { |
| | | .entirety_semi1 { |
| | | width: 50%; |
| | | display: flex; |
| | | text-align: center; |
| | | flex-direction: column; |
| | | margin-left: 10px; |
| | | width: 337px; |
| | | height: 120px; |
| | | margin-left: -10px; |
| | | height: 80px; |
| | | |
| | | } |
| | | |