// 文本/下拉/多选/时间 /** * @description: * @params: * onChange: 需要传入onChange,接收值的变更 */ import React, { useEffect, useState } from 'react'; import { Input, Select } from 'antd'; import { reportService } from '../../api'; import { returnDefaultValueOrConfigs } from '../utils/utils'; const { Option } = Select; const { Search } = Input; const TextSearchComponent = ({ onChange, style, onSearch, placeholder }) => { return ( <Search title={placeholder} style={style} placeholder={placeholder} onChange={onChange} onSearch={onSearch} /> ); }; /** * Data = ['选项1','选项2'...] * * @props: * 正常选项:武汉 * 附带统计数值: 武汉 (20) */ const SelectSearchComponent = ({ onChange, style, data, mode, reportName, fieldAlias, configItems, filterFields, filterValues, filterObject, }) => { const [value, setValue] = useState(''); const [options, setOptions] = useState([]); const defaultConfigs = returnDefaultValueOrConfigs(configItems, ['defaultValue']); const { defaultValue } = defaultConfigs; const getData = () => { reportService .getReportFilterValues({ fieldAlias, ...filterObject, }) .then((res) => { if (res.code === 0) { let _options = res.data .find((item) => item.fieldAlias === fieldAlias) .filterValues.filter((item) => item.filterValue); if (filterValues && filterFields) { let _filterFields = filterFields.split('|'); let _filterValues = filterValues.split('|'); let _index = _filterFields.findIndex((item) => item === fieldAlias); if (_index > -1) { let _needToFilterValues = _filterValues[_index]?.split(',') || []; _options = _options.filter((item) => _needToFilterValues.includes(item.filterValue)); } } setOptions(_options); } }) .catch((err) => { console.log(err); }); }; useEffect(() => { getData(); setValue(defaultValue); }, []); return ( <Select value={value} style={style} onChange={(e) => { onChange(e); setValue(e); }} mode={mode} defaultValue={mode === 'multiple' && defaultValue ? defaultValue.split(',') : defaultValue} allowClear maxTagCount={1} placeholder={`请选择${fieldAlias}`} > {options && options.length ? options.map((item) => ( <Option key={item.filterValue} value={item.filterValue}> {item.filterValue} <span style={{ color: 'rgba(0,0,0,.65)' }}>({item.count})</span> </Option> )) : ''} </Select> ); }; const ReturnControlComponent = ({ type, onChange, style, data, onSearch, reportName, fieldAlias, placeholder, configItems, filterValues, filterFields, filterObject, }) => { let _component = ''; switch (type) { case '文本': _component = ( <TextSearchComponent style={style} onChange={onChange} onSearch={onSearch} placeholder={placeholder} configItems={configItems} /> ); break; case '下拉': case '多选': _component = ( <SelectSearchComponent mode={type === '多选' ? 'multiple' : ''} style={style} onChange={onChange} reportName={reportName} fieldAlias={fieldAlias} configItems={configItems} filterFields={filterFields} filterValues={filterValues} filterObject={filterObject} /> ); break; default: break; } return _component; }; export default ReturnControlComponent;