478 lines
15 KiB
TypeScript
478 lines
15 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
|
|
// 组织路径信息（懒加载接口返回）
|
|
export interface OrganizationPath {
|
|
tenant_name: string;
|
|
dep_name: string;
|
|
dep_short_name: string;
|
|
ou_name: string;
|
|
}
|
|
|
|
// 导入类型
|
|
export interface UserInfo {
|
|
id: number;
|
|
username: string;
|
|
nick_name: string;
|
|
area: string;
|
|
ou_id: string;
|
|
ou_name: string;
|
|
is_leader: boolean;
|
|
status: number;
|
|
// 以下字段在搜索接口中有值，在懒加载接口中为 null
|
|
tenant_name: string | null;
|
|
dep_name: string | null;
|
|
dep_short_name: string | null;
|
|
email?: string;
|
|
phone_number?: string;
|
|
// 懒加载接口返回的组织路径信息
|
|
organization_path?: OrganizationPath | null;
|
|
}
|
|
|
|
export interface TreeNodeItem {
|
|
label: string;
|
|
value: string;
|
|
isUser: boolean;
|
|
hasChildren: boolean;
|
|
userInfo?: UserInfo;
|
|
children?: TreeNodeItem[];
|
|
// 懒加载状态
|
|
isLoading?: boolean;
|
|
isLoaded?: boolean;
|
|
}
|
|
|
|
type MultiCascaderProps = {
|
|
options: TreeNodeItem[];
|
|
// 已选择的用户ID列表（用于判断按钮状态）
|
|
selectedUsers?: string[];
|
|
placeholder?: string;
|
|
maxHeight?: number;
|
|
searchable?: boolean;
|
|
searchPlaceholder?: string;
|
|
// 懒加载回调
|
|
onLoadChildren?: (node: TreeNodeItem) => Promise<TreeNodeItem[]>;
|
|
// 搜索用户回调
|
|
onSearchUsers?: (keyword: string) => Promise<TreeNodeItem[]>;
|
|
// 树数据变化回调（懒加载后同步更新父组件的树数据）
|
|
onTreeDataChange?: (treeData: TreeNodeItem[]) => void;
|
|
// 用户从树中添加时的回调
|
|
onAddUser?: (userNode: TreeNodeItem) => void;
|
|
// 用户从搜索结果添加时的回调
|
|
onSearchUserAdded?: (userNode: TreeNodeItem) => void;
|
|
};
|
|
|
|
const MultiCascader: React.FC<MultiCascaderProps> = ({
|
|
options,
|
|
selectedUsers = [],
|
|
placeholder = '请选择',
|
|
maxHeight = 300,
|
|
searchable = false,
|
|
searchPlaceholder = '搜索...',
|
|
onLoadChildren,
|
|
onSearchUsers,
|
|
onTreeDataChange,
|
|
onAddUser,
|
|
onSearchUserAdded
|
|
}) => {
|
|
const [visible, setVisible] = useState(false);
|
|
const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
|
|
const [searchKeyword, setSearchKeyword] = useState('');
|
|
const [searchResults, setSearchResults] = useState<TreeNodeItem[]>([]);
|
|
const [searchLoading, setSearchLoading] = useState(false);
|
|
const [localOptions, setLocalOptions] = useState<TreeNodeItem[]>(options);
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const searchInputRef = useRef<HTMLInputElement>(null);
|
|
const loadingNodesRef = useRef<Set<string>>(new Set());
|
|
const prevOptionsRef = useRef<TreeNodeItem[]>(options);
|
|
|
|
// 同步外部 options 变化
|
|
useEffect(() => {
|
|
setLocalOptions(options);
|
|
}, [options]);
|
|
|
|
// 同步树数据变化到父组件（懒加载后触发）
|
|
useEffect(() => {
|
|
// 只有当 localOptions 真正变化时才调用回调，避免无限循环
|
|
if (onTreeDataChange && localOptions !== prevOptionsRef.current) {
|
|
prevOptionsRef.current = localOptions;
|
|
onTreeDataChange(localOptions);
|
|
}
|
|
}, [localOptions, onTreeDataChange]);
|
|
|
|
// 点击外部关闭
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
|
setVisible(false);
|
|
setSearchKeyword('');
|
|
setSearchResults([]);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, []);
|
|
|
|
// 下拉框打开时聚焦搜索框
|
|
useEffect(() => {
|
|
if (visible && searchable && searchInputRef.current) {
|
|
setTimeout(() => searchInputRef.current?.focus(), 100);
|
|
}
|
|
if (!visible) {
|
|
setSearchKeyword('');
|
|
setSearchResults([]);
|
|
}
|
|
}, [visible, searchable]);
|
|
|
|
// 搜索用户
|
|
const handleSearch = useCallback(async (keyword: string) => {
|
|
setSearchKeyword(keyword);
|
|
|
|
if (!keyword.trim() || !onSearchUsers) {
|
|
setSearchResults([]);
|
|
return;
|
|
}
|
|
|
|
setSearchLoading(true);
|
|
try {
|
|
const results = await onSearchUsers(keyword);
|
|
setSearchResults(results);
|
|
} catch (error) {
|
|
console.error('搜索用户失败:', error);
|
|
setSearchResults([]);
|
|
} finally {
|
|
setSearchLoading(false);
|
|
}
|
|
}, [onSearchUsers]);
|
|
|
|
// 防抖搜索
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
if (searchKeyword && searchable && onSearchUsers) {
|
|
handleSearch(searchKeyword);
|
|
}
|
|
}, 300);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [searchKeyword, searchable, onSearchUsers, handleSearch]);
|
|
|
|
// 懒加载子节点
|
|
const handleExpand = async (node: TreeNodeItem) => {
|
|
// 如果已经加载过（有子组织或用户），则直接展开/折叠，不调用API
|
|
if (node.isLoaded) {
|
|
setExpandedKeys(prev => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(node.value)) {
|
|
newSet.delete(node.value); // 折叠
|
|
} else {
|
|
newSet.add(node.value); // 展开
|
|
}
|
|
return newSet;
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 正在加载中，直接展开已加载的部分
|
|
if (loadingNodesRef.current.has(node.value)) {
|
|
setExpandedKeys(prev => {
|
|
const newSet = new Set(prev);
|
|
newSet.add(node.value);
|
|
return newSet;
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 标记为加载中
|
|
loadingNodesRef.current.add(node.value);
|
|
setLocalOptions(prev => updateNodeLoading(prev, node.value, true));
|
|
|
|
try {
|
|
if (onLoadChildren) {
|
|
const children = await onLoadChildren(node);
|
|
|
|
// 更新本地选项
|
|
setLocalOptions(prev => updateNodeChildren(prev, node.value, children, true));
|
|
}
|
|
|
|
// 展开节点
|
|
setExpandedKeys(prev => {
|
|
const newSet = new Set(prev);
|
|
newSet.add(node.value);
|
|
return newSet;
|
|
});
|
|
} catch (error) {
|
|
console.error('加载子节点失败:', error);
|
|
} finally {
|
|
loadingNodesRef.current.delete(node.value);
|
|
setLocalOptions(prev => updateNodeLoading(prev, node.value, false));
|
|
}
|
|
};
|
|
|
|
// 更新节点加载状态
|
|
const updateNodeLoading = (nodes: TreeNodeItem[], value: string, isLoading: boolean): TreeNodeItem[] => {
|
|
return nodes.map(node => {
|
|
if (node.value === value) {
|
|
return { ...node, isLoading };
|
|
}
|
|
if (node.children) {
|
|
return { ...node, children: updateNodeLoading(node.children, value, isLoading) };
|
|
}
|
|
return node;
|
|
});
|
|
};
|
|
|
|
// 更新节点的子节点
|
|
const updateNodeChildren = (
|
|
nodes: TreeNodeItem[],
|
|
value: string,
|
|
children: TreeNodeItem[],
|
|
isLoaded: boolean
|
|
): TreeNodeItem[] => {
|
|
return nodes.map(node => {
|
|
if (node.value === value) {
|
|
return {
|
|
...node,
|
|
children,
|
|
isLoaded,
|
|
hasChildren: children.length > 0
|
|
};
|
|
}
|
|
if (node.children) {
|
|
return {
|
|
...node,
|
|
children: updateNodeChildren(node.children, value, children, isLoaded)
|
|
};
|
|
}
|
|
return node;
|
|
});
|
|
};
|
|
|
|
// 检查用户是否已添加
|
|
const isUserAdded = (value: string): boolean => {
|
|
return selectedUsers.includes(value);
|
|
};
|
|
|
|
// 从树中添加用户
|
|
const handleAddUser = (userNode: TreeNodeItem) => {
|
|
if (isUserAdded(userNode.value)) {
|
|
return; // 已添加，不处理
|
|
}
|
|
onAddUser?.(userNode);
|
|
};
|
|
|
|
// 从搜索结果添加用户
|
|
const handleAddSearchUser = (userNode: TreeNodeItem) => {
|
|
if (isUserAdded(userNode.value)) {
|
|
return; // 已添加，不处理
|
|
}
|
|
onSearchUserAdded?.(userNode);
|
|
};
|
|
|
|
// 渲染组织/用户节点
|
|
const renderNode = (node: TreeNodeItem, level: number = 0, parentKey: string = ''): React.ReactNode => {
|
|
const hasChildren = node.hasChildren;
|
|
const isExpanded = expandedKeys.has(node.value);
|
|
const isLoading = node.isLoading;
|
|
const isLoaded = node.isLoaded;
|
|
const isAdded = isUserAdded(node.value);
|
|
|
|
const nodeKey = parentKey ? `${parentKey}-${node.value}` : node.value;
|
|
|
|
return (
|
|
<div key={nodeKey} className={level > 0 ? "ml-4" : ""}>
|
|
{/* 组织节点：点击整行可展开/收缩 */}
|
|
{hasChildren ? (
|
|
<div
|
|
className="flex items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 transition-colors"
|
|
onClick={() => handleExpand(node)}
|
|
>
|
|
{/* 展开/折叠图标 */}
|
|
{isLoading ? (
|
|
<i className="ri-loader-4-line animate-spin text-gray-400 mr-2"></i>
|
|
) : isExpanded ? (
|
|
<i className="ri-arrow-down-s-line text-gray-400 mr-2"></i>
|
|
) : (
|
|
<i className="ri-arrow-right-s-line text-gray-400 mr-2"></i>
|
|
)}
|
|
{/* 节点标签 */}
|
|
<span className="text-sm flex-1" title={node.label}>
|
|
{node.label}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
/* 用户节点 */
|
|
<div className="flex items-center py-1 px-2 rounded hover:bg-gray-100 transition-colors">
|
|
{/* 用户节点：显示添加按钮 */}
|
|
<span className="text-sm flex-1" title={node.label}>
|
|
{node.label}
|
|
</span>
|
|
{node.isUser && (
|
|
<button
|
|
type="button"
|
|
className={`ml-2 w-6 h-6 rounded flex items-center justify-center text-sm ${
|
|
isAdded
|
|
? 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
|
: 'bg-green-800 text-white hover:bg-green-700'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleAddUser(node);
|
|
}}
|
|
disabled={isAdded}
|
|
title={isAdded ? '已添加' : '添加成员'}
|
|
>
|
|
{isAdded ? '✓' : '+'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 渲染子节点 - 只有当有实际子节点时才渲染 */}
|
|
{node.children && node.children.length > 0 && isExpanded && (
|
|
<div className="ml-4 border-l border-gray-200 pl-2">
|
|
{node.children.map(child => renderNode(child, level + 1, nodeKey))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 渲染搜索结果
|
|
const renderSearchResults = () => {
|
|
if (searchLoading) {
|
|
return (
|
|
<div className="p-4 text-center text-gray-400 text-sm">
|
|
<i className="ri-loader-4-line animate-spin text-lg block mb-1"></i>
|
|
搜索中...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (searchResults.length === 0) {
|
|
return (
|
|
<div className="p-4 text-center text-gray-400 text-sm">
|
|
<i className="ri-search-line text-lg block mb-1"></i>
|
|
无匹配结果
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-2">
|
|
<div className="text-xs text-gray-500 mb-2 px-1">
|
|
找到 {searchResults.length} 个用户
|
|
</div>
|
|
{searchResults.map(user => (
|
|
<div
|
|
key={user.value}
|
|
className="flex items-center justify-between py-2 px-2 hover:bg-gray-50 rounded"
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium text-gray-900 truncate">
|
|
{user.userInfo?.nick_name || user.label}
|
|
</div>
|
|
<div className="text-xs text-gray-500 truncate">
|
|
{/* 优先使用 organization_path 中的值（懒加载接口），为空则使用顶层字段（搜索接口） */}
|
|
{user.userInfo?.organization_path?.tenant_name || user.userInfo?.tenant_name} · {user.userInfo?.ou_name}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleAddSearchUser(user)}
|
|
className={`ml-2 px-3 py-1 text-xs rounded ${
|
|
isUserAdded(user.value)
|
|
? 'bg-gray-200 text-gray-500 cursor-not-allowed'
|
|
: 'bg-green-800 text-white hover:bg-green-700'
|
|
}`}
|
|
disabled={isUserAdded(user.value)}
|
|
>
|
|
{isUserAdded(user.value) ? '已添加' : '添加'}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 显示文本
|
|
const getDisplayText = () => {
|
|
if (selectedUsers.length === 0) return placeholder;
|
|
return `已选择 ${selectedUsers.length} 位成员`;
|
|
};
|
|
|
|
return (
|
|
<div ref={containerRef} className="relative inline-block w-full">
|
|
{/* 触发器 */}
|
|
<div
|
|
className="border border-gray-300 rounded px-3 py-2 cursor-pointer bg-white flex justify-between items-center focus:outline-none focus:ring-2 focus:ring-[var(--color-primary,#00684a)] focus:border-[var(--color-primary,#00684a)]"
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
setVisible(!visible);
|
|
}
|
|
}}
|
|
onClick={() => setVisible(!visible)}
|
|
>
|
|
<span className={selectedUsers.length === 0 ? 'text-gray-400' : ''}>
|
|
{getDisplayText()}
|
|
</span>
|
|
<span className="text-gray-400">
|
|
<i className={visible ? "ri-arrow-up-s-line" : "ri-arrow-down-s-line"}></i>
|
|
</span>
|
|
</div>
|
|
|
|
{/* 下拉面板 */}
|
|
{visible && (
|
|
<div className="absolute z-10 bg-white border border-gray-300 rounded shadow-lg mt-1 w-full">
|
|
{/* 搜索框 */}
|
|
{searchable && (
|
|
<div className="p-2 border-b border-gray-200">
|
|
<div className="relative">
|
|
<i className="ri-search-line absolute left-2 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input
|
|
ref={searchInputRef}
|
|
type="text"
|
|
className="w-full pl-8 pr-8 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary,#00684a)] focus:border-[var(--color-primary,#00684a)]"
|
|
placeholder={searchPlaceholder}
|
|
value={searchKeyword}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
{searchKeyword && (
|
|
<button
|
|
type="button"
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setSearchKeyword('');
|
|
setSearchResults([]);
|
|
}}
|
|
>
|
|
<i className="ri-close-line"></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 内容区域 */}
|
|
<div className="p-2 overflow-y-auto" style={{ maxHeight: `${maxHeight}px` }}>
|
|
{searchKeyword && searchable ? (
|
|
renderSearchResults()
|
|
) : localOptions.length > 0 ? (
|
|
localOptions.map(option => renderNode(option))
|
|
) : (
|
|
<div className="text-center text-gray-400 py-4 text-sm">
|
|
暂无数据
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MultiCascader;
|