From 3248fa2c5a6b5b6351e4d0517f2139f864ee55d0 Mon Sep 17 00:00:00 2001 From: Jim__TT <1820452084@qq.com> Date: Mon, 23 Oct 2023 22:54:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=94=90=E7=AE=80:=20=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84=E4=BC=98=E5=8C=96=E9=87=8D?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 2 + .../user/comps/user-bottom-list/index.scss | 11 - .../user/comps/user-bottom-list/index.tsx | 213 ----- .../user/comps/user-dept-tree/index.scss | 5 - .../user/comps/user-dept-tree/index.tsx | 76 -- .../user/comps/user-from-modal/index.scss | 3 - .../user/comps/user-from-modal/index.tsx | 391 --------- .../user/comps/user-mid-add-button/index.scss | 9 - .../user/comps/user-mid-add-button/index.tsx | 25 - .../user/comps/user-top-search/index.scss | 50 -- .../user/comps/user-top-search/index.tsx | 129 --- src/view/system/user/index.scss | 77 ++ src/view/system/user/index.tsx | 792 +++++++++++++++++- 13 files changed, 828 insertions(+), 955 deletions(-) delete mode 100644 src/view/system/user/comps/user-bottom-list/index.scss delete mode 100644 src/view/system/user/comps/user-bottom-list/index.tsx delete mode 100644 src/view/system/user/comps/user-dept-tree/index.scss delete mode 100644 src/view/system/user/comps/user-dept-tree/index.tsx delete mode 100644 src/view/system/user/comps/user-from-modal/index.scss delete mode 100644 src/view/system/user/comps/user-from-modal/index.tsx delete mode 100644 src/view/system/user/comps/user-mid-add-button/index.scss delete mode 100644 src/view/system/user/comps/user-mid-add-button/index.tsx delete mode 100644 src/view/system/user/comps/user-top-search/index.scss delete mode 100644 src/view/system/user/comps/user-top-search/index.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 6e8698b..df8b0b2 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -14,5 +14,7 @@ module.exports = { "warn", { allowConstantExport: true }, ], + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unused-vars": "off", }, }; diff --git a/src/view/system/user/comps/user-bottom-list/index.scss b/src/view/system/user/comps/user-bottom-list/index.scss deleted file mode 100644 index fc6ac55..0000000 --- a/src/view/system/user/comps/user-bottom-list/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -.tree-content { - margin: 12px 0 0 12px; - - .ant-table-thead > tr > th { - color: #909399; - text-align: center; - } - .ant-table-tbody > tr > td { - text-align: center; - } -} diff --git a/src/view/system/user/comps/user-bottom-list/index.tsx b/src/view/system/user/comps/user-bottom-list/index.tsx deleted file mode 100644 index c5743a2..0000000 --- a/src/view/system/user/comps/user-bottom-list/index.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import "./index.scss"; -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, echoData?: number) => void; - searchValues: any; -} - -interface QueryParamsType { - userName?: string; - phoneNumber?: string; - state?: string; - startTime?: string; - endTime?: string; - pageNum?: number; - pageSize?: number; -} - -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, - 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 : "null"}, - }, - { - title: "手机号码", - key: "phoneNumber", - dataIndex: "phoneNumber", - render: (text: string) => <>{text ? text : "null"}, - }, - { - title: "状态", - key: "state", - dataIndex: "state", - render: (text: string) => ( - <> - {text === "0" ? ( - 停用 - ) : ( - 正常 - )} - - ), - }, - { - title: "创建时间", - key: "createTime", - dataIndex: "createTime", - render: (text: string) => <>{text ? text : "null"}, - }, - { - title: "操作", - key: "operate", - dataIndex: "operate", - render: (_: string, record: object) => ( -
- - - handleEditClick(record)} - style={{ color: " #58aaff" }} - > - 编辑 - - - handleDeleteClick(record)} - style={{ color: " #58aaff" }} - > - 删除 - - -
- ), - }, - ]; - - 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(); - }, [searchValues, update]); - - return ( - <> -
- {contextHolder} - - `第 ${range[0]}-${range[1]} 条，共 ${total} 条`, - }} - /> - - - ); -}; - -export default UserBottomList; diff --git a/src/view/system/user/comps/user-dept-tree/index.scss b/src/view/system/user/comps/user-dept-tree/index.scss deleted file mode 100644 index dad51c3..0000000 --- a/src/view/system/user/comps/user-dept-tree/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -.dept-content { - flex: 20%; - padding: 35px 12px 0 0; - height: calc(100vh - 85px); -} diff --git a/src/view/system/user/comps/user-dept-tree/index.tsx b/src/view/system/user/comps/user-dept-tree/index.tsx deleted file mode 100644 index 109d115..0000000 --- a/src/view/system/user/comps/user-dept-tree/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -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"; - -const MyDeptTree: React.FC = () => { - const [myData, setMyData] = useState([]); - const [searchValue, setSearchValue] = useState(""); - const [autoExpandParent, setAutoExpandParent] = useState(true); - const [expandedKeys, setExpandedKeys] = useState([]); - - const getDeptTreeData = async () => { - try { - const res = await getDeptTreeApi(); - setMyData(res.data); - } catch (error) { - console.error(error); - } - }; - - const onExpand = (newExpandedKeys: React.Key[]) => { - 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(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(myData); - }, [myData]); - useEffect(() => { - getDeptTreeData(); - }, []); - - return ( -
- } - placeholder="请输入部门名称" - // onChange={onChange} - /> - -
- ); -}; - -export default MyDeptTree; diff --git a/src/view/system/user/comps/user-from-modal/index.scss b/src/view/system/user/comps/user-from-modal/index.scss deleted file mode 100644 index e93ce17..0000000 --- a/src/view/system/user/comps/user-from-modal/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -.modal-form { - display: flex; -} diff --git a/src/view/system/user/comps/user-from-modal/index.tsx b/src/view/system/user/comps/user-from-modal/index.tsx deleted file mode 100644 index 87d3edf..0000000 --- a/src/view/system/user/comps/user-from-modal/index.tsx +++ /dev/null @@ -1,391 +0,0 @@ -import { - Modal, - Button, - Form, - Input, - Row, - Col, - Select, - TreeSelect, - Radio, - message, -} from "antd"; -import type { RadioChangeEvent } from "antd"; -import React, { useEffect, useState } from "react"; -import { - getDeptTreeApi, - addUserApi, - getRoleListApi, - getUserInfoApi, - editUserApi, -} from "../../../../../api/system/users"; - -interface ShowModalType { - isShowModal: boolean; - clickFromChild: (UPDATE?: string) => void; - modalTitle: string; - echoId: any; - buttonType: string; -} - -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 [roleList, setRoleList] = useState([]); - const [treeValue, setTreeValue] = useState(); - const [messageApi, contextHolder] = message.useMessage(); - // 用于自定义TreeSelect内容 - const fieldNames = { - label: "deptName", - title: "deptName", - value: "deptId", - key: "deptName", - }; - // 用于新增用户参数 - 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 { - const res = await getDeptTreeApi(); - setDeptList(res.data); - } catch (error) { - console.error(error); - } - }; - - 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 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 = () => { - clickFromChild(); - handleClearForm(); - }; - - const handleClearForm = () => { - form.resetFields(); - }; - - const onRadioChange = (e: RadioChangeEvent) => { - setRadioValue(e.target.value); - }; - - const onTreeSelectChange = (newValue: string) => { - setTreeValue(newValue); - }; - - useEffect(() => { - getDeptTreeData(); - getRoleList(); - getUserInfo(); - }, [echoId]); - - return ( - <> - {contextHolder} - -
- - - - - - - - - - - - - - - - - - - - - - - - - 正常 - 停用 - - - - - - - {roleList.map((item) => ( - - {item.roleName} - - ))} - - - - - - - - - - - - - ); -}; - -export default UserFromModal; 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 deleted file mode 100644 index 305b62e..0000000 --- a/src/view/system/user/comps/user-mid-add-button/index.scss +++ /dev/null @@ -1,9 +0,0 @@ -.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 deleted file mode 100644 index 218001e..0000000 --- a/src/view/system/user/comps/user-mid-add-button/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import { Button } from "antd"; -import { PlusOutlined } from "@ant-design/icons"; -import "./index.scss"; - -interface AddButtonClick { - clickFromChild: (type: string, echoData?: number) => void; -} - -const UserMidAddButton: React.FC = ({ clickFromChild }) => { - const handleAddClick = () => { - clickFromChild("ADD"); - }; - - 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 deleted file mode 100644 index 9d8ccea..0000000 --- a/src/view/system/user/comps/user-top-search/index.scss +++ /dev/null @@ -1,50 +0,0 @@ -.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 deleted file mode 100644 index 1bc667c..0000000 --- a/src/view/system/user/comps/user-top-search/index.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import "./index.scss"; -import { Input, Select, DatePicker, Button } from "antd"; -import FormatData from "../../../../../utils/formatData"; -import React, { useState, useEffect } from "react"; -import { SearchOutlined, RedoOutlined } from "@ant-design/icons"; - -interface SearchParamsType { - userName?: string; - phoneNumber?: number; - state?: string; - startTime?: string; - endTime?: string; -} - -interface SearchClick { - clickFromChild: (searchValues: any) => void; -} - -const UserTopSearch: React.FC = ({ clickFromChild }) => { - const [searchValues, setSearchValues] = useState({ - userName: undefined, - phoneNumber: undefined, - state: undefined, - startTime: undefined, - endTime: undefined, - }); - - const handleTimePikerValue = (dates: any[]) => { - setSearchValues({ - ...searchValues, - startTime: FormatData(dates[0].$d), - endTime: FormatData(dates[1].$d), - }); - }; - - const handleInputValues = (e: any) => { - const { name, value } = e.target; - - setSearchValues({ ...searchValues, [name]: value }); - }; - - const handleSearch = () => { - clickFromChild(searchValues); - }; - const handleReset = () => { - clickFromChild("RESET"); - setSearchValues({ - ...searchValues, - userName: undefined, - phoneNumber: undefined, - state: undefined, - startTime: undefined, - endTime: undefined, - }); - }; - - useEffect(() => {}, [searchValues]); - - return ( -
-
-
-
用户名称
- -
-
-
手机号码
- -
-
-
状态
- } + placeholder="请输入部门名称" + // onChange={onChange} + /> +
+ <> +
+
+ <> +
+
+
用户名称
+ +
+
+
手机号码
+ +
+
+
状态
+
+ `第 ${range[0]}-${range[1]} 条，共 ${total} 条`, + }} + /> + + + + {/* */} + + <> + {contextHolder} + +
+ + + + + + + + + + + + + + + + + + + + + + + + + 正常 + 停用 + + + + + + + {roleList.map((item) => ( + + {item.roleName} + + ))} + + + + + + + + + + + + + + ); }