From 6ed6bbc8dc350b263a5da6979ce28be536baed73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B2=81=E8=AA=89=E7=A8=8B?= <2659568239@qq.com> Date: Tue, 30 Jan 2024 16:32:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=8D=95=E4=BD=8D=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/LeftMenuOne/index.tsx | 103 +++++++++++------- .../PositionManage/UnitLocation/index.less | 1 + .../PositionManage/UnitLocation/index.tsx | 84 ++++++++++++-- src/utils/eventBus.ts | 5 + 4 files changed, 143 insertions(+), 50 deletions(-) create mode 100644 src/utils/eventBus.ts diff --git a/src/layouts/LeftMenuOne/index.tsx b/src/layouts/LeftMenuOne/index.tsx index 3c06b1e..4c73056 100644 --- a/src/layouts/LeftMenuOne/index.tsx +++ b/src/layouts/LeftMenuOne/index.tsx @@ -2,6 +2,8 @@ import { FC, useEffect, useRef, useState } from 'react'; import styles from './index.less'; import { history, useLocation, useParams } from 'umi'; import { Menu, Tree } from 'antd'; +import { unitAddressList } from '@/services/register'; +import eventBus from '@/utils/eventBus'; interface PageProps { data: Array<{ @@ -27,6 +29,27 @@ const LeftMenuCom: FC = ({ data }) => { const treeRef = useRef(null); const [menuItems, setMenuItems] = useState([]); + const [treeKey, setTreeKey] = useState(0); + + const [treeData, setTreeData] = useState([ + { + title: 'xxx管理系统', + key: 'root', + selectable: true, + isFolder: true, + children: [], + } + ]); + + const [treeData1, setTreeData1] = useState([ + { + title: '所有单位位置', + key: 'root', + selectable: true, + isFolder: true, + children: [], + } + ]); let urlStr = `${urlParams?.fileType}${location?.search}`; @@ -57,6 +80,14 @@ const LeftMenuCom: FC = ({ data }) => { }; }, []) + + useEffect(() => { + eventBus.on('getUnitList', getUnitList); + return () => { + eventBus.off('getUnitList', getUnitList); + }; + }, []) + const menuItemsConfig = () => { if (`/registerManage/deviceRegister/${urlStr}` == `${location.pathname}${location.search}`) { setMenuItems([ @@ -65,61 +96,56 @@ const LeftMenuCom: FC = ({ data }) => { ]) } else if (`/registerManage/unitLocation/${urlStr}` == `${location.pathname}${location.search}`) { setMenuItems([ - { key: '1', label: '修改' }, - { key: '2', label: '刷新' }, - { key: '3', label: '新建' }, - { key: '4', label: '删除' } + { key: '3', label: '修改' }, + { key: '4', label: '刷新' }, + { key: '5', label: '新建' }, + { key: '6', label: '删除' } ]) + getUnitList(); } } + // 更新单位位置管理树结构数据 + const getUnitList = (type?: string) => { + unitAddressList({ pageNum: 1, pageSize: 50}).then((res: any) => { + if (res.result == 'success') { + res.data[0].list.forEach((val: any) => { val.title = val.unitName; val.key = val.id; }) + setTreeData1((e) => { e[0].children = res.data[0].list; return e }) + setTreeKey((e: any) => { return e + 1 }) + if (type == '添加成功') { + setSelectedKeys([Number(res.data[0].list.length)]) + }else if (type == '删除成功') { + setSelectedKeys(['root']) + } + } + }) + } + const handleRightClick = (e: any, node: any) => { if (node?.isFolder) return - + e[0] == 'root' ? eventBus.emit('hideFlag', false) : eventBus.emit('hideFlag', true); e.preventDefault(); setContextMenuPosition({ x: e.clientX, y: e.clientY }); // 记录右键菜单位置 setSelectedKeys([node.key]); // 根据节点设置选中的 keys setShowContextMenu(true); // 显示右键菜单 }; - const handleSelect = (selectedKeys: any, name: any) => { + const handleSelect = (selectedKeys: any, name: any) => { + selectedKeys[0] == 'root' ? eventBus.emit('hideFlag', false) : eventBus.emit('hideFlag', true); setSelectedKeys(selectedKeys); }; const handleContextMenuClick = (e: any) => { + let index = selectedKeys[0] - 1; + if(e.key == '3') { + eventBus.emit('updateUnitInfo', ['修改', treeData1[0].children[index]]); + } else if(e.key == '6') { + eventBus.emit('updateUnitInfo', ['删除', treeData1[0].children[index]]); + } + setShowContextMenu(false); // 隐藏右键菜单 }; - const treeData = [ - { - title: 'xxx管理系统', - key: 'root', - selectable: true, - isFolder: true, - children: [ - { - title: '用户管理', - key: 'user', - }, - ], - } - ]; - - const treeData1 = [ - { - title: '所有单位位置', - key: 'root', - selectable: true, - isFolder: true, - children: [ - { - title: 'aadw', - key: 'user', - }, - ], - } - ]; - const nameType = { "设备注册": treeData, '单位位置管理': treeData1 @@ -151,14 +177,15 @@ const LeftMenuCom: FC = ({ data }) => { // 树结构
e.preventDefault()} onRightClick={({ event, node }) => handleRightClick(event, node)} - onSelect={(e, {node}) => { + onSelect={(e, { node }) => { if (node.key === 'root') { history.push(`${urlType[item.name]}/${urlStr}`) } - + handleSelect(e, item.name) }} selectedKeys={selectedKeys} diff --git a/src/pages/Register/PositionManage/UnitLocation/index.less b/src/pages/Register/PositionManage/UnitLocation/index.less index 538333b..dc97ee9 100644 --- a/src/pages/Register/PositionManage/UnitLocation/index.less +++ b/src/pages/Register/PositionManage/UnitLocation/index.less @@ -21,5 +21,6 @@ align-items: center; justify-content: center; border-radius: 50%; + cursor: pointer; } } \ No newline at end of file diff --git a/src/pages/Register/PositionManage/UnitLocation/index.tsx b/src/pages/Register/PositionManage/UnitLocation/index.tsx index c8f4048..1754c0c 100644 --- a/src/pages/Register/PositionManage/UnitLocation/index.tsx +++ b/src/pages/Register/PositionManage/UnitLocation/index.tsx @@ -1,10 +1,11 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import styles from './index.less'; import { Input, Modal, message } from 'antd'; import ButtonComp from '@/components/ButtonComp'; -import { unitAddressEditOrAdd } from '@/services/register'; +import { unitAddressEditOrAdd, unitAddressList } from '@/services/register'; import { useLocation, useParams } from 'umi'; import { sysTypeStr } from '@/utils/sysType'; +import eventBus from '@/utils/eventBus'; export default function Page() { const location = useLocation(); @@ -12,23 +13,63 @@ export default function Page() { const [unitName, setUnitName] = useState(''); const [visibility, setVisibility] = useState(false); const [showFlag, setShowFlag] = useState(false); + const [unitId, setunitId] = useState(null); + const [isDelFlag, setIsDelFlag] = useState(false); + const [delVisibility, setDelVisibility] = useState(false); + useEffect(() => { + eventBus.on('updateUnitInfo', updateUnitInfo); + eventBus.on('hideFlag', hideFlag); + + return () => { + eventBus.off('updateUnitInfo', updateUnitInfo); + eventBus.off('hideFlag', hideFlag); + }; + }, []) + + const updateUnitInfo = (info: any) => { + setUnitName(info[1]?.unitName); + setunitId(info[1]?.id); + if (info[0] == '删除') { + setIsDelFlag(true); + setDelVisibility(true) + } else { + setIsDelFlag(false); + setVisibility(true); + } + } + + const hideFlag = (val: boolean) => { setShowFlag(val) } const submit = () => { const searchParams = new URLSearchParams(location.search); const sysType = searchParams.get('sysType'); - - unitAddressEditOrAdd({ + let params = { parentId: 1, sysType: sysTypeStr[sysType], unitName: unitName, - }).then((res) => { + id: unitId, + delFlag: isDelFlag ? 1 : 0 + } + unitAddressEditOrAdd(params).then((res) => { if (res.result == 'success') { setShowFlag(true); - setUnitName('') + setUnitName(''); + setunitId(null); setVisibility(false); - message.success('添加成功！') - }else { + if (isDelFlag) { + setDelVisibility(false); + setShowFlag(false) + message.success('删除成功!'); + eventBus.emit('getUnitList', '删除成功'); + }else if (unitId) { + message.success('修改成功!'); + eventBus.emit('getUnitList', '修改成功'); + } else { + message.success('添加成功!'); + eventBus.emit('getUnitList', '添加成功'); + } + } else { message.error(res?.errorMsg) } }) @@ -37,13 +78,15 @@ export default function Page() { return (
-
setVisibility(true)}> +
{ + if (showFlag) return + setVisibility(true) + }}> {/* 小红旗 */} - { showFlag && } + {showFlag && }
- {/* 开机认证 */} setVisibility(false)} /> - {submit()}} /> + { submit() }} /> setVisibility(false)} />
+ + + setDelVisibility(false)} + footer={null} + maskClosable={false} + > +
确认删除吗？
+
+ { submit() }} /> + setDelVisibility(false)} /> +
+
); } diff --git a/src/utils/eventBus.ts b/src/utils/eventBus.ts new file mode 100644 index 0000000..86091ea --- /dev/null +++ b/src/utils/eventBus.ts @@ -0,0 +1,5 @@ +import { EventEmitter } from 'events'; + +const eventBus = new EventEmitter(); + +export default eventBus; \ No newline at end of file