<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>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch } from 'vue'
|
import { gdSupplyDemandAuditListApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
|
|
const props = defineProps({
|
demandId: {
|
type: [String, Number],
|
required: true
|
}
|
})
|
const detailDemandStatus = inject('detailDemandStatus')
|
// 步骤条数据
|
const steps = ref([
|
{ title: '需求申请', person: '', time: '' },
|
{ title: '审核通过', person: '', time: '' }
|
])
|
|
// 当前激活步骤
|
const activeStep = ref(0)
|
|
// 监听 demandId 变化
|
watch(() => props.demandId, (newVal) => {
|
if (newVal) {
|
loadAuditRecords(newVal)
|
}
|
}, { immediate: true })
|
|
// 加载审核记录
|
async function loadAuditRecords(demandId) {
|
try {
|
const res = await gdSupplyDemandAuditListApi({ demandId })
|
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] = {
|
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 += ` - ${latestRecord.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
|
}
|
}
|
}
|
|
defineExpose({
|
loadAuditRecords
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.audit-record-container {
|
.label {
|
font-weight: 500;
|
margin-bottom: 8px;
|
color: #333;
|
}
|
}
|
|
/* 步骤条样式 */
|
: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 {
|
font-size: 12px;
|
color: #909399;
|
}
|
</style>
|
