From 36f16b199e5a841ae18ccff09681ff749997fcc6 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 21 Jan 2026 15:48:42 +0800
Subject: [PATCH] feat:调整
---
applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue | 142 +++++++++++++++++------------------------------
1 files changed, 52 insertions(+), 90 deletions(-)
diff --git a/applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue b/applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue
index 902375c..fe24617 100644
--- a/applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue
+++ b/applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/auditRecord.vue
@@ -1,19 +1,14 @@
<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 displayedSteps" :key="step.status" :title="step.title">
- <template #description>
- <div class="step-person">{{ step.person }}</div>
- <div class="step-time">{{ step.time }}</div>
- </template>
- </el-step>
+ <el-steps direction="vertical" :active="displayedSteps.length">
+ <el-step v-for="step in displayedSteps" :key="step.status" :title="step.title" :description="`${step.person || ''}\n${step.time || ''}`" />
</el-steps>
</div>
</template>
<script setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch } from 'vue'
import { gdSupplyDemandAuditListApi } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
const props = defineProps({
@@ -25,63 +20,8 @@
const detailDemandStatus = inject('detailDemandStatus')
const reasonForRejection = inject('reasonForRejection')
-// 所有可能的步骤配置
-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;
-}
+const displayedSteps = ref([])
// 监听 demandId 变化
watch(() => props.demandId, (newVal) => {
@@ -91,27 +31,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 ?? []
// 按创建时间排序（最新的在最后）
- 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) {
+ 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')?.createUser || '',
+ 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.createUser || '',
+ time: approvedRecord.createTime || ''
+ })
+ }
+
+ // 添加拒绝申请步骤（如果有）
+ const rejectedRecord = sortedRecords.find(r => r.auditStatus === '2')
+ if (rejectedRecord) {
+ steps.push({
+ status: '2',
+ title: '拒绝申请',
+ person: rejectedRecord.createUser || '',
+ time: rejectedRecord.createTime || ''
+ })
+ // 查找拒绝原因
+ reasonForRejection.value = rejectedRecord.auditOpinion || ''
+ }
+
+ displayedSteps.value = steps
+ }).catch(error => {
console.error('加载审核记录失败:', error)
// 重置步骤数据
- stepResponse.value = []
- activeStep.value = 0
+ displayedSteps.value = []
reasonForRejection.value = ''
- }
+ })
}
defineExpose({
@@ -134,24 +102,18 @@
}
:deep(.el-step) {
- margin-bottom: 20px;
+ // margin-bottom: 20px;
}
:deep(.el-step__title) {
font-size: 14px;
font-weight: 500;
- margin-bottom: 8px;
}
-/* 步骤描述 */
-.step-person {
+:deep(.el-step__description) {
font-size: 13px;
- color: #333;
- margin-bottom: 4px;
-}
-
-.step-time {
- font-size: 12px;
- color: #909399;
+ color: #666;
+ white-space: pre-wrap;
+ line-height: 1.4;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3