diff --git a/apps/web/src/app/main/Test/Page.tsx b/apps/web/src/app/main/Test/Page.tsx index 8b26404..a5fd766 100755 --- a/apps/web/src/app/main/Test/Page.tsx +++ b/apps/web/src/app/main/Test/Page.tsx @@ -1,34 +1,21 @@ import { api } from '@nice/client'; -import { Button, Input, Pagination, Space, Modal, Form, message, Switch } from 'antd'; -import { SearchOutlined, EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'; -import React, { useState, useRef, useEffect } from 'react'; - -// 定义 Staff 接口 -interface Staff { - id: string; - username: string; - showname: string; - absent: boolean; - // trainSituations: TrainSituation[]; -} - -interface PaginatedResponse { - items: Staff[]; - total: number; -} +import { message, Form, Modal } from 'antd'; +import React, { useState, useEffect } from 'react'; +import { SearchBar } from './components/SearchBar'; +import { StaffTable } from './components/StaffTable'; +import { StaffModal } from './components/StaffModal'; +import { Staff, PaginatedResponse } from './components/types'; const TestPage: React.FC = () => { - const [currentPage, setCurrentPage] = useState(1); + // 状态定义 const [searchText, setSearchText] = useState(''); + const [currentPage, setCurrentPage] = useState(1); const [isModalVisible, setIsModalVisible] = useState(false); const [editingStaff, setEditingStaff] = useState(null); const [form] = Form.useForm(); const pageSize = 10; - // 添加 useRef 处理查询 - const searchRef = useRef(false); - - // 优化查询逻辑 + // API 调用 const { data, isLoading, refetch } = api.staff.findManyWithPagination.useQuery({ page: currentPage, pageSize: pageSize, @@ -45,16 +32,12 @@ const TestPage: React.FC = () => { showname: true, absent: true, } - }, { - enabled: searchRef.current, // 控制查询启用 - refetchOnWindowFocus: false, - keepPreviousData: true, // 保持之前的数据直到新数据加载完成 }); // 删除方法 const deleteMutation = api.staff.softDeleteByIds.useMutation({ onSuccess: () => { -message.success('删除成功'); + message.success('删除成功'); refetch(); }, onError: (error) => { @@ -80,190 +63,95 @@ message.success('删除成功'); } }); + // 处理函数 const handleSearch = () => { setCurrentPage(1); - searchRef.current = true; refetch(); }; - // 修改分页处理 - const handlePageChange = (page: number) => { - setCurrentPage(page); - searchRef.current = true; - refetch(); - }; - - // 添加数据监听 - useEffect(() => { - if (data && searchRef.current) { - searchRef.current = false; - } - }, [data]); - - // 处理删除的函数 - const handleDelete = async (id: string) => { - Modal.confirm({ - title: '确认删除', - content: '确定要删除这条记录吗？', - onOk: async () => { - try { - await deleteMutation.mutateAsync({ - ids: [id], - data: {} // 添加空的 data 对象 - }); - } catch (error) { - console.error('删除失败:', error); - } - } - }); - }; - - const handleEdit = (staff: Staff) => { - setEditingStaff(staff); - form.setFieldsValue(staff); - setIsModalVisible(true); - }; - const handleAdd = () => { setEditingStaff(null); form.resetFields(); setIsModalVisible(true); }; - const handleModalOk = () => { - form.validateFields().then(values => { - if (editingStaff) { - updateMutation.mutate({ - where: { id: editingStaff.id }, - data: values - }); - } else { - createMutation.mutate({ - data: values - }); + const handleEdit = (staff: Staff) => { + setEditingStaff(staff); + form.setFieldsValue(staff); + setIsModalVisible(true); + }; + + const handleDelete = (id: string) => { + Modal.confirm({ + title: '确认删除', + content: '确定要删除这条记录吗？', + onOk: async () => { + try { + await deleteMutation.mutateAsync({ ids: [id] }); + } catch (error) { + console.error('删除失败:', error); + } } }); }; + const handlePageChange = (page: number) => { + setCurrentPage(page); + refetch(); // 确保切换页面时重新获取数据 + }; + + const handleModalOk = async () => { + try { + const values = await form.validateFields(); + if (editingStaff) { + await updateMutation.mutateAsync({ + where: { id: editingStaff.id }, + data: values + }); + } else { + await createMutation.mutateAsync({ + data: values + }); + } + } catch (error) { + message.error('操作失败：' + error.message); + } + }; + + // 初始加载 + useEffect(() => { + refetch(); + }, []); + return (

培训情况记录

- - {/* 搜索和添加按钮 */} -
- - setSearchText(e.target.value)} - onPressEnter={handleSearch} - prefix={} - /> - - - -
- {/* 修改表格，添加操作列 */} -
- - - - - - - - - - - {(data?.items || []).map((staff) => ( - - - - - - - ))} - -
用户名名称是否在位 - 操作 -
- {staff.username} - - {staff.showname} - - {staff.absent ? '在位' : '不在位'} - - - - - -
-
+ - {/* 编辑/添加模态框 */} - + + setIsModalVisible(false)} - > -
- - - - - - - - - -
- - -
- `共 ${total} 条记录`} - showSizeChanger={false} - showQuickJumper - /> -
+ />
); }; diff --git a/apps/web/src/app/main/Test/components/SearchBar.tsx b/apps/web/src/app/main/Test/components/SearchBar.tsx new file mode 100644 index 0000000..5ec8502 --- /dev/null +++ b/apps/web/src/app/main/Test/components/SearchBar.tsx @@ -0,0 +1,35 @@ +import { Button, Input, Space } from 'antd'; +import { SearchOutlined, PlusOutlined } from '@ant-design/icons'; +import React from 'react'; + +interface SearchBarProps { + searchText: string; + onSearchTextChange: (text: string) => void; + onSearch: () => void; + onAdd: () => void; +} + +export const SearchBar: React.FC = ({ + searchText, + onSearchTextChange, + onSearch, + onAdd, +}) => { + return ( +
+ + onSearchTextChange(e.target.value)} + onPressEnter={onSearch} + prefix={} + /> + + + +
+ ); +}; \ No newline at end of file diff --git a/apps/web/src/app/main/Test/components/StaffModal.tsx b/apps/web/src/app/main/Test/components/StaffModal.tsx new file mode 100644 index 0000000..dc03512 --- /dev/null +++ b/apps/web/src/app/main/Test/components/StaffModal.tsx @@ -0,0 +1,55 @@ +import { Modal, Form, Input, Switch } from 'antd'; +import React from 'react'; +import { Staff } from './types'; + +interface StaffModalProps { + visible: boolean; + editingStaff: Staff | null; + form: any; + onOk: () => void; + onCancel: () => void; +} + +export const StaffModal: React.FC = ({ + visible, + editingStaff, + form, + onOk, + onCancel, +}) => { + return ( + +
+ + + + + + + + + +
+ + ); +}; \ No newline at end of file diff --git a/apps/web/src/app/main/Test/components/StaffTable.tsx b/apps/web/src/app/main/Test/components/StaffTable.tsx new file mode 100644 index 0000000..b8e95ea --- /dev/null +++ b/apps/web/src/app/main/Test/components/StaffTable.tsx @@ -0,0 +1,131 @@ +import { Button, Space, Table, Tag, Input, Pagination, message } from 'antd'; +import { EditOutlined, DeleteOutlined } from '@ant-design/icons'; +import React, { useState } from 'react'; +import { Staff } from './types'; + +interface StaffTableProps { + data: Staff[]; + total: number; + currentPage: number; + pageSize: number; + isLoading?: boolean; + onPageChange: (page: number) => void; + onEdit: (staff: Staff) => void; + onDelete: (id: string) => void; +} + +export const StaffTable: React.FC = ({ + data, + total, + currentPage, + pageSize, + isLoading = false, + onPageChange, + onEdit, + onDelete, +}) => { + const [jumpPage, setJumpPage] = useState(''); + + const handleJumpPage = () => { + const page = parseInt(jumpPage); + if (!isNaN(page) && page > 0 && page <= Math.ceil(total / pageSize)) { + onPageChange(page); + setJumpPage(''); + } else { + message.error('请输入有效的页码'); + } + }; + + const columns = [ + { + title: '用户名', + dataIndex: 'username', + key: 'username', + }, + { + title: '名称', + dataIndex: 'showname', + key: 'showname', + }, + { + title: '是否在位', + dataIndex: 'absent', + key: 'absent', + render: (absent: boolean) => ( + + {absent ? '在位' : '不在位'} + + ), + }, + { + title: '操作', + key: 'action', + render: (_: any, record: Staff) => ( + + + + + ), + }, + ]; + + return ( +
+ +
+
+ ( + + 共 {total} 条记录 + + )} + showSizeChanger={false} + /> +
{/* 分隔线 */} +
+ setJumpPage(e.target.value)} + onPressEnter={handleJumpPage} + placeholder="页码" + className="text-center" + /> + +
+
+
+
+ ); +}; \ No newline at end of file diff --git a/apps/web/src/app/main/Test/components/types.ts b/apps/web/src/app/main/Test/components/types.ts new file mode 100644 index 0000000..35a12f4 --- /dev/null +++ b/apps/web/src/app/main/Test/components/types.ts @@ -0,0 +1,11 @@ +export interface Staff { + id: string; + username: string; + showname: string; + absent: boolean; +} + +export interface PaginatedResponse { + items: Staff[]; + total: number; +} \ No newline at end of file diff --git a/apps/web/src/app/main/Test/test.text b/apps/web/src/app/main/Test/test.text new file mode 100644 index 0000000..9fc0f42 --- /dev/null +++ b/apps/web/src/app/main/Test/test.text @@ -0,0 +1,265 @@ +import { api } from '@nice/client'; +import { Button, Input, Pagination, Space, Modal, Form, message, Switch } from 'antd'; +import { SearchOutlined, EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'; +import React, { useState, useRef, useEffect } from 'react'; + +// 定义 Staff 接口 +interface Staff { + id: string; + username: string; + showname: string; + absent: boolean; + // trainSituations: TrainSituation[]; +} + +interface PaginatedResponse { + items: Staff[]; + total: number; +} + +const TestPage: React.FC = () => { + const [currentPage, setCurrentPage] = useState(1); + const [searchText, setSearchText] = useState(''); + const [isModalVisible, setIsModalVisible] = useState(false); + const [editingStaff, setEditingStaff] = useState(null); + const [form] = Form.useForm(); + const pageSize = 10; + + // 修改查询逻辑 + const { data, isLoading, refetch } = api.staff.findManyWithPagination.useQuery({ + page: currentPage, + pageSize: pageSize, + where: { + deletedAt: null, + OR: searchText ? [ + { username: { contains: searchText } }, + { showname: { contains: searchText } } + ] : undefined + }, + select: { + id: true, + username: true, + showname: true, + absent: true, + } + }, { + // 移除 enabled 控制 + refetchOnWindowFocus: false, + keepPreviousData: true, + }); + + // 删除方法 + const deleteMutation = api.staff.softDeleteByIds.useMutation({ + onSuccess: () => { +message.success('删除成功'); + refetch(); + }, + onError: (error) => { + message.error('删除失败：' + error.message); + } + }); + + // 更新方法 + const updateMutation = api.staff.update.useMutation({ + onSuccess: () => { + message.success('更新成功'); + setIsModalVisible(false); + refetch(); + } + }); + + // 创建方法 + const createMutation = api.staff.create.useMutation({ + onSuccess: () => { + message.success('创建成功'); + setIsModalVisible(false); + refetch(); + } + }); + + // 修改搜索处理函数 + const handleSearch = () => { + setCurrentPage(1); + refetch(); + }; + + // 修改分页处理 + const handlePageChange = (page: number) => { + setCurrentPage(page); + refetch(); + }; + + useEffect(() => { + // 组件首次加载时执行查询 + refetch(); + }, []); + + // 处理删除的函数 + const handleDelete = async (id: string) => { + Modal.confirm({ + title: '确认删除', + content: '确定要删除这条记录吗？', + onOk: async () => { + try { + await deleteMutation.mutateAsync({ + ids: [id], + data: {} // 添加空的 data 对象 + }); + } catch (error) { + console.error('删除失败:', error); + } + } + }); + }; + + const handleEdit = (staff: Staff) => { + setEditingStaff(staff); + form.setFieldsValue(staff); + setIsModalVisible(true); + }; + + const handleAdd = () => { + setEditingStaff(null); + form.resetFields(); + setIsModalVisible(true); + }; + + const handleModalOk = () => { + form.validateFields().then(values => { + if (editingStaff) { + updateMutation.mutate({ + where: { id: editingStaff.id }, + data: values + }); + } else { + createMutation.mutate({ + data: values + }); + } + }); + }; + + return ( +
+

培训情况记录

+ + {/* 搜索和添加按钮 */} +
+ + setSearchText(e.target.value)} + onPressEnter={handleSearch} + prefix={} + /> + + + +
+ + {/* 修改表格，添加操作列 */} +
+
+ + + + + + + + + + {(data?.items || []).map((staff) => ( + + + + + + + ))} + +
用户名名称是否在位 + 操作 +
+ {staff.username} + + {staff.showname} + + {staff.absent ? '在位' : '不在位'} + + + + + +
+
+ + {/* 编辑/添加模态框 */} + setIsModalVisible(false)} + > +
+ + + + + + + + + +
+ + +
+ `共 ${total} 条记录`} + showSizeChanger={false} + showQuickJumper + /> +
+ + ); +}; + +export default TestPage; \ No newline at end of file diff --git a/config/nginx/conf.d/web.conf b/config/nginx/conf.d/web.conf index 2186260..71637b2 100755 --- a/config/nginx/conf.d/web.conf +++ b/config/nginx/conf.d/web.conf @@ -2,7 +2,7 @@ server { # 监听80端口 listen 80; # 服务器域名/IP地址，使用环境变量 - server_name 192.168.217.194; + server_name 192.168.239.194; # 基础性能优化配置 # 启用tcp_nopush以优化数据发送 @@ -100,7 +100,7 @@ server { # 仅供内部使用 internal; # 代理到认证服务 - proxy_pass http://192.168.217.194:3001/auth/file; + proxy_pass http://192.168.239.194:3001/auth/file; # 请求优化：不传递请求体 proxy_pass_request_body off;