spring
2026-07-03 2540d86f0dbd77f654f558c3bf9d5ddbe7422f16
src/views/mes/pd/project/modules/workflow-timeline.vue
@@ -1,53 +1,35 @@
<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>