From c4b3b160a1baa5181ca77dd43fc5c5c2bd3cf252 Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Fri, 30 Aug 2024 09:47:27 +0800
Subject: [PATCH] 自行处理-流转办理
---
gz-customerSystem/src/components/ProgressStep/VisitStep.jsx | 208 +++++++++++++++++
gz-customerSystem/src/assets/images/feedback.png | 0
gz-customerSystem/src/components/WantUserTag/Handling.jsx | 33 ++
gz-customerSystem/src/views/register/index.less | 4
gz-customerSystem/src/assets/images/index.js | 28 +-
gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx | 244 ++++++++++++++++++++
gz-customerSystem/src/api/apiHandler.js | 6
gz-customerSystem/src/components/ProgressStep/index.less | 8
gz-customerSystem/src/components/WantUserTag/index.less | 8
gz-customerSystem/src/views/register/visit/component/handle.jsx | 147 ++++++++---
10 files changed, 624 insertions(+), 62 deletions(-)
diff --git a/gz-customerSystem/src/api/apiHandler.js b/gz-customerSystem/src/api/apiHandler.js
index 8fc3402..dd29b23 100644
--- a/gz-customerSystem/src/api/apiHandler.js
+++ b/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处理方法
@@ -57,8 +57,8 @@
const url =
value.service === 'sys'
- ? `${appUrl.fileUrl}/${appUrl[value.service] || ''}/api/v1/${value.url}`
- : `${appUrl.baseUrl}/${appUrl[value.service] || ''}/api/v1/${value.url}`;
+ ? `${appUrl.fileUrl}/${appUrl[value.service] || ''}/api/web/${value.url}`
+ : `${appUrl.baseUrl}/${appUrl[value.service] || ''}/api/web/${value.url}`;
if (value.type === 'get') {
return ax
diff --git a/gz-customerSystem/src/assets/images/feedback.png b/gz-customerSystem/src/assets/images/feedback.png
new file mode 100644
index 0000000..dd426e1
--- /dev/null
+++ b/gz-customerSystem/src/assets/images/feedback.png
Binary files differ
diff --git a/gz-customerSystem/src/assets/images/index.js b/gz-customerSystem/src/assets/images/index.js
index b6345c4..f0249c0 100644
--- a/gz-customerSystem/src/assets/images/index.js
+++ b/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,
};
diff --git a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
new file mode 100644
index 0000000..eb4460a
--- /dev/null
+++ b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
@@ -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;
diff --git a/gz-customerSystem/src/components/ProgressStep/index.less b/gz-customerSystem/src/components/ProgressStep/index.less
index 1945e31..e37d54a 100644
--- a/gz-customerSystem/src/components/ProgressStep/index.less
+++ b/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;
diff --git a/gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx b/gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx
new file mode 100644
index 0000000..a3943e4
--- /dev/null
+++ b/gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx
@@ -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;
diff --git a/gz-customerSystem/src/components/WantUserTag/Handling.jsx b/gz-customerSystem/src/components/WantUserTag/Handling.jsx
new file mode 100644
index 0000000..6aeb09b
--- /dev/null
+++ b/gz-customerSystem/src/components/WantUserTag/Handling.jsx
@@ -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;
\ No newline at end of file
diff --git a/gz-customerSystem/src/components/WantUserTag/index.less b/gz-customerSystem/src/components/WantUserTag/index.less
index a53f337..b394f4c 100644
--- a/gz-customerSystem/src/components/WantUserTag/index.less
+++ b/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%);
}
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 4c73c7e..633e838 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/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;
}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/visit/component/handle.jsx b/gz-customerSystem/src/views/register/visit/component/handle.jsx
index 0ba90b8..620a5fc 100644
--- a/gz-customerSystem/src/views/register/visit/component/handle.jsx
+++ b/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>
</>
)
--
Gitblit v1.8.0