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

<template>
  <div class="label-container">
    <div class="ju_ren_one_level">
      <span>{{ productName ? productName : ' ' }}</span>
      <span class="ju_ren_one_level_two">{{ '' }}</span>
    </div>

    <div class="ju_ren_two_level">
      <span>{{ purchaseOrigins ? purchaseOrigins : ' ' }}</span>
    </div>

    <div class="ju_ren_two_level">
      <span>{{ specification ? specification : ' ' }}</span>
      <span class="ju_ren_one_level_two"
        >{{ netWeight ? netWeight : ' '
        }}{{ weightUnit ? weightUnit : ' ' }}</span
      >
    </div>

    <div class="ju_ren_Three_level">
      <span>{{ level ? level : ' ' }}</span>
    </div>

    <div class="ju_ren_four_level">
      <span>{{ batchNo ? batchNo : ' ' }}</span>
      <span class="ju_ren_two_level_two">{{
        createDate ? createDate : ' '
      }}</span>
      <span class="ju_ren_two_level_two"
        >{{ warrantyPeriod ? warrantyPeriod : ' '
        }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</span
      >
    </div>

    <div class="ju_ren_four_level">
      <span>{{ notice ? notice : ' ' }}</span>
    </div>

    <div class="ju_ren_four_level">
      <span>{{ layBy ? layBy : ' ' }}</span>
    </div>

    <div class="ju_ren_four_level">
      <span>{{ enforceStandards ? enforceStandards : ' ' }}</span>
    </div>
  </div>
</template>

<script>
  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();
      });
    }
  };
</script>

<style scoped lang="scss">
  .label-container {
    width: 90mm;
    height: 70mm;
    box-sizing: border-box;
    font-size: 12px;
    color: green;
    margin: 0 auto;
    font-weight: 700;

    .ju_ren_one_level {
      display: flex;
      margin: 63px 0 0 64px;
      flex-direction: row;

      span {
        display: inline-block;
        width: 70px;
        height: 19px;
      }

      .ju_ren_one_level_two {
        margin-left: 35px;
      }
    }

    .ju_ren_two_level {
      margin-left: 64px;

      span {
        display: inline-block;
        width: 70px;
        height: 19px;
      }

      .ju_ren_one_level_two {
        margin-left: 35px;
      }

      .ju_ren_two_level_two {
        margin-left: 100px;
      }
    }

    .ju_ren_Three_level {
      margin: 2px 0 0 110px;

      span {
        display: inline-block;
        height: 19px;
      }
    }
    .ju_ren_four_level {
      margin: 3px 0 0 64px;

      span {
        display: inline-block;
        width: 60px;
        height: 19px;
      }

      .ju_ren_one_level_two {
        margin-left: 42px;
      }

      .ju_ren_two_level_two {
        margin-left: 42px;
      }
    }
  }
</style>