linfeng
/
staff_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lin

This commit is contained in:
linfeng 2025-03-19 21:33:26 +08:00
parent 57e438efd1
commit e186c77f61
3 changed files with 210 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/package.json
View File

@ -15,7 +15,7 @@
"@ag-grid-community/react": "~32.3.2",
"@ag-grid-enterprise/clipboard": "~32.3.2",
"@ag-grid-enterprise/column-tool-panel": "~32.3.2",
"@ag-grid-enterprise/core": "~32.3.2",
"@ag-grid-enterprise/core": "~32.3.3",
"@ag-grid-enterprise/filter-tool-panel": "~32.3.2",
"@ag-grid-enterprise/master-detail": "~32.3.2",
"@ag-grid-enterprise/menu": "~32.3.2",
@ -43,9 +43,10 @@
"@trpc/server": "11.0.0-rc.456",
"@types/xlsx": "^0.0.36",
"@xyflow/react": "^12.3.6",
"ag-grid-community": "~32.3.2",
"ag-grid-community": "~32.0.0",
"ag-grid-enterprise": "~32.3.2",
"ag-grid-react": "~32.3.2",
"ag-grid.i18n.zh-CN.json": "link:ag-grid-community/dist/locale/ag-grid.i18n.zh-CN.json",
"antd": "^5.23.0",
"axios": "^1.7.2",
"browser-image-compression": "^2.0.2",

261
apps/web/src/app/main/staffpage/stafftable/page.tsx
View File

@ -1,14 +1,15 @@
'use client';
import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ColDef, ColGroupDef } from 'ag-grid-community';
import { api } from '@nice/client';
import { useState } from 'react';
import { AgGridReact } from '@ag-grid-community/react';
import { ColDef, ColGroupDef } from '@ag-grid-community/core';
import { SetFilterModule } from '@ag-grid-enterprise/set-filter';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { areaOptions } from '@web/src/app/main/staffinformation/area-options';
import type { CascaderProps } from 'antd/es/cascader';
import { SetFilterModule } from '@ag-grid-enterprise/set-filter';
// import { zhCN } from 'ag-grid-community/dist/ag-grid-community';
import { utils, writeFile } from 'xlsx';
import { Modal, Input, Button } from 'antd';
import { api } from '@nice/client';
// 修改函数类型定义
@ -28,81 +29,88 @@ function getAreaName(codes: string[], level?: number): string {
return level ? result[level - 1] || '' : result.join(' / ') || codes.join('/');
}
// 自定义下拉过滤器组件
// interface ICustomFilterProps {
// column: {
// getColId: () => string;
// };
// api: {
// forEachNode: (callback: (node: any) => void) => void;
// };
// filterChangedCallback?: () => void; // 设置为可选属性
// }
// const CustomDropdownFilter = forwardRef((props: ICustomFilterProps, ref) => {
// const [selectedValue, setSelectedValue] = useState<string>('');
// const [uniqueValues, setUniqueValues] = useState<string[]>([]);
// useEffect(() => {
// const colId = props.column.getColId();
// const values = new Set<string>();
// props.api.forEachNode(node => {
// const value = node.data[colId];
// if (value != null) {
// values.add(String(value));
// }
// });
// setUniqueValues(Array.from(values).sort());
// }, [props.api, props.column]);
// useImperativeHandle(ref, () => ({
// isFilterActive: () => !!selectedValue,
// doesFilterPass: (params: any) => {
// const value = String(params.data[props.column.getColId()] || '');
// // 精确匹配选中的值
// return value === selectedValue;
// },
// getModel: () => {
// return selectedValue ? { value: selectedValue } : null;
// },
// setModel: (model: any) => {
// setSelectedValue(model?.value || '');
// }
// }));
// const handleChange = (value: string) => {
// setSelectedValue(value);
// // 立即触发过滤器更新
// if (props.filterChangedCallback) {
// props.filterChangedCallback();
// }
// };
// return (
// <div style={{ padding: '4px', width: '100%' }}>
// <Select
// value={selectedValue}
// onChange={handleChange}
// style={{ width: '100%' }}
// size="small"
// placeholder="选择筛选..."
// allowClear
// options={uniqueValues.map(value => ({
// value: value,
// label: value
// }))}
// onClear={() => handleChange('')}
// />
// </div>
// );
// });
export default function StaffTable() {
const { data: staffs, isLoading } = api.staff.findMany.useQuery({
where: { deletedAt: null },
include: { // 添加关联查询
department: true
}
});
const [gridApi, setGridApi] = useState<any>(null); // 添加gridApi状态
const [confirmVisible, setConfirmVisible] = useState(false);
const [fileNameVisible, setFileNameVisible] = useState(false);
const [fileName, setFileName] = useState('');
const [defaultFileName] = useState(`员工数据_${new Date().toISOString().slice(0, 10)}`);
const handleExport = async () => {
setConfirmVisible(true);
};
const handleConfirm = async () => {
setConfirmVisible(false);
setFileNameVisible(true);
};
// 添加导出处理函数
const handleFileNameConfirm = () => {
setFileNameVisible(false)
if (!gridApi) return;
const finalFileName = fileName || defaultFileName;
const flattenColumns = (cols: any[]): any[] => {
return cols.flatMap(col =>
col.children ? flattenColumns(col.children) : col
);
};
const allColDefs = flattenColumns(gridApi.getColumnDefs());
const rowData = gridApi.getRenderedNodes().map((node: any) => {
const row: Record<string, any> = {};
allColDefs.forEach((colDef: any) => {
const field = colDef.field;
if (field) {
const value = node.data[field];
const formatter = colDef.valueFormatter;
const renderer = colDef.cellRenderer;
let renderedValue = value;
if (formatter) {
renderedValue = formatter({ value });
} else if (renderer) {
const renderResult = renderer({ value });
// 改进渲染结果处理
if (typeof renderResult === 'string') {
renderedValue = renderResult;
} else if (renderResult?.props?.children) { // 处理React元素文本内容
renderedValue = String(renderResult.props.children);
} else if (renderResult?.props?.dangerouslySetInnerHTML?.__html) {
const html = renderResult.props.dangerouslySetInnerHTML.__html;
renderedValue = html.replace(/<br\s*\/?>/gi, '\n');
}
}
// 增强布尔值处理逻辑
if (typeof renderedValue === 'boolean' ||
(typeof renderedValue === 'string' && ['true','false'].includes(renderedValue.toLowerCase()))) {
const boolValue = typeof renderedValue === 'boolean' ? renderedValue : renderedValue.toLowerCase() === 'true';
renderedValue = boolValue ? '是' : '否';
}
row[colDef.headerName] = renderedValue;
}
});
return row;
});
// 创建工作表并导出
const ws = utils.json_to_sheet(rowData);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, "Sheet1");
// 修改导出文件名生成方式
writeFile(wb, `${fileName || '未命名数据'}.xlsx`);
};
const columnDefs: (ColDef | ColGroupDef)[] = [
{
@ -128,8 +136,10 @@ export default function StaffTable() {
{ field: 'officerId', headerName: '警号', minWidth: 120 },
{ field: 'phoneNumber', headerName: '手机号', minWidth: 130 },
{ field: 'age', headerName: '年龄', minWidth: 80 },
{ field: 'sex', headerName: '性别', minWidth: 80,
cellRenderer: (params: any) => params.value ? '男' : '女' },
{
field: 'sex', headerName: '性别', minWidth: 80,
cellRenderer: (params: any) => params.value ? '男' : '女'
},
{ field: 'bloodType', headerName: '血型', minWidth: 80 },
{
field: 'birthplace',
@ -150,27 +160,39 @@ export default function StaffTable() {
{
headerName: '职务信息',
children: [
{field: 'deptId', headerName: '所属部门', minWidth: 200 },
{ field: 'department.name', headerName: '所属部门', minWidth: 200 },
{ field: 'rank', headerName: '衔职级别', minWidth: 120 },
{ field: 'rankDate', headerName: '衔职时间', minWidth: 120,
valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : '' },
{
field: 'rankDate', headerName: '衔职时间', minWidth: 120,
valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : ''
},
{ field: 'proxyPosition', headerName: '代理职务', minWidth: 120 }
]
},
{
headerName: '入职信息',
children: [
{ field: 'hireDate', headerName: '入职时间', minWidth: 120,
valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : '' },
{ field: 'seniority', headerName: '工龄认定时间', minWidth: 140,
valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : '' },
{
field: 'hireDate', headerName: '入职时间', minWidth: 120,
valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : ''
},
{
field: 'seniority', headerName: '工龄认定时间', minWidth: 140,
valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : ''
},
{ field: 'sourceType', headerName: '来源类型', minWidth: 120 },
{ field: 'isReentry', headerName: '是否二次入职', minWidth: 120,
cellRenderer: (params: any) => params.value ? '是' : '否' },
{ field: 'isExtended', headerName: '是否延期服役', minWidth: 120,
cellRenderer: (params: any) => params.value ? '是' : '否' },
{ field: 'currentPositionDate', headerName: '现岗位开始时间', minWidth: 140,
valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : '' }
{
field: 'isReentry', headerName: '是否二次入职', minWidth: 120,
cellRenderer: (params: any) => params.value ? '是' : '否'
},
{
field: 'isExtended', headerName: '是否延期服役', minWidth: 120,
cellRenderer: (params: any) => params.value ? '是' : '否'
},
{
field: 'currentPositionDate', headerName: '现岗位开始时间', minWidth: 140,
valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : ''
}
]
},
{
@ -178,8 +200,10 @@ export default function StaffTable() {
children: [
{ field: 'education', headerName: '学历', minWidth: 100 },
{ field: 'educationType', headerName: '学历形式', minWidth: 120 },
{ field: 'isGraduated', headerName: '是否毕业', minWidth: 100,
cellRenderer: (params: any) => params.value ? '是' : '否' },
{
field: 'isGraduated', headerName: '是否毕业', minWidth: 100,
cellRenderer: (params: any) => params.value ? '是' : '否'
},
{ field: 'major', headerName: '专业', minWidth: 150 },
{ field: 'foreignLang', headerName: '外语能力', minWidth: 120 }
]
@ -190,8 +214,10 @@ export default function StaffTable() {
{ field: 'trainType', headerName: '培训类型', minWidth: 120 },
{ field: 'trainInstitute', headerName: '培训机构', minWidth: 150 },
{ field: 'trainMajor', headerName: '培训专业', minWidth: 150 },
{ field: 'hasTrain', headerName: '是否参加培训', minWidth: 120,
cellRenderer: (params: any) => params.value ? '是' : '否' }
{
field: 'hasTrain', headerName: '是否参加培训', minWidth: 120,
cellRenderer: (params: any) => params.value ? '是' : '否'
}
]
},
{
@ -199,8 +225,10 @@ export default function StaffTable() {
children: [
{ field: 'certRank', headerName: '鉴定等级', minWidth: 120 },
{ field: 'certWork', headerName: '鉴定工种', minWidth: 120 },
{ field: 'hasCert', headerName: '是否参加鉴定', minWidth: 120,
cellRenderer: (params: any) => params.value ? '是' : '否' }
{
field: 'hasCert', headerName: '是否参加鉴定', minWidth: 120,
cellRenderer: (params: any) => params.value ? '是' : '否'
}
]
},
{
@ -263,7 +291,6 @@ export default function StaffTable() {
const defaultColDef: ColDef = {
sortable: true,
filter: 'agSetColumnFilter',
// floatingFilter: true,
resizable: false,
flex: 1,
minWidth: 150,
@ -273,7 +300,6 @@ export default function StaffTable() {
whiteSpace: 'normal',
overflowWrap: 'break-word'
},
tooltipValueGetter: (params: any) => params.value,
wrapText: true,
autoHeight: true
};
@ -283,10 +309,43 @@ export default function StaffTable() {
style={{
width: '100%',
borderRadius: '12px',
overflow: 'hidden',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
}}
>
{!isLoading && (
<Button
onClick={handleExport}
className="mb-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
导出Excel
</Button>
)}
<Modal
title="确认导出"
open={confirmVisible}
onOk={handleConfirm}
onCancel={() => setConfirmVisible(false)}
okText="确认"
cancelText="取消"
>
<p>确定要导出当前筛选数据吗？</p>
</Modal>
<Modal
title="输入文件名"
open={fileNameVisible}
onOk={handleFileNameConfirm}
onCancel={() => setFileNameVisible(false)}
okText="导出"
cancelText="取消"
>
<Input
placeholder={`默认名称: ${defaultFileName}`}
value={fileName}
onChange={(e) => setFileName(e.target.value)}
/>
</Modal>
{isLoading ? (
<div className="h-full flex items-center justify-center">
<div className="text-gray-600 text-xl">加载中...</div>
@ -294,6 +353,7 @@ export default function StaffTable() {
) : (
<AgGridReact
modules={[SetFilterModule]}
onGridReady={(params) => setGridApi(params.api)} // 添加gridApi回调
rowData={staffs}
columnDefs={columnDefs}
defaultColDef={{
@ -302,7 +362,6 @@ export default function StaffTable() {
textCustomComparator: (_, value) => value !== '',
}
}}
// localeText={zhCN} // 注入中文语言包
enableCellTextSelection={true}
pagination={true}
paginationAutoPageSize={true}

21
pnpm-lock.yaml
View File

@ -240,7 +240,7 @@ importers:
specifier: ~32.3.2
version: 32.3.3
'@ag-grid-enterprise/core':
specifier: ~32.3.2
specifier: ~32.3.3
version: 32.3.3
'@ag-grid-enterprise/filter-tool-panel':
specifier: ~32.3.2
@ -324,14 +324,17 @@ importers:
specifier: ^12.3.6
version: 12.3.6(@types/react@18.2.38)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
ag-grid-community:
specifier: ~32.3.2
version: 32.3.3
specifier: ~32.0.0
version: 32.0.0
ag-grid-enterprise:
specifier: ~32.3.2
version: 32.3.3
ag-grid-react:
specifier: ~32.3.2
version: 32.3.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
ag-grid.i18n.zh-CN.json:
specifier: link:ag-grid-community/dist/locale/ag-grid.i18n.zh-CN.json
version: link:ag-grid-community/dist/locale/ag-grid.i18n.zh-CN.json
antd:
specifier: ^5.23.0
version: 5.23.0(date-fns@2.30.0)(luxon@3.5.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@ -3512,9 +3515,15 @@ packages:
ag-charts-locale@10.3.3:
resolution: {integrity: sha512-+ZAQYhkFHbdEwLYP1jZeF44X/8wwSH6SNiTykEIIk6EUuP6mm45X2YfQ0bvyekTkEJlLvFspvRQ+C6mspwLx4w==}
ag-charts-types@10.0.0:
resolution: {integrity: sha512-jjiwrzydERou4yp9WHiJeVK237B7BUP3/4j6tdycyHag266YVWa/BMNtTOThWJKGku+m+TC2qfaujLYixgcbrQ==}
ag-charts-types@10.3.3:
resolution: {integrity: sha512-8rmyquaTkwfP4Lzei/W/cbkq9wwEl8+grIo3z97mtxrMIXh9sHJK1oJipd/u08MmBZrca5Jjtn5F1+UNPu/4fQ==}
ag-grid-community@32.0.0:
resolution: {integrity: sha512-H0I19/+SXTP/uMeG58nlm/Fj1rMKlX6mnbMW+MrfJ+e0/aguOtrOG+UGOn8f3CTmSwjOIQquCmu3gK8hBMqgtQ==}
ag-grid-community@32.3.3:
resolution: {integrity: sha512-KhSJ3B6mwRFA4cLjNjOZkDndJBh8o83794ZHl4Q7xP9MJf43oCN9qoZ8pyBanohgpVfLcP0scYYCr9xIlzjdiA==}
@ -11245,8 +11254,14 @@ snapshots:
ag-charts-locale@10.3.3: {}
ag-charts-types@10.0.0: {}
ag-charts-types@10.3.3: {}
ag-grid-community@32.0.0:
dependencies:
ag-charts-types: 10.0.0
ag-grid-community@32.3.3:
dependencies:
ag-charts-types: 10.3.3