aiot-app/pages/pda/beEntrust/detail/detail.vue

<template>
  <view class="detail-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="受托详情"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>
    <scroll-view scroll-y class="detail-content">
      <view class="section">
        <view class="section-title">基本信息</view>

        <view class="info-row">
          <text class="label">编码:</text>
          <text class="value highlight">{{ detail.code }}</text>
        </view>

        <view class="info-row">
          <text class="label">类型:</text>
          <text class="value">{{ getTypeText(detail.type) }}</text>
        </view>

        <view class="info-row">
          <text class="label">名称:</text>
          <text class="value">{{ detail.name }}</text>
        </view>

        <view class="info-row">
          <text class="label">紧急程度:</text>
          <text class="value">{{
            detail.priority == 1 ? "一般" : "紧急"
          }}</text>
        </view>

        <view class="info-row">
          <text class="label">请托部门:</text>
          <text class="value">{{ detail.applyDeptName }}</text>
        </view>

        <view class="info-row">
          <text class="label">请托人:</text>
          <text class="value">{{ detail.createUserName }}</text>
        </view>

        <view class="info-row">
          <text class="label">请托工厂:</text>
          <text class="value">{{ detail.applyFactoriesName }}</text>
        </view>

        <view class="info-row">
          <text class="label">受托工厂:</text>
          <text class="value">{{ detail.beEntrustedFactoriesName }}</text>
        </view>

        <view class="info-row">
          <text class="label">受托部门:</text>
          <text class="value">{{ detail.beEntrustedDeptName }}</text>
        </view>

        <view class="info-row">
          <text class="label">状态:</text>
          <text class="status-tag" :class="getStatusClass(detail.status)">
            {{ getStatusText(detail.status) }}
          </text>
        </view>

        <view class="info-row">
          <text class="label">审批状态:</text>
          <text
            class="status-tag"
            :class="getApprovalStatusClass(detail.approvalStatus)"
          >
            {{ getApprovalStatusText(detail.approvalStatus) }}
          </text>
        </view>

        <view class="info-row">
          <text class="label">收货状态:</text>
          <text
            class="status-tag"
            :class="getSendStatusClass(detail.sendStatus)"
          >
            {{ getSendStatusText(detail.sendStatus) }}
          </text>
        </view>

        <view class="info-row">
          <text class="label">创建时间:</text>
          <text class="value">{{ detail.createTime }}</text>
        </view>
      </view>

      <view class="section">
        <view class="section-title">产品信息</view>

        <view class="info-row">
          <text class="label">产品名称:</text>
          <text class="value">{{ detail.categoryName }}</text>
        </view>

        <view class="info-row">
          <text class="label">产品编码:</text>
          <text class="value">{{ detail.categoryCode }}</text>
        </view>

        <view class="info-row">
          <text class="label">请托数量:</text>
          <text class="value"
            >{{ detail.totalCount }}{{ detail.measuringUnit }}</text
          >
        </view>

        <view class="info-row">
          <text class="label">接收数量:</text>
          <text class="value"
            >{{ detail.receiveQuantity || 0 }}{{ detail.measuringUnit }}</text
          >
        </view>

        <view class="info-row">
          <text class="label">牌号:</text>
          <text class="value">{{ detail.brandNum }}</text>
        </view>

        <view class="info-row">
          <text class="label">批次号:</text>
          <text class="value">{{ detail.batchNo }}</text>
        </view>

        <view class="info-row">
          <text class="label">规格:</text>
          <text class="value">{{ detail.specification }}</text>
        </view>

        <view class="info-row">
          <text class="label">型号:</text>
          <text class="value">{{ detail.modelType }}</text>
        </view>

        <view class="info-row">
          <text class="label">计划编号:</text>
          <text class="value">{{ detail.productionPlanCode }}</text>
        </view>

        <view class="info-row">
          <text class="label">生产工单号:</text>
          <text class="value">{{ detail.workOrderCode }}</text>
        </view>

        <view class="info-row">
          <text class="label">工艺路线:</text>
          <text class="value">{{ detail.produceRoutingName }}</text>
        </view>

        <view class="info-row">
          <text class="label">计划开始时间:</text>
          <text class="value">{{ detail.planStartTime }}</text>
        </view>

        <view class="info-row">
          <text class="label">计划结束时间:</text>
          <text class="value">{{ detail.planCompleteTime }}</text>
        </view>

        <view class="info-row">
          <text class="label">完成时间:</text>
          <text class="value">{{ detail.planDeliveryTime }}</text>
        </view>

        <view class="info-row">
          <text class="label">需求描述:</text>
          <text class="value">{{ detail.describes }}</text>
        </view>

        <view v-if="detail.beReason" class="info-row">
          <text class="label">原因:</text>
          <text class="value danger">{{ detail.beReason }}</text>
        </view>
      </view>
    </scroll-view>

    <view class="footer-btns">
      <button class="btn-back" @click="handleBack">返回</button>
      <button v-if="canReceive" class="btn-receive" @click="handleReceive">
        收货
      </button>
      <button
        v-if="canViewSendDetail"
        class="btn-detail"
        @click="handleSendDetail"
      >
        发货详情
      </button>
      <button
        v-if="canViewReceiveDetail"
        class="btn-detail"
        @click="handleReceiveDetail"
      >
        收货详情
      </button>
    </view>
  </view>
</template>

<script>
import { beEntrustDetail } from "@/api/beEntrust/index";

export default {
  data() {
    return {
      id: "",
      detail: {},
    };
  },

  computed: {
    canReceive() {
      return this.detail.approvalStatus == 2 && this.detail.sendStatus == 1;
    },
    canViewSendDetail() {
      return (
        this.detail.approvalStatus == 2 &&
        (this.detail.sendStatus == 3 || this.detail.sendStatus == 4)
      );
    },
    canViewReceiveDetail() {
      return (
        this.detail.approvalStatus == 2 &&
        this.detail.sendStatus != 1 &&
        this.detail.sendStatus != 5
      );
    },
  },

  onLoad(options) {
    this.id = options.id;
    this.getDetail();
  },

  methods: {
    back() {
      uni.navigateBack();
    },

    async getDetail() {
      try {
        const res = await beEntrustDetail(this.id);
        this.detail = res || {};
      } catch (error) {
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      }
    },

    getTypeText(type) {
      const typeMap = { 1: "加工", 2: "装配" };
      return typeMap[type] || "";
    },

    getStatusText(status) {
      const map = {
        0: "未提交",
        1: "已提交",
        2: "已发布",
        4: "待生产",
        5: "生产中",
        6: "已完成",
        7: "已延期",
        8: "待下达",
      };
      return map[status] || "";
    },

    getStatusClass(status) {
      if (!status || status == 0) return "status-default";
      return "status-success";
    },

    getSendStatusText(sendStatus) {
      const map = {
        0: "未收货",
        1: "已发货",
        2: "已收货",
        3: "受托已发",
        4: "请托已收",
        5: "受托拒收",
        6: "请托拒收",
      };
      return map[sendStatus] || "未收货";
    },

    getSendStatusClass(sendStatus) {
      if (!sendStatus || sendStatus == 0) return "status-default";
      if (sendStatus == 5 || sendStatus == 6) return "status-danger";
      return "status-success";
    },

    getApprovalStatusText(approvalStatus) {
      const map = { 0: "未提交", 1: "审核中", 2: "审核通过", 3: "审核不通过" };
      return map[approvalStatus] || "未提交";
    },

    getApprovalStatusClass(approvalStatus) {
      const map = {
        0: "status-default",
        1: "status-warning",
        2: "status-success",
        3: "status-danger",
      };
      return map[approvalStatus] || "status-default";
    },

    handleBack() {
      uni.navigateBack();
    },

    handleReceive() {
      uni.navigateTo({
        url: `/pages/pda/beEntrust/goods/goods?id=${this.id}&type=add`,
      });
    },

    handleSendDetail() {
      uni.navigateTo({
        url: `/pages/pda/beEntrust/goods/goods?id=${this.id}&type=send`,
      });
    },

    handleReceiveDetail() {
      uni.navigateTo({
        url: `/pages/pda/beEntrust/goods/goods?id=${this.id}&type=detail`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.detail-content {
  flex: 1;
  padding: 20rpx;
}

.section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 2rpx solid #f0f0f0;
  }
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
  font-size: 28rpx;

  .label {
    color: #999;
    min-width: 200rpx;
  }

  .value {
    flex: 1;
    color: #333;
    word-break: break-all;

    &.highlight {
      color: #1890ff;
      font-weight: bold;
    }

    &.danger {
      color: #ff4d4f;
    }
  }
}

.status-tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  font-size: 24rpx;

  &.status-default {
    background-color: #f0f0f0;
    color: #666;
  }

  &.status-warning {
    background-color: #fff7e6;
    color: #faad14;
  }

  &.status-success {
    background-color: #f6ffed;
    color: #52c41a;
  }

  &.status-danger {
    background-color: #fff1f0;
    color: #ff4d4f;
  }
}

.footer-btns {
  display: flex;
  gap: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.08);

  button {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    border-radius: 12rpx;
  }

  .btn-back {
    background-color: #fff;
    color: #666;
    border: 1rpx solid #e0e0e0;
  }

  .btn-receive {
    background-color: #722ed1;
    color: #fff;
  }

  .btn-detail {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>