基于react封装的一个步骤条组件

子组件

tsx文件

import React from 'react';
import './staticOA.less'

export enum LineMode {
    Left,
    Right,
    NoLine,
    JustLine,
}

export default function StaticOA(props: any) {
    const { data, lineMode, personMessageMode, stepNum, istop, isError, isActive, error1, active1, error2, active2 } = props
    return (
        <>
            <div className={['content', isError ? 'isError' : '', isActive ? 'isActive' : ''].join(' ')}>
                {
                    lineMode !== LineMode.JustLine && lineMode !== LineMode.NoLine && personMessageMode === 'bottom' ?
                        <div className="info">
                            {lineMode === LineMode.Left ? <div className="line"></div> : null}
                            <div className="stepNum">{stepNum}</div>
                            <div className="stepName">{data.name}
                                <div className="message">
                                    <div>{data.auditTime}</div>
                                    <div>{data.auditName}{data.phone ? `(${data.phone})` : null}</div>
                                </div>
                            </div>
                            {lineMode === LineMode.Right ? <div className="line"></div> : null}
                        </div> : <></>
                }
                {
                    lineMode == LineMode.JustLine ?
                        <div className="node">
                            <div className={["lineNode1", error1 ? 'error' : '', active1 ? 'active' : ''].join(' ')}></div>
                            <div className={["lineNode2", error2 ? 'error' : '', active2 ? 'active' : ''].join(' ')}></div>
                        </div> : null
                }
                {
                    lineMode == LineMode.NoLine && personMessageMode === 'bottom' ?
                        <div className={['info', 'set_height', istop ? 'top' : 'bottom'].join(' ')} >
                            <div className="stepNum">{stepNum}</div>
                            <div className="stepName">{data.name}
                                <div className="message">
                                    <div>{data.auditTime}</div>
                                    <div>{`${data.auditName}(${data.phone})`}</div>
                                </div>
                            </div>
                        </div> : <></>
                }

            </div>
        </>
    );

}

less文件

.content {
  display: inline-block;

  .info {
    display: flex;
    //主轴居中
    justify-content: center;
    align-items: baseline;

    .stepNum {
      width: 20px;
      height: 20px;
      margin-left: 10px;
      border-radius: 50%;
      background-color: gray;
      color: #fff;
      text-align: center;
      line-height: 20px;
    }

    .stepName {
      margin-left: 10px;
      margin-right: 10px;
    }

    .line {
      width: 60px;
      height: 3px;
      background-color: gray;
    }
  }

  .set_height {
    height: 120px;
    // align-items: center;
    align-self: baseline;
  }

  .node {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    width: 40px;
    height: 120px;
    position: relative;
    bottom: 20px;

  
    .lineNode1 {
      width: 40px;
      height: 60px;
      border-left: 3px solid gray;
      border-top: 3px solid gray;
    }

    .lineNode2 {
      width: 40px;
      height: 60px;
      border-left: 3px solid gray;
      border-bottom: 3px solid gray;
    }

    .error {
      border-color: #d9001b;
    }

    .active {
      border-color: #4aa8ff;
    }
  }
}

.isError {
  color: #d9001b;

  .info {
    .stepNum {
      background-color: #d9001b;
    }

    .line {
      width: 60px;
      height: 3px;
      background-color: #d9001b;
    }
  }
}

.isActive {
  color: #4aa8ff;

  .info {
    .stepNum {
      background-color: #4aa8ff;
    }

    .line {
      width: 60px;
      height: 3px;
      background-color: #4aa8ff;
    }
  }
}

父组件

tsx文件

import React from 'react';
import StaticOA, { LineMode } from './staticOA'
import './staticNode.less'

export default function StaticOANode() {
    const data = [
        {
            "name": "客户登记",
            "auditName": "张三",
            "phone": "15676543431",
            "auditTime": "2021-03-04 19:18:58",
            "taskStatus": {
                "code": 1,
                "label": "通过",
                "value": 1
            }
        },
        {
            "name": "签署合同",
            "auditName": "伊泽瑞尔2",
            "phone": "191****0003",
            "auditTime": "2021-03-04 19:18:58",
            "taskStatus": {
                "code": 1,
                "label": "通过",
                "value": 1
            }
        },
        {
            "name": "审核1",
            "auditName": "财务",
            "phone": "13144445522",
            "auditTime": "2021-03-04 19:19:12",
            "taskStatus": {
                "code": 1,
                "label": "通过",
                "value": 1
            }
        },
        {
            "name": "审核2",
            "auditName": "李四",
            "phone": "15676543431",
            "auditTime": "2021-03-04 19:19:31",
            "taskStatus": {
                "code": 2,
                "label": "不通过",
                "value": 2
            }
        },
        {
            "name": "回访1",
            "processInstanceId": "1120070",
            "auditName": "",
            "phone": "",
            "auditTime": "",
            "taskStatus": {
                "code": 0,
                "label": "待审核",
                "value": 0
            }
        },
        {
            "name": "回访2",
            "auditName": "",
            "phone": "",
            "auditTime": "",
            "taskStatus": {
                "code": 0,
                "label": "待审核",
                "value": 0
            }
        },
        {
            "name": "通过",
            "auditName": "",
            "phone": "",
            "auditTime": "",
            "taskStatus": {
                "code": 0,
                "label": "待审核",
                "value": 0
            }
        }
    ]

    return (
        <div className="container">
            <StaticOA data={data[0]} lineMode={LineMode.Right} personMessageMode={'bottom'} stepNum={1} isError={data[0].taskStatus.value === 2} isActive={data[0].taskStatus.value === 1} />
            <StaticOA data={data[1]} lineMode={LineMode.Right} personMessageMode={'bottom'} stepNum={2} isError={data[1].taskStatus.value === 2} isActive={data[1].taskStatus.value === 1} />
            <StaticOA lineMode={LineMode.JustLine} error1={data[2].taskStatus.value === 2} error2={data[3].taskStatus.value === 2} active1={data[2].taskStatus.value === 1} active2={data[3].taskStatus.value === 1} />
            <div className="container_nodes">
                <div className="container_node">
                    <StaticOA data={data[2]} lineMode={LineMode.NoLine} personMessageMode={'bottom'} stepNum={3} istop={true} isError={data[2].taskStatus.value === 2} isActive={data[2].taskStatus.value === 1} />
                    <StaticOA data={data[3]} lineMode={LineMode.NoLine} personMessageMode={'bottom'} stepNum={4} istop={false} isError={data[3].taskStatus.value === 2} isActive={data[3].taskStatus.value === 1} />
                </div>
            </div>
            <StaticOA data={data[4]} lineMode={LineMode.Left} personMessageMode={'bottom'} stepNum={5} isError={data[4].taskStatus.value === 2} isActive={data[4].taskStatus.value === 1} />
            <StaticOA data={data[5]} lineMode={LineMode.Left} personMessageMode={'bottom'} stepNum={6} isError={data[5].taskStatus.value === 2} isActive={data[5].taskStatus.value === 1} />
            <StaticOA data={data[6]} lineMode={LineMode.Left} personMessageMode={'bottom'} stepNum={7} />
        </div>
    );

}

less文件

.container {
  background: #fff;
  padding: 24px;
  display: flex;
  align-items: center;

  .container_nodes {
    display: inline-block;

    .container_node {
      display: flex;
      flex-direction: column;
      align-items: baseline;
      justify-content: space-between;
      position: relative;
      top: 20px;
    }
  }
}