feat: 搜索组件: 基础信息字典获取
Lei OT
2 years ago
parent
44647bee3b
commit
76a3c3c94d
@ -0,0 +1,133 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Select } from 'antd';
|
||||||
|
import querystring from 'querystring';
|
||||||
|
// import * as oMapper from 'object-mapper';
|
||||||
|
import { fetchJSON } from './../../utils/request';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { objectMapper } from './../../utils/commons';
|
||||||
|
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
let timeout;
|
||||||
|
let currentValue;
|
||||||
|
|
||||||
|
function curl(opts, callback) {
|
||||||
|
if (timeout) {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = null;
|
||||||
|
}
|
||||||
|
currentValue = opts.value;
|
||||||
|
|
||||||
|
function fake() {
|
||||||
|
// console.log(currentValue, opts.value);
|
||||||
|
if (currentValue === opts.value && opts.value === '空') {
|
||||||
|
const _p = [{ 'key': '0', 'label': '空' }];
|
||||||
|
return callback(_p);
|
||||||
|
}
|
||||||
|
const param = {
|
||||||
|
code: 'utf-8',
|
||||||
|
q: opts.value,
|
||||||
|
};
|
||||||
|
// const str = new URLSearchParams({
|
||||||
|
// code: 'utf-8',
|
||||||
|
// q: opts.value,
|
||||||
|
// }).toString();
|
||||||
|
|
||||||
|
fetchJSON(`${opts.url}`, param)
|
||||||
|
.then(d => {
|
||||||
|
if (currentValue === opts.value) {
|
||||||
|
const result = objectMapper(d.result, opts.map) || [];
|
||||||
|
callback(result);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
timeout = setTimeout(fake, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 异步请求的下拉菜单, 可搜索
|
||||||
|
* @property {array} defaultOptions 默认选项 [{key: '', label: '' }]
|
||||||
|
* @property {string} url
|
||||||
|
* @property {object} map 异步结果的字段转换定义
|
||||||
|
* @property {boolean} autoGet 首次默认请求
|
||||||
|
* @property {string} resultkey 结果的根字段
|
||||||
|
*/
|
||||||
|
class SearchInput extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
data: this.props.defaultOptions || [],
|
||||||
|
value: undefined,
|
||||||
|
autoData: this.props.defaultOptions || [],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
if (this.props.autoGet === true) {
|
||||||
|
const { map, resultkey } = this.props;
|
||||||
|
const mapKey = Object.keys(map).reduce((r, v) => ({ ...r, [v]: { key: map[v] } }), {});
|
||||||
|
curl({ value: '', url: this.props.url || '', map: mapKey, resultkey }, (data) =>
|
||||||
|
this.setState({ data, autoData: data }, () => (typeof this.props.onSearchAfter === 'function' ? this.props.onSearchAfter(data, this.state.value) : ''))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
if (this.props.value !== prevProps.value) {
|
||||||
|
this.setState({ value: undefined });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClear = () => {
|
||||||
|
this.setState({ data: this.state.autoData });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSearch = value => {
|
||||||
|
if ( ! this.props.url && this.props.defaultOptions?.length) {
|
||||||
|
const f = this.props.defaultOptions.filter(r => String(r.label).indexOf(value) !== -1);
|
||||||
|
this.setState({ data: f || [] });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const { map, resultkey } = this.props;
|
||||||
|
const mapKey = Object.keys(map).reduce((r, v) => ({ ...r, [v]: { key: map[v] } }), {});
|
||||||
|
if (value) {
|
||||||
|
curl({ value, url: this.props.url || '', map: mapKey, resultkey }, (data) =>
|
||||||
|
this.setState({ data }, () => (typeof this.props.onSearchAfter === 'function' ? this.props.onSearchAfter(data, this.state.value) : ''))
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
this.setState({ data: this.state.autoData || [] });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChange = (value, option) => {
|
||||||
|
this.setState({ value }, () => this.props.onChange(value, option));
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const options = this.state.data.map(d => <Option key={d.key} extradata={d.options}>{d.label}</Option>);
|
||||||
|
const { onSearchAfter, defaultOptions, autoGet, ...props } = this.props;
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
{...props}
|
||||||
|
style={this.props.style || { width: '100%' }}
|
||||||
|
showSearch
|
||||||
|
labelInValue
|
||||||
|
value={this.state.value || this.props.value}
|
||||||
|
placeholder={this.props.placeholder}
|
||||||
|
defaultActiveFirstOption={false}
|
||||||
|
showArrow={false}
|
||||||
|
filterOption={false}
|
||||||
|
onSearch={this.handleSearch}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
notFoundContent={null}
|
||||||
|
allowClear={true}
|
||||||
|
onClear={this.handleClear}
|
||||||
|
>
|
||||||
|
{options}
|
||||||
|
</Select>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default observer(SearchInput);
|
||||||
Loading…
Reference in New Issue