From 55af9befa26e4855666646efa9a39f16ec31cb96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BF=97=E5=9B=BD?= <854933521@qq.com>
Date: Tue, 5 Nov 2024 14:45:33 +0800
Subject: [PATCH] =?UTF-8?q?pages/pointPutawayJob=20=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BBVue2=E5=8D=87=E7=BA=A7Vue3=208/2-10/25?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/pointPutawayJob/index.vue | 499 +++++++++++++---------------
 1 file changed, 236 insertions(+), 263 deletions(-)

diff --git a/src/pages/pointPutawayJob/index.vue b/src/pages/pointPutawayJob/index.vue
index 47c0b190..528f7110 100644
--- a/src/pages/pointPutawayJob/index.vue
+++ b/src/pages/pointPutawayJob/index.vue
@@ -97,7 +97,7 @@
   </view>
 </template>
 
-<script>
+<script setup>
 import {
   getJimuPutawayJobDetail,
   queryInspectionFreeFlag
@@ -113,286 +113,259 @@ import {
   pathToBase64
 } from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
 // #ifdef APP
-var testModule = uni.requireNativePlugin("TestModule")
+let testModule = uni.requireNativePlugin("TestModule")
 // #endif
 
-export default {
-  name: 'pointPutawayJob',
-  data() {
-    return {
-      data: {
-        sublist: []
-      },
-      newHtmlContent: '', //打印传入的html
-      newHtmlContent1: '', //打印传入的html
-      isLoadFinish: false,
-      ids: '',
-      tabIndex: 1,
-      data1: '',
-      currentPage: 1,
-      pageSize: 3,
-      showTableSubList: [],
-      showTableInspectDTOList: [],
-
-      currentPage1: 1,
-      pageSize1: 20,
-      number: '',
-      isHaveOn: false, //显示上架指引单
-      // isHaveInspect:false,//显示检验指引单
-    }
-  },
-
-  methods: {
-    // 打印
-    printImage() {
-      // #ifdef APP
-      if (this.tabIndex == 1) {
-        testModule.doHTMLPrint(this.newHtmlContent1)
-      } else {
-        testModule.doHTMLPrint(this.newHtmlContent)
+import { ref, nextTick, watch} from 'vue'
+import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
+
+const data = ref({
+  sublist: []
+})
+const newHtmlContent = ref('')
+const newHtmlContent1 = ref('')
+const isLoadFinish = ref(false)
+const ids = ref('')
+const tabIndex = ref(1)
+const data1 = ref('')
+const currentPage = ref(1)
+const pageSize = ref(3)
+const showTableSubList = ref([])
+const showTableInspectDTOList = ref([])
+const currentPage1 = ref(1)
+const pageSize1 = ref(20)
+const number = ref('')
+const isHaveOn = ref(false)
+const comMessage = ref(null)
+
+const printImage = () => {
+  // #ifdef APP
+  if (tabIndex.value === 1) {
+    testModule.doHTMLPrint(newHtmlContent1.value)
+  } else {
+    testModule.doHTMLPrint(newHtmlContent.value)
+  }
+  // #endif
+}
+
+const readFile = (path, callback) => {
+  // #ifdef APP
+  plus.io.resolveLocalFileSystemURL(path, function (entry) {
+    entry.file(function (file) {
+      const reader = new plus.io.FileReader()
+      reader.onloadend = function (e) {
+        callback(e.target.result)
       }
-      // #endif
-    },
-    // 读取html文件
-    readFile(path, callback) {
-      // #ifdef APP
-      plus.io.resolveLocalFileSystemURL(path, function (entry) {
-        entry.file(function (file) {
-          var reader = new plus.io.FileReader();
-          reader.onloadend = function (e) {
-            callback(e.target.result);
-          };
-          reader.readAsText(file);
-        }, function (e) {
-          console.log("读取文件失败：" + e.message);
-        });
-      }, function (e) {
-        console.log("获取图片资源失败：" + e.message);
-      });
-      // #endif
-    },
-    formatDate(val) {
-      return dateFormat(val)
-    },
-    // 获取采购上架检验html
-    getPointPutawayJobHtml() {
-      this.$nextTick(async () => {
-        let str = ''
-        // #ifdef APP-PLUS
-        this.readFile(htmlFileUrl, (htmlContent) => {
-          this.newHtmlContent = htmlContent
-          this.data.sublist.forEach(item => {
-            str += `<div class="box" style="page-break-before:always;" ><br />
-								<div class="top">
-									<div class="mb-kw">
-										目标库位：<div>${item.toLocationCode}</div>
-									</div>
-									<div class="mb-bo">
-									<div class="mb-left">
-										<div class="mb-text">
-											物料号：<div>${item.itemCode}asjkdhfksjahfkljashfklsdh</div>
-										</div>
-										<div class="mb-text">
-											托包装号：<div>${item.packingNumber}</div>
-										</div>
-									</div>
-									<div class="mb-right">
-										<div class="mb-text">
-											数量：<div>${item.qty}${item.uom}</div>
-										</div>
-									</div>
-									</div>
-								</div>
-							`
-          })
-          this.newHtmlContent = this.newHtmlContent.replace(
-              "mainBody", str); //替换物品代码
-        });
-        // #endif
-      })
-    },
-    // 获取采购收货指引单html
-    getPurchaseReceiptJobHtml() {
-      this.$nextTick(async () => {
-        let str = ''
-        // #ifdef APP-PLUS
-        this.readFile(htmlFileUrl1, (htmlContent) => {
-          this.newHtmlContent1 = htmlContent
-          this.data1.inspectDTOList.forEach(item => {
-            let str1 = `
-							<div class="box" style="page-break-before:always;"><br />
-								<div class="relative" >
-									<div class="q">Q</div>
-									<div class="left">
-										<div class="left-item">
-											<div class="label">发货单号</div>
-											<div>${this.data1.asnNumber}</div>
-										</div>
-										<div class="left-item">
-											<div class="label">物料代码</div>
-											<div>${item.itemCode}</div>
-										</div>
-										<div class="left-item">
-											<div class="label">物料名称</div>
-											<div>${item.itemName}</div>
-										</div>
-										<div class="left-item">
-											<div class="label">供应商</div>
-											<div>${item.supplierCode}</div>
-										</div>
-										<div class="left-item">
-											<div class="label">供应商批次</div>
-											<div>${item.supplierBatch}</div>
-										</div>
-										<div class="left-item">
-											<div class="label">到货数量</div>
-											<div>${item.quantityQty}</div>
-										</div>
-										<div class="left-item">
-											<div class="label">抽检数量</div>
-											<div>${item.sampleQty}</div>
-										</div>
-							`
-            let str2 = ``
-            if (item.haveInspectionRequest === '0') {
-              str2 = `
-								<div class="left-item">
-									<div style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</div>
-								</div>`
-            } else if (item.haveInspectionRequest === '2') {
-              str2 = `
-								<div  class="left-item">
-									<div style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</div>
-								</div>`
-            } else if (item.haveInspectionRequest === '3') {
-              str2 = `
-								<div class="left-item">
-									<div style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</div>
-								</div>`
-            }
-            let str3 = `
-									</div>
-								</div>
-							</div>
-							`
-            str += str1 + str2 + str3
-          })
-          this.newHtmlContent1 = this.newHtmlContent1.replace(
-              "mainBody", str); //替换物品代码
-        });
-        // #endif
+      reader.readAsText(file)
+    }, function (e) {
+      console.log('读取文件失败：' + e.message)
+    })
+  }, function (e) {
+    console.log('获取图片资源失败：' + e.message)
+  })
+  // #endif
+}
+
+const formatDate = (val) => {
+  return dateFormat(val)
+}
+
+const getPointPutawayJobHtml = () => {
+  nextTick(async () => {
+    let str = ''
+    // #ifdef APP-PLUS
+    readFile(htmlFileUrl, (htmlContent) => {
+      newHtmlContent.value = htmlContent
+      data.value.sublist.forEach(item => {
+        str += `<div class="box" style="page-break-before:always;" ><br />
+          <div class="top">
+            <div class="mb-kw">
+              目标库位：<div>${item.toLocationCode}</div>
+            </div>
+            <div class="mb-bo">
+              <div class="mb-left">
+                <div class="mb-text">
+                  物料号：<div>${item.itemCode}asjkdhfksjahfkljashfklsdh</div>
+                </div>
+                <div class="mb-text">
+                  托包装号：<div>${item.packingNumber}</div>
+                </div>
+              </div>
+              <div class="mb-right">
+                <div class="mb-text">
+                  数量：<div>${item.qty}${item.uom}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        `
       })
-    },
-    getTableSubList() {
-      if (this.data.sublist.length > this.pageSize) {
-        const array = this.data.sublist.slice(
-            (this.currentPage - 1) * this.pageSize,
-            this.currentPage * this.pageSize
-        )
-        if (array.length > 0) {
-          this.showTableSubList = [...this.showTableSubList, ...array]
-          this.currentPage += 1
-        }
-      } else {
-        this.showTableSubList = this.data.sublist
-      }
-    },
-    getTableInspectDTOList() {
-      if (this.data1.inspectDTOList.length > this.pageSize1) {
-        const array = this.data1.inspectDTOList.slice(
-            (this.currentPage1 - 1) * this.pageSize1,
-            this.currentPage1 * this.pageSize1
-        )
-        if (array.length > 0) {
-          this.showTableInspectDTOList = [...this.showTableInspectDTOList, ...array]
-          this.currentPage1 += 1
-        }
-      } else {
-        this.showTableInspectDTOList = this.data1.inspectDTOList
-      }
-    },
-    showMessage(message) {
-      this.$refs.comMessage.showMessage(message, res => {
-        if (res) {
+      newHtmlContent.value = newHtmlContent.value.replace('mainBody', str)
+    })
+    // #endif
+  })
+}
 
+const getPurchaseReceiptJobHtml = () => {
+  nextTick(async () => {
+    let str = ''
+    // #ifdef APP-PLUS
+    readFile(htmlFileUrl1, (htmlContent) => {
+      newHtmlContent1.value = htmlContent
+      data1.value.inspectDTOList.forEach(item => {
+        let str1 = `
+          <div class="box" style="page-break-before:always;"><br />
+            <div class="relative" >
+              <div class="q">Q</div>
+              <div class="left">
+                <div class="left-item">
+                  <div class="label">发货单号</div>
+                  <div>${data1.value.asnNumber}</div>
+                </div>
+                <div class="left-item">
+                  <div class="label">物料代码</div>
+                  <div>${item.itemCode}</div>
+                </div>
+                <div class="left-item">
+                  <div class="label">物料名称</div>
+                  <div>${item.itemName}</div>
+                </div>
+                <div class="left-item">
+                  <div class="label">供应商</div>
+                  <div>${item.supplierCode}</div>
+                </div>
+                <div class="left-item">
+                  <div class="label">供应商批次</div>
+                  <div>${item.supplierBatch}</div>
+                </div>
+                <div class="left-item">
+                  <div class="label">到货数量</div>
+                  <div>${item.quantityQty}</div>
+                </div>
+                <div class="left-item">
+                  <div class="label">抽检数量</div>
+                  <div>${item.sampleQty}</div>
+                </div>
+        `
+        let str2 = ''
+        if (item.haveInspectionRequest === '0') {
+          str2 = `
+            <div class="left-item">
+              <div style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</div>
+            </div>`
+        } else if (item.haveInspectionRequest === '2') {
+          str2 = `
+            <div class="left-item">
+              <div style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</div>
+            </div>`
+        } else if (item.haveInspectionRequest === '3') {
+          str2 = `
+            <div class="left-item">
+              <div style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</div>
+            </div>`
         }
-      });
-    },
-  },
-  watch: {
-    isLoadFinish: {
-      handler(newVal, oldVal) {
-        if (newVal == true) {
-          // 读取html文件将文件中的内容图换成当前页面的数据
-        }
-      },
-      immediate: true
+        let str3 = `
+              </div>
+            </div>
+          </div>
+        `
+        str += str1 + str2 + str3
+      })
+      newHtmlContent1.value = newHtmlContent1.value.replace('mainBody', str)
+    })
+    // #endif
+  })
+}
 
+const getTableSubList = () => {
+  if (data.value.sublist.length > pageSize.value) {
+    const array = data.value.sublist.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
+    if (array.length > 0) {
+      showTableSubList.value = [...showTableSubList.value, ...array]
+      currentPage.value += 1
     }
-  },
+  } else {
+    showTableSubList.value = data.value.sublist
+  }
+}
 
-  onLoad(option) {
-    if (option.data) {
-      this.data = JSON.parse(decodeURIComponent(option.data));
-      this.isHaveOn = true
-    }
-    if (option.number) {
-      this.number = option.number;
-    }
-  },
-  async onShow() {
-    // 获取上架指引单
-    if (this.data.ids) {
-      await getJimuPutawayJobDetail({
-        masterIds: this.data.ids
-      }).then(res => {
-        this.data.sublist = res.data
-        this.getTableSubList()
-      })
+const getTableInspectDTOList = () => {
+  if (data1.value.inspectDTOList.length > pageSize1.value) {
+    const array = data1.value.inspectDTOList.slice((currentPage1.value - 1) * pageSize1.value, currentPage1.value * pageSize1.value)
+    if (array.length > 0) {
+      showTableInspectDTOList.value = [...showTableInspectDTOList.value, ...array]
+      currentPage1.value += 1
     }
+  } else {
+    showTableInspectDTOList.value = data1.value.inspectDTOList
+  }
+}
 
-    if (this.data.ids && !this.number) {
-      this.tabIndex = 2
+const showMessage = (message) => {
+  comMessage.value.showMessage(message, res => {
+    if (res) {
     }
-    // 获取采购收货检验指引单
-    if (this.number) {
-      await queryInspectionFreeFlag({
-        number: this.number
-      }).then(async res1 => {
-        this.data1 = res1.data
-        this.data1.inspectDTOList = this.data1.inspectDTOList.filter(item => item.sampleQty >
-            0)
-        if (this.data1 && this.data1.inspectDTOList && this.data1.inspectDTOList.length == 0 && this.data.ids) {
-          this.tabIndex = 2
-        }
-        this.getTableInspectDTOList()
-      })
-          .catch(error => {
-            this.$refs.comMessage.showMessage(error, res => {
-              if (res) {
+  })
+}
 
-              }
-            });
-          })
-    }
+onLoad((option) => {
+  if (option.data) {
+    data.value = JSON.parse(decodeURIComponent(option.data))
+    isHaveOn.value = true
+  }
+  if (option.number) {
+    number.value = option.number
+  }
+})
+
+onShow(async () => {
+  if (ids.value) {
+    await getJimuPutawayJobDetail({ masterIds: ids.value }).then(res => {
+      data.value.sublist = res.data
+      getTableSubList()
+    })
+  }
 
-    this.getPointPutawayJobHtml()
-    this.getPurchaseReceiptJobHtml()
-  },
-  onReachBottom() {
-    if (this.tabIndex == 1) {
-      if (this.showTableInspectDTOList != this.data1.inspectDTOList.length) {
-        this.getTableInspectDTOList()
-      }
-    } else {
-      if (this.showTableSubList.length != this.data.sublist.length) {
-        this.getTableSubList()
+  if (ids.value && !number.value) {
+    tabIndex.value = 2
+  }
+
+  if (number.value) {
+    await queryInspectionFreeFlag({ number: number.value }).then(async res1 => {
+      data1.value = res1.data
+      data1.value.inspectDTOList = data1.value.inspectDTOList.filter(item => item.sampleQty > 0)
+      if (data1.value && data1.value.inspectDTOList && data1.value.inspectDTOList.length === 0 && ids.value) {
+        tabIndex.value = 2
       }
+      getTableInspectDTOList()
+    }).catch(error => {
+      comMessage.value.showMessage(error, res => {
+        if (res) {
+        }
+      })
+    })
+  }
+  getPointPutawayJobHtml()
+  getPurchaseReceiptJobHtml()
+})
+
+onReachBottom(() => {
+  if (tabIndex.value === 1) {
+    if (showTableInspectDTOList.value.length !== data1.value.inspectDTOList.length) {
+      getTableInspectDTOList()
     }
+  } else {
+    if (showTableSubList.value.length !== data.value.sublist.length) {
+      getTableSubList()
+    }
+  }
+})
 
-
+watch(isLoadFinish, (newVal, oldVal) => {
+  if (newVal === true) {
   }
-}
+}, { immediate: true })
+
 </script>
 
 <style lang="scss">