出货通知

src/views/salesMange/shipmentMange/packing/index.vue

@@ -272,6 +272,68 @@
         <el-button type="primary" @click="submitFormOne()" size="large" :loading="submitLoading"> 确 定 </el-button>
       </template>
     </el-dialog>
+
+    <el-dialog title="出货通知单" v-if="openPack" v-model="openPack" width="860">
+      <div id="pdfDom" style="width: 800px; padding: 16px; font-size: 12px !important">
+        <div style="font-size: 24px; text-align: center; margin-bottom: 16px">出货通知单</div>
+        <div style="border: 1px solid black">
+          <div style="display: flex; width: 100%">
+            <div style="width: 50%; border-right: 1px solid black; padding-left: 4px">
+              <div style="padding: 8px 0; width: 100%;" v-html="getStyle(packDetail.remark)"></div>
+            </div>
+            <div style="width: 50%; padding-left: 4px">
+              <div style="font-weight: 700">总箱数</div>
+              <div>{{ packDetail.packQuantity }}</div>
+              <div style="font-weight: 700">总毛重(KG)</div>
+              <div>{{ packDetail.roughWeight }}</div>
+              <div style="font-weight: 700">总净重(KG)</div>
+              <div>{{ packDetail.netWeight }}</div>
+              <div style="font-weight: 700">总体积(m³)</div>
+              <div>{{ packDetail.volume }}</div>
+            </div>
+          </div>
+        </div>
+        <div style="height: 16px"></div>
+        <div>
+          <div style="font-weight: 700; padding: 4px 0">THE PACK FOR ABOVE CARGO AS BELOWING SHOWS:</div>
+        </div>
+        <table class="three" cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-bottom: 0">
+          <thead>
+            <th style="text-align: center; width: 10%">货物描述</th>
+            <th style="text-align: center; width: 10%">订单编号</th>
+            <th style="text-align: center; width: 10%">供应商</th>
+            <th style="text-align: center; width: 10%">图片</th>
+            <th style="text-align: center; width: 10%">入箱数量</th>
+            <th style="text-align: center; width: 10%">总箱数</th>
+            <th style="text-align: center; width: 10%">总数量</th>
+            <th style="text-align: center; width: 10%">总净重(KG)</th>
+            <th style="text-align: center; width: 10%">总毛重(KG)</th>
+            <th style="text-align: center; width: 10%">总体积(m³)</th>
+          </thead>
+          <tbody v-if="packDetail.packDetailList && packDetail.packDetailList.length > 0">
+            <template v-for="(item, index) in packDetail.packDetailList">
+              <tr v-for="(row, indexTwo) in item.packDetailProductLists" :key="indexTwo">
+                <td style="text-align: center; width: 10%">{{ row.remark }}</td>
+                <td style="text-align: center; width: 10%">{{ row.contractCode }}</td>
+                <td style="text-align: center; width: 10%">{{ row.supplierName }}</td>
+                <td style="text-align: center; width: 10%"></td>
+                <td style="text-align: center; width: 10%">{{ row.quantity }}</td>
+                <td style="text-align: center; width: 10%" v-if="indexTwo === 0" :rowspan="item.packDetailProductLists.length">{{ item.packQuantity }}</td>
+                <td style="text-align: center; width: 10%" v-if="indexTwo === 0" :rowspan="item.packDetailProductLists.length">{{ item.packQuantity }}</td>
+                <td style="text-align: center; width: 10%" v-if="indexTwo === 0" :rowspan="item.packDetailProductLists.length">{{ item.netWeight }}</td>
+                <td style="text-align: center; width: 10%" v-if="indexTwo === 0" :rowspan="item.packDetailProductLists.length">{{ item.roughWeight }}</td>
+                <td style="text-align: center; width: 10%" v-if="indexTwo === 0" :rowspan="item.packDetailProductLists.length">{{ item.bomVolume }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+      <template #footer>
+        <el-button @click="openPack = false" size="large">取 消</el-button>
+        <el-button type="primary" v-print="printObj" size="large">打印</el-button>
+        <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -841,9 +903,32 @@ const handleClose = () => {
 };
 getSelectData();
 getList();
+const packDetail = ref({
+  packDetailList: [],
+});
+const openPack = ref(false);
 const clickShippingNotice = (row) => {
-  console.log(row);
+  openPack.value = true;
+  proxy.post("/pack/shipmentNotification", { id: row.packId }).then((res) => {
+    packDetail.value = res;
+  });
 };
+const clickDownload = () => {
+  proxy.getPdf("出货通知单PDF文件");
+};
+const getStyle = (text) => {
+  if (text) {
+    return text.replace(/\n|\r\n/g, "<br>");
+  } else {
+    return "";
+  }
+};
+const printObj = ref({
+  id: "pdfDom",
+  popTitle: "",
+  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
+  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
+});
 </script>
 
 <style lang="scss" scoped>
@@ -896,4 +981,22 @@ const clickShippingNotice = (row) => {
     color: #0084ff;
   }
 }
+.three {
+  width: 100%;
+  border: 1px solid black;
+}
+.three thead {
+  text-align: center;
+  line-height: 20px;
+  font-weight: 700;
+}
+.three th {
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+}
+.three td {
+  line-height: 20px;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+}
 </style>