import React from 'react';
|
import './index.less';
|
|
/**
|
* 流程进度组件
|
* @param {Object} props
|
* @param {Array} props.nodes - 节点配置数组
|
* @param {Array} props.nodeStatus - 节点状态数组: 0-未开始，1-进行中，2-已完成
|
*/
|
const ProcessFlow = ({ nodes, nodeStatus }) => {
|
// 获取节点图标的类名
|
const getIconClassName = (status) => {
|
switch(status) {
|
case 2: return "node-icon node-icon-completed";
|
case 1: return "node-icon node-icon-in-progress";
|
case 0: return "node-icon node-icon-not-started";
|
default: return "node-icon node-icon-not-started";
|
}
|
};
|
|
// 获取节点文本的类名
|
const getTextClassName = (status) => {
|
switch(status) {
|
case 2: return "node-text node-text-completed";
|
case 1: return "node-text node-text-in-progress";
|
case 0: return "node-text node-text-not-started";
|
default: return "node-text node-text-not-started";
|
}
|
};
|
|
// 获取连接线的类名
|
const getConnectorClassName = (status) => {
|
switch(status) {
|
case 2: return "node-connector connector-completed";
|
case 1: return "node-connector connector-in-progress";
|
case 0: return "node-connector connector-not-started";
|
default: return "node-connector connector-not-started";
|
}
|
};
|
|
return (
|
<div className="process-flow-container">
|
{nodes.map((node, index) => (
|
<React.Fragment key={node.id}>
|
<div className="process-node">
|
<div className={getIconClassName(nodeStatus[index])}>
|
{nodeStatus[index] !== 2 ? index + 1 : ''}
|
</div>
|
<div className={getTextClassName(nodeStatus[index])}>
|
{node.label}
|
</div>
|
</div>
|
|
{/* 最后一个节点不需要连接线 */}
|
{index < nodes.length - 1 && (
|
<div className={getConnectorClassName(nodeStatus[index])}></div>
|
)}
|
</React.Fragment>
|
))}
|
</div>
|
);
|
};
|
|
export default ProcessFlow;
|
