vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
219 lines (218 loc) • 9.96 kB
JavaScript
import { defineComponent, h, computed, inject } from 'vue';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { VXETable } from '../../v-x-e-table';
import { formatText } from '../../tools/utils';
import { getPropClass } from '../../tools/dom';
import { getSlotVNs } from '../../tools/vn';
export default defineComponent({
name: 'VxeTableFilter',
props: {
filterStore: Object
},
setup: function (props) {
var $xetable = inject('$xetable', {});
var tableReactData = $xetable.reactData, tableInternalData = $xetable.internalData, getComputeMaps = $xetable.getComputeMaps;
var computeFilterOpts = getComputeMaps().computeFilterOpts;
var computeHasCheckOption = computed(function () {
var filterStore = props.filterStore;
return filterStore && filterStore.options.some(function (option) { return option.checked; });
});
// 全部筛选事件
var filterCheckAllEvent = function (evnt, value) {
var filterStore = props.filterStore;
filterStore.options.forEach(function (option) {
option._checked = value;
option.checked = value;
});
filterStore.isAllSelected = value;
filterStore.isIndeterminate = false;
};
/*************************
* Publish methods
*************************/
// 确认筛选
var confirmFilter = function (evnt) {
var filterStore = props.filterStore;
filterStore.options.forEach(function (option) {
option.checked = option._checked;
});
$xetable.confirmFilterEvent(evnt);
};
// （单选）筛选发生改变
var changeRadioOption = function (evnt, checked, item) {
var filterStore = props.filterStore;
filterStore.options.forEach(function (option) {
option._checked = false;
});
item._checked = checked;
$xetable.checkFilterOptions();
confirmFilter(evnt);
};
/**
* 重置筛选
* 当筛选面板中的重置按钮被按下时触发
* @param {Event} evnt 事件
*/
var resetFilter = function (evnt) {
var filterStore = props.filterStore;
$xetable.handleClearFilter(filterStore.column);
$xetable.confirmFilterEvent(evnt);
};
// （多选）筛选发生改变
var changeMultipleOption = function (evnt, checked, item) {
item._checked = checked;
$xetable.checkFilterOptions();
};
// 筛选发生改变
var changeOption = function (evnt, checked, item) {
var filterStore = props.filterStore;
if (filterStore.multiple) {
changeMultipleOption(evnt, checked, item);
}
else {
changeRadioOption(evnt, checked, item);
}
};
var changeAllOption = function (evnt, checked) {
var filterStore = props.filterStore;
if (filterStore.multiple) {
filterCheckAllEvent(evnt, checked);
}
else {
resetFilter(evnt);
}
};
/*************************
* Publish methods
*************************/
var $panel = {
changeRadioOption: changeRadioOption,
changeMultipleOption: changeMultipleOption,
changeAllOption: changeAllOption,
changeOption: changeOption,
confirmFilter: confirmFilter,
resetFilter: resetFilter
};
var renderOptions = function (filterRender, compConf) {
var filterStore = props.filterStore;
var column = filterStore.column, multiple = filterStore.multiple, maxHeight = filterStore.maxHeight;
var slots = column.slots;
var filterSlot = slots ? slots.filter : null;
var params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $panel, $table: $xetable });
if (filterSlot) {
return [
h('div', {
class: 'vxe-table--filter-template'
}, $xetable.callSlot(filterSlot, params))
];
}
else if (compConf && compConf.renderFilter) {
return [
h('div', {
class: 'vxe-table--filter-template'
}, getSlotVNs(compConf.renderFilter(filterRender, params)))
];
}
var isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some(function (item) { return item._checked; });
var isAllIndeterminate = multiple && filterStore.isIndeterminate;
return [
h('ul', {
class: 'vxe-table--filter-header'
}, [
h('li', {
class: ['vxe-table--filter-option', {
'is--checked': isAllChecked,
'is--indeterminate': isAllIndeterminate
}],
title: GlobalConfig.i18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter'),
onClick: function (evnt) {
changeAllOption(evnt, !filterStore.isAllSelected);
}
}, (multiple ? [
h('span', {
class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
})
] : []).concat([
h('span', {
class: 'vxe-checkbox--label'
}, GlobalConfig.i18n('vxe.table.allFilter'))
]))
]),
h('ul', {
class: 'vxe-table--filter-body',
style: maxHeight ? {
maxHeight: "".concat(maxHeight, "px")
} : {}
}, filterStore.options.map(function (item) {
var isChecked = item._checked;
var isIndeterminate = false;
return h('li', {
class: ['vxe-table--filter-option', {
'is--checked': item._checked
}],
title: item.label,
onClick: function (evnt) {
changeOption(evnt, !item._checked, item);
}
}, (multiple ? [
h('span', {
class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
})
] : []).concat([
h('span', {
class: 'vxe-checkbox--label'
}, formatText(item.label, 1))
]));
}))
];
};
var renderFooters = function () {
var filterStore = props.filterStore;
var column = filterStore.column, multiple = filterStore.multiple;
var filterOpts = computeFilterOpts.value;
var hasCheckOption = computeHasCheckOption.value;
var filterRender = column.filterRender;
var compConf = filterRender ? VXETable.renderer.get(filterRender.name) : null;
var isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
return multiple && (!compConf || compConf.showFilterFooter !== false) ? [
h('div', {
class: 'vxe-table--filter-footer'
}, [
h('button', {
class: {
'is--disabled': isDisabled
},
disabled: isDisabled,
onClick: confirmFilter
}, filterOpts.confirmButtonText || GlobalConfig.i18n('vxe.table.confirmFilter')),
h('button', {
onClick: resetFilter
}, filterOpts.resetButtonText || GlobalConfig.i18n('vxe.table.resetFilter'))
])
] : [];
};
var renderVN = function () {
var filterStore = props.filterStore;
var initStore = tableReactData.initStore;
var column = filterStore.column;
var filterRender = column ? column.filterRender : null;
var compConf = filterRender ? VXETable.renderer.get(filterRender.name) : null;
var filterClassName = compConf ? compConf.filterClassName : '';
var params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $panel, $table: $xetable });
return h('div', {
class: [
'vxe-table--filter-wrapper',
'filter--prevent-default',
getPropClass(filterClassName, params),
{
'is--animat': $xetable.props.animat,
'is--multiple': filterStore.multiple,
'is--active': filterStore.visible
}
],
style: filterStore.style
}, initStore.filter && filterStore.visible ? renderOptions(filterRender, compConf).concat(renderFooters()) : []);
};
return renderVN;
}
});