<template>
|
<div class="audit-record-container">
|
<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({
|
demandId: {
|
type: [String, Number],
|
required: true
|
}
|
})
|
const detailDemandStatus = inject('detailDemandStatus')
|
const reasonForRejection = inject('reasonForRejection')
|
|
// 步骤条数据
|
const displayedSteps = ref([])
|
|
// 监听 demandId 变化
|
watch(() => props.demandId, (newVal) => {
|
if (newVal) {
|
loadAuditRecords(newVal)
|
}
|
}, { immediate: true })
|
|
// 加载审核记录
|
function loadAuditRecords(demandId) {
|
gdSupplyDemandAuditListApi({ demandId }).then(res => {
|
const auditRecords = res?.data?.data ?? []
|
|
// 按创建时间排序（最新的在最后）
|
const sortedRecords = [...auditRecords].sort((a, b) => new Date(a.createTime) - new Date(b.createTime))
|
|
// 构建步骤数据
|
const steps = []
|
|
// 添加需求申请步骤
|
steps.push({
|
status: '0',
|
title: '需求申请',
|
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 || ''
|
})
|
}
|
|
// 添加拒绝申请步骤（如果有）
|
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 || ''
|
}
|
|
displayedSteps.value = steps
|
}).catch(error => {
|
console.error('加载审核记录失败:', error)
|
// 重置步骤数据
|
displayedSteps.value = []
|
reasonForRejection.value = ''
|
})
|
}
|
|
defineExpose({
|
loadAuditRecords
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.audit-record-container {
|
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-timeline-item__timestamp) {
|
font-size: 12px;
|
color: #999;
|
margin-top: 2px;
|
}
|
</style>
|
