innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

feat(bee-table): 列过滤 filterType新增 dateyear(日期-年)、datemonth(日期-月)、dateweek(日期-周) 类型 

列过滤 filterType新增 dateyear(日期-年)、datemonth(日期-月)、dateweek(日期-周) 类型
This commit is contained in:
liushaozhen 2020-03-02 14:32:05 +08:00
parent 58f2e80ff0
commit f892ba3a17
8 changed files with 12285 additions and 49200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
build/FilterType.js
View File

@ -48,7 +48,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var RangePicker = _beeDatepicker2["default"].RangePicker;
var RangePicker = _beeDatepicker2["default"].RangePicker,
YearPicker = _beeDatepicker2["default"].YearPicker,
MonthPicker = _beeDatepicker2["default"].MonthPicker,
WeekPicker = _beeDatepicker2["default"].WeekPicker;
var propTypes = {
@ -287,6 +290,75 @@ var FilterType = function (_Component) {
filterDropdownIncludeKeys: filterDropdownIncludeKeys
})
);
case 'dateyear':
return _react2["default"].createElement(
'div',
{ className: clsPrefix + ' filter-wrap' },
_react2["default"].createElement(YearPicker, _extends({}, _this.props, {
value: _this.state.value,
onChange: _this.changeDate,
open: _this.state.open,
format: format,
locale: _zh_CN2["default"]
})),
_react2["default"].createElement(_FilterDropDown2["default"], {
locale: locale,
dataIndex: dataIndex,
dataText: _this.state.value,
onSelectDropdown: _this.onSelectDropdown,
onClickClear: _this.clearFilter,
isShowCondition: filterDropdown,
isShowClear: _this.state.value,
filterDropdownType: filterDropdownType,
filterDropdownIncludeKeys: filterDropdownIncludeKeys
})
);
case 'datemonth':
return _react2["default"].createElement(
'div',
{ className: clsPrefix + ' filter-wrap' },
_react2["default"].createElement(MonthPicker, _extends({}, _this.props, {
value: _this.state.value,
onChange: _this.changeDate,
open: _this.state.open,
format: format,
locale: _zh_CN2["default"]
})),
_react2["default"].createElement(_FilterDropDown2["default"], {
locale: locale,
dataIndex: dataIndex,
dataText: _this.state.value,
onSelectDropdown: _this.onSelectDropdown,
onClickClear: _this.clearFilter,
isShowCondition: filterDropdown,
isShowClear: _this.state.value,
filterDropdownType: filterDropdownType,
filterDropdownIncludeKeys: filterDropdownIncludeKeys
})
);
case 'dateweek':
return _react2["default"].createElement(
'div',
{ className: clsPrefix + ' filter-wrap' },
_react2["default"].createElement(WeekPicker, _extends({}, _this.props, {
value: _this.state.value,
onChange: _this.changeDate,
open: _this.state.open,
format: format,
locale: _zh_CN2["default"]
})),
_react2["default"].createElement(_FilterDropDown2["default"], {
locale: locale,
dataIndex: dataIndex,
dataText: _this.state.value,
onSelectDropdown: _this.onSelectDropdown,
onClickClear: _this.clearFilter,
isShowCondition: filterDropdown,
isShowClear: _this.state.value,
filterDropdownType: filterDropdownType,
filterDropdownIncludeKeys: filterDropdownIncludeKeys
})
);
case 'daterange':
return _react2["default"].createElement(
'div',
@ -395,7 +467,7 @@ var FilterType = function (_Component) {
/**
* 根据不同的类型生成对应的组件类型包含一些参数的适应
*
* @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number']
* @param {*} rendertype 参数类型，包括['text','dropdown','date','dateyear','datemonth','dateweek',daterange','number']
* @returns
*/

45
build/TableHeader.js
View File

@ -930,6 +930,51 @@ var _initialiseProps = function _initialiseProps() {
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
});
//日期 年
case "dateyear":
return _react2["default"].createElement(_FilterType2["default"], {
locale: locale,
rendertype: type,
className: "filter-date",
onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY",
dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
});
//日期 月
case "datemonth":
return _react2["default"].createElement(_FilterType2["default"], {
locale: locale,
rendertype: type,
className: "filter-date",
onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-MM",
dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
});
//日期 周
case "dateweek":
return _react2["default"].createElement(_FilterType2["default"], {
locale: locale,
rendertype: type,
className: "filter-date",
onClick: function onClick() {},
format: rows[1][index]["format"] || "YYYY-Wo",
dataIndex: dataIndex //字段
, onFilterChange: _this7.handlerFilterChange //输入框回调
, onFilterClear: _this7.handlerFilterClear //清除回调
, filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
});
//日期范围
case "daterange":
return _react2["default"].createElement(_FilterType2["default"], {

61237
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/api.md
View File

@ -125,7 +125,7 @@ import 'bee-table/build/Table.css';
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
| order | 设置排序 | string（"descend"、"ascend"） | -|
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`dateyear(日期-年)`,`datemonth(日期-月)`,`dateweek(日期-周)`,`daterange(日期范围)`,`number(数值)` | string | text |
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.2.37",
"version": "2.2.38",
"description": "Table ui component for react",
"keywords": [
"react",

70
src/FilterType.js
View File

@ -7,7 +7,7 @@ import Select from 'bee-select';
import InputNumber from 'bee-input-number';
import FilterDropDown from './FilterDropDown';
const { RangePicker } = DatePicker;
const { RangePicker,YearPicker,MonthPicker,WeekPicker } = DatePicker;
const propTypes = {
filterDropdown: PropTypes.string
@ -155,7 +155,7 @@ class FilterType extends Component {
/**
* 根据不同的类型生成对应的组件类型包含一些参数的适应
*
* @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number']
* @param {*} rendertype 参数类型，包括['text','dropdown','date','dateyear','datemonth','dateweek',daterange','number']
* @returns
*/
renderControl = (rendertype) => {
@ -246,6 +246,72 @@ class FilterType extends Component {
>
</FilterDropDown>
</div>
case 'dateyear':
return <div className={`${clsPrefix} filter-wrap`}>
<YearPicker
{...this.props}
value={this.state.value}
onChange={this.changeDate}
open={this.state.open}
format={format}
locale={zhCN}
/><FilterDropDown
locale={locale}
dataIndex={dataIndex}
dataText={this.state.value}
onSelectDropdown={this.onSelectDropdown}
onClickClear={this.clearFilter}
isShowCondition={filterDropdown}
isShowClear={this.state.value}
filterDropdownType={filterDropdownType}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown>
</div>
case 'datemonth':
return <div className={`${clsPrefix} filter-wrap`}>
<MonthPicker
{...this.props}
value={this.state.value}
onChange={this.changeDate}
open={this.state.open}
format={format}
locale={zhCN}
/><FilterDropDown
locale={locale}
dataIndex={dataIndex}
dataText={this.state.value}
onSelectDropdown={this.onSelectDropdown}
onClickClear={this.clearFilter}
isShowCondition={filterDropdown}
isShowClear={this.state.value}
filterDropdownType={filterDropdownType}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown>
</div>
case 'dateweek':
return <div className={`${clsPrefix} filter-wrap`}>
<WeekPicker
{...this.props}
value={this.state.value}
onChange={this.changeDate}
open={this.state.open}
format={format}
locale={zhCN}
/><FilterDropDown
locale={locale}
dataIndex={dataIndex}
dataText={this.state.value}
onSelectDropdown={this.onSelectDropdown}
onClickClear={this.clearFilter}
isShowCondition={filterDropdown}
isShowClear={this.state.value}
filterDropdownType={filterDropdownType}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown>
</div>
case 'daterange':
return <div className={`${clsPrefix} filter-wrap`}>
<RangePicker

51
src/TableHeader.js
View File

@ -715,6 +715,57 @@ class TableHeader extends Component {
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
//日期 年
case "dateyear":
return (
<FilterType
locale={locale}
rendertype={type}
className={`filter-date`}
onClick={() => { }}
format={rows[1][index]["format"] || "YYYY"}
dataIndex={dataIndex}//字段
onFilterChange={this.handlerFilterChange}//输入框回调
onFilterClear={this.handlerFilterClear}//清除回调
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
//日期 月
case "datemonth":
return (
<FilterType
locale={locale}
rendertype={type}
className={`filter-date`}
onClick={() => { }}
format={rows[1][index]["format"] || "YYYY-MM"}
dataIndex={dataIndex}//字段
onFilterChange={this.handlerFilterChange}//输入框回调
onFilterClear={this.handlerFilterClear}//清除回调
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
//日期 周
case "dateweek":
return (
<FilterType
locale={locale}
rendertype={type}
className={`filter-date`}
onClick={() => { }}
format={rows[1][index]["format"] || "YYYY-Wo"}
dataIndex={dataIndex}//字段
onFilterChange={this.handlerFilterChange}//输入框回调
onFilterClear={this.handlerFilterClear}//清除回调
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
//日期范围
case "daterange":
return (