forked from gzzfw/frontEnd/gzDyh
blame | history | patch | commit | commitdiff | ignore whitespace
zhangyongtian
2024-09-15 d44e0bd425b2b99e4198afc96ba37d9888e0512e 
 gz-customerSystem/src/components/ProgressStep/VisitStep.jsx


@@ -2,206 +2,140 @@


 * @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 { feedback, ledger_8, ledger_7 } from '../../assets/images';


import NameCard from '../NameCard';


import React, { Fragment, useEffect, useState } from 'react';


import { Tooltip } from 'antd';


import { ledger_8, ledger_7, ledger_12, ledger_13 } from '../../assets/images';


import * as $$ from '../../utils/utility';


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: {


 * assistCaseFlowList: [],//配合部门流程数组


 * handleCaseFlowList: [],//承办部门流程数组


 * }, // 流程数据


 * hasTab: false,//是否有部门切换


 */


const ProgressStep = ({ caseId, pageFrom }) => {


  const [data, setData] = useState([]);




  // 提交调解  案件调度  案件签收  纠纷调解 指派网格员     




  // 已处理列表第一个元素


  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>


        <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>


      <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>


          {


            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="经办附件" />


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


  );




  const fakeData = [


const ProgressStep = ({ progressData, hasTab }) => {


  const [proType, setProType] = useState('handleCaseFlowList')


  const iconMap = {


    1: ledger_7,//完成


    2: ledger_12,//回退


    3: ledger_13//上报


  }


  const btnList = [


    {


      handlerUserName: '天河区棠下街综治中心',


      canalName: '来访登记',


      finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间


      handleResult: '1',


      status: '2',


      taskNodeName: '来访登记',


      mediResult: '22_00025-1',


      handleContent: '调解成功，双方达成一致意见。',


      operationName: '李晓明'


      value: 'handleCaseFlowList',


      label: '承办部门'


    },


    {


      handlerUserName: '天河区棠下街综治中心',


      canalName: '事件流转',


      finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间


      handleResult: '1',


      status: '2',


      taskNodeName: '案件调度',


      mediResult: '22_00025-1',


      handleContent: '自行受理',


      operationName: '李晓明'




      value: 'assistCaseFlowList',


      label: '配合部门'


    },


    {


      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]);


    setProType('handleCaseFlowList')


  }, [progressData])




  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++


  //详细结果的处理


  const typeDom = (data) => {


    //审核结果同意


    if (data.auditResult && data.auditResult == '24_00004-1') {


      return <span>审核结果：<span style={{ color: '#00B42A' }}>{data.auditResultName}</span></span>


    }


    return arrStr.join('')


    //审核结果不同意


    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>


  }






  return (


    <>


      {data.length !== 0


        ? data.map((x, t) => {


    <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>


      }


      {progressData[proType] && progressData[proType].length !== 0


        ? progressData[proType].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'}`} />}


                <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>


                  <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 === progressData[proType].length - 1 ? null : <div className='myStep-item-divider' />}


                </div>


                <div className="myStep-item-right">


                  {/* {dom1(x || {})} */}


                  {


                    t === 0 && dom1(x || {})


                  }


                  {


                    t !== 0 && <>


                      {


                        x.status === '2' ? dom2(x || {}) : dom3(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 className="myStep-item-title">{x.taskNodeName}</div> */}


                  {/* {


                    <StepContent x={x || {}} t={t || 0} />} */}


                </div>


              </div>


            </div>


          );


        })


        : <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}


    </>


    </Fragment>


  );


};