Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh

zhangyongtian

2024-08-30 922009d0383770bd0f2da88e7412cd1459946a67

Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh

 gz-customerSystem/src/api/apiHandler.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:28:12
 * @LastEditTime: 2024-08-27 11:18:41
 * @LastEditTime: 2024-08-29 14:25:03
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: axios处理方法

 gz-customerSystem/src/assets/images/feedback.png

 gz-customerSystem/src/assets/images/index.js

@@ -36,18 +36,19 @@
import person from "./person.png";
import link from "./link.png";
import check from "./check.png";
import image from './image.png';
import applyMaterials from './applyMaterials.png';
import applyMaterials_active from './applyMaterials_active.png';
import evidenceMaterials from './evidenceMaterials.png';
import evidenceMaterials_active from './evidenceMaterials_active.png';
import closeIcon from './closeIcon.png';
import backgroundImage from './backgroundImage.jpg'
import logo1 from './logo1.png';
import register from './register.png';
import Matter from './matter.png';
import transfer from './transfer.png';
import empty from './empty.png';
import image from "./image.png";
import applyMaterials from "./applyMaterials.png";
import applyMaterials_active from "./applyMaterials_active.png";
import evidenceMaterials from "./evidenceMaterials.png";
import evidenceMaterials_active from "./evidenceMaterials_active.png";
import closeIcon from "./closeIcon.png";
import backgroundImage from "./backgroundImage.jpg";
import logo1 from "./logo1.png";
import register from "./register.png";
import Matter from "./matter.png";
import transfer from "./transfer.png";
import empty from "./empty.png";
import feedback from "./feedback.png";

export {
  ledger_1,
@@ -90,5 +91,6 @@
  register,
  Matter,
  transfer,
  empty
  empty,
  feedback,
};

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

New file
@@ -0,0 +1,208 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 14:57:06
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-29 15:58:19
 * @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 * 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:'', // 判断那个页面展示
 */
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 = [
    {
      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) => {
          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-right">
                  {/* {dom1(x || {})} */}
                  {
                    t === 0 && dom1(x || {})
                  }
                  {
                    t !== 0 && <>
                      {
                        x.status === '2' ? dom2(x || {}) : dom3(x || {})
                      }
                    </>
                  }
                  {/* <div className="myStep-item-title">{x.taskNodeName}</div> */}
                  {/* {
                    <StepContent x={x || {}} t={t || 0} />} */}
                </div>
              </div>
            </div>
          );
        })
        : <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
    </>
  );
};

export default ProgressStep;

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

@@ -28,6 +28,14 @@
            }
        }

        &-noStarted1 {
            background-color: rgba(185,99,211,1);

            &::after {
                border-color: rgba(185,99,211,1);
            }
        }

        &-icon {
            float: left;
            margin-right: 8px;

 gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx

New file
@@ -0,0 +1,244 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 17:41:09
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-29 20:03:51
 * @FilePath: \gzDyh\gz-customerSystem\src\components\SelectObjModal\selectPerson.jsx
 * @Description: 选择经办人
 */
import React, { useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { Button, Space, Input, Tree } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import './index.less';
import MyModal from '../MyModal';
import * as $$ from '../../utils/utility';

const { Search } = Input;

// 获取人员，组织，部门数据
function getDataApi(type, searchData) {
    const url = type === 'person' ? 'ctUser/userChoose' : type === 'unit' ? 'ctUser/unitList' : 'ctUser/deptList';
    return $$.ax.request({ url, type: 'get', data: searchData, service: 'cust' });
}

/**
 * visible, // 传入参数控制modal显示
 * checkKeys, // 选中，数据格式 [{value:'',label:''}]
 * type, // 'person': 选择人员 'unit': 选择组织 'dept': 选择部门
 * isCheckbox, // 是否多选
 * searchData, // 搜索条件
 * onClose, // 关闭
 * onOk, // 点击确定的回调
 */
const SelectObjModal = ({ visible = false, checkKeys = [], type = 'person', isCheckbox = false, searchData = {}, onClose, onOk }) => {
    const [data, setData] = useState([]);

    const [checkedKeys, setCheckedKeys] = useState({ keys: [], items: [] });

    const [expandedKeys, setExpandedKeys] = useState([]);

    const [searchValue, setSearchValue] = useState('');

    const [autoExpandParent, setAutoExpandParent] = useState(true);

    const [dataList, setDataList] = useState([]);

    // tree复选框选择
    function handleCheck(checkedKeys, e) {
        if (!isCheckbox && checkedKeys.checked.length > 1) {
            $$.info({ type: 'warning', content: '当前选择只可单选' });
            return;
        }
        let checkedNodes = e.checkedNodes;
        checkedNodes.forEach((x) => delete x.children);
        setCheckedKeys({ keys: checkedKeys.checked, items: checkedNodes });
    }

    // 删除选项
    function handleDelete(t) {
        checkedKeys.keys.splice(t, 1);
        checkedKeys.items.splice(t, 1);
        setCheckedKeys({ ...checkedKeys });
    }

    // 搜索
    useEffect(() => {
        if (!visible) return;
        const arr = [];
        const generateList = (data) => {
            for (let i = 0; i < data.length; i++) {
                const node = data[i];
                const { value, label } = node;
                arr.push({ value, label });
                if (node.children) {
                    generateList(node.children);
                }
            }
        };
        generateList(data);
        setDataList(arr);
        handleSearch('', arr);
    }, [data]);

    const getParentKey = (key, tree) => {
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
            const node = tree[i];
            if (node.children) {
                if (node.children.some((item) => item.value === key)) {
                    parentKey = node.value;
                } else if (getParentKey(key, node.children)) {
                    parentKey = getParentKey(key, node.children);
                }
            }
        }
        return parentKey;
    };

    function handleSearch(value, dataList) {
    
    console.log('value, dataList', value, dataList);
        const newExpandedKeys = dataList
            .map((item) => {
                if (item.label.indexOf(value) > -1) {
                    return getParentKey(item.value, data);
                }
                return null;
            })
            .filter((item, i, self) => item && self.indexOf(item) === i);

      console.log('newExpandedKeys',newExpandedKeys);
        setExpandedKeys(newExpandedKeys);
        setSearchValue(value);
        setAutoExpandParent(true);
    }

    const treeData = useMemo(() => {
        const loop = (data) =>
            data.map((item) => {
                const strTitle = item.label;
                const index = strTitle.indexOf(searchValue);
                const beforeStr = strTitle.substring(0, index);
                const afterStr = strTitle.slice(index + searchValue.length);
                const label =
                    index > -1 ? (
                        <span>
                            {beforeStr}
                            <span className="selectObjModal-searchValue">{searchValue}</span>
                            {afterStr}
                        </span>
                    ) : (
                        <span>{strTitle}</span>
                    );
                if (item.children) {
                    return {
                        label,
                        name: strTitle,
                        value: item.value,
                        checkable: item.checkable,
                        children: loop(item.children),
                    };
                }
                return {
                    label,
                    name: strTitle,
                    checkable: item.checkable,
                    value: item.value,
                };
            });
        return loop(data);
    }, [searchValue, data]);

  // 默认调解员查询'22_00024-4'
    const searchRole = type === 'person' ? { roleCode: '22_00024-4' } : {};

    useEffect(() => {
        if (!visible) return;
        // 获取数据
        async function getData() {
            global.setSpinning(true);
            const res = await getDataApi(type, { ...searchRole, ...searchData });
            global.setSpinning(false);
            if (res.type) {
                setData(res.data || []);
            }
        }
    console.log(checkKeys,'checkKeys')
    console.log(checkedKeys,'checkedKeys')
        if (checkKeys.length !== 0) {
            let keys = [];
            checkKeys.forEach((x) => keys.push(x.value));
            setCheckedKeys({ keys, items: checkKeys });
        } else {
            setCheckedKeys({ keys: [], items: [] });
        }
        getData();
    }, [type, visible]);

    const nameStr = type === 'person' ? '人员' : type === 'unit' ? '组织' : '部门';

    return (
        <MyModal visible={!!visible} title={`选择${nameStr}`} width={560} footer={false} onCancel={onClose}>
            <div className="selectObjModal-main">
                <div className="selectObjModal-left">
                    <div className="selectObjModal-left-search">
                        <Search placeholder={`查询${nameStr}名称`} onChange={(e) => handleSearch(e.target.value, dataList)} />
                    </div>
                    <div className="selectObjModal-left-main">
                        {data.length > 0 ? (
                            <Tree
                                checkable
                                checkStrictly
                                defaultExpandAll
                                onExpand={(newExpandedKeys) => {
                                    setExpandedKeys(newExpandedKeys);
                                    setAutoExpandParent(false);
                                }}
                                expandedKeys={expandedKeys}
                                autoExpandParent={autoExpandParent}
                                selectable={false}
                                onCheck={(checkedKeys, e) => handleCheck(checkedKeys, e)}
                                checkedKeys={checkedKeys.keys}
                                treeData={treeData}
                                fieldNames={{ title: 'label', key: 'value' }}
                            />
                        ) : (
                            $$.MyEmpty()
                        )}
                    </div>
                </div>
                <div className="selectObjModal-right">
                    {checkedKeys.items.map((x, t) => (
                        <div className="selectObjModal-right-item" key={x.value}>
                            <span className="selectObjModal-right-item-name">{x.label}</span>
                            <CloseOutlined onClick={() => handleDelete(t)} className="selectObjModal-right-item-icon" />
                        </div>
                    ))}
                    {checkedKeys.items.length === 0 && <div className="selectObjModal-none">{$$.MyEmpty({ description: '尚未选择' + nameStr })}</div>}
                </div>
            </div>
            <div className="selectObjModal-footer">
                <div>已选中：{checkedKeys.keys.length}人</div>
                <Space size="middle">
                    <Button onClick={onClose}>取消</Button>
                    <Button type="primary" onClick={() => onOk && onOk(checkedKeys)}>
                        确定
                    </Button>
                </Space>
            </div>
        </MyModal>
    );
};

SelectObjModal.propTypes = {
    visible: PropTypes.any,
    checkKeys: PropTypes.array,
    type: PropTypes.string,
    isCheckbox: PropTypes.bool,
    searchData: PropTypes.object,
    onClose: PropTypes.func,
    onOk: PropTypes.func,
};

export default SelectObjModal;

 gz-customerSystem/src/components/WantUserTag/Handling.jsx

New file
@@ -0,0 +1,33 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 20:43:25
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-29 20:55:24
 * @FilePath: \gzDyh\gz-customerSystem\src\components\WantUserTag\Handling.jsx
 * @Description: 经办人
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Typography } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import './index.less';

const WantUserTag = ({ name, value, onClose }) => {
  return (
    <div className="wantUserTag">
      <div className="wantUserTag-wantHandleUser">
        <div className="wantUserTag-wantUser-right">{name}</div>
        <Typography.Link className="wantUserTag-wantHandleUser-close" onClick={() => onClose(value)}>
          <CloseOutlined style={{width:'11px',height:'13px'}}/>
        </Typography.Link>
      </div>
    </div>
  );
};

WantUserTag.propTypes = {
  name: PropTypes.string,
  onClose: PropTypes.func,
};

export default WantUserTag;

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

@@ -30,6 +30,14 @@
        }
    }

    &-wantHandleUser{
        display:flex;
        padding: 5px 8px;
        border: 1px solid rgba(229,230,235,1);


    }

    &-green {
        background: linear-gradient(135deg, #05aeae, rgba(5, 174, 174, 0.85) 100%);
    }

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

@@ -315,4 +315,8 @@
.tabs-container .arco-tabs-header-ink {
    left: 83.988px;
    width: 82px;
}

.progress{
    margin: 16px 0px 0px 16px;
}

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

@@ -1,11 +1,14 @@
import React, { useState } from 'react';
import { Steps, Button } from '@arco-design/web-react';
import { Col, Space, Row, Tooltip } from 'antd';
import { Steps } from '@arco-design/web-react';
import { Col, Space, Row, Tooltip, Button } from 'antd';
import { register, empty } from '../../../../assets/images'
import { Form, Select, Empty, Tabs, Typography, } from '@arco-design/web-react';
import { Form, Input, Empty, Tabs, Typography, Modal } from '@arco-design/web-react';
import { question1, } from '@/assets/images';
import ProgressStep from '../../../../components/ProgressStep/VisitStep'
import SelectObjModal from '../../../../components/SelectObjModal/selectPerson'
import WantUserTag from '../../../../components/WantUserTag/Handling'

const Option = Select.Option;
const InputSearch = Input.Search;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

@@ -17,6 +20,26 @@


const Handle = () => {
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
  const [wantUser, setWantUser] = useState({});
  const tabs = [
    { index: '1', label: '承办部门' },
    { index: '2', label: '配合部门' },
  ];

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const hideModal = () => {
    setIsModalVisible(false);
  };

  const handleTabChange = (newTabIndex) => {
    setSelectedTab(newTabIndex);
  };

  return (
    <>
@@ -63,45 +86,45 @@
              requiredSymbol={false}
              scrollToFirstError={true}
            >
              <Row>
                <Col span={8}>
                  <FormItem label={<div style={{ display: 'flex' }}>
                    <span style={{ color: '#86909C' }}>经办人</span>
                    <Tooltip>
                      <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                    </Tooltip>
                  </div>
              <Col span={8}>
                <FormItem label={<div style={{ display: 'flex' }}>
                  <span style={{ color: '#86909C' }}>经办人</span>
                  <Tooltip>
                    <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                  </Tooltip>
                </div>
                }
                  field='level' >
                  {wantUser.wantUserId ?
                    <WantUserTag name={wantUser.wantUserName} onClose={() => setWantUser({ wantUserId: null, wantUserName: null })} />
                    :
                    <InputSearch
                      searchButton='选择'
                      placeholder='请选择'
                      style={{ width: 350 }}
                      onClick={() => setIsModalVisible(true)}
                      onSearch={() => setIsModalVisible(true)}
                    />
                  }
                    field='level' >
                    <Select placeholder='请选择' allowClear>
                      {['一级', '二级', '三级', '四级'].map((option, index) => (
                        <Option key={option} value={option}>
                          {option}
                        </Option>
                      ))}

                    </Select>
                    <Button type='primary' style={{ position: 'absolute', right: 0 }}>保存</Button>
                  </FormItem>
                </Col>
                <Col span={24}>
                  <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
                  <Empty
                    icon={
                      <div
                        style={{
                          display: 'flex',
                          // width: 160,
                          justifyContent: 'center',
                        }}
                      >
                        <img src={empty} alt='' style={{ width: '160px', height: '160px' }} />
                      </div>
                    }
                    description='暂无数据'
                  />
                </Col>
              </Row>
                </FormItem>
              </Col>
              <Col span={24}>
                <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
                <Empty
                  icon={
                    <div
                      style={{
                        display: 'flex',
                        // width: 160,
                        justifyContent: 'center',
                      }}
                    >
                      <img src={empty} alt='' style={{ width: '160px', height: '160px' }} />
                    </div>
                  }
                  description='暂无数据'
                />
              </Col>
            </Form>
            <Space>
              <Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>添加办理记录</Button>
@@ -116,19 +139,40 @@
                key='1'
                title={
                  <span style={{ fontSize: '15px' }}>
                    Tab 1
                    流转进度
                  </span>
                }
              >
                <Typography.Paragraph style={style}>
                  
                <Typography.Paragraph>
                  <div style={{ display: 'flex', marginLeft: '16px', gap: '16px' }}>
                    {tabs.map((tab) => (
                      <div
                        key={tab.index}
                        style={{
                          color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
                          padding: '6px 12px',
                          border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
                          borderRadius: '4px',
                          cursor: 'pointer',
                        }}
                        onClick={() => handleTabChange(tab.index)}
                      >
                        {tab.label}
                      </div>
                    ))}
                  </div>
                  {selectedTab === '1' &&
                    <div className='progress'>
                      <ProgressStep caseId='202408291012566613' pageFrom="dispatchRecord" />
                    </div>
                  }
                </Typography.Paragraph>
              </TabPane>
              <TabPane
                key='2'
                title={
                  <span style={{ fontSize: '15px' }}>
                    Tab 2
                    督办信息
                  </span>
                }
              >
@@ -138,6 +182,17 @@

          </div>
        </div>

        {/* 选择经办人*/}
        <SelectObjModal
          visible={isModalVisible}
          checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined}
          onOk={(value) => {
            setIsModalVisible(false);
            setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name });
          }}
          onClose={() => setIsModalVisible(false)}
        />
      </div>
    </>
  )