From 76eeeb4b8e619b964aaa9f2c539bb09cedaa9953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=9A=E8=BE=B0=E5=85=88=E7=94=9F?= Date: Sun, 1 Dec 2024 13:01:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E6=AD=A3=E5=B8=B8=E5=90=AF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useTableData.ts | 24 ++- frontend/src/layouts/BasicLayout.tsx | 17 +-- frontend/src/pages/System/Role/index.tsx | 159 +++++++++++--------- frontend/src/pages/System/Role/service.ts | 53 ++----- frontend/src/pages/System/RoleTag/index.tsx | 124 --------------- frontend/src/utils/request.ts | 64 ++++---- 6 files changed, 145 insertions(+), 296 deletions(-) delete mode 100644 frontend/src/pages/System/RoleTag/index.tsx diff --git a/frontend/src/hooks/useTableData.ts b/frontend/src/hooks/useTableData.ts index 692f3cb8..f0037af6 100644 --- a/frontend/src/hooks/useTableData.ts +++ b/frontend/src/hooks/useTableData.ts @@ -1,5 +1,5 @@ import {useState, useCallback, useEffect} from 'react'; -import {Modal} from 'antd'; +import {message, Modal} from 'antd'; import type {TableState} from '@/types/table'; import {createInitialState} from '@/utils/table'; import request from '@/utils/request'; @@ -38,8 +38,7 @@ export function useTableData({ ...params, pageNum: state.pagination.current, pageSize: state.pagination.pageSize, - sortOrder: params?.sortOrder === 'ascend' ? 'asc' : - params?.sortOrder === 'descend' ? 'desc' : undefined + sortOrder: params?.sortOrder === 'ascend' ? 'asc' : params?.sortOrder === 'descend' ? 'desc' : undefined } }); @@ -60,10 +59,9 @@ export function useTableData({ // CRUD操作 const handleCreate = useCallback(async (data: Partial) => { try { - await request.post(service.baseUrl, data, { - successMessage: '创建成功' - }); - loadData(); + await request.post(service.baseUrl, data); + message.success("创建成功") + await loadData(); return true; } catch (error) { return false; @@ -72,10 +70,9 @@ export function useTableData({ const handleUpdate = useCallback(async (id: number, data: Partial) => { try { - await request.put(`${service.baseUrl}/${id}`, data, { - successMessage: '更新成功' - }); - loadData(); + await request.put(`${service.baseUrl}/${id}`, data); + message.success("更新成功") + await loadData(); return true; } catch (error) { return false; @@ -92,9 +89,8 @@ export function useTableData({ cancelText: '取消', onOk: async () => { try { - await request.delete(`${service.baseUrl}/${id}`, { - successMessage: '删除成功' - }); + await request.delete(`${service.baseUrl}/${id}`); + message.success("删除成功") loadData(); resolve(true); } catch (error) { diff --git a/frontend/src/layouts/BasicLayout.tsx b/frontend/src/layouts/BasicLayout.tsx index f620da9c..d16f6bd7 100644 --- a/frontend/src/layouts/BasicLayout.tsx +++ b/frontend/src/layouts/BasicLayout.tsx @@ -51,19 +51,10 @@ const BasicLayout: React.FC = () => { const initializeUserData = async () => { // try { setLoading(true); - const menuData = await getCurrentUserMenus().then((response) => { - console.log(response) - dispatch(setMenus(response)); - setLoading(false); - }) - // } catch (error) { - // console.log(error); - // message.error('初始化用户数据失败'); - // dispatch(logout()); - // navigate('/login', {replace: true}); - // } finally { - // setLoading(false); - // } + const menuData = await getCurrentUserMenus(); + console.log(menuData) + dispatch(setMenus(menuData)); + setLoading(false); }; if (!userInfo) { diff --git a/frontend/src/pages/System/Role/index.tsx b/frontend/src/pages/System/Role/index.tsx index b9a6042a..353b8e40 100644 --- a/frontend/src/pages/System/Role/index.tsx +++ b/frontend/src/pages/System/Role/index.tsx @@ -1,13 +1,12 @@ -import React, { useState, useEffect } from 'react'; -import { Table, Button, Modal, Form, Input, Space, message, InputNumber, Switch, Select, Tag, ColorPicker } from 'antd'; -import { PlusOutlined, EditOutlined, DeleteOutlined, TagOutlined, SettingOutlined } from '@ant-design/icons'; -import type { RoleResponse, RoleTagResponse } from './types'; -import { useTableData } from '@/hooks/useTableData'; -import type { FixedType } from 'rc-table/lib/interface'; -import type { TablePaginationConfig } from 'antd/es/table'; -import type { FilterValue, SorterResult } from 'antd/es/table/interface'; -import { assignTags, getAllTags } from './service'; -import request from '@/utils/request'; +import React, {useState, useEffect} from 'react'; +import {Table, Button, Modal, Form, Input, Space, message, InputNumber, Switch, Select, Tag, ColorPicker} from 'antd'; +import {PlusOutlined, EditOutlined, DeleteOutlined, TagOutlined, SettingOutlined} from '@ant-design/icons'; +import type {RoleResponse, RoleTagResponse} from './types'; +import {useTableData} from '@/hooks/useTableData'; +import type {FixedType} from 'rc-table/lib/interface'; +import type {TablePaginationConfig} from 'antd/es/table'; +import type {FilterValue, SorterResult} from 'antd/es/table/interface'; +import {assignTags, createRoleTag, deleteRoleTag, getAllTags, updateRoleTag} from './service'; const RolePage: React.FC = () => { const { @@ -42,9 +41,15 @@ const RolePage: React.FC = () => { const [tagForm] = Form.useForm(); useEffect(() => { - getAllTags().then(response => { - setAllTags(response); - }); + const fetchTags = async () => { // 定义一个异步函数 + try { + const tags = await getAllTags(); // 在这里使用 await + setAllTags(tags); + } catch (error) { + console.error("获取标签失败", error); // 处理错误 + } + }; + fetchTags(); // 调用异步函数 }, []); const handleAdd = () => { @@ -110,23 +115,18 @@ const RolePage: React.FC = () => { const handleTagManageSubmit = async () => { try { const values = await tagForm.validateFields(); - const tagService = { - baseUrl: '/api/v1/role-tag' - }; - - const formData = { - ...values, - color: values.color.toHexString?.() || values.color - }; - if (values.id) { - await request.put(`${tagService.baseUrl}/${values.id}`, formData, { - successMessage: '更新标签成功' + await updateRoleTag(values.id, { + ...values, + color: values.color.toHexString?.() || values.color }); + message.success("更新标签成功") } else { - await request.post(tagService.baseUrl, formData, { - successMessage: '创建标签成功' + await createRoleTag({ + ...values, + color: values.color.toHexString?.() || values.color }); + message.success("标签添加成功") } setTagManageVisible(false); const tags = await getAllTags(); @@ -137,16 +137,25 @@ const RolePage: React.FC = () => { }; const handleTagDelete = async (id: number) => { - try { - await request.delete(`/api/v1/role-tag/${id}`, { - successMessage: '删除标签成功' - }); - // 刷新标签列表 - const tags = await getAllTags(); - setAllTags(tags); - } catch (error) { - console.error('删除标签失败:', error); - } + Modal.confirm({ + title: '确认删除', + content: '确定要删除该记录吗？', + okText: '确定', + okType: 'danger', + cancelText: '取消', + onOk: async () => { + try { + await deleteRoleTag(id); + message.success("删除成功"); + // 刷新标签列表 + const tags = await getAllTags(); + setAllTags(tags); + } catch (error) { + console.error("角色标签删除失败", error); + } + }, + // onCancel: () => resolve(false) + }); }; const columns = [ @@ -191,7 +200,7 @@ const RolePage: React.FC = () => { key: 'enabled', width: 80, render: (enabled: boolean) => ( - + ) }, { @@ -234,7 +243,7 @@ const RolePage: React.FC = () => { - @@ -292,7 +301,7 @@ const RolePage: React.FC = () => { columns={columns} dataSource={roles} rowKey="id" - scroll={{ x: 1500 }} + scroll={{x: 1500}} pagination={pagination} onChange={handleTableChange} size="middle" @@ -314,32 +323,32 @@ const RolePage: React.FC = () => { - + - + - + - + @@ -359,7 +368,7 @@ const RolePage: React.FC = () => { placeholder="请选择标签" value={selectedTags} onChange={setSelectedTags} - style={{ width: '100%' }} + style={{width: '100%'}} > {allTags?.map(tag => ( @@ -381,8 +390,8 @@ const RolePage: React.FC = () => { width={800} footer={null} > -
- - - - - ) - } - ]; - - return ( -
-
- -
- - - - setModalVisible(false)} - > - - - - - - - - - - - - - - - - ); -}; - -export default RoleTagPage; \ No newline at end of file diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts index c9bc04d3..525ddca0 100644 --- a/frontend/src/utils/request.ts +++ b/frontend/src/utils/request.ts @@ -9,8 +9,6 @@ export interface Response { } export interface RequestOptions extends AxiosRequestConfig { - successMessage?: string; - errorMessage?: string; retryCount?: number; retryDelay?: number; } @@ -32,6 +30,8 @@ const request = axios.create({ } }); +const defaultErrorMessage = '操作失败'; + // 创建请求配置 const createRequestConfig = (options?: Partial): RequestOptions => { return { @@ -41,52 +41,51 @@ const createRequestConfig = (options?: Partial): RequestOptions }; const responseHandler = (response: AxiosResponse>) => { - const data = response.data; - const config = response.config as RequestOptions; - - if (data.success && data.code === 200) { - config.successMessage && message.success(config.successMessage); - return data.data; + const result = response.data; + if (result.success && result.code === 200) { + return result.data; } else { - message.error(config.errorMessage || data.message); - return Promise.reject(response); // 隐式返回 Promise + if (result.message !== undefined) { + message.error(result.message || defaultErrorMessage); + return Promise.reject(response); + } + return Promise.reject(response); } }; -const statusMessages: Record = { - 401: '未授权，请重新登录', - 403: '拒绝访问', - 404: '请求错误，未找到该资源', - 500: '服务器错误' -}; - -const defaultErrorMessage = '服务器异常，请稍后再试！'; - const errorHandler = (error: any) => { - const config = error.config as RequestOptions; - - // 检查是否有响应 if (!error.response) { message.error('网络连接异常，请检查网络'); return Promise.reject(error); } - // 检查是否为取消请求 if (axios.isCancel(error)) { return Promise.reject(error); } const status = error.response.status; - const msg = statusMessages[status] || defaultErrorMessage; // 获取相应的消息 - - // 显示错误信息 - message.error(config.errorMessage || msg); - - return Promise.reject(error); // 拦截错误并返回 + let errorMessage = ''; + switch (status) { + case 401: + errorMessage = '未授权，请重新登录'; + break; + case 403: + errorMessage = '拒绝访问'; + break; + case 404: + errorMessage = '请求错误，未找到该资源'; + break; + case 500: + errorMessage = '服务异常，请稍后再试'; + break; + default: + errorMessage = '服务器异常，请稍后再试！'; + } + message.error(errorMessage); + return Promise.reject(error); }; - request.interceptors.request.use( (config) => { const token = localStorage.getItem('token'); @@ -101,9 +100,8 @@ request.interceptors.request.use( request.interceptors.response.use(responseHandler, errorHandler); const http = { - get: (url: string, config?: RequestOptions) => { - return request.get(url, createRequestConfig(config)); - }, + get: (url: string, config?: RequestOptions) => + request.get(url, createRequestConfig(config)), post: (url: string, data?: any, config?: RequestOptions) => request.post>(url, data, createRequestConfig(config)),