94 lines
4.3 KiB
JavaScript
94 lines
4.3 KiB
JavaScript
/*
|
|
* @Author: lusx
|
|
* @Date: 2020-03-03 09:17:39
|
|
* @Last Modified by: lusx
|
|
* @Last Modified time: 2020-04-24 16:50:30
|
|
*/
|
|
import React from "react";
|
|
import { Input, Menu } from "antd";
|
|
import { withRouter } from 'react-router';
|
|
import { WeaLocaleProvider } from 'ecCom';
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
@withRouter
|
|
export default class Content extends React.Component {
|
|
static defaultProps = {
|
|
//React.PureComponent
|
|
prefixCls: 'prj-select',
|
|
hasSearch: true,
|
|
hasAll: true,
|
|
notFoundContent: "无匹配项",
|
|
goText: "查看所有项目"
|
|
};
|
|
constructor() {
|
|
super();
|
|
this.state = { value: '' }
|
|
}
|
|
componentWillUnmount() {
|
|
this.setState({ value: '' })
|
|
}
|
|
render() {
|
|
const { options, prefixCls, hasSearch , hasAll , _inputChangeFun, onChange, notFoundContent, goText, _clearFun, selectedKey } = this.props;
|
|
// console.log("options--",options)
|
|
const { value } = this.state;
|
|
return (
|
|
<div className={`${prefixCls}-filterable-menu`}>
|
|
{hasSearch && <div className="search-input-wrapper input-area">
|
|
<div role="presentation" class="text-input ui-input ui-icon-input search-input search-input">
|
|
<span className="icon--fangdajing icon iconfont ui-icon icon-search ui-input-icon"></span>
|
|
<Input ecId={`${this && this.props && this.props.ecId || ''}_Input@gagg3s`} placeholder={getLabel('518317','搜索项目')} id={`${prefixCls}-input`} value={value} onChange={() => { _inputChangeFun(); this.inputChange() }} />
|
|
{value.length != 0 &&
|
|
<div className="search-input-clear-icon-wrapper" onClick={() =>{this.clearFun();_clearFun();}}>
|
|
<span className="icon-guanbi icon iconfont anticon-close-circle search-input-clear-icon"></span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>}
|
|
<div className="menu-area">
|
|
<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@bazxrn`} defaultSelectedKeys={[selectedKey]} style={{ width: 220 }} mode="horizontal" onClick={({ key }) => this._onChange({ key })}>
|
|
{
|
|
options.menus && options.menus.map(item => (
|
|
<Menu.ItemGroup ecId={`${this && this.props && this.props.ecId || ''}_MenuGroup@3k6i40@${item.key}`} key={item.key} title={item.showname} >
|
|
{
|
|
item.datas.length > 0 ? item.datas && item.datas.map(i => (
|
|
<Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@66739j@${i.id}`} key={i.id} ><a>{i.name}</a></Menu.Item>
|
|
)) : <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@o6i25y`} key="noone"><a className={`${prefixCls}-noone`}>{notFoundContent}</a></Menu.Item>
|
|
}
|
|
</Menu.ItemGroup>
|
|
))
|
|
}
|
|
</Menu>
|
|
{hasAll && <a class="view-all" onClick={this.allFun}>
|
|
{getLabel('518319','查看所有项目')}({options.total})
|
|
<span className="icon--youjiantou icon iconfont"></span>
|
|
</a>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
inputChange = (ev) => {
|
|
const oEvent = ev || event;
|
|
oEvent.preventDefault();
|
|
this.setState({
|
|
value: oEvent.target.value,
|
|
});
|
|
}
|
|
clearFun = () => {
|
|
this.setState({ value: '' })
|
|
}
|
|
_onChange = (id, ev) => {
|
|
const { handleVisibleChange, _clearFun } = this.props;
|
|
if (id.key === "noone") {
|
|
handleVisibleChange(false);
|
|
return false;
|
|
}
|
|
const oEvent = ev || event;
|
|
oEvent.preventDefault();
|
|
this.props.onChange(id.key)
|
|
handleVisibleChange(false);
|
|
_clearFun();
|
|
this.setState({ value: '' });
|
|
}
|
|
allFun = () => {
|
|
this.props.router.push({pathname: "/main/prj/portal"});
|
|
}
|
|
} |