Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
08811a5275 | ||
|
|
c8f4f5e21a | ||
|
|
d1b1b2b225 | ||
|
|
96ce9246ee | ||
|
|
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 #生成菜单文件
|
||||
```
|
||||
```
|
||||
42
package-lock.json
generated
42
package-lock.json
generated
@@ -8,10 +8,12 @@
|
||||
"name": "react-vite",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"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",
|
||||
"nprogress": "^0.2.0",
|
||||
@@ -85,12 +87,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ant-design/icons": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
|
||||
"integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
|
||||
"version": "5.2.6",
|
||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
|
||||
"integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@ant-design/icons-svg": "^4.2.1",
|
||||
"@ant-design/icons-svg": "^4.3.0",
|
||||
"@babel/runtime": "^7.11.2",
|
||||
"classnames": "^2.2.6",
|
||||
"rc-util": "^5.31.1"
|
||||
@@ -104,9 +106,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ant-design/icons-svg": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
|
||||
"integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
|
||||
"integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
|
||||
},
|
||||
"node_modules/@ant-design/react-slick": {
|
||||
"version": "1.0.2",
|
||||
@@ -1803,9 +1805,9 @@
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
|
||||
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||
"version": "1.11.10",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
@@ -4353,21 +4355,21 @@
|
||||
}
|
||||
},
|
||||
"@ant-design/icons": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.1.4.tgz",
|
||||
"integrity": "sha512-YHKL7Jx3bM12OxvtiYDon04BsBT/6LGitYEqar3GljzWaAyMOAD8i/uF1Rsi5Us/YNdWWXBGSvZV2OZWMpJlcA==",
|
||||
"version": "5.2.6",
|
||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
|
||||
"integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
|
||||
"requires": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@ant-design/icons-svg": "^4.2.1",
|
||||
"@ant-design/icons-svg": "^4.3.0",
|
||||
"@babel/runtime": "^7.11.2",
|
||||
"classnames": "^2.2.6",
|
||||
"rc-util": "^5.31.1"
|
||||
}
|
||||
},
|
||||
"@ant-design/icons-svg": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
|
||||
"integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
|
||||
"integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
|
||||
},
|
||||
"@ant-design/react-slick": {
|
||||
"version": "1.0.2",
|
||||
@@ -5471,9 +5473,9 @@
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"dayjs": {
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
|
||||
"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
|
||||
"version": "1.11.10",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.4",
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"antd": "^5.7.3",
|
||||
"axios": "^1.4.0",
|
||||
@@ -17,7 +18,6 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
59
src/api/system/dept.ts
Normal file
59
src/api/system/dept.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import request from "../../utils/request";
|
||||
interface queryParamsType {
|
||||
deptName?: string;
|
||||
state?: number;
|
||||
}
|
||||
interface addParamsType {
|
||||
deptName: string;
|
||||
leader:string;
|
||||
leaderId:number;
|
||||
parentId?:number;
|
||||
ancestors?:string
|
||||
delFlag?:string
|
||||
deptId?:number
|
||||
email?:string
|
||||
phone?:string
|
||||
state?:string
|
||||
}
|
||||
export const getDatasAPI = (params: queryParamsType) => {
|
||||
console.log(params);
|
||||
|
||||
return request({
|
||||
url: "/admin/dept",
|
||||
method: "get",
|
||||
params: params,
|
||||
});
|
||||
};
|
||||
export const editDataAPI = (params: addParamsType) => {
|
||||
console.log(params);
|
||||
params.leaderId=0
|
||||
return request({
|
||||
url: "/admin/dept",
|
||||
method: "put",
|
||||
data:params
|
||||
});
|
||||
};
|
||||
export const delDataAPI=(deptId:number)=>{
|
||||
console.log(deptId);
|
||||
|
||||
return request({
|
||||
url:`admin/dept/${deptId}`,
|
||||
method:'delete'
|
||||
})
|
||||
}
|
||||
export const addDataAPI=(dept:addParamsType)=>{
|
||||
console.log(dept);
|
||||
dept.leaderId=0
|
||||
return request({
|
||||
|
||||
url:`admin/dept`,
|
||||
method:'post',
|
||||
data:dept
|
||||
})
|
||||
}
|
||||
export const getDataAPI=(deptId:number)=>{
|
||||
return request({
|
||||
url:`/admin/dept/${deptId}`,
|
||||
method:'get'
|
||||
})
|
||||
}
|
||||
@@ -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",
|
||||
});
|
||||
};
|
||||
79
src/api/system/role.ts
Normal file
79
src/api/system/role.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import { number } from "echarts";
|
||||
import request from "../../utils/request";
|
||||
interface paramsType {
|
||||
createTime?: string,
|
||||
dataScope?: string,
|
||||
deptIds?: any[],
|
||||
menuIds?: any[],
|
||||
roleId?: number,
|
||||
roleKey?: string,
|
||||
roleName?: string,
|
||||
state?: string,
|
||||
endTime?: string,
|
||||
startTime?: string,
|
||||
pageNum?: number,
|
||||
pageSize?: number
|
||||
}
|
||||
export const getRolesDataAPI = (params: paramsType) => {
|
||||
const { endTime, roleKey, roleName, startTime, state, pageNum, pageSize } = params
|
||||
// console.log('API',params);
|
||||
|
||||
return request({
|
||||
url: '/admin/role',
|
||||
method: 'get',
|
||||
params: {
|
||||
endTime,
|
||||
roleKey,
|
||||
roleName,
|
||||
startTime,
|
||||
state,
|
||||
pageNum,
|
||||
pageSize
|
||||
}
|
||||
})
|
||||
}
|
||||
export const delRoleAPI = (params: paramsType) => {
|
||||
let { roleId } = params
|
||||
// console.log(roleId);
|
||||
|
||||
return request({
|
||||
url: `/admin/role/${roleId}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
export const getMenuLiseAPI = () => {
|
||||
|
||||
return request({
|
||||
url: '/admin/menu',
|
||||
method: 'get',
|
||||
|
||||
})
|
||||
}
|
||||
export const addRoleAPI = (data:any) => {
|
||||
// console.log('addAPI',data);
|
||||
return request({
|
||||
url: `/admin/role`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
export const getRoleAPI = (params:paramsType) => {
|
||||
// data.menuIds=[]
|
||||
const {roleId}=params
|
||||
|
||||
return request({
|
||||
url: `/admin/role/${roleId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
export const setRoleDataAPI = (data:any) => {
|
||||
// data.menuIds=[]
|
||||
// const {roleId}=params
|
||||
console.log('修改',data);
|
||||
|
||||
return request({
|
||||
url: `/admin/role`,
|
||||
method: 'put',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
@@ -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
|
||||
48
src/view/system/dept/index.scss
Normal file
48
src/view/system/dept/index.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.deptBox{
|
||||
background: white;
|
||||
padding: 20px;
|
||||
|
||||
.tablebox{
|
||||
table{
|
||||
thead{
|
||||
th::before{
|
||||
|
||||
}
|
||||
tr{
|
||||
.ant-table-cell{
|
||||
background: white;
|
||||
color:#909399
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
.ant-table-cell{
|
||||
background: white;
|
||||
color:#606266
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-cell{
|
||||
button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
button:hover
|
||||
{
|
||||
border: 0px rgb(250, 250, 250);
|
||||
}
|
||||
}
|
||||
}
|
||||
.newAdd{
|
||||
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
button{
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,586 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Dept() {
|
||||
return <div>dept</div>;
|
||||
import React, { useState, createContext, useEffect } from "react";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Select,
|
||||
message,
|
||||
Table,
|
||||
Tag,
|
||||
Modal,
|
||||
Form,
|
||||
InputNumber,
|
||||
Radio,
|
||||
ConfigProvider,
|
||||
TreeSelect,
|
||||
Row,
|
||||
Col,
|
||||
// Icon
|
||||
} from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import {
|
||||
SyncOutlined,
|
||||
SearchOutlined,
|
||||
ExclamationCircleFilled,
|
||||
SwapOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import zh_CN from "antd/es/locale/zh_CN";
|
||||
import "dayjs/locale/zh-cn";
|
||||
// import 'moment/locale/zh-cn';
|
||||
import {
|
||||
getDatasAPI,
|
||||
delDataAPI,
|
||||
addDataAPI,
|
||||
editDataAPI,
|
||||
getDataAPI,
|
||||
} from "../../../api/system/dept";
|
||||
import "./index.scss";
|
||||
import { useForm } from "antd/es/form/Form";
|
||||
interface searchValueType {
|
||||
deptName: string | undefined;
|
||||
state: string | undefined;
|
||||
}
|
||||
//表格单项数据类型
|
||||
interface TableDataType {
|
||||
children: number[];
|
||||
createTime: string;
|
||||
deptId: number;
|
||||
deptName: string;
|
||||
orderNum: string;
|
||||
state: string;
|
||||
}
|
||||
let thisDept = {};
|
||||
let treeData: any = [];
|
||||
let isTreeAnyId = false;
|
||||
// const Dayjs=dayjs.Dayjs
|
||||
export default function Role() {
|
||||
const { confirm } = Modal;
|
||||
//提示组件
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [isAllExpend, setIsAllExpend] = useState(true);
|
||||
//搜索框内所有内容
|
||||
let [searchValue, setSearchValue] = useState<searchValueType>({
|
||||
deptName: undefined,
|
||||
state: undefined,
|
||||
});
|
||||
// const is
|
||||
//树列表数据
|
||||
|
||||
// const [isTreeAnyId,setIsTreeAnyId]=useState(false)
|
||||
const [treeAnyId, setTreeAnyId] = useState<number[]>([]);
|
||||
const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);
|
||||
//Modal
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [modalTitle, setModalTitle] = useState("");
|
||||
//表单区域
|
||||
const [isDisbaled, setIsDisbaled] = useState<boolean>(false);
|
||||
//serach
|
||||
const [formSearch] = Form.useForm();
|
||||
const [formModal] = Form.useForm();
|
||||
//当前页面页数
|
||||
//表格内数据
|
||||
let [tableData, setTableData] = useState<TableDataType[]>([]);
|
||||
//表格格式
|
||||
const columns: ColumnsType<TableDataType> = [
|
||||
{
|
||||
title: "部门名称",
|
||||
dataIndex: "deptName",
|
||||
key: "deptName",
|
||||
},
|
||||
{
|
||||
title: "排序",
|
||||
dataIndex: "orderNum",
|
||||
key: "orderNum",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text) => (
|
||||
<>
|
||||
{text === "0" ? (
|
||||
<Tag color="success">正常</Tag>
|
||||
) : (
|
||||
<Tag color="error">停用</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
dataIndex: "createTime",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "",
|
||||
dataIndex: "",
|
||||
render: (text) => (
|
||||
<>
|
||||
<Button type="link" onClick={() => handleNewAdd(text.deptId)}>
|
||||
{"新增"}
|
||||
</Button>
|
||||
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
|
||||
<Button type="link" onClick={() => handleEdit(text)}>
|
||||
{"修改"}
|
||||
</Button>
|
||||
{text.parentId !== 0 ? (
|
||||
<Button type="link" onClick={() => handleDelete(text)}>
|
||||
{"删除"}
|
||||
</Button>
|
||||
) : null}
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
//请求表格内容参数
|
||||
let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
|
||||
deptName: undefined,
|
||||
state: undefined,
|
||||
});
|
||||
const handleDelete = (dept: any) => {
|
||||
confirm({
|
||||
title: "系统提示",
|
||||
icon: <ExclamationCircleFilled />,
|
||||
content: `确定删除角色名称为${dept.deptName}的数据吗`,
|
||||
okText: "确定",
|
||||
okType: "danger",
|
||||
cancelText: "取消",
|
||||
onOk() {
|
||||
(async () => {
|
||||
try {
|
||||
let { code } = await delDataAPI(dept.deptId);
|
||||
if (code === 1000) {
|
||||
console.log("del", dept.deptId);
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
getDatas({});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
})();
|
||||
},
|
||||
onCancel() {
|
||||
console.log("Cancel");
|
||||
},
|
||||
});
|
||||
};
|
||||
const handleSerach = () => {
|
||||
// console.log("搜索框", searchValue);
|
||||
// setSearchValue({ ...searchValue });
|
||||
searchValue = formSearch.getFieldsValue();
|
||||
console.log(searchValue);
|
||||
// queryTableDataParams={...searchValue}
|
||||
setQueryTableDataParams({ ...searchValue });
|
||||
};
|
||||
const handleReset = () => {
|
||||
formSearch.resetFields();
|
||||
searchValue = formSearch.getFieldsValue();
|
||||
|
||||
setQueryTableDataParams({ ...searchValue });
|
||||
// setSearchValue({ ...searchValue });
|
||||
// setCount(1)
|
||||
};
|
||||
const handleEdit = async (dept: any) => {
|
||||
if (dept.parentId === 0) {
|
||||
setIsDisbaled(true);
|
||||
formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
|
||||
} else {
|
||||
setIsDisbaled(false);
|
||||
// formModal.setFieldsValue({...thisDept});
|
||||
}
|
||||
await getData(dept.deptId);
|
||||
if (dept.parentId === 0) {
|
||||
setIsDisbaled(true);
|
||||
formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
|
||||
} else {
|
||||
setIsDisbaled(false);
|
||||
formModal.setFieldsValue({ ...thisDept });
|
||||
}
|
||||
console.log(thisDept);
|
||||
setModalTitle("修改角色");
|
||||
setIsModalOpen(true);
|
||||
// formModal.setFieldsValue({...thisDept});
|
||||
// formModal.setFieldsValue({...thisDept,parentId:dept.deptName});
|
||||
};
|
||||
const handleNewAdd = (deptId?: string) => {
|
||||
setModalTitle("新增角色");
|
||||
setIsModalOpen(true);
|
||||
if (deptId) {
|
||||
formModal.setFieldsValue({
|
||||
parentId: deptId,
|
||||
deptName: undefined,
|
||||
orderNum: 0,
|
||||
leader: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
state: "0",
|
||||
});
|
||||
} else
|
||||
formModal.setFieldsValue({
|
||||
parentId: undefined,
|
||||
deptName: undefined,
|
||||
orderNum: 0,
|
||||
leader: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
state: "0",
|
||||
});
|
||||
};
|
||||
const handleModalOk = () => {
|
||||
formModal
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
// form.resetFields();
|
||||
console.log("add", values);
|
||||
// onCreate(values);
|
||||
// setSelectedKeys([])
|
||||
// setIsModalOpen(false);
|
||||
if (modalTitle == "新增角色") {
|
||||
console.log(values);
|
||||
postAdd(values);
|
||||
} else if (modalTitle == "修改角色") {
|
||||
editData(values);
|
||||
}
|
||||
})
|
||||
.catch((info) => {
|
||||
console.log("Validate Failed:", info);
|
||||
});
|
||||
};
|
||||
//遍历菜单树获取所有节点ID
|
||||
const getTree = function (tree: any) {
|
||||
tree.title = tree.deptName;
|
||||
tree.value = tree.deptId;
|
||||
if (!isTreeAnyId) {
|
||||
treeAnyId.push(tree.deptId);
|
||||
setTreeAnyId([...treeAnyId]);
|
||||
}
|
||||
if (tree.children) {
|
||||
for (let child of tree.children) {
|
||||
getTree(child);
|
||||
}
|
||||
}
|
||||
// treeData=tree
|
||||
};
|
||||
const handleModalCanle = () => {
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
//获取详细数据
|
||||
const getData = async (deptId: number) => {
|
||||
try {
|
||||
const { code, data } = await getDataAPI(deptId);
|
||||
if (code === 1000) {
|
||||
thisDept = data;
|
||||
// console.log(thisDept);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
//修改数据
|
||||
const editData = async (dept: any) => {
|
||||
try {
|
||||
console.log(thisDept);
|
||||
|
||||
console.log({ ...thisDept, ...dept });
|
||||
|
||||
const { code } = await editDataAPI({ ...thisDept, ...dept });
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
setIsModalOpen(false);
|
||||
getDatas(queryTableDataParams);
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "操作失败",
|
||||
});
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
//获取部门数据
|
||||
const getDatas = async (queryTableDataParams: any) => {
|
||||
console.log("参数:", queryTableDataParams);
|
||||
try {
|
||||
const { code, data } = await getDatasAPI(queryTableDataParams);
|
||||
console.log(data);
|
||||
|
||||
if (code === 1000) {
|
||||
// console.log(isTreeAnyId);
|
||||
|
||||
for (let child of data) {
|
||||
getTree(child);
|
||||
}
|
||||
setExpandedRowKeys([...treeAnyId]);
|
||||
// console.log(treeAnyId);
|
||||
console.log(data);
|
||||
|
||||
setTableData(data);
|
||||
treeData = data;
|
||||
console.log(treeData);
|
||||
|
||||
// setTotal(data.total);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.log("555", err);
|
||||
}
|
||||
isTreeAnyId = true;
|
||||
};
|
||||
//新增
|
||||
const postAdd = async (dept: any) => {
|
||||
try {
|
||||
let { code } = await addDataAPI(dept);
|
||||
console.log(code);
|
||||
|
||||
if (code === 1000) {
|
||||
console.log("success");
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
formModal.setFieldsValue({});
|
||||
getDatas({ ...queryTableDataParams });
|
||||
setIsModalOpen(false);
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "角色名称已存在",
|
||||
});
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
useEffect(() => {
|
||||
queryTableDataParams = {
|
||||
...queryTableDataParams,
|
||||
};
|
||||
|
||||
getDatas(queryTableDataParams);
|
||||
// console.log(queryParams);
|
||||
console.log(tableData);
|
||||
}, [queryTableDataParams]);
|
||||
return (
|
||||
<ConfigProvider locale={zh_CN}>
|
||||
<div className="deptBox">
|
||||
<Form
|
||||
layout="inline"
|
||||
initialValues={undefined}
|
||||
form={formSearch}
|
||||
onFinish={handleSerach}
|
||||
style={{ fontWeight: "700" }}
|
||||
>
|
||||
<Form.Item
|
||||
label="部门名称"
|
||||
name="deptName"
|
||||
style={{ width: 300 + "px", marginTop: "10px" }}
|
||||
>
|
||||
<Input placeholder="请输入部门名称" allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="状态"
|
||||
name="state"
|
||||
wrapperCol={{ span: 22 }}
|
||||
style={{ marginTop: "10px" }}
|
||||
>
|
||||
<Select
|
||||
style={{ width: 300 + "px" }}
|
||||
allowClear
|
||||
showSearch
|
||||
placeholder="请选择部门状态"
|
||||
optionFilterProp="lable"
|
||||
options={[
|
||||
{
|
||||
value: 0,
|
||||
label: "正常",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: "停用",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginTop: "10px" }}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{ marginLeft: 20 + "px" }}
|
||||
onClick={() => handleSerach()}
|
||||
>
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ marginTop: "10px" }}>
|
||||
<Button onClick={() => handleReset()}>
|
||||
<SyncOutlined />
|
||||
重置
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{/* 新增 */}
|
||||
<div className="newAdd">
|
||||
<Button type="primary" onClick={() => handleNewAdd()}>
|
||||
+新增
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ backgroundColor: "rgb(144,147,153)" }}
|
||||
onClick={() => {
|
||||
setIsAllExpend(!isAllExpend);
|
||||
if (isAllExpend) {
|
||||
setExpandedRowKeys([]);
|
||||
} else setExpandedRowKeys(treeAnyId);
|
||||
}}
|
||||
>
|
||||
<SwapOutlined rotate={90} />
|
||||
{isAllExpend ? "全部收起" : "全部展开"}
|
||||
</Button>
|
||||
</div>
|
||||
{/* 弹出 */}
|
||||
<Modal
|
||||
open={isModalOpen}
|
||||
title={modalTitle}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
onCancel={handleModalCanle}
|
||||
onOk={handleModalOk}
|
||||
width={"700px"}
|
||||
>
|
||||
<Form
|
||||
form={formModal}
|
||||
// layout="inline"
|
||||
name="form_in_modal"
|
||||
initialValues={{ state: "0" }}
|
||||
labelAlign="right"
|
||||
// labelCol={{span:12}}
|
||||
wrapperCol={{ span: 16 }}
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
name="parentId"
|
||||
label="上级部门"
|
||||
rules={[{ required: true, message: "请选择上级部门" }]}
|
||||
// style={{ width: 100 + "%" }}
|
||||
>
|
||||
<TreeSelect
|
||||
disabled={isDisbaled}
|
||||
// showSearch
|
||||
style={{ width: "559px" }}
|
||||
// value={value}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
|
||||
placeholder="请选择上级部门"
|
||||
allowClear
|
||||
// treeDefaultExpandAll
|
||||
// onChange={onChange}
|
||||
treeData={treeData}
|
||||
//
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="deptName"
|
||||
label="部门名称"
|
||||
rules={[{ required: true, message: "请输入部门名称" }]}
|
||||
// style={{ width: 45 + "%", marginTop: "20px" }}
|
||||
>
|
||||
<Input placeholder="请输入部门名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
required
|
||||
name="orderNum"
|
||||
label="显示顺序"
|
||||
rules={[{ required: true, message: "请输入角色显示顺序" }]}
|
||||
// style={{ width: 40 + "%", marginTop: "20px" }}
|
||||
>
|
||||
<InputNumber min={0} controls={true} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{translate:'25px'}}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="leader"
|
||||
label="负责人"
|
||||
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
|
||||
>
|
||||
<Input placeholder="请输入负责人" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="phone"
|
||||
label="联系电话"
|
||||
// style={{ width: 40 + "%", marginTop: "20px" }}
|
||||
>
|
||||
<Input placeholder="请输入联系电话" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row style={{translate:'38px'}}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="邮箱"
|
||||
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
|
||||
>
|
||||
<Input placeholder="请输入邮箱" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="state"
|
||||
label="状态"
|
||||
className="collection-create-form_last-form-item"
|
||||
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio defaultChecked={true} value="0">
|
||||
正常
|
||||
</Radio>
|
||||
<Radio value="1">停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
{/* 表格 */}
|
||||
<div className="tablebox">
|
||||
{contextHolder}
|
||||
<Table
|
||||
expandedRowKeys={expandedRowKeys}
|
||||
onExpand={(expanded, record) => {
|
||||
// console.log(expanded, record);
|
||||
|
||||
if (expanded) {
|
||||
setExpandedRowKeys([record.deptId, ...expandedRowKeys]);
|
||||
} else {
|
||||
const newEx = expandedRowKeys.filter((element) => {
|
||||
return element != record.deptId;
|
||||
});
|
||||
// console.log(expandedRowKeys);
|
||||
|
||||
setExpandedRowKeys(newEx);
|
||||
}
|
||||
console.log(expandedRowKeys);
|
||||
}}
|
||||
columns={columns}
|
||||
rowKey={"deptId"}
|
||||
dataSource={tableData}
|
||||
pagination={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
103
src/view/system/role/index.scss
Normal file
103
src/view/system/role/index.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
.roleBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// .SearchBox{
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// .ipt{
|
||||
// margin-top: 10px;
|
||||
// margin-right: 10px;
|
||||
// height: 32px;
|
||||
// line-height: 32px;
|
||||
// display: flex;
|
||||
// span{
|
||||
// font-weight: 700;
|
||||
// // line-height: 32px;
|
||||
// padding-right: 12px;
|
||||
// // color: #606266;
|
||||
// }
|
||||
// .item,input{
|
||||
// flex: 1;
|
||||
// font-weight: 400;
|
||||
// // width: 300px;
|
||||
// margin-right: 40px;
|
||||
// .ant-space-item{
|
||||
// // margin-left: 500px;
|
||||
// width: 500px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .btn{
|
||||
// button{
|
||||
// margin-right: 15px;
|
||||
// }
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
// }
|
||||
// .btn{
|
||||
|
||||
// button{
|
||||
// margin-right: 15px;
|
||||
// }
|
||||
// margin-top: 10px;
|
||||
// }
|
||||
.tablebox{
|
||||
table{
|
||||
thead{
|
||||
th::before{
|
||||
|
||||
}
|
||||
tr{
|
||||
.ant-table-cell{
|
||||
background: white;
|
||||
color:#909399
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
.ant-table-cell{
|
||||
background: white;
|
||||
color:#606266
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-cell{
|
||||
button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
button:hover
|
||||
{
|
||||
border: 0px rgb(250, 250, 250);
|
||||
}
|
||||
}
|
||||
}
|
||||
.newadd{
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
.myTree{
|
||||
margin-top: 10px;
|
||||
border: 1px solid rgb(173, 131, 131);
|
||||
width: 250px;
|
||||
}
|
||||
.checkBox{
|
||||
margin-top: 5px;
|
||||
width: 250px;
|
||||
display: flex;
|
||||
label{
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
730
src/view/system/role/index.tsx
Normal file
730
src/view/system/role/index.tsx
Normal file
@@ -0,0 +1,730 @@
|
||||
import React, { useState, createContext, useEffect } from "react";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
Space,
|
||||
message,
|
||||
Table,
|
||||
Tag,
|
||||
Modal,
|
||||
Pagination,
|
||||
Form,
|
||||
Checkbox,
|
||||
InputNumber,
|
||||
Radio,
|
||||
Tree,
|
||||
ConfigProvider,
|
||||
} from "antd";
|
||||
import type { CheckboxChangeEvent } from "antd/es/checkbox";
|
||||
import type { DatePickerProps, RangePickerProps } from "antd/es/date-picker";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import {
|
||||
SyncOutlined,
|
||||
SearchOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
import zh_CN from "antd/es/locale/zh_CN";
|
||||
import dataLocale from "antd/es/date-picker/locale/zh_CN";
|
||||
import "dayjs/locale/zh-cn";
|
||||
import dayjs, { Dayjs } from "dayjs";
|
||||
// import 'moment/locale/zh-cn';
|
||||
import "./index.scss";
|
||||
import {
|
||||
getRolesDataAPI,
|
||||
delRoleAPI,
|
||||
getRoleAPI,
|
||||
addRoleAPI,
|
||||
setRoleDataAPI,
|
||||
getMenuLiseAPI,
|
||||
} from "../../../api/system/role";
|
||||
import { useForm } from "antd/es/form/Form";
|
||||
interface searchValueType {
|
||||
dateTime: string[] | undefined;
|
||||
roleName: string | undefined;
|
||||
roleKey: string | undefined;
|
||||
state: string | undefined;
|
||||
startTime: string | undefined;
|
||||
endTime: string | undefined;
|
||||
}
|
||||
//表格单项数据类型
|
||||
interface TableDataType {
|
||||
createTime: string;
|
||||
dataScope: string;
|
||||
deptIds: any[];
|
||||
menuIds: any[];
|
||||
roleId: number;
|
||||
roleKey: string;
|
||||
roleName: string;
|
||||
roleSort: string;
|
||||
state: string;
|
||||
updateTime: string;
|
||||
key?: number;
|
||||
total?: number;
|
||||
}
|
||||
//当前选择的角色信息
|
||||
const fieldNames = {
|
||||
title: "menuName",
|
||||
key: "menuId",
|
||||
children: "children",
|
||||
};
|
||||
let thisrole: any = {};
|
||||
let treeIds: number[] = [];
|
||||
// const Dayjs=dayjs.Dayjs
|
||||
export default function Role() {
|
||||
const { confirm } = Modal;
|
||||
const { RangePicker } = DatePicker;
|
||||
//提示组件
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
//搜索框内所有内容
|
||||
let [searchValue, setSearchValue] = useState<searchValueType>({
|
||||
dateTime: undefined,
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
startTime: undefined,
|
||||
state: undefined,
|
||||
endTime: undefined,
|
||||
});
|
||||
//树列表数据
|
||||
const [menuTreeData, setMenuTreeData] = useState([]);
|
||||
//父子联动
|
||||
const [checkStrictly, setCheckStrictly] = useState(false);
|
||||
//树所有节点IDs
|
||||
//树是否自动展开
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
|
||||
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
|
||||
//Modal
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [modalTitle, setModalTitle] = useState("");
|
||||
//表单区域
|
||||
const [form] = Form.useForm();
|
||||
//serach
|
||||
const [formSearch] = Form.useForm();
|
||||
//当前页面页数
|
||||
let [count, setCount] = useState(1);
|
||||
//表格内数据
|
||||
let [tableData, setTableData] = useState<TableDataType[]>([]);
|
||||
//表格数据总条数
|
||||
let [total, setTotal] = useState<number>(0);
|
||||
//表格格式
|
||||
const columns: ColumnsType<TableDataType> = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "key",
|
||||
key: "key",
|
||||
},
|
||||
{
|
||||
title: "角色名称",
|
||||
dataIndex: "roleName",
|
||||
key: "roleName",
|
||||
},
|
||||
{
|
||||
title: "角色权限",
|
||||
dataIndex: "roleKey",
|
||||
key: "roleKey",
|
||||
},
|
||||
{
|
||||
title: "数据范围",
|
||||
key: "dataScope",
|
||||
dataIndex: "dataScope",
|
||||
render: (text) => {
|
||||
switch (text) {
|
||||
case "1":
|
||||
return <>所有数据权限</>;
|
||||
case "2":
|
||||
return <>自定义数据权限</>;
|
||||
case "3":
|
||||
return <>本部门数据权限</>;
|
||||
default:
|
||||
return <>本部门及以下数据权限</>;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "显示顺序",
|
||||
key: "roleSort",
|
||||
dataIndex: "roleSort",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text) => (
|
||||
<>
|
||||
{text === "0" ? (
|
||||
<Tag color="success">正常</Tag>
|
||||
) : (
|
||||
<Tag color="error">停用</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
dataIndex: "createTime",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "",
|
||||
dataIndex: "",
|
||||
render: (text) => (
|
||||
<>
|
||||
<Button type="link" onClick={() => handleEdit(text)}>
|
||||
{"修改"}
|
||||
</Button>
|
||||
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
|
||||
<Button type="link" danger onClick={() => handleDelete(text)}>
|
||||
{"删除"}
|
||||
</Button>
|
||||
<Button type="link">{"分配用户"}</Button>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
//请求表格内容参数
|
||||
let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
|
||||
roleKey: undefined,
|
||||
roleName: undefined,
|
||||
state: undefined,
|
||||
endTime: undefined,
|
||||
startTime: undefined,
|
||||
pageNum: undefined,
|
||||
pageSize: undefined,
|
||||
});
|
||||
const onTreeExpand = (expandedKeysValue: React.Key[]) => {
|
||||
// console.log("onExpand", expandedKeysValue);
|
||||
setExpandedKeys(expandedKeysValue);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
const onCheckExpand = (e: CheckboxChangeEvent) => {
|
||||
console.log(`checked = ${e.target.checked}`);
|
||||
console.log(treeIds);
|
||||
if (e.target.checked) setExpandedKeys(treeIds);
|
||||
else setExpandedKeys([]);
|
||||
console.log(expandedKeys);
|
||||
};
|
||||
const onCheckAll = (e: CheckboxChangeEvent) => {
|
||||
console.log(`checked = ${e.target.checked}`);
|
||||
if (e.target.checked) setCheckedKeys(treeIds);
|
||||
else setCheckedKeys([]);
|
||||
};
|
||||
const onCheckFaSon = (e: CheckboxChangeEvent) => {
|
||||
console.log(`checked = ${e.target.checked}`);
|
||||
setCheckStrictly(!e.target.checked);
|
||||
};
|
||||
const onTreeCheck = (checkedKeysValue: any) => {
|
||||
console.log("onCheck", checkedKeysValue.checked);
|
||||
console.log("onCheck", checkedKeysValue);
|
||||
if (checkStrictly === false) {
|
||||
form.setFieldsValue({ menuIds: checkedKeysValue });
|
||||
setCheckedKeys(checkedKeysValue);
|
||||
} else {
|
||||
form.setFieldsValue({ menuIds: checkedKeysValue.checked });
|
||||
setCheckedKeys(checkedKeysValue.checked);
|
||||
}
|
||||
};
|
||||
const onTreeSelect = (selectedKeysValue: React.Key[], info: any) => {
|
||||
console.log("onSelect", info);
|
||||
// setExpandedKeys([...expandedKeys,...selectedKeysValue])
|
||||
setSelectedKeys(selectedKeysValue);
|
||||
};
|
||||
//当前角色的数据
|
||||
|
||||
// let thisrole: any = {roleId:'s'};
|
||||
const handleEdit = async (role: any) => {
|
||||
await getRoleData(role);
|
||||
setModalTitle("修改角色");
|
||||
// setCheckedKeys(role)
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const handleDelete = (role: any) => {
|
||||
console.log(role);
|
||||
confirm({
|
||||
title: "系统提示",
|
||||
icon: <ExclamationCircleFilled />,
|
||||
content: `确定删除角色名称为${role.roleName}的数据吗`,
|
||||
okText: "确定",
|
||||
okType: "danger",
|
||||
cancelText: "取消",
|
||||
onOk() {
|
||||
handleClickDel(role);
|
||||
},
|
||||
onCancel() {
|
||||
console.log("Cancel");
|
||||
},
|
||||
});
|
||||
};
|
||||
const handleSerach = () => {
|
||||
// console.log("搜索框", searchValue);
|
||||
// setSearchValue({ ...searchValue });
|
||||
searchValue = formSearch.getFieldsValue();
|
||||
if (typeof searchValue.dateTime !== "undefined") {
|
||||
searchValue.startTime = (searchValue.dateTime as string[])[0];
|
||||
searchValue.endTime = (searchValue.dateTime as string[])[1];
|
||||
}
|
||||
|
||||
console.log(searchValue);
|
||||
count = 1;
|
||||
// queryTableDataParams={...searchValue}
|
||||
setQueryTableDataParams({ ...searchValue });
|
||||
};
|
||||
const handleReset = () => {
|
||||
formSearch.resetFields();
|
||||
searchValue =formSearch.getFieldsValue()
|
||||
// searchValue = {
|
||||
// roleName: undefined,
|
||||
// roleKey: undefined,
|
||||
// startTime: undefined,
|
||||
// state: undefined,
|
||||
// endTime: undefined,
|
||||
// };
|
||||
setQueryTableDataParams({ ...searchValue });
|
||||
// setSearchValue({ ...searchValue });
|
||||
// setCount(1)
|
||||
};
|
||||
//Modal区域
|
||||
const handleModalOk = () => {
|
||||
form
|
||||
.validateFields()
|
||||
.then((values) => {
|
||||
// form.resetFields();
|
||||
console.log("add", values);
|
||||
// onCreate(values);
|
||||
// setSelectedKeys([])
|
||||
// setIsModalOpen(false);
|
||||
if (modalTitle == "新增角色") {
|
||||
console.log(values);
|
||||
|
||||
console.log("add2", { ...values, menuIds: checkedKeys });
|
||||
|
||||
postAdd({ ...values, menuIds: checkedKeys });
|
||||
} else if (modalTitle == "修改角色") {
|
||||
console.log(thisrole);
|
||||
console.log(checkedKeys);
|
||||
console.log("now", { ...thisrole, ...values, menuIds: checkedKeys });
|
||||
// console.log({ ...thisrole, ...values,menuIds:setCheckedKeys });
|
||||
thisrole = { ...thisrole, ...values, menuIds: checkedKeys };
|
||||
editRoleData({ ...thisrole });
|
||||
}
|
||||
})
|
||||
.catch((info) => {
|
||||
console.log("Validate Failed:", info);
|
||||
});
|
||||
|
||||
console.log("modal thisrole", thisrole);
|
||||
};
|
||||
const handleModalCanle = () => {
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
//新增
|
||||
const handleNewAdd = () => {
|
||||
setModalTitle("新增角色");
|
||||
form.setFieldsValue({
|
||||
roleName: "",
|
||||
roleKey: "",
|
||||
state: "0",
|
||||
dataScope: "1",
|
||||
roleSort: "0",
|
||||
});
|
||||
|
||||
setCheckedKeys([]);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
const onDateChange = (
|
||||
valueDate: DatePickerProps["value"] | RangePickerProps["value"],
|
||||
dateString: [string, string] | string
|
||||
) => {
|
||||
// setSelectedDate(valueDate)
|
||||
console.log(valueDate);
|
||||
searchValue.startTime = dateString[0];
|
||||
searchValue.endTime = dateString[1];
|
||||
formSearch.setFieldsValue({ dateTime: [dateString[0], dateString[1]] });
|
||||
console.log("time:", searchValue.endTime, searchValue.startTime);
|
||||
// setSearchValue({ ...searchValue })
|
||||
};
|
||||
const filterOption = (
|
||||
input: string,
|
||||
option?: { label: string; value: string }
|
||||
) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
|
||||
//表格函数
|
||||
//从服务器获取数据
|
||||
|
||||
//页码改变
|
||||
const pageChange = (page: number, pageSize: number) => {
|
||||
console.log(page, pageSize);
|
||||
queryTableDataParams = { ...queryTableDataParams, pageNum: page, pageSize };
|
||||
// setQueryParams({...queryParams,pageNum:page,pageSize})
|
||||
console.log(queryTableDataParams);
|
||||
getRolesData(queryTableDataParams);
|
||||
setCount(page);
|
||||
};
|
||||
//删除单项
|
||||
const handleClickDel = (role: TableDataType) => {
|
||||
console.log(role);
|
||||
let { roleId } = role;
|
||||
del(roleId);
|
||||
};
|
||||
//遍历菜单树获取所有节点ID
|
||||
const getTreeIds = function (tree: any) {
|
||||
// console.log('Ids:',tree);
|
||||
tree.forEach((item: any) => {
|
||||
// console.log(item);
|
||||
treeIds.push(item.menuId);
|
||||
if (item.children != null) getTreeIds(item.children);
|
||||
});
|
||||
};
|
||||
//获取单个角色详细信息
|
||||
const getRoleData = async (role: any) => {
|
||||
// const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
|
||||
// thisrole=role
|
||||
try {
|
||||
let { code, data } = await getRoleAPI(role);
|
||||
if (code === 1000) {
|
||||
console.log("role:", data);
|
||||
thisrole = data;
|
||||
console.log("thisrole", thisrole);
|
||||
form.setFieldsValue(thisrole);
|
||||
setCheckedKeys(data.menuIds);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
// setOpen(true);
|
||||
};
|
||||
//获取菜单权限树
|
||||
const getMenuList = async () => {
|
||||
try {
|
||||
let menul = await getMenuLiseAPI();
|
||||
console.log("tree", menul.data);
|
||||
if (treeIds.length == 0) getTreeIds(menul.data);
|
||||
console.log(treeIds);
|
||||
setMenuTreeData(menul.data);
|
||||
// treeData = menul.data
|
||||
// setMenulist(menul.data)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
//新增请求
|
||||
const postAdd = async (value: any) => {
|
||||
try {
|
||||
let { code } = await addRoleAPI(value);
|
||||
console.log(code);
|
||||
|
||||
if (code === 1000) {
|
||||
console.log("success");
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
form.setFieldsValue({
|
||||
roleName: "",
|
||||
roleKey: "",
|
||||
state: "0",
|
||||
dataScope: "1",
|
||||
});
|
||||
getRolesData({ ...queryTableDataParams, pageNum: count });
|
||||
setIsModalOpen(false);
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "角色名称已存在",
|
||||
});
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
const getRolesData = async (queryTableDataParams: any) => {
|
||||
console.log("参数:", queryTableDataParams);
|
||||
try {
|
||||
const { code, data } = await getRolesDataAPI(queryTableDataParams);
|
||||
if (code === 1000) {
|
||||
const sortData = data.rows.sort(
|
||||
(a: TableDataType, b: TableDataType) =>
|
||||
parseInt(a.roleSort) - parseInt(b.roleSort)
|
||||
);
|
||||
sortData.forEach((element: TableDataType, i: number) => {
|
||||
element.key = i + 1;
|
||||
});
|
||||
setTableData(sortData);
|
||||
setTotal(data.total);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.log("555", err);
|
||||
}
|
||||
};
|
||||
//服务器删除角色
|
||||
const del = async (roleId: number) => {
|
||||
try {
|
||||
let { code } = await delRoleAPI({ roleId });
|
||||
if (code === 1000) {
|
||||
console.log("del", roleId);
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
getRolesData({ pageNum: count });
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
//修改角色信息
|
||||
const editRoleData = async (role: any) => {
|
||||
// const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
|
||||
// thisrole = role;
|
||||
// console.log(thisrole);
|
||||
console.log(role);
|
||||
try {
|
||||
let { code, data } = await setRoleDataAPI(thisrole);
|
||||
// let a = await setRoleDataAPI(role);
|
||||
if (code === 1000) {
|
||||
thisrole = { ...thisrole, ...data };
|
||||
getRolesData({ ...queryTableDataParams, pageNum: count });
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "操作成功",
|
||||
});
|
||||
setIsModalOpen(false);
|
||||
form.setFieldsValue({
|
||||
roleName: "",
|
||||
roleKey: "",
|
||||
state: "0",
|
||||
dataScope: "1",
|
||||
});
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "角色名称已存在!",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "系统未知错误",
|
||||
});
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
// setQueryParams({...queryParams,...valueSch})
|
||||
queryTableDataParams = {
|
||||
...queryTableDataParams,
|
||||
// ...searchValue,
|
||||
pageNum: count,
|
||||
};
|
||||
// setQueryTableDataPaams(queryTableDataParams)
|
||||
// setCount(1)
|
||||
getRolesData(queryTableDataParams);
|
||||
// console.log(queryParams);
|
||||
}, [queryTableDataParams]);
|
||||
useEffect(() => {
|
||||
getMenuList();
|
||||
}, []);
|
||||
return (
|
||||
<ConfigProvider locale={zh_CN}>
|
||||
<div className="roleBox">
|
||||
|
||||
<Form
|
||||
layout="inline"
|
||||
// labelCol={{ span: 8 }}
|
||||
// wrapperCol={{ span: 18 }}
|
||||
initialValues={undefined}
|
||||
form={formSearch}
|
||||
onFinish={handleSerach}
|
||||
style={{fontWeight:'700'}}
|
||||
>
|
||||
<Form.Item label="角色名称" name="roleName" style={{width:300+'px',marginTop:'10px'}}>
|
||||
<Input
|
||||
// maxLength={250}
|
||||
placeholder="请输入角色名称"
|
||||
allowClear
|
||||
// value={searchValue.roleName}
|
||||
// onChange={(e) => {
|
||||
// setSearchValue({ ...searchValue, roleName: e.target.value });
|
||||
// }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="权限字符" name="roleKey" style={{width:300+'px',marginTop:'10px'}}>
|
||||
<Input
|
||||
allowClear
|
||||
placeholder="请输入权限字符"
|
||||
// value={searchValue.roleKey}
|
||||
// onChange={(e) => {
|
||||
// setSearchValue({ ...searchValue, roleKey: e.target.value });
|
||||
// }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="state" wrapperCol={{ span: 22 }} style={{marginTop:'10px'}}>
|
||||
<Select
|
||||
style={{ width: 300 + "px" }}
|
||||
allowClear
|
||||
showSearch
|
||||
placeholder="请选择角色状态"
|
||||
optionFilterProp="lable"
|
||||
// onChange={onStateChange}
|
||||
// onSearch={onSearch}
|
||||
filterOption={filterOption}
|
||||
// value={searchValue.state}
|
||||
options={[
|
||||
{
|
||||
value: "0",
|
||||
label: "正常",
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "停用",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="登陆时间" name="dateTime" style={{marginTop:'10px'}}>
|
||||
<Space direction="vertical" style={{width:400+'px'}}>
|
||||
<RangePicker
|
||||
locale={dataLocale}
|
||||
// allowClear
|
||||
// value={[null, null]}
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
onChange={onDateChange}
|
||||
// onOk={onDataChangeOk}
|
||||
/>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
<Form.Item style={{marginTop:'10px'}}>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
style={{marginLeft:20+'px'}}
|
||||
onClick={() => handleSerach()}
|
||||
>
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item style={{marginTop:'10px'}}>
|
||||
<Button onClick={() => handleReset()}>
|
||||
<SyncOutlined />
|
||||
重置
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{/* 新增 */}
|
||||
<div className="newadd">
|
||||
<Button type="primary" onClick={handleNewAdd}>
|
||||
+新增
|
||||
</Button>
|
||||
</div>
|
||||
{/* 弹出 */}
|
||||
<Modal
|
||||
open={isModalOpen}
|
||||
title={modalTitle}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
onCancel={handleModalCanle}
|
||||
onOk={handleModalOk}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="horizontal"
|
||||
name="form_in_modal"
|
||||
initialValues={{ dataScope: "1", state: "0" }}
|
||||
>
|
||||
<Form.Item
|
||||
name="roleName"
|
||||
label="角色名称"
|
||||
rules={[{ required: true, message: "请输入角色名称" }]}
|
||||
>
|
||||
<Input placeholder="请输入角色名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="roleKey"
|
||||
label="角色权限"
|
||||
rules={[{ required: true, message: "请输入角色权限" }]}
|
||||
>
|
||||
<Input placeholder="请输入角色权限" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
required
|
||||
name="roleSort"
|
||||
label="显示顺序"
|
||||
rules={[{ required: true, message: "请输入角色显示顺序" }]}
|
||||
>
|
||||
<InputNumber min={0} max={10} controls={true} />
|
||||
</Form.Item>
|
||||
<Form.Item name="dataScope" label="数据范围">
|
||||
<Radio.Group>
|
||||
<Radio value="1" defaultChecked={true}>
|
||||
所有数据权限
|
||||
</Radio>
|
||||
<Radio value="2">自定义数据权限</Radio>
|
||||
<Radio value="3">本部门数据权限</Radio>
|
||||
<Radio value="4">本部门及以下数据权限</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="state"
|
||||
label="状态"
|
||||
className="collection-create-form_last-form-item"
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio defaultChecked={true} value="0">
|
||||
正常
|
||||
</Radio>
|
||||
<Radio value="1">停用</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="menuIds"
|
||||
label="菜单权限"
|
||||
className="collection-create-form_last-form-item"
|
||||
>
|
||||
{/* <input type="text" /> */}
|
||||
<div className="checkBox">
|
||||
<Checkbox onChange={onCheckExpand}>展开</Checkbox>
|
||||
<Checkbox onChange={onCheckAll}>全选</Checkbox>
|
||||
<Checkbox onChange={onCheckFaSon}>父子联动</Checkbox>
|
||||
</div>
|
||||
<div className="myTree">
|
||||
<Tree
|
||||
fieldNames={fieldNames}
|
||||
checkable
|
||||
onExpand={onTreeExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={true}
|
||||
onCheck={onTreeCheck}
|
||||
checkedKeys={checkedKeys}
|
||||
checkStrictly={checkStrictly}
|
||||
onSelect={onTreeSelect}
|
||||
selectedKeys={selectedKeys}
|
||||
treeData={menuTreeData}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
{/* 表格 */}
|
||||
<div className="tablebox">
|
||||
{contextHolder}
|
||||
<Table columns={columns} dataSource={tableData} pagination={false} />
|
||||
<Pagination
|
||||
style={{
|
||||
float: "right",
|
||||
marginTop: "10px",
|
||||
}}
|
||||
total={total}
|
||||
current={count}
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
onChange={(page, pageSize) => pageChange(page, pageSize)}
|
||||
showTotal={(total) => `共 ${total} 条`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
@@ -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