Filter优化

HighStateComponent/Filter/apiConfig.js

 export default {
+  // 业务处理接口
   APPLYRECORD: '/TrainStationApplyApi/getPage',  // 申请记录
   HANDLEAPPLY:'TrainStationApplyApi/cancelApply', // 完成办理但不开放领取 ids cancelStatusKey=1  完成办理并开放领取cancelStatusKey=2
   HANDLERECORD: '/TrainStationApplyApi/getPage', // 办理记录
   OPENRECEIVE: '/TrainStationApplyApi/openReceive', // 开放领取 ids cancelStatusKey =2
 
-
+  // 查询接口
   GETGRADELIST: '/CommonApi/getGradeList', // 获取年级
   GETINSTITUTION: '/InstitutionApi/queryAllInstitution', // 获取院系
   GETMAJOR:'/MajorApi/queryMajorByInstitutionId', // 获取专业 institutionId
-  GETCLAZZLIST:'/ClazzApi/queryClazzByInstitutionIdAndMajorId' //获取班级 gradeId: majorId: 
+  GETMAJORBYIDS: '/MajorApi/queryMajorByInstitutionIds', // 通过ids 获取专业
+  GETCLAZZLIST:'/ClazzApi/queryClazzByInstitutionIdAndMajorId', //获取班级 gradeId: majorId: 
+  GETCLAZZLISTBYIDS: '/ClazzApi/queryClazzByMajorIds', // 通过ids 获取专业
 }
\ No newline at end of file

HighStateComponent/Filter/index.js

@@ -7,20 +7,20 @@ import PropTypes from 'prop-types';
 
 const queryOptions = async() => {
   const gradeList = await getWebInfo({},api.GETGRADELIST);
-  const institutionList = await getWebInfo({},api.GETINSTITUTION);
   return {
     gradeList,
-    institutionList,
   }
 }
 
-
 export default class Filter extends React.Component{
   constructor(props){
     super(props);
     this.state ={
+      role: 2,
       inputValue:'',
       formValues: {
+        institutionIds: [],
+        majorIds:[],
         clazzIds: [],
       },
       options: {
@@ -34,25 +34,69 @@ export default class Filter extends React.Component{
 
   componentDidMount() {
     this.fetchOptions();
+    this.fetchRoleType();
   }
 
-  // 获取年级和系列表
+  // 获取角色类型信息
+  fetchRoleType = async() => {
+    const res = await getMobileInfo({},'/CommonApi/currentUser');
+    if(res && !res.errCode) {
+      const { options } = this.state;
+      var role = res.type;
+      options.institutionList = res.institutionModelList.map(i=> ({key: i.name,value: i.id}));
+        if(role === 0) {
+          this.setState({
+          role,
+          options
+        })
+      }
+    }
+  }
+
+  // 获取 key value 
   fetchOptions = async() => {
     const res = await queryOptions();
-    if(!res || !res.gradeList || !res.institutionList) return false;
+    if(!res || !res.gradeList) return false;
 
     const gradeList = res.gradeList.map(i=> ({key: i.name,value: i.id}));
-    const institutionList = res.institutionList.map(i=> ({key: i.fullName,value: i.id}));
     this.setState({
       options: {
         gradeList,
-        institutionList,
+        institutionList: [],
         majorList:[],
         clazzList: [],
       }
     })
   }
 
+  // 获取专业
+  fetchMajorList = (params={}) => {
+    const { options } = this.state;
+    getWebInfo(params,api.GETMAJOR).then(res=> {
+      if(res && !res.errCode) {
+        const majorList = res.map(i=> ({key: i.name,value: i.id}));
+        options.majorList = majorList;
+        this.setState({
+          options
+        })
+      }
+    })
+  }
+
+  // 通过系ids获取专业
+  fetchMajorListByIds = (params={}) => {
+    const { options } = this.state;
+    getWebInfo(params,api.GETMAJORBYIDS).then(res=> {
+      if(res && !res.errCode) {
+        const majorList = res.map(i=> ({key: i.name,value: i.id}));
+        options.majorList = majorList;
+        this.setState({
+          options
+        })
+      }
+    })
+  }
+
   // 获取班级列表
   fetchClazzList = (params={}) => {
     const { options } = this.state;
@@ -67,13 +111,13 @@ export default class Filter extends React.Component{
     })
   }
 
-  // 获取专业列表
-  fetchMajorList = (params={}) => {
+   // 通过专业ids获取班级列表
+  fetchClazzListByIds = (params={}) => {
     const { options } = this.state;
-    getWebInfo(params,api.GETMAJOR).then(res=> {
+    getWebInfo(params,api.GETCLAZZLISTBYIDS).then(res=> {
       if(res && !res.errCode) {
-        const majorList = res.map(i=> ({key: i.name,value: i.id}));
-        options.majorList = majorList;
+        const clazzList = res.map(i=> ({key: i.fullName,value: i.id}));
+        options.clazzList = clazzList;
         this.setState({
           options
         })
@@ -81,12 +125,11 @@ export default class Filter extends React.Component{
     })
   }
 
-  // 选择时处理函数
+  // 搜索条件变化处理
   formChange = (key,value) => {
-    let { formValues } = this.state;
-    
+    let { formValues , role } = this.state;
     // 判断是否第二次取消
-    if(key === 'clazzIds') {
+    if(key === 'clazzIds' || key === 'institutionIds' || key === 'majorIds') {
       if(formValues[key].indexOf(value) !== -1){
         formValues[key] = formValues[key].filter(i=> i!==value);
       }
@@ -99,23 +142,19 @@ export default class Filter extends React.Component{
       else formValues[key]= value;
     }
 
-    // 年级变化时
     if(key === 'gradeId') {
-      delete formValues.institutionId;
-      delete formValues.majorId
-      formValues.clazzIds=[];
+      formValues.majorIds = [];
+      formValues.clazzIds= [];
     }
 
-    // 专业变化时
-    if(key === 'institutionId') {
-      this.fetchMajorList({institutionId:value});
-      delete formValues.majorId
+    if(key === 'institutionIds') {
+      this.fetchMajorListByIds({institutionIds:formValues.institutionIds.join(',')});
+      formValues.majorIds = [];
       formValues.clazzIds = [];
     }
 
-    // 专业变化时
-    if(key === 'majorId') {
-      this.fetchClazzList({institutionId: formValues.institutionId, majorId: value,gradeId: formValues.gradeId});
+    if(key === 'majorIds') {
+      this.fetchClazzListByIds({majorIds: formValues.majorIds.join(',')});
       formValues.clazzIds = [];
     }
 
@@ -124,17 +163,17 @@ export default class Filter extends React.Component{
     })
   }
 
-  // 学号/姓名 输入处理
+  // 搜索框输入处理
   inputChange = (e) => {
     const { formValues } = this.state;
     var value = Number(e.target.value);
     if(isNaN(value)){
       formValues.name = e.target.value;
-      if(formValues.studentNo) delete formVlaues.studentNo;
+      if(formValues.studentNo) delete formValues.studentNo;
     }
     else{
       formValues.studentNo = value;
-      if(formValues.name) delete formVlaues.name;
+      if(formValues.name) delete formValues.name;
     }
 
     this.setState({
@@ -143,13 +182,12 @@ export default class Filter extends React.Component{
     })
   }
 
-  // 选择列表状态生成
+  // 搜索条件DOM生成
   generateItem = (keyName,dataList) => {
     const { formValues } = this.state;
-
-    // 判断是否选中
+    // 判断类名
     const isSelect =(value) => {
-      if(keyName === 'clazzIds') {
+      if(keyName === 'institutionIds' || keyName === 'majorIds' || keyName === 'clazzIds') {
         if(formValues[keyName].indexOf(value) !== -1) return true;
       }
       else if(formValues[keyName] === value){
@@ -162,7 +200,7 @@ export default class Filter extends React.Component{
       {dataList.map(i=> (
         <div className={isSelect(i.value)? 'cusLabelFocus' : 'cusLabel'}
              key={i.value}
-             onTouchStart={() => this.formChange(keyName,i.value)} >{i.key}</div>))
+             onClick={() => this.formChange(keyName,i.value)} >{i.key}</div>))
       }
       </div>
     )
@@ -171,8 +209,32 @@ export default class Filter extends React.Component{
   // 搜索处理
   search = () =>{
     const { formValues } = this.state;
-    const clazzIds = formValues.clazzIds.join(',');
-    this.props.getPage({...formValues,clazzIds});
+    const temp = {...formValues};
+    // 判断系是否为空
+    if(formValues.institutionIds.length !== 0){
+      temp.institutionIds = formValues.institutionIds.join(',');
+    }
+    else {
+      delete temp.institutionIds;
+    }
+
+    // 判断专业是否为空
+    if(formValues.majorIds.length !== 0){
+      temp.majorIds = formValues.majorIds.join(',');
+    }
+    else {
+      delete temp.majorIds;
+    }
+
+    // 判断班级是否为空
+    if(formValues.clazzIds.length !== 0){
+      temp.clazzIds = formValues.clazzIds.join(',');
+    }
+    else {
+      delete temp.clazzIds;
+    }
+
+    this.props.getPage({...temp});
     this.props.Toggle && this.props.Toggle();
   }
 
@@ -180,14 +242,36 @@ export default class Filter extends React.Component{
   reset =() => {
     this.setState({
       formValues: {
+        institutionIds: [],
+        majorIds:[],
         clazzIds: [],
       }
     })
   }
 
-  render(){
+  // 生成选择
+  createSelect = () => {
     const { gradeList, institutionList, majorList, clazzList } = this.state.options;
-    const { gradeId, institutionId , majorId } = this.state.formValues;
+    const { gradeId, institutionIds , majorIds } = this.state.formValues;
+    const { role } = this.state;
+    if(role === 0){
+       return (
+        <>
+          <p style={{color: '#666666'}}>年级选择</p>
+          {this.generateItem('gradeId',gradeList)}
+          { gradeId ? (<><p style={{color: '#666666'}}>学院选择</p>
+          {this.generateItem('institutionIds',institutionList)}</>) : null}
+          { institutionIds.length ? (<><p style={{color: '#666666'}}>专业选择</p>
+          {this.generateItem('majorIds',majorList)}</>) : null}
+          { majorIds.length ? <><p style={{color: '#666666'}}>班级选择</p>
+          {this.generateItem('clazzIds',clazzList)}</> : null }
+        </>
+      )
+    }
+    return null;
+  }
+
+  render(){
     return (
       <div className='siderBar'>
         <div className='searchBox'>
@@ -203,19 +287,12 @@ export default class Filter extends React.Component{
         <div className='mainContent'>
         <WhiteSpace size='lg'/>
         <WingBlank size='lg'>
-          <p style={{color: '#666666'}}>年级选择</p>
-          {this.generateItem('gradeId',gradeList)}
-          { gradeId ? (<><p style={{color: '#666666'}}>学院选择</p>
-          {this.generateItem('institutionId',institutionList)}</>) : null}
-          { institutionId ? (<><p style={{color: '#666666'}}>专业选择</p>
-          {this.generateItem('majorId',majorList)}</>) : null}
-          { majorId? <><p style={{color: '#666666'}}>班级选择</p>
-          {this.generateItem('clazzIds',clazzList)}</> : null }
+          {this.createSelect()}
         </WingBlank>
         </div>
         <div className='buttonBox'>
-            <div onTouchStart={this.reset}>重置</div>
-            <div onTouchStart={this.search}>确定</div>
+            <div onClick={this.reset}>重置</div>
+            <div onClick={this.search}>确定</div>
         </div>
       </div>
     )