|
|
@@ -1,4 +1,4 @@
|
|
|
-import React, { useState } from 'react';
|
|
|
+import React, { useState, useEffect } from 'react';
|
|
|
import { Table, Button, Space, Input, Modal, Form, Upload, Select, DatePicker } from 'antd';
|
|
|
import { App } from 'antd';
|
|
|
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined } from '@ant-design/icons';
|
|
|
@@ -15,16 +15,21 @@ type CreateFileRequest = InferRequestType<typeof fileClient.$post>['json'];
|
|
|
type UpdateFileRequest = InferRequestType<typeof fileClient[':id']['$put']>['json'];
|
|
|
|
|
|
const Files: React.FC = () => {
|
|
|
- const {message} = App.useApp();
|
|
|
+ const { message } = App.useApp();
|
|
|
const [form] = Form.useForm();
|
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
|
const [editingKey, setEditingKey] = useState<string | null>(null);
|
|
|
const [searchText, setSearchText] = useState('');
|
|
|
const [clients, setClients] = useState<ClientItem[]>([]);
|
|
|
+ const [pagination, setPagination] = useState({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ });
|
|
|
const queryClient = useQueryClient();
|
|
|
|
|
|
// 获取客户列表
|
|
|
- const { data: clientsData } = useQuery({
|
|
|
+ const { data: clientsData, error: clientsError } = useQuery({
|
|
|
queryKey: ['clients'],
|
|
|
queryFn: async () => {
|
|
|
const response = await clientClient.$get({ query: { page: 1, pageSize: 1000 } });
|
|
|
@@ -32,10 +37,19 @@ const Files: React.FC = () => {
|
|
|
return await response.json() as InferResponseType<typeof clientClient.$get, 200>;
|
|
|
},
|
|
|
staleTime: 5 * 60 * 1000, // 5分钟缓存
|
|
|
- onSuccess: (result) => {
|
|
|
- setClients(result.data);
|
|
|
- },
|
|
|
});
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (clientsData) {
|
|
|
+ setClients(clientsData.data);
|
|
|
+ }
|
|
|
+ }, [clientsData]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (clientsError) {
|
|
|
+ message.error(`获取客户列表失败: ${clientsError instanceof Error ? clientsError.message : '未知错误'}`);
|
|
|
+ }
|
|
|
+ }, [clientsError]);
|
|
|
|
|
|
// 获取文件列表数据
|
|
|
const fetchFiles = async ({ page, pageSize }: { page: number; pageSize: number }): Promise<FileListResponse> => {
|
|
|
@@ -44,23 +58,26 @@ const Files: React.FC = () => {
|
|
|
return await response.json() as FileListResponse;
|
|
|
};
|
|
|
|
|
|
- const [pagination, setPagination] = useState({
|
|
|
- current: 1,
|
|
|
- pageSize: 10,
|
|
|
- total: 0,
|
|
|
- });
|
|
|
-
|
|
|
- const { data, isLoading: loading } = useQuery({
|
|
|
+ const { data, isLoading: loading, error: filesError } = useQuery({
|
|
|
queryKey: ['files', pagination.current, pagination.pageSize, searchText],
|
|
|
queryFn: () => fetchFiles({ page: pagination.current, pageSize: pagination.pageSize }),
|
|
|
keepPreviousData: true, // 保留前一页数据直到新数据加载完成
|
|
|
- onSuccess: (result) => {
|
|
|
- setPagination({
|
|
|
- ...pagination,
|
|
|
- total: result.pagination.total,
|
|
|
- });
|
|
|
- },
|
|
|
});
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (data) {
|
|
|
+ setPagination(prev => ({
|
|
|
+ ...prev,
|
|
|
+ total: data.pagination.total,
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ }, [data]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (filesError) {
|
|
|
+ message.error(`获取文件列表失败: ${filesError instanceof Error ? filesError.message : '未知错误'}`);
|
|
|
+ }
|
|
|
+ }, [filesError]);
|
|
|
|
|
|
// 搜索
|
|
|
const handleSearch = () => {
|