feat: User模块UI界面搭建完成
This commit is contained in:
Jim__TT
8
src/api/user/userDept.ts
Normal file
8
src/api/user/userDept.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import request from "../../utils/request";
|
||||
|
||||
export const getDeptTree = () => {
|
||||
return request({
|
||||
url: "/admin/dept",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
@@ -1,75 +1,86 @@
|
||||
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;
|
||||
|
||||
5
src/view/system/user/comps/my-dept-tree/index.scss
Normal file
5
src/view/system/user/comps/my-dept-tree/index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.dept-content {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
}
|
||||
88
src/view/system/user/comps/my-dept-tree/index.tsx
Normal file
88
src/view/system/user/comps/my-dept-tree/index.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import React, { useMemo, useState, useEffect } from "react";
|
||||
import { Input, Tree } from "antd";
|
||||
import { SearchOutlined } from "@ant-design/icons";
|
||||
import "./index.scss";
|
||||
|
||||
interface treeDataType {
|
||||
myTreeData: any[];
|
||||
}
|
||||
|
||||
const MyDeptTree: React.FC<treeDataType> = (props) => {
|
||||
console.log("props:", props.myTreeData[0]);
|
||||
|
||||
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
|
||||
const onExpand = (newExpandedKeys: React.Key[]) => {
|
||||
setExpandedKeys(newExpandedKeys);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
|
||||
// const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// const { value } = e.target;
|
||||
// const newExpandedKeys = dataList
|
||||
// .map((item) => {
|
||||
// if (item.title.indexOf(value) > -1) {
|
||||
// return getParentKey(item.key, defaultData);
|
||||
// }
|
||||
// return null;
|
||||
// })
|
||||
// .filter(
|
||||
// (item, i, self): item is React.Key =>
|
||||
// !!(item && self.indexOf(item) === i)
|
||||
// );
|
||||
// setExpandedKeys(newExpandedKeys);
|
||||
// setSearchValue(value);
|
||||
// setAutoExpandParent(true);
|
||||
// };
|
||||
|
||||
const treeData = useMemo(() => {
|
||||
const loop = (data: any[]): any[] =>
|
||||
data.map((item) => {
|
||||
const strTitle = item.deptName as string;
|
||||
const index = strTitle.indexOf(searchValue);
|
||||
const beforeStr = strTitle.substring(0, index);
|
||||
const afterStr = strTitle.slice(index + searchValue.length);
|
||||
const title =
|
||||
index > -1 ? (
|
||||
<span>
|
||||
{beforeStr}
|
||||
<span className="site-tree-search-value">{searchValue}</span>
|
||||
{afterStr}
|
||||
</span>
|
||||
) : (
|
||||
<span>{strTitle}</span>
|
||||
);
|
||||
if (item.children) {
|
||||
return { title, key: item.deptId, children: loop(item.children) };
|
||||
}
|
||||
|
||||
return {
|
||||
title,
|
||||
key: item.key,
|
||||
};
|
||||
});
|
||||
|
||||
return loop(props.myTreeData);
|
||||
}, [searchValue]);
|
||||
|
||||
return (
|
||||
<div className="dept-content">
|
||||
<Input
|
||||
style={{ marginBottom: 8 }}
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder="请输入部门名称"
|
||||
// onChange={onChange}
|
||||
/>
|
||||
<Tree
|
||||
onExpand={onExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
treeData={treeData}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyDeptTree;
|
||||
168
src/view/system/user/comps/user-bottom-list/index.tsx
Normal file
168
src/view/system/user/comps/user-bottom-list/index.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import React, { useState } from "react";
|
||||
import { Table, Space } from "antd";
|
||||
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
|
||||
const UserBottomList: React.FC = () => {
|
||||
const [data, setData] = useState([
|
||||
{
|
||||
key: 1,
|
||||
projectId: "1",
|
||||
projectName: "http接口管理平台",
|
||||
create_time: "2023/7/22",
|
||||
description: "一个用于统一管理",
|
||||
interface_nums: 8,
|
||||
member: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Jim",
|
||||
role: "阅读",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Jack",
|
||||
role: "编辑",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Aurora",
|
||||
role: "阅读",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Tom",
|
||||
role: "编辑",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
projectId: "2",
|
||||
projectName: "低代码平台",
|
||||
create_time: "2021/3/2",
|
||||
description: "更高效的开发",
|
||||
interface_nums: 12,
|
||||
member: [
|
||||
{
|
||||
id: 1,
|
||||
name: "qqq",
|
||||
role: "阅读",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "bbb",
|
||||
role: "编辑",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
projectId: "3",
|
||||
projectName: "ui组件库",
|
||||
create_time: "2021/1/1",
|
||||
description: "漂亮,简洁的ui组件",
|
||||
interface_nums: 5,
|
||||
member: [
|
||||
{
|
||||
id: 1,
|
||||
name: "111",
|
||||
role: "阅读",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "2222",
|
||||
role: "编辑",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "3333",
|
||||
role: "阅读",
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "Id",
|
||||
key: "Id",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "用户名称",
|
||||
dataIndex: "userName",
|
||||
key: "userName",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "用户昵称",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
key: "dept",
|
||||
dataIndex: "dept",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "手机号码",
|
||||
key: "phoneNumber",
|
||||
dataIndex: "phoneNumber",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
dataIndex: "createTime",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operate",
|
||||
dataIndex: "operate",
|
||||
render: () => (
|
||||
<>
|
||||
<Space>
|
||||
<EditOutlined />
|
||||
<a href="#">编辑</a>
|
||||
<DeleteOutlined />
|
||||
<a href="#">删除</a>
|
||||
</Space>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
className="article-table"
|
||||
// pagination={{
|
||||
// position: ["none"],
|
||||
// }}
|
||||
// onRow={(record, index) => ({
|
||||
// onClick: () => {
|
||||
// // 在这里编写处理点击事件的代码
|
||||
// serActiveRowIndex(record.key);
|
||||
// eventBus.emit("tableRowClick", record);
|
||||
// },
|
||||
// // 根据条件动态设置行样式
|
||||
// style:
|
||||
// activeRowIndex === record.key
|
||||
// ? { backgroundColor: "#e1eaff" }
|
||||
// : null,
|
||||
// })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserBottomList;
|
||||
@@ -0,0 +1,9 @@
|
||||
.add-content {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
17
src/view/system/user/comps/user-mid-add-button/index.tsx
Normal file
17
src/view/system/user/comps/user-mid-add-button/index.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import { Button } from "antd";
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
import "./index.scss";
|
||||
|
||||
const UserMidAddButton: React.FC = () => {
|
||||
return (
|
||||
<div className="add-content">
|
||||
<Button type="primary">
|
||||
<PlusOutlined />
|
||||
新增
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserMidAddButton;
|
||||
50
src/view/system/user/comps/user-top-search/index.scss
Normal file
50
src/view/system/user/comps/user-top-search/index.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
57
src/view/system/user/comps/user-top-search/index.tsx
Normal file
57
src/view/system/user/comps/user-top-search/index.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import React from "react";
|
||||
import "./index.scss";
|
||||
|
||||
import { Input, Select, TimePicker, Button } from "antd";
|
||||
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
|
||||
|
||||
const UserTopSearch: React.FC = () => {
|
||||
return (
|
||||
<div className="search-content">
|
||||
<div className="content-top">
|
||||
<div className="input-item">
|
||||
<div>用户名称</div>
|
||||
<Input placeholder="请输入用户名称" />
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<div>手机号码</div>
|
||||
<Input placeholder="请输入手机号码" />
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<div>状态</div>
|
||||
<Select
|
||||
style={{ width: 120 }}
|
||||
placeholder="用户状态"
|
||||
allowClear
|
||||
options={[
|
||||
{ value: "正常1", label: "正常" },
|
||||
{ value: "停用1", label: "停用" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-bottom">
|
||||
<div className="time-selector">
|
||||
<div>创建时间</div>
|
||||
<TimePicker.RangePicker
|
||||
className="time-picker"
|
||||
placeholder={["开始时间", "结束时间"]}
|
||||
/>
|
||||
</div>
|
||||
<div className="search-button">
|
||||
<Button type="primary">
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
<div className="reset-button">
|
||||
<Button>
|
||||
<RedoOutlined />
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserTopSearch;
|
||||
28
src/view/system/user/index.scss
Normal file
28
src/view/system/user/index.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
#content {
|
||||
display: flex;
|
||||
border-top: 1px solid black;
|
||||
.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;
|
||||
.user-top-search {
|
||||
}
|
||||
.user-mid-button {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,32 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import "./index.scss";
|
||||
import { getDeptTree } from "../../../api/user/userDept";
|
||||
import MyDeptTree from "./comps/my-dept-tree";
|
||||
import UserTopSearch from "./comps/user-top-search";
|
||||
import UserMidAddButton from "./comps/user-mid-add-button";
|
||||
import UserBottomList from "./comps/user-bottom-list";
|
||||
|
||||
export default function User() {
|
||||
return(
|
||||
<div>user</div>
|
||||
)
|
||||
}
|
||||
const [treeData, setTreeData] = useState<any[]>([]);
|
||||
const getDeptTreeData = async () => {
|
||||
const data = await getDeptTree();
|
||||
setTreeData(data.data);
|
||||
console.log("father:", data);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getDeptTreeData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="content">
|
||||
<MyDeptTree myTreeData={treeData} />
|
||||
<div className="right-user">
|
||||
<UserTopSearch></UserTopSearch>
|
||||
<UserMidAddButton></UserMidAddButton>
|
||||
<UserBottomList></UserBottomList>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user