Commit 53bff02c authored by 邓晓峰's avatar 邓晓峰
parents 51e95274 891f847a
Pipeline #35267 skipped with stages
......@@ -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,35 +257,45 @@ const CommonMenu = () => {
});
};
return (
<div
className={styles.commonMenu}
ref={page}
onClick={e => {
const linkToMenu = menu => {
const { menuUrl } = menu;
console.log(props);
history.push(`civweb4/${menuUrl}`);
};
const focusOutSearchInfo = e => {
e.stopPropagation();
if (e.target === page.current) setShowMenuInfo(false);
}}
>
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={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
<Input
maxLength={50}
width={400}
placeholder="搜索功能菜单"
// onFocus={() => setShowMenuInfo(true)}
onSearch={info => {
onChange={e => {
setShowMenuInfo(true);
setSearchInfo(info);
setSearchInfo(e.target.value);
}}
onFocus={() => setShowMenuInfo(true)}
/>
</div>
</div>
<div
className={classnames(
styles.searchInfoBox,
......@@ -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,16 +329,12 @@ 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.menuCard} onClick={() => linkToMenu(menu)}>
{/* <Link to={menuUrl} title={menuName}> */}
<img className={styles.cardThumbnail} src={menuPic || thumbnail} alt="" />
<div className={styles.cardLabel}>
<div
className={classnames(
......@@ -339,9 +349,15 @@ const MenuCard = ({ menu }) => {
</div>
<div className={styles.cardGroup}>{menuGroup}</div>
</div>
</Link>
{/* </Link> */}
</div>
);
};
export default CommonMenu;
const mapStateToProps = state => ({
menu: state.getIn(['global', 'menu']),
});
export default connect(
mapStateToProps,
null,
)(CommonMenu);
......@@ -55,6 +55,11 @@
color: #3B7FDF;
}
}
.searchInput {
flex: 1;
overflow: hidden;
margin-left: 50px;
}
.searchInfoBox {
width: 100%;
height: 400px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment