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

Mr. 柳上原

发布于 2019-03-04 07:00:37

89600

代码可运行

文章被收录于专栏：菜鸟前端工程师菜鸟前端工程师

运行总次数：0

代码可运行

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>  
                       }
                  />
              )
          })
  }