antdesign vue 步驟條a-step按稽核人員節點排序顯示邏輯

Roséa發表於2024-10-29
Vue排序

一、需求內容

　　目前稽核人員角色有：學術、法務、售後，序列執行稽核流程。

　　稽核流程：發起/修改稽核-》稽核節點

　　稽核節點規則：學術-》法務-》售後，每個節點均可以稽核或修改。

　　稽核狀態：發起、修改、待稽核、已稽核。

　　因此前端根據節點規則來展示稽核步驟給使用者。

二、開發思路

　　1.根據節點規則，自定義一個欄位儲存稽核節點型別：nodeType:1-8

　　2.區分稽核節點是一組還是多組，

　　例如：一組稽核時['發起稽核','學術待稽核','法務待稽核','售後待稽核'] ；

　　而多組稽核則是8個狀態都會出現，例如：['發起稽核','學術已稽核','法務已稽核','售後已稽核','修改稽核','學術已稽核','法務待稽核','售後待稽核',...]等此迴圈出現；

　　3.多組稽核資料需要按照'稽核節點規則'重新排序，用sort()重新生產結果陣列。

　　4. 根據生成結果陣列result，設定當前步驟值current。

三、專案運用程式碼（部分）

function auditCheckClick(result){      
          if(result && result.length){
            let len = result.length
            result.map((item,index)=>{
              if(item.auditType==1){ item.nodeType=6}
              else if(item.auditType==2){ item.nodeType=7}
              else if(item.auditType==3){ item.nodeType=8}
              else if(item.auditType==4){ item.nodeType=2}
              else if(item.auditType==5){ item.nodeType=3}
              else if(item.auditType==6){ item.nodeType=4}
              else if(item.auditType==7||item.auditType==8){ item.nodeType=1}
              if(item.auditType==8){item.nodeIndex=index}
              return item
            })
            console.log(1,result)
            if(len<=4){ // 一組稽核
              result.sort((r1,r2)=>{
                return r1.nodeType - r2.nodeType
              })
            }else{ // 多組稽核
              let lastArr = result.filter(el=>el.nodeIndex)
              let lastIndex= lastArr&&lastArr.length?lastArr[lastArr.length-1].nodeIndex:0
              let hisSort = result.slice(0,lastIndex)
              let sortArr = result.slice(lastIndex)
              sortArr.sort((r1,r2)=>{return r1.nodeType - r2.nodeType})
              result = hisSort.concat(sortArr)
              console.log(2, lastArr,lastIndex)
              console.log(3, hisSort,sortArr)
              console.log(4, result)
            }
          }
　// result 結果陣列
　　let step = result.findIndex(item=>item.auditType==1||item.auditType==2||item.auditType==3) // 學術、法務、售後的待稽核狀態
　　let current = step&&step!=-1?step:result.length-1
 // current 為步驟條索引值

相關文章