/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-29 17:41:09
|
* @LastEditors: lwh
|
* @LastEditTime: 2025-06-06 09:48:10
|
* @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 * as $$ from '../../utils/utility';
|
import { Modal, Spin } from '@arco-design/web-react';
|
|
const { Search } = Input;
|
|
const txtMap = {
|
supUnit: '组织',
|
dept: '部门',
|
person: '人',
|
unit: '组织'
|
}
|
|
// 获取人员，组织，部门数据
|
function getDataApi(type, searchData, caseId) {
|
let url
|
switch (type) {
|
case 'dept':
|
// url = `ctUnit/unitChoose`
|
url = `ctUnit/unitTree`
|
break;
|
case 'person':
|
url = 'ctUser/userChoose'
|
break
|
case 'unit':
|
url = 'ctUser/unitList'
|
break
|
case 'supUnit':
|
url = `caseInfoUnfold/superviceUnitChoose?caseId=${caseId}`
|
break
|
default:
|
break;
|
}
|
return $$.ax.request({ url, type: 'get', data: searchData, service: type === 'supUnit' ? 'mediate' : 'cust' });
|
}
|
|
/**
|
* visible, // 传入参数控制modal显示
|
* checkKeys, // 选中，数据格式 [{value:'',label:''}]
|
* type, // 'person': 选择人员 'unit': 选择组织 'dept': 选择部门 'supUnit': 督办组织
|
* isCheckbox, // 是否多选
|
* searchData, // 搜索条件
|
* onClose, // 关闭
|
* onOk, // 点击确定的回调
|
*/
|
const SelectObjModal = ({ visible = false, nameStr, checkKeys = [], type = 'dept', isCheckbox = false, searchData = {}, onClose, onOk, caseId }) => {
|
// 默认调解员查询'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.length > 1) {
|
$$.info({ type: 'warning', content: '当前选择只可单选' });
|
return;
|
}
|
setCheckedKeys({ keys: checkedKeys, items: e.node });
|
}
|
|
// 删除选项
|
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);
|
}
|
}
|
}
|
return parentKey;
|
};
|
|
// 获取所有父节点
|
const getAllParentKeys = (key, tree, parents = []) => {
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i];
|
if (node.children) {
|
if (node.children.some((item) => item.value === key)) {
|
parents.push(node.value);
|
getAllParentKeys(node.value, tree, parents);
|
} else {
|
getAllParentKeys(key, node.children, parents);
|
}
|
}
|
}
|
return parents;
|
};
|
|
function handleSearch(value, dataList) {
|
let newExpandedKeys = [];
|
// 找到所有包含关键字的节点
|
const matchedKeys = dataList
|
.filter((item) => item.label.indexOf(value) > -1)
|
.map((item) => item.value);
|
|
// 获取所有相关父节点
|
matchedKeys.forEach((key) => {
|
const parents = getAllParentKeys(key, data);
|
newExpandedKeys = newExpandedKeys.concat(parents);
|
});
|
|
// 去重
|
newExpandedKeys = Array.from(new Set(newExpandedKeys));
|
|
setExpandedKeys(newExpandedKeys);
|
setSearchValue(value);
|
setAutoExpandParent(true);
|
}
|
|
function handleSearch1(value, dataList) {
|
let newExpandedKeys = [];
|
// 找到所有包含关键字的节点
|
const matchedKeys = dataList
|
.filter((item) => item.label.indexOf(value) > -1)
|
.map((item) => item.value);
|
|
// 获取所有相关父节点
|
matchedKeys.forEach((key) => {
|
const parents = getAllParentKeys(key, data);
|
newExpandedKeys = newExpandedKeys.concat(parents);
|
});
|
|
// 去重
|
newExpandedKeys = Array.from(new Set(newExpandedKeys));
|
setSearchValue(value);
|
setAutoExpandParent(true);
|
}
|
|
useEffect(() => {
|
if (!visible) return;
|
// 获取数据
|
async function getData() {
|
setLoading(true)
|
const res = await getDataApi(type, { ...searchRole, ...searchData }, caseId);
|
setLoading(false)
|
if (res.type) {
|
setData(res.data || []);
|
}
|
}
|
if (checkKeys.length !== 0) {
|
setCheckedKeys({ keys: checkKeys, items: [] });
|
} else {
|
setCheckedKeys({ keys: [], items: [] });
|
}
|
getData();
|
}, [type, visible]);
|
|
console.log('checkedKeys', 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 treeData = useMemo(() => {
|
const loop = (data) => {
|
const copiedData = JSON.parse(JSON.stringify(data));
|
return copiedData.map((item, idx) => {
|
const strTitle = item.label;
|
const index = strTitle.indexOf(searchValue);
|
|
// 只保留包含 searchValue 的项
|
if (index <= -1 && !item.children) {
|
return null; // 返回 null 表示不包含在最终结果中
|
}
|
|
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) {
|
const filteredChildren = loop(item.children).filter(Boolean); // 递归处理子项并过滤掉 null
|
return {
|
label,
|
name: strTitle,
|
value: item.value,
|
disabled: item.checkable ? false : true,
|
checkable: item.checkable,
|
children: filteredChildren.length > 0 ? filteredChildren : undefined,
|
};
|
}
|
|
return {
|
label,
|
name: strTitle,
|
disabled: item.checkable ? false : true,
|
checkable: item.checkable,
|
value: item.value,
|
};
|
}).filter(Boolean); // 过滤掉 null
|
};
|
return loop(data);
|
}, [searchValue, data]);
|
|
return (
|
<Modal
|
visible={!!visible}
|
title={`选择${nameStr}`}
|
footer={null}
|
onCancel={onClose}
|
unmountOnExit={true}
|
maskClosable={false}
|
style={{ width: '560px' }}
|
>
|
<div className="selectObjModal-main">
|
<div style={{ width: "100%" }}>
|
<div className="selectObjModal-left-search" style={{ paddingRight: '0px' }}>
|
<Search placeholder={`查询${nameStr}名称`} onSearch={(e) => handleSearch1(e, dataList)} />
|
</div>
|
<div className="selectObjModal-left-main">
|
<Spin loading={loading} style={{ width: '100%', height: '100%' }}>
|
{data.length > 0 ? (
|
<Tree
|
checkStrictly
|
defaultExpandAll
|
onExpand={(newExpandedKeys) => {
|
setExpandedKeys(newExpandedKeys);
|
setAutoExpandParent(false);
|
}}
|
expandedKeys={expandedKeys}
|
autoExpandParent={autoExpandParent}
|
onSelect={(checkedKeys, e) => {
|
handleCheck(checkedKeys, e);
|
onOk && onOk(e.node)
|
}}
|
selectedKeys={checkedKeys.keys}
|
treeData={treeData}
|
fieldNames={{ title: 'label', key: 'value' }}
|
height={400}
|
/>
|
) : (
|
$$.MyEmpty()
|
)}
|
</Spin>
|
</div>
|
</div>
|
</div>
|
</Modal>
|
);
|
};
|
|
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;
|
