Control.js 3.74 KB
Newer Older
陈龙's avatar
陈龙 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
// 文本/下拉/多选/时间
/**
 * @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;