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

zhangyongtian

2024-09-15 159d0a98310210768b2e0c57a68a523c2739e2ee

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

@@ -2,122 +2,160 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 14:57:06
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-29 15:58:19
 * @LastEditTime: 2024-09-12 11:38:05
 * @FilePath: \gzDyh\gz-customerSystem\src\components\ProgressStep\VisitStep.jsx
 * @Description: 来访登记步骤条
 */

import React, { useEffect, useState } from 'react';
import { Tooltip, Space } from 'antd';
import Icon, { PaperClipOutlined, RollbackOutlined, EllipsisOutlined } from '@ant-design/icons';
import React, { Fragment, useEffect, useState } from 'react';
import { Tooltip } from 'antd';
import { ledger_8, ledger_7, ledger_12, ledger_13 } from '../../assets/images';
import NameCard from '../NameCard';
import * as $$ from '../../utils/utility';
import FilesDrawer from '../FilesDrawer';
import './index.less';

/**
 * progressData:'', // 流程数据
 * progressData: {
 * assistCaseFlowList: [],//配合部门流程数组
 * handleCaseFlowList: [],//承办部门流程数组
 * }, // 流程数据
 * hasTab: false,//是否有部门切换
 */
const ProgressStep = ({ progressData }) => {
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_8,
    2: ledger_7,
    3: ledger_12,
    4: ledger_13
    1: ledger_7,//完成
    2: ledger_12,//回退
    3: ledger_13//上报
  }
  const btnList = [
    {
      value: 'handleCaseFlowList',
      label: '承办部门'
    },
    {
      value: 'assistCaseFlowList',
      label: '配合部门'
    },
  ]

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

  //详细结果的处理
  const typeDom = (data) => {
    //审核结果同意
    if (data.auditResult && data.auditResult == '24_00004-1') {
      return <span>审核结果：<span style={{ color: '#00B42A' }}>{data.auditResultName}</span></span>
    }
    //审核结果不同意
    if (data.auditResult && data.auditResult == '24_00004-2') {
      return <span>审核结果：<span style={{ color: '#FF4D4F' }}>{data.auditResultName}</span></span>
    }
    //化解结果成功
    if (data.mediResult && data.mediResult == '22_00025-1') {
      return <span>审核结果：<span style={{ color: '#00B42A' }}>{data.mediResultName}</span></span>
    }
    //化解结果不成功
    if (data.mediResult && data.mediResult == '22_00025-2') {
      return <span>审核结果：<span style={{ color: '#FF4D4F' }}>{data.mediResultName}</span></span>
    }
    return <span>{data.handleNotes || '-'}</span>
  }

  // 已处理列表第一个元素
  const dom1 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName || '-'}</span>
      </div>
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>操作人：</span>
        <span>{x.operationName}</span>
      </div>
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>经办时间：</span>
        <span>{$$.timeFormat(x.finishTime)}</span>
      </div>
    </div>
  );
  // 已处理列表后面 元素
  const dom2 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName || '-'}</span>
      </div>
      {x.operationName &&
        <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
          <span>操作人：</span>
          <span>{x.operationName}</span>
        </div>
      }
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>操作时间：</span>
        <span>{$$.timeFormat(x.finishTime)}</span>
      </div>
      {
        x.handleContent &&
        <div className='myStep-item-p-yy' style={{ width: '200px' }}>
          <span className='myStep-item-p-yy-l'>
            {x.handleResult == '2' ?
              <span>退回<Tooltip placement="top" title={x.handleContent || ''}><span>{`（${x.handleContent}）` || '-'}</span></Tooltip></span>
              : x.taskNode == 'F22_00019-3' && x.handleResult == '1' ?
                // 22_00025-1：调解成功，22_00025-2：调解不成功
                <span>调解结果：<Tooltip placement="top" title={x.mediResult == '22_00025-1' ? '调解成功' : x.mediResult == '22_00025-2' ? '调解不成功' : '-'}><span>{`${x.mediResult == '22_00025-1' ? '调解成功' : x.mediResult == '22_00025-2' ? '调解不成功' : '-'}` || '-'}</span></Tooltip></span>
                : <Tooltip placement="top" title={x.handleContent || ''}><span>{x.handleContent || '-'}</span></Tooltip>}
          </span>
  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)
                  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>
          {
            x.fileInfoList?.length > 0 &&
            <div style={{ marginTop: '4px' }}>
              <FilesDrawer name={<>
                <PaperClipOutlined style={{ marginRight: '4px' }} />
                <span>{x.taskNode == 'F22_00019-3' && x.handleResult == '1' ? '调解协议书' : '处理附件'}</span>
              </>} filesData={x.fileInfoList} title="经办附件" />
            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>
          }
        </div>
        </>
      }
    </div>
  );

  // 办理中
  const dom3 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span style={{ color: 'rgba(0,0,0,0.50)' }}>待受理</span>
      </div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName}</span>
      </div>
    </div>
  );

  return (
    <>
      {progressData.length !== 0
        ? progressData.map((x, t) => {
      {progressList && progressList.length !== 0
        ? progressList.map((x, t) => {
          return (
            <div key={t + 1}>
              <div className="myStep-item">
                {t === progressData.length - 1 ? null : <div className={`${!x.handleContent ? 'myStep-item-divider' : x.fileInfoList?.length > 0 ? 'myStep-item-divider2' : "myStep-item-divider1"} ${x.status === '2' && 'myStep-item-divider-success'}`} />}
                <div className={`myStep-item-icon1 myStep-item-${x.status === '1' ? 'noStarted1' : 'success1'}`}>
                  <div className="myStep-item-title">{x.taskNodeName}</div>
                  <img className='myStep-item-img' src={iconMap[x.status]} alt="" />
                <div>
                  <div className={`myStep-item-icon1 myStep-item-${x.status === 1 ? 'noStarted1' : 'success1'}`}>
                    <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 === progressList.length - 1 ? null : <div className='myStep-item-divider' />}
                </div>
                <div className="myStep-item-right">
                  {
                    t === 0 && dom1(x || {})
                  }
                  {
                    t !== 0 && <>
                      {
                        x.status === '1' ?  dom3(x || {}) : dom2(x || {})
                  {x.status === 1 ?
                    <div>
                      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
                        {x.processName || '-'}
                      </div>
                      <div className="myStep-item-p">
                        <span>{x.handleUnitName || '-'}</span>
                      </div>
                    </div>
                    :
                    <div>
                      <div className="myStep-item-p">
                        <span>{x.handleUnitName || '-'}</span>
                      </div>
                      {x.handleUserName &&
                        <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
                          <span>操作人：</span>
                          <span>{x.handleUserName}</span>
                        </div>
                      }
                    </>
                      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
                        <span>操作时间：</span>
                        <span>{$$.minuteFormat(x.handleTime)}</span>
                      </div>
                      {
                        x.handleNotes &&
                        <div className='myStep-item-p-yy' style={{ width: '200px' }}>
                          <span className='myStep-item-p-yy-l'>
                            <span>
                              <Tooltip placement="top" title={x.handleNotes || ''}>
                                {typeDom(x)}
                              </Tooltip>
                            </span>
                          </span>
                        </div>
                      }
                    </div>
                  }
                </div>
              </div>
@@ -125,7 +163,7 @@
          );
        })
        : <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
    </>
    </Fragment>
  );
};