<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
import { Steps } from 'ant-design-vue';
|
|
import { MesPdProjectStatusEnum } from '#/packages/constants/src';
|
|
const STEPS = ['待发布', '待上传', '待审核', '审批中', '待归档', '已归档'] as const;
|
|
// 状态值 → 时间线步骤索引（审批中=5 插在待审核之后）
|
const STATUS_ORDER = [
|
MesPdProjectStatusEnum.PENDING_PUBLISH,
|
MesPdProjectStatusEnum.PENDING_UPLOAD,
|
MesPdProjectStatusEnum.PENDING_AUDIT,
|
MesPdProjectStatusEnum.APPROVING,
|
MesPdProjectStatusEnum.PENDING_ARCHIVE,
|
MesPdProjectStatusEnum.ARCHIVED,
|
];
|
|
const props = defineProps<{
|
/** 项目当前状态 */
|
status: number;
|
}>();
|
|
const current = computed(() => {
|
// 根据状态值映射到时间线步骤索引
|
const index = STATUS_ORDER.indexOf(props.status);
|
return index >= 0 ? index : 0;
|
});
|
|
const nodes = computed(() =>
|
STEPS.map((name, index) => ({
|
title: name,
|
status: index < current.value ? 'finish' : index === current.value ? 'process' : 'wait',
|
})),
|
);
|
</script>
|
|
<template>
|
<Steps :current="current" direction="vertical" size="small">
|
<Steps.Step
|
v-for="(node, index) in nodes"
|
:key="index"
|
:status="node.status as any"
|
:title="node.title"
|
/>
|
</Steps>
|
</template>
|
