add:过滤行功能增加日期范围类型
This commit is contained in:
parent
a4ac4ca029
commit
9fa776ca5a
|
@ -182,7 +182,20 @@ class Demo27 extends Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "hide" },
|
{
|
||||||
|
title: "居住地址",
|
||||||
|
width: 350,
|
||||||
|
dataIndex: "address",
|
||||||
|
key: "address",
|
||||||
|
filterType: "daterange",
|
||||||
|
filterDropdown: "show"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
width: 100,
|
||||||
|
key: "other",
|
||||||
|
dataIndex: "other"
|
||||||
|
}
|
||||||
];
|
];
|
||||||
return <ComplexTable
|
return <ComplexTable
|
||||||
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
|
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import zhCN from "rc-calendar/lib/locale/zh_CN";
|
||||||
import FormControl from 'bee-form-control';
|
import FormControl from 'bee-form-control';
|
||||||
import Select from 'bee-select';
|
import Select from 'bee-select';
|
||||||
import InputNumber from 'bee-input-number';
|
import InputNumber from 'bee-input-number';
|
||||||
import DatePicker from 'bee-datepicker';
|
import DatePicker from 'bee-datepicker';
|
||||||
import FilterDropDown from './FilterDropDown';
|
import FilterDropDown from './FilterDropDown';
|
||||||
|
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
filterDropdown: PropTypes.string
|
filterDropdown: PropTypes.string
|
||||||
};
|
};
|
||||||
|
@ -108,17 +111,18 @@ class FilterType extends Component {
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
renderControl = (rendertype) => {
|
renderControl = (rendertype) => {
|
||||||
let { filterDropdown, filterDropdownType, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
let { filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||||
switch (rendertype) {
|
switch (rendertype) {
|
||||||
case 'text':
|
case 'text':
|
||||||
return <div className={`${clsPrefix} filter-wrap`}><FormControl
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
ref={el => this.text = el}
|
<FormControl
|
||||||
value={this.state.text}
|
ref={el => this.text = el}
|
||||||
className={className}
|
value={this.state.text}
|
||||||
onChange={this.changeText}
|
className={className}
|
||||||
onKeyDown={this.changeTextCall}
|
onChange={this.changeText}
|
||||||
onBlur={this.changeTextCallBlur}
|
onKeyDown={this.changeTextCall}
|
||||||
/>
|
onBlur={this.changeTextCallBlur}
|
||||||
|
/>
|
||||||
<FilterDropDown
|
<FilterDropDown
|
||||||
locale={locale}
|
locale={locale}
|
||||||
onSelectDropdown={onSelectDropdown}
|
onSelectDropdown={onSelectDropdown}
|
||||||
|
@ -147,38 +151,64 @@ class FilterType extends Component {
|
||||||
</FilterDropDown>
|
</FilterDropDown>
|
||||||
</div>
|
</div>
|
||||||
case 'dropdown':
|
case 'dropdown':
|
||||||
return <div className={`${clsPrefix} filter-wrap`}><Select
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
{...this.props}
|
<Select
|
||||||
value={this.state.selectValue}
|
{...this.props}
|
||||||
onChange={this.changeSelect}
|
value={this.state.selectValue}
|
||||||
/><FilterDropDown
|
onChange={this.changeSelect}
|
||||||
locale={locale}
|
/><FilterDropDown
|
||||||
onSelectDropdown={onSelectDropdown}
|
locale={locale}
|
||||||
onClickClear={this.clearSelectValue}
|
onSelectDropdown={onSelectDropdown}
|
||||||
isShowCondition={filterDropdown}
|
onClickClear={this.clearSelectValue}
|
||||||
isShowClear={this.state.selectValue}
|
isShowCondition={filterDropdown}
|
||||||
>
|
isShowClear={this.state.selectValue}
|
||||||
|
>
|
||||||
</FilterDropDown></div>
|
</FilterDropDown></div>
|
||||||
case 'date':
|
case 'date':
|
||||||
return <div className={`${clsPrefix} filter-wrap`}><DatePicker
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
{...this.props}
|
<DatePicker
|
||||||
value={this.state.dateValue}
|
{...this.props}
|
||||||
onChange={this.changeDate}
|
value={this.state.dateValue}
|
||||||
open={this.state.open}
|
onChange={this.changeDate}
|
||||||
/>{filterDropdown == 'show' && <FilterDropDown
|
open={this.state.open}
|
||||||
locale={locale}
|
format={format}
|
||||||
onSelectDropdown={onSelectDropdown}
|
locale={zhCN}
|
||||||
onClickClear={this.clearDateValue}
|
/>{filterDropdown == 'show' && <FilterDropDown
|
||||||
isShowCondition={filterDropdown}
|
locale={locale}
|
||||||
isShowClear={this.state.dateValue}
|
onSelectDropdown={onSelectDropdown}
|
||||||
>
|
onClickClear={this.clearDateValue}
|
||||||
</FilterDropDown>}
|
isShowCondition={filterDropdown}
|
||||||
|
isShowClear={this.state.dateValue}
|
||||||
|
>
|
||||||
|
</FilterDropDown>}
|
||||||
|
</div>
|
||||||
|
case 'daterange':
|
||||||
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
|
<RangePicker
|
||||||
|
{...this.props}
|
||||||
|
value={this.state.dateValue}
|
||||||
|
onChange={this.changeDate}
|
||||||
|
open={this.state.open}
|
||||||
|
format={format}
|
||||||
|
locale={zhCN}
|
||||||
|
placeholder={'开始 ~ 结束'}
|
||||||
|
dateInputPlaceholder={['开始', '结束']}
|
||||||
|
showClear={true}
|
||||||
|
/>{filterDropdown == 'show' && <FilterDropDown
|
||||||
|
locale={locale}
|
||||||
|
onSelectDropdown={onSelectDropdown}
|
||||||
|
onClickClear={this.clearDateValue}
|
||||||
|
isShowCondition={filterDropdown}
|
||||||
|
isShowClear={this.state.dateValue}
|
||||||
|
>
|
||||||
|
</FilterDropDown>}
|
||||||
</div>
|
</div>
|
||||||
case 'bool':
|
case 'bool':
|
||||||
return <div className={`${clsPrefix} filter-wrap`}><Switch
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
className={className}
|
<Switch
|
||||||
onChange={onChange}
|
className={className}
|
||||||
/>
|
onChange={onChange}
|
||||||
|
/>
|
||||||
{filterDropdown == 'show' && <FilterDropDown locale={locale}
|
{filterDropdown == 'show' && <FilterDropDown locale={locale}
|
||||||
onSelectDropdown={onSelectDropdown}
|
onSelectDropdown={onSelectDropdown}
|
||||||
>
|
>
|
||||||
|
|
|
@ -417,6 +417,24 @@ class TableHeader extends Component {
|
||||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
//日期范围
|
||||||
|
case "daterange":
|
||||||
|
return (
|
||||||
|
<FilterType
|
||||||
|
locale={locale}
|
||||||
|
rendertype={type}
|
||||||
|
className={`filter-date`}
|
||||||
|
onClick={() => {}}
|
||||||
|
format={rows[1][index]["format"] || "YYYY-MM-DD"}
|
||||||
|
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
||||||
|
onSelectDropdown={this.handlerFilterDropChange.bind(
|
||||||
|
this,
|
||||||
|
dataIndex
|
||||||
|
)}
|
||||||
|
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||||
|
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||||
|
/>
|
||||||
|
);
|
||||||
default:
|
default:
|
||||||
//不匹配类型默认文本输入
|
//不匹配类型默认文本输入
|
||||||
return <div />;
|
return <div />;
|
||||||
|
|
Loading…
Reference in New Issue