‘学号/姓名搜索修改

HighStateComponent/Filter/index.js

@@ -12,16 +12,15 @@ const queryOptions = async() => {
     gradeList,
     institutionList,
   }
-};
+}
 
 
 export default class Filter extends React.Component{
-  stattic 
   constructor(props){
     super(props);
     this.state ={
+      inputValue:'',
       formValues: {
-        gradeId: "",
       },
       options: {
         gradeList:[],
@@ -40,12 +39,9 @@ export default class Filter extends React.Component{
     const res = await queryOptions();
     if(!res || !res.gradeList || !res.institutionList) return false;
 
-    const gradeList = res.gradeList.map(i=> ({key: i.remark,value: i.id}));
+    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({
-      formValues:{
-        gradeId: gradeList[0].value
-      },
       options: {
         gradeList,
         institutionList,
@@ -85,15 +81,21 @@ export default class Filter extends React.Component{
     const { formValues } = this.state;
     formValues[key] = value;
     
+    if(key === 'gradeId') {
+      delete formValues.institutionId;
+      delete formValues.majorId;
+      delete formValues.clazzId;
+    }
+
     if(key === 'institutionId') {
       this.fetchMajorList({institutionId:value});
-      delete formValues.majorId
-      delete formValues.clazzId
+      delete formValues.majorId;
+      delete formValues.clazzId;
     }
 
     if(key === 'majorId') {
       this.fetchClazzList({institutionId: formValues.institutionId, majorId: value,gradeId: formValues.gradeId});
-      delete formValues.clazzId
+      delete formValues.clazzId;
     }
 
     this.setState({
@@ -103,8 +105,7 @@ export default class Filter extends React.Component{
 
   inputChange = (e) => {
     const { formValues } = this.state;
-    var value = Number(e.targetValue);
-
+    var value = Number(e.target.value);
     if(isNaN(value)){
       formValues.name = e.target.value;
       if(formValues.studentNo) delete formVlaues.studentNo;
@@ -115,7 +116,8 @@ export default class Filter extends React.Component{
     }
 
     this.setState({
-      formValues
+      formValues,
+      inputValue: e.target.value,
     })
   }
 
@@ -135,37 +137,36 @@ export default class Filter extends React.Component{
   search = () =>{
     const { formValues } = this.state;
     this.props.getPage(formValues);
-    this.props.Toggle() && this.props.Toggle();
+    this.props.Toggle && this.props.Toggle();
   }
   
   reset =() => {
     this.setState({
-      formValues: {gradeId: this.state.options.gradeList[0].value}
+      formValues: {}
     })
   }
   render(){
     const { gradeList, institutionList, majorList, clazzList } = this.state.options;
-    const { institutionId , majorId } = this.state.formValues;
-    const { style } = this.props;
+    const { gradeId, institutionId , majorId } = this.state.formValues;
     return (
-      <div className='siderBar' style={style ? style : null}>
+      <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> 
+                 onChange={this.inputChange} />
         
           <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>
+          <p style={{color: '#666666'}}>年级选择</p>
           {this.generateItem('gradeId',gradeList)}
-          <p style={{color: '#666666'}}>学院选择</p>
-          {this.generateItem('institutionId',institutionList)}
+          { 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>
@@ -184,7 +185,6 @@ export default class Filter extends React.Component{
 Filter.propTypes = {
   getPage: PropTypes.func.isRequired, // 页面刷新方法
   toggle: PropTypes.func, // 收回侧边方法
-  style: PropTypes.object, // 外框样式
 }
 Filter.defaultProps = {
   getPage: () => {}