jsh_erp_app/pages/picking-task/delivery.vue

<template>
  <view class="deliver-page">
    <u-navbar
      height="40px"
      title="货物出库"
      bgColor="#0256FF"
      :titleStyle="{ color: '#fff' }"
      leftIconColor="#fff"
      autoBack
      placeholder
    >
    </u-navbar>
    <view class="container_main">
      <view class="info-box" :class="isUnfold ? '' : 'min-height'">
        <view class="info-line">
          <view class="info-line-label">
            <text>发出仓库</text>
          </view>
          <view class="info-line-value">
            {{ depotInfo ? depotInfo.depotName : "" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>客户</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.supplierName || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>出库类型</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.subType || "-" }}
          </view>
        </view>
        <view class="info-line" v-if="orderInfo.submitTime">
          <view class="info-line-label">
            <text>出库日期</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.submitTime || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>配送地址</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.receiverAddress || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>上传凭证</text>
          </view>
          <view class="info-line-value ss-p-y-24">
            <upload-image
              v-model="voucherPicture"
              width="196rpx"
              height="196rpx"
            ></upload-image>
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>备注信息</text>
          </view>
          <view class="info-line-value">
            <u-input
              v-model="orderInfo.mark"
              placeholder="请输入备注信息"
              border="none"
            ></u-input>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view class="btn-cont" @click="isUnfold = !isUnfold">
          <text>{{ isUnfold ? "收起" : "展开" }}</text>
          <u-icon :name="isUnfold ? 'arrow-up' : 'arrow-down'"></u-icon>
        </view>
      </view>

      <view class="scan-box">
        <view class="scan-box-l" @click="scanCode">
          <u-image
            width="120rpx"
            height="120rpx"
            src="@/static/image/zidong-saoma-img.png"
          ></u-image>
          <view class="tips-text">扫描快速识别货物</view>
          <view class="tips-text2">
            <u-icon name="checkmark-circle-fill" color="#0256FF"></u-icon>
            <text>连续扫描</text>
          </view>
        </view>
        <!-- <view class="scan-box-r" @click="manualClick">
					<u-image width="120rpx" height="120rpx" src="@/static/image/shoudong-saoma-img.png"></u-image>
					<view class="tips-text">手动选择</view>
				</view> -->
      </view>
      <!-- 货物清单 -->
      <view class="cargo-list">
        <view class="cargo-list-title">
          <view>出库货物清单</view>
          <view class="cargo-list-title-tips">（轻触货物查看详情）</view>
        </view>
        <block v-for="(item, i) in goodsList" :key="i">
          <good-item
            :item="item"
            @toDetail="toDetail"
            :show-print="true"
            @print="(e) => handlePrint(e.id, '2', status)"
          >
            <view class="num-box" @click.stop="">
              <view class="num-box-text">已确认出库数量</view>
              <u-number-box
                v-model="item.materialNumber"
                :min="0"
                :inputWidth="56"
                :max="item.inventory"
              >
              </u-number-box>
            </view>
          </good-item>
        </block>
      </view>
    </view>

    <view class="footer-box">
      <view class="footer-box-l">
        <view>货物种类:{{ speciesNum }}种</view>
        <view>货物总数:{{ orderGoodsNum }}件</view>
      </view>
      <button class="submitBtn" @tap="submitClick">提交</button>
    </view>
    <error-pop
      v-model="errorShow"
      @close="errorShow = false"
      @confirm="confirm"
      :content="popText.errorText"
    ></error-pop>
    <success-pop
      v-model="successShow"
      @close="successShow = false"
      @backClick="backClick"
      :content="popText.successText"
    ></success-pop>
    <!-- 扫码之后弹窗 -->
    <scaned-pop
      v-if="scanedShow"
      v-model="scanedShow"
      :scanNum="scanNum"
      :max="scanMaxNum"
      @close="scanedShow = false"
      @confirm="scanConfirm"
    ></scaned-pop>

    <goods-pop v-model="goodsShow" @close="goodsShow = false"></goods-pop>
    <!-- 打印条码弹框 -->
    <print-pop
      :show.sync="blePrintPop.show"
      :info="blePrintPop.data"
      @confirm="startPrint"
    ></print-pop>
    <!-- 选择蓝牙设备弹框 -->
    <ble-pop
      :show.sync="bleSelectPop.show"
      :list="discoveredDevices"
      @close="closeBleSelectPop"
      @refresh="refreshBleDevice"
      @selectItem="handleSelectBle"
    ></ble-pop>

    <ble-tip-pop
      v-model="bleErrorTipPop.show"
      :is-center="true"
      @confirm="bleErrorTipConfirm"
      :content="bleErrorTipPop.content"
      :extraText="bleErrorTipPop.extraText"
    >
    </ble-tip-pop>
  </view>
</template>

<script>
import goodItem from "@/components/good-item/good-item.vue";
import errorPop from "@/components/error-pop/error-pop.vue";
import successPop from "@/components/success-pop/success-pop.vue";
import scanedPop from "@/components/scaned-pop/scaned-pop.vue";
import goodsPop from "@/components/goods-pop/goods-pop.vue";
import {
  orderDetail,
  orderInfo,
  orderSubmit,
  getSkuByUpc,
} from "@/common/request/apis/purchase";
import { mapGetters } from "vuex";
import blePrintMixin from "@/common/mixins/blePrintMixin.js";

export default {
  mixins: [blePrintMixin],
  components: {
    goodItem,
    errorPop,
    successPop,
    scanedPop,
    goodsPop,
  },
  data() {
    return {
      popText: {
        errorText: "实际出库数量与应出库数量有差异，是否确认提交?",
        successText: "您的拣货出库任务已提交，审核后方可生效！",
      },
      goodsShow: false,
      scanedShow: false,
      errorShow: false,
      successShow: false,
      value: 0,
      isUnfold: true, //是否展开
      info: {
        mark: "",
        url: "",
      },
      goodsList: [],
      orderInfo: {},
      id: "",
      calendarShow: false,
      value1: "",
      maxDate: Number(new Date()),
      chooseGoodsInfo: {},
      voucherPicture: "",
      scanIndex: -1,
      scanNum: 1,
      scanMaxNum: 0,
      status: null,
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.getOrderDetail(e.id);
    this.getOrderInfo(e.id);
  },
  computed: {
    ...mapGetters(["depotInfo"]),
    speciesNum() {
      let num = 0;
      if (this.goodsList.length == 0 || !this.goodsList) {
        num = 0;
      } else {
        num = this.goodsList.length;
      }
      return num;
    },
    // 订单返回的数量
    orderGoodsNum() {
      let num = 0;
      if (this.goodsList.length == 0 || !this.goodsList) {
        num = 0;
      } else {
        this.goodsList.forEach((item) => {
          num += item.operNumber;
        });
      }
      return num;
    },
  },
  onShow() {
    uni.$on("scanFinish", async (data) => {
      try {
        const params = {
          upc: data,
        };
        console.log("params===", params);
        const res = await getSkuByUpc(params);
        console.log("getSkuByUpc====", res);
        if (res.code === 200) {
          const sku = res.data;
          if (this.goodsList.length == 0)
            return uni.$u.toast("该货物不属于该任务");
          let index = this.goodsList.findIndex((item) => item.sku == sku);
          if (index == -1) return uni.$u.toast("该货物不属于该任务");
          this.scanIndex = index;
          this.scanNum = this.goodsList[index].materialNumber;
          this.scanMaxNum = this.goodsList[index].inventory;
          this.scanedShow = true;
        } else {
          uni.$u.toast(res.msg);
        }
      } catch (error) {}
    });
  },
  onHide() {
    uni.$off("scanFinish");
  },
  onUnload() {
    uni.$off("scanFinish");
  },
  methods: {
    scanCode() {
      this.$scan.scanCode();
    },
    calendarConfirm(val) {
      this.goodsList.forEach((item) => {
        if (item.id == this.chooseGoodsInfo.id) {
          item.productionDate = this.$u.timeFormat(val.value, "yyyy-mm-dd");
        }
      });
      this.calendarShow = false;
    },
    calendarClick(item) {
      console.log(item.productionDate, "item.productionDate");
      this.chooseGoodsInfo = item;
      if (item.productionDate) {
        this.value1 = Number(new Date(item.productionDate));
      } else {
        this.value1 = Number(new Date());
      }
      this.calendarShow = true;
    },
    getOrderInfo(id) {
      orderInfo(id).then((res) => {
        if (res.code == 200) {
          this.orderInfo = res.data;
          this.status = res.data.status;
          console.log("this.orderInfo====", this.orderInfo);
        }
      });
    },
    getOrderDetail(id) {
      orderDetail(id).then((res) => {
        if (res.code == 200) {
          res.data.rows.forEach((item) => {
            if (item.imgName && item.imgName.length > 0) {
              item.imgNameArr = item.imgName.split(",");
            } else {
              item.imgNameArr = [];
            }
            item.materialNumber = 0;
          });
          this.goodsList = res.data.rows;
          console.log("goodsList==========", this.goodsList);
        }
      });
    },
    submitClick() {
      let num = 0;
      console.log("this.goodsList=====", this.goodsList);
      this.goodsList.forEach((item) => {
        if (item.materialNumber * 1 != item.operNumber) {
          num++;
        }
      });
      console.log("num=====", num);
      if (num > 0) {
        return (this.errorShow = true);
      }
      console.log("111111=====", 1111);
      this.toOrderSubmit();
    },
    toOrderSubmit() {
      console.log("this.goodsList=====", this.goodsList);
      let materials = this.goodsList.map((item) => {
        return {
          barCode: item.sku,
          materialNumber: item.materialNumber,
          productionDate: item.productionDate
            ? this.$u.timeFormat(item.productionDate, "yyyy-mm-dd")
            : "",
        };
      });
      let params = {
        id: this.id,
        materials: materials,
        voucherPicture: this.voucherPicture || "",
        remark: this.orderInfo.mark || "",
        number: this.orderInfo.number,
      };
      console.log("orderSubmit========params====", params);
      orderSubmit(params).then((res) => {
        console.log("orderSubmit============res=====", res);
        if (res.code == 200) {
          if (this.errorShow) {
            this.errorShow = false;
          }
          this.successShow = true;
        } else {
          uni.showToast({
            icon: "error",
            mask: true,
            title: res.msg || "服务错误",
          });
        }
      });
    },
    confirm() {
      this.toOrderSubmit();
      this.errorShow = false;
    },
    backClick() {
      uni.setStorageSync("orderRefresh", true);
      uni.navigateBack();
    },
    // 扫码确认
    scanConfirm(val) {
      this.goodsList[this.scanIndex].materialNumber = Number(val);
      this.scanedShow = false;
    },
    manualClick() {
      this.goodsShow = true;
    },
    toDetail(val) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${val.id}&name=${val.materialName}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.deliver-page {
  min-height: 100vh;
  background-color: #f0f6fb;
  padding-bottom: 130rpx;

  .container_main {
    padding: 24rpx;

    .info-box {
      background-color: #fff;
      border-radius: 16rpx 16rpx 0 0;
      padding: 24rpx 24rpx 0 24rpx;

      .info-line {
        border-bottom: 1px solid #f4f4f4;
        padding: 24rpx 0;
        color: #333;
        font-family: "PingFang SC";
        font-size: 28rpx;
        line-height: 1.5;
        font-weight: 400;
        display: flex;
        align-items: center;

        &-label {
          flex: 0 0 162rpx;
          width: 162rpx;
        }

        &-value {
          word-break: break-all;
        }

        .must-box {
          color: #ff3b1d;
        }
      }
    }

    .min-height {
      height: 300rpx;
      overflow: hidden;
    }

    .btn-box {
      height: 112rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-radius: 0 0 16rpx 16rpx;

      .btn-cont {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 154rpx;
        height: 56rpx;
        border-radius: 120rpx;
        border: 1px solid #d9d9d9;
        color: #666;
        font-family: "PingFang SC";
        font-size: 28rpx;
        font-weight: 400;
      }
    }

    .scan-box {
      margin-top: 24rpx;
      padding: 24rpx 0;
      border-radius: 16rpx;
      background: #fff;
      display: flex;

      .tips-text {
        color: #333;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 48rpx;
      }

      .tips-text2 {
        color: #0256ff;
        font-size: 24rpx;
        font-weight: 400;
        display: flex;
        align-items: center;

        .radio-box {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
          border: 1px solid #d9d9d9;
          margin-right: 16rpx;
        }
      }

      .scan-box-l {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        &::after {
          content: "";
          display: block;
          width: 1px;
          height: 138rpx;
          background-color: #f4f4f4;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }

      .scan-box-r {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .cargo-list {
      padding: 24rpx 0;
      background-color: #fff;
      margin-top: 24rpx;
      border-radius: 16rpx;

      .cargo-list-title {
        font-family: "PingFang SC";
        font-size: 32rpx;
        font-style: normal;
        font-weight: bold;
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 50rpx;

        &::after {
          content: "";
          display: block;
          width: 6rpx;
          height: 30rpx;
          border-radius: 100px;
          background: #0256ff;
          position: absolute;
          top: 50%;
          left: 24rpx;
          transform: translateY(-50%);
        }

        .cargo-list-title-tips {
          color: #0256ff;
          font-size: 24rpx;
          font-weight: 400;
        }
      }

      .num-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 48rpx 0 26rpx;
        .num-box-text {
          color: #666;
          font-family: "PingFang SC";
          font-size: 28rpx;
          font-weight: 400;
        }
        .input {
          width: 112rpx;
          text-align: center;
          border-bottom: 1px solid #0256ff;
          margin: 0 8rpx;
        }
        .minus {
          width: 40rpx;
          height: 40rpx;
          border-radius: 8rpx;
          border: 1px solid #0256ff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .plus {
          width: 40rpx;
          height: 40rpx;
          border-radius: 8rpx;
          background-color: #0256ff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .footer-box {
    background-color: #fff;
    height: 126rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx 0 60rpx;
    .footer-box-l {
      color: #666;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 400;
    }
    .submitBtn {
      width: 362rpx;
      height: 76rpx;
      border-radius: 16rpx;
      background: #0256ff;
      color: #fff;
      font-size: 28rpx;
      font-weight: 500;
      margin: 0;
    }
  }
}
</style>