react+andt+Steps 步骤条改造【计划开始时间/计划截止时间/实际开始时间/实际结束时间】
【收集一下大佬的代码,膜拜大神】
需求:
实现代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | import React from 'react' ; import { Steps, Icon } from 'antd' ; import moment from 'moment' ; import cn from 'classnames' ; import styles from './index.less' ; const { Step } = Steps; const sortFunc = (a, b) => (moment(a, 'YYYY-MM-DD HH:mm' ).isBefore(moment(b, 'YYYY-MM-DD HH:mm' )) ? -1 : 1); const getInitialTime = time => (time ? moment(time).format( 'YYYY-MM-DD HH:mm' ) : '' ); const ExecuteSteps = ({ actualEndTime = '' , actualStartTime = '' , planEndTime = '' , planStartTime = '' , cancelTime = '' }) => { const list = [ { dataIndex: 'planStartTime' , name: '计划开始' , time: getInitialTime(planStartTime) || '未填写' }, { dataIndex: 'planEndTime' , name: '计划截止' , time: getInitialTime(planEndTime) }, { dataIndex: 'actualStartTime' , name: '实际开始' , time: getInitialTime(actualStartTime) }, { dataIndex: 'actualEndTime' , name: '实际完成' , time: getInitialTime(actualEndTime) }, { dataIndex: 'cancelTime' , name: '取消' , time: getInitialTime(cancelTime) } ]; const getList = () => { const arr = list.filter(item => item.time); const obj = {}; arr.forEach(item => { const tempKey = `${item.time}`; if (obj[tempKey]) { obj[tempKey].push(item); } else { obj[tempKey] = [item]; } }); const tempArr = Object.keys(obj).sort(sortFunc); const finalList = tempArr.map(item => obj[item]); return finalList; }; const renderTime = time => { if (time === '未填写' ) { return '未填写' ; } return time ? moment(time).format( 'MM-DD HH:mm' ) : '' ; }; const renderStep = arr => arr.map(item => { const nowItem = item[0]; let icon = <i className= "icon iconfont iconwancheng" style={{ fontSize: '18px' , color: '#FFA22D' }}></i>; if (item.length <= 1 && nowItem.dataIndex.indexOf( 'plan' ) !== -1) { icon = <i className= "icon iconfont iconyuan" style={{ fontSize: '18px' , color: '#FFA22D' }}></i>; } if (item.filter(a => a.dataIndex === 'cancelTime' ).length > 0) { icon = <Icon type= "close-circle" theme= "filled" style={{ fontSize: 18, color: '#f5222d' }} />; } return ( <Step key={nowItem.dataIndex} title={item.map(temp => ( <div className={cn( 'ant-steps-item-content' , { [styles.upStep]: temp.dataIndex.indexOf( 'plan' ) !== -1 })} > <div className= "ant-steps-item-title" >{temp.name}</div> <div className= "ant-steps-item-description" >{renderTime(temp.time)}</div> </div> ))} icon={icon} ></Step> ); }); return ( <div className={styles.executeSteps}> <Steps labelPlacement= "vertical" >{renderStep(getList())}</Steps> </div> ); }; export default ExecuteSteps; |
最终效果:
分类:
react从入门到放弃
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具