jonhon-mes-web/src/views/exemption/components/detailsDialog.vue

<template>
  <el-dialog title="详情" append-to-body :modelValue="openShow" width="60%" @close="closeDialog">
    <!-- <avue-form :option="option"></avue-form> -->

    <el-descriptions
      class="margin-top"
      title="免责信息"
      :column="2"
      :size="size"
      border
      label-width="120px"
    >
      <el-descriptions-item label="提出人">
        <span v-if="userListData && userListData.length > 0">{{ reportUserName }}</span>
        <span v-else>{{ detailData.reportUserId || '-' }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="岗位">{{ detailData.postName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="免责问题描述">{{ detailData.notes || '-' }}</el-descriptions-item>
      <el-descriptions-item label="原因">{{ detailData.reason || '-' }}</el-descriptions-item>
      <el-descriptions-item label="措施">{{ detailData.measure || '-' }}</el-descriptions-item>
      <el-descriptions-item label="免责理由">{{ detailData.raiseHandReason || '-' }}</el-descriptions-item>
      <el-descriptions-item label="免责金额">{{ detailData.amount || '-' }}</el-descriptions-item>
    </el-descriptions>
   
   <el-steps :active="active" finish-status="success" class="center-steps" align-center>
      <el-step title="提交">
        <template #description>
          <div class="step-info">
            <div>{{ getApprovalData(0, 'pointName') }}</div>
            <div>{{ getApprovalData(0, 'createTime') }}</div>
          </div>
        </template>
      </el-step>
      <el-step title="工艺员">
        <template #description>
          <div class="step-info">
            <div>{{ getApprovalData(1, 'pointName') }}</div>
            <div>{{ getApprovalData(1, 'createTime') }}</div>
            <div class="reject-reason">{{ getApprovalData(1, 'rejectReason') || '' }}</div>
          </div>
        </template>
      </el-step>
      <el-step title="质量工程师">
        <template #description>
          <div class="step-info">
            <div>{{ getApprovalData(2, 'pointName') }}</div>
            <div>{{ getApprovalData(2, 'createTime') }}</div>
            <div class="reject-reason">{{ getApprovalData(2, 'rejectReason') || '' }}</div>
          </div>
        </template>
      </el-step>
      <el-step title="业务主管">
        <template #description>
          <div class="step-info">
            <div>{{ getApprovalData(3, 'pointName') }}</div>
            <div>{{ getApprovalData(3, 'createTime') }}</div>
            <div class="reject-reason">{{ getApprovalData(3, 'rejectReason') || '' }}</div>
          </div>
        </template>
      </el-step>
    </el-steps>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template> -->
  </el-dialog>
</template>
<script>
// import {
//   updateProcess,
// } from '../../api/flowManagement/index';
import { detailItem} from '@/api/exemption/exemption';
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    rowItem: {
      type: Object,
      default: () => {},
    },
    userListData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      openShow: false,
      active: 0,
      detailData: {},
    };
  },
  computed: {
    userMapObj() {
      const map = {};
      this.userListData.forEach(user => {
        map[user.value] = user.label;
      });
      return map;
    },
    reportUserName() {
      const userId = this.detailData.reportUserId;
      if (!userId || Object.keys(this.userMapObj).length === 0) {
        return userId || '-';
      }
      return this.userMapObj[userId] || userId;
    },
  },
  mounted() {

    this.openShow = this.showDialog;
    this.loadDetail();
  },
  watch: {
    rowItem: {
      handler(newVal) {
        if (newVal && newVal.id) {
          this.loadDetail();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 安全获取审批数据
    getApprovalData(index, field) {
      const all = this.detailData.all || [];
      const item = all[index];
      return item ? (item[field] || '-') : '-';
    },
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    // 加载详情数据
    loadDetail() {


      if (this.rowItem.id) {

        detailItem(this.rowItem.id).then(res => {
          
          if (res.data.code == 200) {
            this.detailData = res.data.data;
           
            this.updateActiveStatus();
          }
        }).catch(error => {
          console.error('获取详情失败', error);
          this.$message.error('获取详情失败');
        });
      }
    },
    // 根据状态更新步骤条进度
    updateActiveStatus() {
      const status = Number(this.detailData.status-1);
      switch (status) {
        case 0:
          this.active = 1; // 待工艺员审批 - 第1步激活
          break;
        case 1:
          this.active = 2; // 待质量工程师审批 - 第2步激活
          break;
        case 2:
          this.active = 3; // 待业务主管审批 - 第3步激活
          break;
        case 3:
        case 4:
          this.active = 3; // 驳回/退回 - 显示到当前步骤
          break;
        case 5:
          this.active = 3; // 业务主管审批通过 - 第3步完成
          break;
        default:
          this.active = 0; // 初始状态 - 第0步
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep(.el-step__title) {
  font-size: 14px;
  font-weight: 500;
}

.center-steps {
  margin-top: 30px;
  margin-bottom: 20px;
}

.step-info {
  font-size: 12px;
  line-height: 1.8;

  > div {
    &:nth-child(1) {
      font-weight: 500;
      margin-bottom: 4px;
    }
  }
}

.reject-reason {
  color: #f56c6c;
  margin-top: 4px;
  font-size: 12px;
}
</style>