| | |
| | | data.value.printList = JSON.parse(route.query.printList) |
| | | const type = route.query.type |
| | | const faceOrientation = route.query.faceOrientation |
| | | const lableType = route.query.lableType |
| | | |
| | | onMounted(() => { |
| | | request.post(`/processCard/getSelectPrintCustomLabel/${type}`, data.value).then((res) => { |
| | | if (res.code == 200) { |
| | | |
| | | produceList.value = deepClone(res.data.title) |
| | | list.value = deepClone(res.data.data) |
| | | const quantity = res.data.quantity |
| | | console.log(quantity) |
| | | const data = produceList.value[0].value |
| | | dataList = JSON.parse(`[${data}]`); |
| | | labelList = dataList[0] |
| | | for (let i = 0; i < list.value.length; i++) { |
| | | let count= list.value[i].quantity |
| | | for (let j = 0; j < quantity; j++) { |
| | | lastList.value.push(list.value[i]) |
| | | |
| | | let count= list.value[i].data.length |
| | | for (let j = 0; j < count; j++) { |
| | | for (let k = 0; k < list.value[i].data[j].quantity; k++){ |
| | | lastList.value.push(list.value[i].data[j]) |
| | | } |
| | | } |
| | | } |
| | | console.log(lastList.value) |
| | | console.log(labelList) |
| | | |
| | | |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | router.push("/login") |
| | |
| | | }) |
| | | |
| | | } |
| | | |
| | | ) |
| | | |
| | | |
| | | // 打印方法 |
| | | const printFlowCard = () => { |
| | | // 需要打印的局部区域赋予"print-wrap"的id |
| | | let el = document.getElementById("printFlowCard"); |
| | | let el = document.getElementById("print"); |
| | | let doc = document; |
| | | let body = doc.body || doc.getElementsByTagName("body")[0]; |
| | | let printId = "print-" + Date.now(); |
| | |
| | | |
| | | <template> |
| | | <el-button id="printButton" @click="printFlowCard();">{{ $t('basicData.print') }}</el-button> |
| | | <div id="printFlowCard"> |
| | | <div v-for="(item1,id) in lastList" id="entirety"> |
| | | <div class="row4">{{faceOrientation}}</div> |
| | | <div v-for="(item,id) in labelList" class="contentRow"> |
| | | <div class="row1">{{ item.title }}:</div> |
| | | <div class="row2">{{ item1.order[item.name] }}</div> |
| | | <div class="printFlowCard_finished" id="print"> |
| | | <div v-for="(item1,id) in lastList" class="entirety_finished"> |
| | | <div class="row4">{{faceOrientation}}</div> |
| | | <div v-for="(item,id) in labelList" class="contentRow"> |
| | | <div class="row1">{{ item.title }}:</div> |
| | | <div class="row2">{{ item1.order[item.name] }}</div> |
| | | |
| | | </div> |
| | | <div class="row3"><label>W:</label>{{ item1.width }} <label>H:</label>{{ item1.height }}</div> |
| | | </div> |
| | | <div class="row3"><label>W:</label>{{ item1.width }} <label>H:</label>{{ item1.height }}</div> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | padding: 0; |
| | | } |
| | | |
| | | body{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | #printButton { |
| | | margin-top: -20px; |
| | | width: 100px; |
| | | } |
| | | |
| | | #printFlowCard { |
| | | /*成*/ |
| | | .printFlowCard_finished { |
| | | flex-wrap: wrap; |
| | | font-size: 20px; |
| | | margin-left: 5px; |
| | | margin-top: 15px; |
| | | font-size: 16px; |
| | | margin-left: 6px; |
| | | display: flex; |
| | | flex-direction:column; |
| | | } |
| | | |
| | | #entirety { |
| | | |
| | | /*成*/ |
| | | .entirety_finished { |
| | | display: flex; |
| | | text-align: center; |
| | | width: 250px; |
| | | margin-bottom: 10px; |
| | | flex-direction:column; |
| | | |
| | | } |
| | | |
| | | |
| | | .row3{ |
| | | text-align: center; |
| | | } |
| | | |
| | | .contentRow{ |
| | | display: flex; |
| | | text-align: center; |
| | | border: red solid 1px; |
| | | } |
| | | |
| | | label{ |
| | |
| | | } |
| | | |
| | | .row1{ |
| | | width: 20%; |
| | | font-weight: bolder; |
| | | } |
| | | |
| | |
| | | |
| | | @page { |
| | | size: auto; /* auto is the initial value */ |
| | | margin: 7mm 2mm 2mm 0mm /* this affects the margin in the printer settings */ |
| | | |
| | | margin: 12mm 4mm 0mm 2mm; /* this affects the margin in the printer settings */ |
| | | } |
| | | |
| | | @media print { |
| | | div { |
| | | page-break-inside: avoid; |
| | | } |
| | | |
| | | .entirety_finished { |
| | | page-break-before: always; |
| | | page-break-after: always; |
| | | } |
| | | |
| | | } |
| | | |
| | | </style> |