From db8b368c5fd611732e26425c974dddd16ae09a82 Mon Sep 17 00:00:00 2001
From: liuwh <964324856@qq.com>
Date: Sat, 14 Sep 2024 10:03:22 +0800
Subject: [PATCH] 修改提交
---
gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx | 226 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 122 insertions(+), 104 deletions(-)
diff --git a/gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx b/gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx
index a3943e4..ac564e7 100644
--- a/gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx
+++ b/gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx
@@ -2,7 +2,7 @@
* @Author: dminyi 1301963064@qq.com
* @Date: 2024-08-29 17:41:09
* @LastEditors: dminyi 1301963064@qq.com
- * @LastEditTime: 2024-08-29 20:03:51
+ * @LastEditTime: 2024-09-04 15:16:56
* @FilePath: \gzDyh\gz-customerSystem\src\components\SelectObjModal\selectPerson.jsx
* @Description: 选择经办人
*/
@@ -11,14 +11,33 @@
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';
+import { Modal, Spin } from '@arco-design/web-react';
const { Search } = Input;
+const txtMap = {
+ dept: '部门',
+ person: '人',
+ unit: '组织'
+}
+
// 获取人员，组织，部门数据
function getDataApi(type, searchData) {
- const url = type === 'person' ? 'ctUser/userChoose' : type === 'unit' ? 'ctUser/unitList' : 'ctUser/deptList';
+ let url
+ switch (type) {
+ case 'dept':
+ url = `ctUnit/unitChoose`
+ break;
+ case 'person':
+ url = 'ctUser/userChoose'
+ break
+ case 'unit':
+ url = 'ctUser/unitList'
+ break
+ default:
+ break;
+ }
return $$.ax.request({ url, type: 'get', data: searchData, service: 'cust' });
}
@@ -31,36 +50,38 @@
* onClose, // 关闭
* onOk, // 点击确定的回调
*/
-const SelectObjModal = ({ visible = false, checkKeys = [], type = 'person', isCheckbox = false, searchData = {}, onClose, onOk }) => {
+const SelectObjModal = ({ visible = false, checkKeys = [], type = 'dept', isCheckbox = false, searchData = {}, onClose, onOk, }) => {
+ const nameStr = txtMap[type];
+ // 默认调解员查询'22_00024-4'
+ const searchRole = type === 'person' ? { roleCode: '22_00024-4' } : {};
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([]);
+ const [loading, setLoading] = useState(false);
- // tree复选框选择
- function handleCheck(checkedKeys, e) {
- if (!isCheckbox && checkedKeys.checked.length > 1) {
- $$.info({ type: 'warning', content: '当前选择只可单选' });
- return;
+ useEffect(() => {
+ if (!visible) return;
+ // 获取数据
+ async function getData() {
+ setLoading(true)
+ const res = await getDataApi(type, { ...searchRole, ...searchData });
+ setLoading(false)
+ if (res.type) {
+ setData(res.data || []);
+ }
}
- 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 });
- }
+ if (checkKeys.length !== 0) {
+ let keys = [];
+ checkKeys.forEach((x) => keys.push(x.value));
+ setCheckedKeys({ keys, items: checkKeys });
+ } else {
+ setCheckedKeys({ keys: [], items: [] });
+ }
+ getData();
+ }, [type, visible]);
// 搜索
useEffect(() => {
@@ -80,39 +101,6 @@
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) =>
@@ -150,62 +138,92 @@
return loop(data);
}, [searchValue, data]);
- // 默认调解员查询'22_00024-4'
- const searchRole = type === 'person' ? { roleCode: '22_00024-4' } : {};
+ // 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 });
+ }
- 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 || []);
+ // 删除选项
+ function handleDelete(t) {
+ checkedKeys.keys.splice(t, 1);
+ checkedKeys.items.splice(t, 1);
+ setCheckedKeys({ ...checkedKeys });
+ }
+
+ 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);
+ }
}
}
- 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]);
+ return parentKey;
+ };
- const nameStr = type === 'person' ? '人员' : type === 'unit' ? '组织' : '部门';
+ function handleSearch(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);
+ setExpandedKeys(newExpandedKeys);
+ setSearchValue(value);
+ setAutoExpandParent(true);
+ }
return (
- <MyModal visible={!!visible} title={`选择${nameStr}`} width={560} footer={false} onCancel={onClose}>
+ <Modal
+ visible={!!visible}
+ title={`选择${nameStr}`}
+ footer={null}
+ onCancel={onClose}
+ unmountOnExit={true}
+ maskClosable={false}
+ style={{ width: '560px' }}
+ >
<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()
- )}
+ <Spin loading={loading} style={{ width: '100%', height: '100%' }}>
+ {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' }}
+ height={400}
+ />
+ ) : (
+ $$.MyEmpty()
+ )}
+ </Spin>
</div>
</div>
<div className="selectObjModal-right">
@@ -219,7 +237,7 @@
</div>
</div>
<div className="selectObjModal-footer">
- <div>已选中：{checkedKeys.keys.length}人</div>
+ <div>已选中：{checkedKeys.keys.length}{txtMap[type]}</div>
<Space size="middle">
<Button onClick={onClose}>取消</Button>
<Button type="primary" onClick={() => onOk && onOk(checkedKeys)}>
@@ -227,7 +245,7 @@
</Button>
</Space>
</div>
- </MyModal>
+ </Modal>
);
};
--
Gitblit v1.8.0