优化整箱

src/views/fullClaim/index.vue

@@ -15,8 +15,8 @@
       <template #toolbar-left>
 	    <a-input-search v-model="queryForm.orderNo" placeholder="请输入任务工单号" allow-clear @search="search" />
 	    <a-input-search v-model="queryForm.materialCode" placeholder="请输入物料编码" allow-clear @search="search" />
-	    <a-input-search v-model="queryForm.imgUrl" placeholder="请输入图片地址" allow-clear @search="search" />
-	    <a-input-search v-model="queryForm.createUser" placeholder="请输入创建人" allow-clear @search="search" />
+	    <a-input-search v-model="queryForm.materialName" placeholder="请输入物料名称" allow-clear @search="search" />
+	    <a-input-search v-model="queryForm.batch" placeholder="请输入批次号" allow-clear @search="search" />
         <a-range-picker
             v-model="queryForm.createTime"
             :show-time="true"
@@ -60,6 +60,11 @@
           >
             详情
           </a-link>
+          <a-link
+            @click="onPrint(record)"
+          >
+            打印
+          </a-link>
           <a-link
             v-permission="['fullWorkOrder:fullWorkOrder:delete']"
             status="danger"
@@ -88,6 +93,8 @@ import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
+import type {WorkOrderResp} from "@/apis/workOrder/workOrder";
+import QRCode from 'qrcode';
 
 defineOptions({ name: 'FullWorkOrder' })
 
@@ -95,10 +102,10 @@ defineOptions({ name: 'FullWorkOrder' })
 const queryForm = reactive<FullWorkOrderQuery>({
   orderNo: undefined,
   materialCode: undefined,
-  imgUrl: undefined,
-  createUser: undefined,
+  materialName: undefined,
+  batch: undefined,
   createTime: undefined,
-  sort: ['id,desc']
+  sort: ['f.id,desc']
 })
 
 const {
@@ -111,7 +118,11 @@ const {
 const columns = ref<TableInstanceColumns[]>([
   { title: '标题', dataIndex: 'title', slotName: 'title' },
   { title: '任务工单号', dataIndex: 'orderNo', slotName: 'orderNo' },
+  { title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
   { title: '物料编码', dataIndex: 'materialCode', slotName: 'materialCode' },
+  { title: '批次号', dataIndex: 'batch', slotName: 'batch' },
+  { title: '数量', dataIndex: 'count', slotName: 'count' },
+  { title: '标记号', dataIndex: 'mark', slotName: 'mark' },
   { title: '抓拍图', dataIndex: 'imgUrl', slotName: 'imgUrl' },
   { title: '创建人', dataIndex: 'createUserString', slotName: 'createUser' },
   { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
@@ -121,7 +132,7 @@ const columns = ref<TableInstanceColumns[]>([
     title: '操作',
     dataIndex: 'action',
     slotName: 'action',
-    width: 160,
+    width: 220,
     align: 'center',
     fixed: !isMobile() ? 'right' : undefined,
     show: has.hasPermOr(['fullWorkOrder:fullWorkOrder:detail', 'fullWorkOrder:fullWorkOrder:update', 'fullWorkOrder:fullWorkOrder:delete'])
@@ -132,8 +143,8 @@ const columns = ref<TableInstanceColumns[]>([
 const reset = () => {
   queryForm.orderNo = undefined
   queryForm.materialCode = undefined
-  queryForm.imgUrl = undefined
-  queryForm.createUser = undefined
+  queryForm.materialName = undefined
+  queryForm.batch = undefined
   queryForm.createTime = undefined
   search()
 }
@@ -146,6 +157,157 @@ const onDelete = (record: FullWorkOrderResp) => {
   })
 }
 
+// 生成二维码
+const generateQRCode = async (data: string) => {
+  try {
+    return await QRCode.toDataURL(data, {
+      width: 120,
+      margin: 1,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF'
+      }
+    })
+  } catch (error) {
+    console.error('生成二维码失败:', error)
+    return ''
+  }
+}
+
+const onPrint = async (record: FullWorkOrderResp) => {
+  try {
+    // 格式化生产日期为 yyyyMMddHHmm 格式
+    const now = new Date()
+    const formattedDate = now.getFullYear().toString() + 
+      String(now.getMonth() + 1).padStart(2, '0') + 
+      String(now.getDate()).padStart(2, '0') + 
+      String(now.getHours()).padStart(2, '0') + 
+      String(now.getMinutes()).padStart(2, '0')
+
+    const formattedDate2 = now.getFullYear().toString() +
+        String(now.getMonth() + 1).padStart(2, '0') +
+        String(now.getDate()).padStart(2, '0')
+    
+    // 计算二维码数据
+    const qrCodeData = `10#${record.materialCode || ''}$11#9DP$12#${record.batch || ''}$17#${record.count || ''}$20#${formattedDate2}$31#${record.orderNo || ''}$DY`
+    
+    // 生成二维码图片
+    const qrCodeImage = await generateQRCode(qrCodeData)
+    
+    // 直接生成打印标签
+    const printWindow = window.open('', '_blank');
+    if (!printWindow) return;
+    
+    // 构建打印内容
+    const printContent = `
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <title>标签打印</title>
+        <style>
+          body { margin: 0; padding: 10mm; font-family: Arial, sans-serif; }
+          .label-container { display: flex; flex-wrap: wrap; gap: 10mm; justify-content: center; }
+          .label { width: 90mm; height: 38.5mm; border: 1px solid #000; padding: 0; box-sizing: border-box; page-break-inside: avoid; }
+          .label-table { width: 100%; height: 100%; border-collapse: collapse; }
+          .label-cell { border: 1px solid #000; padding: 1mm; vertical-align: top; }
+          .qr-cell { width: 24mm; text-align: center; vertical-align: middle; border: 1px solid #000; }
+          .label-row { display: flex; align-items: center; }
+          .label-field { font-size: 8pt; font-weight: bold; margin-right: 2mm; min-width: 25pt; }
+          .label-value { font-size: 8pt; font-weight: bold; flex: 1; }
+          .qr-code img { width: 20mm; height: 20mm; margin: 1mm 0; }
+          .mark-number { font-size: 8pt; font-weight: bold; margin-top: 1mm; text-align: center; }
+          .serial-number { font-size: 8pt; font-weight: bold; margin-top: 1mm; }
+        </style>
+      </head>
+      <body>
+        <div class="label-container">
+          <div class="label">
+            <table class="label-table">
+              <tr>
+                <td class="label-cell">
+                  <div class="label-row">
+                    <div class="label-field">零件名称</div>
+                    <div class="label-value">${record.materialName || ''}</div>
+                  </div>
+                </td>
+                <td class="label-cell">
+                  <div class="label-row">
+                    <div class="label-field">生产日期</div>
+                    <div class="label-value">${formattedDate}</div>
+                  </div>
+                </td>
+                <td class="label-cell qr-cell" rowspan="4">
+                  <div class="qr-code">
+                    <img src="${qrCodeImage}" alt="QR Code" />
+                    <div class="mark-number">${record.mark || ''}</div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="label-cell">
+                  <div class="label-row">
+                    <div class="label-field">零件号</div>
+                    <div class="label-value">${record.materialCode || ''}</div>
+                  </div>
+                </td>
+                <td class="label-cell">
+                  <div class="label-row">
+                    <div class="label-field">数量</div>
+                    <div class="label-value">${record.count || ''}</div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="label-cell">
+                  <div class="label-row">
+                    <div class="label-field">标重(g)</div>
+                    <div class="label-value"></div>
+                  </div>
+                </td>
+                <td class="label-cell">
+                  <div class="label-row">
+                    <div class="label-field">包装签字</div>
+                    <div class="label-value"></div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="label-cell">
+                  <div class="label-row">
+                    <div class="label-field">实重(g)</div>
+                    <div class="label-value"></div>
+                  </div>
+                </td>
+                <td class="label-cell">
+                  <div class="label-row">
+                    <div class="label-field">检验签字</div>
+                    <div class="label-value"></div>
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </body>
+      </html>
+    `;
+    
+    printWindow.document.write(printContent);
+    printWindow.document.close();
+    
+    // 等待页面加载完成后打印
+    printWindow.onload = function() {
+      setTimeout(() => {
+        printWindow.focus();
+        printWindow.print();
+        printWindow.close();
+      }, 500);
+    };
+  } catch (error) {
+    console.error('打印标签失败:', error);
+  }
+}
+
 // 导出
 const onExport = () => {
   useDownload(() => exportFullWorkOrder(queryForm))