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 class="info-line" v-if="orderInfo.auditorName">
          <view class="info-line-label">
            <text>驳回人</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.auditorName }}
          </view>
        </view>
        <view class="info-line" v-if="orderInfo.rejectTime">
          <view class="info-line-label">
            <text>驳回时间</text>
          </view>
          <view class="info-line-value">
            {{ $u.timeFormat(orderInfo.rejectTime, "yyyy-mm-dd hh:MM:ss") }}
          </view>
        </view>
        <view class="info-line" v-if="orderInfo.reject">
          <view class="info-line-label">
            <text>驳回原因</text>
          </view>
          <view class="info-line-value">
            {{ orderInfo.reject }}
          </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"
              >
              </u-number-box>
            </view>
          </good-item>
        </block>
      </view>
    </view>
    <view class="footer-box" v-if="auditState == '1'">
      <u-button class="cancelBtn" @tap="showReject = true">驳回</u-button>
      <u-button class="submitBtn" @tap="submit('2')">复核通过</u-button>
    </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>
    <auditReject :show.sync="showReject" @ok="onReject" />
  </view>
</template>

<script>
import goodItem from "@/components/good-item/good-item.vue";
import auditReject from "@/components/audit-reject/audit-reject.vue";
import { orderDetail, orderInfo } from "@/common/request/apis/purchase";
import { mapGetters } from "vuex";
import blePrintMixin from "@/common/mixins/blePrintMixin.js";
import { setReviewTask } from "@/common/request/apis/aduit.js";

export default {
  mixins: [blePrintMixin],
  components: {
    goodItem,
    auditReject,
  },
  data() {
    return {
      isUnfold: true, //是否展开
      orderInfo: {},
      goodsList: [],
      status: null,
      auditState: "0",
      showReject: false,
    };
  },
  onLoad(e) {
    this.getOrderInfo(e.id);
    this.getOrderDetail(e.id);
    this.auditState = e.auditState || "0";
  },
  computed: {
    ...mapGetters(["depotInfo"]),
  },
  methods: {
    getOrderInfo(id) {
      orderInfo(id).then((res) => {
        if (res.code == 200) {
          this.orderInfo = res.data;
          this.status = res.data.status;
          console.log("orderInfo===", res);
        }
      });
    },
    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;
          });
          console.log("goodsList=====", res.data);
          this.goodsList = res.data.rows;
        }
      });
    },
    toDetail(val) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${val.id}&name=${val.materialName}&materialId=${val.materialId}`,
      });
    },
    onReject(reject) {
      this.submit("7", reject);
    },
    async submit(status, reject) {
      try {
        const params = {
          id: this.orderInfo.id,
          status,
          number: this.orderInfo.number,
        };
        if (reject) {
          params.reject = reject;
        }
        const result = await setReviewTask(params);
        console.log("setReviewTask====params", params);
        console.log("setReviewTask====result", result);
        if (result.code === 200) {
          uni.$u.toast(result.msg);
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
          uni.setStorageSync("auditTaskRefresh", true);
        } else {
          uni.$u.toast(result.msg);
        }
      } catch (error) {}
    },
  },
};
</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;
      }
    }

    .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: center;
    .cancelBtn {
      width: 244rpx;
      height: 80rpx;
      border-radius: 16rpx;
      color: #666;
      font-family: "PingFang SC";
      font-size: 32rpx;
      font-weight: 500;
      margin-right: 20rpx;
    }
    .submitBtn {
      width: 244rpx;
      height: 80rpx;
      border-radius: 16rpx;
      background: #0256ff;
      color: #fff;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
}
</style>