add:过滤行功能增加日期范围类型

This commit is contained in:
kvkens 2018-11-26 21:08:20 +08:00
parent a4ac4ca029
commit 9fa776ca5a
3 changed files with 99 additions and 38 deletions

View File

@ -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)=>()

View File

@ -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}
> >

View File

@ -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 />;