From f92070bd73653b4b9cf84484434a421ac829420d Mon Sep 17 00:00:00 2001 From: Jim__TT <1820452084@qq.com> Date: Wed, 25 Oct 2023 11:44:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=94=90=E7=AE=80=EF=BC=9A=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E9=83=A8=E9=97=A8=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=E5=BC=82?= =?UTF-8?q?=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/view/system/user/index.tsx | 488 +++++++++++++++++---------------- 2 files changed, 255 insertions(+), 234 deletions(-) diff --git a/package.json b/package.json index bef8251..83d67bd 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "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", diff --git a/src/view/system/user/index.tsx b/src/view/system/user/index.tsx index a0a6182..6ec1d9d 100644 --- a/src/view/system/user/index.tsx +++ b/src/view/system/user/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useMemo } from "react"; +import "./index.scss"; import { Input, Tree, @@ -16,10 +16,13 @@ import { TreeSelect, Radio, } from "antd"; -import type { RadioChangeEvent } from "antd"; -import "./index.scss"; -import FormatData from "../../../utils/formatData"; -import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons"; + +import { + EditOutlined, + DeleteOutlined, + ExclamationCircleFilled, +} from "@ant-design/icons"; + import { getUserListApi, deleteUserApi, @@ -30,117 +33,34 @@ import { editUserApi, } from "../../../api/system/users"; -import { - EditOutlined, - DeleteOutlined, - ExclamationCircleFilled, -} from "@ant-design/icons"; +import FormatData from "../../../utils/formatData"; +import React, { useEffect, useState, useMemo, useRef } from "react"; +import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons"; export default function User() { - const [echoId, setEchoId] = useState(); + const [form] = Form.useForm(); + const postIdList: number[] = []; + const [echoId, setEchoId] = useState(); + const [myTreeData, setMyTreeData] = useState<[]>([]); + const [listData, setListData] = useState([]); + const [radioValue, setRadioValue] = useState(1); + const [searchTreeValue, setSearchTreeValue] = useState(""); + const [roleList, setRoleList] = useState([]); + const [messageApi, contextHolder] = message.useMessage(); const [modalTitle, setModalTitle] = useState(""); const [buttonType, setButtonType] = useState(""); const [isShowModal, setIsShowModal] = useState(false); - - const handleAddClick = () => { - setModalTitle("新增用户"); - setButtonType("ADD"); - setIsShowModal(true); - }; - - const handleAddOff = (value?: string) => { - if (value === "UPDATE") - setQueryParams({ - ...queryParams, - }); - - setIsShowModal(false); - }; - - 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 [expandedKeys, setExpandedKeys] = useState([ + 100, 102, 101, 104, + ]); + const [treeValue, setTreeValue] = useState(); + const fieldNames = { + label: "deptName", + title: "deptName", + value: "deptId", + key: "deptName", }; - - 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]); - - const handleTimePikerValue = (dates: any[]) => { - setQueryParams({ - ...queryParams, - startTime: FormatData(dates[0].$d), - endTime: FormatData(dates[1].$d), - }); - }; - - const handleInputValues = (e: any) => { - const { name, value } = e.target; - - setQueryParams({ ...queryParams, [name]: value }); - }; - - const handleReset = async () => { - getUserList({}); - setQueryParams({}); - }; - - const handleSearch = () => { - getUserList(queryParams); - }; - - interface QueryParamsType { - userName?: string; - phoneNumber?: string; - state?: string; - startTime?: string; - endTime?: string; - pageNum?: number; - pageSize?: number; - } - - 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, @@ -173,13 +93,13 @@ export default function User() { title: "部门", key: "deptId", dataIndex: "deptName", - render: (text: string) => <>{text ? text : "null"}, + render: (text: string) => <>{text ? text : "--"}, }, { title: "手机号码", key: "phoneNumber", dataIndex: "phoneNumber", - render: (text: string) => <>{text ? text : "null"}, + render: (text: string) => <>{text ? text : "--"}, }, { title: "状态", @@ -211,7 +131,7 @@ export default function User() { handleEditClick(record)} + onClick={() => handleEdit(record)} style={{ color: " #58aaff" }} > 编辑 @@ -219,7 +139,7 @@ export default function User() { handleDeleteClick(record)} + onClick={() => handleDel(record)} style={{ color: " #58aaff" }} > 删除 @@ -230,74 +150,6 @@ export default function User() { }, ]; - const getUserList = async (newQueryParams: object) => { - try { - 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) => { - setEchoId(echoData.userId); - setIsShowModal(true); - setButtonType("EDIT"); - setModalTitle("修改用户"); - }; - - 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(() => { - console.log(queryParams); - }, [queryParams, update, queryParams, echoId]); - - useEffect(() => { - getUserList({}); - }, []); - interface AddUserType { deptId: number | null; email: string; @@ -311,18 +163,16 @@ export default function User() { userName: string; } - const [form] = Form.useForm(); - const [radioValue, setRadioValue] = useState(1); - const [roleList, setRoleList] = useState([]); - const [treeValue, setTreeValue] = useState(); - // 用于自定义TreeSelect内容 - const fieldNames = { - label: "deptName", - title: "deptName", - value: "deptId", - key: "deptName", - }; - // 用于新增用户参数 + interface QueryParamsType { + userName?: string; + phoneNumber?: string; + state?: string; + startTime?: string | null; + endTime?: string | null; + pageNum?: number; + pageSize?: number; + } + let addUserParams: AddUserType = { deptId: null, email: "", @@ -336,11 +186,35 @@ export default function User() { 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) { - handleEchoForm(data); + handleEcho(data); } } catch (error) { console.error(error); @@ -358,24 +232,20 @@ export default function User() { } }; - 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 handleAdd = () => { + setModalTitle("新增用户"); + setButtonType("ADD"); + setIsShowModal(true); }; - const handleAddConfirm = () => { + 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] @@ -406,7 +276,8 @@ export default function User() { type: "success", content: "创建成功", }); - handleClearForm(); + setQueryParams({}); + handleClear(); } else { messageApi.open({ type: "error", @@ -419,8 +290,6 @@ export default function User() { }; const handleEditUser = async () => { - console.log(addUserParams); - const { code } = await editUserApi(addUserParams); try { if (code === 1000) { @@ -428,7 +297,8 @@ export default function User() { type: "success", content: "修改成功", }); - handleClearForm(); + setQueryParams({}); + handleClear(); } else { messageApi.open({ type: "error", @@ -440,41 +310,196 @@ export default function User() { } }; - const handleCancel = () => { - handleClearForm(); - setQueryParams; + const handleReset = async () => { + setQueryParams({ + startTime: null, + endTime: null, + }); + setQueryParams({}); + getUserList({}); }; - const handleClearForm = () => { + const handleSearch = () => { + console.log(queryParams); + getUserList(queryParams); + }; + + const handleDel = 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: "删除成功", + }); + setQueryParams({}); + } else { + messageApi.open({ + type: "error", + content: "删除失败", + }); + } + } catch (err) { + console.log(err); + } + }, + onCancel() { + messageApi.open({ + type: "warning", + content: "取消成功", + }); + }, + }); + }; + + const handleTimePikerValue = (dates: any[]) => { + setQueryParams({ + ...queryParams, + startTime: FormatData(dates[0].$d), + endTime: FormatData(dates[1].$d), + }); + }; + + 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 { 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 onRadioChange = (e: RadioChangeEvent) => { + 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 onTreeSelectChange = (newValue: string) => { + const onTreeSelect = (newValue: string) => { setTreeValue(newValue); }; + const onTreeSearch = (e?: any) => { + const { value } = e.target ? e.target : null; + setSearchTreeValue(value); + handleExpandKeys(value, treeData); + console.log("postIdList:", postIdList); + setExpandedKeys(postIdList); + setAutoExpandParent(true); + }; + + const onExpand = (newExpandedKeys: React.Key[]) => { + console.log(newExpandedKeys); + setExpandedKeys(newExpandedKeys); + setAutoExpandParent(true); + }; + + 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 ? ( + + {beforeStr} + {searchTreeValue} + {afterStr} + + ) : ( + {strTitle} + ); + 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({}); + }, [queryParams]); + return (
} placeholder="请输入部门名称" - // onChange={onChange} + onChange={onTreeSearch} />
@@ -502,7 +527,7 @@ export default function User() { name="phoneNumber" allowClear value={queryParams.phoneNumber} - onChange={handleInputValues} + onChange={handleSearchValues} />
@@ -554,7 +579,7 @@ export default function User() {
<> - @@ -576,18 +601,13 @@ export default function User() { />
- - {/* */} - <> {contextHolder}
@@ -663,8 +683,8 @@ export default function User() { allowClear fieldNames={fieldNames} treeDefaultExpandAll - onChange={onTreeSelectChange} - treeData={myData} + onChange={onTreeSelect} + treeData={myTreeData} /> @@ -697,7 +717,7 @@ export default function User() { }, ]} > - + 正常 停用