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
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()

View File

@ -1,11 +1,14 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import zhCN from "rc-calendar/lib/locale/zh_CN";
import FormControl from 'bee-form-control';
import Select from 'bee-select';
import InputNumber from 'bee-input-number';
import DatePicker from 'bee-datepicker';
import FilterDropDown from './FilterDropDown';
const { RangePicker } = DatePicker;
const propTypes = {
filterDropdown: PropTypes.string
};
@ -108,17 +111,18 @@ class FilterType extends Component {
* @returns
*/
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) {
case 'text':
return <div className={`${clsPrefix} filter-wrap`}><FormControl
ref={el => this.text = el}
value={this.state.text}
className={className}
onChange={this.changeText}
onKeyDown={this.changeTextCall}
onBlur={this.changeTextCallBlur}
/>
return <div className={`${clsPrefix} filter-wrap`}>
<FormControl
ref={el => this.text = el}
value={this.state.text}
className={className}
onChange={this.changeText}
onKeyDown={this.changeTextCall}
onBlur={this.changeTextCallBlur}
/>
<FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
@ -147,38 +151,64 @@ class FilterType extends Component {
</FilterDropDown>
</div>
case 'dropdown':
return <div className={`${clsPrefix} filter-wrap`}><Select
{...this.props}
value={this.state.selectValue}
onChange={this.changeSelect}
/><FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearSelectValue}
isShowCondition={filterDropdown}
isShowClear={this.state.selectValue}
>
return <div className={`${clsPrefix} filter-wrap`}>
<Select
{...this.props}
value={this.state.selectValue}
onChange={this.changeSelect}
/><FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearSelectValue}
isShowCondition={filterDropdown}
isShowClear={this.state.selectValue}
>
</FilterDropDown></div>
case 'date':
return <div className={`${clsPrefix} filter-wrap`}><DatePicker
{...this.props}
value={this.state.dateValue}
onChange={this.changeDate}
open={this.state.open}
/>{filterDropdown == 'show' && <FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearDateValue}
isShowCondition={filterDropdown}
isShowClear={this.state.dateValue}
>
</FilterDropDown>}
return <div className={`${clsPrefix} filter-wrap`}>
<DatePicker
{...this.props}
value={this.state.dateValue}
onChange={this.changeDate}
open={this.state.open}
format={format}
locale={zhCN}
/>{filterDropdown == 'show' && <FilterDropDown
locale={locale}
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearDateValue}
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>
case 'bool':
return <div className={`${clsPrefix} filter-wrap`}><Switch
className={className}
onChange={onChange}
/>
return <div className={`${clsPrefix} filter-wrap`}>
<Switch
className={className}
onChange={onChange}
/>
{filterDropdown == 'show' && <FilterDropDown locale={locale}
onSelectDropdown={onSelectDropdown}
>

View File

@ -417,6 +417,24 @@ class TableHeader extends Component {
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:
//不匹配类型默认文本输入
return <div />;