kd-aiot-frontend-mes/src/views/produce/components/teRuiPrintOne.vue

<template>
  <ele-modal
    title="打印标签"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="800px"
    :maxable="true"
  >
    <div id="printSection">
      <div
        style="
          border: 1px solid #000;
          padding: 20px 0;
          width: 85mm;
          height: 60mm;
          box-sizing: border-box;
          font-weight: 700;
          font-size: 6px;
          color: #333;
          margin: 0 auto;
        "
      >
        <!-- 第一行信息 -->
        <div style="display: flex; flex-direction: row; padding: 0 20px">
          <div
            style="
              display: flex;
              flex: 1;
              flex-direction: column;
              flex-wrap: wrap;
            "
          >
            <div style="margin: 2px 0">产品名称：{{ productName }}</div>
            <div style="margin: 2px 0">生产批号：{{ batchNo }}</div>
            <div style="margin: 2px 0">生产日期：{{ createDate }}</div>
            <div style="margin: 2px 0">失效日期：2029-11-11</div>
            <div style="margin: 2px 0">产品数量：5套</div>
            <div style="margin: 2px 0">刃径：Φ4.2</div>
          </div>
          <div
            style="
              display: flex;
              flex: 2;
              flex-direction: column;
              align-items: center;
            "
          >
            <div>
              规格型号：A07SF
              <input type="checkbox" checked style="width: 8px; height: 8px" />
              A07SS
              <input type="checkbox" style="width: 8px; height: 8px" /> A07ST
              <input type="checkbox" style="width: 8px; height: 8px" />
            </div>
            <!-- 刀刃图示 -->
            <table
              style="
                border-collapse: collapse;
                width: 100%;
                margin: 8px 0;
                text-align: center;
                font-size: 6px;
              "
            >
              <thead>
                <tr>
                  <th style="border: 1px solid #000; padding: 4px">刀刃形状</th>
                  <th style="border: 1px solid #000; padding: 4px">外刃图示</th>
                  <th style="border: 1px solid #000; padding: 4px">内刃图示</th>
                </tr>
              </thead>
              <tbody style="height: 30px">
                <tr>
                  <td
                    style="width: 25px; border: 1px solid #000; padding: 4px"
                    >{{ productName }}</td
                  >
                  <td style="width: 33px; border: 1px solid #000; padding: 4px"
                    ><img src="outer.png" alt="外刃"
                  /></td>
                  <td style="width: 33px; border: 1px solid #000; padding: 4px"
                    ><img src="inner.png" alt="内刃"
                  /></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div style="display: flex; flex-direction: row; padding: 0 20px">
          <div style="flex: 1; margin-right: 5px">
            <p style="padding: 0; margin: 1px 0"
              >医疗器械注册证编号：{{ enforceStandards }}</p
            >
            <p style="padding: 0; margin: 1px 0"
              >生产许可证编号：湘食药监械生产许20170012号</p
            >
            <p style="padding: 0; margin: 1px 0"
              >注册人/生产企业名称：{{ enterpriseDTO.name }}</p
            >
            <p style="padding: 0; margin: 1px 0">
              注册人/生产企业住址：{{ enterpriseDTO.address }}
            </p>
          </div>

          <div style="flex: 1">
            <p style="padding: 0; margin: 0">
              生产地址：{{ purchaseOrigins }}
            </p>
            <div style="width: 100%; display: flex; justify-content: flex-end">
              <canvas
                id="barCodeOne"
                style="width: 70px; height: 20px; margin-top: 8px"
              ></canvas>
            </div>
          </div>
        </div>

        <div style="display: flex; flex-direction: row; padding: 0 20px">
          <div style="width: 160px">
            <p style="margin: 0; padding: 0"
              >联系电话：{{ enterpriseDTO.tel }}</p
            >
            <p style="margin: 0; padding: 0"
              >其他内容详见说明书<span>合格</span></p
            >
          </div>
          <div style="display: flex; width: 100%; justify-content: flex-end">
            <canvas id="barCodeTwo" style="width: 170px; height: 35px"></canvas>
          </div>
        </div>

        <!-- 图标与条码 -->
        <div style="display: flex; gap: 10px; padding: 0 20px">
          {{ notice }}
          <!-- <span>STERILE EO</span>
          <span>经环氧乙烷灭菌</span>
          <span>不得二次使用</span>
          <span>包装破损时切勿使用</span>
          <span>查阅使用说明</span> -->
        </div>

        <!-- 标签尺寸 -->
        <!-- <div class="size">标签尺寸：60*90</div> -->
        <!-- 有效期 -->
        <!-- <div
      style="
        display: flex;
        text-align: left;
        font-size: 14px;
        font-weight: normal;
        align-items: center;
        margin-left: 10px;
      "
      >有效期变更为 <strong>5 </strong>年</div
    > -->
      </div>
    </div>
    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import JsBarcode from 'jsbarcode';
  export default {
    data() {
      return {
        QRvisible: false,
        batchNo: '', //批次号
        productName: '', //产品名称
        createDate: '', //生产日期
        enforceStandards: '', //执行标准
        warrantyPeriodUnit: '', //保质日期单位
        layBy: '', //贮藏
        specification: '', //规格
        purchaseOrigins: '', //产地
        notice: '', //注意
        enterpriseDTO: {},
        expiryDate: '' //失效日期
      };
    },

    methods: {
      open(item, shortBarcode, longBarcode) {
        this.batchNo = item.batchNo;
        this.productName = item.productName;
        this.createDate = item.createDate;
        this.enforceStandards = item.enforceStandards;
        this.warrantyPeriodUnit = item.warrantyPeriodUnit;
        this.layBy = item.layBy;
        this.specification = item.specification;
        this.notice = item.notice;
        this.enterpriseDTO = item.enterpriseDTO;

        const newData = this.createDate.join('-')
        

        this.QRvisible = true;

        this.$nextTick(() => {
          JsBarcode('#barCodeOne', shortBarcode, {
            format: 'CODE128',
            width: 2,
            height: 40,
            displayValue: true
          });

          JsBarcode('#barCodeTwo', longBarcode, {
            format: 'CODE128',
            width: 2,
            height: 40,
            displayValue: true
          });
        });
      },

      close() {
        this.QRvisible = false;
      },

      print() {
        const printSection = document.getElementById('printSection');

        const canvasOne = document.getElementById('barCodeOne');
        const imgOne = document.createElement('img');
        imgOne.src = canvasOne.toDataURL('image/png');
        imgOne.style.width = '70px';
        imgOne.style.height = '20px';

        // const tempOne = canvasOne.cloneNode(true);
        canvasOne.parentNode.replaceChild(imgOne, canvasOne);

        const canvasTwo = document.getElementById('barCodeTwo');
        const imgTwo = document.createElement('img');
        imgTwo.src = canvasTwo.toDataURL('image/png');
        imgTwo.style.width = '170px';
        imgTwo.style.height = '35px';

        // const tempTwo = canvasTwo.cloneNode(true);
        canvasTwo.parentNode.replaceChild(imgTwo, canvasTwo);

        // 创建打印任务
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head><title>打印预览</title>');
        printWindow.document.write(
          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
        );
        printWindow.document.write('</head><body>');
        printWindow.document.write(printSection.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        // printWindow.onload = function () {
        //   printWindow.print();
        // };
        // 4. 等待图片加载完再打印
        printWindow.onload = function () {
          setTimeout(() => {
            printWindow.print();
            // printWindow.close();
          }, 500);
        };
      }
    }
  };
</script>

<style scoped lang="scss">
  .label-container {
    border: 1px solid #000;
    padding: 20px 0;
    width: 85mm;
    height: 63mm;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 6px;
    color: #333;
  }

  .label-title {
    display: flex;
    flex-direction: row;
    padding: 0 20px;
  }
  .label-info-left {
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: wrap;

    div {
      margin: 2px 0;
    }
  }

  .label-info-right {
    display: flex;
    flex: 2;
    flex-direction: column;
    align-items: center;

    input {
      width: 8px;
      height: 8px;
    }
  }

  .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .knife-table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    text-align: center;
  }

  .knife-table th,
  .knife-table td {
    border: 1px solid #000;
    padding: 4px;
  }

  .knife-table tbody {
    height: 30px;

    .knife-title {
      width: 33px;
    }
  }

  .knife-table img {
    height: 80px;
  }

  .info {
    display: flex;
    flex-direction: row;
    padding: 0 20px;
    .info-left-box {
      flex: 1;
      margin-right: 5px;

      p {
        padding: 0;
        margin: 1px 0;
      }
    }

    .info-right-box {
      flex: 1;

      p {
        padding: 0;
        margin: 0;
      }

      .canvas-box {
        width: 100%;
        display: flex;
        justify-content: flex-end;

        canvas {
          width: 70px;
          height: 20px;
          margin-top: 8px;
        }
      }
    }
  }

  .phone-box {
    display: flex;
    flex-direction: row;
    padding: 0 20px;
    div {
      width: 160px;

      p {
        margin: 0;
        padding: 0;
        span {
          margin-left: 20px;
          font-size: 12px;
          border: 1px solid #333;
        }
      }
    }

    .phone-canvas-box {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      canvas {
        width: 170px;
        height: 35px;
      }
    }
  }

  .icons {
    display: flex;
    gap: 10px;
    padding: 0 20px;
  }

  .barcode {
    text-align: center;
    margin: 10px 0;
  }

  .size {
    text-align: center;
    font-size: 8px;
    font-weight: normal;
    margin-top: 8px;
  }

  .expiry {
    display: flex;
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    align-items: center;
    margin-left: 10px;
  }
</style>