kd-aiot-frontend-mes/src/views/produceOrder/printFlowCard.vue

<template>
  <ele-modal
    title="工序流转卡"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="900px"
    :maxable="true"
  >
    <div id="printSection" class="flow-card-print">
      <div
        class="flow-card-page"
        v-for="(card, cIndex) in printList"
        :key="cIndex"
      >
        <div class="flow-card-title">工&nbsp;&nbsp;序&nbsp;&nbsp;流&nbsp;&nbsp;转&nbsp;&nbsp;卡</div>

        <table class="flow-card-header">
          <tr>
            <td class="label">产&nbsp;&nbsp;品&nbsp;&nbsp;代&nbsp;&nbsp;号</td>
            <td class="value">{{ card.topCategoryCode }}</td>
            <td class="label">产&nbsp;&nbsp;品&nbsp;&nbsp;名&nbsp;&nbsp;称</td>
            <td class="value">{{ card.topCategoryName }}</td>
          </tr>
          <tr>
            <td class="label">零(部)件代号</td>
            <td class="value">{{ card.productCode }}</td>
            <td class="label">零(部)件名称</td>
            <td class="value">{{ card.productName }}</td>
          </tr>
          <tr>
            <td class="label">产品批号(编号)</td>
            <td class="value">{{ card.batchNo }}</td>
            <td class="label">原材料本厂合格证号</td>
            <td class="value">{{ card.materialFactoryCertNo }}</td>
          </tr>
          <tr>
            <td class="label">原材料炉(批)号</td>
            <td class="value">{{ card.materialFurnaceNo }}</td>
            <td class="label">半成品合格证号</td>
            <td class="value">{{ card.semiProductCertNo }}</td>
          </tr>
        </table>

        <table class="flow-card-detail">
          <thead>
            <tr>
              <th rowspan="2" class="col-no">工<br />序<br />号</th>
              <th rowspan="2" class="col-name">工序名称</th>
              <th rowspan="2" class="col-num">转<br />入<br />数</th>
              <th rowspan="2" class="col-leader">工序负<br />责人</th>
              <th rowspan="2" class="col-num">转<br />出<br />数</th>
              <th colspan="2" class="col-bad">不&nbsp;&nbsp;合&nbsp;&nbsp;格&nbsp;&nbsp;数</th>
              <th rowspan="2" class="col-date">日&nbsp;&nbsp;&nbsp;期</th>
              <th rowspan="2" class="col-remark">备&nbsp;&nbsp;注</th>
            </tr>
            <tr>
              <th class="col-bad-sub">返工<br />品数</th>
              <th class="col-bad-sub">废品<br />数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, idx) in getRows(card)" :key="idx">
              <td>{{ row.taskNo }}</td>
              <td>{{ row.taskName }}</td>
              <td>{{ row.inNum }}</td>
              <td>{{ row.leader }}</td>
              <td>{{ row.outNum }}</td>
              <td>{{ row.reworkNum }}</td>
              <td>{{ row.scrapNum }}</td>
              <td>{{ row.date }}</td>
              <td>{{ row.remark }}</td>
            </tr>
          </tbody>
        </table>

        <div class="flow-card-footer">
          <div class="footer-item">发出日期：{{ card.issueDate }}</div>
          <div class="footer-item">收回日期：{{ card.recoverDate }}</div>
        </div>
      </div>
    </div>

    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getTaskInstanceList } from '@/api/produce/job';

  export default {
    name: 'print-flow-card',
    data() {
      return {
        QRvisible: false,
        rowCount: 25,
        printList: []
      };
    },
    methods: {
      async open(rows) {
        const list = Array.isArray(rows) ? rows : rows ? [rows] : [];
        if (!list.length) {
          this.printList = [this.buildEmptyCard()];
          this.QRvisible = true;
          return;
        }

        const cards = await Promise.all(
          list.map((row) =>
            getTaskInstanceList(row.id)
              .then((res) => this.buildCard(row, Array.isArray(res) ? res : []))
              .catch(() => this.buildCard(row, []))
          )
        );

        this.printList = cards;
        this.QRvisible = true;
      },
      close() {
        this.QRvisible = false;
      },
      buildEmptyCard() {
        return {
          topCategoryCode: '',
          topCategoryName: '',
          productCode: '',
          productName: '',
          batchNo: '',
          materialFactoryCertNo: '',
          materialFurnaceNo: '',
          semiProductCertNo: '',
          issueDate: '',
          recoverDate: '',
          taskList: []
        };
      },
      buildCard(row, taskList) {
        return {
          topCategoryCode: row.topCategoryCode || '',
          topCategoryName: row.topCategoryName || '',
          productCode: row.productCode || '',
          productName: row.productName || '',
          batchNo: row.batchNo || '',
          materialFactoryCertNo: row.materialFactoryCertNo || '',
          materialFurnaceNo: row.materialFurnaceNo || '',
          semiProductCertNo: row.semiProductCertNo || '',
          issueDate: row.issueDate || '',
          recoverDate: row.recoverDate || '',
          taskList: taskList.map((item, idx) => ({
            taskNo: idx + 1,
            taskName: item.taskTypeName || item.taskName || ''
          }))
        };
      },
      getRows(card) {
        const list = Array.isArray(card.taskList) ? card.taskList.slice() : [];
        const rows = list.map((item, i) => ({
          taskNo: item.taskNo || i + 1,
          taskName: item.taskName || '',
          inNum: item.inNum || '',
          leader: item.leader || '',
          outNum: item.outNum || '',
          reworkNum: item.reworkNum || '',
          scrapNum: item.scrapNum || '',
          date: item.date || '',
          remark: item.remark || ''
        }));
        while (rows.length < this.rowCount) {
          rows.push({
            taskNo: '',
            taskName: '',
            inNum: '',
            leader: '',
            outNum: '',
            reworkNum: '',
            scrapNum: '',
            date: '',
            remark: ''
          });
        }
        return rows;
      },
      print() {
        const printSection = document.getElementById('printSection');
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write(`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>工序流转卡</title>
<style>
  @page { size: A4 portrait; margin: 12mm 10mm; }
  html, body {
    margin: 0;
    padding: 0;
    width: 190mm;
    font-family: 'SimSun', '宋体', 'Microsoft YaHei', serif;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .flow-card-page {
    width: 190mm;
    box-sizing: border-box;
    page-break-after: always;
  }
  .flow-card-page:last-child { page-break-after: auto; }
  .flow-card-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 16px;
    text-decoration: underline;
    margin: 0 0 8mm 0;
    padding-top: 2mm;
  }
  table {
    width: 190mm;
    border-collapse: collapse;
    table-layout: fixed;
  }
  .flow-card-header td {
    border: 1px solid #000;
    height: 11mm;
    padding: 0 6px;
    font-size: 16px;
    vertical-align: middle;
  }
  .flow-card-header td.label {
    width: 22%;
    text-align: center;
  }
  .flow-card-header td.value { width: 28%; }

  .flow-card-detail th,
  .flow-card-detail td {
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    padding: 1px 2px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .flow-card-detail th { font-weight: bold; }
  .flow-card-detail thead th { height: 7mm; }
  .flow-card-detail tbody td { height: 9mm; }

  .col-no { width: 7%; }
  .col-name { width: 17%; }
  .col-num { width: 7%; }
  .col-leader { width: 10%; }
  .col-bad { width: 14%; }
  .col-bad-sub { width: 7%; }
  .col-date { width: 13%; }
  .col-remark { width: 11%; }

  .flow-card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6mm;
    font-size: 16px;
  }
  .flow-card-footer .footer-item { width: 45%; }
</style>
</head>
<body>
${printSection.innerHTML}
</body>
</html>`);
        printWindow.document.close();
        printWindow.onload = function () {
          printWindow.focus();
          printWindow.print();
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  .flow-card-print {
    background: #fff;
    color: #000;
    font-family: 'SimSun', '宋体', 'Microsoft YaHei', serif;
    padding: 6mm 4mm;

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
  }

  .flow-card-page {
    width: 186mm;
    margin: 0 auto 12mm auto;
  }

  .flow-card-title {
    text-align: center;
    font-size: 26pt;
    font-weight: bold;
    letter-spacing: 14px;
    text-decoration: underline;
    margin: 0 0 6mm 0;
    padding-bottom: 2mm;
  }

  .flow-card-header,
  .flow-card-detail {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .flow-card-header td {
    border: 1px solid #000;
    height: 11mm;
    padding: 0 6px;
    font-size: 13pt;
    vertical-align: middle;

    &.label {
      width: 22%;
      text-align: center;
    }

    &.value {
      width: 28%;
    }
  }

  .flow-card-detail {
    th,
    td {
      border: 1px solid #000;
      text-align: center;
      vertical-align: middle;
      font-size: 11pt;
      padding: 1px 2px;
      line-height: 1.25;
    }

    th {
      font-weight: bold;
    }

    thead th {
      height: 7mm;
    }

    tbody td {
      height: 9mm;
    }
  }

  .col-no { width: 7%; }
  .col-name { width: 17%; }
  .col-num { width: 7%; }
  .col-leader { width: 10%; }
  .col-bad { width: 14%; }
  .col-bad-sub { width: 7%; }
  .col-date { width: 13%; }
  .col-remark { width: 11%; }

  .flow-card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6mm;
    font-size: 13pt;

    .footer-item {
      width: 45%;
    }
  }
</style>