#### FIlter API文档接口

#### 一  基础API说明

1. ##### Props上配置的属性列表清单

   |     参数      |                     支持类型                     |                      备注                       |
   | :-----------: | :----------------------------------------------: | :---------------------------------------------: |
   | formProps |                     详情见2                      |                                                 |
   | config  |                     详情见3                      |                                                 |
   |    render     |      (values?: ReturnValues) => ReactNode       |          values是搜索时返回的对象集合           |
   |    request    |         (params: RequestParams) => void         |          params是搜索时返回的对象集合           |
   |   onChange    | (apiParam: string, value: ReturnValues) => void | apiParam属性名<br />value搜索对应组件时change值 |
   |     tabs      |                     详情见4                      |                                                 |
   |   onSumbit    |         (values?: ReturnValues) => void         |          values是搜索时返回的对象集合           |
   |    onReset    |                    () => void                    |                                                 |

   

2. ##### Props.formProps 配置属性清单

   |   参数    |  支持类型   | 备注 |
   | :-------: | :---------: | :--: |
   | className |   String    |      |
   |   size    | 枚举清单5.1 |      |

   

3. ##### Props.config 是数组，列表说明是数组中的每一项

   |       参数        |                           支持类型                           |                 备注                 |
   | :---------------: | :----------------------------------------------------------: | :----------------------------------: |
   |       type        |                         枚举清单5.2                          | 传入的组件自动从枚举值映射到对应组件 |
   |     apiParam      |                            string                            |        每一项的属性名必须唯一        |
   |       title       | string \| null \|((callback?: ((arg0?: string, arg1?: (number\|string)) => void)) => ReactNode) |                                      |
   | originalProps |                对应的组件接受antd所有配置属性                |                                      |
   |      options      |                         接口清单6.1                          |                                      |
   |      render       | (item?: ConfigItem, index?: number, cb?: ((arg0?: string, arg1?: (number｜string)) => void)) => ReactNode |                                      |

   

4. ##### Props.tabs 配置属性清单

   |    参数     |    支持类型     |              备注               |
   | :---------: | :-------------: | :-----------------------------: |
   |  apiParam   |     string      |                                 |
   | isAnimation |     boolean     | hover时是否开启动画，默认不开启 |
   | activeIndex |     number      |        第几个激活，默认0        |
   |   options   |   接口清单6.1   |                                 |
   |   render    | () => ReactNode |                                 |
   |  className  |     string      |                                 |
   |    style    |  CSSProperties  |                                 |

   

5. ##### 枚举清单

   1. ###### FILTERSIZE 尺寸大小

      ```typescript
      export enum FILTERSIZE {
        small = "small",
        middle = "middle",
        large = "large"
      }
      ```

   2. 内置组件枚举列表, 配置列表必须从中选择

      ```typescript
      export enum YFilterComponent {
        Range = "Range",
        RangeNumber = "RangeNumber",
        Input = "Input",
        Select = "Select",
        Checkbox = "Checkbox",
        DatePicker = "DatePicker",
        DatePickerRangePicker = "DatePickerRangePicker",
        InputNumber = "InputNumber",
        Radio = "Radio",
        TimePicker = "TimePicker",
        TimePickerRangePicker = "TimePickerRangePicker",
        DatePickerLine = "DatePickerLine",
        TimePickerLine = "TimePickerLine",
      }
      ```

   2. ###### 时间格式 

      ```typescript
      export enum YDateFormat {
        Y = "YYYY",
        Y_M = "YYYY-MM",
        Y_M_D = "YYYY-MM-DD",
        Y_M_D_H = "YYYY-MM-DD HH",
        Y_M_D_H_M = "YYYY-MM-DD HH:mm",
        Y_M_D_H_M_S = "YYYY-MM-DD HH:mm:ss",
      
        H = "HH", // 时间格式
        H_M = "HH:mm",
        H_M_S = "HH:mm:ss"
      }
      ```

   6. ##### 接口清单

      1. ###### Options 支持的类型

         ```typescript
         export interface OptionsItem {
           value: string | number | undefined,
           label: string,
           disabled?: boolean
         }
         ```

         

#### 二  Props.config详细使用举例

1. ##### Input

   ```typescript
   {
       type: YFilterComponent.Input,
       apiParam: "title1",
       title: "Note1",
       originalProps: {  // 里面可以传入 antd 支持 Input 常用的属性
       		placeholder: "请输入字符",
       }
   }
   ```

2. ##### InputNumber

   ```typescript
   {
      	type: YFilterComponent.InputNumber,
       title: "数字",
       apiParam: "title3",
       originalProps: {
          placeholder: "请输入",
          max: 23,
          min: 8,
          value: 12
       }
   }
   ```

3. ##### DatePicker

   ```typescript
   {
       type: YFilterComponent.DatePicker,
       apiParam: "date1",
       title: "日期1",
       originalProps: {
       		placeholder: "请输入",
       		format: YDateFormat.Y_M_D_H,	// 格式必须从 YDateFormat选择，默认是antd支持的格式
       		value: "2020-02-24 12:43"
       }
   }
   ```

4. ##### DatePickerRangePicker

   ```typescript
   {
     	type: YFilterComponent.DatePickerRangePicker,
       apiParam: "date2",
       title: "日期2",
       originalProps: {
           placeholder: ["开始时间", "结束时间"], // 必须是 [string, string] 元祖
           // picker: "week",
           format: YDateFormat.Y_M_D_H, // 格式必须从 YDateFormat选择，默认是antd支持的格式
           value: ["2020-02-24 12:43", "2020-05-24 12:43"] // 必须是 [string, string] 元祖
      }
   }
   ```

5. ##### DatePickerLine

   ```typescript
   {
   		type: YFilterComponent.DatePickerRangePicker,
       apiParam: "date2",
       title: "日期2",
       originalProps: {
       		placeholder: ["开始时间", "结束时间"], // 必须是 [string, string] 元祖
           // picker: "week",
           format: YDateFormat.Y_M_D_H,
           value: ["2020-02-24 12:43", "2020-05-24 12:43"]
       }
   }
   ```

6. ##### TimePicker

   ```typescript
   {
     	type: YFilterComponent.TimePicker,
       apiParam: "time1",
       title: "时间1",
       originalProps: {
            value: "12:43",  // 如果填默认值时，必须配置 format， antd要求
            placeholder: "选择",
            format: YDateFormat.H_M
      }
   }
   ```

7. ##### TimePickerRangePicker

   ```typescript
   {
     	type: YFilterComponent.TimePickerRangePicker,
       apiParam: "time2",
       title: "时间2",
       originalProps: {
            value: ["12:43", "14:43"],  // 如果填默认值时，必须配置 format， antd要求
            placeholder: ["开始时间", "结束时间"],
            format: YDateFormat.H_M
      }
   }
   ```

8. ##### TimePickerLine

   ```typescript
   {
     	type: YFilterComponent.TimePickerRangePicker,
       apiParam: "time2",
       title: "时间2",
       originalProps: {
            value: ["12:43", "14:43"],  // 如果填默认值时，必须配置 format， antd要求
            placeholder: ["开始时间", "结束时间"],
            format: YDateFormat.H_M
      }
   }
   ```

9. ##### Select

   ```typescript
   {
     type: YFilterComponent.Select,
       title: "选择",
       apiParam: "title4",
       options: [
           {
               value: "",
               label: "全部测试",
               disabled: false
           },
           {
               value: 0,
               label: "测试01",
               disabled: false
           },
           {
               value: 1,
               label: "测试02",
               disabled: true
           },
           {
               value: 2,
               label: "测试03",
               disabled: false
           }
       ],
       originalProps: {
           value: 2,	// value 值必须是 options中的某一项，否则报错
           placeholder: "请输入",
       }
   }
   ```

10. ##### Checkbox

    ```typescript
    {
        type: YFilterComponent.Checkbox,
        title: "多选",
        apiParam: "title6",
        options: [
            {
                value: "A",
                label: "A"
            },
            {
                value: "B",
                label: "B"
            },
            {
                value: "C",
                label: "C"
            }
        ],
        originalProps: {
            value: ["A", "B"],  // value 值必须是 options中的某一项，否则报错
            placeholder: "请输入"
        }
    },
    ```

11. ##### Radio

    ```typescript
    {
        type: YFilterComponent.Radio,
        title: "单选",
        apiParam: "title7",
        options: [
            {
                value: "AA",
                label: "AA"
            },
            {
                value: "BB",
                label: "BB"
            },
            {
                value: "CC",
                label: "CC"
            }
        ],
        originalProps: {
            checked: false,
            value: "AA", // value 值必须是 options中的某一项，否则报错
            placeholder: "请输入"
        }
    },
    ```

12. ##### Range

    ```typescript
    {
        type: YFilterComponent.Range,
        apiParam: "range1",
        title: "范围",
        originalProps: {
            placeholder: ["输入小", "输入大"], // 必须是 [string|number, string|number] 元祖
            value: ["wuhan", "hangzhou"] // 必须是 [string|number, string|number] 元祖
        }
    }
    ```

13. ##### RangeNumber

    ```typescript
    {
        type: YFilterComponent.RangeNumber,
        apiParam: "range2",
        title: "数字范围",
        originalProps: {
            placeholder: ["输入小", "输入大"], // 必须是 [string, string] 元祖
            value: [11, 20]	// 必须是 [string|number, string|number] 元祖
        }
    }
    ```

14. ##### 自定义组件

    ```typescript
    // 如果再请求输入框有ajax请求，建议自定义组件，当触发事件 onChange 时，调用 callback
    {
        apiParam: "title1111",
        title: (callback) => (
            <Select
                defaultValue={1}
                style={{ width: 72 }}
                onChange={(e) => {
                  // 该回掉函数，把参数合并到搜索参数列表中，
                  // callback 接受两个参数
                  // ((callback?: ((arg0?: string, arg1?: (number | string)) => void)) => ReactNode),
                    callback('isSelect', e)
                }}
            >
                <Select.Option value={1}>A</Select.Option>
                <Select.Option value={2}>B</Select.Option>
                <Select.Option value={3}>C</Select.Option>
                <Select.Option value={4}>D</Select.Option>
            </Select>
        ),
        render: (item, index, callback) => (
            <span style={{ marginRight: "12px", color: "red" }}>
                <Input style={{ width: '60%' }} onChange={(e) => {
                    callback(item.apiParam, e.target.value);
                }}/>
            </span>
        )
    },
    ```

    

