From 544148eddae96db824423cd059ebecb9d13c392e Mon Sep 17 00:00:00 2001
From: xusd <330628789@qq.com>
Date: Thu, 19 Jun 2025 20:52:50 +0800
Subject: [PATCH] fix:市平台项目更新
---
src/components/SelectObjModal/selectJudge.jsx | 332 ++++++++++++++++++++++++++++--------------------------
1 files changed, 173 insertions(+), 159 deletions(-)
diff --git a/src/components/SelectObjModal/selectJudge.jsx b/src/components/SelectObjModal/selectJudge.jsx
index 6f05a89..50b2db3 100644
--- a/src/components/SelectObjModal/selectJudge.jsx
+++ b/src/components/SelectObjModal/selectJudge.jsx
@@ -10,7 +10,7 @@
// 获取法官数据
function getDataApi(searchData) {
- return $$.ax.request({ url: 'ctUserole/listJudge', type: 'get', data: searchData, service: 'cust' });
+ return $$.ax.request({ url: 'ctUserole/listJudge', type: 'get', data: searchData, service: 'cust' });
}
/**
@@ -22,94 +22,99 @@
* onOk, // 点击确定的回调
*/
const SelectObjModal = ({ visible = false, courtId, checkKeys = [], nameStr, isCheckbox = false, searchData = {}, onClose, onOk }) => {
- const [data, setData] = useState([]);
+ const [data, setData] = useState([]);
- const [checkedKeys, setCheckedKeys] = useState({ keys: [], items: [] });
+ const [checkedKeys, setCheckedKeys] = useState({ keys: [], items: [] });
- const [expandedKeys, setExpandedKeys] = useState([]);
+ const [expandedKeys, setExpandedKeys] = useState([]);
- const [searchValue, setSearchValue] = useState('');
+ const [searchValue, setSearchValue] = useState('');
- const [autoExpandParent, setAutoExpandParent] = useState(true);
+ const [autoExpandParent, setAutoExpandParent] = useState(true);
- const [dataList, setDataList] = useState([]);
+ 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 });
- }
+ // 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 });
- }
+ // 删除选项
+ 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]);
-
+ // 搜索
+ 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;
- };
+ 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) {
+ 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('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);
- }
+ console.log('newExpandedKeys', newExpandedKeys);
+ setExpandedKeys(newExpandedKeys);
+ setSearchValue(value);
+ setAutoExpandParent(true);
+ }
const treeData = useMemo(() => {
- const loop = (data) =>
- data.map((item) => {
+ 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 =
@@ -122,113 +127,122 @@
) : (
<span>{strTitle}</span>
);
+
if (item.children) {
+ const filteredChildren = loop(item.children).filter(Boolean); // 递归处理子项并过滤掉 null
return {
label,
name: strTitle,
value: item.value,
checkable: item.checkable,
- children: loop(item.children),
+ children: filteredChildren.length > 0 ? filteredChildren : undefined,
};
}
+
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));
+ }).filter(Boolean); // 过滤掉 null
+ };
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]);
- 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>
- );
+ 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}名称`}
+ onSearch={(e) => {
+ // handleSearch('', dataList)
+ if (!e) {
+ handleSearch('', dataList);
+ } else {
+ handleSearch(e, 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,
+ visible: PropTypes.any,
+ checkKeys: PropTypes.array,
+ type: PropTypes.string,
+ isCheckbox: PropTypes.bool,
+ searchData: PropTypes.object,
+ onClose: PropTypes.func,
+ onOk: PropTypes.func,
};
export default SelectObjModal;
--
Gitblit v1.8.0