可用版本
This commit is contained in:
戚辰先生
parent
b01d9a630a
commit
7efbb63d31
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Layout, Menu, Dropdown, Modal, message, Spin, Space, Tooltip } from 'antd';
|
||||
import { useNavigate, useLocation, Outlet } from 'react-router-dom';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import React, {useEffect, useState, useCallback} from 'react';
|
||||
import {Layout, Menu, Dropdown, Modal, message, Spin, Space, Tooltip} from 'antd';
|
||||
import {useNavigate, useLocation, Outlet} from 'react-router-dom';
|
||||
import {useDispatch, useSelector} from 'react-redux';
|
||||
import {
|
||||
UserOutlined,
|
||||
LogoutOutlined,
|
||||
@ -11,18 +11,18 @@ import {
|
||||
CloudOutlined
|
||||
} from '@ant-design/icons';
|
||||
import * as AntdIcons from '@ant-design/icons';
|
||||
import { logout, setMenus, setUserInfo } from '../store/userSlice';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { getCurrentUser } from '../pages/Login/service';
|
||||
import { getCurrentUserMenus } from '@/pages/System/Menu/service';
|
||||
import { getWeather } from '../services/weather';
|
||||
import type { MenuResponse } from '@/pages/System/Menu/types';
|
||||
import type { RootState } from '../store';
|
||||
import {logout, setMenus, setUserInfo} from '../store/userSlice';
|
||||
import type {MenuProps} from 'antd';
|
||||
import {getCurrentUser} from '../pages/Login/service';
|
||||
import {getCurrentUserMenus} from '@/pages/System/Menu/service';
|
||||
import {getWeather} from '../services/weather';
|
||||
import type {MenuResponse} from '@/pages/System/Menu/types';
|
||||
import type {RootState} from '../store';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
const { Header, Content, Sider } = Layout;
|
||||
const { confirm } = Modal;
|
||||
const {Header, Content, Sider} = Layout;
|
||||
const {confirm} = Modal;
|
||||
|
||||
// 设置中文语言
|
||||
dayjs.locale('zh-cn');
|
||||
@ -35,69 +35,71 @@ const BasicLayout: React.FC = () => {
|
||||
const menus = useSelector((state: RootState) => state.user.menus);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentTime, setCurrentTime] = useState(dayjs());
|
||||
const [weather, setWeather] = useState({ temp: '--', weather: '未知', city: '未知' });
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const [weather, setWeather] = useState({temp: '--', weather: '未知', city: '未知'});
|
||||
|
||||
useEffect(() => {
|
||||
// 每秒更新时间
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(dayjs());
|
||||
}, 1000);
|
||||
|
||||
// 获取天气信息
|
||||
const fetchWeather = async () => {
|
||||
// 将天气获取逻辑提取为useCallback
|
||||
const fetchWeather = useCallback(async () => {
|
||||
try {
|
||||
const data = await getWeather();
|
||||
setWeather(data);
|
||||
} catch (error) {
|
||||
console.error('获取天气信息失败:', error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 初始化用户数据
|
||||
useEffect(() => {
|
||||
const initializeUserData = async () => {
|
||||
if (isInitialized) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 获取并更新用户信息
|
||||
const userData = await getCurrentUser();
|
||||
dispatch(setUserInfo(userData));
|
||||
|
||||
const menuData = await getCurrentUserMenus();
|
||||
dispatch(setMenus(menuData));
|
||||
|
||||
setIsInitialized(true);
|
||||
} catch (error) {
|
||||
message.error('初始化用户数据失败');
|
||||
dispatch(logout());
|
||||
navigate('/login', {replace: true});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchWeather();
|
||||
if (!userInfo) {
|
||||
initializeUserData();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 每半小时更新一次天气
|
||||
// 处理时间和天气更新
|
||||
useEffect(() => {
|
||||
// 每秒更新时间
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(dayjs());
|
||||
}, 1000);
|
||||
|
||||
// 初始化天气并设置定时更新
|
||||
fetchWeather();
|
||||
const weatherTimer = setInterval(fetchWeather, 30 * 60 * 1000);
|
||||
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
clearInterval(weatherTimer);
|
||||
};
|
||||
}, [isInitialized]);
|
||||
}, [fetchWeather]);
|
||||
|
||||
const handleLogout = () => {
|
||||
confirm({
|
||||
title: '确认退出',
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
content: '确定要退出系统吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
dispatch(logout());
|
||||
message.success('退出成功');
|
||||
navigate('/login', { replace: true });
|
||||
navigate('/login', {replace: true});
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -105,11 +107,11 @@ const BasicLayout: React.FC = () => {
|
||||
const userMenuItems: MenuProps['items'] = [
|
||||
{
|
||||
key: 'userInfo',
|
||||
icon: <UserOutlined />,
|
||||
icon: <UserOutlined/>,
|
||||
label: (
|
||||
<div style={{ padding: '4px 0' }}>
|
||||
<div style={{padding: '4px 0'}}>
|
||||
<div>当前用户：{userInfo?.nickname || userInfo?.username}</div>
|
||||
{userInfo?.email && <div style={{ fontSize: '12px', color: '#999' }}>{userInfo.email}</div>}
|
||||
{userInfo?.email && <div style={{fontSize: '12px', color: '#999'}}>{userInfo.email}</div>}
|
||||
</div>
|
||||
),
|
||||
disabled: true
|
||||
@ -119,7 +121,7 @@ const BasicLayout: React.FC = () => {
|
||||
},
|
||||
{
|
||||
key: 'logout',
|
||||
icon: <LogoutOutlined />,
|
||||
icon: <LogoutOutlined/>,
|
||||
label: '退出登录',
|
||||
onClick: handleLogout
|
||||
}
|
||||
@ -130,7 +132,7 @@ const BasicLayout: React.FC = () => {
|
||||
if (!iconName) return null;
|
||||
const iconKey = `${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Outlined`;
|
||||
const Icon = (AntdIcons as any)[iconKey];
|
||||
return Icon ? <Icon /> : null;
|
||||
return Icon ? <Icon/> : null;
|
||||
};
|
||||
|
||||
// 将菜单数据转换为antd Menu需要的格式
|
||||
@ -154,7 +156,7 @@ const BasicLayout: React.FC = () => {
|
||||
alignItems: 'center',
|
||||
background: '#f0f2f5'
|
||||
}}>
|
||||
<Spin size="large" />
|
||||
<Spin size="large"/>
|
||||
<div style={{
|
||||
marginTop: 24,
|
||||
fontSize: 16,
|
||||
@ -162,22 +164,22 @@ const BasicLayout: React.FC = () => {
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<p>正在为您准备系统资源</p>
|
||||
<p style={{ fontSize: 14 }}>请稍候，马上就好...</p>
|
||||
<p style={{fontSize: 14}}>请稍候，马上就好...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Layout style={{minHeight: '100vh'}}>
|
||||
<Sider>
|
||||
<div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
|
||||
<div style={{height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)'}}/>
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="inline"
|
||||
selectedKeys={[location.pathname]}
|
||||
items={getMenuItems(menus)}
|
||||
onClick={({ key }) => navigate(key)}
|
||||
onClick={({key}) => navigate(key)}
|
||||
/>
|
||||
</Sider>
|
||||
<Layout>
|
||||
@ -197,7 +199,7 @@ const BasicLayout: React.FC = () => {
|
||||
color: 'rgba(0, 0, 0, 0.65)',
|
||||
fontSize: 14
|
||||
}}>
|
||||
<ClockCircleOutlined style={{ marginRight: 8 }} />
|
||||
<ClockCircleOutlined style={{marginRight: 8}}/>
|
||||
{currentTime.format('YYYY年MM月DD日 HH:mm:ss')} 星期{currentTime.format('dd')}
|
||||
</span>
|
||||
<Tooltip title={`${weather.city}`}>
|
||||
@ -207,12 +209,12 @@ const BasicLayout: React.FC = () => {
|
||||
color: 'rgba(0, 0, 0, 0.65)',
|
||||
fontSize: 14
|
||||
}}>
|
||||
<CloudOutlined style={{ marginRight: 8 }} />
|
||||
<CloudOutlined style={{marginRight: 8}}/>
|
||||
{weather.weather} {weather.temp}℃
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
<Dropdown menu={{ items: userMenuItems }} trigger={['hover']}>
|
||||
<Dropdown menu={{items: userMenuItems}} trigger={['hover']}>
|
||||
<span style={{
|
||||
cursor: 'pointer',
|
||||
display: 'inline-flex',
|
||||
@ -225,15 +227,15 @@ const BasicLayout: React.FC = () => {
|
||||
backgroundColor: 'rgba(0,0,0,0.025)'
|
||||
}
|
||||
}}>
|
||||
<UserOutlined style={{ fontSize: 16, marginRight: 8 }} />
|
||||
<UserOutlined style={{fontSize: 16, marginRight: 8}}/>
|
||||
<span>{userInfo?.nickname || userInfo?.username}</span>
|
||||
<DownOutlined style={{ fontSize: 12, marginLeft: 6 }} />
|
||||
<DownOutlined style={{fontSize: 12, marginLeft: 6}}/>
|
||||
</span>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
</Header>
|
||||
<Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
|
||||
<Outlet />
|
||||
<Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>
|
||||
<Outlet/>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Card, Row, Col, Statistic } from 'antd';
|
||||
import { UserOutlined, ShoppingCartOutlined, FileOutlined } from '@ant-design/icons';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
useEffect(() => {
|
||||
// 检查这里的数据加载逻辑
|
||||
// 是否有多个useEffect都在加载相同的数据
|
||||
// 或者依赖项是否设置正确
|
||||
}, []); // 检查依赖项
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={16}>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Space, message, Switch, TreeSelect } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TeamOutlined } from '@ant-design/icons';
|
||||
import type { UserResponse } from './types';
|
||||
import type { UserResponse, Role } from './types';
|
||||
import type { DepartmentDTO } from '../Department/types';
|
||||
import { getUsers, createUser, updateUser, deleteUser, resetPassword } from './service';
|
||||
import { getDepartmentTree } from '../Department/service';
|
||||
import { convertToPageParams, convertToPageInfo } from '@/utils/page';
|
||||
import { useTableData } from '@/hooks/useTableData';
|
||||
import type { FixedType, AlignType } from 'rc-table/lib/interface';
|
||||
// import RoleModal from './components/RoleModal';
|
||||
|
||||
const UserPage: React.FC = () => {
|
||||
@ -45,10 +46,6 @@ const UserPage: React.FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [passwordForm] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, [pagination.current, pagination.pageSize]);
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingUser(null);
|
||||
form.resetFields();
|
||||
@ -61,8 +58,7 @@ const UserPage: React.FC = () => {
|
||||
const handleEdit = (record: UserResponse) => {
|
||||
setEditingUser(record);
|
||||
form.setFieldsValue({
|
||||
...record,
|
||||
password: 'UNCHANGED_PASSWORD'
|
||||
...record
|
||||
});
|
||||
setModalVisible(true);
|
||||
};
|
||||
@ -77,7 +73,7 @@ const UserPage: React.FC = () => {
|
||||
try {
|
||||
const values = await passwordForm.validateFields();
|
||||
if (editingUser) {
|
||||
await resetPassword(editingUser.id);
|
||||
await resetPassword(editingUser.id, values.password);
|
||||
message.success('密码重置成功');
|
||||
setResetPasswordModalVisible(false);
|
||||
}
|
||||
@ -92,7 +88,6 @@ const UserPage: React.FC = () => {
|
||||
if (editingUser) {
|
||||
await updateUser(editingUser.id, {
|
||||
...values,
|
||||
password: values.password === 'UNCHANGED_PASSWORD' ? editingUser.password : values.password,
|
||||
version: editingUser.version
|
||||
});
|
||||
message.success('更新成功');
|
||||
@ -121,77 +116,86 @@ const UserPage: React.FC = () => {
|
||||
// };
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
fixed: 'left' as FixedType
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
width: '12%',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname',
|
||||
width: '12%',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
width: '15%',
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: '12%',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'roles',
|
||||
key: 'roles',
|
||||
width: '15%',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
render: (roles: Role[]) => roles?.map(role => role.name).join(', ') || '-'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: '15%',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabled',
|
||||
key: 'enabled',
|
||||
width: '8%',
|
||||
width: 80,
|
||||
align: 'center' as AlignType,
|
||||
render: (enabled: boolean) => (
|
||||
<Switch checked={enabled} disabled />
|
||||
<Switch checked={enabled} disabled size="small" />
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: '280px',
|
||||
width: 180,
|
||||
fixed: 'right' as FixedType,
|
||||
render: (_: any, record: UserResponse) => (
|
||||
<Space>
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleEdit(record)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
{/* 注释掉角色分配按钮
|
||||
<Button
|
||||
type="link"
|
||||
icon={<TeamOutlined />}
|
||||
onClick={() => handleAssignRoles(record)}
|
||||
disabled={record.username === 'admin'}
|
||||
>
|
||||
分配角色
|
||||
</Button>
|
||||
*/}
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<KeyOutlined />}
|
||||
onClick={() => handleResetPassword(record)}
|
||||
>
|
||||
@ -199,6 +203,7 @@ const UserPage: React.FC = () => {
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => handleDelete(record.id)}
|
||||
@ -224,12 +229,25 @@ const UserPage: React.FC = () => {
|
||||
columns={columns}
|
||||
dataSource={users}
|
||||
rowKey="id"
|
||||
scroll={{ x: 1500 }}
|
||||
pagination={{
|
||||
...pagination,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`,
|
||||
onChange: onPageChange
|
||||
onChange: onPageChange,
|
||||
size: 'small'
|
||||
}}
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log('selectedRowKeys:', selectedRowKeys);
|
||||
console.log('selectedRows:', selectedRows);
|
||||
},
|
||||
getCheckboxProps: (record) => ({
|
||||
disabled: record.username === 'admin',
|
||||
}),
|
||||
fixed: true,
|
||||
}}
|
||||
size="middle"
|
||||
bordered
|
||||
@ -254,20 +272,6 @@ const UserPage: React.FC = () => {
|
||||
>
|
||||
<Input placeholder="请输入用户名" disabled={!!editingUser} />
|
||||
</Form.Item>
|
||||
{editingUser && (
|
||||
<Form.Item name="password" hidden>
|
||||
<Input type="hidden" />
|
||||
</Form.Item>
|
||||
)}
|
||||
{!editingUser && (
|
||||
<Form.Item
|
||||
name="password"
|
||||
label="密码"
|
||||
rules={[{ required: true, message: '请输入密码' }]}
|
||||
>
|
||||
<Input.Password placeholder="请输入密码" />
|
||||
</Form.Item>
|
||||
)}
|
||||
<Form.Item
|
||||
name="nickname"
|
||||
label="昵称"
|
||||
|
||||
@ -15,7 +15,7 @@ export const getWeather = async (): Promise<WeatherData> => {
|
||||
const key = '46a02c7d20534596f7386caf02204caa'; // 需要替换成你自己的 key
|
||||
|
||||
const ipResponse = await axios.get(`${ipUrl}?key=${key}`);
|
||||
const { adcode } = ipResponse.data;
|
||||
const {adcode} = ipResponse.data;
|
||||
|
||||
const weatherResponse = await axios.get(`${weatherUrl}?key=${key}&city=${adcode}`);
|
||||
const weatherData = weatherResponse.data.lives[0];
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
import {configureStore} from '@reduxjs/toolkit';
|
||||
import userReducer from './userSlice';
|
||||
|
||||
const store = configureStore({
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import type { MenuResponse } from '@/pages/System/Menu/types';
|
||||
import {createSlice, PayloadAction} from '@reduxjs/toolkit';
|
||||
import type {MenuResponse} from '@/pages/System/Menu/types';
|
||||
|
||||
interface UserInfo {
|
||||
id: number;
|
||||
@ -47,5 +47,5 @@ const userSlice = createSlice({
|
||||
}
|
||||
});
|
||||
|
||||
export const { setToken, setUserInfo, setMenus, logout } = userSlice.actions;
|
||||
export const {setToken, setUserInfo, setMenus, logout} = userSlice.actions;
|
||||
export default userSlice.reducer;
|
||||
@ -1,4 +1,4 @@
|
||||
import type { Page, PageParams } from '@/types/base/page';
|
||||
import type {Page, PageParams} from '@/types/base/page';
|
||||
|
||||
// 默认分页参数
|
||||
const DEFAULT_PAGE_SIZE = 10;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
|
||||
import { message } from 'antd';
|
||||
import axios, {AxiosRequestConfig, AxiosResponse} from 'axios';
|
||||
import {message} from 'antd';
|
||||
|
||||
export interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { TableState } from '@/types/table';
|
||||
import type {TableState} from '@/types/table';
|
||||
|
||||
// 创建初始状态
|
||||
export const createInitialState = <T>(pageSize: number = 10): TableState<T> => ({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user