feat：事件流转

zhangyongtian

2024-08-31 e1961f3d69deb7bb75c365748f4726bcedb10dda

feat：事件流转

 gz-customerSystem/src/api/appUrl.js

@@ -10,11 +10,11 @@
export const debug = {
    // web服务
    // baseUrl: 'http://gz.hugeinfo.com.cn',
    baseUrl: 'http://tj4jd4.natappfree.cc',
    baseUrl: 'http://39ifft.natappfree.cc',
    // baseUrl: 'http://mdqgnh.natappfree.cc',

    // 附件服务
    fileUrl: 'http://tj4jd4.natappfree.cc',
    fileUrl: 'http://39ifft.natappfree.cc',
    // fileUrl: 'http://gz.hugeinfo.com.cn',



 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>

 gz-customerSystem/src/views/register/index.less

@@ -129,7 +129,7 @@
    &-hasTabPage {
        background-color: #fff;
        margin: 8px 8px 0px 16px;
        padding: 12px 16px 16px 16px;
        padding: 12px 16px 64px 16px;
        height: calc(100vh - 288px);
        overflow-y: scroll;
    }

 gz-customerSystem/src/views/register/visit/component/agentDialog.jsx

@@ -241,7 +241,7 @@
                    <Select
                      placeholder='请选择'
                      allowClear
                      options={$$.options.agentType}
                      options={$$.options.agentRelate}
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('agentRelateName', options && options.children)
                      }}

 gz-customerSystem/src/views/register/visit/component/applyDialog.jsx

@@ -281,7 +281,7 @@
              <Select
                placeholder='请选择'
                allowClear
                options={$$.options.agentType}
                options={isLegal ? $$.options.enterpriseType : $$.options.orgaType}
                onChange={(value, options) => {
                  formRef.current.setFieldValue('orgaTypeName', options && options.children)
                }}

 gz-customerSystem/src/views/register/visit/component/secondWanderStep/EventFlow.jsx

@@ -1,11 +1,69 @@
import React from 'react';
import { Button } from '@arco-design/web-react';
import { Space } from 'antd';
import ProgressStep from '@/components/ProgressStep/VisitStep';

const fakeData = [
  {
    handlerUserName: '天河区棠下街综治中心',
    finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间
    handleResult: '1',
    status: '2',
    taskNodeName: '来访登记',
    mediResult: '22_00025-1',
    handleContent: '调解成功，双方达成一致意见。',
    operationName: '李晓明'
  },
  {
    handlerUserName: '系统派单',
    finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '2',
    taskNodeName: '事件流转',
    mediResult: '22_00025-1',
    handleContent: '派单至：白云区新市街市场监管所',
  },
  {
    handlerUserName: '白云区新市街市场监管所',
    finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '2',
    taskNodeName: '事件流转',
    mediResult: '22_00025-1',
    handleContent: '已签收',
    operationName: '赵菲菲'
  },
  {
    handlerUserName: '白云区新市街市场监管所',
    finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '3',
    taskNodeName: '事件回退',
    mediResult: '22_00025-1',
    // handleContent: '已签收',
    operationName: '赵菲菲'
  },
  {
    handlerUserName: '天河区棠下街综治中心',
    finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间
    handleResult: '2',
    status: '1',
    taskNodeName: '事件流转',
    mediResult: '22_00025-1',
    handleContent: '案件已被签收，准备开始调解。',
    operationName: '李晓明'
  },
];

export default function EventFlow(props) {
  const tabs = [
    { index: '1', label: '承办部门' },
    { index: '2', label: '配合部门' },
  ];
  return (
    <div className='dataSync'>
      <div className='dataSync-hasTabPage' >
        <ProgressStep progressData={fakeData} />
      </div>
      <div className="dataSync-excel">
        <Space size="large" style={{ margin: '4px 14px' }}>