update 更新包装托盘打印

2023-08-14 14:17:04 +08:00
parent 62f625197f
commit d1bc97f42a
3 changed files with 205 additions and 53 deletions
--- a/public/index.html
+++ b/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>
--- a/src/components/PrintDom.vue
+++ b/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>
-    <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>
-    <h3 class="order-id" style="font-size: 14px; margin: 10px 0">Po: 50024779</h3>
+    <!-- 物料号 -->
+    <h2 class="material-code" style="font-size: 20px; margin: 10px 0">{{ dataForm.pdtCode }}</h2>
+    <!-- 牌号 -->
+    <h2 class="brand" style="font-size: 16px; letter-spacing: 1px; margin: 10px 0">{{ dataForm.brand }}</h2>
+    <!-- 配方号 -->
+    <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-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-count" style="font-size: 20px; margin: 0 0 10px 8px">{{ dataForm.prodqty }}</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();
-
-      this.paintBarCode();
-      this.paintQrCode();
-      this.handlePrint();
+      if (source === "api") {
+        this.palletId = data;
+        await this.printByApi(data);
+      } 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 false;
+        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", "S653", {
+      JsBarcode("#barcode", data, {
        format: "CODE128",
        width: 2.5,
        height: 48,
@@ -131,31 +231,79 @@ export default {
        margin: 0,
      });
    },
-    paintQrCode(data) {
-      console.log("JSBarcode", QRCode);
-      QRCode.toDataURL(
-        "S653",
-        {
+
+    async paintQrCode(data) {
+      try {
+        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;
-        }
-      );
+        });
+        document.querySelector("#qrcode").src = url;
+      } catch (err) {
+        document.querySelector(".qrcode").innerHTML = "NO QRCode";
+      }
    },
+
    handlePrint() {
-      this.lodop.PRINT_INIT("RGV小票打印");
-      // 纵向打印，宽度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();
+      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.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");
    },
--- a/src/views/atomViews/ListViewWithHead.vue
+++ b/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,12 +620,16 @@ export default {
            confirmButtonText: "确认",
            cancelButtonText: "我再想想",
            type: "warning",
-          }).then(() => {
-            this.printDOMmount = true;
-            this.$nextTick(() => {
-              this.$refs["print"].print(data);
+          })
+            .then(() => {
+              this.printDOMmount = true;
+              this.$nextTick(() => {
+                this.$refs["print"].print(data);
+              });
+            })
+            .catch((err) => {
+              // console.log("cancel ", err);
            });
-          });
        }
      }
    },