吉安感知网项目-前端
张含笑
2026-01-20 6d515bc5ea69bac73a656dfacee920aab85b1660
feat:更新
1 files modified
151 ■■■■ changed files
applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue 151 ●●●● patch | view | raw | blame | history
applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue
@@ -2,7 +2,7 @@
  <div class="audit-record-container">
    <div class="label">审批记录</div>
    <el-steps :active="activeStep" direction="vertical" align-center>
      <el-step v-for="(step, index) in steps" :key="index" :title="step.title">
      <el-step v-for="(step, index) in displayedSteps" :key="step.status" :title="step.title">
        <template #description>
          <div class="step-person">{{ step.person }}</div>
          <div class="step-time">{{ step.time }}</div>
@@ -13,7 +13,7 @@
</template>
<script setup>
import { ref, watch } from 'vue'
import { ref, watch, computed } from 'vue'
import { gdSupplyDemandAuditListApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
const props = defineProps({
@@ -24,14 +24,64 @@
})
const detailDemandStatus = inject('detailDemandStatus')
const reasonForRejection = inject('reasonForRejection')
// 步骤条数据
const steps = ref([
  { title: '需求申请', person: '', time: '' },
  { title: '审核通过', person: '', time: '' }
// 所有可能的步骤配置
const allStepConfigs = ref([
  { title: '需求申请', status: '0', person: '', time: '' },
  { title: '审核通过', status: '1', person: '', time: '' },
  { title: '拒绝申请', status: '2', person: '', time: '' }
])
// 步骤条数据
const stepResponse = ref([])
// 当前激活步骤
const activeStep = ref(0)
// 计算要显示的步骤
const displayedSteps = computed(() => {
  // 创建一个映射,将状态映射到审核记录
  const statusToRecord = {};
  stepResponse.value.forEach(record => {
    statusToRecord[record.auditStatus] = record;
  });
  // 根据审核记录筛选并构建要显示的步骤
  return allStepConfigs.value.filter(stepConfig => {
    // 如果是需求申请步骤,始终显示
    if (stepConfig.status === '0') {
      return true;
    }
    // 其他步骤只有在有对应状态的审核记录时才显示
    return statusToRecord.hasOwnProperty(stepConfig.status);
  }).map(stepConfig => {
    // 获取对应状态的审核记录
    const record = statusToRecord[stepConfig.status];
    if (record) {
      // 如果有审核记录,使用记录中的信息
      return {
        ...stepConfig,
        person: record.createUser ? `${record.createUser}` : '',
        time: record.createTime ? record.createTime : ''
      };
    }
    // 如果没有审核记录,使用默认信息
    return stepConfig;
  });
})
// 计算当前激活步骤
const calculateCurrentStep = () => {
  if (stepResponse.value.length === 0) {
    return 0;
  }
  // 获取最新的审核记录
  const latestRecord = stepResponse.value[stepResponse.value.length - 1];
  // 查找最新状态在显示步骤中的索引
  const stepIndex = displayedSteps.value.findIndex(step => step.status === latestRecord.auditStatus);
  return stepIndex !== -1 ? stepIndex : 0;
}
// 监听 demandId 变化
watch(() => props.demandId, (newVal) => {
@@ -45,87 +95,22 @@
  try {
    const res = await gdSupplyDemandAuditListApi({ demandId })
    const auditRecords = res?.data?.data ?? []
    // 查找拒绝原因(auditStatus为2的记录的auditOpinion)
    const rejectedRecord = auditRecords.find(record => record.auditStatus === '2')
    reasonForRejection.value = rejectedRecord?.auditOpinion || ''
    console.log('reasonForRejection', reasonForRejection.value)
    
    // 处理审核记录为步骤格式
    processAuditRecords(auditRecords)
    // 按创建时间排序(最新的在最后)
    stepResponse.value = [...auditRecords].sort((a, b) => new Date(a.createTime) - new Date(b.createTime))
    // 查找拒绝原因(auditStatus为2的记录的auditOpinion)
    const rejectedRecord = stepResponse.value.find(record => record.auditStatus === '2')
    reasonForRejection.value = rejectedRecord?.auditOpinion || ''
    // 计算当前激活步骤
    activeStep.value = calculateCurrentStep()
  } catch (error) {
    console.error('加载审核记录失败:', error)
    // 保持默认步骤
    // 重置步骤数据
    stepResponse.value = []
    activeStep.value = 0
    reasonForRejection.value = ''
  }
}
// 处理审核记录为步骤格式
function processAuditRecords(records) {
  // 重置为默认步骤结构
  steps.value = [
    { title: '需求申请', person: '', time: '' },
    { title: '审核通过', person: '', time: '' }
  ]
  if (!records || records.length === 0) {
    // 没有审核记录,保持默认步骤
    activeStep.value = 0
    return
  }
  // 按创建时间排序(最新的在最后)
  const sortedRecords = [...records].sort((a, b) => new Date(a.createTime) - new Date(b.createTime))
  // 处理需求申请步骤(第一个步骤)
  const demandRecord = sortedRecords.find(record => record.auditStatus === '0') || sortedRecords[0]
  if (demandRecord) {
    steps.value[0] = {
      title: '需求申请',
      person: demandRecord.createUser ? `${demandRecord.createUser}` : '',
      time: demandRecord.createTime ? demandRecord.createTime : ''
    }
  }
  // 处理审核步骤(第二个步骤)
  const latestRecord = sortedRecords[sortedRecords.length - 1]
  if (latestRecord) {
    // 根据最新审核结果设置标题
    let auditTitle = '审核通过'
    if (latestRecord.auditStatus === '2') {
      auditTitle = '拒绝申请'
      // 更新第二个步骤的标题为拒绝申请
      steps.value[1].title = auditTitle
    }
    // 添加审核意见(如果有)
    if (latestRecord.auditOpinion) {
      steps.value[1].title
    }
    // 更新审核步骤的信息
    steps.value[1].person = latestRecord.createUser ? `${latestRecord.createUser}` : ''
    steps.value[1].time = latestRecord.createTime ? latestRecord.createTime : ''
    // 根据最新审核结果设置activeStep
    switch (latestRecord.auditStatus) {
      case '0':
        // 审核中,高亮第一个步骤
        activeStep.value = 0
        break
      case '1':
        // 审核通过,高亮第二个步骤
        activeStep.value = 1
        break
      case '2':
        // 拒绝申请,高亮第二个步骤
        activeStep.value = 1
        break
      default:
        // 默认高亮第一个步骤
        activeStep.value = 0
    }
  }
}
@@ -149,7 +134,7 @@
}
:deep(.el-step) {
  margin-bottom: 90px;
  margin-bottom: 20px;
}
:deep(.el-step__title) {