258 lines
9.7 KiB
JavaScript
258 lines
9.7 KiB
JavaScript
|
import { Menu } from 'antd';
|
|||
|
|
|
|||
|
|
const SubMenu = Menu.SubMenu;
|
|||
|
|
const ItemMenu = Menu.Item;
|
|||
|
|
import cloneDeep from 'lodash/cloneDeep';
|
|||
|
|
import { addContentPath } from '../util/pathUtil';
|
|||
|
|
class WeaMenuInline extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
const openKeys = this.getOpenKeys(props.defaultSelectedKey, props.datas);
|
|||
|
|
// console.log("openKeys1:",openKeys);
|
|||
|
|
this.state = {
|
|||
|
|
mode: props.mode || 'Inline',
|
|||
|
|
datas: props.datas || [],
|
|||
|
|
inlineWidth: props.inlineWidth || 197,
|
|||
|
|
verticalWidth: props.verticalWidth || 61,
|
|||
|
|
fontSize: props.fontSize,
|
|||
|
|
openKeys: openKeys || [],
|
|||
|
|
selectedKey: props.defaultSelectedKey || '', // 包含SubMenu，只做单选
|
|||
|
|
defaultSelectedKey: props.defaultSelectedKey || '', // 包含SubMenu，只做单选
|
|||
|
|
canClick: true,
|
|||
|
|
selectedType: 0,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
componentWillReceiveProps(nextProps) {
|
|||
|
|
// console.log('datas:',this.props.datas,nextProps.datas,this.props.datas.toString() !== nextProps.datas.toString());
|
|||
|
|
// console.log('defaultSelectedKey',this.props.defaultSelectedKey,nextProps.defaultSelectedKey,this.props.defaultSelectedKey !== nextProps.defaultSelectedKey);
|
|||
|
|
// console.log('defaultSelectedKey',this.state.defaultSelectedKey,nextProps.defaultSelectedKey,this.state.defaultSelectedKey !== nextProps.defaultSelectedKey);
|
|||
|
|
|
|||
|
|
const openKeys = this.getOpenKeys(nextProps.defaultSelectedKey, nextProps.datas);
|
|||
|
|
if (
|
|||
|
|
JSON.stringify(this.props.datas) !== JSON.stringify(nextProps.datas) ||
|
|||
|
|
(this.props.defaultSelectedKey !== nextProps.defaultSelectedKey && this.state.defaultSelectedKey !== nextProps.defaultSelectedKey) ||
|
|||
|
|
this.props.fontSize !== nextProps.fontSize
|
|||
|
|
) {
|
|||
|
|
// 计算出openKeys
|
|||
|
|
let newProps = {
|
|||
|
|
datas: nextProps.datas || [],
|
|||
|
|
fontSize: nextProps.fontSize,
|
|||
|
|
openKeys: openKeys || [],
|
|||
|
|
defaultSelectedKey: nextProps.defaultSelectedKey || '',
|
|||
|
|
selectedKey: nextProps.defaultSelectedKey || '',
|
|||
|
|
};
|
|||
|
|
// if(this.props.defaultSelectedKey !== nextProps.defaultSelectedKey&&this.state.defaultSelectedKey !== nextProps.defaultSelectedKey)
|
|||
|
|
// newProps.openKeys = this.getOpenKeys(nextProps.defaultSelectedKey,nextProps.datas);
|
|||
|
|
this.setState(newProps);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
render() {
|
|||
|
|
const { mode, datas, verticalWidth } = this.state;
|
|||
|
|
const { openKeys, selectedType } = this.state;
|
|||
|
|
let that = this;
|
|||
|
|
return (
|
|||
|
|
<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@fc6gtr`}
|
|||
|
|
inlineIndent={verticalWidth / 2 - 9}
|
|||
|
|
mode={mode}
|
|||
|
|
openKeys={selectedType == 1 ? [] : openKeys}
|
|||
|
|
selectedKeys={[]}
|
|||
|
|
onOpen={(e) => {
|
|||
|
|
that.changeOpen(e.openKeys);
|
|||
|
|
}}
|
|||
|
|
onClose={(e) => {
|
|||
|
|
that.changeClose(e.openKeys);
|
|||
|
|
}}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
that.changeSelectedKey(e.key, that.getDataByKey(e.key, datas), 0);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{this.renderMenuItem(datas, 1)}
|
|||
|
|
</Menu>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getOpenKeys(key, datas) {
|
|||
|
|
const data = this.getDataByKey(key, datas);
|
|||
|
|
const treeKey = data.treeKey;
|
|||
|
|
let treeKeyArr = treeKey ? treeKey.split('{$}') : [];
|
|||
|
|
// console.log("treeKey:",treeKey," treeKeyArr:",treeKeyArr);
|
|||
|
|
return treeKeyArr;
|
|||
|
|
}
|
|||
|
|
onModeChange() {
|
|||
|
|
const { mode } = this.state;
|
|||
|
|
if (typeof this.props.onModeChange == 'function') {
|
|||
|
|
this.props.onModeChange(mode);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
getDataByKey(key, datas) {
|
|||
|
|
let that = this;
|
|||
|
|
let obj = '';
|
|||
|
|
for (let i = 0; i < datas.length && obj == ''; i++) {
|
|||
|
|
if (datas[i].id == key) {
|
|||
|
|
obj = cloneDeep(datas[i]);
|
|||
|
|
}
|
|||
|
|
if (obj == '' && datas[i].child && datas[i].child.length > 0) {
|
|||
|
|
obj = that.getDataByKey(key, datas[i].child);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return obj;
|
|||
|
|
}
|
|||
|
|
changeSelectedKey(key, data, type) {
|
|||
|
|
if (window.event && window.event.shiftKey) {
|
|||
|
|
window.open(addContentPath(data.fullrouteurl || data.url), '_blank');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (data && data.target != 'mainFrame') {
|
|||
|
|
window.open(addContentPath(data.fullrouteurl || data.url), data.target);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const { canClick } = this.state;
|
|||
|
|
const { clickBlock } = this.props;
|
|||
|
|
const that = this;
|
|||
|
|
// let d = new Date();
|
|||
|
|
// console.log(canClick,d.getTime());
|
|||
|
|
if (canClick) {
|
|||
|
|
this.setState({
|
|||
|
|
canClick: false,
|
|||
|
|
selectedKey: key,
|
|||
|
|
selectedType: type,
|
|||
|
|
});
|
|||
|
|
if (typeof this.props.onSelect == 'function') {
|
|||
|
|
this.props.onSelect(key, data, type);
|
|||
|
|
}
|
|||
|
|
setTimeout(() => {
|
|||
|
|
that.setState({ canClick: true });
|
|||
|
|
}, clickBlock || 300);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
changeOpen(openKeys) {
|
|||
|
|
this.setState({
|
|||
|
|
openKeys,
|
|||
|
|
});
|
|||
|
|
if (typeof this.props.onOpenCallback == 'function') {
|
|||
|
|
this.props.onOpenCallback();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
changeClose(openKeys) {
|
|||
|
|
this.setState({
|
|||
|
|
openKeys,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
renderMenuItem(datas, level) {
|
|||
|
|
const selectedClassName = 'wea-menu-selected';
|
|||
|
|
let that = this;
|
|||
|
|
const { selectedKey, canClick } = this.state;
|
|||
|
|
let datasArr = new Array();
|
|||
|
|
for (let i = 0; i < datas.length; i++) {
|
|||
|
|
const data = datas[i];
|
|||
|
|
const isSubMenu = data.child && data.child.length > 0;
|
|||
|
|
const isSelected = selectedKey == data.id || `verTop_${selectedKey}` == data.id;
|
|||
|
|
if (data.isInlineHide !== 'true') {
|
|||
|
|
if (isSubMenu) {
|
|||
|
|
datasArr.push(
|
|||
|
|
<SubMenu ecId={`${this && this.props && this.props.ecId || ''}_SubMenu@0x72ew@${data.id}`}
|
|||
|
|
disabled={!canClick}
|
|||
|
|
selectedClassName={isSelected ? selectedClassName : ''}
|
|||
|
|
key={data.id}
|
|||
|
|
onTitleClick={(e) => {
|
|||
|
|
that.changeSelectedKey(e.key, data, 0);
|
|||
|
|
}}
|
|||
|
|
title={that.renderTitle(data, level)}
|
|||
|
|
>
|
|||
|
|
{that.renderMenuItem(data.child, level + 1)}
|
|||
|
|
</SubMenu>,
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
datasArr.push(
|
|||
|
|
<ItemMenu ecId={`${this && this.props && this.props.ecId || ''}_ItemMenu@8u33tz@${data.id}`} className={isSelected ? selectedClassName : ''} key={data.id}>
|
|||
|
|
{that.renderTitle(data, level)}
|
|||
|
|
</ItemMenu>,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return datasArr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderTitle(data, level) {
|
|||
|
|
const { verticalWidth, fontSize } = this.state;
|
|||
|
|
const that = this;
|
|||
|
|
const needIcon = level == 1;
|
|||
|
|
const underLineStyle = data.hasUnderLine == 'true' ? { borderBottom: '1px solid #bbb' } : {};
|
|||
|
|
const topLineStyle = data.hasTopLine == 'true' ? { borderTop: '1px solid #bbb' } : {};
|
|||
|
|
const borderStyle = Object.assign({ position: 'relative', height: '42px' }, underLineStyle, topLineStyle);
|
|||
|
|
const outStyle = { position: 'absolute', display: 'inline-block', width: needIcon ? '65%' : '90%', height: '42px' };
|
|||
|
|
const innerStyle = { display: 'inline-block', maxWidth: data.countId ? 'calc(100% - 40px)' : '92%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' };
|
|||
|
|
const tagStyle = data.tagColor ? { display: 'inline-block', width: '10px', height: '10px', border: '1px solid #bbb', backgroundColor: data.tagColor, verticalAlign: '16px' } : {};
|
|||
|
|
const countStyle = data.countId ? { display: 'inline-block', width: '40px', overflow: 'hidden' } : {};
|
|||
|
|
const iconMarginR = verticalWidth / 2 - 9;
|
|||
|
|
|
|||
|
|
const iconCom =
|
|||
|
|
data.iconType == '2' && data.iconImgSrc ? (
|
|||
|
|
<img
|
|||
|
|
src={addContentPath(data.iconImgSrc)}
|
|||
|
|
alt=""
|
|||
|
|
className="wea-menu-title-icon"
|
|||
|
|
style={{ display: 'inline-block', width: '18px', height: '18px', verticalAlign: '-4px', marginRight: iconMarginR }}
|
|||
|
|
title={data.titleUrlName || ''}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
data.titleUrlIcon && data.titleUrlName && that.changeSelectedKey(data.id, data, 1);
|
|||
|
|
data.titleUrlIcon && data.titleUrlName && e.stopPropagation();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
) : data.icon ? (
|
|||
|
|
<i
|
|||
|
|
className={`wea-menu-title-icon wevicon ${data.icon}`}
|
|||
|
|
style={{ display: 'inline-block', fontSize: '18px', verticalAlign: 'middle', marginRight: iconMarginR }}
|
|||
|
|
title={data.titleUrlName || ''}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
data.titleUrlIcon && data.titleUrlName && that.changeSelectedKey(data.id, data, 1);
|
|||
|
|
data.titleUrlIcon && data.titleUrlName && e.stopPropagation();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<i
|
|||
|
|
className={`wea-menu-title-icon wevicon wevicon-menu-default wevicon-menu-${data.levelid}`}
|
|||
|
|
style={{ display: 'inline-block', fontSize: '18px', verticalAlign: 'middle', marginRight: iconMarginR }}
|
|||
|
|
title={data.titleUrlName || ''}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
data.titleUrlIcon && data.titleUrlName && that.changeSelectedKey(data.id, data, 1);
|
|||
|
|
data.titleUrlIcon && data.titleUrlName && e.stopPropagation();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const urlIconCom =
|
|||
|
|
data.titleUrlIcon && !data.titleUrlName ? (
|
|||
|
|
<img
|
|||
|
|
src={addContentPath(data.titleUrlIcon)}
|
|||
|
|
alt=""
|
|||
|
|
className="wea-menu-url-icon"
|
|||
|
|
style={{ width: 16, height: 16, position: 'absolute', right: 20, top: 13 }}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
that.changeSelectedKey(data.id, data, 1);
|
|||
|
|
e.stopPropagation();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
) : null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div data-id={data.numId} style={borderStyle}>
|
|||
|
|
{needIcon ? iconCom : ''}
|
|||
|
|
<div title={data.name} className="wea-menu-tip-out" style={outStyle}>
|
|||
|
|
{data.tagColor && <span style={tagStyle} />}
|
|||
|
|
<span className={`wea-menu-tip-inner wea-menu-title wea-f${fontSize}`} style={innerStyle}>
|
|||
|
|
{data.name}
|
|||
|
|
</span>
|
|||
|
|
{data.countId && <span id={data.countId} style={countStyle} />}
|
|||
|
|
</div>
|
|||
|
|
<span id={`num_${data.numId}`} style={{ position: 'absolute', top: 0, right: 0 }} />
|
|||
|
|
{urlIconCom}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default WeaMenuInline;
|