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