<!-- 差旅报销：审批流程进度展示 -->
|
<template>
|
<el-steps :active="activeStep" finish-status="success" align-center>
|
<el-step
|
v-for="(node, index) in sortedNodes"
|
:key="index"
|
:title="`节点 ${index + 1}`"
|
:description="stepDescription(node)"
|
:status="stepStatus(node, index)"
|
/>
|
</el-steps>
|
</template>
|
|
<script setup>
|
import { computed } from "vue";
|
|
const props = defineProps({
|
nodes: { type: Array, default: () => [] },
|
currentIndex: { type: Number, default: 0 },
|
});
|
|
const sortedNodes = computed(() => {
|
const list = props.nodes || [];
|
return [...list].sort((a, b) => (a.sortOrder ?? a.nodeOrder ?? 0) - (b.sortOrder ?? b.nodeOrder ?? 0));
|
});
|
|
const activeStep = computed(() => {
|
const list = sortedNodes.value;
|
if (!list.length) return 0;
|
const finished = list.filter((n) => n.nodeStatus === "finish").length;
|
const hasError = list.some((n) => n.nodeStatus === "error");
|
if (hasError) return Math.max(0, props.currentIndex);
|
return finished;
|
});
|
|
function stepDescription(node) {
|
const name = (node.approverName || "").trim() || "未指定";
|
const opinion = (node.approveOpinion || "").trim();
|
if (opinion) return `${name}：${opinion}`;
|
return name;
|
}
|
|
function stepStatus(node, index) {
|
if (node.nodeStatus === "error") return "error";
|
if (node.nodeStatus === "finish") return "success";
|
if (node.nodeStatus === "process" || index === props.currentIndex) return "process";
|
return "wait";
|
}
|
</script>
|
