diff --git a/src/api/user/userDept.ts b/src/api/user/userDept.ts new file mode 100644 index 0000000..d6d2939 --- /dev/null +++ b/src/api/user/userDept.ts @@ -0,0 +1,8 @@ +import request from "../../utils/request"; + +export const getDeptTree = () => { + return request({ + url: "/admin/dept", + method: "get", + }); +}; diff --git a/src/utils/request.ts b/src/utils/request.ts index 4fade71..c665515 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -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 (config: AxiosRequestConfig): Promise> => { +const request = async ( + config: AxiosRequestConfig +): Promise> => { try { - const response = await service.request>(config) - const { code, msg } = response.data + const response = await service.request>(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 \ No newline at end of file + data: null as any, + }; +}; +export default request; diff --git a/src/view/system/user/comps/my-dept-tree/index.scss b/src/view/system/user/comps/my-dept-tree/index.scss new file mode 100644 index 0000000..dad51c3 --- /dev/null +++ b/src/view/system/user/comps/my-dept-tree/index.scss @@ -0,0 +1,5 @@ +.dept-content { + flex: 20%; + padding: 35px 12px 0 0; + height: calc(100vh - 85px); +} diff --git a/src/view/system/user/comps/my-dept-tree/index.tsx b/src/view/system/user/comps/my-dept-tree/index.tsx new file mode 100644 index 0000000..8bc4766 --- /dev/null +++ b/src/view/system/user/comps/my-dept-tree/index.tsx @@ -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 = (props) => { + console.log("props:", props.myTreeData[0]); + + const [expandedKeys, setExpandedKeys] = useState([]); + const [searchValue, setSearchValue] = useState(""); + const [autoExpandParent, setAutoExpandParent] = useState(true); + + const onExpand = (newExpandedKeys: React.Key[]) => { + setExpandedKeys(newExpandedKeys); + setAutoExpandParent(false); + }; + + // const onChange = (e: React.ChangeEvent) => { + // 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 ? ( + + {beforeStr} + {searchValue} + {afterStr} + + ) : ( + {strTitle} + ); + if (item.children) { + return { title, key: item.deptId, children: loop(item.children) }; + } + + return { + title, + key: item.key, + }; + }); + + return loop(props.myTreeData); + }, [searchValue]); + + return ( +
+ } + placeholder="请输入部门名称" + // onChange={onChange} + /> + +
+ ); +}; + +export default MyDeptTree; diff --git a/src/view/system/user/comps/user-bottom-list/index.scss b/src/view/system/user/comps/user-bottom-list/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/view/system/user/comps/user-bottom-list/index.tsx b/src/view/system/user/comps/user-bottom-list/index.tsx new file mode 100644 index 0000000..2a9ad6a --- /dev/null +++ b/src/view/system/user/comps/user-bottom-list/index.tsx @@ -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: () => ( + <> + + + 编辑 + + 删除 + + + ), + }, + ]; + + return ( +
+ ({ + // onClick: () => { + // // 在这里编写处理点击事件的代码 + // serActiveRowIndex(record.key); + // eventBus.emit("tableRowClick", record); + // }, + // // 根据条件动态设置行样式 + // style: + // activeRowIndex === record.key + // ? { backgroundColor: "#e1eaff" } + // : null, + // })} + /> + + ); +}; + +export default UserBottomList; diff --git a/src/view/system/user/comps/user-mid-add-button/index.scss b/src/view/system/user/comps/user-mid-add-button/index.scss new file mode 100644 index 0000000..305b62e --- /dev/null +++ b/src/view/system/user/comps/user-mid-add-button/index.scss @@ -0,0 +1,9 @@ +.add-content { + display: flex; + margin-left: 12px; + margin-top: 20px; + button:focus, + button:focus-visible { + outline: none; + } +} diff --git a/src/view/system/user/comps/user-mid-add-button/index.tsx b/src/view/system/user/comps/user-mid-add-button/index.tsx new file mode 100644 index 0000000..2205c52 --- /dev/null +++ b/src/view/system/user/comps/user-mid-add-button/index.tsx @@ -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 ( +
+ +
+ ); +}; + +export default UserMidAddButton; diff --git a/src/view/system/user/comps/user-top-search/index.scss b/src/view/system/user/comps/user-top-search/index.scss new file mode 100644 index 0000000..9d8ccea --- /dev/null +++ b/src/view/system/user/comps/user-top-search/index.scss @@ -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; + } + } +} diff --git a/src/view/system/user/comps/user-top-search/index.tsx b/src/view/system/user/comps/user-top-search/index.tsx new file mode 100644 index 0000000..d71c0c2 --- /dev/null +++ b/src/view/system/user/comps/user-top-search/index.tsx @@ -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 ( +
+
+
+
用户名称
+ +
+
+
手机号码
+ +
+
+
状态
+