数据联动之连环搜索

有的时候你难免会遇到一些正常需求写完之后，产品发现效果不如自己所想，然后又临时改需求这种事情，遇到之后要淡定，不能动不动就有揍趴一个产品经理的想法，毕竟是和谐社会，对吧。
......最主要的是我作为一个女程序员，遇到男的产品经理，三思之后发现我也打不过啊......所以忍了。
改就改，谁怕谁。

搜索功能图片.png

搜索功能大概是这个样子，原本的搜索功能是各自独立的，每个搜索之间没有联系，各归各。
修改之后，要求下拉框的搜索数据基于第一个搜索出来的数据，日期的搜索基于前两个的搜索数据。所以就只能改改改了。
改过之后的代码直接来一波吧，等下如果有时间，就再把单独搜索的代码也粘一下，方便不需要关联搜索的小童鞋们使用。
声明一下哈：我用的框架是React，UI组件库是蚂蚁金服的antd，有不明白的童鞋也可以留言哦，共同进步。
别看代码很多，其实只分三块，第一块是请求的全部数据的接口，第二块是搜索事件的逻辑，第三块是搜索的结构，就是渲染在页面上的东东。不要一看代码很长就没有耐心哦。

class NewEos extends Component{
// 全部数据的接口
  getEosList(condition){
    let params = {
      "searchContent":"",       //--搜索框，可传订单ID，UID,手机号
      "status":"",              //--订单状态 error,success两种状态
      "stime":"",     //--下单开始日期
      "etime":"",     //--下单结束日期
      "sortOrder":"",    //--ascend升序 descend降序
      "sortField":""       //--按下单时间ctime排序
    }
    // 判断有没有传参，如果有就用传进来的覆盖原有的params
    if(condition){
      params = Object.assign({},params,condition)
    }
    // 请求接口数据
    axios.post('/mgt/eos/open/list',params,{
      headers:{
        authtoken: window.localStorage.getItem('authtoken')
      }
    }).then((response)=>{
      //  判断如果请求成功就走下面的代码
      if (response.data.code==0) {
        this.setState({
          eosList: response.data.data.list,
          // 全部数据，用于页码
          updateListMaxSize: response.data.data.totalSize
        })
      }
    })
  }

  //搜索框点击事件
  handleSeek = (value) => {
    // 传过来的是什么值就走哪个params
    // 第一个是搜索框的value值，第二个是下拉框，第三个是日期搜索框的值，如果还有，就以此类推
    let params = value || {} || {stime, etime}
    // 请求全部数据接口
    axios.post('/mgt/eos/open/list',params,{
      headers: {
        authtoken: window.localStorage.getItem('authtoken')
      }
    }).then((response)=>{
      // 点击搜索成功之后执行下拉框搜索事件
      this.getOrderStatus(response.data.data.list)
      // 赋值一个空字符串
      let searchMian = '';
      // 判断当前搜索框是否有内容
      //searchContent是全部数据接口中的上行参数字段可传订单id,uid,手机号
      if(params.searchContent){
        //如果有就为当前的搜索内容重新赋值
        searchMian = params.searchContent
      }
      this.setState({
        // 所有数据列表
        eosList: response.data.data.list,
        // 最新的搜索内容
        searchMian,
        // 最大数据量，用于页码数据
        updateListMaxSize: response.data.data.totalSize
      })
    })
  }
  render(){
    return(
      <div>
        // 这是第一个带放大镜的搜索框
        <Search
            style={{ width: '300', marginLeft:'20' }}
            placeholder="请输入订单/UID/手机号"
            // 搜索事件  将当前输入的value值赋值给要传回去的参数
            onSearch={value=>this.handleSeek({'searchContent':value})}
            enterButton
        />
        // 我是下拉搜索框
        <Select
             showSearch
             style={{ width: 160, }}
             // 选择框默认文字
             placeholder="全部"
             // 选项变化时触发事件
             onChange={value=>this.handleSeek({'searchContent':this.state.searchMian,'status':value})}
        >
         // 我是一个洋气的循环，用来将后端设置好的下拉框数据显示出来。看不明白的可以去翻我另一篇关于动态渲染的文章，就是写这个洋气循环的
         <Option value="">全部</Option>
             {
                this.state.SelectArr.map(item=>{
                    return <Option value={item.value}>{item.title}</Option>
                })
             }
        </Select>
       // 我是日期选择框哦
        <RangePicker onChange={(stime, etime) => {
              this.getEosList({
                  stime:etime[0],
                  etime:etime[1]
                })
         }} />
      </div>
    )
  }
}