update 更新包装托盘打印

public/index.html

@@ -60,7 +60,7 @@
   <!-- 生产环境 -->
   <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
     <script>
-      window.SITE_CONFIG['apiURL'] = 'http://10.196.233.155:8080/pms-am';
+      window.SITE_CONFIG['apiURL'] = 'http://10.196.233.155/pms-am';
     </script>
   <% } %>
 </head>

src/components/PrintDom.vue

@@ -32,13 +32,21 @@
       <span>{{ datetime.toLocaleDateString() }}</span>
       <span>{{ datetime.toLocaleTimeString() }}</span>
     </h4>
-    <h2 class="material-code" style="font-size: 20px; margin: 10px 0">884797</h2>
+    <!-- 物料号 -->
-    <h2 class="brand" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">RX-GZ-CN</h2>
+    <h2 class="material-code" style="font-size: 20px; margin: 10px 0">{{ dataForm.pdtCode }}</h2>
-    <h3 class="bom-code" style="font-size: 14px; margin: 10px 0">MGGZ 5725 KA</h3>
+    <!-- 牌号 -->
-    <h2 class="shape" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">TG14/175</h2>
+    <h2 class="brand" style="font-size: 16px; letter-spacing: 1px; margin: 10px 0">{{ dataForm.brand }}</h2>
-    <h3 class="order-id" style="font-size: 14px; margin: 10px 0">Po: 50024779</h3>
+    <!-- 配方号 -->
+    <h3 class="bom-code" style="font-size: 14px; margin: 10px 0">{{ dataForm.bomCode }}</h3>
+    <!-- 砖型 -->
+    <h2 class="shape" style="font-size: 20px; letter-spacing: 1px; margin: 10px 0">
+      {{ dataForm.shapeCode }}
+    </h2>
+    <!-- 生产订单 -->
+    <h3 class="order-id" style="font-size: 14px; margin: 10px 0">{{ dataForm.orderCode }}</h3>
+    <!-- 客户 -->
     <h3 class="client" style="font-size: 14px; text-transform: uppercase; margin: 10px 0">
-      chongqing linagyou k
+      {{ dataForm.customer }}
     </h3>
     <h2
       class="sale-order-id sale-item-id"
@@ -49,10 +57,20 @@
         justify-content: space-between;
         margin: 10px 0;
       ">
-      <span>22301675</span>
+      <!-- 托盘号 -->
-      <span>00006</span>
+      <span>{{ dataForm.code }}</span>
+      <!-- 销售订单号  -->
+      <span>{{ dataForm.saleNo }}</span>
     </h2>
-    <h2 class="delivery-time" style="font-size: 20px; margin: 10px 0">2022.12.18</h2>
+    <!-- 销售订单发货时间 -->
+    <h2 class="delivery-time" style="font-size: 18px; margin: 10px 0">
+      {{
+        new Date(dataForm.deliveryTime).toLocaleDateString() +
+        " " +
+        new Date(dataForm.deliveryTime).toLocaleTimeString()
+      }}
+    </h2>
+    <!-- 托盘类型： 满托 尾托 余托 -->
     <h2
       class="pan-no"
       style="
@@ -60,24 +78,34 @@
         border: 1px solid #000;
         font-size: 18px;
         margin: 10px 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', '微软雅黑',
+          'Microsoft YaHei UI', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
+          'WenQuanYi Micro Hei', sans-serif;
         /* background: #000; */
         /* color: #fff; */
       ">
-      Pallet 1
+      {{ palletType }}
+      <!-- {{ dataForm.code }} -->
     </h2>
+
     <div
       class="bottom-area"
       style="margin-bottom: 8px; display: flex; align-items: flex-start; justify-content: space-between">
+      <!-- 二维码 -->
       <div
         class="qrcode"
         style="flex-shrink: 0; width: 128px; height: 128px; /* border: 1px solid #0003; */">
         <img id="qrcode" style="width: 100%; height: 100%" />
       </div>
       <div class="" style="text-align: right">
-        <h2 class="shape-count" style="font-size: 20px; margin: 0 0 10px 8px">2890</h2>
+        <!-- 订单生产总砖数 -->
-        <h2 class="shape-placed" style="font-size: 20px; margin: 0 0 10px 8px">120</h2>
+        <h2 class="shape-count" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.prodqty }}</h2>
-        <h2 class="shape-24" style="font-size: 20px; margin: 0 0 10px 8px">24x120</h2>
+        <!-- 实际码放在托盘上的砖数 -->
-        <h2 class="shape-1" style="font-size: 20px; margin: 0 0 10px 8px">1x10</h2>
+        <h2 class="shape-placed" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.realQty }}</h2>
+        <!-- 需要码放 24 托木托盘，每托120块砖 -->
+        <h2 class="shape-24" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.fpText }}</h2>
+        <!-- 需要码放 1 托木托盘，每托10块砖 -->
+        <h2 class="shape-1" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.tpText }}</h2>
       </div>
     </div>
     <!-- <h2 class="pack-code" style="font-size: 20px; margin: 0 0 10px">S653</h2> -->
@@ -97,33 +125,105 @@ export default {
   data() {
     return {
       lodop: null,
-      datetime: new Date()
+      datetime: new Date(),
+      dataForm: {
+        pdtCode: null,
+        brand: null,
+        bomCode: null,
+        shapeCode: null,
+        orderCode: null,
+        customer: null,
+        code: null,
+        saleNo: null,
+        deliveryTime: null,
+        typeDictValue: null,
+        prodqty: null,
+        realQty: null,
+        fpText: null,
+        tpText: null,
+        packTechCode: null,
+        hu: null,
+      },
+      jobId: null,
+      palletId: null,
     };
   },
-  computed: {},
+  computed: {
+    // comp120() {
+    //   if (this.dataForm.realQty == null) return 0;
+    //   return Math.floor(this.dataForm.realQty / 120);
+    // },
+    // comp10() {
+    //   if (this.dataForm.realQty == null) return 0;
+    //   return Math.ceil((this.dataForm.realQty % 120) / 10);
+    // },
+    palletType() {
+      switch (this.dataForm.typeDictValue?.toString()) {
+        case "0":
+          return "满 托";
+        case "1":
+          return "尾 托";
+        case "2":
+          return "余 托";
+        default:
+          return "-";
+      }
+    },
+  },
   methods: {
-    print(data) {
+    /**
-      console.log("print data", data);
+     *
+     * @param {string|object} data 当source为api时，data为id，当source为local时，data为对象
+     * @param {'api'|'local'} source 数据来源
+     */
+    async print(data, source = "api") {
       // 初始化打印控件
       if (!this.initPrintPlugin()) return this.close();
-
+      if (source === "api") {
-      this.paintBarCode();
+        this.palletId = data;
-      this.paintQrCode();
+        await this.printByApi(data);
-      this.handlePrint();
+      } else {
+        this.printByLocalData(data);
+      }
 
       this.close();
     },
+
+    async printByApi(id) {
+      const { data: res } = await this.$http.get("/pms/pallet/" + id);
+
+      this.dataForm = res.data;
+      await this.printByLocalData(res.data);
+    },
+
+    async printByLocalData(data) {
+      // 绘制包装代码
+      this.paintBarCode(data.packTechCode || "0000-0000-0000");
+      // 绘制HU号
+      await this.paintQrCode(data.hu || "- 无HU数据 -");
+      await this.handlePrint();
+    },
+
     initPrintPlugin() {
       this.lodop = getLodop();
       if (!this.lodop) {
-        alert("请先安装打印控件");
+        return this.$confirm("请先安装打印控件", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            window.open("http://www.c-lodop.com/download.html");
+          })
+          .catch(() => {
             return false;
+          });
       }
       return true;
     },
+
     paintBarCode(data) {
-      console.log("JSBarcode", JsBarcode);
+      JsBarcode("#barcode", data, {
-      JsBarcode("#barcode", "S653", {
         format: "CODE128",
         width: 2.5,
         height: 48,
@@ -131,31 +231,79 @@ export default {
         margin: 0,
       });
     },
-    paintQrCode(data) {
+
-      console.log("JSBarcode", QRCode);
+    async paintQrCode(data) {
-      QRCode.toDataURL(
+      try {
-        "S653",
+        const url = await QRCode.toDataURL(data, {
-        {
           width: 128,
           height: 128,
-        },
+        });
-        (err, url) => {
-          if (err) {
-            document.querySelector(".qrcode").innerHTML = "no QRCode";
-            return;
-          }
-          console.log("url", url);
         document.querySelector("#qrcode").src = url;
+      } catch (err) {
+        document.querySelector(".qrcode").innerHTML = "NO QRCode";
       }
-      );
     },
+
     handlePrint() {
+      return new Promise((resolve, reject) => {
         this.lodop.PRINT_INIT("RGV小票打印");
+        // 捕获打印状态
+        this.lodop.SET_PRINT_MODE("CATCH_PRINT_STATUS", true);
+        if (this.lodop.CVERSION) {
+          // 获取jobId
+          this.lodop.On_Return = (TaskID, Value) => {
+            this.jobId = Value;
+            this.$nextTick(() => {
+              this.getPrintStatus(resolve, reject);
+            });
+          };
+        }
         // 纵向打印，宽度60mm，高度150mm，定义纸张名称
         this.lodop.SET_PRINT_PAGESIZE(1, 600, 1500, "ZebraT231 Tag Paper");
         this.lodop.ADD_PRINT_HTM(0, 0, "100%", "100%", document.querySelector(".print-area").outerHTML);
-      this.lodop.PREVIEW();
+        this.lodop.PRINT();
+      });
     },
+
+    getPrintStatus(resolve, reject) {
+      if (!this.jobId) return;
+      if (LODOP.CVERSION) {
+        LODOP.On_Return = (TaskID, Value) => {
+          // console.log("on return value: <", Value, ">");
+          if (Value.toString() == "1") {
+            // 打印成功
+            this.sendSuccess()
+              .then(() => {
+                this.$message.success("打印成功");
+                this.$emit("refresh-list");
+                resolve();
+              })
+              .catch((err) => {
+                this.$message.error(err);
+                reject(err);
+              });
+          } else {
+            this.$message.error("打印失败");
+          }
+        };
+      }
+      LODOP.GET_VALUE("PRINT_STATUS_OK", this.jobId);
+    },
+
+    sendSuccess() {
+      return this.$http({
+        url: "/pms/pallet/print",
+        method: "post",
+        data: this.palletId,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }).then(({ data: res }) => {
+        if (res.code == 0) return;
+        else throw new Error(res.msg);
+      });
+    },
+
     close() {
       this.$emit("destroy");
     },

src/views/atomViews/ListViewWithHead.vue

@@ -62,7 +62,7 @@
       " />
     <Overlay v-if="overlayVisible" />
 
-    <PrintDom ref="print" v-if="printDOMmount" @destroy="printDOMmount = false" />
+    <PrintDom ref="print" v-if="printDOMmount" @destroy="printDOMmount = false" @refresh-list="getList" />
   </div>
 </template>
 
@@ -620,11 +620,15 @@ export default {
             confirmButtonText: "确认",
             cancelButtonText: "我再想想",
             type: "warning",
-          }).then(() => {
+          })
+            .then(() => {
               this.printDOMmount = true;
               this.$nextTick(() => {
                 this.$refs["print"].print(data);
               });
+            })
+            .catch((err) => {
+              // console.log("cancel ", err);
             });
         }
       }