From 2b0480dd3130028b8351c7b0b1ea0599322a968c Mon Sep 17 00:00:00 2001
From: "qianhao.xu" <qianhao.xu@doan-tech.com>
Date: Mon, 8 Apr 2024 11:01:12 +0800
Subject: [PATCH] =?UTF-8?q?wms:=E4=BF=AE=E6=94=B9=E5=87=BA=E5=BA=93?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Print/出库单.vue | 457 ++++++++++++++++----------------
 1 file changed, 233 insertions(+), 224 deletions(-)

diff --git a/src/components/Print/出库单.vue b/src/components/Print/出库单.vue
index 723977c..69d1368 100644
--- a/src/components/Print/出库单.vue
+++ b/src/components/Print/出库单.vue
@@ -1,259 +1,268 @@
 <template>
-	<div>
-		<el-dialog v-loading="loading" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="出库单打印" width="860px">
-			<div class="print" id="printDom" ref="printRef">
-				<div class="print-body-box">
-					<div class="title">出库单 {{ printData.shipmentNum }}</div>
-					<div class="line"></div>
-					<div class="info-box">
-						<div class="info-left">
-							<div>
-								<span>时间：{{ printData.year + '年' + printData.week + '周' + printData.date + '日' }}</span>
-							</div>
-							<div>
-								<span>客户编号：{{ printData.customNo }} </span>
-								<span>客户名称：{{ printData.customName }} </span>
-							</div>
-							<div>
-								<span>客户地址：{{ printData.customAddress }} </span>
-							</div>
-							<div>
-								<span>备注：{{ printData.remarks }} </span>
-							</div>
-						</div>
-						<div class="info-right qr">
-							<vue-qr :text="printData.shipmentNum" :size="100"></vue-qr>
-						</div>
-					</div>
-					<div class="line"></div>
-					<!-- 出库单计划物料列表 -->
-					<div class="table">
-						<div class="table-title">需求物料清单</div>
-						<table title="待出物料" align="center">
-							<thead>
-								<tr>
-									<th>物料号</th>
-									<th>描述</th>
-									<th>需求零件数</th>
-									<th>库存箱数</th>
-									<th>库存零件数</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr v-for="item in printData.materialList">
-									<td>{{ item.partnumber }}</td>
-									<td>{{ item.productName }}</td>
-									<td>{{ item.requireOutNum }}</td>
-									<td>{{ item.packageNum }}</td>
-									<td>{{ item.itemNum }}</td>
-									<!-- <td>{{ item.stockQuantity }}</td>
+  <div>
+    <el-dialog v-loading="loading" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="出库单打印" width="860px">
+      <div class="print" id="printDom" ref="printRef">
+        <div class="print-body-box">
+          <div class="title">出库单 {{ printData.shipmentNum }}</div>
+          <div class="line"></div>
+          <div class="info-box">
+            <div class="info-left">
+              <div>
+                <span>时间：{{ printData.year + '年' + printData.week + '周' + printData.date + '日' }}</span>
+              </div>
+              <div>
+                <span>客户编号：{{ printData.customNo }} </span>
+                <span>客户名称：{{ printData.customName }} </span>
+              </div>
+              <div>
+                <span>客户地址：{{ printData.customAddress }} </span>
+              </div>
+              <div>
+                <span>备注：{{ printData.remarks }} </span>
+              </div>
+            </div>
+            <div class="info-right qr">
+              <vue-qr :text="printData.shipmentNum" :size="100"></vue-qr>
+            </div>
+          </div>
+          <div class="line"></div>
+          <!-- 出库单计划物料列表 -->
+          <div class="table">
+            <div class="table-title">需求物料清单</div>
+            <table title="待出物料" align="center">
+              <thead>
+                <tr>
+                  <th>物料号</th>
+                  <th>描述</th>
+                  <th>需求零件数</th>
+                  <th>需求箱数</th>
+
+                  <th>库存零件数</th>
+                  <th>库存箱数</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in printData.materialList" :key="index">
+                  <td>{{ item.partnumber }}</td>
+                  <td>{{ item.productName }}</td>
+                  <td>{{ item.requireOutNum }}</td>
+                  <td>{{ item.require_pack_num }}</td>
+
+                  <td>{{ item.itemNum }}</td>
+                  <td>{{ item.packageNum }}</td>
+                  <!-- <td>{{ item.stockQuantity }}</td>
       						<td>{{ item.stockQuantity2 }}</td> -->
-								</tr>
-							</tbody>
-						</table>
-					</div>
-					<div class="line"></div>
-					<!-- 自定义排序列表 -->
-					<div class="table">
-						<div class="table-title">计划出库批次清单</div>
-						<table title="出库计划" align="center">
-							<thead>
-								<tr>
-									<th>批次号</th>
-									<th>物料号</th>
-									<th>所属仓库</th>
-									<th>批次箱数</th>
-									<th>批次零件数</th>
-									<th>需求零件数</th>
-									<th>批次时间</th>
-									<th>出库顺序</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr v-if="item.package_code_client !== null" v-for="item in printData.planlList">
-									<td>{{ item.patchcode }}</td>
-									<td>{{ item.materialCode }}</td>
-									<td>{{ item.warehouseCode }}</td>
-									<td>{{ item.packageNum }}</td>
-									<td>{{ item.partnumberNum }}</td>
-									<td>{{ item.requireNum }}</td>
-									<td>{{ item.patchtime }}</td>
-									<td>{{ item.outorder }}</td>
-								</tr>
-								<tr v-else>
-									<td :colspan="8"><div class="line"></div></td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-			<div slot="footer">
-				<el-button @click="close">取消</el-button>
-				<el-button type="primary" @click="handelConfirm">确认打印</el-button>
-			</div>
-		</el-dialog>
-	</div>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="line"></div>
+          <!-- 自定义排序列表 -->
+          <div class="table">
+            <div class="table-title">计划出库批次清单</div>
+            <table title="出库计划" align="center">
+              <thead>
+                <tr>
+                  <th>批次号</th>
+                  <th>物料号</th>
+                  <th>所属仓库</th>
+                  <!-- <th>批次箱数</th>
+                  <th>批次零件数</th> -->
+                  <th>库存箱数</th>
+                  <th>库存零件数</th>
+                  <th>需求零件数</th>
+                  <!-- <th>批次时间</th>
+                  <th>出库顺序</th> -->
+                 
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="item.package_code_client != null" v-for="(item, index) in printData.planlList" :key="index">
+                  <td>{{ item.patchcode }}</td>
+                  <td>{{ item.materialCode }}</td>
+                  <td>{{ item.warehouseCode }}</td>
+                  <!-- <td>{{ item.packageNum }}</td>
+                  <td>{{ item.partnumberNum }}</td> -->
+                  <td>{{ item.inventory_pack_num }}</td>
+                  <td>{{ item.inventory_num }}</td>
+                  <td>{{ item.requireNum }}</td>
+                  <!-- <td>{{ item.patchtime }}</td>
+                  <td>{{ item.outorder }}</td> -->
+                </tr>
+                <tr v-else>
+                  <td :colspan="8"><div class="line"></div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="handelConfirm">确认打印</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script>
 import * as WmOutOrderApi from '@/api/wmsManagement/wmOutOrder.js'
 import print from 'print-js'
 export default {
-	inheritAttrs: false,
-	components: {},
-	props: {
-		printKey: {
-			default: null,
-		},
-	},
-	data() {
-		return {
-			loading: false,
-			clearData: {},
-			// 待打印的数据
-			printData: {
-				shipmentNum: '',
-				customNo: '',
-				customName: '',
-				customAddress: '',
-				remarks: '',
-				year: 2000,
-				week: 0,
-				date: 0,
-				// 出货单需要物料列表
-				materialList: [],
-				// 出货单计划出货列表
-				planlList: [],
-			},
-		}
-	},
-	computed: {},
-	watch: {},
-	created() {
-		this.clearData = JSON.parse(JSON.stringify(this.printData))
-	},
-	mounted() {},
-	methods: {
-		onOpen() {
-			this.getPrintData()
-		},
-		onClose() {
-			this.printData = JSON.parse(JSON.stringify(this.clearData))
-		},
-		close() {
-			this.$emit('update:visible', false)
-		},
-		getPrintData() {
-			this.loading = true
-			setTimeout(() => {
-				this.loading = false
-			}, 30000)
-			// 出库单主键
-			const getKey = this.printKey
-			if (getKey === null) {
-				this.$message('打印参数异常！', getKey)
-				return
-			}
-			WmOutOrderApi.getWmOutOrder(getKey).then((res) => {
-				const { code, data } = res
-				if (code == 200) {
-					// 基本数据
-					this.printData = data
-					// 需求物料清单数据
-					WmOutOrderApi.getOutoderMatrials({ shipment_num: getKey }).then((res) => {
-						if (res.code === 200) {
-							this.printData.materialList = res.data
-						}
-					})
-					// this.loading = false;
-					// return;
-					WmOutOrderApi.generateOutorderplan({ shipment_num: getKey }).then((res) => {
-						if (res.code === 200) {
-							this.printData.planlList = res.data
-							console.log('generateOutorderplan', res.data)
-							// 计划出库批次清单
-							this.loading = false
-						} else {
-							this.$message.error('打印参数异常！' + res.msg + getKey)
-							this.loading = false
-						}
-					})
-				} else {
-					this.$message.error('打印参数异常！' + getKey)
-				}
-			})
-		},
-		handelConfirm() {
-			this.$nextTick(() => {
-				printJS({
-					printable: 'printDom', // 标签元素id
-					type: 'html',
-					header: '',
-					targetStyles: ['*'],
-					font_size: '',
-					style: 'margin: 20px',
-				})
-			})
-		},
-	},
+  inheritAttrs: false,
+  components: {},
+  props: {
+    printKey: {
+      default: null,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      clearData: {},
+      // 待打印的数据
+      printData: {
+        shipmentNum: '',
+        customNo: '',
+        customName: '',
+        customAddress: '',
+        remarks: '',
+        year: 2000,
+        week: 0,
+        date: 0,
+        // 出货单需要物料列表
+        materialList: [],
+        // 出货单计划出货列表
+        planlList: [],
+      },
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.clearData = JSON.parse(JSON.stringify(this.printData))
+  },
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getPrintData()
+    },
+    onClose() {
+      this.printData = JSON.parse(JSON.stringify(this.clearData))
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    getPrintData() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 30000)
+      // 出库单主键
+      const getKey = this.printKey
+      if (getKey === null) {
+        this.$message('打印参数异常！', getKey)
+        return
+      }
+      WmOutOrderApi.getWmOutOrder(getKey).then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+          // 基本数据
+          this.printData = data
+          // 需求物料清单数据
+          WmOutOrderApi.getOutoderMatrials({ shipment_num: getKey }).then((res) => {
+            if (res.code === 200) {
+              this.printData.materialList = res.data
+            }
+          })
+          // this.loading = false;
+          // return;
+          WmOutOrderApi.generateOutorderplan({ shipment_num: getKey }).then((res) => {
+            if (res.code === 200) {
+              this.printData.planlList = res.data
+              console.log('generateOutorderplan', res.data)
+              // 计划出库批次清单
+              this.loading = false
+            } else {
+              this.$message.error('打印参数异常！' + res.msg + getKey)
+              this.loading = false
+            }
+          })
+        } else {
+          this.$message.error('打印参数异常！' + getKey)
+        }
+      })
+    },
+    handelConfirm() {
+      this.$nextTick(() => {
+        printJS({
+          printable: 'printDom', // 标签元素id
+          type: 'html',
+          header: '',
+          targetStyles: ['*'],
+          font_size: '',
+          style: 'margin: 20px',
+        })
+      })
+    },
+  },
 }
 </script>
 <style scoped>
 #printDom {
-	border: 1px solid #000000;
-	padding: 10px;
+  border: 1px solid #000000;
+  padding: 10px;
 }
 .print-body-box {
-	margin: 0 auto;
-	width: 90%;
-	color: #000000;
+  margin: 0 auto;
+  width: 90%;
+  color: #000000;
 }
 .title {
-	width: 100%;
-	text-align: center;
-	font-size: 26px;
-	font-weight: 700;
-	margin-bottom: 10px;
+  width: 100%;
+  text-align: center;
+  font-size: 26px;
+  font-weight: 700;
+  margin-bottom: 10px;
 }
 .info-box {
-	width: 100%;
-	height: 120px;
-	font-size: 16px;
-	font-weight: 600;
-	display: flex;
-	align-items: center;
+  width: 100%;
+  height: 120px;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
 }
 .info-left {
-	width: 80%;
-	display: flex;
-	flex-direction: column;
+  width: 80%;
+  display: flex;
+  flex-direction: column;
 }
 .info-right {
-	width: 20%;
+  width: 20%;
 }
 .qr {
-	width: 100px;
-	height: 100px;
-	text-align: center;
+  width: 100px;
+  height: 100px;
+  text-align: center;
 }
 .line {
-	height: 1px;
-	border-bottom: 1px solid #000000;
+  height: 1px;
+  border-bottom: 1px solid #000000;
 }
 .table {
-	font-size: 16px;
+  font-size: 16px;
 }
 .table-title {
-	margin: 5px;
-	width: 100%;
-	font-size: 18px;
-	font-weight: 600;
-	text-align: center;
+  margin: 5px;
+  width: 100%;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
 }
 table {
-	width: 100%;
+  width: 100%;
 }
 tbody {
-	text-align: center;
+  text-align: center;
 }
 </style>