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(searchData) {
|
return $$.ax.request({ url: 'ctUserole/listJudge', type: 'get', data: searchData, service: 'cust' });
|
}
|
|
/**
|
* visible, // 传入参数控制modal显示
|
* checkKeys, // 选中，数据格式 [{value:'',label:''}]
|
* isCheckbox, // 是否多选
|
* searchData, // 搜索条件
|
* onClose, // 关闭
|
* onOk, // 点击确定的回调
|
*/
|
const SelectObjModal = ({ visible = false, courtId, checkKeys = [], nameStr, 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,
|
};
|
});
|
// data = data.filter(i => i.label?.indexOf(searchValue) > -1);
|
// console.log('data.filter',data.filter(i => i.label?.indexOf(searchValue) > -1));
|
console.log('loop(data)', loop(data));
|
|
return loop(data);
|
|
}, [searchValue, data]);
|
|
|
useEffect(() => {
|
if (!visible) return;
|
// 获取数据
|
async function getData() {
|
global.setSpinning(true);
|
const res = await getDataApi({ courtId });
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || []);
|
}
|
}
|
if (checkKeys.length !== 0) {
|
let keys = [];
|
checkKeys.forEach((x) => keys.push(x.value));
|
setCheckedKeys({ keys, items: checkKeys });
|
} else {
|
setCheckedKeys({ keys: [], items: [] });
|
}
|
getData();
|
}, [visible]);
|
|
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;
|
