wms-ui/src/views/barcodePrint/index.vue

<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="true" />
              </a-form-item>
            </div>
            <div class="form-grid-item">
              <a-form-item label="物料编码">
                <a-input v-model="formData.encoding" placeholder="未获取到物料编码" :disabled="true" />
              </a-form-item>
            </div>
            <div class="form-grid-item">
              <a-form-item label="工单编号">
                <a-input v-model="formData.orderNo" placeholder="未获取到工单编号" :disabled="true" />
              </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">
<!--      <div  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-row">
                    <div class="label-field">零件名称</div>
                    <div class="label-value">{{ labelData.partName }}</div>
                  </div>
                </td>
                <td class="label-cell">
                  <div class="label-row">
                    <div class="label-field">生产日期</div>
                    <div class="label-value">{{ labelData.productionDate }}</div>
                  </div>
                </td>
                <td class="label-cell qr-cell" rowspan="4">
                  <div class="qr-code">
                    <img v-if="labelData.qrCodeImage" :src="labelData.qrCodeImage" alt="QR Code" />
                    <div v-else class="loading">生成二维码中...</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="label-cell">
                  <div class="label-row">
                    <div class="label-field">零件号</div>
                    <div class="label-value">{{ labelData.partNumber }}</div>
                  </div>
                </td>
                <td class="label-cell">
                  <div class="label-row">
                    <div class="label-field">数量</div>
                    <div class="label-value">{{ labelData.totalCount }}</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="label-cell">
                  <div class="label-row">
                    <div class="label-field">标重(g)</div>
                    <div class="label-value">{{ labelData.totalCalculatedWeight }}</div>
                  </div>
                </td>
                <td class="label-cell">
                  <div class="label-row">
                    <div class="label-field">包装签字</div>
                    <div class="label-value">{{ labelData.packingSignature || '' }}</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="label-cell">
                  <div class="label-row">
                    <div class="label-field">实重(g)</div>
                    <div class="label-value">{{ labelData.totalWeight || '' }}</div>
                  </div>
                </td>
                <td class="label-cell">
                  <div class="label-row">
                    <div class="label-field">检验签字</div>
                    <div class="label-value">{{ labelData.inspectionSignature || '' }}</div>
                  </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'
import {getWorkOrder} from "@/apis/workOrder/workOrder"
import QRCode from 'qrcode';

const route = useRoute()

// 表单数据
const formData = reactive({
  workerOrderId: '',
  encoding: '',
  materialName: '',
  orderNo: '',
  totalCalculatedWeight: '',
  totalWeight: '',
  totalCount: '',
  productionBatch: '',
  qrCodeData: '',
})

// 标签数据
const labelData = reactive({
  partName: '',
  partNumber: '',
  totalCalculatedWeight: '',
  totalWeight: '',
  productionDate: '',
  totalCount: '',
  packingSignature: '',
  inspectionSignature: '',
  qrCodeData: '',
  qrCodeImage: '',
})

// 标签容器引用
const labelContainer = ref<HTMLElement | null>(null)

// 生成二维码
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 generateLabel = async () => {
  if (!formData.productionBatch) {
    Message.error('请输入生产批次')
    return
  }
  if (!formData.materialName) {
    Message.error('未获取到物料信息')
    return
  }
  
  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#${formData.materialName}$11#9DP$12#${formData.productionBatch}$17#${formData.totalCount}$20#${formattedDate2}$31#${formData.orderNo}$DY`
    
    // 生成二维码图片
    const qrCodeImage = await generateQRCode(qrCodeData)
    
    // 直接从 formData 中获取数据
    Object.assign(labelData, {
      partName: formData.materialName || '',
      partNumber: formData.encoding || '',
      totalCalculatedWeight: formData.totalCalculatedWeight || '',
      totalWeight: formData.totalWeight || '',
      productionDate: formattedDate,
      totalCount: formData.totalCount || '',
      packingSignature: '',
      inspectionSignature: '',
      qrCodeData: qrCodeData,
      qrCodeImage: qrCodeImage
    })
    
    Message.success('标签生成成功')
  } catch (error) {
    console.error('生成标签失败:', error)
    Message.error('生成标签失败')
  }
}

// 组件挂载时，检查是否有参数传递
onMounted(() => {
  // 从路由参数中获取数据
  const workerOrderId = route.query.workerOrderId as string
  // 如果有参数传递，设置表单数据并标记为不可修改
  if (workerOrderId) {
    formData.workerOrderId = workerOrderId
    getWorkOrder(workerOrderId).then(res => {
      if (res.code == '0') {
        formData.encoding = res.data.encoding
        formData.materialName = res.data.materialName
        formData.orderNo = res.data.orderNo
        formData.totalCalculatedWeight = res.data.totalCalculatedWeight
        formData.totalWeight = res.data.totalWeight
        formData.totalCount = res.data.totalCount
      } else {
        Message.error('获取详情失败')
      }
    });

    // 自动生成标签
    generateLabel()
  }
})

// 打印标签
const printLabel = async () => {
  await nextTick()
  if (labelContainer.value) {
    // 创建打印窗口
    const printWindow = window.open('', '_blank')
    if (printWindow) {
      // 直接构建打印内容，确保二维码图片正确生成
      const printHTML = `
        <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: 7pt; font-weight: bold; margin-right: 2mm; min-width: 25pt; }
              .label-value { font-size: 7pt; flex: 1; }
              .qr-code img { width: 20mm; height: 20mm; margin: 1mm 0; }
              .serial-number { font-size: 7pt; 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">${labelData.partName}</div>
                      </div>
                    </td>
                    <td class="label-cell">
                      <div class="label-row">
                        <div class="label-field">生产日期</div>
                        <div class="label-value">${labelData.productionDate}</div>
                      </div>
                    </td>
                    <td class="label-cell qr-cell" rowspan="4">
                      <div class="qr-code">
                        <img src="${labelData.qrCodeImage}" alt="QR Code" />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="label-cell">
                      <div class="label-row">
                        <div class="label-field">零件号</div>
                        <div class="label-value">${labelData.partNumber}</div>
                      </div>
                    </td>
                    <td class="label-cell">
                      <div class="label-row">
                        <div class="label-field">数量</div>
                        <div class="label-value">${labelData.totalCount}</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="label-cell">
                      <div class="label-row">
                        <div class="label-field">标重(g)</div>
                        <div class="label-value">${labelData.totalCalculatedWeight}</div>
                      </div>
                    </td>
                    <td class="label-cell">
                      <div class="label-row">
                        <div class="label-field">包装签字</div>
                        <div class="label-value">${labelData.packingSignature || ''}</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="label-cell">
                      <div class="label-row">
                        <div class="label-field">实重(g)</div>
                        <div class="label-value">${labelData.totalWeight || ''}</div>
                      </div>
                    </td>
                    <td class="label-cell">
                      <div class="label-row">
                        <div class="label-field">检验签字</div>
                        <div class="label-value">${labelData.inspectionSignature || ''}</div>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </body>
        </html>
      `

      printWindow.document.write(printHTML)
      printWindow.document.close()

      // 等待图片加载完成后再打印
      printWindow.onload = () => {
        setTimeout(() => {
          printWindow.focus()
          printWindow.print()
          printWindow.close()
        }, 500)
      }
    }
  }
}

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-row {
  display: flex;
  align-items: center;
}

.label-field {
  font-size: 12px;
  font-weight: bold;
  margin-right: 10px;
  min-width: 60px;
}

.label-value {
  font-size: 12px;
  flex: 1;
}

.qr-code img {
  width: 100px;
  height: 100px;
  margin: 5px 0;
}

.qr-code .loading {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #666;
}

.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>