perf: 角色管理优化

src/assets/font/omsfont/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1606814471866'); /* IE9 */
+  src: url('iconfont.ttf?t=1606814471866') format('truetype') /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconliulanqi:before {
+  content: "\e63b";
+}
+
+.iconliulanqi1:before {
+  content: "\e643";
+}
+
+.iconanzhuo1:before {
+  content: "\e63a";
+}
+
+.iconxiaochengxu:before {
+  content: "\e60e";
+}
+
+.iconcity:before {
+  content: "\e79c";
+}
+
+.iconanzhuo:before {
+  content: "\e687";
+}
+
+.iconCustomermanagement-fill:before {
+  content: "\e77c";
+}
+
+.iconaccount-fill:before {
+  content: "\e7aa";
+}
+

src/pages/mobileConfig/menuconfig/checkBox.less

@@ -3,7 +3,7 @@
   padding: 10px;
   margin-top: 10px;
   flex-wrap: wrap;
-  border: 1px solid gray;
+  // border: 1px solid gray;
 }
 .check{
   flex-shrink: 0;

src/pages/mobileConfig/menuconfig/editForm.jsx

@@ -54,7 +54,7 @@ const EditForm = props => {
     submit();
   };
   return (
-    <div>
+    <div style={{ marginTop: '10px' }}>
       {(nodeType === 1 || nodeType === 2) && (
         <Form
           form={form}

src/pages/mobileConfig/menuconfig/miniMenu.jsx

@@ -8,6 +8,7 @@ import {
   Input,
   Button,
   Spin,
+  Empty,
 } from 'antd';
 import {
   FileAddTwoTone,
@@ -27,6 +28,7 @@ import {
   getRoleListPlain,
 } from '@/services/mobileConfig/api';
 import styles from './miniMenu.less';
+
 import AddForm from './AddForm';
 import EditForm from './editForm';
 import CheckList from './checkBox';
@@ -73,13 +75,14 @@ const MiniMenu = props => {
   // 更新树
   const updateTrees = () => {
     setLoading(true);
+
     // miniAppSiteTree({
     //   _version: 9999,
     //   _dc: new Date().getTime(),
     //   node: -2,
     //   userMode: 'super',
     //   select: '',
-    // });
+    // })
     getMiniAppModuleTree({
       userMode: 'super',
     })
@@ -89,6 +92,7 @@ const MiniMenu = props => {
           const { data } = res;
           setLoading(false);
           const result = data[0].children[0].children[1].children;
+
           setTreeData(result);
           console.log(result);
           // 第一次加载，默认选择第一个组织
@@ -255,14 +259,14 @@ const MiniMenu = props => {
   // 新增菜单组
   const addMenuGroupTip = val => {
     console.log(val, 'addgroup');
-    setModalTitle(val.text);
+    setModalTitle(`在${val.text}下新增菜单组`);
     setNodeObj(val);
     setAddVisible(true);
   };
   const rootAddGroup = () => {
     setNodeObj('');
     // setNodeType(1);
-    setModalTitle('最上级列表');
+    setModalTitle('新增最上级菜单组');
     setAddType(1);
     setAddVisible(true);
   };
@@ -270,11 +274,11 @@ const MiniMenu = props => {
   const addMenuTip = val => {
     console.log(val, 'add');
     setNodeObj(val);
-    setModalTitle(val.text);
+    setModalTitle(`在${val.text}下新增功能菜单`);
     setAddTwoVisible(true);
   };
   const rootAdd = () => {
-    setModalTitle('最上级列表');
+    setModalTitle('新增最上级功能菜单');
     setNodeObj('');
     // setNodeType(3);
     setAddType(3);
@@ -359,6 +363,7 @@ const MiniMenu = props => {
         setLoading(false);
       });
   };
+  // 复选框选中值
   const valueCallback = val => {
     console.log(val, 'val');
     // relatedRoleCode
@@ -371,6 +376,13 @@ const MiniMenu = props => {
     });
     setRoleList(arr2);
   };
+  // 树的拖动
+  const handleDrop = info => {
+    console.log(info, 'info');
+  };
+  const handleDragEnter = info => {
+    console.log(info, 'info');
+  };
   return (
     <Spin spinning={loading} tip="loading...">
       <div
@@ -394,13 +406,13 @@ const MiniMenu = props => {
                 [styles.tRight]: true,
               })}
             >
-              <Tooltip title="新增菜单组">
+              <Tooltip title="新增最上级菜单组">
                 <FolderAddTwoTone
                   className={`${styles.icon1} ${styles.icon}`}
                   onClick={() => rootAddGroup()}
                 />
               </Tooltip>
-              <Tooltip title="新增功能菜单">
+              <Tooltip title="新增最上级功能菜单">
                 <FileAddTwoTone
                   onClick={() => rootAdd()}
                   className={`${styles.icon2} ${styles.icon}`}
@@ -414,7 +426,10 @@ const MiniMenu = props => {
               onSelect={handleSelect}
               treeData={treeData.map(item => mapTree(item))}
               blockNode
+              draggable
               autoExpandParent
+              onDrop={handleDrop}
+              onDragEnter={handleDragEnter}
               selectedKeys={[menuID]}
               expandedKeys={[menuID]}
             />
@@ -422,7 +437,7 @@ const MiniMenu = props => {
         </div>
         <Modal
           visible={addVisible}
-          title={`在${modalTitle}下新增菜单组`}
+          title={modalTitle}
           bodyStyle={{ width: '100%', minHeight: '100px' }}
           style={{ top: 80 }}
           width="600px"
@@ -430,6 +445,7 @@ const MiniMenu = props => {
           footer={null}
           cancelText="取消"
           okText="确认"
+          maskClosable={false}
           onCancel={() => setAddVisible(false)}
         >
           <AddForm
@@ -444,7 +460,7 @@ const MiniMenu = props => {
         </Modal>
         <Modal
           visible={addTwoVisible}
-          title={`在${modalTitle}下新增功能菜单`}
+          title={modalTitle}
           bodyStyle={{
             width: '100%',
             minHeight: '100px',
@@ -457,6 +473,7 @@ const MiniMenu = props => {
           footer={null}
           cancelText="取消"
           okText="确认"
+          maskClosable={false}
           onCancel={() => setAddTwoVisible(false)}
         >
           <AddForm
@@ -478,6 +495,7 @@ const MiniMenu = props => {
           destroyOnClose
           cancelText="取消"
           okText="确认"
+          maskClosable={false}
           onCancel={() => setDelVisible(false)}
           onOk={() => delMenu()}
           confirmLoading={modalLoading}
@@ -489,12 +507,15 @@ const MiniMenu = props => {
             [styles.middle]: true,
           })}
         >
-          {nodeType && (
+          菜单配置
+          {nodeType ? (
             <EditForm
               nodeType={nodeType}
               info={info}
               submitCallback={editSubmitCallback}
             />
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
           )}
         </div>
         <div

src/pages/mobileConfig/menuconfig/miniMenu.less

@@ -76,4 +76,9 @@
   min-height: 100%;
   border: 1px solid #eee;
   padding: 10px;
+}
+:global{
+  .ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle .anticon-folder{
+    
+  }
 }
\ No newline at end of file

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -36,6 +36,7 @@ import DelModal from './DelModal';
 import EditModal from './EditModal';
 import EditGroup from './EditGroup';
 import userStyles from '../UserManage.less';
+import '@/assets/font/omsfont//iconfont.css';
 
 const { Search } = Input;
 const placeholder = '请输入功能名称';
@@ -184,10 +185,13 @@ const SiteManage = () => {
         });
       }
       if (item.visibleTitle === '手持系统') {
+        item.icon = <span className="iconfont iconanzhuo1" />;
         newArr[0] = item;
-      }
-      if (item.visibleTitle === '小程序') {
+      } else if (item.visibleTitle === '小程序') {
+        item.icon = <span className="iconfont iconxiaochengxu" />;
         newArr[1] = item;
+      } else {
+        item.icon = <span className="iconfont iconliulanqi" />;
       }
       return (
         item.visibleTitle !== '其它角色' &&
@@ -197,11 +201,9 @@ const SiteManage = () => {
       );
     });
     arr2 = arr2.concat(newArr);
-    console.log(arr2, 'arr2');
     let arr3 = arr2.map(item => {
       item.title = item.visibleTitle || '';
       item.key = item.visibleValue || '';
-      item.icon = <TeamOutlined />;
       if (item.roleList && item.roleList.length > 0) {
         item.roleList.map((itemRole, index) => {
           if (itemRole.roleList) {

src/pages/userCenter/roleManage/RoleManage.less

 .cardBox{
   min-height: calc(100vh - 74px);
   max-height: calc(100vh - 74px);
-  // overflow-y: scroll;
-  overflow: auto;
+  overflow-y: scroll;
+  // overflow: auto;
+  overflow-x: hidden;
   width: 300px;
   left: 0;
   top: 0;
@@ -64,7 +65,7 @@
     align-items: center;
     // color:#1890FF;
     .ant-tree-switcher-line-icon{
-      margin-left: 5px;
+      // margin-left: 5px;
   }
   }
 }
@@ -72,10 +73,10 @@
 .hide{
   display: block;
   position: absolute;
-  font-size: 20px;
+  font-size: 18px;
   color: #1890FF!important;
   top: 45%;
-  right:0;
+  right: -3px;
   transform: translate(0%,-50%);
   z-index: 2;
 }

src/pages/userCenter/siteManage/SiteManage.less

 .cardBox{
   min-height: calc(100vh - 75px);
   max-height: calc(100vh - 75px);
-  overflow: auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
   width: 300px;
   left: 0;
   top: 0;
@@ -76,10 +77,10 @@
 .hide{
   display: block;
   position: absolute;
-  font-size: 20px;
+  font-size: 18px;
   color: #1890FF!important;
   top: 45%;
-  right: 0;
+  right: -3px;
   transform: translate(0%,-50%);
   z-index: 2;
 }

src/pages/webConfig/menuconfig/editForm.jsx

@@ -40,7 +40,7 @@ const EditForm = props => {
     submit();
   };
   return (
-    <div>
+    <div style={{ marginTop: '10px' }}>
       {nodeType === 1 && (
         <Form
           form={form}

src/pages/webConfig/menuconfig/webMenu.jsx

 import React, { useEffect, useState } from 'react';
-import { notification, Tree, Tooltip, Modal, Spin } from 'antd';
+import { notification, Tree, Tooltip, Modal, Spin, Empty } from 'antd';
 import {
   FileAddTwoTone,
   FolderAddTwoTone,
@@ -173,14 +173,14 @@ const MiniMenu = props => {
   // 新增菜单组
   const addMenuGroupTip = (val, e) => {
     e.stopPropagation();
-    setModalTitle(val.text);
+    setModalTitle(`在${val.text}下新增菜单组`);
     setNodeObj(val);
     setAddType(2);
     setAddVisible(true);
   };
   const rootAddGroup = () => {
     setNodeObj('');
-    setModalTitle('最上级列表');
+    setModalTitle('新增最上级菜单组');
     setAddType(2);
     setAddVisible(true);
   };
@@ -188,12 +188,12 @@ const MiniMenu = props => {
   const addMenuTip = (val, e) => {
     e.stopPropagation();
     setNodeObj(val);
-    setModalTitle(val.text);
+    setModalTitle(`在${val.text}下新增功能菜单`);
     setAddType(1);
     setAddTwoVisible(true);
   };
   const rootAdd = () => {
-    setModalTitle('最上级列表');
+    setModalTitle('新增最上级功能菜单');
     setNodeObj('');
     setAddType(1);
     setAddTwoVisible(true);
@@ -302,13 +302,13 @@ const MiniMenu = props => {
           >
             菜单列表
             <div className={classnames(styles.tRight)}>
-              <Tooltip title="新增菜单组">
+              <Tooltip title="新增最上级菜单组">
                 <FolderAddTwoTone
                   className={`${styles.icon1} ${styles.icon}`}
                   onClick={() => rootAddGroup()}
                 />
               </Tooltip>
-              <Tooltip title="新增功能菜单">
+              <Tooltip title="新增最上级功能菜单">
                 <FileAddTwoTone
                   onClick={() => rootAdd()}
                   className={`${styles.icon2} ${styles.icon}`}
@@ -330,7 +330,7 @@ const MiniMenu = props => {
         </div>
         <Modal
           visible={addVisible}
-          title={`在${modalTitle}下新增菜单组`}
+          title={modalTitle}
           bodyStyle={{ width: '100%', minHeight: '100px' }}
           style={{ top: 80 }}
           width="600px"
@@ -338,6 +338,7 @@ const MiniMenu = props => {
           footer={null}
           cancelText="取消"
           okText="确认"
+          maskClosable={false}
           onCancel={() => setAddVisible(false)}
           onConfirm={() => {
             submitCallback();
@@ -353,12 +354,13 @@ const MiniMenu = props => {
         </Modal>
         <Modal
           visible={addTwoVisible}
-          title={`在${modalTitle}下新增功能菜单`}
+          title={modalTitle}
           bodyStyle={{ width: '100%', minHeight: '100px' }}
           style={{ top: 80 }}
           width="600px"
           destroyOnClose
           footer={null}
+          maskClosable={false}
           cancelText="取消"
           okText="确认"
           onCancel={() => setAddTwoVisible(false)}
@@ -380,6 +382,7 @@ const MiniMenu = props => {
           destroyOnClose
           cancelText="取消"
           okText="确认"
+          maskClosable={false}
           onCancel={() => setDelVisible(false)}
           onOk={() => delMenu()}
           confirmLoading={modalLoading}
@@ -391,13 +394,16 @@ const MiniMenu = props => {
             [styles.middle]: true,
           })}
         >
-          {nodeType && (
+          菜单配置
+          {nodeType ? (
             <EditForm
               nodeType={nodeType}
               info={info}
               configFiles={configFiles}
               submitCallback={editSubmitCallback}
             />
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
           )}
         </div>
         <div