4185 筛选条件选中问题 班级支持多选

HighStateComponent/Filter/index.js

@@ -21,6 +21,7 @@ export default class Filter extends React.Component{
     this.state ={
       inputValue:'',
       formValues: {
+        clazzIds: [],
       },
       options: {
         gradeList:[],
@@ -78,24 +79,36 @@ export default class Filter extends React.Component{
   }
 
   formChange = (key,value) => {
-    const { formValues } = this.state;
-    formValues[key] = value;
-    
+    let { formValues } = this.state;
+    // 判断是否第二次取消
+    if(key === 'clazzIds') {
+      if(formValues[key].indexOf(value) !== -1){
+        formValues[key] = formValues[key].filter(i=> i!==value);
+      }
+      else{
+         formValues[key].push(value);
+      }
+    }
+    else{
+      if(formValues[key] === value) delete formValues[key];
+      else formValues[key]= value;
+    }
+
     if(key === 'gradeId') {
       delete formValues.institutionId;
-      delete formValues.majorId;
-      delete formValues.clazzId;
+      delete formValues.majorId
+      formValues.clazzIds=[];
     }
 
     if(key === 'institutionId') {
       this.fetchMajorList({institutionId:value});
-      delete formValues.majorId;
-      delete formValues.clazzId;
+      delete formValues.majorId
+      formValues.clazzIds = [];
     }
 
     if(key === 'majorId') {
       this.fetchClazzList({institutionId: formValues.institutionId, majorId: value,gradeId: formValues.gradeId});
-      delete formValues.clazzId;
+      formValues.clazzIds = [];
     }
 
     this.setState({
@@ -123,10 +136,20 @@ export default class Filter extends React.Component{
 
   generateItem = (keyName,dataList) => {
     const { formValues } = this.state;
+    // 判断类名
+    const isSelect =(value) => {
+      if(keyName === 'clazzIds') {
+        if(formValues[keyName].indexOf(value) !== -1) return true;
+      }
+      else if(formValues[keyName] === value){
+        return true;
+      }
+      return false;
+    }
     return (
       <div className='optionsBox'>
       {dataList.map(i=> (
-        <div className={formValues[keyName] === i.value ? 'cusLabelFocus' : 'cusLabel'}
+        <div className={isSelect(i.value)? 'cusLabelFocus' : 'cusLabel'}
              key={i.value}
              onTouchStart={() => this.formChange(keyName,i.value)} >{i.key}</div>))
       }
@@ -136,13 +159,16 @@ export default class Filter extends React.Component{
 
   search = () =>{
     const { formValues } = this.state;
-    this.props.getPage(formValues);
+    const clazzIds = formValues.clazzIds.join(',');
+    this.props.getPage({...formValues,clazzIds});
     this.props.Toggle && this.props.Toggle();
   }
   
   reset =() => {
     this.setState({
-      formValues: {}
+      formValues: {
+        clazzIds: [],
+      }
     })
   }
   render(){
@@ -169,8 +195,8 @@ export default class Filter extends React.Component{
           {this.generateItem('institutionId',institutionList)}</>) : null}
           { institutionId ? (<><p style={{color: '#666666'}}>专业选择</p>
           {this.generateItem('majorId',majorList)}</>) : null}
-          { majorId ? <><p style={{color: '#666666'}}>班级选择</p>
-          {this.generateItem('clazzId',clazzList)}</> : null }
+          { majorId? <><p style={{color: '#666666'}}>班级选择</p>
+          {this.generateItem('clazzIds',clazzList)}</> : null }
         </WingBlank>
         </div>
         <div className='buttonBox'>