530 lines
18 KiB
TypeScript
530 lines
18 KiB
TypeScript
import { useDeferredValue, useEffect, useMemo, useState } from 'react';
|
||
import { Button, DatePicker, Empty, Input, Modal, Spin, Table, Tree, message } from 'antd';
|
||
import type { ColumnsType } from 'antd/es/table';
|
||
import { UserOutlined } from '@ant-design/icons';
|
||
import zhCN from 'antd/es/date-picker/locale/zh_CN';
|
||
import dayjs from 'dayjs';
|
||
import type { Dayjs } from 'dayjs';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import PageBackButton from '@/components/PageBackButton';
|
||
import { getProjectExecutionInfo } from '@/api/projectExecution';
|
||
import { deptTreeSelect, getUserProfile, listUser } from '@/api/system/user';
|
||
import './user-project.css';
|
||
|
||
const { RangePicker } = DatePicker;
|
||
|
||
interface RoleRow {
|
||
roleName?: string;
|
||
}
|
||
|
||
interface UserRow {
|
||
_rowKey?: string;
|
||
userId?: string | number;
|
||
nickName?: string;
|
||
userName?: string;
|
||
phonenumber?: string;
|
||
dept?: { deptName?: string };
|
||
roles?: RoleRow[];
|
||
[key: string]: unknown;
|
||
}
|
||
|
||
interface ProjectExecutionRow {
|
||
projectId?: string | number;
|
||
projectName?: string;
|
||
allWorkTime?: string | number;
|
||
detailList?: Array<string | number | null | undefined>;
|
||
[key: string]: unknown;
|
||
}
|
||
|
||
|
||
interface DeptTreeNode {
|
||
key: string;
|
||
title: string;
|
||
rawId: string | number;
|
||
children?: DeptTreeNode[];
|
||
}
|
||
|
||
const isObject = (value: unknown): value is Record<string, unknown> =>
|
||
typeof value === 'object' && value !== null;
|
||
|
||
const normalizeResponseData = (response: unknown) =>
|
||
isObject(response) && response.data !== undefined ? response.data : response;
|
||
|
||
const toNumber = (value: unknown, fallback = 0) => {
|
||
const num = Number(value);
|
||
return Number.isFinite(num) ? num : fallback;
|
||
};
|
||
|
||
const getDefaultRange = (): [Dayjs, Dayjs] => [dayjs().startOf('month'), dayjs().endOf('month')];
|
||
|
||
const normalizeExecutionRows = (payload: unknown): ProjectExecutionRow[] => {
|
||
const data = normalizeResponseData(payload);
|
||
const rows = Array.isArray(data)
|
||
? data
|
||
: isObject(data) && Array.isArray(data.rows)
|
||
? data.rows
|
||
: [];
|
||
return rows.filter(isObject) as ProjectExecutionRow[];
|
||
};
|
||
|
||
const normalizeUserRows = (payload: unknown): { rows: UserRow[]; total: number } => {
|
||
const data = normalizeResponseData(payload);
|
||
const rows = Array.isArray(data)
|
||
? data
|
||
: isObject(data) && Array.isArray(data.rows)
|
||
? data.rows
|
||
: [];
|
||
const total = isObject(data) ? toNumber(data.total, rows.length) : rows.length;
|
||
return {
|
||
rows: rows.filter(isObject).map((row, index) => ({
|
||
...(row as UserRow),
|
||
_rowKey: String((row as UserRow).userId ?? (row as UserRow).userName ?? `user_${index}`),
|
||
})) as UserRow[],
|
||
total,
|
||
};
|
||
};
|
||
|
||
const normalizeDeptTreeNodes = (payload: unknown): DeptTreeNode[] => {
|
||
const data = normalizeResponseData(payload);
|
||
if (!Array.isArray(data)) {
|
||
return [];
|
||
}
|
||
|
||
const mapNodes = (nodes: unknown[]): DeptTreeNode[] =>
|
||
nodes.flatMap((node, index) => {
|
||
if (!isObject(node)) {
|
||
return [];
|
||
}
|
||
const rawId = node.id ?? node.deptId ?? node.value ?? `dept_${index}`;
|
||
const normalizedId = typeof rawId === 'string' || typeof rawId === 'number' ? rawId : String(rawId);
|
||
return [
|
||
{
|
||
key: String(normalizedId),
|
||
rawId: normalizedId,
|
||
title: String(node.label ?? node.title ?? node.deptName ?? normalizedId),
|
||
children: Array.isArray(node.children) ? mapNodes(node.children) : undefined,
|
||
},
|
||
];
|
||
});
|
||
|
||
return mapNodes(data);
|
||
};
|
||
|
||
const collectDeptKeys = (nodes: DeptTreeNode[]): string[] =>
|
||
nodes.flatMap((node) => [node.key, ...(Array.isArray(node.children) ? collectDeptKeys(node.children) : [])]);
|
||
|
||
const getUserDisplayName = (user?: UserRow | null) => String(user?.nickName ?? user?.userName ?? '-');
|
||
|
||
const matchesUserKeyword = (user: UserRow, keyword: string) => {
|
||
const normalizedKeyword = keyword.trim();
|
||
if (!normalizedKeyword) {
|
||
return true;
|
||
}
|
||
return [user.nickName, user.userName, user.phonenumber].some((field) =>
|
||
String(field ?? '')
|
||
.toLowerCase()
|
||
.includes(normalizedKeyword.toLowerCase()),
|
||
);
|
||
};
|
||
|
||
const UserProjectPage = () => {
|
||
const navigate = useNavigate();
|
||
const [loading, setLoading] = useState(false);
|
||
const [userLoading, setUserLoading] = useState(false);
|
||
const [deptLoading, setDeptLoading] = useState(false);
|
||
const [userModalOpen, setUserModalOpen] = useState(false);
|
||
const [userKeyword, setUserKeyword] = useState('');
|
||
const [dateRange, setDateRange] = useState<[Dayjs, Dayjs]>(getDefaultRange());
|
||
const [selectedUser, setSelectedUser] = useState<UserRow | null>(null);
|
||
const [selectedUserId, setSelectedUserId] = useState<string | number>('');
|
||
const [selectedUserName, setSelectedUserName] = useState('');
|
||
const [pendingUserId, setPendingUserId] = useState<string | number>('');
|
||
const [executionData, setExecutionData] = useState<ProjectExecutionRow[]>([]);
|
||
const [userListData, setUserListData] = useState<UserRow[]>([]);
|
||
const [deptTree, setDeptTree] = useState<DeptTreeNode[]>([]);
|
||
const [expandedDeptKeys, setExpandedDeptKeys] = useState<string[]>([]);
|
||
const [selectedDeptId, setSelectedDeptId] = useState<string>('');
|
||
const [userPageNum, setUserPageNum] = useState(1);
|
||
const [userPageSize, setUserPageSize] = useState(10);
|
||
const [userTotal, setUserTotal] = useState(0);
|
||
const deferredUserKeyword = useDeferredValue(userKeyword);
|
||
|
||
useEffect(() => {
|
||
const fetchCurrentUser = async () => {
|
||
try {
|
||
const response = await getUserProfile();
|
||
const payload = normalizeResponseData(response);
|
||
const user = isObject(payload) && isObject(payload.user) ? payload.user : payload;
|
||
if (!isObject(user)) {
|
||
return;
|
||
}
|
||
const nextUser: UserRow = {
|
||
userId: user.userId as string | number | undefined,
|
||
nickName: user.nickName as string | undefined,
|
||
userName: user.userName as string | undefined,
|
||
};
|
||
setSelectedUser(nextUser);
|
||
setSelectedUserId(nextUser.userId ?? '');
|
||
setPendingUserId(nextUser.userId ?? '');
|
||
setSelectedUserName(getUserDisplayName(nextUser));
|
||
} catch (error) {
|
||
console.error('Failed to fetch current user profile for user project page:', error);
|
||
message.error('获取当前用户失败');
|
||
}
|
||
};
|
||
void fetchCurrentUser();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const fetchUserProject = async () => {
|
||
if (!selectedUserId || !dateRange[0] || !dateRange[1]) {
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
try {
|
||
const response = await getProjectExecutionInfo({
|
||
startDate: `${dateRange[0].format('YYYY-MM-DD')} 00:00:00`,
|
||
endDate: `${dateRange[1].format('YYYY-MM-DD')} 00:00:00`,
|
||
userId: selectedUserId,
|
||
});
|
||
setExecutionData(normalizeExecutionRows(response));
|
||
} catch (error) {
|
||
console.error('Failed to fetch user project table:', error);
|
||
message.error('获取人员项目表失败');
|
||
setExecutionData([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
void fetchUserProject();
|
||
}, [dateRange, selectedUserId]);
|
||
|
||
useEffect(() => {
|
||
if (!userModalOpen) {
|
||
return;
|
||
}
|
||
const fetchDeptTree = async () => {
|
||
setDeptLoading(true);
|
||
try {
|
||
const response = await deptTreeSelect();
|
||
const treeNodes = normalizeDeptTreeNodes(response);
|
||
setDeptTree(treeNodes);
|
||
setExpandedDeptKeys(collectDeptKeys(treeNodes));
|
||
} catch (error) {
|
||
console.error('Failed to fetch department tree for user project page:', error);
|
||
setDeptTree([]);
|
||
setExpandedDeptKeys([]);
|
||
} finally {
|
||
setDeptLoading(false);
|
||
}
|
||
};
|
||
void fetchDeptTree();
|
||
}, [userModalOpen]);
|
||
|
||
useEffect(() => {
|
||
if (!userModalOpen) {
|
||
return;
|
||
}
|
||
const fetchUserList = async () => {
|
||
setUserLoading(true);
|
||
try {
|
||
const normalizedKeyword = deferredUserKeyword.trim();
|
||
const response = await listUser({
|
||
pageNum: userPageNum,
|
||
pageSize: normalizedKeyword ? 1000 : userPageSize,
|
||
deptId: selectedDeptId || undefined,
|
||
});
|
||
const { rows, total } = normalizeUserRows(response);
|
||
const filteredRows = normalizedKeyword ? rows.filter((item) => matchesUserKeyword(item, normalizedKeyword)) : rows;
|
||
setUserListData(filteredRows);
|
||
setUserTotal(normalizedKeyword ? filteredRows.length : total);
|
||
} catch (error) {
|
||
console.error('Failed to fetch user list for user project page:', error);
|
||
message.error('获取用户列表失败');
|
||
setUserListData([]);
|
||
setUserTotal(0);
|
||
} finally {
|
||
setUserLoading(false);
|
||
}
|
||
};
|
||
void fetchUserList();
|
||
}, [deferredUserKeyword, selectedDeptId, userModalOpen, userPageNum, userPageSize]);
|
||
|
||
const pendingUser = useMemo(
|
||
() => userListData.find((item) => String(item.userId ?? '') === String(pendingUserId ?? '')) ?? selectedUser,
|
||
[pendingUserId, selectedUser, userListData],
|
||
);
|
||
|
||
|
||
const openUserModal = () => {
|
||
setPendingUserId(selectedUserId);
|
||
setUserPageNum(1);
|
||
setSelectedDeptId('');
|
||
setUserModalOpen(true);
|
||
};
|
||
|
||
const applySelectedUser = (user?: UserRow | null) => {
|
||
setSelectedUser(user ?? null);
|
||
setSelectedUserId(user?.userId ?? '');
|
||
setSelectedUserName(getUserDisplayName(user));
|
||
setPendingUserId(user?.userId ?? '');
|
||
setUserModalOpen(false);
|
||
};
|
||
|
||
const dynamicColumns = useMemo<ColumnsType<ProjectExecutionRow>>(() => {
|
||
const columns: ColumnsType<ProjectExecutionRow> = [
|
||
{
|
||
title: '项目',
|
||
dataIndex: 'projectName',
|
||
key: 'projectName',
|
||
fixed: 'left',
|
||
width: 180,
|
||
render: (value: unknown, row) => (
|
||
<Button
|
||
type="link"
|
||
className="user-project-link"
|
||
onClick={() => navigate(`/project/detail?id=${String(row.projectId ?? '')}`)}
|
||
>
|
||
{String(value ?? '-')}
|
||
</Button>
|
||
),
|
||
},
|
||
{
|
||
title: '统计工时\n（天）',
|
||
dataIndex: 'allWorkTime',
|
||
key: 'allWorkTime',
|
||
fixed: 'left',
|
||
width: 140,
|
||
render: (value: unknown) => toNumber(value, 0),
|
||
},
|
||
];
|
||
|
||
let cursor = dateRange[0].startOf('day');
|
||
let index = 0;
|
||
while (!cursor.isAfter(dateRange[1], 'day')) {
|
||
const columnIndex = index;
|
||
const key = cursor.format('M/D');
|
||
const weekLabel = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][cursor.day()];
|
||
columns.push({
|
||
title: <span className="user-project-header">{`${weekLabel}\n${key}`}</span>,
|
||
key: `detail-${key}`,
|
||
dataIndex: 'detailList',
|
||
width: 100,
|
||
render: (value: unknown) => {
|
||
const detailList = Array.isArray(value) ? value : [];
|
||
return detailList[columnIndex] ?? '';
|
||
},
|
||
});
|
||
cursor = cursor.add(1, 'day');
|
||
index += 1;
|
||
}
|
||
|
||
return columns;
|
||
}, [dateRange, navigate]);
|
||
|
||
const summaryValues = useMemo(() => {
|
||
const dayCount = dateRange[1].startOf('day').diff(dateRange[0].startOf('day'), 'day') + 1;
|
||
const totalWorkTime = executionData.reduce((sum, row) => sum + toNumber(row.allWorkTime, 0), 0);
|
||
const dayTotals = Array.from({ length: Math.max(dayCount, 0) }, (_item, index) =>
|
||
Number(
|
||
executionData
|
||
.reduce((sum, row) => sum + toNumber(Array.isArray(row.detailList) ? row.detailList[index] : 0, 0), 0)
|
||
.toFixed(2),
|
||
),
|
||
);
|
||
return { totalWorkTime: Number(totalWorkTime.toFixed(2)), dayTotals };
|
||
}, [dateRange, executionData]);
|
||
|
||
return (
|
||
<div className="user-project-page">
|
||
<div className="user-project-back-row">
|
||
<PageBackButton text="返回看板统计" fallbackPath="/projectBank/projectProgress" />
|
||
</div>
|
||
|
||
<div className="user-project-shell">
|
||
<div className="user-project-header-row">
|
||
<h2 className="user-project-title">人员项目表</h2>
|
||
<div className="user-project-toolbar">
|
||
<div className="user-project-user-box">
|
||
<span>选择人员</span>
|
||
<Input
|
||
value={selectedUserName}
|
||
placeholder="请选择用户"
|
||
readOnly
|
||
suffix={<UserOutlined onClick={openUserModal} />}
|
||
onClick={openUserModal}
|
||
/>
|
||
</div>
|
||
<div className="user-project-range-box">
|
||
<span>统计时间：</span>
|
||
<RangePicker
|
||
value={dateRange}
|
||
onChange={(values) => {
|
||
if (!values || values.length !== 2 || !values[0] || !values[1]) {
|
||
return;
|
||
}
|
||
setDateRange([values[0], values[1]]);
|
||
}}
|
||
allowClear={false}
|
||
locale={zhCN}
|
||
format="YYYY-MM-DD"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Spin spinning={loading}>
|
||
<Table<ProjectExecutionRow>
|
||
className="user-project-table"
|
||
rowKey={(row) => String(row.projectId ?? row.projectName ?? '')}
|
||
columns={dynamicColumns}
|
||
dataSource={executionData}
|
||
pagination={false}
|
||
locale={{ emptyText: <Empty description="暂无项目数据" /> }}
|
||
scroll={{ x: Math.max(dynamicColumns.length * 100, 960), y: 600 }}
|
||
summary={() => (
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={0}>合计工时（天）</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={1}>{summaryValues.totalWorkTime}</Table.Summary.Cell>
|
||
{summaryValues.dayTotals.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 2} key={`sum-${index}`}>
|
||
{item}
|
||
</Table.Summary.Cell>
|
||
))}
|
||
</Table.Summary.Row>
|
||
)}
|
||
/>
|
||
</Spin>
|
||
</div>
|
||
|
||
<Modal
|
||
title="选择人员"
|
||
open={userModalOpen}
|
||
onCancel={() => setUserModalOpen(false)}
|
||
width={980}
|
||
wrapClassName="user-select-dialog"
|
||
destroyOnHidden
|
||
footer={[
|
||
<Button key="cancel" onClick={() => setUserModalOpen(false)}>
|
||
取消
|
||
</Button>,
|
||
<Button
|
||
key="ok"
|
||
type="primary"
|
||
disabled={!pendingUserId}
|
||
onClick={() => {
|
||
const hit =
|
||
userListData.find((item) => String(item.userId ?? '') === String(pendingUserId ?? '')) ?? pendingUser;
|
||
applySelectedUser(hit);
|
||
}}
|
||
>
|
||
确认
|
||
</Button>,
|
||
]}
|
||
>
|
||
<div className="user-select-modal user-select-modal-layout">
|
||
<div className="user-select-dept-panel">
|
||
<Spin spinning={deptLoading}>
|
||
<Tree
|
||
blockNode
|
||
showLine
|
||
className="user-select-dept-tree"
|
||
expandedKeys={expandedDeptKeys}
|
||
selectedKeys={selectedDeptId ? [selectedDeptId] : []}
|
||
treeData={deptTree}
|
||
onExpand={(keys) => setExpandedDeptKeys(keys as string[])}
|
||
onSelect={(keys) => {
|
||
setSelectedDeptId(String(keys[0] ?? ''));
|
||
setUserPageNum(1);
|
||
}}
|
||
/>
|
||
</Spin>
|
||
</div>
|
||
<div className="user-select-table-panel">
|
||
<div className="user-select-query-bar">
|
||
<Input
|
||
placeholder="请输入姓名或手机号"
|
||
value={userKeyword}
|
||
onChange={(event) => {
|
||
const nextValue = event.target.value;
|
||
setUserPageNum(1);
|
||
setUserKeyword(nextValue);
|
||
}}
|
||
allowClear
|
||
size="large"
|
||
/>
|
||
</div>
|
||
<Table<UserRow>
|
||
rowKey={(row) => String(row._rowKey ?? row.userId ?? row.userName ?? '')}
|
||
loading={userLoading}
|
||
dataSource={userListData}
|
||
size="middle"
|
||
scroll={{ y: 420 }}
|
||
rowClassName={(record) =>
|
||
String(record.userId ?? '') === String(pendingUserId ?? '') ? 'user-select-row is-active' : 'user-select-row'
|
||
}
|
||
onRow={(record) => ({
|
||
onClick: () => {
|
||
setPendingUserId(record.userId ?? '');
|
||
},
|
||
onDoubleClick: () => {
|
||
applySelectedUser(record);
|
||
},
|
||
})}
|
||
locale={{ emptyText: <Empty description="暂无人员数据" /> }}
|
||
pagination={{
|
||
current: userPageNum,
|
||
pageSize: userPageSize,
|
||
total: userTotal,
|
||
showSizeChanger: true,
|
||
showTotal: (total) => `共 ${total} 条`,
|
||
onChange: (page, pageSize) => {
|
||
setUserPageNum(page);
|
||
setUserPageSize(pageSize);
|
||
},
|
||
}}
|
||
columns={[
|
||
{
|
||
title: '序号',
|
||
key: 'index',
|
||
width: 90,
|
||
render: (_value, _row, index) => (userPageNum - 1) * userPageSize + index + 1,
|
||
},
|
||
{
|
||
title: '姓名',
|
||
dataIndex: 'nickName',
|
||
key: 'nickName',
|
||
width: 180,
|
||
render: (_value, row) => (
|
||
<div className="user-select-name-cell">
|
||
<strong>{getUserDisplayName(row)}</strong>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
title: '部门',
|
||
dataIndex: ['dept', 'deptName'],
|
||
key: 'deptName',
|
||
width: 220,
|
||
render: (value: unknown) => String(value ?? '-'),
|
||
},
|
||
{
|
||
title: '角色',
|
||
dataIndex: 'roles',
|
||
key: 'roles',
|
||
render: (value: unknown) =>
|
||
Array.isArray(value) && value.length
|
||
? value.map((item) => String((item as RoleRow)?.roleName ?? '')).filter(Boolean).join('、')
|
||
: '-',
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UserProjectPage;
|