| | |
| | | <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({ |
| | |
| | | } |
| | | }) |
| | | 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) => { |
| | |
| | | }, { 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({ |
| | |
| | | |
| | | <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> |