吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue
@@ -1,19 +1,25 @@
<template>
  <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">
        <template #description>
          <div class="step-person">{{ step.person }}</div>
          <div class="step-time">{{ step.time }}</div>
        </template>
      </el-step>
    </el-steps>
    <el-timeline class="gd-timeline">
      <el-timeline-item
        v-for="(step, index) in displayedSteps"
        :key="step.status"
        :icon="Check"
        :type="index === displayedSteps.length - 1 ? 'success' : 'info'"
        :timestamp="step.time"
      >
        <div class="item-content">
          <div class="flowName">{{ step.title }}</div>
          <div >{{ step.person }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { Check } from '@element-plus/icons-vue'
import { gdSupplyDemandAuditListApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
const props = defineProps({
@@ -23,14 +29,10 @@
  }
})
const detailDemandStatus = inject('detailDemandStatus')
// 步骤条数据
const steps = ref([
  { title: '需求申请', person: '', time: '' },
  { title: '审核通过', person: '', time: '' }
])
const reasonForRejection = inject('reasonForRejection')
// 当前激活步骤
const activeStep = ref(0)
// 步骤条数据
const displayedSteps = ref([])
// 监听 demandId 变化
watch(() => props.demandId, (newVal) => {
@@ -40,86 +42,55 @@
}, { immediate: true })
// 加载审核记录
async function loadAuditRecords(demandId) {
  try {
    const res = await gdSupplyDemandAuditListApi({ demandId })
function loadAuditRecords(demandId) {
  gdSupplyDemandAuditListApi({ demandId }).then(res => {
    const auditRecords = res?.data?.data ?? []
    
    // 处理审核记录为步骤格式
    processAuditRecords(auditRecords)
  } catch (error) {
    console.error('加载审核记录失败:', error)
    // 保持默认步骤
    activeStep.value = 0
  }
}
// 处理审核记录为步骤格式
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] = {
    // 按创建时间排序(最新的在最后)
    const sortedRecords = [...auditRecords].sort((a, b) => new Date(a.createTime) - new Date(b.createTime))
    // 构建步骤数据
    const steps = []
    // 添加需求申请步骤
    steps.push({
      status: '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
      person: sortedRecords.find(r => r.auditStatus === '0')?.userName || '',
      time: sortedRecords.find(r => r.auditStatus === '0')?.createTime || ''
    })
    // 添加审核通过步骤(如果有)
    const approvedRecord = sortedRecords.find(r => r.auditStatus === '1')
    if (approvedRecord) {
      steps.push({
        status: '1',
        title: '审核通过',
        person: approvedRecord.userName || '',
        time: approvedRecord.createTime || ''
      })
    }
    
    // 添加审核意见(如果有)
    if (latestRecord.auditOpinion) {
      steps.value[1].title += ` - ${latestRecord.auditOpinion}`
    // 添加拒绝申请步骤(如果有)
    const rejectedRecord = sortedRecords.find(r => r.auditStatus === '2')
    if (rejectedRecord) {
      steps.push({
        status: '2',
        title: '拒绝申请',
        person: rejectedRecord.userName || '',
        time: rejectedRecord.createTime || ''
      })
      // 查找拒绝原因
      reasonForRejection.value = rejectedRecord.auditOpinion || ''
    }
    
    // 更新审核步骤的信息
    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
    }
  }
    displayedSteps.value = steps
  }).catch(error => {
    console.error('加载审核记录失败:', error)
    // 重置步骤数据
    displayedSteps.value = []
    reasonForRejection.value = ''
  })
}
defineExpose({
@@ -129,37 +100,32 @@
<style scoped lang="scss">
.audit-record-container {
  .label {
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
width:100%;
   // height: 95%;
}
/* 时间线样式 */
:deep(.gd-timeline) {
 padding-left: 90px;
}
:deep(.el-timeline-item) {
  padding-bottom: 20px;
  .item-content {
    position: relative;
         .flowName {
            width: 80px;
            position: absolute;
            left: -120px;
            top: 0px;
         }
  }
}
/* 步骤条样式 */
:deep(.el-steps) {
  align-items: flex-start;
}
:deep(.el-step) {
  margin-bottom: 90px;
}
:deep(.el-step__title) {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
/* 步骤描述 */
.step-person {
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
}
.step-time {
:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
  color: #909399;
  color: #999;
  margin-top: 2px;
}
</style>