jsh_erp_app/pages/picking-task/detail.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">
            {{ orderInfo.number }}
          </view>
        </view>
        <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.goodsQuantity }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>出库种类</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.goodsTypeCount }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>制单日期</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.createTime }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>制单人</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.createName || "-" }}
          </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">
          <view class="info-line-label">
            <text>出库人</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.operName || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>备注信息</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.remark || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>出库时间</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.submitTime }}
          </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="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">
              <view class="num-box-text">已确认出库数量</view>
              <u-number-box
                v-model="item.actualQuantityInStorage"
                disabled
                min="0"
                :inputWidth="56"
                :max="item.inventory"
              >
                <!-- <view slot="minus" class="minus">
									<u-icon name="minus" color="#DADADA" size="12"></u-icon>
								</view>
								<text slot="input" class="input">{{(item.actualQuantityInStorage * 1).toFixed(0) || 0}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view> -->
              </u-number-box>
            </view>
          </good-item>
        </block>
      </view>
    </view>
    <!-- 打印条码弹框 -->
    <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 { orderDetail, orderInfo } from "@/common/request/apis/purchase";
import { mapGetters } from "vuex";
import blePrintMixin from "@/common/mixins/blePrintMixin.js";

export default {
  mixins: [blePrintMixin],
  components: {
    goodItem,
  },
  data() {
    return {
      errorShow: false,
      successShow: false,
      isUnfold: true, //是否展开
      orderInfo: {},
      goodsList: [],
      status: null,
    };
  },
  onLoad(e) {
    this.status = e.status;
    this.getOrderInfo(e.id);
    this.getOrderDetail(e.id);
  },
  computed: {
    ...mapGetters(["depotInfo"]),
  },
  methods: {
    getOrderInfo(id) {
      orderInfo(id).then((res) => {
        if (res.code == 200) {
          this.orderInfo = res.data;
        }
      });
    },
    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;
        }
      });
    },
    submitClick() {},
    confirm() {
      this.errorShow = false;
    },
    backClick() {},
    // 扫码确认
    scanConfirm() {},
    manualClick() {
      this.goodsShow = true;
    },
    toDetail(val) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${val.id}&name=${val.materialName}&materialId=${val.materialId}`,
      });
    },
  },
};
</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;
        min-height: 92rpx;
        color: #333;
        font-family: "PingFang SC";
        font-size: 28rpx;
        font-weight: 400;
        display: flex;
        align-items: center;

        &-label {
          width: 162rpx;
        }

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

    .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 #dadada;
          margin: 0 8rpx;
        }
        .minus {
          width: 40rpx;
          height: 40rpx;
          border-radius: 8rpx;
          border: 1px solid #dadada;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .plus {
          width: 40rpx;
          height: 40rpx;
          border-radius: 8rpx;
          background-color: #dadada;
          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>