优化

src/views/system/barcodePrint/index.vue

@@ -0,0 +1,377 @@
+<template>
+  <div class="gi_page">
+    <div class="container">
+      <h2 class="page-title">标签打印</h2>
+      
+      <!-- 标签参数设置 -->
+      <div class="form-section">
+        <a-form :model="formData" layout="vertical">
+          <div class="form-grid">
+            <div class="form-grid-item">
+              <a-form-item label="物料名称">
+                <a-input v-model="formData.materialName" placeholder="请输入物料名称" :disabled="isFromWorkOrder" />
+              </a-form-item>
+            </div>
+            <div class="form-grid-item">
+              <a-form-item label="物料编码">
+                <a-input v-model="formData.encoding" placeholder="请输入物料编码" :disabled="isFromWorkOrder" />
+              </a-form-item>
+            </div>
+            <div class="form-grid-item">
+              <a-form-item label="工单编号">
+                <a-input v-model="formData.orderNo" placeholder="请输入工单编号" :disabled="isFromWorkOrder" />
+              </a-form-item>
+            </div>
+            <div class="form-grid-item">
+              <a-form-item label="生产批次" required>
+                <a-input v-model="formData.productionBatch" placeholder="请输入生产批次" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="form-actions">
+            <a-button type="primary" @click="generateLabel" :disabled="!formData.productionBatch">生成标签</a-button>
+          </div>
+        </a-form>
+      </div>
+      
+      <!-- 标签预览 -->
+      <div v-if="labelData.partName" class="label-preview-section">
+        <h3>标签预览</h3>
+        <div class="label-container" ref="labelContainer">
+          <div class="label" v-for="index in 1" :key="index">
+            <table class="label-table">
+              <tr>
+                <td class="label-cell">
+                  <div class="label-field">零件名称</div>
+                  <div class="label-value">{{ labelData.partName }}</div>
+                </td>
+                <td class="label-cell">
+                  <div class="label-field">生产日期</div>
+                  <div class="label-value">{{ labelData.productionDate }}</div>
+                </td>
+                <td class="label-cell qr-cell" rowspan="4">
+                  <div class="qr-code">
+                    <img :src="`https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=${encodeURIComponent(labelData.qrCodeData)}`" alt="QR Code" />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td class="label-cell">
+                  <div class="label-field">零件号</div>
+                  <div class="label-value">{{ labelData.partNumber }}</div>
+                </td>
+                <td class="label-cell">
+                  <div class="label-field">数量</div>
+                  <div class="label-value">{{ labelData.quantity }}</div>
+                </td>
+              </tr>
+              <tr>
+                <td class="label-cell">
+                  <div class="label-field">标重(kg)</div>
+                  <div class="label-value">{{ labelData.standardWeight }}</div>
+                </td>
+                <td class="label-cell">
+                  <div class="label-field">包装签字</div>
+                  <div class="label-value">{{ labelData.packingSignature || '' }}</div>
+                </td>
+              </tr>
+              <tr>
+                <td class="label-cell">
+                  <div class="label-field">实重(kg)</div>
+                  <div class="label-value">{{ labelData.actualWeight || '' }}</div>
+                </td>
+                <td class="label-cell">
+                  <div class="label-field">检验签字</div>
+                  <div class="label-value">{{ labelData.inspectionSignature || '' }}</div>
+                </td>
+              </tr>
+<!--              <tr>-->
+<!--                <td class="label-cell" colspan="2"></td>-->
+<!--                <td class="label-cell qr-cell">-->
+<!--                  <div class="serial-number">序号: {{ labelData.serialNumber }}</div>-->
+<!--                </td>-->
+<!--              </tr>-->
+            </table>
+          </div>
+        </div>
+        <div class="label-actions">
+          <a-button type="primary" @click="printLabel">打印标签</a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick, onMounted } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+// 表单数据
+const formData = reactive({
+  encoding: '',
+  materialName: '',
+  orderNo: '',
+  productionBatch: ''
+})
+
+// 是否是从工单页面跳转过来的
+const isFromWorkOrder = ref(false)
+
+// 标签数据
+const labelData = reactive({
+  partName: '',
+  partNumber: '',
+  standardWeight: '',
+  actualWeight: '',
+  productionDate: '',
+  quantity: '',
+  packingSignature: '',
+  inspectionSignature: '',
+  serialNumber: '',
+  qrCodeData: '',
+})
+
+// 标签容器引用
+const labelContainer = ref<HTMLElement | null>(null)
+
+// 模拟获取标签数据的接口
+const fetchLabelData = async (params: any) => {
+  // 模拟后端接口延迟
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      // 格式化生产日期为 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 mockData = {
+        partName: params.materialName || 'PP0449002护套',
+        partNumber: params.encoding || 'PP0449002',
+        standardWeight: '0.39500',
+        actualWeight: '',
+        productionDate: formattedDate,
+        quantity: '200',
+        packingSignature: '',
+        inspectionSignature: '',
+        serialNumber: '4',
+        qrCodeData: `PART:${params.encoding || 'PP0449002'},NAME:${params.materialName || 'PP0449002护套'},DATE:${formattedDate},QTY:200`,
+      }
+      resolve(mockData)
+    }, 500)
+  })
+}
+
+// 生成标签
+const generateLabel = async () => {
+  
+  if (!formData.productionBatch) {
+    Message.error('请输入生产批次')
+    return
+  }
+  
+  try {
+    // 获取标签数据
+    const result = await fetchLabelData(formData)
+    Object.assign(labelData, result)
+    Message.success('标签生成成功')
+  } catch (error) {
+    console.error('生成标签失败:', error)
+    Message.error('生成标签失败')
+  }
+}
+
+// 组件挂载时，检查是否有参数传递
+onMounted(() => {
+  // 从路由参数中获取数据
+  const materialName = route.query.materialName as string
+  const encoding = route.query.encoding as string
+  const orderNo = route.query.orderNo as string
+  
+  // 如果有参数传递，设置表单数据并标记为不可修改
+  if (materialName && encoding && orderNo) {
+    formData.materialName = materialName
+    formData.encoding = encoding
+    formData.orderNo = orderNo
+    isFromWorkOrder.value = true
+    
+    // 自动生成标签
+    generateLabel()
+  }
+})
+
+// 打印标签
+const printLabel = async () => {
+  await nextTick()
+  if (labelContainer.value) {
+    // 克隆标签容器内容用于打印
+    const printContent = labelContainer.value.cloneNode(true) as HTMLElement
+    
+    // 创建打印窗口
+    const printWindow = window.open('', '_blank')
+    if (printWindow) {
+      printWindow.document.write(`
+        <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: 36mm; 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; }
+              .label-field { font-size: 7pt; font-weight: bold; margin-bottom: 0.5mm; }
+              .label-value { font-size: 7pt; }
+              .qr-code img { width: 20mm; height: 20mm; margin: 1mm 0; }
+              .serial-number { font-size: 7pt; margin-top: 1mm; }
+            </style>
+          </head>
+          <body>
+            ${printContent.innerHTML}
+          </body>
+        </html>
+      `)
+      printWindow.document.close()
+      printWindow.focus()
+      printWindow.print()
+      printWindow.close()
+    }
+  }
+}
+
+defineOptions({ name: 'BarcodePrint' })
+</script>
+
+<style scoped lang="scss">
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-title {
+  margin-bottom: 30px;
+  text-align: center;
+  color: #333;
+}
+
+/* 表单区域 */
+.form-section {
+  background-color: var(--color-bg-2);
+  padding: 20px;
+  border-radius: 4px;
+  margin-bottom: 30px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.form-grid-item {
+  width: 100%;
+}
+
+.form-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+/* 标签预览 */
+.label-preview-section {
+  margin-top: 30px;
+  padding: 20px;
+  background-color: var(--color-bg-2);
+  border-radius: 4px;
+}
+
+.label-preview-section h3 {
+  margin: 0 0 20px 0;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.label-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.label {
+  width: 450px;
+  height: 180px;
+  border: 1px solid #000;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+.label-table {
+  width: 100%;
+  height: 100%;
+  border-collapse: collapse;
+}
+
+.label-cell {
+  border: 1px solid #000;
+  padding: 5px;
+  vertical-align: top;
+}
+
+.qr-cell {
+  width: 120px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.label-field {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+
+.label-value {
+  font-size: 12px;
+}
+
+.qr-code img {
+  width: 100px;
+  height: 100px;
+  margin: 5px 0;
+}
+
+.serial-number {
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+.label-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+/* 确保输入框宽度一致 */
+:deep(.arco-input-wrapper) {
+  width: 100%;
+  height: 35px;
+}
+
+:deep(.arco-input) {
+  font-size: 16px;
+}
+</style>

src/views/workOrder/index.vue

@@ -67,6 +67,7 @@
       <template #action="{ record }">
         <a-space>
           <a-link v-permission="['workOrder:record:detail']" title="详情" @click="onDetail(record)">详情</a-link>
+          <a-link v-permission="['workOrder:record:print']" title="打印" @click="onPrint(record)">打印</a-link>
           <a-link v-permission="['workOrder:record:delete']" status="danger" :title="'删除'" @click="onDeleteOne(record.id)">删除</a-link>
         </a-space>
       </template>
@@ -113,6 +114,7 @@ import has from '@/utils/has'
 import type GiTable from "@/components/GiTable/index.vue";
 import {ref, reactive} from "vue";
 import {Message} from "@arco-design/web-vue";
+import { useRouter } from 'vue-router';
 import {
   deleteWorkOrder,
   exportWorkOrder, getWorkOrder,
@@ -123,6 +125,7 @@ import {
 
 defineOptions({ name: 'Record' })
 
+const router = useRouter()
 
 
 const queryForm = reactive<WorkOrderQuery>({
@@ -249,6 +252,19 @@ const onExport = () => {
   useDownload(() => exportWorkOrder(queryForm))
 }
 
+// 打印
+const onPrint = (record: WorkOrderResp) => {
+  // 跳转到标签打印页面，并传递数据
+  router.push({
+    path: '/print',
+    query: {
+      materialName: record.materialName,
+      encoding: record.encoding,
+      orderNo: record.orderNo
+    }
+  })
+}
+
 </script>
 
 <style scoped lang="scss">