feat 代码优化

src/common/UsbAutoPrint.vue

@@ -68,8 +68,7 @@ export default {
   // 监控data中的数据变化
   watch: {
     printNum: {
-      handler(newVal, oldVal) {
-        console.log(newVal, this.printData);
+      handler() {
         if (JSON.stringify(this.printData) !== "{}") {
           this.printInfo = this.printData;
           this.pringPdf();
@@ -77,9 +76,10 @@ export default {
       },
     },
     usbPrinter: {
-      handler(newVal, oldVal) {
-        console.log('newVal',newVal);
-        this.usbPrinterList = newVal;
+      handler(newVal) {
+        this.usbPrinterList = newVal.filter((v) => {
+          return v.status;
+        });
       },
       deep: true,
       immediate: true,

src/components/shopCompoents/bindUsbPrint.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="shopAdd">
+  <div class="shopAdd" v-loading="!printerList.length" element-loading-text="数据加载中">
     <div class="header">
       <div class="left">
         <div class="head-line">
@@ -100,9 +100,23 @@ export default {
       form: {},
     };
   },
+  // 监听属性 类似于data概念
+  computed: {
+    ...mapGetters(["usbPrinter"]),
+  },
+  // 监控data中的数据变化
+  watch: {
+    usbPrinter: {
+      handler(newVal) {
+        this.printerList = newVal;
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {},
   mounted() {
-    this.getUsbPrint();
+    // this.getUsbPrint();
   },
   methods: {
     ...mapMutations(["SET_USBPRINTER"]),
@@ -117,53 +131,10 @@ export default {
         LODOP.PRINT();
       }, 500);
     },
-    getUsbPrint() {
-      getUsbPrint().then((res) => {
-        if (res.code === 200) {
-          if (res.data.length) {
-            this.dataList = res.data;
-          }
-        }
-        // 获取系统打印机列表
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.getPrinterInfo();
-          }, 500);
-        });
-      });
-    },
     setPinter(i) {
       this.showVisible = true;
       this.form = this.printerList[i];
     },
-    getPrinterInfo() {
-      LODOP = getLodop();
-      let printerCount = LODOP.GET_PRINTER_COUNT();
-      let printerList = [];
-      for (let index = 0; index < printerCount; index++) {
-        printerList.push({ deviceName: LODOP.GET_PRINTER_NAME(index) });
-      }
-      this.printerList = printerList.map((v) => {
-        let obj = this.dataList.find((ele) => {
-          return ele.deviceName === v.deviceName;
-        });
-        if (obj) {
-          v = obj;
-        } else {
-          v.openOrderPrint = 0;
-          v.openOrderCancelPrint = 0;
-          v.printCustomerCount = 1;
-          v.printMerchantCount = 1;
-          v.printKitchenCount = 1;
-          v.width = 58;
-        }
-
-        return v;
-      });
-      this.SET_USBPRINTER(this.printerList)
-      console.log("数量：", printerCount);
-      console.log("打印机：", printerList);
-    },
     save() {
       console.log(this.form);
       this.loading = true;
@@ -174,7 +145,7 @@ export default {
             message: `修改成功！`,
           });
           this.showVisible = false;
-          this.getUsbPrint();
+          this.$store.dispatch("getUsbPrint");
         } else {
           this.$message({
             type: "error",

src/store/index.js

@@ -7,8 +7,8 @@ import { getLodop } from "../common/LodopFuncs.js";
 Vue.use(Vuex);
 
 const state = {
-  userInfo: null || JSON.parse(localStorage.getItem('userInfo')),
-  usbPrinter: [] || JSON.parse(localStorage.getItem('usbPrinter'))
+  userInfo: JSON.parse(localStorage.getItem('userInfo')) || null,
+  usbPrinter: JSON.parse(localStorage.getItem('usbPrinter')) || []
 }
 
 const actions = {
@@ -72,11 +72,9 @@ const mutations = {
     localStorage.setItem('userInfo', JSON.stringify(userInfo));
   },
   SET_USBPRINTER: (state, usbPrinter) => {
-    state.usbPrinter = usbPrinter.filter(v => {
-      return v.status
-    });
+    state.usbPrinter = usbPrinter
     // 防止页面刷新，导致Vuex重启
-    localStorage.setItem('usbPrinter', JSON.stringify(state.usbPrinter));
+    localStorage.setItem('usbPrinter', JSON.stringify(usbPrinter));
   }
 }