pages/pointPutawayJob 文件迁移Vue2升级Vue3 8/2-10/25

src/pages/pointPutawayJob/index.vue

@@ -97,7 +97,7 @@
   </view>
 </template>
 
-<script>
+<script setup>
 import {
   getJimuPutawayJobDetail,
   queryInspectionFreeFlag
@@ -113,75 +113,70 @@ 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,//显示检验指引单
-    }
-  },
+import { ref, nextTick, watch} from 'vue'
+import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
 
-  methods: {
-    // 打印
-    printImage() {
+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 (this.tabIndex == 1) {
-        testModule.doHTMLPrint(this.newHtmlContent1)
+  if (tabIndex.value === 1) {
+    testModule.doHTMLPrint(newHtmlContent1.value)
   } else {
-        testModule.doHTMLPrint(this.newHtmlContent)
+    testModule.doHTMLPrint(newHtmlContent.value)
   }
   // #endif
-    },
-    // 读取html文件
-    readFile(path, callback) {
+}
+
+const readFile = (path, callback) => {
   // #ifdef APP
   plus.io.resolveLocalFileSystemURL(path, function (entry) {
     entry.file(function (file) {
-          var reader = new plus.io.FileReader();
+      const reader = new plus.io.FileReader()
       reader.onloadend = function (e) {
-            callback(e.target.result);
-          };
-          reader.readAsText(file);
+        callback(e.target.result)
+      }
+      reader.readAsText(file)
     }, function (e) {
-          console.log("读取文件失败：" + e.message);
-        });
+      console.log('读取文件失败：' + e.message)
+    })
   }, function (e) {
-        console.log("获取图片资源失败：" + e.message);
-      });
+    console.log('获取图片资源失败：' + e.message)
+  })
   // #endif
-    },
-    formatDate(val) {
+}
+
+const formatDate = (val) => {
   return dateFormat(val)
-    },
-    // 获取采购上架检验html
-    getPointPutawayJobHtml() {
-      this.$nextTick(async () => {
+}
+
+const getPointPutawayJobHtml = () => {
+  nextTick(async () => {
     let str = ''
     // #ifdef APP-PLUS
-        this.readFile(htmlFileUrl, (htmlContent) => {
-          this.newHtmlContent = htmlContent
-          this.data.sublist.forEach(item => {
+    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">
@@ -205,20 +200,19 @@ export default {
           </div>
         `
       })
-          this.newHtmlContent = this.newHtmlContent.replace(
-              "mainBody", str); //替换物品代码
-        });
+      newHtmlContent.value = newHtmlContent.value.replace('mainBody', str)
+    })
     // #endif
   })
-    },
-    // 获取采购收货指引单html
-    getPurchaseReceiptJobHtml() {
-      this.$nextTick(async () => {
+}
+
+const getPurchaseReceiptJobHtml = () => {
+  nextTick(async () => {
     let str = ''
     // #ifdef APP-PLUS
-        this.readFile(htmlFileUrl1, (htmlContent) => {
-          this.newHtmlContent1 = htmlContent
-          this.data1.inspectDTOList.forEach(item => {
+    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" >
@@ -226,7 +220,7 @@ export default {
               <div class="left">
                 <div class="left-item">
                   <div class="label">发货单号</div>
-											<div>${this.data1.asnNumber}</div>
+                  <div>${data1.value.asnNumber}</div>
                 </div>
                 <div class="left-item">
                   <div class="label">物料代码</div>
@@ -253,7 +247,7 @@ export default {
                   <div>${item.sampleQty}</div>
                 </div>
         `
-            let str2 = ``
+        let str2 = ''
         if (item.haveInspectionRequest === '0') {
           str2 = `
             <div class="left-item">
@@ -277,122 +271,101 @@ export default {
         `
         str += str1 + str2 + str3
       })
-          this.newHtmlContent1 = this.newHtmlContent1.replace(
-              "mainBody", str); //替换物品代码
-        });
+      newHtmlContent1.value = newHtmlContent1.value.replace('mainBody', str)
+    })
     // #endif
   })
-    },
-    getTableSubList() {
-      if (this.data.sublist.length > this.pageSize) {
-        const array = this.data.sublist.slice(
-            (this.currentPage - 1) * this.pageSize,
-            this.currentPage * this.pageSize
-        )
+}
+
+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) {
-          this.showTableSubList = [...this.showTableSubList, ...array]
-          this.currentPage += 1
+      showTableSubList.value = [...showTableSubList.value, ...array]
+      currentPage.value += 1
     }
   } else {
-        this.showTableSubList = this.data.sublist
+    showTableSubList.value = data.value.sublist
   }
-    },
-    getTableInspectDTOList() {
-      if (this.data1.inspectDTOList.length > this.pageSize1) {
-        const array = this.data1.inspectDTOList.slice(
-            (this.currentPage1 - 1) * this.pageSize1,
-            this.currentPage1 * this.pageSize1
-        )
+}
+
+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) {
-          this.showTableInspectDTOList = [...this.showTableInspectDTOList, ...array]
-          this.currentPage1 += 1
+      showTableInspectDTOList.value = [...showTableInspectDTOList.value, ...array]
+      currentPage1.value += 1
     }
   } else {
-        this.showTableInspectDTOList = this.data1.inspectDTOList
-      }
-    },
-    showMessage(message) {
-      this.$refs.comMessage.showMessage(message, res => {
-        if (res) {
-
-        }
-      });
-    },
-  },
-  watch: {
-    isLoadFinish: {
-      handler(newVal, oldVal) {
-        if (newVal == true) {
-          // 读取html文件将文件中的内容图换成当前页面的数据
+    showTableInspectDTOList.value = data1.value.inspectDTOList
   }
-      },
-      immediate: true
+}
 
+const showMessage = (message) => {
+  comMessage.value.showMessage(message, res => {
+    if (res) {
     }
-  },
+  })
+}
 
-  onLoad(option) {
+onLoad((option) => {
   if (option.data) {
-      this.data = JSON.parse(decodeURIComponent(option.data));
-      this.isHaveOn = true
+    data.value = JSON.parse(decodeURIComponent(option.data))
+    isHaveOn.value = true
   }
   if (option.number) {
-      this.number = option.number;
+    number.value = option.number
   }
-  },
-  async onShow() {
-    // 获取上架指引单
-    if (this.data.ids) {
-      await getJimuPutawayJobDetail({
-        masterIds: this.data.ids
-      }).then(res => {
-        this.data.sublist = res.data
-        this.getTableSubList()
+})
+
+onShow(async () => {
+  if (ids.value) {
+    await getJimuPutawayJobDetail({ masterIds: ids.value }).then(res => {
+      data.value.sublist = res.data
+      getTableSubList()
     })
   }
 
-    if (this.data.ids && !this.number) {
-      this.tabIndex = 2
+  if (ids.value && !number.value) {
+    tabIndex.value = 2
   }
-    // 获取采购收货检验指引单
-    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
+
+  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
       }
-        this.getTableInspectDTOList()
-      })
-          .catch(error => {
-            this.$refs.comMessage.showMessage(error, res => {
+      getTableInspectDTOList()
+    }).catch(error => {
+      comMessage.value.showMessage(error, res => {
         if (res) {
-
         }
-            });
+      })
     })
   }
-
-    this.getPointPutawayJobHtml()
-    this.getPurchaseReceiptJobHtml()
-  },
-  onReachBottom() {
-    if (this.tabIndex == 1) {
-      if (this.showTableInspectDTOList != this.data1.inspectDTOList.length) {
-        this.getTableInspectDTOList()
+  getPointPutawayJobHtml()
+  getPurchaseReceiptJobHtml()
+})
+
+onReachBottom(() => {
+  if (tabIndex.value === 1) {
+    if (showTableInspectDTOList.value.length !== data1.value.inspectDTOList.length) {
+      getTableInspectDTOList()
     }
   } else {
-      if (this.showTableSubList.length != this.data.sublist.length) {
-        this.getTableSubList()
+    if (showTableSubList.value.length !== data.value.sublist.length) {
+      getTableSubList()
     }
   }
+})
 
-
+watch(isLoadFinish, (newVal, oldVal) => {
+  if (newVal === true) {
   }
-}
+}, { immediate: true })
+
 </script>
 
 <style lang="scss">