Merge branch 'master' of https://g.civnet.cn:8443/ReactWeb5/CivWeb

src/pages/commonMenu/index.js

@@ -2,9 +2,11 @@
 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';
 
 import { appService } from '@/api';
+import { useHistory } from '@wisdom-utils/runtime';
 import { savePagePartInfo } from '@/api/service/base';
 import styles from './index.less';
 import thumbnail from '../../assets/images/commonMenu/常用菜单.png';
@@ -15,13 +17,15 @@ const isNeedFilterIcon = (icon = '') => {
   return !icon.includes('一级') && !icon.includes('ios/');
 };
 
-const CommonMenu = () => {
+const CommonMenu = props => {
+  const history = useHistory();
   const [menus, setMenus] = useState([]); // 常用菜单信息
   const [widgets, setWidgets] = useState([]); // 菜单列表信息
   const [showMenuInfo, setShowMenuInfo] = useState(false); // 菜单列表显示隐藏
   const [loading, setLoading] = useState(true); // loading显示隐藏
   const [searchInfo, setSearchInfo] = useState('');
   const page = useRef(null);
+  const searchBox = useRef(null);
 
   const defaultSubmitMenu = () => {
     let submitData = [];
@@ -253,34 +257,44 @@ const CommonMenu = () => {
     });
   };
 
+  const linkToMenu = menu => {
+    const { menuUrl } = menu;
+    console.log(props);
+    history.push(`civweb4/${menuUrl}`);
+  };
+
+  const focusOutSearchInfo = e => {
+    e.stopPropagation();
+    let element = e.target;
+    // 事件对象逐层网上找，只要不是菜单搜索信息内的就隐藏起来
+    while (element && element !== page.current) {
+      if (element === searchBox.current) return;
+      element = element.parentNode;
+    }
+    setShowMenuInfo(false);
+  };
+
   return (
-    <div
-      className={styles.commonMenu}
-      ref={page}
-      onClick={e => {
-        e.stopPropagation();
-        if (e.target === page.current) setShowMenuInfo(false);
-      }}
-    >
+    <div className={styles.commonMenu} ref={page} onClick={focusOutSearchInfo}>
       <Spin spinning={loading}>
         <div className={styles.searchWrapper}>
-          <div className={styles.searchBox}>
+          <div className={styles.searchBox} ref={searchBox}>
             <div className={styles.searchTitle}>
               <i className="iconfont">&#xe611;</i>
               <span>我的常用菜单</span>
               <span>（{menus.length}）</span>
             </div>
-            <div>
-              <div className={styles.searchInput}>
-                <Input.Search
-                  placeholder="搜索功能菜单"
-                  // onFocus={() => setShowMenuInfo(true)}
-                  onSearch={info => {
-                    setShowMenuInfo(true);
-                    setSearchInfo(info);
-                  }}
-                />
-              </div>
+            <div className={styles.searchInput}>
+              <Input
+                maxLength={50}
+                width={400}
+                placeholder="搜索功能菜单"
+                onChange={e => {
+                  setShowMenuInfo(true);
+                  setSearchInfo(e.target.value);
+                }}
+                onFocus={() => setShowMenuInfo(true)}
+              />
             </div>
             <div
               className={classnames(
@@ -304,7 +318,7 @@ const CommonMenu = () => {
         </div>
         <div className={styles.menuCardWrapper}>
           {menus.map(item => (
-            <MenuCard menu={item} />
+            <MenuCard menu={item} linkToMenu={linkToMenu} />
           ))}
         </div>
         <div className={styles.pageLogo}>
@@ -315,33 +329,35 @@ const CommonMenu = () => {
   );
 };
 
-const MenuCard = ({ menu }) => {
+const MenuCard = ({ menu, linkToMenu }) => {
   const { menuIcon, menuName, menuGroup, menuID, menuUrl, menuPic } = menu;
   return (
-    <div className={styles.menuCard}>
-      <Link to={menuUrl} title={menuName}>
-        <img
-          className={styles.cardThumbnail}
-          src={menuPic || thumbnail}
-          alt=""
-        />
-        <div className={styles.cardLabel}>
-          <div
-            className={classnames(
-              styles.cardTitle,
-              isNeedFilterIcon(menuIcon) ? styles.filterIconBox : '',
-            )}
-          >
-            <span className={styles.iconBox}>
-              <img className={styles.cardIcon} src={menuIcon} alt="" />
-            </span>
-            <span className={styles.cardName}>{menuName}</span>
-          </div>
-          <div className={styles.cardGroup}>{menuGroup}</div>
+    <div className={styles.menuCard} onClick={() => linkToMenu(menu)}>
+      {/* <Link to={menuUrl} title={menuName}> */}
+      <img className={styles.cardThumbnail} src={menuPic || thumbnail} alt="" />
+      <div className={styles.cardLabel}>
+        <div
+          className={classnames(
+            styles.cardTitle,
+            isNeedFilterIcon(menuIcon) ? styles.filterIconBox : '',
+          )}
+        >
+          <span className={styles.iconBox}>
+            <img className={styles.cardIcon} src={menuIcon} alt="" />
+          </span>
+          <span className={styles.cardName}>{menuName}</span>
         </div>
-      </Link>
+        <div className={styles.cardGroup}>{menuGroup}</div>
+      </div>
+      {/* </Link> */}
     </div>
   );
 };
 
-export default CommonMenu;
+const mapStateToProps = state => ({
+  menu: state.getIn(['global', 'menu']),
+});
+export default connect(
+  mapStateToProps,
+  null,
+)(CommonMenu);

src/pages/commonMenu/index.less

@@ -55,6 +55,11 @@
           color: #3B7FDF;
         }
       }
+      .searchInput {
+        flex: 1;
+        overflow: hidden;
+        margin-left: 50px;
+      }
       .searchInfoBox {
         width: 100%;
         height: 400px;