Merge branch 'feat/commonmenu' of https://g.civnet.cn:8443/ReactWeb5/CivWeb into feat/commonmenu

src/pages/commonMenu/index.js

 /* eslint-disable no-useless-constructor */
 import React, { useState, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
 import { Input, Button, Tree, notification, Spin, message } from 'antd';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
@@ -11,6 +10,7 @@ import { savePagePartInfo } from '@/api/service/base';
 import styles from './index.less';
 import thumbnail from '../../assets/images/commonMenu/常用菜单.png';
 import pageLogo from '../../assets/images/commonMenu/page-logo.png';
+import starIcon from '../../assets/images/commonMenu/矢量智能对象 拷贝 3@2x.png';
 
 // 是否是灰色的图标（灰色图标在白色背景中看不见，添加滤镜变色）
 const isNeedFilterIcon = (icon = '') => {
@@ -19,8 +19,9 @@ const isNeedFilterIcon = (icon = '') => {
 
 const CommonMenu = props => {
   const history = useHistory();
-  const [menus, setMenus] = useState([]); // 常用菜单信息
-  const [widgets, setWidgets] = useState([]); // 菜单列表信息
+  const { menus } = props;
+  const [commonMenus, setCommonMenus] = useState([]); // 常用菜单信息
+  const [menuList, setMenuList] = useState([]);
   const [showMenuInfo, setShowMenuInfo] = useState(false); // 菜单列表显示隐藏
   const [loading, setLoading] = useState(true); // loading显示隐藏
   const [searchInfo, setSearchInfo] = useState('');
@@ -29,7 +30,7 @@ const CommonMenu = props => {
 
   const defaultSubmitMenu = () => {
     let submitData = [];
-    submitData = menus.map(item => ({
+    submitData = commonMenus.map(item => ({
       PartID: item.menuID,
       PartName: item.menuName,
       PartUrl: item.menuUrl,
@@ -41,23 +42,22 @@ const CommonMenu = props => {
   /**
    * 添加、删除菜单
    * @param {string} opr add/delete，添加/删除
-   * @param {object} extData { groupName, label, icon, url, product }，操作的菜单信息widget
+   * @param {object} extData { PartID, label, icon, url, product }，操作的菜单信息widget
    */
-  const updateCommonMenu = (opr, extData) => {
-    const { groupName, label, icon, url, product } = extData;
+  const updateCommonMenu = (opr, node) => {
+    const { href, extData } = node;
+    const { PartID, label, icon, url, product } = extData;
     setLoading(true);
     let submitData = defaultSubmitMenu();
     if (opr === 'add') {
       submitData.push({
-        PartID: `${groupName}_${label}`,
+        PartID: `${PartID}`,
         PartName: label,
-        PartUrl: url,
+        PartUrl: href,
         icon,
       });
     } else if (opr === 'delete') {
-      submitData = submitData.filter(
-        item => item.PartID !== `${groupName}_${label}`,
-      );
+      submitData = submitData.filter(item => item.PartID !== `${PartID}`);
     }
     savePagePartInfo({
       query: {
@@ -81,7 +81,7 @@ const CommonMenu = props => {
    */
   const renderTitle = node => {
     const { key, title, extData = {}, children } = node;
-    const { icon, isMenu, isAdded } = extData;
+    const { icon, url, isAdded } = extData;
     return (
       <div className={styles.customTitle}>
         <div
@@ -95,7 +95,7 @@ const CommonMenu = props => {
           </span>
           <span>{title}</span>
         </div>
-        {isMenu && (
+        {url && (
           <div className={styles.titleControl}>
             {isAdded ? (
               <div>
@@ -104,7 +104,7 @@ const CommonMenu = props => {
                   className={styles.chooseBtn}
                   onClick={e => {
                     e.stopPropagation();
-                    updateCommonMenu('delete', extData);
+                    updateCommonMenu('delete', node);
                   }}
                 >
                   取消添加
@@ -116,7 +116,7 @@ const CommonMenu = props => {
                   className={styles.chooseBtn}
                   onClick={e => {
                     e.stopPropagation();
-                    updateCommonMenu('add', extData);
+                    updateCommonMenu('add', node);
                   }}
                 >
                   添加
@@ -129,58 +129,6 @@ const CommonMenu = props => {
     );
   };
 
-  const getWidgets = addedmenus => {
-    const isAddedMenu = widget => {
-      const menuTmp = addedmenus.find(
-        item =>
-          item.menuGroup === widget.extData.groupName ||
-          item.menuName === widget.extData.label,
-      );
-      return !!menuTmp;
-    };
-    const deepWidgets = (allWidgets, newWidgets, deep, groupName) => {
-      allWidgets &&
-        allWidgets.forEach((item, index) => {
-          const newWidget = {
-            title: item.label,
-            key:
-              item.url === undefined
-                ? `${groupName}_${item.label}`
-                : `${groupName}_${item.url}`,
-            // icon: <MehOutlined />,
-            children: [],
-            extData: {
-              ...item,
-              icon: `https://panda-water.cn/web4/${item.icon}`,
-              isMenu: item.url !== undefined,
-              groupName:
-                item.url === undefined
-                  ? `${groupName}_${item.label}`
-                  : groupName,
-            },
-          };
-          newWidget.extData.isAdded = isAddedMenu(newWidget);
-          newWidgets.push(newWidget);
-          deepWidgets(
-            item.widgets,
-            newWidget.children,
-            deep + 1,
-            item.url === undefined ? `${groupName}_${item.label}` : groupName,
-          );
-        });
-    };
-    // 所有的可选菜单
-    const { allWidgets = [] } = window.globalConfig;
-    const newWidgets = [];
-    deepWidgets(
-      allWidgets,
-      newWidgets,
-      1,
-      `widget_${window.globalConfig.client}`,
-    );
-    return newWidgets;
-  };
-
   const fetchMenus = () => {
     appService
       .getPagePartInfo({
@@ -219,9 +167,9 @@ const CommonMenu = props => {
           newMenu.menuPic = item.BgPicUrl;
           newMenus.push(newMenu);
         });
-        setMenus(newMenus);
-        const w = getWidgets(newMenus);
-        setWidgets(w);
+        setCommonMenus(newMenus);
+        // const w = getWidgets(newMenus);
+        // setWidgets(w);
       })
       .catch(error => {
         notification.error({
@@ -235,11 +183,56 @@ const CommonMenu = props => {
     fetchMenus();
   }, []);
 
+  useEffect(() => {
+    const isAddedMenu = menu => {
+      const menuTmp = commonMenus.find(
+        item => item.menuID === menu.extData.PartID,
+      );
+      return !!menuTmp;
+    };
+    const loop = (data, prePartID) => {
+      return data.map(item => {
+        const { name, level, href, key, path, routes } = item;
+        const newmenu = { ...item };
+        newmenu.key = href ? key : path;
+        newmenu.title = name;
+
+        // 菜单进行搜索过滤
+        const index = name.indexOf(searchInfo);
+        const beforeStr = name.substr(0, index);
+        const afterStr = name.substr(index + searchInfo.length);
+        const title =
+          index > -1 ? (
+            <span>
+              {beforeStr}
+              <span className={styles.treeSearchInfo}>{searchInfo}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span>{name}</span>
+          );
+        newmenu.title = title;
+        newmenu.extData = {
+          ...item.extData,
+          PartID: `${prePartID}_${name}`,
+        };
+        newmenu.extData.isAdded = isAddedMenu(newmenu);
+
+        if (routes) {
+          newmenu.children = loop(routes, `${prePartID}_${name}`);
+        }
+        return newmenu;
+      });
+    };
+    const newmenus = loop(menus, `widget_${window.globalConfig.client}`);
+    setMenuList(newmenus);
+  }, [menus, searchInfo, commonMenus]);
+
   const loop = data => {
     return data.map(item => {
-      const index = item.title.indexOf(searchInfo);
-      const beforeStr = item.title.substr(0, index);
-      const afterStr = item.title.substr(index + searchInfo.length);
+      const index = item.name.indexOf(searchInfo);
+      const beforeStr = item.name.substr(0, index);
+      const afterStr = item.name.substr(index + searchInfo.length);
       const title =
         index > -1 ? (
           <span>
@@ -248,7 +241,7 @@ const CommonMenu = props => {
             {afterStr}
           </span>
         ) : (
-          <span>{item.title}</span>
+          <span>{item.name}</span>
         );
       if (item.children) {
         return { ...item, title, children: loop(item.children) };
@@ -259,8 +252,7 @@ const CommonMenu = props => {
 
   const linkToMenu = menu => {
     const { menuUrl } = menu;
-    console.log(props);
-    history.push(`civweb4/${menuUrl}`);
+    history.push(menuUrl);
   };
 
   const focusOutSearchInfo = e => {
@@ -280,9 +272,14 @@ const CommonMenu = props => {
         <div className={styles.searchWrapper}>
           <div className={styles.searchBox} ref={searchBox}>
             <div className={styles.searchTitle}>
-              <i className="iconfont">&#xe611;</i>
+              {/* <i className="iconfont">&#xe611;</i> */}
+              <img
+                style={{ width: '20px', marginRight: '0.5em' }}
+                src={starIcon}
+                alt=""
+              />
               <span>我的常用菜单</span>
-              <span>（{menus.length}）</span>
+              <span>（{commonMenus.length}）</span>
             </div>
             <div className={styles.searchInput}>
               <Input
@@ -308,7 +305,7 @@ const CommonMenu = props => {
                 defaultExpandAll
                 defaultSelectedKeys={['0-0-0']}
                 // switcherIcon={<DownOutlined />}
-                treeData={loop(widgets)}
+                treeData={menuList}
                 titleRender={renderTitle}
                 selectable={false}
               />
@@ -317,8 +314,8 @@ const CommonMenu = props => {
           {/* <Button className={styles.searchBtn}>添加菜单</Button> */}
         </div>
         <div className={styles.menuCardWrapper}>
-          {menus.map(item => (
-            <MenuCard menu={item} linkToMenu={linkToMenu} />
+          {commonMenus.map(item => (
+            <MenuCard menu={item} linkToMenu={linkToMenu} key={item.menuID} />
           ))}
         </div>
         <div className={styles.pageLogo}>
@@ -355,7 +352,7 @@ const MenuCard = ({ menu, linkToMenu }) => {
 };
 
 const mapStateToProps = state => ({
-  menu: state.getIn(['global', 'menu']),
+  menus: state.getIn(['global', 'menu']),
 });
 export default connect(
   mapStateToProps,