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
            :show="showBarCode"
            :val="barcodeVal"
						cid="sku-barcode1"
            :opations="{
              width: 1,
              height: 100,
              displayValue: true,
              margin: 10,
            }"
          />
          <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
            :show="showBarCode"
            :val="barcodeVal"
						cid="sku-barcode"
            :opations="{
              width: 1,
              height: 100,
              displayValue: true,
              margin: 10,
            }"
          />
					<!-- 批次号(入库已完成) -->
					<tki-barcode
					  v-if="info.status==2"
            :show="showBarCode"
            :val="batchNumberVal"
						cid="batch-barcode"
            :opations="{
              width: 1,
              height: 100,
              displayValue: true,
              margin: 10,
            }"
          />
          <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;
    },
    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>