| New file |
| | |
| | | <script setup> |
| | | import request from "@/utils/request" |
| | | import {ElDatePicker, ElMessage} from "element-plus" |
| | | import {nextTick, onMounted, onUnmounted, reactive, ref, watch} from "vue" |
| | | import {Search} from "@element-plus/icons-vue" |
| | | import {useRouter} from 'vue-router' |
| | | import {changeFilterEvent, filterChanged} from "@/hook" |
| | | import {useI18n} from 'vue-i18n' |
| | | import deepClone from "@/utils/deepClone"; |
| | | import companyInfo from "@/stores/sd/companyInfo" |
| | | |
| | | const company = companyInfo() |
| | | //语言获取 |
| | | const {t} = useI18n() |
| | | let router = useRouter() |
| | | let produceList = ref([]) |
| | | let labelList = ref([]) |
| | | let titleList = ref([]) |
| | | let dataList = ref([]) |
| | | let list = ref([]) |
| | | let lastList=ref([]) |
| | | |
| | | let filterData = ref({}) |
| | | |
| | | const data = ref({ |
| | | printList: [] |
| | | }) |
| | | |
| | | |
| | | const {currentRoute} = useRouter() |
| | | const route = currentRoute.value |
| | | data.value.printList = JSON.parse(route.query.printList) |
| | | const type = route.query.type |
| | | const faceOrientation = route.query.faceOrientation |
| | | const lableType = route.query.lableType |
| | | const printType=route.query.printType |
| | | |
| | | onMounted(() => { |
| | | if (printType == 1) { |
| | | request.post(`/processCard/getSelectPrintLabel1`, data.value).then((res) => { |
| | | if (res.code == 200) { |
| | | produceList.value = deepClone(res.data.data) |
| | | for (let i = 0; i < produceList.value.length; i++) { |
| | | let count = produceList.value[i].data.length |
| | | for (let j = 0; j < count; j++) { |
| | | for (let k = 0; k < produceList.value[i].data[j].quantity; k++) { |
| | | labelList.value.push(produceList.value[i].data[j]) |
| | | } |
| | | |
| | | } |
| | | } |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | router.push("/login") |
| | | } |
| | | }) |
| | | |
| | | }else if(printType==2){ |
| | | request.post(`/processCard/getSelectPrintLabelDetails`, data.value).then((res) => { |
| | | if (res.code == 200) { |
| | | produceList.value = deepClone(res.data.data) |
| | | for (let i = 0; i < produceList.value.length; i++) { |
| | | let count = produceList.value[i].data.length |
| | | for (let j = 0; j < count; j++) { |
| | | for (let k = 0; k < produceList.value[i].data[j].quantity; k++) { |
| | | labelList.value.push(produceList.value[i].data[j]) |
| | | } |
| | | |
| | | } |
| | | } |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | router.push("/login") |
| | | } |
| | | }) |
| | | } |
| | | |
| | | }) |
| | | |
| | | |
| | | // 打印方法 |
| | | const printFlowCard = () => { |
| | | // 需要打印的局部区域赋予"print-wrap"的id |
| | | let el = document.getElementById("printFlowCard"); |
| | | let doc = document; |
| | | let body = doc.body || doc.getElementsByTagName("body")[0]; |
| | | let printId = "print-" + Date.now(); |
| | | |
| | | // 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式) |
| | | let content = doc.createElement("div"); |
| | | content.id = printId; |
| | | |
| | | // 样式控制与打印无关的元素隐藏 |
| | | let style = doc.createElement("style"); |
| | | style.innerHTML = |
| | | "body>#" + |
| | | printId + |
| | | "{display:none}@media print{" + |
| | | "@page {" + |
| | | " size: auto; " + |
| | | " margin: 2mm 2mm 2mm 2mm; " + |
| | | " }body>:not(#" + |
| | | printId + |
| | | "){display:none !important}body>#" + |
| | | printId + |
| | | "{display:block;padding-top:1px}}"; |
| | | // |
| | | content.innerHTML = el.outerHTML; |
| | | // // console.log("el.outerHTML", el.outerHTML); |
| | | body.appendChild(style); |
| | | |
| | | // 与style元素设置的样式相配合 |
| | | // 把打印内容的元素添加到body(作为body的子元素,可用body的子选择器 '>' 控制打印样式) |
| | | body.appendChild(content); |
| | | setTimeout(() => { |
| | | window.print(); |
| | | body.removeChild(content); |
| | | body.removeChild(style); |
| | | }, 20); |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <el-button id="printButton" @click="printFlowCard();">{{ $t('basicData.print') }}</el-button> |
| | | <div id="printFlowCard" > |
| | | <template v-for="(item,id) in labelList"> |
| | | <div id="entirety" > |
| | | <div class="row1"> |
| | | <span>{{ item.customer_name }}</span> |
| | | <span>{{ item.order_id }}</span> |
| | | <span v-if="item.process.includes('夹胶')">胶片</span> |
| | | <span v-else-if="item.process.includes('中空')">中空</span> |
| | | <span v-else-if="item.process.includes('百叶')">百叶</span> |
| | | <span v-else></span> |
| | | </div> |
| | | <div class="row2"> |
| | | <span>{{item.project}}</span> |
| | | <span>{{ item.building_number }}</span> |
| | | <span v-if="item.bend_radius!=null">R={{item.bend_radius}}</span> |
| | | </div> |
| | | <div class="row3" v-if="item.other_columns!=null&&(JSON.parse(item.other_columns).S02!=null)"> <span>{{JSON.parse(item.other_columns).S02}}={{item.quantity}}</span> </div> |
| | | <div class="row3" v-else><span>{{Math.round(item.width)}}x{{Math.round(item.height)}}={{item.quantity}}</span></div> |
| | | <div class="row5"> |
| | | <span>{{item.glass_child}}</span> |
| | | <span>{{item.processing_note}}</span> |
| | | </div> |
| | | </div> |
| | | <div style="width: 20px" v-if="id%2===0"></div> |
| | | </template> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <style scoped> |
| | | * { |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | |
| | | #printButton { |
| | | /*margin-top: -20px;*/ |
| | | width: 100px; |
| | | } |
| | | |
| | | #printFlowCard { |
| | | display: flex; |
| | | justify-content: left; |
| | | flex-wrap: wrap; |
| | | width: 500px; |
| | | } |
| | | |
| | | #entirety{ |
| | | text-align: center; |
| | | width: 48%; |
| | | height: 160px; |
| | | border: black 1px; |
| | | word-wrap: break-word; |
| | | } |
| | | |
| | | .row1 { |
| | | font-size: 12pt; |
| | | font-weight: bold; |
| | | height: 35px; |
| | | } |
| | | .row1 span { |
| | | font-size: 17pt; |
| | | } |
| | | .row2 { |
| | | font-size: 12pt; |
| | | font-weight: bold; |
| | | height: 35px; |
| | | } |
| | | .row2 span { |
| | | font-size: 17pt; |
| | | } |
| | | span { |
| | | font-size: 12pt; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .row3 { |
| | | margin-top: -5px; |
| | | height: 35px; |
| | | font-size: 22pt; |
| | | font-weight: bolder; |
| | | line-height: 35px; |
| | | } |
| | | .row3 span{ |
| | | font-size: 24pt; |
| | | } |
| | | |
| | | .row5 { |
| | | height: 50px; |
| | | font-weight: bold; |
| | | font-size: 14pt; |
| | | } |
| | | .row5 span { |
| | | font-size: 16pt; |
| | | } |
| | | |
| | | .row6 { |
| | | height: 20px; |
| | | font-weight: bold; |
| | | font-size: 10pt; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | @media print { |
| | | div { |
| | | page-break-inside: avoid; |
| | | } |
| | | @page { |
| | | size: auto; /* auto is the initial value */ |
| | | margin: 13mm 4mm 0mm 4mm; /* this affects the margin in the printer settings */ |
| | | |
| | | } |
| | | |
| | | } |
| | | |
| | | </style> |