Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
ebd850dc73 |
@@ -2,19 +2,17 @@ module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:react-hooks/recommended",
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ["dist", ".eslintrc.cjs"],
|
||||
parser: "@typescript-eslint/parser",
|
||||
plugins: ["react-refresh"],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/no-unused-vars": "off",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -20,12 +20,11 @@ npm run dev
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
## 目录结构
|
||||
|
||||
```sh
|
||||
public #静态资源
|
||||
src
|
||||
src
|
||||
|--api #接口文件夹
|
||||
|--assets #图片,字体等静态资源文件
|
||||
|--components #公共组件
|
||||
@@ -52,4 +51,4 @@ src
|
||||
|--Notfound.tsx #404页面
|
||||
|--ParentView.tsx #三级菜单路由出口
|
||||
|--permission.ts #生成菜单文件
|
||||
```
|
||||
```
|
||||
@@ -14,10 +14,8 @@
|
||||
"antd": "^5.7.3",
|
||||
"axios": "^1.4.0",
|
||||
"babel-plugin-import": "^1.13.8",
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^5.4.3",
|
||||
"js-cookie": "^3.0.5",
|
||||
"moment": "^2.29.4",
|
||||
"nprogress": "^0.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
||||
@@ -1,59 +1,60 @@
|
||||
import { Button, Form, Input, Image, message } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import "./assets/styles/login.scss";
|
||||
import './assets/styles/login.scss'
|
||||
import { getCaptchaApi, loginApi } from "./api/login";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { setToken } from "./utils/auth";
|
||||
|
||||
type Login = {
|
||||
uuid?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
code?: string;
|
||||
};
|
||||
uuid?: string,
|
||||
username?: string,
|
||||
password?: string,
|
||||
code?: string
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [uuid, setUuid] = useState<string>("");
|
||||
const [captcha, setCaptcha] = useState<string>("");
|
||||
const navigate = useNavigate();
|
||||
const [messageApi, contextHolder] = message.useMessage()
|
||||
const [uuid, setUuid] = useState<string>('')
|
||||
const [captcha, setCaptcha] = useState<string>('')
|
||||
const navigate = useNavigate()
|
||||
|
||||
const getCaptcha = async () => {
|
||||
try {
|
||||
const { code, data } = await getCaptchaApi();
|
||||
const { code, data } = await getCaptchaApi()
|
||||
if (code === 1000) {
|
||||
setUuid(data.uuid);
|
||||
setCaptcha(data.img);
|
||||
setUuid(data.uuid)
|
||||
setCaptcha(data.img)
|
||||
}
|
||||
} catch (err: any) {
|
||||
messageApi.error(err);
|
||||
} catch(err: any) {
|
||||
messageApi.error(err)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleLogin = async (values: Login) => {
|
||||
values.uuid = uuid;
|
||||
values.uuid = uuid
|
||||
try {
|
||||
const { code, data, msg } = await loginApi(values);
|
||||
const { code, data, msg } = await loginApi(values)
|
||||
if (code === 1000) {
|
||||
setToken(data);
|
||||
messageApi.success(msg);
|
||||
navigate("/");
|
||||
return;
|
||||
setToken(data)
|
||||
messageApi.success(msg)
|
||||
navigate('/')
|
||||
return
|
||||
}
|
||||
messageApi.error(msg);
|
||||
getCaptcha();
|
||||
} catch (err: any) {
|
||||
messageApi.error(err);
|
||||
messageApi.error(msg)
|
||||
getCaptcha()
|
||||
} catch(err: any) {
|
||||
messageApi.error(err)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleLoginFailed = (errorInfo: any) => {
|
||||
console.log(errorInfo);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getCaptcha();
|
||||
}, []);
|
||||
getCaptcha()
|
||||
}, [])
|
||||
return (
|
||||
<div id="login">
|
||||
{contextHolder}
|
||||
@@ -68,41 +69,35 @@ export default function Login() {
|
||||
<h3>FateVerse</h3>
|
||||
</Form.Item>
|
||||
<Form.Item<Login>
|
||||
label="用户名"
|
||||
name="username"
|
||||
rules={[{ required: true, message: "请输入用户名" }]}
|
||||
initialValue="admin"
|
||||
label='用户名'
|
||||
name='username'
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
initialValue='admin'
|
||||
>
|
||||
<Input placeholder="请输入用户名" />
|
||||
</Form.Item>
|
||||
<Form.Item<Login>
|
||||
label="密码"
|
||||
name="password"
|
||||
rules={[{ required: true, message: "请输入密码" }]}
|
||||
initialValue="123456"
|
||||
label='密码'
|
||||
name='password'
|
||||
rules={[{ required: true, message: '请输入密码' }]}
|
||||
initialValue='123456'
|
||||
>
|
||||
<Input.Password placeholder="请输入密码" />
|
||||
</Form.Item>
|
||||
<Form.Item<Login>
|
||||
label="验证码"
|
||||
name="code"
|
||||
rules={[{ required: true, message: "请输入验证码" }]}
|
||||
label='验证码'
|
||||
name='code'
|
||||
rules={[{ required: true, message: '请输入验证码' }]}
|
||||
>
|
||||
<div className="code-box">
|
||||
<Input placeholder="请输入验证码" />
|
||||
<Image
|
||||
src={"data:image/gif;base64," + captcha}
|
||||
preview={false}
|
||||
onClick={getCaptcha}
|
||||
/>
|
||||
<Image src={'data:image/gif;base64,' + captcha} preview={false} onClick={getCaptcha} />
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
登录
|
||||
</Button>
|
||||
<Button type="primary" htmlType="submit">登录</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import request from "../../utils/request";
|
||||
|
||||
export const getNoticeListApi = (params: any) => {
|
||||
return request({
|
||||
url: "/notice/notify",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const getNoticeInfoApi = (id: number) => {
|
||||
return request({
|
||||
url: "/notice/notify/" + id,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteNoticeInfoApi = (id: number) => {
|
||||
return request({
|
||||
url: "/notice/notify/" + id,
|
||||
method: "delete",
|
||||
});
|
||||
};
|
||||
@@ -1,51 +0,0 @@
|
||||
import request from "../../utils/request";
|
||||
|
||||
interface postListParams {
|
||||
postCode?: string;
|
||||
postName?: string;
|
||||
state?: string;
|
||||
pageNum?: string;
|
||||
pageSize?: string;
|
||||
}
|
||||
|
||||
export const getPostListApi = (data: postListParams) => {
|
||||
const { postCode, postName, state, pageNum, pageSize } = data;
|
||||
const params = data
|
||||
? {
|
||||
postCode,
|
||||
postName,
|
||||
state,
|
||||
pageNum,
|
||||
pageSize: 500,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return request({
|
||||
url: "/admin/post",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const addPostApi = (data: any) => {
|
||||
return request({
|
||||
url: "/admin/post",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const editPostApi = (data: any) => {
|
||||
return request({
|
||||
url: "/admin/post",
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const deletePostApi = (postId: any) => {
|
||||
return request({
|
||||
url: "/admin/post/" + postId,
|
||||
method: "delete",
|
||||
});
|
||||
};
|
||||
@@ -1,94 +0,0 @@
|
||||
import request from "../../utils/request";
|
||||
|
||||
interface userListParams {
|
||||
deptId?: string;
|
||||
userName?: string;
|
||||
phoneNumber?: string;
|
||||
state?: string;
|
||||
startTime?: string;
|
||||
endTime?: string;
|
||||
pageNum?: number;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
export const getDeptTreeApi = () => {
|
||||
return request({
|
||||
url: "/admin/dept",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const getUserInfoApi = (userId: string) => {
|
||||
return request({
|
||||
url: "/admin/user/info/" + userId,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const getRoleListApi = () => {
|
||||
return request({
|
||||
url: "/admin/role",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const getPostListApi = () => {
|
||||
return request({
|
||||
url: "/admin/post",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const getUserListApi = (data: userListParams) => {
|
||||
const {
|
||||
deptId,
|
||||
userName,
|
||||
phoneNumber,
|
||||
state,
|
||||
startTime,
|
||||
endTime,
|
||||
pageNum,
|
||||
pageSize,
|
||||
} = data;
|
||||
const params = data
|
||||
? {
|
||||
deptId,
|
||||
userName,
|
||||
phoneNumber,
|
||||
state,
|
||||
startTime,
|
||||
endTime,
|
||||
pageNum,
|
||||
pageSize: 500,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return request({
|
||||
url: "/admin/user",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const addUserApi = (data: any) => {
|
||||
return request({
|
||||
url: "/admin/user",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const editUserApi = (data: any) => {
|
||||
return request({
|
||||
url: "/admin/user",
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteUserApi = (userId: any) => {
|
||||
return request({
|
||||
url: "/admin/user/" + userId,
|
||||
method: "delete",
|
||||
});
|
||||
};
|
||||
24
src/main.tsx
24
src/main.tsx
@@ -1,21 +1,21 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
|
||||
// redux toolkit
|
||||
import { Provider } from "react-redux";
|
||||
import store, { persistor } from "./stores/index.ts";
|
||||
import { PersistGate } from "redux-persist/integration/react";
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
import { Provider } from 'react-redux'
|
||||
import store, { persistor } from './stores/index.ts'
|
||||
import { PersistGate } from 'redux-persist/integration/react'
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<PersistGate loading={null} persistor={persistor}>
|
||||
<PersistGate loading={null} persistor={persistor} >
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</PersistGate>
|
||||
</Provider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
export default function FormatData(DataStr: string) {
|
||||
const dateStr = DataStr;
|
||||
const date = new Date(dateStr);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
const seconds = String(date.getSeconds()).padStart(2, "0");
|
||||
|
||||
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
return formattedDate;
|
||||
}
|
||||
@@ -1,86 +1,75 @@
|
||||
import { IResponse, IToken } from "@/type";
|
||||
import axios, {
|
||||
InternalAxiosRequestConfig,
|
||||
AxiosInstance,
|
||||
AxiosRequestConfig,
|
||||
} from "axios";
|
||||
import Cookie from "js-cookie";
|
||||
import axios, { InternalAxiosRequestConfig, AxiosInstance, AxiosRequestConfig } from "axios";
|
||||
import Cookie from 'js-cookie'
|
||||
import { getToken, removeToken } from "./auth";
|
||||
import { message } from "antd";
|
||||
|
||||
const service: AxiosInstance = axios.create({
|
||||
baseURL: import.meta.env.VITE_BASEURL,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
timeout: 6000,
|
||||
});
|
||||
timeout: 6000
|
||||
})
|
||||
|
||||
// 请求前拦截
|
||||
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
|
||||
const Authorization: IToken = getToken() || "";
|
||||
const Authorization: IToken = getToken() || ''
|
||||
if (config && config.headers && Authorization) {
|
||||
config.headers.Authorization = Authorization;
|
||||
config.headers.Authorization = Authorization
|
||||
}
|
||||
return config;
|
||||
});
|
||||
return config
|
||||
})
|
||||
|
||||
const request = async <T = any>(
|
||||
config: AxiosRequestConfig
|
||||
): Promise<IResponse<T>> => {
|
||||
const request = async <T = any>(config: AxiosRequestConfig): Promise<IResponse<T>> => {
|
||||
try {
|
||||
const response = await service.request<IResponse<T>>(config);
|
||||
const { code, msg } = response.data;
|
||||
const response = await service.request<IResponse<T>>(config)
|
||||
const { code, msg } = response.data
|
||||
if (code !== 1000) {
|
||||
switch (code) {
|
||||
case 401:
|
||||
redirectLogin();
|
||||
break;
|
||||
case 402:
|
||||
message.error(msg);
|
||||
break;
|
||||
case 403:
|
||||
message.error(msg);
|
||||
break;
|
||||
case 405:
|
||||
message.error(msg);
|
||||
break;
|
||||
default:
|
||||
message.error("系统未知错误");
|
||||
case 401: redirectLogin()
|
||||
break
|
||||
case 402: message.error(msg)
|
||||
break
|
||||
case 403: message.error(msg)
|
||||
break
|
||||
case 405: message.error(msg)
|
||||
break
|
||||
default: message.error('系统未知错误')
|
||||
}
|
||||
return {
|
||||
code: -1,
|
||||
msg: "error",
|
||||
data: null as any,
|
||||
};
|
||||
msg: 'error',
|
||||
data: null as any
|
||||
}
|
||||
}
|
||||
return response.data;
|
||||
return response.data
|
||||
} catch (err: any) {
|
||||
switch (err) {
|
||||
}
|
||||
if (!window.navigator.onLine) {
|
||||
errorInfoRet("请检查网络连接");
|
||||
if(!window.navigator.onLine) {
|
||||
errorInfoRet('请检查网络连接')
|
||||
}
|
||||
return {
|
||||
code: -1,
|
||||
msg: "error",
|
||||
data: null as any,
|
||||
};
|
||||
msg: 'error',
|
||||
data: null as any
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const redirectLogin = () => {
|
||||
message.warning("用户登录已过期, 即将跳转到登录页面重新登录");
|
||||
removeToken();
|
||||
window.location.href = "/login";
|
||||
};
|
||||
message.warning('用户登录已过期, 即将跳转到登录页面重新登录')
|
||||
removeToken()
|
||||
window.location.href = '/login'
|
||||
}
|
||||
|
||||
const errorInfoRet = (msg: string) => {
|
||||
message.error(msg);
|
||||
message.error(msg)
|
||||
return {
|
||||
code: -1,
|
||||
msg,
|
||||
data: null as any,
|
||||
};
|
||||
};
|
||||
export default request;
|
||||
data: null as any
|
||||
}
|
||||
}
|
||||
export default request
|
||||
@@ -1,5 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Dept() {
|
||||
return <div>dept</div>;
|
||||
}
|
||||
return(
|
||||
<div>dept</div>
|
||||
)
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
#content {
|
||||
display: flex;
|
||||
border-top: 1px solid black;
|
||||
.dept-content {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
}
|
||||
|
||||
.left-dept {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
border: 1px solid red;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
.right {
|
||||
flex: 80%;
|
||||
height: 190px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.search-content {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
justify-content: space-around;
|
||||
padding: 35px 12px 0 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
margin: 12px 0 0 12px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.add-content {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.user-mid-button {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,242 +0,0 @@
|
||||
import "./index.scss";
|
||||
import { Select, Button, Table, Space, Tag, message, Modal } from "antd";
|
||||
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
import {
|
||||
getNoticeListApi,
|
||||
deleteNoticeInfoApi,
|
||||
} from "../../../../api/system/notice";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
|
||||
|
||||
export default function Inform() {
|
||||
const [noticeInfo, setNoticeInfo] = useState<string>("");
|
||||
const [isNoticeOpen, setIsNoticeOpen] = useState<boolean>(false);
|
||||
const [listData, setListData] = useState([]);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
||||
state: undefined,
|
||||
pageSize: undefined,
|
||||
pageNum: undefined,
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "noticeId",
|
||||
key: "noticeId",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "公告标题",
|
||||
dataIndex: "noticeTitle",
|
||||
key: "noticeTitle",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "阅读状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text: string) => (
|
||||
<>
|
||||
{text === "1" ? (
|
||||
<Tag color="warning">已读</Tag>
|
||||
) : (
|
||||
<Tag color="error">未读</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operate",
|
||||
dataIndex: "operate",
|
||||
render: (_: string, record: object) => (
|
||||
<div style={{ color: "#58aaff" }}>
|
||||
<Space>
|
||||
<EditOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleInfo(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
详情
|
||||
</a>
|
||||
<DeleteOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleDel(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
interface QueryParamsType {
|
||||
state?: string;
|
||||
pageSize?: number;
|
||||
pageNum?: number;
|
||||
}
|
||||
|
||||
const getList = async (newQueryParams: object) => {
|
||||
try {
|
||||
const { code, data } = await getNoticeListApi(newQueryParams);
|
||||
if (code === 1000) {
|
||||
setListData(data.rows);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
setQueryParams({});
|
||||
getList({});
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getList(queryParams);
|
||||
};
|
||||
|
||||
const handleInfo = (record: any) => {
|
||||
setIsNoticeOpen(true);
|
||||
setNoticeInfo(record.noticeTitle);
|
||||
};
|
||||
|
||||
const handleInfoOk = () => {
|
||||
setIsNoticeOpen(false);
|
||||
};
|
||||
|
||||
const handleInfoCancel = () => {
|
||||
setIsNoticeOpen(false);
|
||||
};
|
||||
|
||||
const handleDel = async (record: any) => {
|
||||
Modal.confirm({
|
||||
title: `确定删除Id为-${record.noticeId}-, 名称为-${record.noticeTitle}-的岗位吗?`,
|
||||
icon: <ExclamationCircleFilled />,
|
||||
async onOk() {
|
||||
const { code } = await deleteNoticeInfoApi(record.noticeId);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "删除成功",
|
||||
});
|
||||
getList({});
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "删除失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
messageApi.open({
|
||||
type: "warning",
|
||||
content: "取消成功",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
pageNum: page,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getList(queryParams);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="content">
|
||||
<>
|
||||
<div className="right">
|
||||
<div className="search-content">
|
||||
<>
|
||||
<Space>
|
||||
<div>状态</div>
|
||||
<Select
|
||||
style={{ width: 220 }}
|
||||
placeholder="请选择状态"
|
||||
allowClear
|
||||
options={[
|
||||
{ value: "1", label: "已读" },
|
||||
{ value: "0", label: "未读" },
|
||||
]}
|
||||
value={queryParams.state}
|
||||
onChange={(value: any) =>
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
state: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Space>
|
||||
<Space>
|
||||
<div className="search-button">
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
<Space>
|
||||
<div className="reset-button" onClick={handleReset}>
|
||||
<Button>
|
||||
<RedoOutlined />
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
</>
|
||||
</div>
|
||||
<Modal
|
||||
title="通知弹框"
|
||||
open={isNoticeOpen}
|
||||
onOk={handleInfoOk}
|
||||
onCancel={handleInfoCancel}
|
||||
footer={null}
|
||||
>
|
||||
<h1>{noticeInfo}</h1>
|
||||
</Modal>
|
||||
<div className="table-content">
|
||||
<>
|
||||
{contextHolder}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={listData}
|
||||
className="article-table"
|
||||
pagination={{
|
||||
onChange: handlePageChange,
|
||||
locale: {
|
||||
jump_to: "跳至",
|
||||
page: "页",
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
#content {
|
||||
display: flex;
|
||||
border-top: 1px solid black;
|
||||
.dept-content {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
}
|
||||
|
||||
.left-dept {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
border: 1px solid red;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
.right {
|
||||
flex: 80%;
|
||||
height: 190px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.search-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 35px 12px 0 0;
|
||||
.content-top {
|
||||
display: flex;
|
||||
.input-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
width: 270px;
|
||||
div {
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
:nth-child(3) {
|
||||
div {
|
||||
margin-right: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-bottom {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
div {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time-picker {
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
margin-left: -30px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
margin: 12px 0 0 12px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.add-content {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.user-mid-button {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,473 +0,0 @@
|
||||
import "./index.scss";
|
||||
import {
|
||||
Input,
|
||||
Select,
|
||||
Button,
|
||||
Table,
|
||||
Space,
|
||||
Tag,
|
||||
message,
|
||||
Modal,
|
||||
Form,
|
||||
Row,
|
||||
Col,
|
||||
Radio,
|
||||
InputNumber,
|
||||
} from "antd";
|
||||
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
import {
|
||||
getPostListApi,
|
||||
addPostApi,
|
||||
editPostApi,
|
||||
deletePostApi,
|
||||
} from "../../../api/system/post";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
|
||||
export default function Post() {
|
||||
const [form] = Form.useForm();
|
||||
const postIdList: number[] = [];
|
||||
const [echoData, setEchoData] = useState<QueryParamsType>({});
|
||||
const [listData, setListData] = useState([]);
|
||||
const [radioValue, setRadioValue] = useState(1);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [modalTitle, setModalTitle] = useState<string>("");
|
||||
const [buttonType, setButtonType] = useState<string>("");
|
||||
const [isShowModal, setIsShowModal] = useState<boolean>(false);
|
||||
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
||||
postName: undefined,
|
||||
postCode: undefined,
|
||||
state: undefined,
|
||||
postSort: undefined,
|
||||
pageSize: undefined,
|
||||
pageNum: undefined,
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "postId",
|
||||
key: "Id",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "岗位名称",
|
||||
dataIndex: "postName",
|
||||
key: "postName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "岗位编码",
|
||||
dataIndex: "postCode",
|
||||
key: "postCode",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "排序",
|
||||
key: "postSort",
|
||||
dataIndex: "postSort",
|
||||
render: (text: string) => <>{text ? text : "--"}</>,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text: string) => (
|
||||
<>
|
||||
{text === "0" ? (
|
||||
<Tag color="processing">停用</Tag>
|
||||
) : (
|
||||
<Tag color="processing">正常</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
dataIndex: "createTime",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operate",
|
||||
dataIndex: "operate",
|
||||
render: (_: string, record: object) => (
|
||||
<div style={{ color: "#58aaff" }}>
|
||||
<Space>
|
||||
<EditOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleEdit(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<DeleteOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleDel(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
interface QueryParamsType {
|
||||
postName?: string;
|
||||
postCode?: string;
|
||||
state?: string;
|
||||
postSort?: string;
|
||||
postId?: string;
|
||||
pageSize?: number;
|
||||
pageNum?: number;
|
||||
}
|
||||
|
||||
const getPostList = async (newQueryParams: object) => {
|
||||
try {
|
||||
const { code, data } = await getPostListApi(newQueryParams);
|
||||
if (code === 1000) {
|
||||
setListData(data.rows);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setModalTitle("新增用户");
|
||||
setButtonType("ADD");
|
||||
setIsShowModal(true);
|
||||
};
|
||||
|
||||
const handleEdit = (data: any) => {
|
||||
setModalTitle("修改用户");
|
||||
setButtonType("EDIT");
|
||||
setIsShowModal(true);
|
||||
console.log(data);
|
||||
setEchoData({
|
||||
postId: data.postId,
|
||||
});
|
||||
handleEcho(data);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
form.validateFields().then((values) => {
|
||||
console.log(values);
|
||||
console.log(buttonType);
|
||||
|
||||
if (buttonType === "ADD") {
|
||||
handleConfirmAdd(values);
|
||||
} else if (buttonType === "EDIT") {
|
||||
handleConfirmEdit(values);
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "系统异常，请刷新后重试",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleConfirmAdd = async (data: object) => {
|
||||
console.log(data);
|
||||
const { code } = await addPostApi(data);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "创建成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
handleClear();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "岗位名称已经存在",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmEdit = async (data: object) => {
|
||||
const editData = {
|
||||
...data,
|
||||
postId: echoData.postId,
|
||||
};
|
||||
console.log(editData);
|
||||
const { code } = await editPostApi(editData);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "修改成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
handleClear();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "修改失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
setQueryParams({});
|
||||
getPostList({});
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getPostList(queryParams);
|
||||
};
|
||||
|
||||
const handleDel = async (record: any) => {
|
||||
Modal.confirm({
|
||||
title: `确定删除Id为-${record.postId}-, 岗位名称为-${record.postName}-的岗位吗?`,
|
||||
icon: <ExclamationCircleFilled />,
|
||||
async onOk() {
|
||||
const { code } = await deletePostApi(record.postId);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "删除成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "删除失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
messageApi.open({
|
||||
type: "warning",
|
||||
content: "取消成功",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearchValues = (e: any) => {
|
||||
const { name, value } = e.target;
|
||||
setQueryParams({ ...queryParams, [name]: value });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
pageNum: page,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEcho = (data: any) => {
|
||||
const { postName, postCode, state, postSort } = data;
|
||||
form.setFieldsValue({
|
||||
postName,
|
||||
postCode,
|
||||
state,
|
||||
postSort,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
handleClear();
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
form.resetFields();
|
||||
setIsShowModal(false);
|
||||
};
|
||||
|
||||
const onRadio = (e: any) => {
|
||||
setRadioValue(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPostList(queryParams);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="content">
|
||||
<>
|
||||
<div className="right">
|
||||
<div className="search-content">
|
||||
<>
|
||||
<div className="content-top">
|
||||
<div className="input-item">
|
||||
<div>岗位名称</div>
|
||||
<Input
|
||||
placeholder="请输入岗位名称"
|
||||
name="postName"
|
||||
allowClear
|
||||
value={queryParams.postName}
|
||||
onChange={handleSearchValues}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<div>岗位编码</div>
|
||||
<Input
|
||||
placeholder="请输入岗位编码"
|
||||
name="postCode"
|
||||
allowClear
|
||||
value={queryParams.postCode}
|
||||
onChange={handleSearchValues}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<div>状态</div>
|
||||
<Select
|
||||
style={{ width: 120 }}
|
||||
placeholder="用户状态"
|
||||
allowClear
|
||||
options={[
|
||||
{ value: "1", label: "正常" },
|
||||
{ value: "0", label: "停用" },
|
||||
]}
|
||||
value={queryParams.state}
|
||||
onChange={(value: any) =>
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
state: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-bottom">
|
||||
<div className="search-button">
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
<div className="reset-button" onClick={handleReset}>
|
||||
<Button>
|
||||
<RedoOutlined />
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
<div className="add-content">
|
||||
<>
|
||||
<Button type="primary" onClick={handleAdd}>
|
||||
<PlusOutlined />
|
||||
新增
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
<div className="table-content">
|
||||
<>
|
||||
{contextHolder}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={listData}
|
||||
className="article-table"
|
||||
pagination={{
|
||||
onChange: handlePageChange,
|
||||
locale: {
|
||||
jump_to: "跳至",
|
||||
page: "页",
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
<>
|
||||
{contextHolder}
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
width={600}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
open={isShowModal}
|
||||
onOk={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
name="basic"
|
||||
initialValues={{ remember: true }}
|
||||
onFinish={handleConfirm}
|
||||
labelCol={{ span: 4 }}
|
||||
autoComplete="off"
|
||||
className="modal-form"
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="岗位名称"
|
||||
name="postName"
|
||||
rules={[{ required: true, message: "请输入岗位名称" }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入岗位名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="岗位编码"
|
||||
name="postCode"
|
||||
rules={[{ required: true, message: "请输入岗位编码" }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入岗位编码" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="显示顺序"
|
||||
name="postSort"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="状态"
|
||||
name="state"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group onChange={onRadio} value={radioValue}>
|
||||
<Radio value="1">正常</Radio>
|
||||
<Radio value="0">停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
0
src/view/system/role/index.tsx
Normal file
0
src/view/system/role/index.tsx
Normal file
@@ -1,104 +0,0 @@
|
||||
#content {
|
||||
display: flex;
|
||||
border-top: 1px solid black;
|
||||
.dept-content {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
}
|
||||
|
||||
.left-dept {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
border: 1px solid red;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
.right-user {
|
||||
flex: 80%;
|
||||
height: 190px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.search-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 35px 12px 0 0;
|
||||
.content-top {
|
||||
display: flex;
|
||||
.input-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
width: 270px;
|
||||
div {
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
:nth-child(3) {
|
||||
div {
|
||||
margin-right: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-bottom {
|
||||
display: flex;
|
||||
margin-left: -20px;
|
||||
margin-top: 20px;
|
||||
div {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time-picker {
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
margin-left: -30px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
margin: 12px 0 0 12px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.add-content {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.user-mid-button {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,807 +1,7 @@
|
||||
import "./index.scss";
|
||||
import {
|
||||
Input,
|
||||
Tree,
|
||||
Select,
|
||||
DatePicker,
|
||||
Button,
|
||||
Table,
|
||||
Space,
|
||||
Tag,
|
||||
message,
|
||||
Modal,
|
||||
Form,
|
||||
Row,
|
||||
Col,
|
||||
TreeSelect,
|
||||
Radio,
|
||||
} from "antd";
|
||||
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
import {
|
||||
getUserListApi,
|
||||
deleteUserApi,
|
||||
getDeptTreeApi,
|
||||
addUserApi,
|
||||
getRoleListApi,
|
||||
getUserInfoApi,
|
||||
editUserApi,
|
||||
} from "../../../api/system/users";
|
||||
import dataLocale from "antd/es/date-picker/locale/zh_CN";
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import { SearchOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
import React from 'react'
|
||||
|
||||
export default function User() {
|
||||
const postIdList: number[] = [];
|
||||
const [form] = Form.useForm();
|
||||
const [searchForm] = Form.useForm();
|
||||
const [echoId, setEchoId] = useState<any>();
|
||||
const [myTreeData, setMyTreeData] = useState<[]>([]);
|
||||
const [listData, setListData] = useState([]);
|
||||
const [radioValue, setRadioValue] = useState(1);
|
||||
const [searchTreeValue, setSearchTreeValue] = useState("");
|
||||
const [roleList, setRoleList] = useState<any[]>([]);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [modalTitle, setModalTitle] = useState<string>("");
|
||||
const [buttonType, setButtonType] = useState<string>("");
|
||||
const [isShowModal, setIsShowModal] = useState<boolean>(false);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([
|
||||
100, 102, 101, 104,
|
||||
]);
|
||||
const [treeValue, setTreeValue] = useState<string>();
|
||||
const fieldNames = {
|
||||
label: "deptName",
|
||||
title: "deptName",
|
||||
value: "deptId",
|
||||
key: "deptName",
|
||||
};
|
||||
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
||||
deptId: undefined,
|
||||
userName: undefined,
|
||||
phoneNumber: undefined,
|
||||
state: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
pageNum: undefined,
|
||||
pageSize: undefined,
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "userId",
|
||||
key: "Id",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "用户名称",
|
||||
dataIndex: "userName",
|
||||
key: "userName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "用户昵称",
|
||||
dataIndex: "nickName",
|
||||
key: "nikeName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
key: "deptId",
|
||||
dataIndex: "deptName",
|
||||
render: (text: string) => <>{text ? text : "--"}</>,
|
||||
},
|
||||
{
|
||||
title: "手机号码",
|
||||
key: "phoneNumber",
|
||||
dataIndex: "phoneNumber",
|
||||
render: (text: string) => <>{text ? text : "--"}</>,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text: string) => (
|
||||
<>
|
||||
{text === "0" ? (
|
||||
<Tag color="processing">停用</Tag>
|
||||
) : (
|
||||
<Tag color="processing">正常</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
dataIndex: "createTime",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operate",
|
||||
dataIndex: "operate",
|
||||
render: (_: string, record: object) => (
|
||||
<div style={{ color: "#58aaff" }}>
|
||||
<Space>
|
||||
<EditOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleEdit(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
<DeleteOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleDel(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
interface AddUserType {
|
||||
email: string;
|
||||
nickName: string;
|
||||
password: string;
|
||||
phoneNumber: string;
|
||||
postIds: number[];
|
||||
roleIds: number[];
|
||||
sex: string;
|
||||
state: string;
|
||||
userName: string;
|
||||
}
|
||||
|
||||
interface QueryParamsType {
|
||||
deptId?: number;
|
||||
userName?: string;
|
||||
phoneNumber?: string;
|
||||
state?: string;
|
||||
startTime?: string | any;
|
||||
endTime?: string | any;
|
||||
pageNum?: number;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
let addUserParams: AddUserType = {
|
||||
email: "",
|
||||
nickName: "",
|
||||
password: "",
|
||||
phoneNumber: "",
|
||||
postIds: [],
|
||||
roleIds: [],
|
||||
sex: "",
|
||||
state: "",
|
||||
userName: "",
|
||||
};
|
||||
|
||||
const getDeptTreeData = async () => {
|
||||
try {
|
||||
const { code, data } = await getDeptTreeApi();
|
||||
if (code === 1000) {
|
||||
setMyTreeData(data);
|
||||
handleLoopPostList(data);
|
||||
setExpandedKeys(postIdList);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const getUserList = async (newQueryParams: object) => {
|
||||
try {
|
||||
const { code, data } = await getUserListApi(newQueryParams);
|
||||
if (code === 1000) {
|
||||
setListData(data.rows);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const getUserInfo = async () => {
|
||||
try {
|
||||
const { code, data } = await getUserInfoApi(echoId);
|
||||
if (code === 1000) {
|
||||
handleEcho(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleList = async () => {
|
||||
try {
|
||||
const { code, data } = await getRoleListApi();
|
||||
if (code === 1000) {
|
||||
setRoleList(data.rows);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setModalTitle("新增用户");
|
||||
setButtonType("ADD");
|
||||
setIsShowModal(true);
|
||||
};
|
||||
|
||||
const handleEdit = (echoData: any) => {
|
||||
setModalTitle("修改用户");
|
||||
setButtonType("EDIT");
|
||||
setIsShowModal(true);
|
||||
setEchoId(echoData.userId);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
form.validateFields().then((values) => {
|
||||
Object.keys(values).forEach(
|
||||
(key) => values[key] === undefined && delete values[key]
|
||||
);
|
||||
addUserParams = {
|
||||
...addUserParams,
|
||||
...values,
|
||||
userId: echoId,
|
||||
};
|
||||
if (buttonType === "ADD") {
|
||||
handleAddUser();
|
||||
} else if (buttonType === "EDIT") {
|
||||
handleEditUser();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "系统异常，请刷新后重试",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddUser = async () => {
|
||||
const { code } = await addUserApi(addUserParams);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "创建成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
handleClear();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "用户名已经存在",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditUser = async () => {
|
||||
const { code } = await editUserApi(addUserParams);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "修改成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
handleClear();
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "修改失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
searchForm.resetFields();
|
||||
setQueryParams({});
|
||||
getUserList({});
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getUserList(queryParams);
|
||||
};
|
||||
|
||||
const handleDel = async (record: any) => {
|
||||
Modal.confirm({
|
||||
title: `确定删除Id为-${record.userId}-, 用户名为-${record.userName}-的用户吗?`,
|
||||
icon: <ExclamationCircleFilled />,
|
||||
async onOk() {
|
||||
const { code } = await deleteUserApi(record.userId);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "删除成功",
|
||||
});
|
||||
setQueryParams({});
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "删除失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
messageApi.open({
|
||||
type: "warning",
|
||||
content: "取消成功",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleTimePikerValue = (_: any, dates: string[]) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
startTime: dates[0],
|
||||
endTime: dates[1],
|
||||
});
|
||||
searchForm.setFieldsValue({ dataTime: [dates[0], dates[1]] });
|
||||
};
|
||||
|
||||
const handleSearchValues = (e: any) => {
|
||||
const { name, value } = e.target;
|
||||
setQueryParams({ ...queryParams, [name]: value });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
pageNum: page,
|
||||
});
|
||||
};
|
||||
|
||||
const handleTreeSelect = (deptId: any) => {
|
||||
console.log(queryParams);
|
||||
getUserList({
|
||||
...queryParams,
|
||||
deptId: deptId[0],
|
||||
});
|
||||
};
|
||||
|
||||
const handleEcho = (data: any) => {
|
||||
const { userName, nickName, sex, state, phoneNumber, deptId, email } =
|
||||
data.user;
|
||||
const { postIds, roleIds } = data;
|
||||
form.setFieldsValue({
|
||||
userName,
|
||||
nickName,
|
||||
state,
|
||||
phoneNumber,
|
||||
sex,
|
||||
deptId,
|
||||
email,
|
||||
postIds,
|
||||
roleIds,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
handleClear();
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
form.resetFields();
|
||||
setIsShowModal(false);
|
||||
};
|
||||
|
||||
const handleExpandKeys = (key: string, data: object[]) => {
|
||||
const filterRes = new RegExp(key, "i");
|
||||
data.forEach((item: any) => {
|
||||
if (filterRes.test(item?.title?.props?.children)) {
|
||||
postIdList.push(item.key);
|
||||
}
|
||||
item.children ? handleExpandKeys(key, item.children) : "";
|
||||
});
|
||||
};
|
||||
|
||||
const handleLoopPostList = (loopData: object[]) => {
|
||||
loopData.forEach((item: any) => {
|
||||
if (item?.deptId) {
|
||||
const flag = postIdList.some((someItem) => {
|
||||
someItem === item.deptId;
|
||||
});
|
||||
if (!flag) {
|
||||
postIdList.push(item.deptId);
|
||||
}
|
||||
}
|
||||
item.children ? handleLoopPostList(item.children) : "";
|
||||
});
|
||||
};
|
||||
|
||||
const onRadio = (e: any) => {
|
||||
setRadioValue(e.target.value);
|
||||
};
|
||||
|
||||
const onTreeSelect = (newValue: string) => {
|
||||
setTreeValue(newValue);
|
||||
};
|
||||
|
||||
const onTreeSearch = (e?: any) => {
|
||||
const { value } = e.target ? e.target : null;
|
||||
setSearchTreeValue(value);
|
||||
handleExpandKeys(value, treeData);
|
||||
setExpandedKeys(postIdList);
|
||||
setAutoExpandParent(true);
|
||||
};
|
||||
|
||||
const onExpand = (newExpandedKeys: React.Key[]) => {
|
||||
console.log(newExpandedKeys);
|
||||
setExpandedKeys(newExpandedKeys);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
|
||||
const treeData = useMemo(() => {
|
||||
const loop = (data: any[]): any[] =>
|
||||
data.map((item) => {
|
||||
const strTitle = item.deptName as string;
|
||||
const index = strTitle.indexOf(searchTreeValue);
|
||||
const beforeStr = strTitle.substring(0, index);
|
||||
const afterStr = strTitle.slice(index + searchTreeValue.length);
|
||||
const title =
|
||||
index > -1 ? (
|
||||
<span>
|
||||
{beforeStr}
|
||||
<span className="site-tree-search-value">{searchTreeValue}</span>
|
||||
{afterStr}
|
||||
</span>
|
||||
) : (
|
||||
<span>{strTitle}</span>
|
||||
);
|
||||
if (item.children) {
|
||||
return { title, key: item.deptId, children: loop(item.children) };
|
||||
}
|
||||
return {
|
||||
title,
|
||||
key: item.deptId,
|
||||
};
|
||||
});
|
||||
return loop(myTreeData);
|
||||
}, [myTreeData]);
|
||||
|
||||
useEffect(() => {
|
||||
getDeptTreeData();
|
||||
getRoleList();
|
||||
getUserInfo();
|
||||
}, [echoId]);
|
||||
|
||||
useEffect(() => {
|
||||
getUserList({});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="content">
|
||||
<div className="dept-content">
|
||||
<Input
|
||||
allowClear
|
||||
style={{ marginBottom: 8 }}
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder="请输入部门名称"
|
||||
onChange={onTreeSearch}
|
||||
/>
|
||||
<Tree
|
||||
onExpand={onExpand}
|
||||
defaultExpandAll={true}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
treeData={treeData}
|
||||
onSelect={handleTreeSelect}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className="right-user">
|
||||
<Form
|
||||
layout="inline"
|
||||
form={searchForm}
|
||||
onFinish={handleSearch}
|
||||
style={{ fontWeight: "700", marginLeft: 12, marginTop: 23 }}
|
||||
>
|
||||
<Form.Item
|
||||
label="用户名称"
|
||||
name="userName"
|
||||
style={{ width: 300 + "px", marginTop: "10px" }}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入用户名称"
|
||||
name="userName"
|
||||
allowClear
|
||||
value={queryParams.userName}
|
||||
onChange={handleSearchValues}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="手机号码"
|
||||
name="phoneNumber"
|
||||
style={{ width: 300 + "px", marginTop: "10px" }}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入手机号码"
|
||||
name="phoneNumber"
|
||||
allowClear
|
||||
value={queryParams.phoneNumber}
|
||||
onChange={handleSearchValues}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="state" style={{ marginTop: "10px" }}>
|
||||
<Select
|
||||
style={{ width: 250 }}
|
||||
placeholder="用户状态"
|
||||
allowClear
|
||||
options={[
|
||||
{ value: "1", label: "正常" },
|
||||
{ value: "0", label: "停用" },
|
||||
]}
|
||||
value={queryParams.state}
|
||||
onChange={(value: any) =>
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
state: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="创建时间"
|
||||
name="dateTime"
|
||||
style={{ marginTop: "10px" }}
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
locale={dataLocale}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
onChange={handleTimePikerValue}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginTop: "10px" }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{ marginLeft: 20 + "px" }}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginTop: "10px" }}>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className="add-content">
|
||||
<>
|
||||
<Button type="primary" onClick={handleAdd}>
|
||||
<PlusOutlined />
|
||||
新增
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
<div className="table-content">
|
||||
<>
|
||||
{contextHolder}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={listData}
|
||||
className="article-table"
|
||||
pagination={{
|
||||
onChange: handlePageChange,
|
||||
locale: {
|
||||
jump_to: "跳至",
|
||||
page: "页",
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
<>
|
||||
{contextHolder}
|
||||
<Modal
|
||||
title={modalTitle}
|
||||
width={700}
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
open={isShowModal}
|
||||
onOk={handleConfirm}
|
||||
onCancel={handleCancel}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
name="basic"
|
||||
initialValues={{ remember: true }}
|
||||
labelCol={{ span: 6 }}
|
||||
onFinish={handleConfirm}
|
||||
autoComplete="off"
|
||||
className="modal-form"
|
||||
>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户名称"
|
||||
name="userName"
|
||||
rules={[{ required: true, message: "请输入用户名称" }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入用户名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户昵称"
|
||||
name="nickName"
|
||||
rules={[{ required: true, message: "请输入用户昵称" }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入用户昵称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户性别"
|
||||
name="sex"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择用户性别"
|
||||
options={[
|
||||
{ value: "0", label: "男" },
|
||||
{ value: "1", label: "女" },
|
||||
{ value: "2", label: "未知" },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="用户密码"
|
||||
name="password"
|
||||
rules={[{ required: true, message: "请输入用户密码" }]}
|
||||
>
|
||||
<Input.Password
|
||||
defaultValue={""}
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="归属部门"
|
||||
name="deptId"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<TreeSelect
|
||||
showSearch
|
||||
style={{ width: "100%" }}
|
||||
value={treeValue}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
||||
placeholder="请选择"
|
||||
allowClear
|
||||
fieldNames={fieldNames}
|
||||
treeDefaultExpandAll
|
||||
onChange={onTreeSelect}
|
||||
treeData={myTreeData}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="手机号码"
|
||||
name="phoneNumber"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Input placeholder="请输入手机号码" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="邮箱"
|
||||
name="email"
|
||||
rules={[{ required: false }]}
|
||||
>
|
||||
<Input defaultValue={""} placeholder="请输入邮箱" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="状态"
|
||||
name="state"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group onChange={onRadio} value={radioValue}>
|
||||
<Radio value="1">正常</Radio>
|
||||
<Radio value="0">停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="岗位"
|
||||
name="postIds"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
defaultValue={[]}
|
||||
options={[
|
||||
{ value: "董事长", label: "董事长" },
|
||||
{ value: "项目经理", label: "项目经理" },
|
||||
{ value: "人力资源", label: "人力资源" },
|
||||
{ value: "普通员工", label: "普通员工" },
|
||||
]}
|
||||
placeholder="请选择岗位"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="角色"
|
||||
name="roleIds"
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select mode="multiple" placeholder="请选择角色">
|
||||
{roleList.map((item) => (
|
||||
<Select.Option key={item.roleId} value={item.roleId}>
|
||||
{item.roleName}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="备注"
|
||||
labelCol={{ span: 3 }}
|
||||
rules={[
|
||||
{
|
||||
required: false,
|
||||
message: "Please input your password!",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.TextArea placeholder="请输入内容" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return(
|
||||
<div>user</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user