react使用ant design中的steps（步骤条），并自定义布局

窝窝头一块钱4.1个

于 2024-09-05 11:56:53 发布

阅读量255

点赞数 4

分类专栏： react 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/W__J__J/article/details/141927321

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

想做一个审核流程步骤条，含有头像、审核事件、审批人等信息，按照特定布局排列。

效果如下：

react使用步骤条自定义布局示例代码如下：

    renderFlowData() {
        const stepList=[
            {header:['https://tse4-mm.cn.bing.net/th/id/OIP-C.vKJorGHusPWOMS0kXNLhYgAAAA?rs=1&pid=ImgDetMain','https://tse4-mm.cn.bing.net/th/id/OIP-C.vKJorGHusPWOMS0kXNLhYgAAAA?rs=1&pid=ImgDetMain'],userName:['wjj'],states:[{userName:'wjj',state:"已同意"}],stepName:'发起申请',onTime:'2024-09-01 08:23',clyj:'审核通过！'},
            {header:['https://tse4-mm.cn.bing.net/th/id/OIP-C.vKJorGHusPWOMS0kXNLhYgAAAA?rs=1&pid=ImgDetMain'],userName:['wjj1','wjj2'],states:[{userName:'wjj1',state:"已同意"}],stepName:'一级审批',onTime:'2024-09-01 08:26',clyj:'同意申请'},
            {header:['https://tse4-mm.cn.bing.net/th/id/OIP-C.vKJorGHusPWOMS0kXNLhYgAAAA?rs=1&pid=ImgDetMain'],userName:['wjj1','wjj2'],states:[{userName:'wjj2',state:"已同意"}],stepName:'二级审批',onTime:'2024-09-01 08:28',clyj:'同意申请1'},
        ]

        return (<div>
            <XTabs items={['流程','数据日志']} type={"line"} onTabChange={(v)=>{this.setState({activityKey:v})}}/>
            <XCard boxStyle={{marginTop:"30px"}} visible={this.state.activityKey==='流程'}>
                <div style={{marginLeft:"20px"}} className={"splc-step-style"}>
                    <Steps
                        direction={"vertical"}
                        current={1}
                        items={stepList.map(item=>({
                            title:<XFlex flexDirection={"row"} marginTRBL={"35px 0 0 0"} horizontalAlign={"spaceBetween"}>
                                <span className={"splc-step-title-content"}>{item.stepName}</span>
                                <span className={"splc-step-title-time"}>{item.onTime}</span>
                            </XFlex>,
                            subTitle:<div style={{marginTop:"-35px"}} className={"splc-step-subTitle"}>
                                <div>
                                    {item.userName?.filter(name => !item.states?.map(item => item.userName)?.includes(name))
                                        ?.map(userName=>{
                                        return <span style={{marginRight:"5px"}}>{userName}</span>
                                    })}
                                    {item.states?.map(state=>{
                                        return <span style={{marginRight:"5px"}}>
                                            {state.userName}
                                            <span style={state.state==='已同意'?{color:"rgb(89, 206, 185)"}:{color:"rgb(184, 67, 50)"}}>({state.state})</span>
                                        </span>
                                    })}
                                </div>
                                <div>
                                    处理意见:{item.clyj}
                                </div>
                            </div>,
                            icon:<Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
                                {item.header?.map(head=>{
                                    return <Avatar src={head}/>
                                })}
                            </Avatar.Group>
                        }))}
                    />
                </div>
            </XCard>
            <XCard boxStyle={{marginTop:"20px"}} visible={this.state.activityKey==='数据日志'}>
                other
            </XCard>
        </div>)
    }