新增表格表头排序,搜索,过滤等状态激活显示以及重置功能
This commit is contained in:
parent
641fc9aad4
commit
bed2450c1d
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -100,7 +100,8 @@ export interface Action extends Button {
|
|||
| 'cancel'
|
||||
| 'close'
|
||||
| 'next'
|
||||
| 'prev';
|
||||
| 'prev'
|
||||
| 'reset';
|
||||
api?: Api;
|
||||
asyncApi?: Api;
|
||||
payload?: any;
|
||||
|
|
Loading…
Reference in New Issue