From e46c5406bbbe7bf67f96c9a8ce363496eac9fbd3 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 02 一月 2025 22:10:51 +0800
Subject: [PATCH] 工单流程卡打印优化
---
src/views/components/printTemplate.vue | 242 ++++++++++++++++++++++++++++++++++++++++++++++++
src/views/tigerprojects/system/lowcode/normal/mainTable.vue | 24 +++-
src/api/tigerapi/model/mesModel.ts | 6 +
3 files changed, 266 insertions(+), 6 deletions(-)
diff --git a/src/api/tigerapi/model/mesModel.ts b/src/api/tigerapi/model/mesModel.ts
index 1d41e5c..68a4f99 100644
--- a/src/api/tigerapi/model/mesModel.ts
+++ b/src/api/tigerapi/model/mesModel.ts
@@ -542,12 +542,16 @@
export interface WoFlowCardPrintJson {
ID: string;
OrderNo: string;
+ Status: string;
ItemCode: string;
ItemDesc: string;
SapCode: string;
Model: string;
Qty: number;
- Remark: string;
+ SoRemark: string;
+ MoRemark: string;
+ Customer: string;
+ DemandCode: string;
RouteStr: string;
Items: PrintWoPickList[]
}
diff --git a/src/views/components/printTemplate.vue b/src/views/components/printTemplate.vue
new file mode 100644
index 0000000..ebcb779
--- /dev/null
+++ b/src/views/components/printTemplate.vue
@@ -0,0 +1,242 @@
+<template>
+ <div id="print-area">
+ <div class="item" v-for="(items, index) in curPrintInfo" :key="items.ID">
+ <div v-if="index == 0">
+ <div class="flex relative">
+ <div style="position: absolute; left: 20px; height: 90px; margin: 25px 2px 2px">
+ <QrCode
+ :value="curOrderNo"
+ :width="80"
+ :height="80"
+ :options="{ margin: 5 }"
+ ref="qrDiyRef"
+ />
+ </div>
+ </div>
+ <div style="display: flex; flex-direction: row; height: 25px; margin: 95px 15px 2px;border-bottom: 1px solid black; /* 绾挎潯鐨勯鑹插拰瀹藉害 */ font-size: 12px;">
+ <div style="width: 30%"></div>
+ <div style="width: 18%"></div>
+ <div style="width: 27%">鎵撳嵃浜猴細{{ useUserStore().userInfo?.username }}</div>
+ <div style="width: 25%">鎵撳嵃鏃ユ湡锛歿{ formatToDate(new Date()) }}</div>
+ </div>
+ <div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
+ <div style="width: 15%">浜у搧缂栧彿:</div>
+ <div style="width: 35%">{{ items.ItemCode }}</div>
+ <div style="width: 15%">浜у搧鍨嬪彿:</div>
+ <div style="width: 35%">{{ items.Model }}</div>
+ </div>
+ <div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
+ <div style="width: 15%">SAP鏂欏彿:</div>
+ <div style="width: 35%">{{ items.SapCode }}</div>
+ <div style="width: 15%">瀹㈡埛鍚嶇О:</div>
+ <div style="width: 35%">{{ items.Customer }}</div>
+ </div>
+ <div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
+ <div style="width: 15%">鐢熶骇璁㈠崟:</div>
+ <div style="width: 35%">{{ items.OrderNo }}</div>
+ <div style="width: 15%">闇�姹傚垎绫�:</div>
+ <div style="width: 35%">{{ items.DemandCode }}</div>
+ </div>
+ <div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
+ <div style="width: 15%">鐢熶骇鏁伴噺:</div>
+ <div style="width: 35%">{{ items.Qty }}</div>
+ <div style="width: 15%">鍗曟嵁鐘舵��:</div>
+ <div style="width: 35%">{{ items.Status }}</div>
+ </div>
+ <div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
+ <div style="width: 15%">浜у搧鎻忚堪:</div>
+ <div style="width: 85%">{{ items.ItemDesc }}</div>
+ </div>
+ <div style="display: flex; flex-direction: row; height: 20px; margin: 15px 20px 2px;font-size: 12px;">
+ <div style="width: 15%">宸ヨ壓璺嚎:</div>
+ <div style="width: 85%">{{ items.RouteStr }}</div>
+ </div>
+ </div>
+ <div class="main">
+ <table class=" ">
+ <tr>
+ <th class="material_table_td" style="width: 7%">琛屽彿</th>
+ <th class="material_table_td" style="width: 10%">SAP鏂欏彿</th>
+ <th class="material_table_td" style="width: 10%">鏂欏彿缂栫爜</th>
+ <th class="material_table_td" style="width: 17%">鎻忚堪</th>
+ <th class="material_table_td" style="width: 7%">澶囨枡鏁伴噺</th>
+ <th class="material_table_td" style="width: 13%">琛屽娉�</th>
+ <th class="material_table_td" style="width: 9%">搴撲綅</th>
+ <th class="material_table_td" style="width: 9%">07搴撲綅</th>
+ <th class="material_table_td" style="width: 9%">鍙戞枡鏂瑰紡</th>
+ <th class="material_table_td" style="width: 9%"></th>
+ </tr>
+ <tr v-for="(item, indexs) in items.Items" :key="indexs">
+ <!-- <td class="material_table_td">
+ {{ Number(indexs) + 1 }}
+ </td> -->
+ <td class="instore_td">
+ {{ item.LineNo }}
+ </td>
+ <td class="instore_td">
+ {{ item.SapCode }}
+ </td>
+ <td class="instore_td">
+ {{ item.ItemCode }}
+ </td>
+ <td class="instore_td">
+ {{ item.ItemDesc }}
+ </td>
+ <td class="instore_td">
+ {{ item.PickQty }}
+ </td>
+ <td class="instore_td">
+ {{ item.LineRemark }}
+ </td>
+ <td class="instore_td">
+ {{ item.WhCode }}
+ </td>
+ <td class="instore_td">
+ {{ item.WhCode07 }}
+ </td>
+ <td class="instore_td">
+ {{ item.Method }}
+ </td>
+ <td class="instore_td">
+ {{ }}
+ </td>
+ </tr>
+ <tr v-if="index == Number(curPrintInfo?.length) - 1 && items.Items.length < 11" v-for="n in (11-items.Items.length)" :key="n">
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ <td class="instore_td2"> </td>
+ </tr>
+ <tr v-if="index == Number(curPrintInfo?.length) - 1 && items.Items.length <= 11">
+ <td colspan="5" style="height:70px; font-size: 12px;vertical-align: top;">鐢熶骇璁㈠崟澶囨敞锛歿{ items.MoRemark }}</td>
+ <td colspan="5" style="height:70px; font-size: 12px;vertical-align: top;">閿�鍞鍗曞娉細{{ items.SoRemark }}</td>
+ </tr>
+ </table>
+ </div>
+ <div class="footer flex">
+ <div style="width: 40%"></div>
+ <div style="width: 10%">绗瑊{ index + 1 }}椤�</div>
+ <div style="width: 10%">鍏眥{ curPrintInfo?.length }}椤�</div>
+ <div style="width: 40%"></div>
+ </div>
+ </div>
+ </div>
+</template>
+<script lang="ts" setup>
+ import { ref, toRefs } from 'vue';
+ import { QrCode } from '/@/components/Qrcode/index';
+ import { formatToDate } from '/@/utils/dateUtil';
+ import { useUserStore } from '/@/store/modules/user';
+ import { useWoFlowcardStore } from '/@/store/modules/woflowcardprint';
+ import { storeToRefs } from 'pinia';
+
+ const props = defineProps({
+ tableData: { type: Object as PropType<any[]> },
+ wokerorder: { type: String },
+ });
+ const { tableData, wokerorder } = toRefs(props);
+ const useWoFlowCard = useWoFlowcardStore();
+ const { curOrderNo, curPrintInfo } = storeToRefs(useWoFlowCard);
+</script>
+<style lang="scss" scoped>
+ #print-area {
+ position: absolute;
+ inset: 0;
+ background-color: #fff;
+
+ .item {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ margin-right: 10px;
+ margin-left: 10px;
+ font-family: SimSun, "瀹嬩綋", serif;
+ // background-color: bisque;
+ page-break-after: always;
+
+ .head {
+ z-index: 1;
+ width: 100%;
+ margin: 20px;
+ background-color: azure;
+ font-size: 36px;
+ font-weight: bold;
+ line-height: 100px;
+ text-align: left;
+ }
+
+ .main {
+ display: flex;
+ flex: 1;
+ // align-items: center;
+ justify-content: center;
+ margin-top: 10px;
+ padding: 15px;
+
+ table {
+ border-collapse: collapse;
+ }
+
+ table,
+ th,
+ td {
+ border: solid 1px black;
+ }
+
+ tr > th {
+ height: 60px;
+ }
+
+ /* 璁剧疆鏍囬瀛楁瀛椾綋澶у皬 */
+ // :deep() {
+ // .ant-table-tbody > tr > td {
+ // font-size: 3px; /* 淇敼涓轰綘鎯宠鐨勫瓧浣撳ぇ灏� */
+ // line-height: 18px;
+ // }
+
+ // .ant-table-thead > tr > th {
+ // line-height: 21px;
+ // }
+
+ // .ant-table-title {
+ // font-size: 4px; /* 璁剧疆浣犳兂瑕佺殑瀛椾綋澶у皬 */
+ // }
+ // }
+
+ .instore_td {
+ height: 60px;
+ border: 1px solid #000;
+ font-family: SimSun, "瀹嬩綋", serif;
+ font-size: 6px; /* 淇敼涓轰綘鎯宠鐨勫瓧浣撳ぇ灏� */
+ line-height: 20px;
+ text-align: center;
+ word-break: break-all;
+ }
+
+ .material_table_td {
+ border: 1px solid #000;
+ font-size: 6px; /* 淇敼涓轰綘鎯宠鐨勫瓧浣撳ぇ灏� */
+ line-height: 20px;
+ text-align: center;
+ word-break: break-all;
+ }
+ }
+
+ .footer {
+ display: flex;
+ margin-bottom: 15px;
+ background-color: #eee;
+ font-size: 14px;
+ // font-weight: bold;
+ line-height: 100px;
+ text-align: center;
+ }
+ }
+ }
+</style>
diff --git a/src/views/tigerprojects/system/lowcode/normal/mainTable.vue b/src/views/tigerprojects/system/lowcode/normal/mainTable.vue
index eaf79b4..508c9b1 100644
--- a/src/views/tigerprojects/system/lowcode/normal/mainTable.vue
+++ b/src/views/tigerprojects/system/lowcode/normal/mainTable.vue
@@ -740,15 +740,17 @@
.item {
display: flex;
flex-direction: column;
- page-break-after: always;
height: 100%;
-
+ margin-right: 10px;
+ margin-left: 10px;
+ font-family: SimSun, "瀹嬩綋", serif;
+ page-break-after: always;
.head {
z-index: 1;
width: 100%;
background-color: azure;
- font-size: 22px;
+ font-size: 20px;
font-weight: bold;
line-height: 100px;
text-align: center;
@@ -758,6 +760,7 @@
display: flex;
flex: 1;
justify-content: center;
+ margin-top: 10px;
padding: 15px;
table {
@@ -777,6 +780,16 @@
.instore_td {
border: 1px solid #000;
font-size: 12px;
+ line-height: 16px;
+ text-align: center;
+ word-break: break-all;
+ }
+
+ .instore_td2 {
+ height: 60px;
+ border: 1px solid #000;
+ font-family: SimSun, "瀹嬩綋", serif;
+ font-size: 12px; /* 淇敼涓轰綘鎯宠鐨勫瓧浣撳ぇ灏� */
line-height: 20px;
text-align: center;
word-break: break-all;
@@ -784,8 +797,9 @@
.material_table_td {
border: 1px solid #000;
- font-size: 14px;
- line-height: 20px;
+ font-size: 12px;
+ height: 25px;
+ line-height: 18px;
text-align: center;
word-break: break-all;
}
--
Gitblit v1.9.3