feat: 事件流转组件，配合部门可多个

zhangyongtian

2024-09-15 159d0a98310210768b2e0c57a68a523c2739e2ee

feat: 事件流转组件，配合部门可多个

 gz-customerSystem/src/components/ProgressStep/VisitStep.jsx

@@ -22,6 +22,8 @@
 */
const ProgressStep = ({ progressData, hasTab }) => {
  const [proType, setProType] = useState('handleCaseFlowList')
  const [assistType, setAssistType] = useState(progressData.assistCaseFlowList && progressData.assistCaseFlowList[0]?.unitId || '')
  const [progressList, setProgressList] = useState([]);
  const iconMap = {
    1: ledger_7,//完成
    2: ledger_12,//回退
@@ -40,6 +42,7 @@

  useEffect(() => {
    setProType('handleCaseFlowList')
    setProgressList(progressData.handleCaseFlowList)
  }, [progressData])

  //详细结果的处理
@@ -66,20 +69,45 @@
  return (
    <Fragment>
      {hasTab &&
        <div className='tabBtn'>
          {btnList.map((item, index) => {
            return <div
              className={`tabBtn-btn ${proType === item.value ? 'tabBtn-active' : ''}`}
              key={item.value}
              onClick={() => { setProType(item.value) }}
              style={{ marginRight: (index + 1) !== btnList.length ? '20px' : '0' }}
            >{item.label}</div>
          })}

        </div>
        <>
          <div className='tabBtn'>
            {btnList.map((item, index) => {
              return <div
                className={`tabBtn-btn ${proType === item.value ? 'tabBtn-active' : ''}`}
                key={item.value}
                onClick={() => {
                  setProType(item.value)
                  if(item.value == 'handleCaseFlowList') {
                    setProgressList(progressData.handleCaseFlowList)
                  } else {
                    const findData = progressData.assistCaseFlowList.find(res => res.unitId == assistType)
                    setProgressList(findData.caseFlowList)
                  }
                }}
                style={{ marginRight: (index + 1) !== btnList.length ? '20px' : '0' }}
              >{item.label}</div>
            })}
          </div>
          {
            proType == 'assistCaseFlowList' && <div className='tabBtn'>
              {progressData.assistCaseFlowList?.map(item => {
                return <div
                  key={item.unitId}
                  className={`tabBtn-unit ${assistType === item.unitId ? 'tabBtn-unitActive' : ''}`}
                  onClick={() => {
                    setAssistType(item.unitId)
                    setProgressList(item.caseFlowList)
                  }}
                >
                  {item.unitName}
                </div>
              })}
            </div>
          }
        </>
      }
      {progressData[proType] && progressData[proType].length !== 0
        ? progressData[proType].map((x, t) => {
      {progressList && progressList.length !== 0
        ? progressList.map((x, t) => {
          return (
            <div key={t + 1}>
              <div className="myStep-item">
@@ -88,7 +116,7 @@
                    <div className="myStep-item-title">{x.nodeShowName || '事件流转'}</div>
                    <img className='myStep-item-img' src={x.status === 1 ? ledger_8 : iconMap[x.taskType]} alt="" />
                  </div>
                  {t === progressData[proType].length - 1 ? null : <div className='myStep-item-divider' />}
                  {t === progressList.length - 1 ? null : <div className='myStep-item-divider' />}
                </div>
                <div className="myStep-item-right">
                  {x.status === 1 ?

 gz-customerSystem/src/components/ProgressStep/index.less

@@ -212,7 +212,7 @@
        border: 1px solid #e5e6eb;
        border-radius: 4px;
        color: #e5e6eb;
        padding: 4px 8px;
        padding: 3px 8px 4px 8px;
        cursor: pointer;
    }

@@ -220,4 +220,17 @@
        color: #1a6fb8;
        border-color: #1a6fb8;
    }

    &-unit {
        height: 32px;
        border-radius: 21px;
        color: #1D2129;
        padding: 3px 12px 4px 12px;
        cursor: pointer;
    }

    &-unitActive {
        background: #f3f2f7;
        color: #1a6fb8;
    }
}