OrderStepBar.jsx

import React, { useState, useEffect } from "react"
import { Card, Avatar, Input, Button, Modal, Form, Row, Col, Divider, Steps, Popover, DatePicker, Image, Tabs, Table } from "antd";
import { PaperClipOutlined, DoubleLeftOutlined } from "@ant-design/icons"
import { history, connect } from "umi"
import classNames from "classnames"
import moment from 'moment';
import WorkStep from '@/components/Customized/Step/index';
import style from "../index.less"

const { Step } = Steps
const { TextArea } = Input;

const OrderStepBar = (props) => {
    const {
        data
    } = props
    return <Steps size="small" className={style.order_steps_bar}>
        {
            data.map((item, index) => (
                <Step
                    key={index}
                    status={{
                        1: 'wait',
                        2: 'process',
                        3: 'finish'
                    }[parseInt(item.nodeState, 10)]
                    }
                    title={
                        <Popover
                            trigger="hover"
                            placement="right"
                            // visible={true}
                            arrowPointAtCenter
                            content={
                                <div style={{ width: 400 }}>
                                    {/* <WorkStep
                                    data={
                                        item.mtaskFlowItems && item.mtaskFlowItems.length > 0 &&
                                        item.mtaskFlowItems.map(i => ({
                                            title: i.itemName || '',
                                            type: i.operationType || '',
                                            createTime: moment(i.createTime).format('YYYY/MM/DD HH:mm:ss') || ''
                                        }))
                                    }
                                /> */}
                                    <Steps direction="vertical" size="small">
                                        {
                                            item?.mtaskFlowItems && item?.mtaskFlowItems.length > 0 && item?.mtaskFlowItems.map((child , indexes) => (
                                                <Step   
                                                    key={indexes}
                                                    status={{
                                                        1: 'wait',
                                                        2: 'process',
                                                        3: 'finish'
                                                    }[parseInt(item.nodeState, 10)]}
                                                    className={style.step_item}
                                                    title={
                                                        <p style={{display: 'flex' , justifyContent: "space-between" , flex: 1}}>
                                                            <span>{child?.itemName || ''}</span>
                                                            <span>{child?.creationTime ? moment(child?.creationTime).format("YYYY/MM/DD HH:mm:ss") : ''}</span>
                                                        </p>
                                                    }
                                                    description={
                                                        <div style={{marginTop: 10}}>
                                                            {
                                                                child?.operationType === 1 && (
                                                                    <ul>
                                                                        {
                                                                            child?.userListBos && child?.userListBos.length > 0 && child?.userListBos.map((items , indexs) => (
                                                                                <li style={{marginBottom: 5}} key={indexs}>
                                                                                    <div style={{display: 'flex' , alignItems: 'center'}}>
                                                                                        <Avatar icon={<img src="/pageImg/defaultAvator@2x.png"/>} size={40} src={items?.avatarUrl || '/pageImg/defaultAvator@2x.png'} />
                                                                                        <a style={{margin: '0 20px 0'}}>{items?.userName || ''}</a>
                                                                                        <span>{items?.identity || ''}</span>
                                                                                    </div>
                                                                                </li>
                                                                            ))
                                                                        }
                                                                    </ul>
                                                                )
                                                            }
                                                            {
                                                                child?.operationType === 2 && (
                                                                    <span 
                                                                        className={
                                                                            child?.state ? 'btn_success' : 'btn_fail'
                                                                        }
                                                                    >
                                                                        {
                                                                            child?.state ? '成功' : '失败'
                                                                        }
                                                                    </span>
                                                                )
                                                            }
                                                            {
                                                                child?.explain && (
                                                                    <TextArea disabled style={{marginTop: 10}} value={child?.explain || ''} placeholder="请输入" allowClear />
                                                                )
                                                            }
                                                        </div>
                                                    }
                                                />
                                            ))
                                        }
                                    </Steps>
                                </div>
                            }
                            title={
                                <div className={style.alert_info_title}>
                                    <h3 className={style.h3_title}>{item.contentName || ''}</h3>
                                    {
                                        {
                                            1: <span className="btn_black">未开始</span>,
                                            2: <span className="btn_ing">进行中</span>,
                                            3: <span className="btn_success">已完成</span>,
                                        }[item.nodeState]
                                    }
                                </div>
                            }
                        >
                            <span>{item.processNode || ''}</span>
                        </Popover>
                    }
                />
            ))
        }
    </Steps>
}

export default OrderStepBar