feat:优化下拉选择过滤查询

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;

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()}
           >
             <span className="filter-label">{this.state.label}</span>
             <span className="filter-maohao">:</span>
@@ -76,6 +105,7 @@ export default class filterSelect extends React.Component {
         </div>
 
         {this.state.menuShow ? (
+          <div  onMouseLeave={()=>this.mouseLeaveFn()}>
           <Menu
             onItemClick={(e, id) => {
               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();
             }}
-          ></Menu>
+          ></Menu></div>
         ) : null}
       </div>
     );

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);
               }}