vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
211 lines (210 loc) • 8.45 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _vXETable = require("../../v-x-e-table");
var _utils = require("../../tools/utils");
var _dom = require("../../tools/dom");
var _vn = require("../../tools/vn");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = (0, _vue.defineComponent)({
name: 'VxeTableFilter',
props: {
filterStore: Object
},
setup: function (props) {
var $xetable = (0, _vue.inject)('$xetable', {});
var tableReactData = $xetable.reactData,
tableInternalData = $xetable.internalData,
getComputeMaps = $xetable.getComputeMaps;
var computeFilterOpts = getComputeMaps().computeFilterOpts;
var computeHasCheckOption = (0, _vue.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 [(0, _vue.h)('div', {
class: 'vxe-table--filter-template'
}, $xetable.callSlot(filterSlot, params))];
} else if (compConf && compConf.renderFilter) {
return [(0, _vue.h)('div', {
class: 'vxe-table--filter-template'
}, (0, _vn.getSlotVNs)(compConf.renderFilter(filterRender, params)))];
}
var isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some(function (item) {
return item._checked;
});
var isAllIndeterminate = multiple && filterStore.isIndeterminate;
return [(0, _vue.h)('ul', {
class: 'vxe-table--filter-header'
}, [(0, _vue.h)('li', {
class: ['vxe-table--filter-option', {
'is--checked': isAllChecked,
'is--indeterminate': isAllIndeterminate
}],
title: _conf.default.i18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter'),
onClick: function (evnt) {
changeAllOption(evnt, !filterStore.isAllSelected);
}
}, (multiple ? [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isAllIndeterminate ? _conf.default.icon.TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? _conf.default.icon.TABLE_CHECKBOX_CHECKED : _conf.default.icon.TABLE_CHECKBOX_UNCHECKED]
})] : []).concat([(0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, _conf.default.i18n('vxe.table.allFilter'))]))]), (0, _vue.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 (0, _vue.h)('li', {
class: ['vxe-table--filter-option', {
'is--checked': item._checked
}],
title: item.label,
onClick: function (evnt) {
changeOption(evnt, !item._checked, item);
}
}, (multiple ? [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isIndeterminate ? _conf.default.icon.TABLE_CHECKBOX_INDETERMINATE : isChecked ? _conf.default.icon.TABLE_CHECKBOX_CHECKED : _conf.default.icon.TABLE_CHECKBOX_UNCHECKED]
})] : []).concat([(0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, (0, _utils.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.VXETable.renderer.get(filterRender.name) : null;
var isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
return multiple && (!compConf || compConf.showFilterFooter !== false) ? [(0, _vue.h)('div', {
class: 'vxe-table--filter-footer'
}, [(0, _vue.h)('button', {
class: {
'is--disabled': isDisabled
},
disabled: isDisabled,
onClick: confirmFilter
}, filterOpts.confirmButtonText || _conf.default.i18n('vxe.table.confirmFilter')), (0, _vue.h)('button', {
onClick: resetFilter
}, filterOpts.resetButtonText || _conf.default.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.VXETable.renderer.get(filterRender.name) : null;
var filterClassName = compConf ? compConf.filterClassName : '';
var params = Object.assign({}, tableInternalData._currFilterParams, {
$panel: $panel,
$table: $xetable
});
return (0, _vue.h)('div', {
class: ['vxe-table--filter-wrapper', 'filter--prevent-default', (0, _dom.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;
}
});
exports.default = _default;