| | |
| | | <script lang="ts" setup> |
| | | import type { MesPdWorkflowApi } from '#/api/mes/pd/workflow'; |
| | | |
| | | import { onMounted, ref, watch } from 'vue'; |
| | | import { computed } from 'vue'; |
| | | |
| | | import { Steps } from 'ant-design-vue'; |
| | | |
| | | import { getPdWorkflowList } from '#/api/mes/pd/workflow'; |
| | | const STEPS = ['待发布', '待上传', '待审核', '待归档', '已归档'] as const; |
| | | |
| | | const props = defineProps<{ |
| | | projectId: number; |
| | | /** 项目当前状态 (0-4) */ |
| | | status: number; |
| | | }>(); |
| | | |
| | | const loading = ref(false); |
| | | const nodes = ref<MesPdWorkflowApi.WorkflowNode[]>([]); |
| | | const current = ref(0); |
| | | const current = computed(() => { |
| | | // 状态值即当前已完成到第几步:0=第一步进行中,4=全部完成 |
| | | return props.status; |
| | | }); |
| | | |
| | | async function loadData() { |
| | | loading.value = true; |
| | | try { |
| | | nodes.value = await getPdWorkflowList(props.projectId); |
| | | const activeIndex = nodes.value.findIndex((item) => item.status !== 1); |
| | | current.value = activeIndex === -1 ? nodes.value.length : activeIndex; |
| | | } finally { |
| | | loading.value = false; |
| | | } |
| | | } |
| | | |
| | | watch( |
| | | () => props.projectId, |
| | | () => loadData(), |
| | | { immediate: true }, |
| | | const nodes = computed(() => |
| | | STEPS.map((name, index) => ({ |
| | | title: name, |
| | | status: index < props.status ? 'finish' : index === props.status ? 'process' : 'wait', |
| | | })), |
| | | ); |
| | | |
| | | onMounted(loadData); |
| | | </script> |
| | | |
| | | <template> |
| | | <Steps :current="current" direction="vertical" size="small"> |
| | | <Steps.Step |
| | | v-for="node in nodes" |
| | | :key="node.id" |
| | | :description="node.remark" |
| | | :sub-title="node.operatorName" |
| | | :title="node.nodeName" |
| | | /> |
| | | <Steps.Step |
| | | v-if="!loading && nodes.length === 0" |
| | | description="暂无流程记录,保存项目后将自动生成" |
| | | title="待启动" |
| | | v-for="(node, index) in nodes" |
| | | :key="index" |
| | | :status="node.status as any" |
| | | :title="node.title" |
| | | /> |
| | | </Steps> |
| | | </template> |