忘记密码与部门改为懒加载
This commit is contained in:
@ -1,17 +1,23 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { TreeSelect } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { TreeSelect, Spin } from 'antd';
|
||||
import { treeData } from './services'; // 你的接口
|
||||
|
||||
export interface AccessDepartmentSelectProps {
|
||||
value?: string | number;
|
||||
onChange?: (value: string | number) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
interface orgData {
|
||||
orgName: string;
|
||||
// 树节点类型
|
||||
interface OrgNode {
|
||||
orgId: string;
|
||||
children?: orgData[];
|
||||
orgName: string;
|
||||
children?: OrgNode[];
|
||||
isLeaf?: boolean;
|
||||
key?: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const AccessDepartmentSelect: React.FC<AccessDepartmentSelectProps> = ({
|
||||
@ -19,36 +25,70 @@ const AccessDepartmentSelect: React.FC<AccessDepartmentSelectProps> = ({
|
||||
onChange,
|
||||
placeholder = '请选择准入部门',
|
||||
disabled = false,
|
||||
style = { width: 200 },
|
||||
}) => {
|
||||
const [userOrgAll, setUserOrgAll] = useState<orgData[]>([]);
|
||||
const [tree, setTree] = useState<OrgNode[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const userOrgAllStr = sessionStorage.getItem('userOrgAll');
|
||||
const userOrgAll = userOrgAllStr ? JSON.parse(userOrgAllStr) : [];
|
||||
setUserOrgAll(userOrgAll);
|
||||
}, []);
|
||||
|
||||
// TreeSelect 要的数据结构
|
||||
function buildTree(data: orgData[]): any[] {
|
||||
// 转换接口为 TreeSelect 结构
|
||||
function formatTree(data: OrgNode[]): any[] {
|
||||
return data.map(item => ({
|
||||
...item,
|
||||
title: item.orgName,
|
||||
value: item.orgId,
|
||||
key: item.orgId,
|
||||
children: item.children && item.children.length > 0 ? buildTree(item.children) : undefined,
|
||||
// isLeaf: item.isLeaf || false,
|
||||
// children: item.children && item.children.length > 0 ? formatTree(item.children) : undefined,
|
||||
}));
|
||||
}
|
||||
|
||||
// 懒加载节点
|
||||
const onLoadData = async (treeNode: any) => {
|
||||
if (treeNode.children && treeNode.children.length > 0) return;
|
||||
setLoading(true);
|
||||
const { code, data } = await treeData({ upOrgId: treeNode.value });
|
||||
if (code === 200 && Array.isArray(data)) {
|
||||
setTree(origin => updateNode(origin, treeNode.value, formatTree(data)));
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// 递归插入children
|
||||
function updateNode(list: OrgNode[], key: string, children: OrgNode[]): OrgNode[] {
|
||||
return list.map(node => {
|
||||
if (node.orgId === key) return { ...node, children };
|
||||
if (node.children) return { ...node, children: updateNode(node.children, key, children) };
|
||||
return node;
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
treeData({}).then(res => {
|
||||
if (res.code === 200 && Array.isArray(res.data)) {
|
||||
setTree(formatTree(res.data));
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TreeSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
treeData={buildTree(userOrgAll)}
|
||||
allowClear
|
||||
style={{ width: '160px' }}
|
||||
showSearch
|
||||
/>
|
||||
<Spin spinning={loading}>
|
||||
<TreeSelect
|
||||
value={value}
|
||||
treeData={tree}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
allowClear
|
||||
style={style}
|
||||
showSearch
|
||||
loadData={onLoadData}
|
||||
treeDefaultExpandAll={false}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
/>
|
||||
</Spin>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -4,8 +4,13 @@ import request from '@/utils/request';
|
||||
* 部门
|
||||
*/
|
||||
export const queryUserOrgAll = () => request.get(`/org/queryUserOrgAll`);
|
||||
|
||||
|
||||
/**
|
||||
* 部门列表
|
||||
*/
|
||||
interface treeInterface {
|
||||
upOrgId?: string
|
||||
}
|
||||
export const treeData = (params: treeInterface) => request.get('/org/list', { params });
|
||||
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user