lin

apps/web/package.json

@@ -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",

apps/web/src/app/main/staffpage/stafftable/page.tsx

@@ -1,14 +1,15 @@
 'use client';
-import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
+import { useState } from 'react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridReact } from '@ag-grid-community/react';
-import { ColDef, ColGroupDef } from 'ag-grid-community';
+import { ColDef, ColGroupDef } from '@ag-grid-community/core';
-import { api } from '@nice/client';
+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 { utils, writeFile } from 'xlsx';
-// import { zhCN } from 'ag-grid-community/dist/ag-grid-community';
+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: 'hireDate', headerName: '入职时间', minWidth: 120,
-                { field: 'seniority', headerName: '工龄认定时间', minWidth: 140,
+                    valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : ''
-                  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: 'isReentry', headerName: '是否二次入职', minWidth: 120,
-                { field: 'isExtended', headerName: '是否延期服役', minWidth: 120,
+                    cellRenderer: (params: any) => params.value ? '是' : '否'
-                  cellRenderer: (params: any) => params.value ? '是' : '否' },
+                },
-                { field: 'currentPositionDate', headerName: '现岗位开始时间', minWidth: 140,
+                {
-                  valueFormatter: (params: any) => params.value ? new Date(params.value).toLocaleDateString() : '' }
+                    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}

pnpm-lock.yaml

@@ -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
+        specifier: ~32.0.0
-        version: 32.3.3
+        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