提交一下 换git仓库了
This commit is contained in:
linxd
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { Input, Button, Badge, Avatar, Space, Tabs, Checkbox, Row, Col, Card, Empty, Divider, Alert } from 'antd';
|
||||
import { SearchOutlined, UserOutlined, TeamOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
||||
import './EvaluateTaskPersonnelSelector.less';
|
||||
@ -75,33 +75,19 @@ const EvaluateTaskPersonnelSelector: React.FC<EvaluateTaskPersonnelSelectorProps
|
||||
* 部门数据列表
|
||||
* 实际项目中可通过API获取
|
||||
*/
|
||||
const departments: Department[] = [
|
||||
const departments: Department[] = useMemo(() => [
|
||||
{ id: '1', name: '采购部' },
|
||||
{ id: '2', name: '技术部' },
|
||||
{ id: '3', name: '质量部' },
|
||||
{ id: '4', name: '生产部' },
|
||||
{ id: '5', name: '财务部' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 初始化人员数据和已选状态
|
||||
*/
|
||||
useEffect(() => {
|
||||
// 加载人员数据（模拟API请求）
|
||||
fetchPersonnelData();
|
||||
|
||||
// 设置已选人员
|
||||
if (selectedPersonnel && selectedPersonnel.length > 0) {
|
||||
const selectedIds = selectedPersonnel.map(item => item.id);
|
||||
setSelectedKeys(selectedIds);
|
||||
}
|
||||
}, [selectedPersonnel]);
|
||||
], []);
|
||||
|
||||
/**
|
||||
* 模拟获取人员数据
|
||||
* 实际项目中替换为API调用
|
||||
*/
|
||||
const fetchPersonnelData = () => {
|
||||
const fetchPersonnelData = useCallback(() => {
|
||||
// 模拟API调用获取评价人员
|
||||
const mockPersonnel: PersonnelItem[] = [
|
||||
{ id: '1', name: '张三', department: '采购部', position: '采购经理' },
|
||||
@ -119,46 +105,59 @@ const EvaluateTaskPersonnelSelector: React.FC<EvaluateTaskPersonnelSelectorProps
|
||||
];
|
||||
|
||||
setPersonnel(mockPersonnel);
|
||||
};
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 初始化人员数据和已选状态
|
||||
*/
|
||||
useEffect(() => {
|
||||
// 加载人员数据（模拟API请求）
|
||||
fetchPersonnelData();
|
||||
|
||||
// 设置已选人员
|
||||
if (selectedPersonnel && selectedPersonnel.length > 0) {
|
||||
const selectedIds = selectedPersonnel.map(item => item.id);
|
||||
setSelectedKeys(selectedIds);
|
||||
}
|
||||
}, [fetchPersonnelData, selectedPersonnel]);
|
||||
|
||||
/**
|
||||
* 处理搜索
|
||||
* @param {string} value - 搜索关键词
|
||||
*/
|
||||
const handleSearch = (value: string) => {
|
||||
const handleSearch = useCallback((value: string) => {
|
||||
setKeyword(value);
|
||||
};
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 处理Tab切换
|
||||
* @param {string} key - 选中的Tab键值
|
||||
*/
|
||||
const handleTabChange = (key: string) => {
|
||||
const handleTabChange = useCallback((key: string) => {
|
||||
setActiveTab(key);
|
||||
};
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 处理单个人员选择
|
||||
* @param {string} personnelId - 人员ID
|
||||
* @param {boolean} checked - 是否选中
|
||||
*/
|
||||
const handleSelect = (personnelId: string, checked: boolean) => {
|
||||
let newSelectedKeys = [...selectedKeys];
|
||||
if (checked) {
|
||||
newSelectedKeys.push(personnelId);
|
||||
} else {
|
||||
newSelectedKeys = newSelectedKeys.filter(id => id !== personnelId);
|
||||
}
|
||||
|
||||
setSelectedKeys(newSelectedKeys);
|
||||
};
|
||||
const handleSelect = useCallback((personnelId: string, checked: boolean) => {
|
||||
setSelectedKeys(prevKeys => {
|
||||
if (checked) {
|
||||
return [...prevKeys, personnelId];
|
||||
} else {
|
||||
return prevKeys.filter(id => id !== personnelId);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 处理部门人员全选
|
||||
* @param {string} deptId - 部门ID
|
||||
* @param {boolean} checked - 是否全选
|
||||
*/
|
||||
const handleSelectAll = (deptId: string, checked: boolean) => {
|
||||
const handleSelectAll = useCallback((deptId: string, checked: boolean) => {
|
||||
const deptName = departments.find(d => d.id === deptId)?.name || '';
|
||||
const deptPersonnel = personnel.filter(p =>
|
||||
p.department === deptName &&
|
||||
@ -166,38 +165,64 @@ const EvaluateTaskPersonnelSelector: React.FC<EvaluateTaskPersonnelSelectorProps
|
||||
);
|
||||
const deptPersonnelIds = deptPersonnel.map(p => p.id);
|
||||
|
||||
let newSelectedKeys = [...selectedKeys];
|
||||
|
||||
if (checked) {
|
||||
// 添加该部门所有人员
|
||||
deptPersonnelIds.forEach(id => {
|
||||
if (!newSelectedKeys.includes(id)) {
|
||||
newSelectedKeys.push(id);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 移除该部门所有人员
|
||||
newSelectedKeys = newSelectedKeys.filter(id => !deptPersonnelIds.includes(id));
|
||||
}
|
||||
|
||||
setSelectedKeys(newSelectedKeys);
|
||||
};
|
||||
setSelectedKeys(prevKeys => {
|
||||
if (checked) {
|
||||
// 添加该部门所有人员
|
||||
const newKeys = new Set([...prevKeys, ...deptPersonnelIds]);
|
||||
return Array.from(newKeys);
|
||||
} else {
|
||||
// 移除该部门所有人员
|
||||
return prevKeys.filter(id => !deptPersonnelIds.includes(id));
|
||||
}
|
||||
});
|
||||
}, [departments, keyword, personnel]);
|
||||
|
||||
/**
|
||||
* 确认选择
|
||||
* 将选中的人员ID列表转换为人员对象列表
|
||||
*/
|
||||
const handleConfirm = () => {
|
||||
const handleConfirm = useCallback(() => {
|
||||
const selectedItems = personnel.filter(item => selectedKeys.includes(item.id));
|
||||
onSelect(selectedItems);
|
||||
};
|
||||
}, [onSelect, personnel, selectedKeys]);
|
||||
|
||||
/**
|
||||
* 计算各部门已选人数
|
||||
* @param {string} deptId - 部门ID
|
||||
* @returns {number} - 已选人数
|
||||
*/
|
||||
const getSelectedCountByDept = useCallback((deptId: string) => {
|
||||
const deptName = departments.find(d => d.id === deptId)?.name || '';
|
||||
const deptPersonnel = personnel.filter(p => p.department === deptName);
|
||||
const selectedCount = deptPersonnel.filter(p => selectedKeys.includes(p.id)).length;
|
||||
return selectedCount;
|
||||
}, [departments, personnel, selectedKeys]);
|
||||
|
||||
/**
|
||||
* 渲染Tab标签
|
||||
* @param {Department} dept - 部门信息
|
||||
* @returns {React.ReactNode} - 渲染结果
|
||||
*/
|
||||
const renderTabTitle = useCallback((dept: Department) => {
|
||||
const selectedCount = getSelectedCountByDept(dept.id);
|
||||
return (
|
||||
<Badge
|
||||
count={selectedCount > 0 ? selectedCount : 0}
|
||||
size="small"
|
||||
offset={[5, -3]}
|
||||
style={{ backgroundColor: selectedCount > 0 ? '#1890ff' : '#d9d9d9' }}
|
||||
>
|
||||
<span>{dept.name}</span>
|
||||
</Badge>
|
||||
);
|
||||
}, [getSelectedCountByDept]);
|
||||
|
||||
/**
|
||||
* 渲染部门下的人员列表
|
||||
* @param {string} deptId - 部门ID
|
||||
* @returns {React.ReactNode} - 渲染结果
|
||||
*/
|
||||
const renderDepartmentPersonnel = (deptId: string) => {
|
||||
const renderDepartmentPersonnel = useCallback((deptId: string) => {
|
||||
// 获取部门名称
|
||||
const deptName = departments.find(d => d.id === deptId)?.name || '';
|
||||
|
||||
@ -273,38 +298,19 @@ const EvaluateTaskPersonnelSelector: React.FC<EvaluateTaskPersonnelSelectorProps
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}, [departments, handleSelect, handleSelectAll, keyword, personnel, selectedKeys]);
|
||||
|
||||
/**
|
||||
* 计算各部门已选人数
|
||||
* @param {string} deptId - 部门ID
|
||||
* @returns {number} - 已选人数
|
||||
*/
|
||||
const getSelectedCountByDept = (deptId: string) => {
|
||||
const deptName = departments.find(d => d.id === deptId)?.name || '';
|
||||
const deptPersonnel = personnel.filter(p => p.department === deptName);
|
||||
const selectedCount = deptPersonnel.filter(p => selectedKeys.includes(p.id)).length;
|
||||
return selectedCount;
|
||||
};
|
||||
|
||||
/**
|
||||
* 渲染Tab标签
|
||||
* @param {Department} dept - 部门信息
|
||||
* @returns {React.ReactNode} - 渲染结果
|
||||
*/
|
||||
const renderTabTitle = (dept: Department) => {
|
||||
const selectedCount = getSelectedCountByDept(dept.id);
|
||||
return (
|
||||
<Badge
|
||||
count={selectedCount > 0 ? selectedCount : 0}
|
||||
size="small"
|
||||
offset={[5, -3]}
|
||||
style={{ backgroundColor: selectedCount > 0 ? '#1890ff' : '#d9d9d9' }}
|
||||
// 使用useMemo优化部门Tab的渲染
|
||||
const departmentTabs = useMemo(() => {
|
||||
return departments.map(dept => (
|
||||
<TabPane
|
||||
tab={renderTabTitle(dept)}
|
||||
key={dept.id}
|
||||
>
|
||||
<span>{dept.name}</span>
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
{renderDepartmentPersonnel(dept.id)}
|
||||
</TabPane>
|
||||
));
|
||||
}, [departments, renderDepartmentPersonnel, renderTabTitle]);
|
||||
|
||||
return (
|
||||
<div className="evaluate-task-personnel-selector">
|
||||
@ -346,14 +352,7 @@ const EvaluateTaskPersonnelSelector: React.FC<EvaluateTaskPersonnelSelectorProps
|
||||
onChange={handleTabChange}
|
||||
className="department-tabs"
|
||||
>
|
||||
{departments.map(dept => (
|
||||
<TabPane
|
||||
tab={renderTabTitle(dept)}
|
||||
key={dept.id}
|
||||
>
|
||||
{renderDepartmentPersonnel(dept.id)}
|
||||
</TabPane>
|
||||
))}
|
||||
{departmentTabs}
|
||||
</Tabs>
|
||||
|
||||
{/* 底部确认按钮区域 */}
|
||||
|
||||
Reference in New Issue
Block a user