新增表格表头排序,搜索,过滤等状态激活显示以及重置功能

This commit is contained in:
hectorqin 2020-07-31 17:43:44 +08:00
parent 641fc9aad4
commit bed2450c1d
5 changed files with 108 additions and 11 deletions

View File

@ -507,6 +507,10 @@ $TableCell-sortBtn-width: px2rem(8px) !default;
$TableCell-sortBtn--default-opacity: 0 !default;
$TableCell-sortBtn--default-onActive-opacity: 1 !default;
$TableCell-searchBtn--onActive-color: $primary !default;
$TableCell-filterBtn--onActive-color: $primary !default;
$TableCell-sortBtn--onActive-color: $primary !default;
// Cards
$Cards-fixedTop-boxShadow: $boxShadow !default;
$Cards-toolbar-paddingY: 0 !default;

View File

@ -549,10 +549,16 @@
&.is-active {
color: $text--muted-color;
&:hover {
color: $icon-onHover-color;
color: $text-color;
}
}
}
&--up,
&--down {
&.is-active {
color: $TableCell-sortBtn--onActive-color;
}
}
}
&Cell-searchBtn {
@ -572,6 +578,9 @@
&:hover {
color: $text-color;
}
&.is-active {
color: $TableCell-searchBtn--onActive-color;
}
}
&Cell-searchPopOver {
@ -602,6 +611,10 @@
color: $text-color;
}
&.is-active {
color: $TableCell-filterBtn--onActive-color;
}
.#{$ns}Remark {
display: inline;
}

View File

@ -205,5 +205,6 @@ register('en', {
'保存并下一步': 'Save & Next',
'完成': 'Finish',
'点击选择图片或者将图片拖入该区域':
'Click to select the picture or drag the picture into the area'
'Click to select the picture or drag the picture into the area',
'重置': 'Reset'
});

View File

@ -1108,10 +1108,19 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('TableCell-sortBtn')}
onClick={() => {
if (column.name === store.orderBy) {
if (store.orderDir === 'desc') {
// 降序之后取消排序
store.setOrderByInfo(
'',
'asc'
);
} else {
// 升序之后降序
store.setOrderByInfo(
column.name,
store.orderDir === 'desc' ? 'asc' : 'desc'
'desc'
);
}
} else {
store.setOrderByInfo(column.name as string, 'asc');
}
@ -2175,6 +2184,7 @@ export class HeadCellSearchDropDown extends React.Component<
isOpened: false
};
formItems: Array<string> = [];
constructor(props: HeadCellSearchProps) {
super(props);
@ -2249,11 +2259,26 @@ export class HeadCellSearchDropDown extends React.Component<
}
if (schema) {
const formItems = [];
if (schema.controls) {
for (let item of schema.controls) {
if (item.name) {
formItems.push(item.name);
}
}
}
this.formItems = formItems;
schema = {
...schema,
type: 'form',
wrapperComponent: 'div',
actions: [
{
type: 'button',
label: __('重置'),
actionType: 'reset'
},
{
type: 'button',
label: __('取消'),
@ -2296,9 +2321,32 @@ export class HeadCellSearchDropDown extends React.Component<
return;
}
if (action.actionType === 'reset') {
this.close();
this.handleReset();
return;
}
onAction && onAction(e, action, ctx);
}
handleReset() {
const {onQuery, data, name} = this.props;
const values = {...data};
for (let item of this.formItems) {
if (item !== 'orderBy' && item !== 'orderDir') {
if (values[item]) {
values[item] = undefined;
}
}
}
if (values.orderBy && values.orderBy === name) {
values.orderBy = '';
values.orderDir = 'asc';
}
onQuery(values);
}
handleSubmit(values: any) {
const {onQuery, name} = this.props;
@ -2314,6 +2362,21 @@ export class HeadCellSearchDropDown extends React.Component<
onQuery(values);
}
isActive() {
const {data, name} = this.props;
if (data.orderBy === name) {
return true;
}
for (let item of this.formItems) {
if (item !== 'orderBy' && item !== 'orderDir') {
if (data[`${item}`]) {
return true;
}
}
}
return false;
}
render() {
const {
render,
@ -2326,8 +2389,11 @@ export class HeadCellSearchDropDown extends React.Component<
classPrefix: ns
} = this.props;
const formSchema = this.buildSchema();
const isActive = this.isActive();
return (
<span className={cx(`${ns}TableCell-searchBtn`)}>
<span className={cx(`${ns}TableCell-searchBtn`, isActive ? 'is-active' : '')}>
<span onClick={this.open}>
<Icon icon="search" className="icon" />
</span>
@ -2350,7 +2416,7 @@ export class HeadCellSearchDropDown extends React.Component<
overlay
>
{
render('quick-search-form', this.buildSchema(), {
render('quick-search-form', formSchema, {
data: {
...data,
orderBy: orderBy,
@ -2518,17 +2584,28 @@ export class HeadCellFilterDropDown extends React.Component<
});
}
handleReset() {
const {name, onQuery} = this.props;
onQuery({
[name]: undefined
})
this.close();
}
render() {
const {isOpened, filterOptions} = this.state;
const {
data,
name,
filterable,
popOverContainer,
classPrefix: ns,
classnames: cx
classnames: cx,
translate: __
} = this.props;
return (
<span className={cx(`${ns}TableCell-filterBtn`)}>
<span className={cx(`${ns}TableCell-filterBtn`, data[name] ? 'is-active' : '')}>
<span onClick={this.open}>
<Icon icon="column-filter" className="icon" />
</span>
@ -2575,6 +2652,7 @@ export class HeadCellFilterDropDown extends React.Component<
</Checkbox>
</li>
))}
<li key="DropDown-menu-reset" className={cx('DropDown-divider')} onClick={this.handleReset.bind(this)}>{__('重置')}</li>
</ul>
) : null}
</PopOver>

View File

@ -100,7 +100,8 @@ export interface Action extends Button {
| 'cancel'
| 'close'
| 'next'
| 'prev';
| 'prev'
| 'reset';
api?: Api;
asyncApi?: Api;
payload?: any;