| | |
| | | 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 QRCode from "qrcode"; |
| | | //语言获取 |
| | | const {t} = useI18n() |
| | | let router = useRouter() |
| | | let produceList = ref([]) |
| | | let details = ref([]) |
| | | let list = ref() |
| | | const details = ref([]) |
| | | |
| | | |
| | | const data = ref({ |
| | | printList:[] |
| | |
| | | |
| | | produceList.value = deepClone(res.data.data) |
| | | |
| | | handleGetQRCode() |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | router.push("/login") |
| | | } |
| | | }) |
| | | |
| | | } |
| | | |
| | | ) |
| | | |
| | | |
| | | const handleGetQRCode = async () => { |
| | | for (let i = 0; i < produceList.value.length; i++) { |
| | | list= produceList.value[i].detail[0].processIdNumber; |
| | | const url = `${list}`; |
| | | // 生成 QR Code 并存储到变量中 |
| | | const qrcode = ref(''); |
| | | qrcode.value = await QRCode.toDataURL(url); |
| | | produceList.value[i].detail[0]["qrcode"]=qrcode.value |
| | | } |
| | | }; |
| | | |
| | | |
| | | |
| | | |
| | | // 打印方法 |
| | | const printFlowCard = () => { |
| | |
| | | </script> |
| | | |
| | | <template> |
| | | <el-button id="printButton" @click="printFlowCard">打印</el-button> |
| | | <el-button id="printButton" @click="printFlowCard();">打印</el-button> |
| | | <div id="printFlowCard"> |
| | | <table v-for="(item,id) in produceList" id="contentTable" :key="id"> |
| | | <thead> |
| | |
| | | <div id="bj" style="float: right;font-size: 28px">{{ id+1 }}</div> |
| | | <div>常州市吉利玻璃有限公司</div> |
| | | <div>生产流程卡</div> |
| | | <div style="text-align: right;font-weight: bolder">流程卡号: {{ itemFlow.process_id }}/{{ itemFlow.technologyNumber }} 共 {{flowCardCount}} 架</div> |
| | | <div style="text-align: right;font-weight: bolder">流程卡号: {{ |
| | | itemFlow.process_id |
| | | }}/{{ itemFlow.technologyNumber }} 共 {{ flowCardCount }} 架 |
| | | </div> |
| | | </td> |
| | | </tr> |
| | | <tr v-for="(items,index) in item.detail" :key="index"> |
| | | <td>客户名称:</td> |
| | | <td class="tdNowrap">客户名称:</td> |
| | | <td colspan="2">{{ items.customer_name }}</td> |
| | | <td>项目名称:</td> |
| | | <td class="tdNowrap">项目名称:</td> |
| | | <td colspan="2">{{ items.project }}</td> |
| | | <td style="width:100px">工艺流程:</td> |
| | | <td class="tdNowrap">工艺流程:</td> |
| | | <td colspan="16">{{ items.process }}</td> |
| | | </tr> |
| | | <tr v-for="(itemTr,index) in item.detail" :key="index"> |
| | | <td>磨边类型:</td> |
| | | <td class="tdNowrap">磨边类型:</td> |
| | | <td colspan="2">{{ itemTr.edging_type }}</td> |
| | | <td>单片名称:</td> |
| | | <td class="tdNowrap">单片名称:</td> |
| | | <td colspan="2">{{ itemTr.glass_child }}</td> |
| | | <td>产品名称:</td> |
| | | <td class="tdNowrap">产品名称:</td> |
| | | <td colspan="16">{{ itemTr.product_name }}</td> |
| | | </tr> |
| | | |
| | | </thead> |
| | | <tbody> |
| | | <tr> |
| | | <td rowspan='2'>序号</td> |
| | | <td rowspan='2'>宽*高</td> |
| | |
| | | <td rowspan='2'>周长</td> |
| | | <td rowspan='2'>半径</td> |
| | | <td rowspan='2'>备注</td> |
| | | <td colspan='2'>切割</td> |
| | | <td colspan='2'>磨边</td> |
| | | <td colspan='2'>钢化</td> |
| | | <td colspan='2'>中空</td> |
| | | <td colspan='2'>包装</td> |
| | | <td colspan='2'></td> |
| | | <td colspan='2'></td> |
| | | <td colspan='2'></td> |
| | | <td v-for="(itemPr,index) in item.processList" :key="index" colspan="2">{{ itemPr.process }}</td> |
| | | <!-- <td colspan='2'>切割</td>--> |
| | | <!-- <td colspan='2'>磨边</td>--> |
| | | <!-- <td colspan='2'>钢化</td>--> |
| | | <!-- <td colspan='2'>中空</td>--> |
| | | <!-- <td colspan='2'>包装</td>--> |
| | | <!-- <td colspan='2'></td>--> |
| | | <!-- <td colspan='2'></td>--> |
| | | <!-- <td colspan='2'></td>--> |
| | | </tr> |
| | | <tr> |
| | | <td>正品</td> |
| | |
| | | <td>正品</td> |
| | | <td>次品</td> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | |
| | | <tr v-for="(itemDatile,index) in item.detailList" :key="index"> |
| | | <td>{{ itemDatile.order_number }}</td> |
| | | <td>{{ itemDatile.child_width }}</td> |
| | | <td>{{ itemDatile.quantity }}</td> |
| | | <td class="item">{{ itemDatile.quantity }}</td> |
| | | <td>{{ itemDatile.total_area }}</td> |
| | | <td>{{ itemDatile.perimeter }}</td> |
| | | <td>{{ itemDatile.bend_radius }}</td> |
| | |
| | | </tr> |
| | | </tbody> |
| | | <tfoot> |
| | | <tr> |
| | | <td colspan="24" v-for="(itemsum,index) in item.detail" :key="index"> |
| | | <tr style="height: 14px"> |
| | | <td v-for="(itemsum,index) in item.detail" :key="index" colspan="24"> |
| | | 数量: |
| | | <label>{{ itemsum.quantity }}</label> |
| | | 面积: |
| | | <label>{{ itemsum.gross_area }}</label> |
| | | 重量: |
| | | <label>{{ itemsum.gross_area }}</label> |
| | | <label>{{ itemsum.weight }}</label> |
| | | </td> |
| | | </tr> |
| | | <tr v-for="(itemtextarea,index) in item.detail" :key="index"> |
| | | <td colspan="6" rowspan="6" style="width: 450px;height: 150px "> |
| | | <div style="width: 100%;height: 100%"><textarea style="height: 98%;width: 98%">{{ itemtextarea.processing_note }}</textarea></div> |
| | | <td colspan="6" rowspan="6" style="width: 480px;height: 100px "> |
| | | <div style="width: 100%;height: 100%"><textarea style="height: 99%;width: 99%">{{ itemtextarea.processing_note }}</textarea> |
| | | </div> |
| | | </td> |
| | | <td>完工签名</td> |
| | | <td></td> |
| | |
| | | <td></td> |
| | | <td></td> |
| | | </tr> |
| | | <tr> |
| | | <td>接受签名</td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | </tr> |
| | | <!-- <tr>--> |
| | | <!-- <td>接受签名</td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- </tr>--> |
| | | <tr> |
| | | <td>生产日期</td> |
| | | <td></td> |
| | |
| | | <td></td> |
| | | <td></td> |
| | | </tr> |
| | | <tr> |
| | | <td>架子编号</td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | <td></td> |
| | | </tr> |
| | | <tr> |
| | | <td colspan="17" rowspan="2"> |
| | | <div style="width: 60px;height: 60px;background-color: red"></div> |
| | | <!-- <tr>--> |
| | | <!-- <td>架子编号</td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- <td></td>--> |
| | | <!-- </tr>--> |
| | | <tr v-for="(qrCodeItem,index) in item.detail" :key="index"> |
| | | <td rowspan="2"> |
| | | <div class='qrCode' style="width: 80px;height: 80px;"> |
| | | <img :src= qrCodeItem.qrcode> |
| | | <!-- {{--> |
| | | <!-- getUrl(qrCodeItem.process_id)--> |
| | | <!-- }}--> |
| | | |
| | | </div> |
| | | |
| | | </td> |
| | | <td colspan="16"> |
| | | <span style="float: left;font-weight: bolder">{{ qrCodeItem.processIdNumber }}</span> |
| | | </td> |
| | | |
| | | </tr> |
| | | </tfoot> |
| | | </table> |
| | |
| | | #printFlowCard { |
| | | margin-top: -40px; |
| | | text-align: center; |
| | | //font-weight: bolder; |
| | | height: 600px; |
| | | //font-weight: bolder; height: 600px; |
| | | } |
| | | |
| | | #contentTable { |
| | |
| | | |
| | | #contentTable tr td { |
| | | border: 1px solid black; |
| | | height: 22px; |
| | | height: 18px; |
| | | font-weight: bolder; |
| | | } |
| | | |
| | | #contentTable tbody{ |
| | | height: 22px; |
| | | white-space: nowrap; |
| | | |
| | | } |
| | | |
| | | #contentTable tbody td { |
| | | width: 50px; |
| | | .tdNowrap { |
| | | white-space: nowrap; |
| | | |
| | | } |
| | | |
| | | #contentTable tfoot{ |
| | |
| | | } |
| | | |
| | | |
| | | /* 在 .footer 元素后始终插入分页符 */ |
| | | @media print { |
| | | #contentTable {page-break-after: always;} |
| | | |
| | | tbody { |
| | | display: table-row-group; |
| | | } |
| | | |
| | | table { |
| | | page-break-before: always; |
| | | } |
| | | |
| | | thead { display:table-header-group;page-break-inside:avoid; } |
| | | tbody { display:table-row-group;} |
| | | tfoot { display:table-footer-group;page-break-inside:avoid; } |
| | | table { |
| | | page-break-inside: auto; |
| | | } |
| | | |
| | | thead { |
| | | display: table-header-group; |
| | | } |
| | | |
| | | tfoot { |
| | | display: table-footer-group; |
| | | page-break-inside: avoid; |
| | | } |
| | | } |
| | | |
| | | .qrCode img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | |
| | | </style> |