feat：事件流转

zhangyongtian

2024-08-31 e1961f3d69deb7bb75c365748f4726bcedb10dda

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

@@ -16,37 +16,20 @@
import FilesDrawer from '../FilesDrawer';
import './index.less';

// 获取调度处理进度数据
function getDispProgressDataApi(caseId) {
  return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
}

// 获取调解处理进度数据
function getProgressDataApi(caseId) {
  return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
}
// 获取司法确认处理进度数据
function getJudicProgressDataApi(caseId) {
  return $$.ax.request({ url: 'judicTask/getTaskProcess?caseId=' + caseId, type: 'get', service: 'mediate' });
}

/**
 * caseId:'', // 案件id
 * pageFrom:'', // 判断那个页面展示
 * progressData:'', // 流程数据
 */
const ProgressStep = ({ caseId, pageFrom }) => {
  const [data, setData] = useState([]);

  // 提交调解  案件调度  案件签收  纠纷调解 指派网格员     
const ProgressStep = ({ progressData }) => {
  const iconMap = {
    1: ledger_8,
    2: ledger_7,
  }

  // 已处理列表第一个元素
  const dom1 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName || '-'}</span>
        {/* <span className={`public-nameCard-tag public-nameCard-tag-grey`}>
          {x.canalName || '-'}
        </span> */}
      </div>
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>操作人：</span>
@@ -64,17 +47,19 @@
      <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>
      {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'}}>
        <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>
@@ -101,7 +86,7 @@
  const dom3 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span style={{ color: 'rgba(0,0,0,0.50)' }}>办理中</span>
        <span style={{ color: 'rgba(0,0,0,0.50)' }}>待受理</span>
      </div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName}</span>
@@ -109,92 +94,29 @@
    </div>
  );

  const fakeData = [
    {
      handlerUserName: '天河区棠下街综治中心',
      canalName: '来访登记',
      finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '来访登记',
      mediResult: '22_00025-1',
      handleContent: '调解成功，双方达成一致意见。',
      operationName: '李晓明'
    },
    {
      handlerUserName: '天河区棠下街综治中心',
      canalName: '事件流转',
      finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '案件调度',
      mediResult: '22_00025-1',
      handleContent: '自行受理',
      operationName: '李晓明'

    },
    {
      handlerUserName: '天河区棠下街综治中心',
      canalName: '办理反馈',
      finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间
      handleResult: '2',
      status: '3',
      taskNodeName: '案件签收',
      mediResult: '22_00025-1',
      handleContent: '案件已被签收，准备开始调解。',
      operationName: '李晓明'

    },
  ];

  useEffect(() => {
    if (pageFrom === 'dispatchRecord') {
      setData(fakeData || [])
    }
  }, [pageFrom]);

  function splitByLine(str, len = 10) {
    let strLen = str.length,
      num = 0,
      multiple = Math.floor(strLen / len),
      arrStr = str.split(''),
      space = strLen % len > 0 ? multiple + 1 : multiple
    for (let i = 1; i <= space; i++) {
      arrStr.splice((len * i + num), 0, '\n')
      num++
    }
    return arrStr.join('')
  }


  return (
    <>
      {data.length !== 0
        ? data.map((x, t) => {
      {progressData.length !== 0
        ? progressData.map((x, t) => {
          return (
            <div key={t + 1}>
              <div className="myStep-item">
                {t === data.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'}`} />}
                {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 === '2' ? 'success1' : 'noStarted1'}`}>
                  <div className="myStep-item-title">{splitByLine(x.taskNodeName || '', 2)}</div>
                  <img className='myStep-item-img' src={x.status === '1' ? ledger_8 : (x.handleResult === '2' ? feedback : ledger_7)} alt="" />
                  {/* <Icon className='myStep-item-img' component={x.handleResult === '2' ? RollbackOutlined : CheckOutlined} /> */}
                  <div className="myStep-item-title">{x.taskNodeName}</div>
                  <img className='myStep-item-img' src={iconMap[x.status]} alt="" />
                </div>
                <div className="myStep-item-right">
                  {/* {dom1(x || {})} */}
                  {
                    t === 0 && dom1(x || {})
                  }
                  {
                    t !== 0 && <>
                      {
                        x.status === '2' ? dom2(x || {}) : dom3(x || {})
                        x.status === '1' ?  dom3(x || {}) : dom2(x || {})
                      }
                    </>
                  }
                  {/* <div className="myStep-item-title">{x.taskNodeName}</div> */}
                  {/* {
                    <StepContent x={x || {}} t={t || 0} />} */}
                </div>
              </div>
            </div>