origin/apps/web/src/app/main/Test/test.text

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<Staff | null>(null);
    const [form] = Form.useForm();
    const pageSize = 10;

    // 修改查询逻辑
    const { data, isLoading, refetch } = api.staff.findManyWithPagination.useQuery<PaginatedResponse>({
        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 (
        <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">用户名</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">
                        {(data?.items || []).map((staff) => (
                            <tr key={staff.id} className="hover:bg-gray-50">
                                <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
                    current={currentPage}
                    total={data?.total || 0}
                    pageSize={pageSize}
                    onChange={handlePageChange}
                    showTotal={(total) => `共 ${total} 条记录`}
                    showSizeChanger={false}
                    showQuickJumper
                />
            </div>
        </div>
    );
};

export default TestPage;