vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
1,300 lines (1,298 loc) • 52.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _utils = require("../../tools/utils");
var _dom = require("../../tools/dom");
var _log = require("../../tools/log");
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _vXETable = require("../../v-x-e-table");
var _props = _interopRequireDefault(require("../../table/src/props"));
var _emits = _interopRequireDefault(require("../../table/src/emits"));
var _size = require("../../hooks/size");
var _event = require("../../tools/event");
var _vn = require("../../tools/vn");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__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);
};
var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var tableComponentPropKeys = Object.keys(_props.default);
var tableComponentMethodKeys = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'createData', 'createRow', 'revertData', 'clearData', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getData', 'getCheckboxRecords', 'getParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'isCheckedByCheckboxRow', 'isIndeterminateByCheckboxRow', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'setRadioRow', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'getPendingRecords', 'clearPendingRow', 'sort', 'clearSort', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'isActiveFilterByColumn', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'isRowExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'openTooltip', 'focus', 'blur', 'connect'];
var gridComponentEmits = __spreadArray(__spreadArray([], _emits.default, true), ['page-change', 'form-submit', 'form-submit-invalid', 'form-reset', 'form-collapse', 'form-toggle-collapse', 'proxy-query', 'proxy-delete', 'proxy-save', 'toolbar-button-click', 'toolbar-tool-click', 'zoom'], false);
var _default = (0, _vue.defineComponent)({
name: 'VxeGrid',
props: __assign(__assign({}, _props.default), {
layouts: Array,
columns: Array,
pagerConfig: Object,
proxyConfig: Object,
toolbarConfig: Object,
formConfig: Object,
zoomConfig: Object,
size: {
type: String,
default: function () {
return _conf.default.grid.size || _conf.default.size;
}
}
}),
emits: gridComponentEmits,
setup: function (props, context) {
var slots = context.slots,
emit = context.emit;
var xID = _xeUtils.default.uniqueId();
var instance = (0, _vue.getCurrentInstance)();
var computeSize = (0, _size.useSize)(props);
var reactData = (0, _vue.reactive)({
tableLoading: false,
proxyInited: false,
isZMax: false,
tableData: [],
filterData: [],
formData: {},
sortData: [],
tZindex: 0,
tablePage: {
total: 0,
pageSize: _conf.default.pager.pageSize || 10,
currentPage: 1
}
});
var refElem = (0, _vue.ref)();
var refTable = (0, _vue.ref)();
var refForm = (0, _vue.ref)();
var refToolbar = (0, _vue.ref)();
var refPager = (0, _vue.ref)();
var refFormWrapper = (0, _vue.ref)();
var refToolbarWrapper = (0, _vue.ref)();
var refTopWrapper = (0, _vue.ref)();
var refBottomWrapper = (0, _vue.ref)();
var refPagerWrapper = (0, _vue.ref)();
var extendTableMethods = function (methodKeys) {
var funcs = {};
methodKeys.forEach(function (name) {
funcs[name] = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var $xetable = refTable.value;
if ($xetable && $xetable[name]) {
return $xetable[name].apply($xetable, args);
}
};
});
return funcs;
};
var gridExtendTableMethods = extendTableMethods(tableComponentMethodKeys);
tableComponentMethodKeys.forEach(function (name) {
gridExtendTableMethods[name] = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var $xetable = refTable.value;
if ($xetable && $xetable[name]) {
return $xetable && $xetable[name].apply($xetable, args);
}
};
});
var computeProxyOpts = (0, _vue.computed)(function () {
return Object.assign({}, _conf.default.grid.proxyConfig, props.proxyConfig);
});
var computeIsMsg = (0, _vue.computed)(function () {
var proxyOpts = computeProxyOpts.value;
return proxyOpts.message !== false;
});
var computePagerOpts = (0, _vue.computed)(function () {
return Object.assign({}, _conf.default.grid.pagerConfig, props.pagerConfig);
});
var computeFormOpts = (0, _vue.computed)(function () {
return Object.assign({}, _conf.default.grid.formConfig, props.formConfig);
});
var computeToolbarOpts = (0, _vue.computed)(function () {
return Object.assign({}, _conf.default.grid.toolbarConfig, props.toolbarConfig);
});
var computeZoomOpts = (0, _vue.computed)(function () {
return Object.assign({}, _conf.default.grid.zoomConfig, props.zoomConfig);
});
var computeStyles = (0, _vue.computed)(function () {
return reactData.isZMax ? {
zIndex: reactData.tZindex
} : null;
});
var computeTableExtendProps = (0, _vue.computed)(function () {
var rest = {};
var gridProps = props;
tableComponentPropKeys.forEach(function (key) {
rest[key] = gridProps[key];
});
return rest;
});
var refMaps = {
refElem: refElem,
refTable: refTable,
refForm: refForm,
refToolbar: refToolbar,
refPager: refPager
};
var computeMaps = {
computeProxyOpts: computeProxyOpts,
computePagerOpts: computePagerOpts,
computeFormOpts: computeFormOpts,
computeToolbarOpts: computeToolbarOpts,
computeZoomOpts: computeZoomOpts
};
var $xegrid = {
xID: xID,
props: props,
context: context,
instance: instance,
reactData: reactData,
getRefMaps: function () {
return refMaps;
},
getComputeMaps: function () {
return computeMaps;
}
};
var gridMethods = {};
var computeTableProps = (0, _vue.computed)(function () {
var seqConfig = props.seqConfig,
pagerConfig = props.pagerConfig,
loading = props.loading,
editConfig = props.editConfig,
proxyConfig = props.proxyConfig;
var isZMax = reactData.isZMax,
tableLoading = reactData.tableLoading,
tablePage = reactData.tablePage,
tableData = reactData.tableData;
var tableExtendProps = computeTableExtendProps.value;
var proxyOpts = computeProxyOpts.value;
var pagerOpts = computePagerOpts.value;
var tableProps = Object.assign({}, tableExtendProps);
if (isZMax) {
if (tableExtendProps.maxHeight) {
tableProps.maxHeight = 'auto';
} else {
tableProps.height = 'auto';
}
}
if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
tableProps.loading = loading || tableLoading;
tableProps.data = tableData;
if (pagerConfig && proxyOpts.seq && (0, _utils.isEnableConf)(pagerOpts)) {
tableProps.seqConfig = Object.assign({}, seqConfig, {
startIndex: (tablePage.currentPage - 1) * tablePage.pageSize
});
}
}
if (editConfig) {
tableProps.editConfig = Object.assign({}, editConfig);
}
return tableProps;
});
var initToolbar = function () {
var toolbarOpts = computeToolbarOpts.value;
if (props.toolbarConfig && (0, _utils.isEnableConf)(toolbarOpts)) {
(0, _vue.nextTick)(function () {
var $xetable = refTable.value;
var $xetoolbar = refToolbar.value;
if ($xetable && $xetoolbar) {
$xetable.connect($xetoolbar);
}
});
}
};
var initPages = function () {
var tablePage = reactData.tablePage;
var pagerConfig = props.pagerConfig;
var pagerOpts = computePagerOpts.value;
var currentPage = pagerOpts.currentPage,
pageSize = pagerOpts.pageSize;
if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts)) {
if (currentPage) {
tablePage.currentPage = currentPage;
}
if (pageSize) {
tablePage.pageSize = pageSize;
}
}
};
var triggerPendingEvent = function (code) {
var isMsg = computeIsMsg.value;
var $xetable = refTable.value;
var selectRecords = $xetable.getCheckboxRecords();
if (selectRecords.length) {
$xetable.togglePendingRow(selectRecords);
gridExtendTableMethods.clearCheckboxRow();
} else {
if (isMsg) {
// 检测弹窗模块
if (process.env.NODE_ENV === 'development') {
if (!_vXETable.VXETable.modal) {
(0, _log.errLog)('vxe.error.reqModule', ['Modal']);
}
}
_vXETable.VXETable.modal.message({
id: code,
content: _conf.default.i18n('vxe.grid.selectOneRecord'),
status: 'warning'
});
}
}
};
var getRespMsg = function (rest, defaultMsg) {
var proxyOpts = computeProxyOpts.value;
var _a = proxyOpts.props,
proxyProps = _a === void 0 ? {} : _a;
var msg;
if (rest && proxyProps.message) {
msg = _xeUtils.default.get(rest, proxyProps.message);
}
return msg || _conf.default.i18n(defaultMsg);
};
var handleDeleteRow = function (code, alertKey, callback) {
var isMsg = computeIsMsg.value;
var selectRecords = gridExtendTableMethods.getCheckboxRecords();
if (isMsg) {
if (selectRecords.length) {
return _vXETable.VXETable.modal.confirm({
id: "cfm_".concat(code),
content: _conf.default.i18n(alertKey),
escClosable: true
}).then(function (type) {
if (type === 'confirm') {
return callback();
}
});
} else {
// 检测弹窗模块
if (process.env.NODE_ENV === 'development') {
if (!_vXETable.VXETable.modal) {
(0, _log.errLog)('vxe.error.reqModule', ['Modal']);
}
}
_vXETable.VXETable.modal.message({
id: "msg_".concat(code),
content: _conf.default.i18n('vxe.grid.selectOneRecord'),
status: 'warning'
});
}
} else {
if (selectRecords.length) {
callback();
}
}
return Promise.resolve();
};
var pageChangeEvent = function (params) {
var proxyConfig = props.proxyConfig;
var tablePage = reactData.tablePage;
var currentPage = params.currentPage,
pageSize = params.pageSize;
var proxyOpts = computeProxyOpts.value;
tablePage.currentPage = currentPage;
tablePage.pageSize = pageSize;
gridMethods.dispatchEvent('page-change', params);
if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
gridMethods.commitProxy('query').then(function (rest) {
gridMethods.dispatchEvent('proxy-query', rest, params.$event);
});
}
};
var sortChangeEvent = function (params) {
var $xetable = refTable.value;
var proxyConfig = props.proxyConfig;
var computeSortOpts = $xetable.getComputeMaps().computeSortOpts;
var proxyOpts = computeProxyOpts.value;
var sortOpts = computeSortOpts.value;
// 如果是服务端排序
if (sortOpts.remote) {
reactData.sortData = params.sortList;
if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
reactData.tablePage.currentPage = 1;
gridMethods.commitProxy('query').then(function (rest) {
gridMethods.dispatchEvent('proxy-query', rest, params.$event);
});
}
}
gridMethods.dispatchEvent('sort-change', params);
};
var filterChangeEvent = function (params) {
var $xetable = refTable.value;
var proxyConfig = props.proxyConfig;
var computeFilterOpts = $xetable.getComputeMaps().computeFilterOpts;
var proxyOpts = computeProxyOpts.value;
var filterOpts = computeFilterOpts.value;
// 如果是服务端过滤
if (filterOpts.remote) {
reactData.filterData = params.filterList;
if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
reactData.tablePage.currentPage = 1;
gridMethods.commitProxy('query').then(function (rest) {
gridMethods.dispatchEvent('proxy-query', rest, params.$event);
});
}
}
gridMethods.dispatchEvent('filter-change', params);
};
var submitFormEvent = function (params) {
var proxyConfig = props.proxyConfig;
var proxyOpts = computeProxyOpts.value;
if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
gridMethods.commitProxy('reload').then(function (rest) {
gridMethods.dispatchEvent('proxy-query', __assign(__assign({}, rest), {
isReload: true
}), params.$event);
});
}
gridMethods.dispatchEvent('form-submit', params);
};
var resetFormEvent = function (params) {
var proxyConfig = props.proxyConfig;
var proxyOpts = computeProxyOpts.value;
if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
gridMethods.commitProxy('reload').then(function (rest) {
gridMethods.dispatchEvent('proxy-query', __assign(__assign({}, rest), {
isReload: true
}), params.$event);
});
}
gridMethods.dispatchEvent('form-reset', params);
};
var submitInvalidEvent = function (params) {
gridMethods.dispatchEvent('form-submit-invalid', params);
};
var collapseEvent = function (params) {
(0, _vue.nextTick)(function () {
return gridExtendTableMethods.recalculate(true);
});
gridMethods.dispatchEvent('form-toggle-collapse', params);
gridMethods.dispatchEvent('form-collapse', params);
};
var handleZoom = function (isMax) {
var isZMax = reactData.isZMax;
if (isMax ? !isZMax : isZMax) {
reactData.isZMax = !isZMax;
if (reactData.tZindex < (0, _utils.getLastZIndex)()) {
reactData.tZindex = (0, _utils.nextZIndex)();
}
}
return (0, _vue.nextTick)().then(function () {
return gridExtendTableMethods.recalculate(true);
}).then(function () {
return reactData.isZMax;
});
};
var getFuncSlot = function (optSlots, slotKey) {
var funcSlot = optSlots[slotKey];
if (funcSlot) {
if (_xeUtils.default.isString(funcSlot)) {
if (slots[funcSlot]) {
return slots[funcSlot];
} else {
if (process.env.NODE_ENV === 'development') {
(0, _log.errLog)('vxe.error.notSlot', [funcSlot]);
}
}
} else {
return funcSlot;
}
}
return null;
};
/**
* 渲染表单
*/
var renderForms = function () {
var formConfig = props.formConfig,
proxyConfig = props.proxyConfig;
var formData = reactData.formData;
var proxyOpts = computeProxyOpts.value;
var formOpts = computeFormOpts.value;
var restVNs = [];
if (formConfig && (0, _utils.isEnableConf)(formOpts) || slots.form) {
var slotVNs = [];
if (slots.form) {
slotVNs = slots.form({
$grid: $xegrid
});
} else {
if (formOpts.items) {
var formSlots_1 = {};
if (!formOpts.inited) {
formOpts.inited = true;
var beforeItem_1 = proxyOpts.beforeItem;
if (proxyOpts && beforeItem_1) {
formOpts.items.forEach(function (item) {
beforeItem_1({
$grid: $xegrid,
item: item
});
});
}
}
// 处理插槽
formOpts.items.forEach(function (item) {
_xeUtils.default.each(item.slots, function (func) {
if (!_xeUtils.default.isFunction(func)) {
if (slots[func]) {
formSlots_1[func] = slots[func];
}
}
});
});
slotVNs.push((0, _vue.h)((0, _vue.resolveComponent)('vxe-form'), __assign(__assign({
ref: refForm
}, Object.assign({}, formOpts, {
data: proxyConfig && (0, _utils.isEnableConf)(proxyOpts) && proxyOpts.form ? formData : formOpts.data
})), {
onSubmit: submitFormEvent,
onReset: resetFormEvent,
onSubmitInvalid: submitInvalidEvent,
onCollapse: collapseEvent
}), formSlots_1));
}
}
restVNs.push((0, _vue.h)('div', {
ref: refFormWrapper,
key: 'form',
class: 'vxe-grid--form-wrapper'
}, slotVNs));
}
return restVNs;
};
/**
* 渲染工具栏
*/
var renderToolbars = function () {
var toolbarConfig = props.toolbarConfig;
var toolbarOpts = computeToolbarOpts.value;
var restVNs = [];
if (toolbarConfig && (0, _utils.isEnableConf)(toolbarOpts) || slots.toolbar) {
var slotVNs = [];
if (slots.toolbar) {
slotVNs = slots.toolbar({
$grid: $xegrid
});
} else {
var toolbarOptSlots = toolbarOpts.slots;
var buttonsSlot = void 0;
var toolsSlot = void 0;
var toolbarSlots = {};
if (toolbarOptSlots) {
buttonsSlot = getFuncSlot(toolbarOptSlots, 'buttons');
toolsSlot = getFuncSlot(toolbarOptSlots, 'tools');
if (buttonsSlot) {
toolbarSlots.buttons = buttonsSlot;
}
if (toolsSlot) {
toolbarSlots.tools = toolsSlot;
}
}
slotVNs.push((0, _vue.h)((0, _vue.resolveComponent)('vxe-toolbar'), __assign({
ref: refToolbar
}, toolbarOpts), toolbarSlots));
}
restVNs.push((0, _vue.h)('div', {
ref: refToolbarWrapper,
key: 'toolbar',
class: 'vxe-grid--toolbar-wrapper'
}, slotVNs));
}
return restVNs;
};
/**
* 渲染表格顶部区域
*/
var renderTops = function () {
if (slots.top) {
return [(0, _vue.h)('div', {
ref: refTopWrapper,
key: 'top',
class: 'vxe-grid--top-wrapper'
}, slots.top({
$grid: $xegrid
}))];
}
return [];
};
var defaultLayouts = ['Form', 'Toolbar', 'Top', 'Table', 'Bottom', 'Pager'];
var renderLayout = function () {
var layouts = props.layouts;
var vns = [];
var currLayouts = layouts && layouts.length ? layouts : _conf.default.grid.layouts || defaultLayouts;
currLayouts.forEach(function (name) {
switch (name) {
case 'Form':
vns.push(renderForms());
break;
case 'Toolbar':
vns.push(renderToolbars());
break;
case 'Top':
vns.push(renderTops());
break;
case 'Table':
vns.push(renderTables());
break;
case 'Bottom':
vns.push(renderBottoms());
break;
case 'Pager':
vns.push(renderPagers());
break;
default:
if (process.env.NODE_ENV === 'development') {
(0, _log.errLog)('vxe.error.notProp', ["layouts -> ".concat(name)]);
}
break;
}
});
return vns;
};
var tableCompEvents = {};
_emits.default.forEach(function (name) {
var type = _xeUtils.default.camelCase("on-".concat(name));
tableCompEvents[type] = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return emit.apply(void 0, __spreadArray([name], args, false));
};
});
/**
* 渲染表格
*/
var renderTables = function () {
var proxyConfig = props.proxyConfig;
var tableProps = computeTableProps.value;
var proxyOpts = computeProxyOpts.value;
var tableOns = Object.assign({}, tableCompEvents);
var emptySlot = slots.empty;
var loadingSlot = slots.loading;
if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
if (proxyOpts.sort) {
tableOns.onSortChange = sortChangeEvent;
}
if (proxyOpts.filter) {
tableOns.onFilterChange = filterChangeEvent;
}
}
var slotObj = {};
if (emptySlot) {
slotObj.empty = function () {
return emptySlot({});
};
}
if (loadingSlot) {
slotObj.loading = function () {
return loadingSlot({});
};
}
return [(0, _vue.h)((0, _vue.resolveComponent)('vxe-table'), __assign(__assign({
ref: refTable,
key: 'table'
}, tableProps), tableOns), slotObj)];
};
/**
* 渲染表格底部区域
*/
var renderBottoms = function () {
if (slots.bottom) {
return [(0, _vue.h)('div', {
ref: refBottomWrapper,
key: 'bottom',
class: 'vxe-grid--bottom-wrapper'
}, slots.bottom({
$grid: $xegrid
}))];
}
return [];
};
/**
* 渲染分页
*/
var renderPagers = function () {
var proxyConfig = props.proxyConfig,
pagerConfig = props.pagerConfig;
var proxyOpts = computeProxyOpts.value;
var pagerOpts = computePagerOpts.value;
var restVNs = [];
if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts) || slots.pager) {
var slotVNs = [];
if (slots.pager) {
slotVNs = slots.pager({
$grid: $xegrid
});
} else {
var pagerOptSlots = pagerOpts.slots;
var pagerSlots = {};
var leftSlot = void 0;
var rightSlot = void 0;
if (pagerOptSlots) {
leftSlot = getFuncSlot(pagerOptSlots, 'left');
rightSlot = getFuncSlot(pagerOptSlots, 'right');
if (leftSlot) {
pagerSlots.left = leftSlot;
}
if (rightSlot) {
pagerSlots.right = rightSlot;
}
}
slotVNs.push((0, _vue.h)((0, _vue.resolveComponent)('vxe-pager'), __assign(__assign(__assign({
ref: refPager
}, pagerOpts), proxyConfig && (0, _utils.isEnableConf)(proxyOpts) ? reactData.tablePage : {}), {
onPageChange: pageChangeEvent
}), pagerSlots));
}
restVNs.push((0, _vue.h)('div', {
ref: refPagerWrapper,
key: 'pager',
class: 'vxe-grid--pager-wrapper'
}, slotVNs));
}
return restVNs;
};
var initProxy = function () {
var proxyConfig = props.proxyConfig,
formConfig = props.formConfig;
var proxyInited = reactData.proxyInited;
var proxyOpts = computeProxyOpts.value;
var formOpts = computeFormOpts.value;
if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
if (formConfig && (0, _utils.isEnableConf)(formOpts) && proxyOpts.form && formOpts.items) {
var formData_1 = {};
formOpts.items.forEach(function (item) {
var field = item.field,
itemRender = item.itemRender;
if (field) {
var itemValue = null;
if (itemRender) {
var defaultValue = itemRender.defaultValue;
if (_xeUtils.default.isFunction(defaultValue)) {
itemValue = defaultValue({
item: item
});
} else if (!_xeUtils.default.isUndefined(defaultValue)) {
itemValue = defaultValue;
}
}
formData_1[field] = itemValue;
}
});
reactData.formData = formData_1;
}
if (!proxyInited) {
reactData.proxyInited = true;
if (proxyOpts.autoLoad !== false) {
(0, _vue.nextTick)().then(function () {
return gridMethods.commitProxy('_init');
}).then(function (rest) {
gridMethods.dispatchEvent('proxy-query', __assign(__assign({}, rest), {
isInited: true
}), new Event('init'));
});
}
}
}
};
gridMethods = {
dispatchEvent: function (type, params, evnt) {
emit(type, Object.assign({
$grid: $xegrid,
$event: evnt
}, params));
},
/**
* 提交指令，支持 code 或 button
* @param {String/Object} code 字符串或对象
*/
commitProxy: function (proxyTarget) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var toolbarConfig = props.toolbarConfig,
pagerConfig = props.pagerConfig,
editRules = props.editRules;
var tablePage = reactData.tablePage,
formData = reactData.formData;
var isMsg = computeIsMsg.value;
var proxyOpts = computeProxyOpts.value;
var pagerOpts = computePagerOpts.value;
var toolbarOpts = computeToolbarOpts.value;
var beforeQuery = proxyOpts.beforeQuery,
afterQuery = proxyOpts.afterQuery,
beforeDelete = proxyOpts.beforeDelete,
afterDelete = proxyOpts.afterDelete,
beforeSave = proxyOpts.beforeSave,
afterSave = proxyOpts.afterSave,
_a = proxyOpts.ajax,
ajax = _a === void 0 ? {} : _a,
_b = proxyOpts.props,
proxyProps = _b === void 0 ? {} : _b;
var $xetable = refTable.value;
var button = null;
var code = null;
if (_xeUtils.default.isString(proxyTarget)) {
var buttons = toolbarOpts.buttons;
var matchObj = toolbarConfig && (0, _utils.isEnableConf)(toolbarOpts) && buttons ? _xeUtils.default.findTree(buttons, function (item) {
return item.code === proxyTarget;
}, {
children: 'dropdowns'
}) : null;
button = matchObj ? matchObj.item : null;
code = proxyTarget;
} else {
button = proxyTarget;
code = button.code;
}
var btnParams = button ? button.params : null;
switch (code) {
case 'insert':
return $xetable.insert({});
case 'insert_edit':
return $xetable.insert({}).then(function (_a) {
var row = _a.row;
return $xetable.setEditRow(row);
});
// 已废弃
case 'insert_actived':
return $xetable.insert({}).then(function (_a) {
var row = _a.row;
return $xetable.setEditRow(row);
});
// 已废弃
case 'mark_cancel':
triggerPendingEvent(code);
break;
case 'remove':
return handleDeleteRow(code, 'vxe.grid.removeSelectRecord', function () {
return $xetable.removeCheckboxRow();
});
case 'import':
$xetable.importData(btnParams);
break;
case 'open_import':
$xetable.openImport(btnParams);
break;
case 'export':
$xetable.exportData(btnParams);
break;
case 'open_export':
$xetable.openExport(btnParams);
break;
case 'reset_custom':
return $xetable.resetColumn(true);
case '_init':
case 'reload':
case 'query':
{
var ajaxMethods = ajax.query;
if (ajaxMethods) {
var isInited = code === '_init';
var isReload = code === 'reload';
var sortList = [];
var filterList = [];
var pageParams = {};
if (pagerConfig) {
if (isInited || isReload) {
tablePage.currentPage = 1;
}
if ((0, _utils.isEnableConf)(pagerOpts)) {
pageParams = __assign({}, tablePage);
}
}
if (isInited) {
var computeSortOpts = $xetable.getComputeMaps().computeSortOpts;
var sortOpts = computeSortOpts.value;
var defaultSort = sortOpts.defaultSort;
// 如果使用默认排序
if (defaultSort) {
if (!_xeUtils.default.isArray(defaultSort)) {
defaultSort = [defaultSort];
}
sortList = defaultSort.map(function (item) {
return {
field: item.field,
property: item.field,
order: item.order
};
});
}
filterList = $xetable.getCheckedFilters();
} else {
if (isReload) {
$xetable.clearAll();
} else {
sortList = $xetable.getSortColumns();
filterList = $xetable.getCheckedFilters();
}
}
var commitParams = {
code: code,
button: button,
isInited: isInited,
isReload: isReload,
$grid: $xegrid,
page: pageParams,
sort: sortList.length ? sortList[0] : {},
sorts: sortList,
filters: filterList,
form: formData,
options: ajaxMethods
};
reactData.sortData = sortList;
reactData.filterData = filterList;
reactData.tableLoading = true;
var applyArgs_1 = [commitParams].concat(args);
return Promise.resolve((beforeQuery || ajaxMethods).apply(void 0, applyArgs_1)).then(function (rest) {
reactData.tableLoading = false;
if (rest) {
if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts)) {
var total = _xeUtils.default.get(rest, proxyProps.total || 'page.total') || 0;
tablePage.total = _xeUtils.default.toNumber(total);
reactData.tableData = _xeUtils.default.get(rest, proxyProps.result || 'result') || [];
// 检验当前页码，不能超出当前最大页数
var pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
if (tablePage.currentPage > pageCount) {
tablePage.currentPage = pageCount;
}
} else {
reactData.tableData = (proxyProps.list ? _xeUtils.default.get(rest, proxyProps.list) : rest) || [];
}
} else {
reactData.tableData = [];
}
if (afterQuery) {
afterQuery.apply(void 0, applyArgs_1);
}
return {
status: true
};
}).catch(function () {
reactData.tableLoading = false;
return {
status: false
};
});
} else {
if (process.env.NODE_ENV === 'development') {
(0, _log.errLog)('vxe.error.notFunc', ['proxy-config.ajax.query']);
}
}
break;
}
case 'delete':
{
var ajaxMethods_1 = ajax.delete;
if (ajaxMethods_1) {
var selectRecords_1 = gridExtendTableMethods.getCheckboxRecords();
var removeRecords_1 = selectRecords_1.filter(function (row) {
return !$xetable.isInsertByRow(row);
});
var body = {
removeRecords: removeRecords_1
};
var commitParams = {
$grid: $xegrid,
code: code,
button: button,
body: body,
form: formData,
options: ajaxMethods_1
};
var applyArgs_2 = [commitParams].concat(args);
if (selectRecords_1.length) {
return handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', function () {
if (!removeRecords_1.length) {
return $xetable.remove(selectRecords_1);
}
reactData.tableLoading = true;
return Promise.resolve((beforeDelete || ajaxMethods_1).apply(void 0, applyArgs_2)).then(function (rest) {
reactData.tableLoading = false;
$xetable.setPendingRow(removeRecords_1, false);
if (isMsg) {
// 检测弹窗模块
if (process.env.NODE_ENV === 'development') {
if (!_vXETable.VXETable.modal) {
(0, _log.errLog)('vxe.error.reqModule', ['Modal']);
}
}
_vXETable.VXETable.modal.message({
content: getRespMsg(rest, 'vxe.grid.delSuccess'),
status: 'success'
});
}
if (afterDelete) {
afterDelete.apply(void 0, applyArgs_2);
} else {
gridMethods.commitProxy('query');
}
return {
status: true
};
}).catch(function (rest) {
reactData.tableLoading = false;
if (isMsg) {
if (process.env.NODE_ENV === 'development') {
if (!_vXETable.VXETable.modal.message) {
(0, _log.errLog)('vxe.error.reqModule', ['Modal']);
}
}
_vXETable.VXETable.modal.message({
id: code,
content: getRespMsg(rest, 'vxe.grid.operError'),
status: 'error'
});
}
return {
status: false
};
});
});
} else {
if (isMsg) {
// 检测弹窗模块
if (process.env.NODE_ENV === 'development') {
if (!_vXETable.VXETable.modal) {
(0, _log.errLog)('vxe.error.reqModule', ['Modal']);
}
}
_vXETable.VXETable.modal.message({
id: code,
content: _conf.default.i18n('vxe.grid.selectOneRecord'),
status: 'warning'
});
}
}
} else {
if (process.env.NODE_ENV === 'development') {
(0, _log.errLog)('vxe.error.notFunc', ['proxy-config.ajax.delete']);
}
}
break;
}
case 'save':
{
var ajaxMethods_2 = ajax.save;
if (ajaxMethods_2) {
var body_1 = $xetable.getRecordset();
var insertRecords_1 = body_1.insertRecords,
removeRecords_2 = body_1.removeRecords,
updateRecords_1 = body_1.updateRecords,
pendingRecords_1 = body_1.pendingRecords;
var commitParams = {
$grid: $xegrid,
code: code,
button: button,
body: body_1,
form: formData,
options: ajaxMethods_2
};
var applyArgs_3 = [commitParams].concat(args);
// 排除掉新增且标记为删除的数据
if (insertRecords_1.length) {
body_1.pendingRecords = pendingRecords_1.filter(function (row) {
return $xetable.findRowIndexOf(insertRecords_1, row) === -1;
});
}
// 排除已标记为删除的数据
if (pendingRecords_1.length) {
body_1.insertRecords = insertRecords_1.filter(function (row) {
return $xetable.findRowIndexOf(pendingRecords_1, row) === -1;
});
}
var restPromise = Promise.resolve();
if (editRules) {
// 只校验新增和修改的数据
restPromise = $xetable.validate(body_1.insertRecords.concat(updateRecords_1));
}
return restPromise.then(function (errMap) {
if (errMap) {
// 如果校验不通过
return;
}
if (body_1.insertRecords.length || removeRecords_2.length || updateRecords_1.length || body_1.pendingRecords.length) {
reactData.tableLoading = true;
return Promise.resolve((beforeSave || ajaxMethods_2).apply(void 0, applyArgs_3)).then(function (rest) {
reactData.tableLoading = false;
$xetable.clearPendingRow();
if (isMsg) {
// 检测弹窗模块
if (process.env.NODE_ENV === 'development') {
if (!_vXETable.VXETable.modal) {
(0, _log.errLog)('vxe.error.reqModule', ['Modal']);
}
}
_vXETable.VXETable.modal.message({
content: getRespMsg(rest, 'vxe.grid.saveSuccess'),
status: 'success'
});
}
if (afterSave) {
afterSave.apply(void 0, applyArgs_3);
} else {
gridMethods.commitProxy('query');
}
return {
status: true
};
}).catch(function (rest) {
reactData.tableLoading = false;
if (isMsg) {
// 检测弹窗模块
if (process.env.NODE_ENV === 'development') {
if (!_vXETable.VXETable.modal) {
(0, _log.errLog)('vxe.error.reqModule', ['Modal']);
}
}
_vXETable.VXETable.modal.message({
id: code,
content: getRespMsg(rest, 'vxe.grid.operError'),
status: 'error'
});
}
return {
status: false
};
});
} else {
if (isMsg) {
// 检测弹窗模块
if (process.env.NODE_ENV === 'development') {
if (!_vXETable.VXETable.modal) {
(0, _log.errLog)('vxe.error.reqModule', ['Modal']);
}
}
_vXETable.VXETable.modal.message({
id: code,
content: _conf.default.i18n('vxe.grid.dataUnchanged'),
status: 'info'
});
}
}
});
} else {
if (process.env.NODE_ENV === 'development') {
(0, _log.errLog)('vxe.error.notFunc', ['proxy-config.ajax.save']);
}
}
break;
}
default:
{
var gCommandOpts = _vXETable.VXETable.commands.get(code);
if (gCommandOpts) {
if (gCommandOpts.commandMethod) {
gCommandOpts.commandMethod.apply(gCommandOpts, __spreadArray([{
code: code,
button: button,
$grid: $xegrid,
$table: $xetable
}], args, false));
} else {
if (process.env.NODE_ENV === 'development') {
(0, _log.errLog)('vxe.error.notCommands', [code]);
}
}
}
}
}
return (0, _vue.nextTick)();
},
zoom: function () {
if (reactData.isZMax) {
return gridMethods.revert();
}
return gridMethods.maximize();
},
isMaximized: function () {
return reactData.isZMax;
},
maximize: function () {
return handleZoom(true);
},
revert: function () {
return handleZoom();
},
getFormItems: function (itemIndex) {
var formOpts = computeFormOpts.value;
var formConfig = props.formConfig;
var items = formOpts.items;
var itemList = [];
_xeUtils.default.eachTree(formConfig && (0, _utils.isEnableConf)(formOpts) && items ? items : [], function (item) {
itemList.push(item);
}, {
children: 'children'
});
return _xeUtils.default.isUndefined(itemIndex) ? itemList : itemList[itemIndex];
},
getProxyInfo: function () {
var $xetable = refTable.value;
if (props.proxyConfig) {
var sortData = reactData.sortData;
return {
data: reactData.tableData,
filter: reactData.filterData,
form: reactData.formData,
sort: sortData.length ? sortData[0] : {},
sorts: sortData,
pager: reactData.tablePage,
pendingRecords: $xetable ? $xetable.getPendingRecords() : []
};
}
return null;
}
// setProxyInfo (options) {
// if (props.proxyConfig && options) {
// const { pager, form } = options
// const proxyOpts = computeProxyOpts.value
// if (pager) {
// if (pager.currentPage) {
// reactData.tablePage.currentPage = Number(pager.currentPage)
// }
// if (pager.pageSize) {
// reactData.tablePage.pageSize = Number(pager.pageSize)
// }
// }
// if (proxyOpts.form && form) {
// Object.assign(reactData.formData, form)
// }
// }
// return nextTick()
// }
};
// 检查插槽
if (process.env.NODE_ENV === 'development') {
gridMethods.loadColumn = function (columns) {
var $xetable = refTable.value;
_xeUtils.default.eachTree(columns, function (column) {
if (column.slots) {
_xeUtils.default.each(column.slots, function (func) {
if (!_xeUtils.default.isFunction(func)) {
if (!slots[func]) {
(0, _log.errLog)('vxe.error.notSlot', [func]);
}
}
});
}
});
return $xetable.loadColumn(columns);
};
gridMethods.reloadColumn = function (columns) {
gridExtendTableMethods.clearAll();
return gridMethods.loadColumn(columns);
};
}
var gridPrivateMethods = {
extendTableMethods: extendTableMethods,
callSlot: function (slotFunc, params) {
if (slotFunc) {
if (_xeUtils.default.isString(slotFunc)) {
slotFunc = slots[slotFunc] || null;
}
if (_xeUtils.default.isFunction(slotFunc)) {
return (0, _vn.getSlotVNs)(slotFunc(params));
}
}
return [];
},
/**
* 获取需要排除的高度
*/
getExcludeHeight: function () {
var height = props.height;
var isZMax = reactData.isZMax;
var el = refElem.value;
var formWrapper = refFormWrapper.value;
var toolbarWrapper = refToolbarWrapper.value;
var topWrapper = refTopWrapper.value;
var bottomWrapper = refBottomWrapper.value;
var pagerWrapper = refPagerWrapper.value;
var parentPaddingSize = isZMax || height !== 'auto' ? 0 : (0, _dom.getPaddingTopBottomSize)(el.parentNode);
return parentPaddingSize + (0, _dom.getPaddingTopBottomSize)(el) + (0, _dom.getOffsetHeight)(formWrapper) + (0, _dom.getOffsetHeight)(toolbarWrapper) + (0, _dom.getOffsetHeight)(topWrapper) + (0, _dom.getOffsetHeight)(bottomWrapper) + (0, _dom.getOffsetHeight)(pagerWrapper);
},
getParentHeight: function () {
var el = refElem.value;
if (el) {
return (reactData.isZMax ? (0, _dom.getDomNode)().visibleHeight : _xeUtils.default.toNumber(getComputedStyle(el.parentNode).height)) - gridPrivateMethods.getExcludeHeight();
}
return 0;
},
triggerToolbarCommitEvent: function (params, evnt) {
var code = params.code;
return gridMethods.commitProxy(params, evnt).then(function (rest) {
if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
gridMethods.dispatchEvent(code === 'delete' || code === 'save' ? "proxy-".concat(code) : 'proxy-query', __assign(__assign({}, rest), {
isReload: code === 'reload'
}), evnt);
}
});
},
triggerToolbarBtnEvent: function (button, evnt) {
gridPrivateMethods.triggerToolbarCommitEvent(button, evnt);
gridMethods.dispatchEvent('toolbar-button-click', {
code: button.code,
button: button
}, evnt);
},
triggerToolbarTolEvent: function (tool, evnt) {
gridPrivateMethods.triggerToolbarCommitEvent(tool, evnt);
gridMethods.dispatchEvent('toolbar-tool-click', {
code: tool.code,
tool: tool,
$event: evnt
});
},
triggerZoomEvent: function (evnt) {
gridMethods.zoom();
gridMethods.dispatchEvent('zoom', {
type: reactData.isZMax ? 'max' : 'revert'
}, evnt);
}
};
Object.assign($xegrid, gridExtendTableMethods, gridMethods, gridPrivateMethods);
var columnFlag = (0, _vue.ref)(0);
(0, _vue.watch)(function () {
return props.columns ? props.columns.length : -1;
}, function () {
columnFlag.value++;
});
(0, _vue.watch)(function () {
return props.columns;
}, function () {
columnFlag.value++;
});
(0, _vue.watch)(columnFlag, function () {
(0, _vue.nextTick)(function () {
return $xegrid.loadColumn(props.columns || []);
});
});
(0, _vue.watch)(function () {
return props.toolbarConfig;
}, function () {
initToolbar();
});