添加学生搜索查找组件Filter

baseComponents/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: 
+}
\ No newline at end of file

baseComponents/Filter/index.js

+import React from 'react';
+import { Icon, WingBlank, WhiteSpace, } from 'antd-mobile';
+import api from './apiConfig';
+import { getWebInfo, getMobileInfo } from './utils';
+import style from './index.less';
+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{
+  stattic 
+  constructor(props){
+    super(props);
+    this.state ={
+      formValues: {
+        gradeId: "",
+      },
+      options: {
+        gradeList:[],
+        institutionList: [],
+        majorList:[],
+        clazzList: [],
+      },
+    }
+  }
+
+  componentDidMount() {
+    this.fetchOptions();
+  }
+
+  fetchOptions = async() => {
+    const res = await queryOptions();
+    console.log(res);
+    if(!res || !res.gradeList || !res.institutionList) return false;
+
+    const gradeList = res.gradeList.map(i=> ({key: i.remark,value: i.id}));
+    const institutionList = res.institutionList.map(i=> ({key: i.fullName,value: i.id}));
+    this.setState({
+      formValues:{
+        gradeId: gradeList[0].value
+      },
+      options: {
+        gradeList,
+        institutionList,
+        majorList:[],
+        clazzList: [],
+      }
+    })
+  }
+
+  fetchClazzList = (params={}) => {
+    const { options } = this.state;
+    getWebInfo(params,api.GETCLAZZLIST).then(res=> {
+      if(res && !res.errCode) {
+        const clazzList = res.map(i=> ({key: i.fullName,value: i.id}));
+        options.clazzList = clazzList;
+        this.setState({
+          options
+        })
+      }
+    })
+  }
+
+  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
+        })
+      }
+    })
+  }
+
+  formChange = (key,value) => {
+    const { formValues } = this.state;
+    formValues[key] = value;
+
+    if(key === 'institutionId') {
+      this.fetchMajorList({institutionId:value});
+      delete formValues.majorId
+      delete formValues.clazzId
+    }
+
+    if(key === 'majorId') {
+      this.fetchClazzList({institutionId: formValues.institutionId, majorId: value,gradeId: formValues.gradeId});
+      delete formValues.clazzId
+    }
+
+    this.setState({
+      formValues
+    })
+  }
+
+  inputChange = (e) => {
+    const { formValues } = this.state;
+    var value = Number(e.targetValue);
+
+    if(isNaN(value)){
+      formValues.name = e.target.value;
+      if(formValues.studentNo) delete formVlaues.studentNo;
+    }
+    else{
+      formValues.studentNo = value;
+      if(formValues.name) delete formVlaues.name;
+    }
+
+    this.setState({
+      formValues
+    })
+  }
+
+  generateItem = (keyName,dataList) => {
+    const { formValues } = this.state;
+    return (
+      <div className='optionsBox'>
+      {dataList.map(i=> (
+        <div className={formValues[keyName] === i.value ? 'cusLabelFocus' : 'cusLabel'}
+             key={i.value}
+             onTouchStart={() => this.formChange(keyName,i.value)} >{i.key}</div>))
+      }
+      </div>
+    )
+  }
+
+  search = () =>{
+    const { formValues } = this.state;
+    this.props.getPage(formValues);
+    this.props.Toggle() && this.props.Toggle();
+  }
+  
+  reset =() => {
+    this.setState({
+      formValues: {gradeId: this.state.options.gradeList[0].value}
+    })
+  }
+  render(){
+    const { gradeList, institutionList, majorList, clazzList } = this.state.options;
+    const { institutionId , majorId } = this.state.formValues;
+    return (
+      <div className='siderBar'>
+        <div className='searchBox'>
+          <input type='text' 
+                 ref={node => this.input = node} 
+                 id='searchInput' 
+                 placeholder='请输入姓名/学号' 
+                 value={this.state.inputValue} 
+                 onChange={this.inputChange}></input> 
+        
+          <div id="searchButton" onClick={this.search}><Icon type='search' size='sm'/></div>
+        </div>
+        <div className='mainContent'>
+        <WhiteSpace size='lg'/>
+        <WingBlank size='lg'>
+          <p style={{color: '#666666'}}>年纪选择</p>
+          {this.generateItem('gradeId',gradeList)}
+          <p style={{color: '#666666'}}>学院选择</p>
+          {this.generateItem('institutionId',institutionList)}
+          { institutionId ? (<><p style={{color: '#666666'}}>专业选择</p>
+          {this.generateItem('majorId',majorList)}</>) : null}
+          { majorId ? <><p style={{color: '#666666'}}>班级选择</p>
+          {this.generateItem('clazzId',clazzList)}</> : null }
+        </WingBlank>
+        </div>
+        <div className='buttonBox'>
+            <div onTouchStart={this.reset}>重置</div>
+            <div onTouchStart={this.search}>确定</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Filter.propTypes = {
+  getPage: PropTypes.func.isRequired, // 页面刷新方法
+  toggle: PropTypes.func, // 收回侧边方法
+}
+Filter.defaultProps = {
+  getPage: () => {}
+}
\ No newline at end of file

baseComponents/Filter/index.less

+:global {
+  .siderBar {
+    width: 296px;
+    background: #fff;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-x: auto;
+    // 学号/姓名搜索
+    .searchBox {
+      line-height: 24px;
+      width: 222px;
+      margin:auto;
+      padding-top: 16px;
+      #searchInput {
+        padding-left: 15px;
+        width: 188px;
+        height: 24px;
+        background: #E9E9E9;
+        display: inline-block;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+        vertical-align: middle;
+      }
+      #searchButton{
+        background: #FB9D19;
+        display: inline-block; 
+        padding-top: 1.5px;
+        text-align: center;
+        color: #fff;
+        height: 24px;
+        width: 34px;
+        border-top-right-radius: 12px;
+        border-bottom-right-radius: 12px;
+        vertical-align: middle;
+      }
+    }
+    // 班级选择
+    .mainContent {
+      flex: 1;
+      overflow-x: auto;
+      .optionsBox{
+        display: flex;
+        padding: 10px 5px;
+        flex-wrap: wrap;
+        width: 100%;
+          .cusLabel {
+          min-width: 66px;
+          padding: 0 3px;
+          height: 26px;
+          border: 1px solid #CCCCCC;
+          display: inline-block;
+          line-height: 26px;
+          text-align: center;
+          margin: 5px;
+          color: #ccc;
+        }
+        .cusLabelFocus {
+          min-width: 66px;
+          padding: 0 3px;
+          height: 26px;
+          border: 1px solid #FB9D19;
+          display: inline-block;
+          line-height: 26px;
+          text-align: center;
+          color: #FB9D19;
+          margin: 5px;
+        }
+      }
+    }
+    // 查询按钮
+    .buttonBox{
+      width: 100%;
+      height: 70px;
+      display: flex;
+      justify-content: space-around;
+      padding: 20px 0;
+      div{
+        width: 100px;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        border: 1px solid #FB9D19;
+        border-radius: 15px;
+      }
+      div:nth-child(1) {
+        color: #FB9D19;
+      }
+      div:nth-child(2) {
+        color: #fff;
+        background: #FB9D19;
+      }
+    }
+  }
+}
\ No newline at end of file

baseComponents/Filter/utils.js

+import request from '@/H5Public/utils/request';
+import config from '@/config/config';
+
+export function getMobileInfo(params = {}, url) {
+  return request(config.yxMobileServer + url, {
+    method: 'POST',
+    body: params,
+  });
+}
+
+export function getWebInfo(params = {}, url) {
+  return request(config.zydWebServer + url, {
+    method: 'POST',
+    body: params,
+  });
+}
\ No newline at end of file