| | |
| | | <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> |
| | |
| | | </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({ |
| | |
| | | }) |
| | | 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) => { |
| | |
| | | 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 |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | :deep(.el-step) { |
| | | margin-bottom: 90px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | :deep(.el-step__title) { |