添加质检包装按钮

package.json

@@ -20,6 +20,7 @@
     "lodash-es": "^4.17.21",
     "lodash-es": "^4.17.21",
     "luxon": "^3.7.1",
     "luxon": "^3.7.1",
     "pinia": "^2.1.7",
     "pinia": "^2.1.7",
+    "qrcode": "^1.5.4",
     "splitpanes": "^3.1.5",
     "splitpanes": "^3.1.5",
     "vue": "^3.4.19",
     "vue": "^3.4.19",
     "vue-dompurify-html": "^5.1.0",
     "vue-dompurify-html": "^5.1.0",
@@ -30,6 +31,7 @@
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@types/luxon": "^3.7.1",
     "@types/luxon": "^3.7.1",
+    "@types/qrcode": "^1.5.5",
     "@types/splitpanes": "^2.2.6",
     "@types/splitpanes": "^2.2.6",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",

src/views/order/podUs/InspPackagOrder.vue

+<template>
+  <div>
+    <ElDialog
+      v-model="visible"
+      title="质检包装"
+      fullscreen
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      style="top: 60px"
+      center
+      modal-class="pod-make-order-dialog"
+    >
+      <div class="detail-div">
+        <div class="left">
+          <div class="left-images">
+            <div
+              class="imagBox"
+              v-for="(item, index) in detail?.imgList"
+              :key="index"
+            >
+              <div
+                v-show="item?.title && item?.url"
+                style="font-size: 30px; font-weight: 700; text-align: center"
+              >
+                {{ item?.title }}
+              </div>
+              <img :src="item.url" alt="" />
+            </div>
+          </div>
+          <div class="tips">
+            <div>第一次扫码:就绪</div>
+            <div>第二次扫码:完成</div>
+            <div>
+              单子为就绪状态，如果下一个单子状态为完成，则从就绪变为错误
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="input">
+            <el-input
+              ref="trackingNumberRef"
+              v-model="TrackingNumber"
+              :placeholder="placeholderText"
+              style="margin-right: 10px"
+              clearable
+              @keydown.enter="trackCodeInput()"
+            ></el-input>
+            <el-button type="primary" @click="trackCodeInput()">
+              查询
+            </el-button>
+          </div>
+          <div class="printerContent">
+            <div class="qr">
+              二维码：<span style="color: #ff0000">{{ 111 }}</span>
+            </div>
+            <el-form style="display: flex; gap: 10px">
+              <el-form-item label="打印机:" style="flex: 1">
+                <ElSelect
+                  v-model="sheetPrinter"
+                  placeholder="请选择打印机"
+                  @change="handlePrinterChange"
+                >
+                  <ElOption
+                    v-for="item in printDeviceList"
+                    :key="item"
+                    :label="item"
+                    :value="item"
+                  />
+                </ElSelect>
+              </el-form-item>
+              <el-form-item label="标签尺寸:" style="flex: 1">
+                <ElSelect
+                  v-model="sheetPrinter"
+                  placeholder="请选择标签尺寸"
+                  @change="handlePrinterChange"
+                >
+                  <ElOption
+                    v-for="item in printDeviceList"
+                    :key="item"
+                    :label="item"
+                    :value="item"
+                  />
+                </ElSelect>
+              </el-form-item>
+            </el-form>
+            <div class="canvas-container">
+              <canvas id="canvas" ref="canvas"></canvas>
+            </div>
+          </div>
+          <div class="printQueue">
+            <div style="font-size: 18px; font-weight: 700; margin-bottom: 10px">
+              打印队列
+            </div>
+            <ul>
+              <li
+                v-for="value in 10"
+                :key="value"
+                :style="{
+                  color:
+                    value == 1 ? `#006000` : value == 2 ? `#ff0000` : '#000',
+                }"
+              >
+                value
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div></ElDialog
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import QRCode from 'qrcode'
+const visible = ref(false)
+const TrackingNumber = ref('')
+const placeholderText = ref('扫描枪输入生产单号')
+const sheetPrinter = ref('')
+const printDeviceList = ref([])
+const trackingNumberRef = ref()
+
+const detail = ref({
+  imgList: [
+    {
+      title: 'A',
+      id: '',
+      url: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
+    },
+    {
+      title: 'b',
+      id: '',
+      url: 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650',
+    },
+  ],
+})
+
+function trackCodeInput() {
+  QRCode.toCanvas(document.getElementById('canvas'), '11', function (error) {
+    if (error) console.error(error)
+    console.log('QR code generated!')
+  })
+}
+function handlePrinterChange() {}
+function open() {
+  visible.value = true
+}
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.detail-div {
+  display: flex;
+  height: 100%;
+  gap: 20px;
+  justify-content: space-between;
+  .left {
+    flex: 5;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .left-images {
+      flex: 1;
+      display: flex;
+      height: 100%;
+      gap: 10px;
+
+      .imagBox {
+        width: 50%;
+      }
+    }
+    .tips {
+      font-size: 25px;
+      color: #afafaf;
+    }
+  }
+  .right {
+    flex: 3;
+    gap: 20px;
+    flex-direction: column;
+    display: flex;
+    .input {
+      display: flex;
+    }
+    .printerContent {
+      flex: 6;
+      border: 1px solid #dcdfe6;
+      padding: 10px;
+      padding-bottom: 0;
+      .qr {
+        margin-bottom: 10px;
+      }
+    }
+    .printQueue {
+      flex: 5;
+      border: 1px solid #dcdfe6;
+      padding: 10px;
+    }
+  }
+}
+:deep() {
+  .el-dialog {
+    .el-dialog__header {
+      .el-dialog__title {
+        font-size: 30px !important;
+        font-weight: 700 !important;
+      }
+    }
+  }
+}
+.el-form-item {
+  margin-bottom: 0;
+}
+.canvas-container {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 61px); /* 1:1 宽高比 */
+}
+
+#canvas {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto !important;
+  height: 100% !important;
+}
+</style>

src/views/order/podUs/index.vue

@@ -399,6 +399,11 @@
               播种墙配货
               播种墙配货
             </ElButton>
             </ElButton>
           </span>
           </span>
+          <span v-if="status === 'WAIT_SHIPMENT'" class="item">
+            <ElButton type="warning" @click="inspPackagOrder">
+              质检包装
+            </ElButton>
+          </span>
           <span v-if="status === 'CREATE_LOGISTICS'" class="item">
           <span v-if="status === 'CREATE_LOGISTICS'" class="item">
             <ElButton type="warning" @click="logisticsToPicking">
             <ElButton type="warning" @click="logisticsToPicking">
               转至待排单
               转至待排单
@@ -1936,6 +1941,10 @@
     @set-warehouseId="handleWarehouseIdChange"
     @set-warehouseId="handleWarehouseIdChange"
     @refresh="onFastRefresh"
     @refresh="onFastRefresh"
   />
   />
+  <InspPackagOrder
+    ref="InspPackagOrderRef"
+    @refresh="onFastRefresh"
+  ></InspPackagOrder>
   <ElDialog
   <ElDialog
     v-model="productionClientVisible"
     v-model="productionClientVisible"
     title="生产端"
     title="生产端"
@@ -2292,6 +2301,7 @@ import { computed, onMounted, ref, nextTick, reactive } from 'vue'
 import FastProduction from './FastProduction.vue'
 import FastProduction from './FastProduction.vue'
 import { filePath } from '@/api/axios'
 import { filePath } from '@/api/axios'
 import PodMakeOrder from './PodMakeOrder.vue'
 import PodMakeOrder from './PodMakeOrder.vue'
+import InspPackagOrder from './InspPackagOrder.vue'
 import { OrderData } from '@/types/api/podMakeOrder'
 import { OrderData } from '@/types/api/podMakeOrder'
 import useLodop, { LODOPObject } from '@/utils/hooks/useLodop'
 import useLodop, { LODOPObject } from '@/utils/hooks/useLodop'
 import dayjs from 'dayjs'
 import dayjs from 'dayjs'
@@ -3794,6 +3804,16 @@ const printPodOrder = async () => {
   podOrderVisible.value = true
   podOrderVisible.value = true
 }
 }
 
 
+const InspPackagOrderRef = ref()
+
+const inspPackagOrder = async () => {
+  const lodop = getCLodop(null, null)
+  if (!lodop) return
+
+  sheetPrinter.value = lodop.GET_PRINTER_NAME(0)
+  InspPackagOrderRef?.value.open()
+}
+
 /**
 /**
  * @description: 创建物流、获取跟踪号、获取打印面单、更改物流、取消物流订单
  * @description: 创建物流、获取跟踪号、获取打印面单、更改物流、取消物流订单
  */
  */