jsh_erp_app/components/print-pop/print-pop.vue

<template>
  <view>
    <u-popup
      :show="show"
      mode="center"
      @close="handleClose"
      @open="handleOpen"
      :round="10"
      :closeOnClickOverlay="false"
    >
      <view class="pop-content">
        <!-- 出库 -->
        <view class="pop-main" v-if="info.type == 2">
          <view class="flex_box flex-row-center pd-30">
            <view class="qr-code">
              <uqrcode
                ref="uqrcode"
                canvas-id="qrcode"
                :value="info.number"
                sizeUnit="rpx"
                :size="200"
              ></uqrcode>
            </view>
            <view class="flex-box flex-column flex-justify-sa info-box">
              <view class="item-value">{{ info.customerName }}</view>
              <view class="item-value">{{ info.number }}</view>
            </view>
          </view>
          <tki-barcode
            ref="skubarCode"
            :show="showBarCode"
            :val="barcodeVal"
            cid="sku-barcode1"
            :opations="{
              width: 1,
              height: 100,
              displayValue: true,
              margin: 10,
            }"
            :loadMake="false"
          />
          <view class="tips-value">请确认打印条码数量</view>
          <view class="num-box">
            <u-number-box
              v-model="printNum"
              :inputWidth="56"
              :min="0"
            ></u-number-box>
          </view>
        </view>
        <!-- 入库 -->
        <view class="pop-main" v-if="info.type == 1">
          <!-- sku -->
          <tki-barcode
            ref="skubarCode1"
            :show="showBarCode"
            :val="barcodeVal"
            cid="sku-barcode"
            :opations="{
              width: 1,
              height: 100,
              displayValue: true,
              margin: 10,
            }"
            :loadMake="false"
          />
          <!-- 批次号(入库已完成) -->
          <tki-barcode
            ref="batchNumber"
            :show="showBarCode && info.status == 2"
            :val="batchNumberVal"
            cid="batch-barcode"
            :opations="{
              width: 1,
              height: 100,
              displayValue: true,
              margin: 10,
            }"
            :loadMake="false"
          />
          <view class="tips-value">请确认打印条码数量</view>
          <view class="num-box">
            <u-number-box
              v-model="printNum"
              :inputWidth="56"
              :min="0"
            ></u-number-box>
          </view>
        </view>
        <!-- 操作按钮 -->
        <view class="btn-footer">
          <u-button
            text="取消"
            type="primary"
            :plain="true"
            @click="handleClose"
            :customStyle="{
              marginRight: '16rpx',
              border: '1px solid #bfc8db',
              color: '#86909c',
            }"
            class="footer-btn no-btn"
          ></u-button>
          <u-button
            text="确定"
            type="primary"
            @click="handleConfirm"
            class="footer-btn yes-btn"
          ></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue";

export default {
  components: { tkiBarcode },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    /**
     * 入库显示条码号、批次号（显示：订单状态且为已入库）
     * 出库显示二维码（订单编号）、发货客户名称、发货商品sku
     */
    info: {
      type: Object,
      default: () => ({
        customerName: "", // 客户名称
        number: "", // 订单编号
        barCode: "", // 商品条码
        batchNumber: "", // 批次号
        type: null, // 入库：1 出库；2
        status: "", // 订单状态 入库状态为2才有批次号，出库不显示批次号
      }),
    },
  },
  computed: {
    barcodeVal() {
      return this.info.barCode ? `SKU-${this.info.barCode}` : "";
    },
    batchNumberVal() {
      return this.info.batchNumber ? `PC${this.info.batchNumber}` : "";
    },
  },
  data() {
    return {
      showBarCode: false,
      printNum: 1,
    };
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.showBarCode = false;
      this.$emit("update:show", false);
      this.$emit("close");
    },
    handleOpen() {
      this.printNum = 1;
      this.showBarCode = true;
      this.$nextTick(() => {
        if (this.info.type == 1) {
          this.$refs.skubarCode1._makeCode();
          this.$refs.batchNumber._makeCode();
        } else {
          this.$refs.skubarCode._makeCode();
        }
      });
    },
    handleConfirm() {
      const params = {
        num: this.printNum,
        data: {
          barCode: this.info.barCode, // 商品条码
          customerName: this.info.customerName, //客户名
          number: this.info.number, // 单据编号
          batchNumber: this.info.batchNumber, // 批次号
          type: this.info.type, // 入库：1 出库；2
          status: this.info.status, // 订单状态 入库状态为2才有批次号，出库不显示批次号
        },
      };
      this.$emit("confirm", params);
      this.handleClose();
    },
  },
};
</script>

<style lang="scss" scoped>
.pop-content {
  width: 590rpx;
  padding: 60rpx 20rpx 48rpx;
  background: #fff;
  border-radius: 10rpx;

  .pop-main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .flex_box {
    display: flex;
  }
  .pd-30 {
    padding: 30rpx;
  }
  .mt-30 {
    margin-top: 30rpx;
  }
  .flex-column {
    flex-direction: column;
  }
  .flex-align-center {
    align-items: center;
  }
  .flex-row-center {
    flex-direction: row;
    justify-content: center;
  }

  .info-box {
    flex: 1;
  }
  .item-value {
    font-size: 32rpx;
    margin-bottom: 10rpx;
  }
  .qr-code {
    width: 200rpx;
    height: 200rpx;
    background-color: #bfc8db;
    margin-right: 20rpx;
  }

  .bar-code {
    width: 400rpx;
    margin-bottom: 10rpx;
  }
  .tips-value {
    color: #1d212a;
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-style: normal;
    font-weight: bold;
    margin-top: 30rpx;
    text-align: center;
  }

  .num-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
  }
  .btn-footer {
    display: flex;
    padding: 30rpx;

    .no-btn {
      border: 1px solid #bfc8db;
      color: #86909c;
    }
    .yes-btn {
      background: #0256ff;
    }

    .footer-btn {
      flex: 1;
      margin: 0 16rpx;
      width: 244rpx;
      border-radius: 16rpx;
      font-size: 32rpx;
    }
  }
}
</style>