react-开发经验分享-Steps横竖业务进度条的具体使用方法

Author：Mr.柳上原

• 付出不亚于任何的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

ant框架里，Steps横竖业务进度条的具体使用方法
在ant里介绍了Steps组件，进度条
不过没有具体的对接后端数据的使用方法
特别是Steps组件里最重要的status状态控制方法
分享一下在项目开发中遇到的问题以及解决方法
具体如下：

// 首先根据ant官方Steps组件使用方法引入到react里

// 使用state来存储后端数据并动态更新
this.state = {
    projectData: {}, // 业务数据
    reportFollow: [], // 流程数据
    newReportFollow: [], // 驻场数据
}

// 固定的静态进度条使用方法
crosswiseStep = [
        {
            title: "待确认",
            icon: <Icon type="contacts" />,
            // description: "This is a description.",
            id: 0,
        },
        {
            title: "待看房",
            icon: <Icon type="shop" />,
            // description: "This is a description.",
            id: 1,
        },
        {
            title: "带认购",
            icon: <Icon type="dashboard" />,
            // description: "This is a description.",
            id: 3,
        },
        {
            title: "已成交",
            icon: <Icon type="audit" />,
            // description: "This is a description.",
            id: 4,
        },
    ]

// 初始数据
    initialData = async () => {
        let reportId = this.props.location.state.id || '';

        let res = await ProjectDetailsApi.getReport(reportId);
        let data = res.extension || {}; // 后端请求到的数据
        console.log(res, '表格初始数据');
        if (res.code == '0') {
             let reportFollow = []; // 驻场流程
             let newLording = ''; // 横向进度条状态码

             reportFollow = data.reportFollow;

             // 固定进度条状态判断
             data.reportFollow.map((item, index) => {
                // 0 - 待确认 / 1 - 待看房 / 3 - 待认购 / 4 - 已成交
               if(item.transactionsStatus == 0 || item.transactionsStatus == 1 || item.transactionsStatus == 3 || item.transactionsStatus == 4) {
                    newLording = item.transactionsStatus;
                }

              this.setState({
                  reportFollow,
                  lording: newLording,
             })
        } else {
            message.error('获取列表数据失败');
        }
    }

// render渲染固定的静态进度条
<Steps direction={"horizontal"} labelPlacement={"vertical"} initial={0}>
      {
         this.crosswiseStep.map((item, index) => {
           return (
                <Step 
                    key={item.id}
                    status={
                        item.id <= lording 
                        ? 'process'
                         : 'wait'
                     }
                    title={item.title}
                    icon={item.icon}
                 />
               )
           })
        }
</Steps>

// render渲染动态进度条
<Steps direction={"vertical"} labelPlacement={"vertical"} initial={0}>
    {
        reportFollow.map((item, index) => {
           return (
                 <Step 
                    key={index}
                    status={
                        reportFollow.length -1 == index
                        ? (reportFollow[reportFollow.length - 1].transactionsStatus == 4 ? 'process' : 'wait')
                         : 'process'
                      }
                      title={item.contents}
                      icon={item.icon}
                      description={
                          <div>
                            <p>{item.createUser}</p>
                            <p>{item.createTime}</p>
                          </div>  
                       }
                  />
              )
          })
  }