add
This commit is contained in:
parent
678ad87c2f
commit
944fc48568
|
|
@ -1,18 +1,13 @@
|
|||
import { api } from '@nice/client';
|
||||
import { Pagination } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// 定义 TrainSituation 接口
|
||||
interface TrainSituation {
|
||||
id: string;
|
||||
staffId: string;
|
||||
score: number;
|
||||
}
|
||||
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[];
|
||||
}
|
||||
|
|
@ -24,64 +19,244 @@ interface PaginatedResponse {
|
|||
|
||||
const TestPage: React.FC = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [editingStaff, setEditingStaff] = useState<Staff | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
const pageSize = 10;
|
||||
|
||||
// 使用 findManyWithPagination 替换原来的两个查询
|
||||
const { data, isLoading } = api.staff.findManyWithPagination.useQuery<PaginatedResponse>({
|
||||
// 添加 useRef 处理查询
|
||||
const searchRef = useRef(false);
|
||||
|
||||
// 优化查询逻辑
|
||||
const { data, isLoading, refetch } = api.staff.findManyWithPagination.useQuery<PaginatedResponse>({
|
||||
page: currentPage,
|
||||
pageSize: pageSize,
|
||||
where: { deletedAt: null },
|
||||
where: {
|
||||
deletedAt: null,
|
||||
OR: searchText ? [
|
||||
{ username: { contains: searchText } },
|
||||
{ showname: { contains: searchText } }
|
||||
] : undefined
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
showname: true,
|
||||
absent: true,
|
||||
}
|
||||
}, {
|
||||
enabled: searchRef.current, // 控制查询启用
|
||||
refetchOnWindowFocus: false,
|
||||
keepPreviousData: true, // 保持之前的数据直到新数据加载完成
|
||||
});
|
||||
console.log(data);
|
||||
|
||||
// data 中包含了分页数据和总记录数
|
||||
const staffs = (data?.items || []) as Staff[];
|
||||
const totalCount = data?.total || 0;
|
||||
// 删除方法
|
||||
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);
|
||||
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
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold mb-4 text-center">培训情况记录</h1>
|
||||
|
||||
{/* 搜索和添加按钮 */}
|
||||
<div className="mb-4 flex justify-between">
|
||||
<Space>
|
||||
<Input
|
||||
placeholder="搜索员工姓名或用户名"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
onPressEnter={handleSearch}
|
||||
prefix={<SearchOutlined />}
|
||||
/>
|
||||
<Button type="primary" onClick={handleSearch}>搜索</Button>
|
||||
</Space>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
|
||||
添加员工
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 修改表格，添加操作列 */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white shadow-md rounded-lg">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b">
|
||||
<th className="px-6 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider">培训记录ID</th>
|
||||
<th className="px-6 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider">员工ID</th>
|
||||
<th className="px-6 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider">在位</th>
|
||||
<th className="px-6 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider">用户名</th>
|
||||
<th className="px-6 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider">名称</th>
|
||||
<th className="px-6 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider">是否在位</th>
|
||||
<th className="px-6 py-3 text-center text-xs font-medium text-gray-600 uppercase tracking-wider">
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{staffs.map((staff) => (
|
||||
{(data?.items || []).map((staff) => (
|
||||
<tr key={staff.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-center">
|
||||
{staff.id}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-center">
|
||||
{staff.username}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-center">
|
||||
{staff.showname}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-center">
|
||||
{staff.absent ? '在位' : '不在位'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-center">
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleEdit(staff)}
|
||||
size="small"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => handleDelete(staff.id)}
|
||||
size="small"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 编辑/添加模态框 */}
|
||||
<Modal
|
||||
title={editingStaff ? "编辑员工" : "添加员工"}
|
||||
open={isModalVisible}
|
||||
onOk={handleModalOk}
|
||||
onCancel={() => setIsModalVisible(false)}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="用户名"
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="showname"
|
||||
label="名称"
|
||||
rules={[{ required: true, message: '请输入名称' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="absent"
|
||||
label="是否在位"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch
|
||||
checkedChildren="在位"
|
||||
unCheckedChildren="不在位"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<div className="mt-4 flex justify-center">
|
||||
<Pagination
|
||||
<Pagination
|
||||
current={currentPage}
|
||||
total={totalCount}
|
||||
total={data?.total || 0}
|
||||
pageSize={pageSize}
|
||||
onChange={handlePageChange}
|
||||
showTotal={(total) => `共 ${total} 条记录`}
|
||||
|
|
|
|||
Loading…
Reference in New Issue