From a8a6ae26697a3d101637c2c50a70d749cbaafdee Mon Sep 17 00:00:00 2001 From: Jim__TT <1820452084@qq.com> Date: Sat, 21 Oct 2023 00:00:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=94=90=E7=AE=80=EF=BC=9A=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=8C=E4=BF=AE=E6=94=B9=EF=BC=8C=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=AE=8C=E6=88=90=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 2 - src/api/system/users.ts | 69 ++++- .../user/comps/user-bottom-list/index.tsx | 161 ++++++---- .../user/comps/user-dept-tree/index.tsx | 26 +- .../user/comps/user-from-modal/index.tsx | 287 +++++++++++++----- .../user/comps/user-mid-add-button/index.tsx | 2 +- .../user/comps/user-top-search/index.tsx | 13 +- src/view/system/user/index.scss | 3 +- src/view/system/user/index.tsx | 29 +- 9 files changed, 417 insertions(+), 175 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index e4efcb5..6e8698b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -14,7 +14,5 @@ module.exports = { "warn", { allowConstantExport: true }, ], - "@typescript-eslint/no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "off", }, }; diff --git a/src/api/system/users.ts b/src/api/system/users.ts index 58ac93d..51b5615 100644 --- a/src/api/system/users.ts +++ b/src/api/system/users.ts @@ -17,16 +17,46 @@ export const getDeptTreeApi = () => { }); }; -export const getUserListApi = (data?: userListParams) => { +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 { + userName, + phoneNumber, + state, + startTime, + endTime, + pageNum, + pageSize, + } = data; const params = data ? { - userName: data.userName, - phoneNumber: data.phoneNumber, - state: data.state, - startTime: data.startTime, - endTime: data.endTime, - pageNum: data.pageNum, - pageSize: 13, + userName, + phoneNumber, + state, + startTime, + endTime, + pageNum, + pageSize: 500, } : undefined; @@ -36,3 +66,26 @@ export const getUserListApi = (data?: userListParams) => { 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", + }); +}; diff --git a/src/view/system/user/comps/user-bottom-list/index.tsx b/src/view/system/user/comps/user-bottom-list/index.tsx index 97e12ee..c5743a2 100644 --- a/src/view/system/user/comps/user-bottom-list/index.tsx +++ b/src/view/system/user/comps/user-bottom-list/index.tsx @@ -1,13 +1,18 @@ -import React, { useState, useEffect } from "react"; -import { Table, Space, Tag } from "antd"; -import { EditOutlined, DeleteOutlined } from "@ant-design/icons"; import "./index.scss"; -import { getUserListApi } from "../../../../../api/system/users"; +import { + EditOutlined, + DeleteOutlined, + ExclamationCircleFilled, +} from "@ant-design/icons"; +import React, { useState, useEffect } from "react"; +import { Table, Space, Tag, message, Modal } from "antd"; +import { getUserListApi, deleteUserApi } from "../../../../../api/system/users"; interface AddButtonClickType { - clickFromChild: (type: string) => void; + clickFromChild: (type: string, echoData?: number) => void; searchValues: any; } + interface QueryParamsType { userName?: string; phoneNumber?: string; @@ -22,7 +27,10 @@ const UserBottomList: React.FC = ({ clickFromChild, searchValues, }) => { + const [listData, setListData] = useState([]); + const [update, setUpdate] = useState(""); const [currentPage, setCurrentPage] = useState(1); + const [messageApi, contextHolder] = message.useMessage(); const [queryParams, setQueryParams] = useState({ userName: undefined, phoneNumber: undefined, @@ -32,39 +40,6 @@ const UserBottomList: React.FC = ({ pageNum: undefined, pageSize: undefined, }); - const handlePageChange = (page: number) => { - setCurrentPage(page); - setQueryParams({ - ...queryParams, - pageNum: page, - }); - }; - - const handleAddClick = () => { - clickFromChild("FIX"); - }; - - const getUserList = async () => { - try { - const { userName, phoneNumber, state, startTime, endTime } = searchValues; - setQueryParams({ - ...queryParams, - userName, - phoneNumber, - state, - startTime, - endTime, - }); - const { code, data } = await getUserListApi(queryParams); - if (code === 1000) { - setListData(data.rows); - } - } catch (err) { - console.error(err); - } - }; - - const [listData, setListData] = useState([]); const columns = [ { title: "序号", @@ -86,7 +61,7 @@ const UserBottomList: React.FC = ({ }, { title: "部门", - key: "deptName", + key: "deptId", dataIndex: "deptName", render: (text: string) => <>{text ? text : "null"}, }, @@ -120,19 +95,23 @@ const UserBottomList: React.FC = ({ title: "操作", key: "operate", dataIndex: "operate", - render: () => ( + render: (_: string, record: object) => (
handleAddClick()} + onClick={() => handleEditClick(record)} style={{ color: " #58aaff" }} > 编辑 - + handleDeleteClick(record)} + style={{ color: " #58aaff" }} + > 删除 @@ -141,25 +120,93 @@ const UserBottomList: React.FC = ({ }, ]; + const getUserList = async () => { + try { + const { pageNum, pageSize } = queryParams; + let newQueryParams = {}; + newQueryParams = { + ...searchValues, + pageNum, + pageSize, + }; + // console.log(newQueryParams); + + const { code, data } = await getUserListApi(newQueryParams); + if (code === 1000) { + setListData(data.rows); + } + } catch (err) { + console.error(err); + } + }; + + const handlePageChange = (page: number) => { + setCurrentPage(page); + setQueryParams({ + ...queryParams, + pageNum: page, + }); + }; + + const handleEditClick = (echoData: any) => { + clickFromChild("EDIT", echoData.userId); + }; + + const handleDeleteClick = async (record: any) => { + Modal.confirm({ + title: `确定删除Id为-${record.userId}-, 用户名为-${record.userName}-的用户吗?`, + icon: , + async onOk() { + const { code } = await deleteUserApi(record.userId); + try { + if (code === 1000) { + messageApi.open({ + type: "success", + content: "删除成功", + }); + setUpdate({ + ...update, + }); + } else { + messageApi.open({ + type: "error", + content: "删除失败", + }); + } + } catch (err) { + console.log(err); + } + }, + onCancel() { + messageApi.open({ + type: "warning", + content: "取消成功", + }); + }, + }); + }; + useEffect(() => { getUserList(); - console.log(searchValues); - }, [searchValues]); + }, [searchValues, update]); return ( -
- - `第 ${range[0]}-${range[1]} 条，共 ${total} 条`, - }} - /> - + <> +
+ {contextHolder} +
+ `第 ${range[0]}-${range[1]} 条，共 ${total} 条`, + }} + /> + + ); }; diff --git a/src/view/system/user/comps/user-dept-tree/index.tsx b/src/view/system/user/comps/user-dept-tree/index.tsx index 92982a6..109d115 100644 --- a/src/view/system/user/comps/user-dept-tree/index.tsx +++ b/src/view/system/user/comps/user-dept-tree/index.tsx @@ -1,15 +1,15 @@ -import React, { useMemo, useState, useEffect } from "react"; +import "./index.scss"; import { Input, Tree } from "antd"; +import React, { useMemo, useState, useEffect } from "react"; import { SearchOutlined } from "@ant-design/icons"; import { getDeptTreeApi } from "../../../../../api/system/users"; -import "./index.scss"; const MyDeptTree: React.FC = () => { - const [expandedKeys, setExpandedKeys] = useState([]); + const [myData, setMyData] = useState([]); const [searchValue, setSearchValue] = useState(""); const [autoExpandParent, setAutoExpandParent] = useState(true); + const [expandedKeys, setExpandedKeys] = useState([]); - const [myData, setMyData] = useState([]); const getDeptTreeData = async () => { try { const res = await getDeptTreeApi(); @@ -24,24 +24,6 @@ const MyDeptTree: React.FC = () => { 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) => { diff --git a/src/view/system/user/comps/user-from-modal/index.tsx b/src/view/system/user/comps/user-from-modal/index.tsx index 747351a..87d3edf 100644 --- a/src/view/system/user/comps/user-from-modal/index.tsx +++ b/src/view/system/user/comps/user-from-modal/index.tsx @@ -8,31 +8,83 @@ import { Select, TreeSelect, Radio, + message, } from "antd"; import type { RadioChangeEvent } from "antd"; import React, { useEffect, useState } from "react"; -import { getDeptTreeApi } from "../../../../../api/system/users"; +import { + getDeptTreeApi, + addUserApi, + getRoleListApi, + getUserInfoApi, + editUserApi, +} from "../../../../../api/system/users"; -interface ShowModal { +interface ShowModalType { isShowModal: boolean; - clickFromChild: () => void; + clickFromChild: (UPDATE?: string) => void; modalTitle: string; + echoId: any; + buttonType: string; } -type FieldType = { - username?: string; - password?: string; - remember?: string; -}; -const UserFromModal: React.FC = (props) => { +interface AddUserType { + deptId: number | null; + email: string; + nickName: string; + password: string; + phoneNumber: string; + postIds: number[]; + roleIds: number[]; + sex: string; + state: string; + userName: string; +} + +const UserFromModal: React.FC = ({ + isShowModal, + clickFromChild, + modalTitle, + echoId, + buttonType, +}) => { + const [form] = Form.useForm(); + const [radioValue, setRadioValue] = useState(1); const [deptList, setDeptList] = useState(); - const [value, setValue] = useState(); + const [roleList, setRoleList] = useState([]); + const [treeValue, setTreeValue] = useState(); + const [messageApi, contextHolder] = message.useMessage(); + // 用于自定义TreeSelect内容 const fieldNames = { label: "deptName", title: "deptName", - value: "deptName", + value: "deptId", key: "deptName", - }; // 用于自定义TreeSelect内容 + }; + // 用于新增用户参数 + let addUserParams: AddUserType = { + deptId: null, + email: "", + nickName: "", + password: "", + phoneNumber: "", + postIds: [], + roleIds: [], + sex: "", + state: "", + userName: "", + }; + + const getUserInfo = async () => { + try { + const { code, data } = await getUserInfoApi(echoId); + if (code === 1000) { + handleEchoForm(data); + } + } catch (error) { + console.error(error); + } + }; const getDeptTreeData = async () => { try { @@ -43,158 +95,254 @@ const UserFromModal: React.FC = (props) => { } }; - const onChange = (newValue: string) => { - setValue(newValue); + const getRoleList = async () => { + try { + const { code, data } = await getRoleListApi(); + if (code === 1000) { + console.log(data.rows); + setRoleList(data.rows); + } + } catch (err) { + console.log(err); + } }; - const handleOk = () => { - props.clickFromChild(); + const handleEchoForm = (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 handleAddConfirm = () => { + form.validateFields().then((values) => { + Object.keys(values).forEach( + (key) => values[key] === undefined && delete values[key] + ); + addUserParams = { + ...addUserParams, + ...values, + userId: echoId, + }; + console.log(buttonType); + 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) { + clickFromChild("UPDATE"); + messageApi.open({ + type: "success", + content: "创建成功", + }); + handleClearForm(); + } else { + messageApi.open({ + type: "error", + content: "用户名已经存在", + }); + } + } catch (err) { + console.log(err); + } + }; + + const handleEditUser = async () => { + console.log(addUserParams); + + const { code } = await editUserApi(addUserParams); + try { + if (code === 1000) { + clickFromChild("UPDATE"); + messageApi.open({ + type: "success", + content: "修改成功", + }); + handleClearForm(); + } else { + messageApi.open({ + type: "error", + content: "修改失败", + }); + } + } catch (err) { + console.log(err); + } }; const handleCancel = () => { - props.clickFromChild(); + clickFromChild(); + handleClearForm(); }; - const onFinish = (values: any) => { - console.log("Success:", values); + const handleClearForm = () => { + form.resetFields(); }; - const onFinishFailed = (errorInfo: any) => { - console.log("Failed:", errorInfo); - }; - const [radioValue, setRadioValue] = useState(1); - const onRadioChange = (e: RadioChangeEvent) => { setRadioValue(e.target.value); }; + const onTreeSelectChange = (newValue: string) => { + setTreeValue(newValue); + }; + useEffect(() => { getDeptTreeData(); - }, []); + getRoleList(); + getUserInfo(); + }, [echoId]); return ( <> + {contextHolder}
- + - + - + - + - + - + - + - + - 正常 - 停用 + 正常 + 停用 - + + - + void; + clickFromChild: (type: string, echoData?: number) => void; } const UserMidAddButton: React.FC = ({ clickFromChild }) => { diff --git a/src/view/system/user/comps/user-top-search/index.tsx b/src/view/system/user/comps/user-top-search/index.tsx index 94ea529..1bc667c 100644 --- a/src/view/system/user/comps/user-top-search/index.tsx +++ b/src/view/system/user/comps/user-top-search/index.tsx @@ -1,9 +1,8 @@ -import React, { useState, useEffect, Children } from "react"; import "./index.scss"; - import { Input, Select, DatePicker, Button } from "antd"; -import { SearchOutlined, RedoOutlined } from "@ant-design/icons"; import FormatData from "../../../../../utils/formatData"; +import React, { useState, useEffect } from "react"; +import { SearchOutlined, RedoOutlined } from "@ant-design/icons"; interface SearchParamsType { userName?: string; @@ -36,7 +35,6 @@ const UserTopSearch: React.FC = ({ clickFromChild }) => { const handleInputValues = (e: any) => { const { name, value } = e.target; - console.log(value); setSearchValues({ ...searchValues, [name]: value }); }; @@ -45,7 +43,7 @@ const UserTopSearch: React.FC = ({ clickFromChild }) => { clickFromChild(searchValues); }; const handleReset = () => { - clickFromChild(null); + clickFromChild("RESET"); setSearchValues({ ...searchValues, userName: undefined, @@ -56,9 +54,7 @@ const UserTopSearch: React.FC = ({ clickFromChild }) => { }); }; - useEffect(() => { - console.log(searchValues); - }, [searchValues]); + useEffect(() => {}, [searchValues]); return (
@@ -105,6 +101,7 @@ const UserTopSearch: React.FC = ({ clickFromChild }) => {
创建时间
{ diff --git a/src/view/system/user/index.scss b/src/view/system/user/index.scss index f7c0b71..90b5f59 100644 --- a/src/view/system/user/index.scss +++ b/src/view/system/user/index.scss @@ -13,8 +13,7 @@ height: 190px; display: flex; flex-direction: column; - .user-top-search { - } + .user-mid-button { display: flex; margin-left: 12px; diff --git a/src/view/system/user/index.tsx b/src/view/system/user/index.tsx index 45469fa..be88a5c 100644 --- a/src/view/system/user/index.tsx +++ b/src/view/system/user/index.tsx @@ -8,21 +8,38 @@ import UserBottomList from "./comps/user-bottom-list"; import UserFromModal from "./comps/user-from-modal"; export default function User() { - const [isShowModal, setIsShowModal] = useState(false); + const [echoId, setEchoId] = useState(); const [modalTitle, setModalTitle] = useState(""); + const [buttonType, setButtonType] = useState(""); const [searchValues, setSearchValues] = useState({}); + const [isShowModal, setIsShowModal] = useState(false); - const handleSearch = (searchValues: any) => { + const handleSearch = (value: any) => { + if (value === "RESET") return setSearchValues({}); setSearchValues({ ...searchValues, + ...value, }); }; - const handleAddClick = (type: string) => { + const handleAddClick = (type: string, echoData?: number) => { type === "ADD" ? setModalTitle("新增用户") : setModalTitle("修改用户"); - setIsShowModal(true); + if (type === "EDIT") { + setEchoId(echoData); + setButtonType(type); + setIsShowModal(true); + } else { + setButtonType(type); + setIsShowModal(true); + } }; - const handleAddOff = () => { + + const handleAddOff = (value?: string) => { + if (value === "UPDATE") + setSearchValues({ + ...searchValues, + }); + setIsShowModal(false); }; @@ -39,6 +56,8 @@ export default function User() {