报工成品托标签打印

cuilei

18 小时以前 337f3c6c7414953504f826ea6d1d80cffb6bd2cf

 src/views/mes/modules/MesProductionWorkOrderReportModal.vue

@@ -54,11 +54,69 @@
        </a-form-model>
      </j-form-container>
    </a-spin>

    <!-- 打印标签容器 -->
    <div id="printLabel" style="visibility: hidden; position: absolute; left: -9999px; width: 300px; height: 200px; border: 1px solid #000; font-family: 'Microsoft YaHei', sans-serif; padding: 8px; box-sizing: border-box;">
      <!-- 标签容器 -->
      <div style="display: flex; flex-direction: column; height: 100%;">
        <!-- 头部：标题 + Logo -->
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; width: 100%;">
          <h3 style="margin: 0; color: white; background-color: black; padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: bold;">成品托标签</h3>
          <img src="/logo.png" alt="公司Logo" style="width: 40px; height: 40px;" />
        </div>

        <!-- 主体内容：左侧文本 + 右侧二维码 -->
        <div style="display: flex; flex: 1; gap: 20px;">
          <!-- 左侧：标签信息 -->
          <div style="flex: 1; line-height: 1.4; font-size: 10px;">
            <table style="width: 100%; border-collapse: collapse;">
              <tr>
                <td style="width: 60px; font-weight: bold; white-space: nowrap;">批次号：</td>
                <td>{{ finishedProductLabel.batchNumber }}</td>
              </tr>
              <tr>
                <td style="width: 60px; font-weight: bold; white-space: nowrap;">产品型号：</td>
                <td>{{ finishedProductLabel.materialName }}</td>
              </tr>
              <tr>
                <td style="width: 60px; font-weight: bold; white-space: nowrap;">库存地点：</td>
                <td>{{ finishedProductLabel.warehouseCode }}</td>
              </tr>
              <tr>
                <td style="width: 60px; font-weight: bold; white-space: nowrap;">工单号：</td>
                <td>{{ finishedProductLabel.orderCode }}</td>
              </tr>
              <tr>
                <td style="width: 60px; font-weight: bold; white-space: nowrap;">任务号：</td>
                <td>{{ finishedProductLabel.workOrderCode }}</td>
              </tr>
              <tr>
                <td style="width: 60px; font-weight: bold; white-space: nowrap;">数量：</td>
                <td>{{ finishedProductLabel.quantity }}</td>
              </tr>
            </table>
          </div>

          <!-- 右侧：二维码 -->
          <div style="flex: 0 0 60px; text-align: center;">
            <canvas id="qrcodeCanvas" width="60" height="60"></canvas>
          </div>
        </div>

        <!-- 底部：托号 -->
        <div style="text-align: center; margin-top: 8px; font-size: 10px; font-weight: bold;">
          {{ finishedProductLabel.palletNumber }}
        </div>
      </div>

    </div>
  </j-modal>
</template>

<script>
import { postAction, getAction } from '@api/manage'
import printJS from 'print-js'
import QRCode from 'qrcode'

export default {
  name: 'MesProductionWorkOrderReportModal',
@@ -84,7 +142,8 @@
        report: '/mes/mesWorkReporting/add',
        selectReportWorkOrderList: '/mes/productionOrder/selectReportWorkOrderList'
      },
      workOrderOptions: []
      workOrderOptions: [],
      finishedProductLabel: {}
    }
  },
  computed: {
@@ -93,6 +152,90 @@
    },
  },
  methods: {
    // 生成二维码
    generateQRCode(text) {
      const canvas = document.getElementById('qrcodeCanvas');
      // 清空画布
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 生成二维码
      QRCode.toCanvas(canvas, text, {
        width: 60,
        margin: 1,
        errorCorrectionLevel: 'M'
      }, (error) => {
        if (error) {
          console.error('二维码生成失败:', error);
        }
      });
    },
    // 打印标签
    printLabel() {
      this.generateQRCode('成品托标签'); // 先生成二维码
      setTimeout(() => {
        printJS({
          printable: 'printLabel',
          type: 'html',
          targetStyles: ['*'],
          style: `        @page {
          margin: 0;
          size: A4;
        }
        #printLabel {
          visibility: visible !important;
          position: static !important;
          left: 0 !important;
          top: 0 !important;
          width: 300px !important;
          height: 200px !important;
          border: 1px solid #000;
          font-family: 'Microsoft YaHei', sans-serif;
          padding: 8px;
          box-sizing: border-box;
          margin: 0;
        }
        #printLabel h3 {
          margin: 0;
          color: white;
          background-color: #000;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 14px;
          font-weight: bold;
        }
        #printLabel img {
          width: 40px;
          height: 40px;
        }
        #printLabel table {
          width: 100%;
          border-collapse: collapse;
        }
        #printLabel td {
          padding: 2px 0;
        }
        #printLabel canvas {
          width: 60px;
          height: 60px;
        }
        @media print {
          * {
            background: inherit !important;
            color: inherit !important;
            filter: none !important;
            -webkit-filter: none !important;
          }
          #printLabel h3 {
            background-color: #000 !important;
            color: white !important;
          }
        }
      `,
          scanStyles: false
        });
      }, 100);
    },
    add (record) {
      // 重置表单
      this.$refs.form && this.$refs.form.resetFields()
@@ -119,9 +262,26 @@
            factoryId: this.model.factoryId,
            quantity: this.model.quantity
          }
          const workOrderOption = this.workOrderOptions.find(item => item.value === this.model.orderId)
          postAction(this.url.report, formData).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              const data = res.result
              if (data.reportType === 'FINISHED') {
                this.finishedProductLabel = {
                  batchNumber: data.batchNumber,//批次号
                  materialName: this.model.materialName,//产品型号（物料名称）
                  warehouseCode: data.warehouseCode,//库存地点（线边仓编号）
                  orderCode: workOrderOption.label,//工单号（生产订单号）
                  workOrderCode: data.workOrderCode,//任务号（排产工单号）
                  quantity: data.quantity,//报工数量
                  palletNumber: data.palletNumber//托号
                }
                //成品托标签打印
                this.$nextTick(() => {
                  this.printLabel()
                })
              }
              this.submitCallback()
            } else {
              this.$message.warning(res.message)