diff --git a/src/components/filterSelect/main.css b/src/components/filterSelect/main.css index d5765cf9..e3ca2175 100644 --- a/src/components/filterSelect/main.css +++ b/src/components/filterSelect/main.css @@ -53,6 +53,15 @@ padding-right: 6px; } .filter-placeholder{ + max-width: 100px; + overflow: hidden; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + /* 可以显示的行数,超出部分用...表示*/ + -webkit-box-orient: vertical; + /*控制显示行数*/ + -webkit-line-clamp: 1; font-size: 12px; color: #626366; padding-left: 5px; diff --git a/src/components/filterSelect/main.js b/src/components/filterSelect/main.js index 453e7458..dc68960f 100644 --- a/src/components/filterSelect/main.js +++ b/src/components/filterSelect/main.js @@ -16,10 +16,12 @@ export default class filterSelect extends React.Component { id: props.data.id, label: props.data.label, selectedMenu: props.data.menuList[0], + multiple:props.multiple|false, menuList: menuList, visible: true, menuShow: true, propName: props.data.prop, + selectList:[] }; this.state.text = props.data.menuList[0].name; } @@ -28,15 +30,40 @@ export default class filterSelect extends React.Component { this.setState({ menuShow: isShow }); } - onMenuClick(e, id) { - let seleted = _.find(this.state.menuList, function (o) { - return o.id == id; - }); - this.setState({ selectedMenu: seleted }); - this.setState({ text: seleted.name }); + mouseLeaveFn(){ this.setState({ menuShow: false }); + } + mouseMenuFn(){ + this.setState({ menuShow: true }); + } + onMenuClick(e, id) { + if(this.state.multiple){//多选 + let selectAll=_.cloneDeep(this.state.selectList); + if(!selectAll.includes(id)){ + selectAll.push(id); + }else{ + selectAll=selectAll.filter(item=>item!=id); + } + this.setState({selectList:selectAll}); + let seleted = _.filter(this.state.menuList, function (o) { + return selectAll.includes(o.id) + }); + let seletedIds=seleted.map(it=>it.id); + let seletedNames=seleted.map(it=>it.name); + this.props.selectFn(seletedIds, this.state.propName); + this.setState({ text: seletedNames.join(',') }); + }else{//单选 + let seleted = _.find(this.state.menuList, function (o) { + return o.id==id + }); + this.setState({ selectedMenu: seleted }); + this.setState({ text: seleted.name }); + this.props.selectFn(id, this.state.propName); + this.setState({ menuShow: false }); + } + // this.setState({ text: seleted.name }); //点击选择菜单 - this.props.selectFn(id, this.state.propName); + } onMenuHide() { this.setState({ menuShow: false }); @@ -60,6 +87,8 @@ export default class filterSelect extends React.Component { onClick={() => { this.onHandlerClick(); }} + onMouseEnter={()=>this.mouseMenuFn()} + // onMouseLeave={()=>this.mouseLeaveFn()} > {this.state.label} : @@ -76,6 +105,7 @@ export default class filterSelect extends React.Component { {this.state.menuShow ? ( +
this.mouseLeaveFn()}> { this.onMenuClick(e, id); @@ -83,7 +113,7 @@ export default class filterSelect extends React.Component { className="menu" ref="menu" data={this.state.menuList} - multiple={false} + multiple={this.state.multiple} visible={this.state.menuShow} selectFn={(e) => { this.onselectFn(e); @@ -91,7 +121,7 @@ export default class filterSelect extends React.Component { onClose={() => { this.onMenuHide(); }} - > + >
) : null} ); diff --git a/src/components/filterbar/main.js b/src/components/filterbar/main.js index 61eb1bb6..8ddec9ab 100644 --- a/src/components/filterbar/main.js +++ b/src/components/filterbar/main.js @@ -14,6 +14,7 @@ export default class filterbar extends React.Component { menuList: props.menuList, showItemList: [], menuShow: false, + multiple:props.multiple|false }; this.hideMenu = this.hideMenu.bind(this); this.onselectFn = this.onselectFn.bind(this); @@ -91,6 +92,7 @@ export default class filterbar extends React.Component { selectFn={(e, prop) => { this.onselectFn(e, prop); }} + multiple={this.state.multiple} onClose={(e, id, prop) => { this.onCloseSelect(e, id, prop); }}