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

<template>
  <div class="label-container">
    <!-- 第一行信息 -->
    <div class="label-title">
      <div class="label-info-left">
        <div>{{ productName ? productName : ' ' }}</div>
        <div>{{ purchaseOrigins ? purchaseOrigins : ' ' }}</div>
        <div>{{ batchNo ? batchNo : ' ' }}</div>
        <div>{{ specification ? specification : ' ' }}</div>
        <div>{{ createDate ? createDate : ' ' }}</div>
        <div>{{ layBy ? layBy : ' ' }}</div>
        <div>{{ notice ? notice : ' ' }}</div>
        <div>{{ enforceStandards ? enforceStandards : ' ' }}</div>
      </div>

      <div class="label-info-right">
        <div class="right-div">{{ level ? level : ' ' }}</div>
        <div class="right-div"
          >{{ netWeight ? netWeight : ' '
          }}{{ weightUnit ? weightUnit : ' ' }}</div
        >
        <div class="right-div"
          >{{ warrantyPeriod ? warrantyPeriod : ' '
          }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</div
        >
      </div>
    </div>
  </div>
</template>

<script>
  // import JsBarcode from 'jsbarcode';
  export default {
    data() {
      return {
        batchNo: '',
        createDate: '',
        enforceStandards: '',
        layBy: '',
        level: '',
        netWeight: '',
        notice: '',
        productName: '',
        purchaseOrigins: '',
        specification: '',
        warrantyPeriod: '',
        warrantyPeriodUnit: '',
        weightUnit: ''
      };
    },

    mounted() {
      const {
        batchNo,
        createDate,
        enforceStandards,
        layBy,
        level,
        netWeight,
        notice,
        productName,
        purchaseOrigins,
        specification,
        warrantyPeriod,
        warrantyPeriodUnit,
        weightUnit
      } = this.$route.query;
      this.productName = productName ? productName : '';
      this.batchNo = batchNo ? batchNo : '';
      this.createDate = createDate ? createDate : '';
      this.enforceStandards = enforceStandards ? enforceStandards : '';
      this.layBy = layBy ? layBy : '';
      this.level = level ? level : '';
      this.netWeight = netWeight ? netWeight : '';
      this.notice = notice ? notice : '';
      this.purchaseOrigins = purchaseOrigins ? purchaseOrigins : '';
      this.specification = specification ? specification : '';
      this.warrantyPeriod =
        warrantyPeriod && !warrantyPeriod ? warrantyPeriod : '';
      this.warrantyPeriodUnit = warrantyPeriodUnit ? warrantyPeriodUnit : '';
      this.weightUnit = weightUnit ? weightUnit : '';

      if (this.warrantyPeriodUnit === '1') {
        this.warrantyPeriodUnit = '分钟';
      } else if (this.warrantyPeriodUnit === '2') {
        this.warrantyPeriodUnit = '小时';
      } else if (this.warrantyPeriodUnit === '3') {
        this.warrantyPeriodUnit = '日';
      } else if (this.warrantyPeriodUnit === '4') {
        this.warrantyPeriodUnit = '月';
      } else if (this.warrantyPeriodUnit === '5') {
        this.warrantyPeriodUnit = '年';
      } else {
        this.warrantyPeriodUnit = '';
      }

      this.$nextTick(() => {
        window.print();
      });

      // const { id, name, price } = this.$route.query;
      // this.order = { id, name, price };

      // console.log('打印参数', this.$route.query);
      // console.log('打印参数', this.$route.query);
      // this.orderId = this.$route.query.orderId;
      // this.type = this.$route.query.type;
      // window.addEventListener('message', (event) => {
      //   console.log('接收到的参数', event.data);
      // });
      // JsBarcode('#barCode', '123456789012', {
      //   format: 'CODE128',
      //   width: 4,
      //   height: 40,
      //   displayValue: true
      // });
    }
  };
</script>

<style scoped lang="scss">
  .label-container {
    // font-family: "Arial", "Helvetica", sans-serif;
    width: 90mm;
    height: 60mm;
    box-sizing: border-box;
    font-size: 10px;
    color: green;
    margin: 0 auto;
  }

  .label-title {
    display: flex;
    flex-direction: row;
    padding: 0 45px;
    box-sizing: border-box;
  }
  .label-info-left {
    display: flex;
    // flex: 1;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 54px 0 0 62px;

    div {
      height: 17px;
    }
  }

  .label-info-right {
    display: flex;
    // flex: 1;
    flex-direction: column;
    justify-content: center;
    margin: 37px 0 1px 30px;

    // .right-box {
    //   // margin: 34px 0 1px 18px
    // }

    .right-div {
      // margin: 0 0 1px 18px;
      height: 17px;
    }
  }

  .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: 60px;
    }
  }

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

  .info {
    display: flex;
    flex-direction: column;
    padding: 0 62px 0 45px;
    box-sizing: border-box;

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

  .phone-box {
    display: flex;
    flex-direction: row;
    padding: 0 62px 0 45px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .phone-canvas-left-box {
      width: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      canvas {
        width: 100px;
        height: 55px;
      }

      p {
        margin: 0;
        padding: 0;
        font-size: 9px;
        font-weight: normal;
      }
    }

    .phone-canvas-right-box {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      flex-direction: column;
      align-items: center;
      canvas {
        width: 150px;
        height: 55px;
      }

      p {
        margin: 0;
        padding: 0;
        font-size: 10px;
        font-weight: normal;
      }
    }
  }

  .icons {
    display: flex;
    gap: 3px;
    padding: 0 62px 0 45px;
    margin-top: 10px;
    box-sizing: border-box;
    font-size: 8px;
  }

  .barcode {
    text-align: center;
  }

  .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;
  }
</style>