feat: 小程序菜单管理

src/pages/mobileConfig/index.js

@@ -7,7 +7,7 @@ import SiteConfig from './SiteConfig';
 import MenuConfig from './menuconfig/MenuConfig';
 const { TabPane } = Tabs;
 const MobileConfigPage = props => {
-  const [activeKey, setActiveKey] = useState('0'); // tabs活动页
+  const [activeKey, setActiveKey] = useState('1'); // tabs活动页
   const [miniTitle, setMiniTitle] = useState('');
   const [flag, setFlag] = useState(1);
   useEffect(() => {

src/pages/mobileConfig/menuconfig/LeftPart.jsx

@@ -22,6 +22,7 @@ import {
   getTree,
   addMenuApi,
   addMenuGroupApi,
+  submitMenuInfo,
   getRoleList,
   getMenuInfo,
   deleteMenuApi,
@@ -34,6 +35,8 @@ const LeftPart = () => {
   const [treeLoading, setTreeLoading] = useState(true);
 
   const [treeData, setTreeData] = useState([]); // 菜单树
+  const [treeState, setTreeState] = useState(true);
+  const [nodeType, setNodeType] = useState(1); // 根据节点类型渲染不同的编辑表单item,0-0一级菜单，0-0-0二级，0-0-0-0三级
   const [rolelist, setRolelist] = useState([]);
   const [roleValueList, setRoleValueList] = useState({});
 
@@ -44,9 +47,10 @@ const LeftPart = () => {
   const [addMenuVisible, setAddMenuVisible] = useState(false);
   const [addMenuGroupVisible, setAddMenuGroupVisible] = useState(false);
   const [tipVisible, setTipVisible] = useState(false);
-  // const [editMenuVisible, setEditMenuVisible] = useState(false);
   const [deleteMenuVisible, setDeleteMenuVisible] = useState(false);
+
   const [addMenuForm] = Form.useForm();
+  const [editMenuForm] = Form.useForm();
   const [addMenuGroupForm] = Form.useForm();
 
   const getRoleValueCallback = useCallback((value, index) => {
@@ -65,8 +69,14 @@ const LeftPart = () => {
       .then(res => {
         if (res.length > 0) {
           setTreeLoading(false);
-          setTreeData(res[0].children[0].children[2].children);
-          console.log(res[0].children[0].children[2].children);
+          const result = res[0].children[0].children[2].children;
+          setTreeData(result);
+          console.log(result);
+          // 第一次加载，默认选择第一个组织
+          if (treeState) {
+            onSelect([result[0].menuID], false);
+            setTreeState(false);
+          }
         }
       })
       .catch(err => {
@@ -109,11 +119,11 @@ const LeftPart = () => {
                     onClick={() => addMenuGroup(menu, '分组图标')}
                   />
                 </Tooltip>
-                <Tooltip title="添加菜单组">
+                {/* <Tooltip title="添加菜单组">
                   <EditTwoTone
                     onClick={() => editMenuGroup(menu, '在线图标')}
                   />
-                </Tooltip>
+                </Tooltip> */}
               </>
             )}
             {menu.menuType === 'MiniAppMenuGroupTwo' && (
@@ -121,20 +131,20 @@ const LeftPart = () => {
                 <Tooltip title="添加菜单">
                   <FileAddTwoTone onClick={() => addMenu(menu)} />
                 </Tooltip>
-                <Tooltip title="编辑菜单组">
+                {/* <Tooltip title="编辑菜单组">
                   <EditTwoTone
                     onClick={() => editMenuGroup(menu, '分组图标')}
                   />
-                </Tooltip>
+                </Tooltip> */}
               </>
             )}
-            {menu.menuType === 'MiniAppMenuThree' && (
+            {/* {menu.menuType === 'MiniAppMenuThree' && (
               <>
                 <Tooltip title="编辑菜单">
                   <EditTwoTone onClick={() => editMenu(menu)} />
                 </Tooltip>
               </>
-            )}
+            )} */}
             <Tooltip title="删除菜单">
               <DeleteTwoTone onClick={() => deleteMenu(menu)} />
             </Tooltip>
@@ -148,6 +158,38 @@ const LeftPart = () => {
     };
   };
 
+  // 获取当前菜单详细
+  const onSelect = (props, e) => {
+    // e.node.pos节点类型，根据这个渲染不同的编辑表单item,0-x一级菜单，0-0-x二级，0-0-0-x三级
+    if (e) {
+      if (e.node.pos.lastIndexOf('-') === 1) {
+        setNodeType(1);
+      } else if (e.node.pos.lastIndexOf('-') === 3) {
+        setNodeType(2);
+      } else {
+        setNodeType(3);
+      }
+    }
+    setMenuID(props[0]);
+    getMenuInfo(props[0])
+      .then(res => {
+        if (res.success) {
+          editMenuForm.setFieldsValue({
+            menuName: res.menuName,
+            shortName: res.menuShortName,
+            imageUrl: res.imageUrl,
+            pageUrl: res.pageUrl,
+            offlineImgUrl: res.offlineImgUrl,
+            funParam: res.funParam,
+            relatedRoleList: res.relatedRoleList || '',
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+
   // 左侧目录树相关操作
   const addMenu = menu => {
     setAddMenuVisible(true);
@@ -199,34 +241,35 @@ const LeftPart = () => {
         message.error(err);
       });
   };
-  const editMenuGroup = (menu, label) => {
-    setAddMenuGroupVisible(true);
-    setMenuTitle(`编辑${menu.text}`);
-    setMenuID(menu.menuID);
-    setMenuLabel(label);
-    getMenuInfo(menu.menuID)
-      .then(res => {
-        if (res.success) {
-          addMenuGroupForm.setFieldsValue({
-            menuName: res.menuName,
-            shortName: res.menuShortName,
-            imageUrl: res.imageUrl,
-            pageUrl: res.pageUrl,
-            offlineImgUrl: res.offlineImgUrl,
-            funParam: res.funParam,
-            relatedRoleList: res.relatedRoleList || [],
-          });
-        } else {
-          notification.error({
-            message: '获取失败',
-            description: res.message,
-          });
-        }
-      })
-      .catch(err => {
-        message.error(err);
-      });
-  };
+
+  // const editMenuGroup = (menu, label) => {
+  //   setAddMenuGroupVisible(true);
+  //   setMenuTitle(`编辑${menu.text}`);
+  //   setMenuID(menu.menuID);
+  //   setMenuLabel(label);
+  //   getMenuInfo(menu.menuID)
+  //     .then(res => {
+  //       if (res.success) {
+  //         addMenuGroupForm.setFieldsValue({
+  //           menuName: res.menuName,
+  //           shortName: res.menuShortName,
+  //           imageUrl: res.imageUrl,
+  //           pageUrl: res.pageUrl,
+  //           offlineImgUrl: res.offlineImgUrl,
+  //           funParam: res.funParam,
+  //           relatedRoleList: res.relatedRoleList || [],
+  //         });
+  //       } else {
+  //         notification.error({
+  //           message: '获取失败',
+  //           description: res.message,
+  //         });
+  //       }
+  //     })
+  //     .catch(err => {
+  //       message.error(err);
+  //     });
+  // };
   const deleteMenu = menu => {
     setDeleteMenuVisible(true);
     setMenuTitle(`删除菜单${menu.text}`);
@@ -300,6 +343,65 @@ const LeftPart = () => {
       setTipVisible(true);
     }
   };
+  // 提交-编辑菜单
+  const submitEditMenu = () => {
+    let menuName = editMenuForm.getFieldValue('menuName');
+    let shortName = editMenuForm.getFieldValue('shortName');
+    let imageUrl = editMenuForm.getFieldValue('imageUrl');
+    let offlineImgUrl = editMenuForm.getFieldValue('offlineImgUrl') || '';
+    let pageUrl = editMenuForm.getFieldValue('pageUrl') || '';
+    let funParam = editMenuForm.getFieldValue('funParam') || '';
+    let relatedRoleList = editMenuForm.getFieldValue('funParam') || '';
+    const params = {
+      menuID,
+      menuName,
+      shortName,
+      imageUrl,
+      offlineImgUrl,
+      pageUrl,
+      funParam,
+      relatedRoleList,
+    };
+    // 根据节点类型，加一层判断，必填项全部不为空时才能提交
+    if (nodeType === 1) {
+      if (menuName && shortName && imageUrl && offlineImgUrl) {
+        submitMenu(params);
+      } else {
+        setTipVisible(true);
+      }
+    } else if (nodeType === 2) {
+      if (menuName && shortName && imageUrl) {
+        submitMenu(params);
+      } else {
+        setTipVisible(true);
+      }
+    } else if (nodeType === 3) {
+      if (menuName && shortName && imageUrl && pageUrl) {
+        submitMenu(params);
+      } else {
+        setTipVisible(true);
+      }
+    }
+  };
+  const submitMenu = params => {
+    submitMenuInfo(params)
+      .then(res => {
+        if (res.success) {
+          notification.success({
+            message: '提交成功',
+          });
+        } else {
+          notification.error({
+            message: '获取失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+
   // 提交删除菜单
   const submitDeleteMenu = () => {
     deleteMenuApi(menuID)
@@ -359,44 +461,18 @@ const LeftPart = () => {
               showLine={{ showLeafIcon: false }}
               defaultExpandAll="true"
               // selectedKeys={[currentSelectMenu]}
-              // onSelect={onSelect}
+              onSelect={onSelect}
               treeData={treeData.map(t => mapTree(t))}
             />
           </Spin>
         )}
       </div>
-      {/* 必填项提示 */}
-      <Modal
-        title="提示"
-        visible={tipVisible}
-        onCancel={() => setTipVisible(false)}
-        width="300px"
-        centered
-        footer={[
-          <Button
-            key="back"
-            type="primary"
-            onClick={() => setTipVisible(false)}
-          >
-            关闭
-          </Button>,
-        ]}
-      >
-        <p>
-          标记<span className={styles.redText}>*</span>的为必填项
-        </p>
-      </Modal>
-      {/* 添加菜单 */}
-      <Modal
-        title={menuTitle}
-        visible={addMenuVisible}
-        onOk={submitAddMenu}
-        onCancel={() => setAddMenuVisible(false)}
-        okText="确认"
-        cancelText="取消"
-        centered
-      >
-        <Form form={addMenuForm} labelCol={{ span: 4 }}>
+      <div className={styles.editContainer}>
+        <Form
+          form={editMenuForm}
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 19 }}
+        >
           <Form.Item
             name="menuName"
             label="菜单名称"
@@ -418,93 +494,46 @@ const LeftPart = () => {
           >
             <Input placeholder="请输入菜单图标" />
           </Form.Item>
-          <Form.Item
-            name="imageUrl"
-            label="菜单图标"
-            rules={[{ required: true, message: '不能为空' }]}
-          >
-            <Input placeholder="请输入菜单图标" />
-          </Form.Item>
-          <Form.Item label="图标预览">
-            <PicturesWall maxLen={3} />
-          </Form.Item>
-          <Form.Item name="funParam" label="功能参数">
-            <Input placeholder="请输入功能参数" />
-          </Form.Item>
-        </Form>
-        <ListCardItem
-          itemid="1"
-          key="1"
-          userList={rolelist}
-          OUName="关联角色"
-          getValueCallback={getRoleValueCallback}
-        />
-      </Modal>
-      {/* 添加菜单组 */}
-      <Modal
-        title={menuTitle}
-        visible={addMenuGroupVisible}
-        onOk={submitAddMenuGroup}
-        onCancel={() => setAddMenuGroupVisible(false)}
-        okText="确认"
-        cancelText="取消"
-        centered
-      >
-        <Form form={addMenuGroupForm} labelCol={{ span: 4 }}>
-          <Form.Item
-            name="menuName"
-            label="分组名称"
-            rules={[{ required: true, message: '不能为空' }]}
-          >
-            <Input placeholder="请输入分组名称" />
-          </Form.Item>
-          <Form.Item
-            name="shortName"
-            label="分组别名"
-            rules={[{ required: true, message: '不能为空' }]}
-          >
-            <Input placeholder="请输入分组别名" />
-          </Form.Item>
-          <Form.Item
-            name="imageUrl"
-            label={menuLabel}
-            rules={[{ required: true, message: '不能为空' }]}
-          >
-            <Input placeholder="请输入菜单图标" />
-          </Form.Item>
           <Form.Item label="图标预览">
             <PicturesWall maxLen={3} />
           </Form.Item>
-          {/* 添加菜单组，label名称为在线图标才有离线图标 */}
-          {menuLabel === '在线图标' && (
-            <Form.Item
-              name="offlineImgUrl"
-              label="离线图标"
-              rules={[{ required: true, message: '不能为空' }]}
-            >
-              <Input placeholder="请输入离线图标" />
-            </Form.Item>
+          {nodeType === 1 && (
+            <>
+              <Form.Item
+                name="offlineImgUrl"
+                label="离线图标"
+                rules={[{ required: true, message: '不能为空' }]}
+              >
+                <Input placeholder="请输入离线图标" />
+              </Form.Item>
+              <Form.Item label="图标预览">
+                <PicturesWall maxLen={3} />
+              </Form.Item>
+            </>
+          )}
+          {nodeType === 3 && (
+            <>
+              <Form.Item
+                name="pageUrl"
+                label="功能路径"
+                rules={[{ required: true, message: '不能为空' }]}
+              >
+                <Input placeholder="请输入功能路径" />
+              </Form.Item>
+            </>
           )}
-          <Form.Item label="图标预览">
-            <PicturesWall maxLen={3} />
-          </Form.Item>
           <Form.Item name="funParam" label="功能参数">
             <Input placeholder="请输入功能参数" />
           </Form.Item>
+          <Form.Item wrapperCol={{ offset: 12 }}>
+            <Button key="back" type="primary" onClick={() => submitEditMenu()}>
+              提交
+            </Button>
+          </Form.Item>
         </Form>
-      </Modal>
-      {/* 删除菜单 */}
-      <Modal
-        title={menuTitle}
-        visible={deleteMenuVisible}
-        onOk={submitDeleteMenu}
-        onCancel={() => setDeleteMenuVisible(false)}
-        okText="确认"
-        cancelText="取消"
-        centered
-      >
-        <span>确定删除？</span>
-      </Modal>
+      </div>
+      <div className={styles.previewContainer}>关联角色</div>
+      {/* 必填项提示 */}
     </div>
   );
 };

src/pages/mobileConfig/menuconfig/LeftPart.less

 .contentContainer{
-  min-height: calc(100vh - 300px);
+  max-height: calc(100vh - 300px);
+  overflow-x: auto;
   display: flex;
   .menuContainer{
       min-width: 300px;
       border:1px solid #abaeb1;
-      min-height:calc(100vh - 300px);
+      // min-height:calc(100vh - 300px);
       overflow-y:auto;
       .ant-tree-list{
           padding: 10px;
-          height:calc(100vh - 300px);
+          height:calc(100vh - 330px);
           .ant-tree-switcher{
               line-height: 1;
               color:#1890FF;
@@ -19,11 +20,23 @@
           }
       }
   }
-  .previewContainer{
+  .editContainer{
       margin-left: 12px;
       flex: 1;
+      padding: 16px;
       float: left;
-      // background: white;
+      min-width: 500px;
+      border:1px solid #abaeb1;
+      .ant-table-pagination-right{
+          padding-right: 12px;
+      }
+  }
+  .previewContainer{
+      margin-left: 12px;
+      // flex: 1;
+      float: left;
+      min-width: 400px;
+      border:1px solid #abaeb1;
       .ant-table-pagination-right{
           padding-right: 12px;
       }
@@ -53,16 +66,4 @@
 .redText{
   color: red;
   cursor: pointer;
-}
-// .ant-modal-root{
-//   .ant-tree-switcher{
-//       line-height: 1;
-//       color:#1890FF;
-//   }
-// }
-
-// .menuContainer{
-//     width: 300px;
-//     padding: 10px;
-//     background: #1890FF;
-//   }
\ No newline at end of file
+}
\ No newline at end of file

src/pages/mobileConfig/menuconfig/MenuConfig.jsx

@@ -7,10 +7,8 @@ const MenuConfig = props => {
   const [flag, setFlag] = useState(1);
   return (
     <ProCard split="vertical">
-      <ProCard colSpan="400px">
-        <LeftPart />
-      </ProCard>
-      <ProCard>{/* <AddForm /> */}</ProCard>
+      <LeftPart />
+      {/* <ProCard><AddForm /></ProCard> */}
     </ProCard>
   );
 };