Skip to content

C
CivWeb
Commit bef99023 authored by 邓晓峰's avatar 邓晓峰
Browse files
Options

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

parents 891f847a e8b58e1d
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 83 deletions
src/pages/commonMenu/index.js
View file @ bef99023
/* 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,
......
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