vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
293 lines (292 loc) • 15.3 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { nextTick } from 'vue';
import XEUtils from 'xe-utils';
import { VXETable } from '../../v-x-e-table';
import { toFilters, handleFieldOrColumn } from '../../table/src/util';
import { getDomNode, triggerEvent } from '../../tools/dom';
var tableFilterMethodKeys = ['setFilter', 'clearFilter', 'getCheckedFilters'];
var tableFilterHook = {
setupTable: function ($xetable) {
var props = $xetable.props, reactData = $xetable.reactData, internalData = $xetable.internalData;
var _a = $xetable.getRefMaps(), refTableBody = _a.refTableBody, refTableFilter = _a.refTableFilter;
var _b = $xetable.getComputeMaps(), computeFilterOpts = _b.computeFilterOpts, computeMouseOpts = _b.computeMouseOpts;
var filterPrivateMethods = {
checkFilterOptions: function () {
var filterStore = reactData.filterStore;
filterStore.isAllSelected = filterStore.options.every(function (item) { return item._checked; });
filterStore.isIndeterminate = !filterStore.isAllSelected && filterStore.options.some(function (item) { return item._checked; });
},
/**
* 点击筛选事件
* 当筛选图标被点击时触发
* 更新选项是否全部状态
* 打开筛选面板
* @param {Event} evnt 事件
* @param {ColumnInfo} column 列配置
* @param {Object} params 参数
*/
triggerFilterEvent: function (evnt, column, params) {
var initStore = reactData.initStore, filterStore = reactData.filterStore;
if (filterStore.column === column && filterStore.visible) {
filterStore.visible = false;
}
else {
var targetElem_1 = evnt.target, pageX_1 = evnt.pageX;
var visibleWidth_1 = getDomNode().visibleWidth;
var filters = column.filters, filterMultiple = column.filterMultiple, filterRender = column.filterRender;
var compConf = filterRender ? VXETable.renderer.get(filterRender.name) : null;
var filterRecoverMethod_1 = column.filterRecoverMethod || (compConf ? compConf.filterRecoverMethod : null);
internalData._currFilterParams = params;
Object.assign(filterStore, {
multiple: filterMultiple,
options: filters,
column: column,
style: null
});
// 复原状态
filterStore.options.forEach(function (option) {
var _checked = option._checked, checked = option.checked;
option._checked = checked;
if (!checked && _checked !== checked) {
if (filterRecoverMethod_1) {
filterRecoverMethod_1({ option: option, column: column, $table: $xetable });
}
}
});
this.checkFilterOptions();
filterStore.visible = true;
initStore.filter = true;
nextTick(function () {
var tableBody = refTableBody.value;
var bodyElem = tableBody.$el;
var tableFilter = refTableFilter.value;
var filterWrapperElem = tableFilter ? tableFilter.$el : null;
var filterWidth = 0;
var filterHeight = 0;
var filterHeadElem = null;
var filterFootElem = null;
if (filterWrapperElem) {
filterWidth = filterWrapperElem.offsetWidth;
filterHeight = filterWrapperElem.offsetHeight;
filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
}
var centerWidth = filterWidth / 2;
var minMargin = 10;
var maxLeft = bodyElem.clientWidth - filterWidth - minMargin;
var left, right;
var style = {
top: "".concat(targetElem_1.offsetTop + targetElem_1.offsetParent.offsetTop + targetElem_1.offsetHeight + 8, "px")
};
// 判断面板不能大于表格高度
var maxHeight = null;
if (filterHeight >= bodyElem.clientHeight) {
maxHeight = Math.max(60, bodyElem.clientHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0));
}
if (column.fixed === 'left') {
left = targetElem_1.offsetLeft + targetElem_1.offsetParent.offsetLeft - centerWidth;
}
else if (column.fixed === 'right') {
right = (targetElem_1.offsetParent.offsetWidth - targetElem_1.offsetLeft) + (targetElem_1.offsetParent.offsetParent.offsetWidth - targetElem_1.offsetParent.offsetLeft) - column.renderWidth - centerWidth;
}
else {
left = targetElem_1.offsetLeft + targetElem_1.offsetParent.offsetLeft - centerWidth - bodyElem.scrollLeft;
}
if (left) {
var overflowWidth = (pageX_1 + filterWidth - centerWidth + minMargin) - visibleWidth_1;
if (overflowWidth > 0) {
left -= overflowWidth;
}
style.left = "".concat(Math.min(maxLeft, Math.max(minMargin, left)), "px");
}
else if (right) {
var overflowWidth = (pageX_1 + filterWidth - centerWidth + minMargin) - visibleWidth_1;
if (overflowWidth > 0) {
right += overflowWidth;
}
style.right = "".concat(Math.max(minMargin, right), "px");
}
filterStore.style = style;
filterStore.maxHeight = maxHeight;
});
}
$xetable.dispatchEvent('filter-visible', { column: column, field: column.field, property: column.field, filterList: $xetable.getCheckedFilters(), visible: filterStore.visible }, evnt);
},
handleClearFilter: function (column) {
if (column) {
var filters = column.filters, filterRender = column.filterRender;
if (filters) {
var compConf = filterRender ? VXETable.renderer.get(filterRender.name) : null;
var filterResetMethod_1 = column.filterResetMethod || (compConf ? compConf.filterResetMethod : null);
filters.forEach(function (item) {
item._checked = false;
item.checked = false;
if (!filterResetMethod_1) {
item.data = XEUtils.clone(item.resetValue, true);
}
});
if (filterResetMethod_1) {
filterResetMethod_1({ options: filters, column: column, $table: $xetable });
}
}
}
},
/**
* 确认筛选
* 当筛选面板中的确定按钮被按下时触发
* @param {Event} evnt 事件
*/
confirmFilterEvent: function (evnt) {
var mouseConfig = props.mouseConfig;
var filterStore = reactData.filterStore, oldScrollXLoad = reactData.scrollXLoad, oldScrollYLoad = reactData.scrollYLoad;
var filterOpts = computeFilterOpts.value;
var mouseOpts = computeMouseOpts.value;
var column = filterStore.column;
var field = column.field;
var values = [];
var datas = [];
column.filters.forEach(function (item) {
if (item.checked) {
values.push(item.value);
datas.push(item.data);
}
});
var filterList = $xetable.getCheckedFilters();
var params = { $table: $xetable, $event: evnt, column: column, field: field, property: field, values: values, datas: datas, filters: filterList, filterList: filterList };
// 如果是服务端筛选，则跳过本地筛选处理
if (!filterOpts.remote) {
$xetable.handleTableData(true);
$xetable.checkSelectionStatus();
}
if (mouseConfig && mouseOpts.area && $xetable.handleFilterEvent) {
$xetable.handleFilterEvent(evnt, params);
}
$xetable.dispatchEvent('filter-change', params, evnt);
$xetable.closeFilter();
$xetable.updateFooter().then(function () {
var scrollXLoad = reactData.scrollXLoad, scrollYLoad = reactData.scrollYLoad;
if ((oldScrollXLoad || scrollXLoad) || (oldScrollYLoad || scrollYLoad)) {
if (oldScrollXLoad || scrollXLoad) {
$xetable.updateScrollXSpace();
}
if (oldScrollYLoad || scrollYLoad) {
$xetable.updateScrollYSpace();
}
return $xetable.refreshScroll();
}
}).then(function () {
$xetable.updateCellAreas();
return $xetable.recalculate(true);
}).then(function () {
// 存在滚动行为未结束情况
setTimeout(function () { return $xetable.recalculate(); }, 50);
});
}
};
var filterMethods = {
/**
* 手动弹出筛选面板
* @param column
*/
openFilter: function (fieldOrColumn) {
var column = handleFieldOrColumn($xetable, fieldOrColumn);
if (column && column.filters) {
var elemStore_1 = internalData.elemStore;
var fixed_1 = column.fixed;
return $xetable.scrollToColumn(column).then(function () {
var headerWrapperRef = elemStore_1["".concat(fixed_1 || 'main', "-header-wrapper")] || elemStore_1['main-header-wrapper'];
var headerWrapperElem = headerWrapperRef ? headerWrapperRef.value : null;
if (headerWrapperElem) {
var filterBtnElem = headerWrapperElem.querySelector(".vxe-header--column.".concat(column.id, " .vxe-filter--btn"));
triggerEvent(filterBtnElem, 'click');
}
});
}
return nextTick();
},
/**
* 修改筛选条件列表
* @param {ColumnInfo} fieldOrColumn 列或字段名
* @param {Array} options 选项
*/
setFilter: function (fieldOrColumn, options) {
var column = handleFieldOrColumn($xetable, fieldOrColumn);
if (column && column.filters) {
column.filters = toFilters(options || []);
}
return nextTick();
},
/**
* 清空指定列的筛选条件
* 如果为空则清空所有列的筛选条件
* @param {String} fieldOrColumn 列或字段名
*/
clearFilter: function (fieldOrColumn) {
var filterStore = reactData.filterStore;
var tableFullColumn = internalData.tableFullColumn;
var filterOpts = computeFilterOpts.value;
var column;
if (fieldOrColumn) {
column = handleFieldOrColumn($xetable, fieldOrColumn);
if (column) {
filterPrivateMethods.handleClearFilter(column);
}
}
else {
tableFullColumn.forEach(filterPrivateMethods.handleClearFilter);
}
if (!fieldOrColumn || column !== filterStore.column) {
Object.assign(filterStore, {
isAllSelected: false,
isIndeterminate: false,
style: null,
options: [],
column: null,
multiple: false,
visible: false
});
}
if (!filterOpts.remote) {
return $xetable.updateData();
}
return nextTick();
},
getCheckedFilters: function () {
var tableFullColumn = internalData.tableFullColumn;
var filterList = [];
tableFullColumn.forEach(function (column) {
var field = column.field, filters = column.filters;
var valueList = [];
var dataList = [];
if (filters && filters.length) {
filters.forEach(function (item) {
if (item.checked) {
valueList.push(item.value);
dataList.push(item.data);
}
});
if (valueList.length) {
filterList.push({ column: column, field: field, property: field, values: valueList, datas: dataList });
}
}
});
return filterList;
}
};
return __assign(__assign({}, filterMethods), filterPrivateMethods);
},
setupGrid: function ($xegrid) {
return $xegrid.extendTableMethods(tableFilterMethodKeys);
}
};
export default tableFilterHook;