//用到此方法的情景 先根据input框中的姓名模糊搜索出客户名称，当选中客户名称之后，获取ID ，根据客户的ID，去搜索数据列表。
防抖方法
let timeout;
let currentValue
function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
//进行数据请求
function fake() {
const param={};
param.url = apiUrl.selectKgoMerchantList;
param.data={
merchantName:value
}
param.callback=(data)=>{
console.log(data)
//回调方法
callback(data.data)
}
getJsonp(param)
}
timeout = setTimeout(fake, 600);
}
//方法
handleChange = (value) => {
console.log(value)
this.setState({ value });
}
//当input框中的值变化是，调用此方法 进行数据请求，
handleSearch = (value) => {
//list是存放请求的数据
fetch(value, data => this.setState({ list:data }));
}
select=(e,option)=>{
//e是当前的option中的value option可以打印看一下，里边有许多数据 ，我需要的是children
const param ={};
param.data={
ownerPartyId:e,
ownerRealName:option.props.children
}
console.log(param.data)
param.url = apiUrl.selectLongBillListByMerchant;
param.callback=(data)=>{
console.log(data)
if (data.result !== 'success') {
alertMsg(data.msg || '服务器异常');// 异常提示
this.setState({ loading: false });// 关闭请求状态
} else {
// 分页处理
const pagination = this.state.pagination;
pagination.total = data.count / 1;
this.setState({ loading: false, data: data.data || [], pagination,merchantName:''});
console.log(this.state)
}
}
console.log(param)
getJsonp(param)
}
//list是输入名字之后请求到的数据，遍历数据。形成select列表。
const options = this.state.list.map((d,index) => <Option key={index} value={d.partyId}>{d.merchantName}</Option>);
return (
<div>
<Form.Item label="关联客户：" colon={false} >
{getFieldDecorator('partyId', {
})(
//选择列表 里边的方法可以自己在antd中查看
<Select
style={{200}}
showSearch
value={this.state.value}
// placeholder={this.props.placeholder}
// style={this.props.style}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={this.handleSearch} // 文本框值变化时回调
onChange={this.handleChange} //value 值变化是调用
notFoundContent={null}
onSelect = {this.select.bind(this)}//选中时进行数据请求
allowClear = {true}
>
{options}
</Select>
)}
</Form.Item>