import React, { useState, useEffect } from "react";
import { Row, Col, Input, Select, DatePicker, Button, Tooltip } from "antd";
import { Const } from "src/utils/const";
const { Option } = Select;
const { RangePicker } = DatePicker;
interface IFilters {
// 公共篩選組件
label: string; // 篩選名稱
key: string; // 篩選的字段
defaultValue?: any; // 默認值
type: string; // 選項的類型：Input-輸入框，NumberInput-數字輸入框，Select-下拉框，SelectMultiple-下拉框多選，Date-日期，DateRange-日期範圍，DateRangeButton-按鈕日期
options?: { name: string; value: any }[]; // 下拉框的可選項, 如果是DateRangeButton，value爲const中DATE_PICKER_RANGER_HELPER的key
span?: number; // 列寬，總共24
tip?: string; // 文案提示
render?: () => any; // 自定義渲染選項
onChange?: (data: any) => any;
}
interface IFilterFormProps {
filterColumns: IFilters[][]; // 一個數組代表一行
onSubmit: (data: any) => any;
onChange?: (data: any) => any;
className?: string;
changeFieldsValue?: any; // 聯動字段
}
const FilterForm: React.FunctionComponent<IFilterFormProps> = (props: IFilterFormProps) => {
const { filterColumns } = props;
const [filterValues, setFilterValues] = useState();
// 初始化
useEffect(() => {
initFilterValues();
}, []);
useEffect(() => {
if (props.changeFieldsValue) {
const values = filterValues ? { ...filterValues } : {};
Object.keys(props.changeFieldsValue).map(item => {
values[item] = props.changeFieldsValue[item];
});
setFilterValues(values);
}
}, [props.changeFieldsValue]);
const initFilterValues = () => {
const values = {};
filterColumns.map(rows => {
rows.map(item => {
values[item.key] = item.defaultValue;
});
});
setFilterValues(values);
};
const onFieldsChange = (filter: IFilters, value: any) => {
const values = { ...filterValues };
const field = filter.key;
// Just because an empty array or string means all.
values[field] = String(value).length ? value : void 0;
setFilterValues(values);
if (filter.onChange) {
filter.onChange(value);
}
if (props.onChange) {
props.onChange(values);
}
};
const resetFields = () => {
initFilterValues();
};
const renderTooltip = (text: string) => {
return (
<Tooltip placement="topLeft" title={text}>
<Button icon="question-circle" type="link" size="small" />
</Tooltip>
);
};
const renderDateRange = (filter: IFilters, text: string, range: any) => {
return (
<Button
key={text}
style={{ marginLeft: 10 }}
onClick={() => {
onFieldsChange(filter, range);
}}
>
{text}
</Button>
);
};
// 選項的類型：Input-輸入框，NumberInput-數字輸入框，Select-下拉框，SelectMultiple-下拉框多選，
// Date-日期，DateRange-日期範圍
// 根據需求定義更多類型
const renderForm = (filter: IFilters) => {
const filterItem = {
Input: (
<Input
value={filterValues ? filterValues[filter.key] : undefined}
className="full-width"
placeholder={filter.label}
onChange={e => onFieldsChange(filter, e.target.value)}
/>
),
NumberInput: (
<Input
value={filterValues ? filterValues[filter.key] : undefined}
className="full-width"
placeholder={filter.label}
onChange={e => {
if (!e.target.value) {
onFieldsChange(filter, undefined);
} else if (!Number.isNaN(Number(e.target.value)) && /^\d+$/.test(e.target.value)) {
onFieldsChange(filter, Number(e.target.value));
}
}}
/>
),
Select: (
<Select
value={filterValues ? filterValues[filter.key] : undefined}
className="full-width"
placeholder={filter.label}
allowClear={true}
filterOption={(input: string, option: any) => {
try {
return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
} catch {
return option.props.children.indexOf(input) >= 0;
}
}}
onChange={(value: any) => onFieldsChange(filter, value)}
>
{filter.options
? filter.options.map((item: any) => {
return (
<Option key={item.value} value={item.value}>
{item.name}
</Option>
);
})
: null}
</Select>
),
SelectMultiple: (
<Select
value={filterValues ? filterValues[filter.key] : undefined}
className="full-width"
mode="multiple"
allowClear={true}
placeholder={filter.label}
filterOption={(input: string, option: any) => {
try {
return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
} catch {
return option.props.children.indexOf(input) >= 0;
}
}}
onChange={(value: any) => onFieldsChange(filter, value)}
>
{filter.options
? filter.options.map((item: any) => {
return (
<Option key={item.value} value={item.value}>
{item.name}
</Option>
);
})
: null}
</Select>
),
Date: (
<DatePicker
value={filterValues ? filterValues[filter.key] : undefined}
onChange={value => onFieldsChange(filter, value)}
/>
),
DateRange: (
<RangePicker
value={filterValues ? filterValues[filter.key] : undefined}
onChange={value => onFieldsChange(filter, value)}
/>
),
};
return filterItem[filter.type];
};
return (
<div className={props.className}>
{filterColumns.map((rows, index) => (
<Row gutter={8} key={index}>
{rows.map(filter => (
<span key={filter.key}>
<Col span={2} className="form-label">
{filter.label}
{filter.tip ? renderTooltip(filter.tip) : null}:
</Col>
<Col span={filter.span ? filter.span : 4} className="margin-bottom-sm">
{filter.render ? filter.render() : renderForm(filter)}
</Col>
</span>
))}
</Row>
))}
<div className="pull-right">
<Button className="margin-right-sm btn-warning" onClick={() => props.onSubmit(filterValues)}>
查詢
</Button>
<Button type="danger" onClick={() => resetFields()}>
重置
</Button>
</div>
</div>
);
};
export default FilterForm;
import React, { useState } from "react";
import moment from "moment";
import FilterForm from "src/components/public/filter-form";
interface ITestFilters {
onFilter: (params: any) => void;
defaultFilters: any;
}
const TestFilters: React.FunctionComponent<ITestFilters> = (props: ITestFilters) => {
const [changeFieldsValue, setChangeFieldsValue] = useState<any>();
const test2=[...];
const changeTest3 = (id: number) => {
...
setChangeFieldsValue({Test3:""})
};
const onSubmit = (filters: any) => {
...
}
const { StartTime, EndTime } = props.defaultFilters;
const filterColumns: IFilters[][] = [
[
{
label: "Test1",
key: "Test1",
type: "NumberInput"
},
{
label: "Test2",
key: "Test2",
type: "Select",
options: test2.map((item: any) => {
return { name: item.Name, value: item.Id };
}),
},
],
[
{
label: "Test3",
key: "Test3",
type: "Date",
defaultValue: StartTime,
onChange: changeTest3
},
{
label: "Test4",
key: "Test4",
type: "Date",
defaultValue: EndTime,
},
......
]
];
return <FilterForm filterColumns={filterColumns} changeFieldsValue={changeFieldsValue} onSubmit={onSubmit} />;
};
export default FaultTicketsFilters;
我這裏用的是ts，用js的也差的不多，react是新版的hook，省略了一些代碼，思想基本都體現出來了