完成单位位置管理模块

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<PageProps> = ({ data }) => {
   const treeRef = useRef(null);
 
   const [menuItems, setMenuItems] = useState<any>([]);
+  const [treeKey, setTreeKey] = useState<any>(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<PageProps> = ({ data }) => {
     };
   }, [])
 
+
+  useEffect(() => {
+    eventBus.on('getUnitList', getUnitList);
+    return () => {
+      eventBus.off('getUnitList', getUnitList);
+    };
+  }, [])
+
   const menuItemsConfig = () => {
     if (`/registerManage/deviceRegister/${urlStr}` == `${location.pathname}${location.search}`) {
       setMenuItems([
@@ -65,17 +96,34 @@ const LeftMenuCom: FC<PageProps> = ({ 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
@@ -83,42 +131,20 @@ const LeftMenuCom: FC<PageProps> = ({ data }) => {
   };
 
   const handleSelect = (selectedKeys: any, name: any) => {    
+    selectedKeys[0] == 'root' ?  eventBus.emit('hideFlag', false) : eventBus.emit('hideFlag', true);
     setSelectedKeys(selectedKeys);
   };
 
   const handleContextMenuClick = (e: any) => {
-    setShowContextMenu(false); // 隐藏右键菜单    
-  };
-
-  const treeData = [
-    {
-      title: 'xxx管理系统',
-      key: 'root',
-      selectable: true,
-      isFolder: true,
-      children: [
-        {
-          title: '用户管理',
-          key: 'user',
-        },
-      ],
+    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]]);
     }
-  ];
     
-  const treeData1 = [
-    {
-      title: '所有单位位置',
-      key: 'root',
-      selectable: true,
-      isFolder: true,
-      children: [
-        {
-          title: 'aadw',
-          key: 'user',
-        },
-      ],
-    }
-  ];
+    setShowContextMenu(false); // 隐藏右键菜单    
+  };
 
   const nameType = {
     "设备注册": treeData,
@@ -151,10 +177,11 @@ const LeftMenuCom: FC<PageProps> = ({ data }) => {
                   // 树结构
                   <div>
                     <Tree
+                      key={treeKey}
                       style={{ padding: 20 }}
                       onContextMenu={(e) => e.preventDefault()}
                       onRightClick={({ event, node }) => handleRightClick(event, node)}
-                      onSelect={(e, {node}) => {
+                      onSelect={(e, { node }) => {
                         if (node.key === 'root') {
                           history.push(`${urlType[item.name]}/${urlStr}`)
                         }

src/pages/Register/PositionManage/UnitLocation/index.less

@@ -21,5 +21,6 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
+    cursor: pointer;
   }
 }

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<any>('');
   const [visibility, setVisibility] = useState<boolean>(false);
   const [showFlag, setShowFlag] = useState<boolean>(false);
+  const [unitId, setunitId] = useState<any>(null);
+  const [isDelFlag, setIsDelFlag] = useState<any>(false);
+  const [delVisibility, setDelVisibility] = useState<boolean>(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 (
     <div className={styles.wzgl_warp}>
       <div className={styles.earthWarp}>
-        <div className={styles.earthCon} onClick={() => setVisibility(true)}>
+        <div className={styles.earthCon} onClick={() => {
+          if (showFlag) return
+          setVisibility(true)
+        }}>
           {/* 小红旗 */}
-          { showFlag && <img src={require('../../../../assets/images/googleEarth/flag.png')} width={30} height={30}/> }
+          {showFlag && <img src={require('../../../../assets/images/googleEarth/flag.png')} width={30} height={30} />}
         </div>
       </div>
 
-      {/* 开机认证 */}
       <Modal
         title="位置信息"
         open={visibility}
@@ -67,10 +110,27 @@ export default function Page() {
 
         <div className='flex_jE mt20'>
           <ButtonComp style={{ marginRight: 20 }} text={'定位'} onClick={() => setVisibility(false)} />
-          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => {submit()}} />
+          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => { submit() }} />
           <ButtonComp type='cancel' text={'取消'} onClick={() => setVisibility(false)} />
         </div>
       </Modal>
+
+
+      <Modal
+        title="提示"
+        open={delVisibility}
+        centered
+        width={300}
+        onCancel={() => setDelVisibility(false)}
+        footer={null}
+        maskClosable={false}
+      >
+        <div>确认删除吗？</div>
+        <div className='flex_jE mt20'>
+          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => { submit() }} />
+          <ButtonComp type='cancel' text={'取消'} onClick={() => setDelVisibility(false)} />
+        </div>
+      </Modal>
     </div>
   );
 }

src/utils/eventBus.ts

@@ -0,0 +1,5 @@
+import { EventEmitter } from 'events';
+
+const eventBus = new EventEmitter();
+
+export default eventBus;