vxe-table 3.8.24 → 3.9.0-rc.0

package/es/grid/src/grid.js

@@ -0,0 +1,1100 @@
+import XEUtils from 'xe-utils';
+import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
+import { getOffsetHeight, getPaddingTopBottomSize, getDomNode } from '../../ui/src/dom';
+import { VxeUI } from '../../ui';
+import VxeTableComponent from '../../table/src/table';
+import VxeToolbarComponent from '../../toolbar/src/toolbar';
+import tableComponentProps from '../../table/src/props';
+import { getSlotVNs } from '../../ui/src/vn';
+import { warnLog, errLog } from '../../ui/src/log';
+const { getConfig, getI18n, commands, globalEvents, globalMixins } = VxeUI;
+const methods = {};
+const propKeys = Object.keys(tableComponentProps);
+function renderDefaultForm(h, _vm) {
+    const { $scopedSlots, proxyConfig, proxyOpts, formData, formConfig, formOpts } = _vm;
+    if (isEnableConf(formConfig) && formOpts.items && formOpts.items.length) {
+        const formSlots = {};
+        if (!formOpts.inited) {
+            formOpts.inited = true;
+            const beforeItem = proxyOpts.beforeItem;
+            if (proxyOpts && beforeItem) {
+                formOpts.items.forEach((item) => {
+                    beforeItem.call(_vm, { $grid: _vm, item });
+                });
+            }
+        }
+        // 处理插槽
+        formOpts.items.forEach((item) => {
+            XEUtils.each(item.slots, (func) => {
+                if (!XEUtils.isFunction(func)) {
+                    if ($scopedSlots[func]) {
+                        formSlots[func] = $scopedSlots[func];
+                    }
+                }
+            });
+        });
+        return [
+            h('vxe-form', {
+                props: Object.assign({}, formOpts, {
+                    data: proxyConfig && proxyOpts.form ? formData : formOpts.data
+                }),
+                on: {
+                    submit: _vm.submitEvent,
+                    reset: _vm.resetEvent,
+                    collapse: _vm.collapseEvent,
+                    'submit-invalid': _vm.submitInvalidEvent
+                },
+                scopedSlots: formSlots
+            })
+        ];
+    }
+    return [];
+}
+function getFuncSlot(_vm, optSlots, slotKey) {
+    const { $scopedSlots } = _vm;
+    const funcSlot = optSlots[slotKey];
+    if (funcSlot) {
+        if (XEUtils.isString(funcSlot)) {
+            if ($scopedSlots[funcSlot]) {
+                return $scopedSlots[funcSlot];
+            }
+            else {
+                if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                    errLog('vxe.error.notSlot', [funcSlot]);
+                }
+            }
+        }
+        else {
+            return funcSlot;
+        }
+    }
+    return null;
+}
+function getToolbarSlots(_vm) {
+    const { $scopedSlots, toolbarOpts } = _vm;
+    const toolbarOptSlots = toolbarOpts.slots;
+    let buttonsSlot;
+    let toolsSlot;
+    const slots = {};
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        if ($scopedSlots.buttons && (!toolbarOptSlots || toolbarOptSlots.buttons !== 'buttons')) {
+            warnLog('vxe.error.reqProp', ['toolbar-config.slots.buttons']);
+        }
+        if ($scopedSlots.tools && (!toolbarOptSlots || toolbarOptSlots.tools !== 'tools')) {
+            warnLog('vxe.error.reqProp', ['toolbar-config.slots.tools']);
+        }
+    }
+    if (toolbarOptSlots) {
+        buttonsSlot = getFuncSlot(_vm, toolbarOptSlots, 'buttons');
+        toolsSlot = getFuncSlot(_vm, toolbarOptSlots, 'tools');
+        if (buttonsSlot) {
+            slots.buttons = buttonsSlot;
+        }
+        if (toolsSlot) {
+            slots.tools = toolsSlot;
+        }
+    }
+    return slots;
+}
+function getPagerSlots(_vm) {
+    const { pagerOpts } = _vm;
+    const pagerOptSlots = pagerOpts.slots;
+    const slots = {};
+    let leftSlot;
+    let rightSlot;
+    if (pagerOptSlots) {
+        leftSlot = getFuncSlot(_vm, pagerOptSlots, 'left');
+        rightSlot = getFuncSlot(_vm, pagerOptSlots, 'right');
+        if (leftSlot) {
+            slots.left = leftSlot;
+        }
+        if (rightSlot) {
+            slots.right = rightSlot;
+        }
+    }
+    return slots;
+}
+function getTableOns(_vm) {
+    const { $listeners, proxyConfig, proxyOpts } = _vm;
+    const ons = {};
+    XEUtils.each($listeners, (cb, type) => {
+        ons[type] = (...args) => {
+            _vm.$emit(type, ...args);
+        };
+    });
+    if (proxyConfig) {
+        if (proxyOpts.sort) {
+            ons['sort-change'] = _vm.sortChangeEvent;
+        }
+        if (proxyOpts.filter) {
+            ons['filter-change'] = _vm.filterChangeEvent;
+        }
+    }
+    return ons;
+}
+/**
+ * 渲染表单
+ */
+function renderForm(h, _vm) {
+    const { _e, $scopedSlots, formConfig } = _vm;
+    const formSlot = $scopedSlots.form;
+    const hasForm = !!(formSlot || isEnableConf(formConfig));
+    if (hasForm) {
+        return h('div', {
+            key: 'form',
+            ref: 'formWrapper',
+            class: 'vxe-grid--form-wrapper'
+        }, formSlot ? formSlot.call(_vm, { $grid: _vm }, h) : renderDefaultForm(h, _vm));
+    }
+    return _e();
+}
+/**
+ * 渲染工具栏
+ */
+function renderToolbar(h, _vm) {
+    const { _e, $scopedSlots, toolbarConfig, toolbar } = _vm;
+    const toolbarSlot = $scopedSlots.toolbar;
+    const hasToolbar = !!(toolbarSlot || isEnableConf(toolbarConfig) || toolbar);
+    if (hasToolbar) {
+        return h('div', {
+            key: 'toolbar',
+            ref: 'toolbarWrapper',
+            class: 'vxe-grid--toolbar-wrapper'
+        }, toolbarSlot
+            ? toolbarSlot.call(_vm, { $grid: _vm }, h)
+            : [
+                h(VxeToolbarComponent, {
+                    props: _vm.toolbarOpts,
+                    ref: 'xToolbar',
+                    scopedSlots: getToolbarSlots(_vm)
+                })
+            ]);
+    }
+    return _e();
+}
+/**
+ * 渲染表格顶部区域
+ */
+function renderTop(h, _vm) {
+    const { _e, $scopedSlots } = _vm;
+    const topSlot = $scopedSlots.top;
+    return topSlot
+        ? h('div', {
+            key: 'top',
+            ref: 'topWrapper',
+            class: 'vxe-grid--top-wrapper'
+        }, topSlot.call(_vm, { $grid: _vm }, h))
+        : _e();
+}
+function renderTableLeft(h, _vm) {
+    const { _e, $scopedSlots } = _vm;
+    const leftSlot = $scopedSlots.left;
+    if (leftSlot) {
+        return h('div', {
+            class: 'vxe-grid--left-wrapper'
+        }, leftSlot({ $grid: _vm }));
+    }
+    return _e();
+}
+function renderTableRight(h, _vm) {
+    const { _e, $scopedSlots } = _vm;
+    const rightSlot = $scopedSlots.right;
+    if (rightSlot) {
+        return h('div', {
+            class: 'vxe-grid--right-wrapper'
+        }, rightSlot({ $grid: _vm }));
+    }
+    return _e();
+}
+/**
+ * 渲染表格
+ */
+function renderTable(h, _vm) {
+    const { $scopedSlots, tableProps } = _vm;
+    return h('div', {
+        class: 'vxe-grid--table-wrapper'
+    }, [
+        h('vxe-table', {
+            key: 'table',
+            props: tableProps,
+            on: getTableOns(_vm),
+            scopedSlots: $scopedSlots,
+            ref: 'xTable'
+        })
+    ]);
+}
+/**
+ * 渲染表格底部区域
+ */
+function renderBottom(h, _vm) {
+    const { _e, $scopedSlots } = _vm;
+    const bottomSlot = $scopedSlots.bottom;
+    return bottomSlot
+        ? h('div', {
+            key: 'bottom',
+            ref: 'bottomWrapper',
+            class: 'vxe-grid--bottom-wrapper'
+        }, bottomSlot.call(_vm, { $grid: _vm }, h))
+        : _e();
+}
+/**
+ * 渲染分页
+ */
+function renderPager(h, _vm) {
+    const { _e, $scopedSlots, pagerConfig, proxyConfig, tablePage } = _vm;
+    const pagerSlot = $scopedSlots.pager;
+    const hasPager = !!(pagerSlot || isEnableConf(pagerConfig));
+    if (hasPager) {
+        return h('div', {
+            key: 'pager',
+            ref: 'pagerWrapper',
+            class: 'vxe-grid--pager-wrapper'
+        }, pagerSlot
+            ? pagerSlot.call(_vm, { $grid: _vm }, h)
+            : [
+                h('vxe-pager', {
+                    props: Object.assign(Object.assign({}, _vm.pagerOpts), (proxyConfig ? tablePage : {})),
+                    on: {
+                        'page-change': _vm.pageChangeEvent
+                    },
+                    scopedSlots: getPagerSlots(_vm)
+                })
+            ]);
+    }
+    return _e();
+}
+const defaultLayouts = ['Form', 'Toolbar', 'Top', 'Table', 'Bottom', 'Pager'];
+function renderLayout(h, _vm) {
+    const { layouts } = _vm;
+    const vns = [];
+    const currLayouts = (layouts && layouts.length ? layouts : (getConfig().grid.layouts || defaultLayouts));
+    currLayouts.forEach((name) => {
+        switch (name) {
+            case 'Form':
+                vns.push(renderForm(h, _vm));
+                break;
+            case 'Toolbar':
+                vns.push(renderToolbar(h, _vm));
+                break;
+            case 'Top':
+                vns.push(renderTop(h, _vm));
+                break;
+            case 'Table':
+                vns.push(h('div', {
+                    key: 'table',
+                    class: 'vxe-grid--table-container'
+                }, [
+                    renderTableLeft(h, _vm),
+                    renderTable(h, _vm),
+                    renderTableRight(h, _vm)
+                ]));
+                break;
+            case 'Bottom':
+                vns.push(renderBottom(h, _vm));
+                break;
+            case 'Pager':
+                vns.push(renderPager(h, _vm));
+                break;
+            default:
+                if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                    errLog('vxe.error.notProp', [`layouts -> ${name}`]);
+                }
+                break;
+        }
+    });
+    return vns;
+}
+Object.keys(VxeTableComponent.methods).forEach((name) => {
+    methods[name] = function (...args) {
+        return this.$refs.xTable && this.$refs.xTable[name](...args);
+    };
+});
+export default {
+    name: 'VxeGrid',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: Object.assign(Object.assign({}, tableComponentProps), { layouts: Array, columns: Array, pagerConfig: [Boolean, Object], proxyConfig: Object, toolbar: [Boolean, Object], toolbarConfig: [Boolean, Object], formConfig: [Boolean, Object], zoomConfig: Object, size: { type: String, default: () => getConfig().grid.size || getConfig().size } }),
+    provide() {
+        return {
+            $xeGrid: this,
+            $xegrid: this
+        };
+    },
+    data() {
+        return {
+            tableLoading: false,
+            isZMax: false,
+            tableData: [],
+            filterData: [],
+            formData: {},
+            sortData: [],
+            tZindex: 0,
+            tablePage: {
+                total: 0,
+                pageSize: getConfig().pager.pageSize || 10,
+                currentPage: 1
+            }
+        };
+    },
+    computed: {
+        isRespMsg() {
+            const { proxyOpts } = this;
+            return XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg;
+        },
+        isActiveMsg() {
+            return this.proxyOpts.showActiveMsg;
+        },
+        proxyOpts() {
+            return XEUtils.merge({}, getConfig().grid.proxyConfig, this.proxyConfig);
+        },
+        pagerOpts() {
+            return Object.assign({}, getConfig().grid.pagerConfig, this.pagerConfig);
+        },
+        formOpts() {
+            return Object.assign({}, getConfig().grid.formConfig, this.formConfig);
+        },
+        toolbarOpts() {
+            return Object.assign({}, getConfig().grid.toolbarConfig, this.toolbarConfig || this.toolbar);
+        },
+        zoomOpts() {
+            return Object.assign({}, getConfig().grid.zoomConfig, this.zoomConfig);
+        },
+        renderStyle() {
+            return this.isZMax ? { zIndex: this.tZindex } : null;
+        },
+        tableExtendProps() {
+            const rest = {};
+            propKeys.forEach(key => {
+                rest[key] = this[key];
+            });
+            return rest;
+        },
+        tableProps() {
+            const { isZMax, seqConfig, pagerConfig, loading, editConfig, proxyConfig, proxyOpts, tableExtendProps, tableLoading, tablePage, tableData } = this;
+            const tableProps = Object.assign({}, tableExtendProps);
+            if (isZMax) {
+                if (tableExtendProps.maxHeight) {
+                    tableProps.maxHeight = '100%';
+                }
+                else {
+                    tableProps.height = '100%';
+                }
+            }
+            if (proxyConfig) {
+                tableProps.loading = loading || tableLoading;
+                tableProps.data = tableData;
+                if (proxyOpts.seq && isEnableConf(pagerConfig)) {
+                    tableProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
+                }
+            }
+            if (editConfig) {
+                tableProps.editConfig = Object.assign({}, editConfig);
+            }
+            return tableProps;
+        }
+    },
+    watch: {
+        columns(value) {
+            this.$nextTick(() => this.loadColumn(value));
+        },
+        toolbar(value) {
+            if (value) {
+                this.initToolbar();
+            }
+        },
+        toolbarConfig(value) {
+            if (value) {
+                this.initToolbar();
+            }
+        },
+        proxyConfig() {
+            this.initProxy();
+        },
+        pagerConfig() {
+            this.initPages();
+        }
+    },
+    created() {
+        // const { data, formOpts, proxyOpts, proxyConfig } = this
+        // if (proxyConfig && (data || (proxyOpts.form && formOpts.data))) {
+        //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
+        // }
+        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+            if (this.toolbar) {
+                warnLog('vxe.error.delProp', ['grid.toolbar', 'grid.toolbar-config']);
+            }
+            if (this.toolbarConfig && !XEUtils.isObject(this.toolbarConfig)) {
+                warnLog('vxe.error.errProp', [`grid.toolbar-config=${this.toolbarConfig}`, 'grid.toolbar-config={}']);
+            }
+            // if (proxyOpts.props) {
+            //   warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
+            // }
+        }
+        this.initPages();
+        globalEvents.on(this, 'keydown', this.handleGlobalKeydownEvent);
+    },
+    mounted() {
+        if (this.columns && this.columns.length) {
+            this.loadColumn(this.columns);
+        }
+        this.initToolbar();
+        this.initProxy();
+    },
+    destroyed() {
+        globalEvents.off(this, 'keydown');
+    },
+    render(h) {
+        const { vSize, isZMax } = this;
+        return h('div', {
+            class: ['vxe-grid', {
+                    [`size--${vSize}`]: vSize,
+                    'is--animat': !!this.animat,
+                    'is--round': this.round,
+                    'is--maximize': isZMax,
+                    'is--loading': this.loading || this.tableLoading
+                }],
+            style: this.renderStyle
+        }, renderLayout(h, this));
+    },
+    methods: Object.assign(Object.assign(Object.assign({}, methods), { callSlot(slotFunc, params, h, vNodes) {
+            if (slotFunc) {
+                const { $scopedSlots } = this;
+                if (XEUtils.isString(slotFunc)) {
+                    slotFunc = $scopedSlots[slotFunc] || null;
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc.call(this, params, h, vNodes));
+                }
+            }
+            return [];
+        },
+        getParentHeight() {
+            const { $el, isZMax } = this;
+            return (isZMax ? getDomNode().visibleHeight : XEUtils.toNumber(getComputedStyle($el.parentNode).height)) - this.getExcludeHeight();
+        },
+        /**
+         * 获取需要排除的高度
+         */
+        getExcludeHeight() {
+            const { $refs, $el, isZMax, height } = this;
+            const { formWrapper, toolbarWrapper, topWrapper, bottomWrapper, pagerWrapper } = $refs;
+            const parentPaddingSize = isZMax || !(height === 'auto' || height === '100%') ? 0 : getPaddingTopBottomSize($el.parentNode);
+            return parentPaddingSize + getPaddingTopBottomSize($el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper);
+        },
+        initToolbar() {
+            this.$nextTick(() => {
+                const { xTable, xToolbar } = this.$refs;
+                if (xTable && xToolbar) {
+                    xTable.connect(xToolbar);
+                }
+            });
+        },
+        initPages() {
+            const { tablePage, pagerConfig, pagerOpts } = this;
+            const { currentPage, pageSize } = pagerOpts;
+            if (pagerConfig) {
+                if (currentPage) {
+                    tablePage.currentPage = currentPage;
+                }
+                if (pageSize) {
+                    tablePage.pageSize = pageSize;
+                }
+            }
+        },
+        initProxy() {
+            const { proxyInited, proxyConfig, proxyOpts, formConfig, formOpts } = this;
+            if (proxyConfig) {
+                if (isEnableConf(formConfig) && proxyOpts.form && formOpts.items) {
+                    const fData = {};
+                    formOpts.items.forEach((item) => {
+                        const { field, itemRender } = item;
+                        if (field) {
+                            let itemValue = null;
+                            if (itemRender) {
+                                const { defaultValue } = itemRender;
+                                if (XEUtils.isFunction(defaultValue)) {
+                                    itemValue = defaultValue({ item });
+                                }
+                                else if (!XEUtils.isUndefined(defaultValue)) {
+                                    itemValue = defaultValue;
+                                }
+                            }
+                            fData[field] = itemValue;
+                        }
+                    });
+                    this.formData = fData;
+                }
+                if (!proxyInited && proxyOpts.autoLoad !== false) {
+                    this.proxyInited = true;
+                    this.$nextTick().then(() => this.commitProxy('_init')).then((rest) => {
+                        this.$emit('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true, $grid: this, $event: new Event('init') }));
+                    });
+                }
+            }
+        },
+        handleGlobalKeydownEvent(evnt) {
+            const isEsc = evnt.keyCode === 27;
+            if (isEsc && this.isZMax && this.zoomOpts.escRestore !== false) {
+                this.triggerZoomEvent(evnt);
+            }
+        },
+        /**
+         * 提交指令，支持 code 或 button
+         * @param {String/Object} code 字符串或对象
+         */
+        commitProxy(proxyTarget, ...args) {
+            const { $refs, toolbar, toolbarConfig, toolbarOpts, proxyOpts, tablePage, pagerConfig, editRules, isRespMsg, isActiveMsg, validConfig, pagerOpts } = this;
+            const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts;
+            const resConfigs = proxyOpts.response || proxyOpts.props || {};
+            const $xetable = $refs.xTable;
+            const formData = this.getFormData();
+            let button;
+            let code;
+            if (XEUtils.isString(proxyTarget)) {
+                const matchObj = toolbarConfig || toolbar ? XEUtils.findTree(toolbarOpts.buttons, (item) => item.code === proxyTarget, { children: 'dropdowns' }) : null;
+                code = proxyTarget;
+                button = matchObj ? matchObj.item : null;
+            }
+            else {
+                button = proxyTarget;
+                code = button.code;
+            }
+            const btnParams = button ? button.params : null;
+            switch (code) {
+                case 'insert':
+                    return this.insert();
+                case 'insert_edit':
+                    return this.insert().then(({ row }) => this.setEditRow(row));
+                // 已废弃
+                case 'insert_actived':
+                    return this.insert().then(({ row }) => this.setEditRow(row));
+                // 已废弃
+                case 'mark_cancel':
+                    this.triggerPendingEvent(code);
+                    break;
+                case 'remove':
+                    return this.handleDeleteRow(code, 'vxe.grid.removeSelectRecord', () => this.removeCheckboxRow());
+                case 'import':
+                    this.importData(btnParams);
+                    break;
+                case 'open_import':
+                    this.openImport(btnParams);
+                    break;
+                case 'export':
+                    this.exportData(btnParams);
+                    break;
+                case 'open_export':
+                    this.openExport(btnParams);
+                    break;
+                case 'reset_custom':
+                    this.resetColumn(true);
+                    break;
+                case '_init':
+                case 'reload':
+                case 'query': {
+                    const ajaxMethods = ajax.query;
+                    const querySuccessMethods = ajax.querySuccess;
+                    const queryErrorMethods = ajax.queryError;
+                    if (ajaxMethods) {
+                        const isInited = code === '_init';
+                        const isReload = code === 'reload';
+                        let sortList = [];
+                        let filterList = [];
+                        let pageParams = {};
+                        if (pagerConfig) {
+                            if (isInited || isReload) {
+                                tablePage.currentPage = 1;
+                            }
+                            if (isEnableConf(pagerConfig)) {
+                                pageParams = Object.assign({}, tablePage);
+                            }
+                        }
+                        if (isInited) {
+                            const { sortOpts } = $xetable;
+                            let defaultSort = sortOpts.defaultSort;
+                            // 如果使用默认排序
+                            if (defaultSort) {
+                                if (!XEUtils.isArray(defaultSort)) {
+                                    defaultSort = [defaultSort];
+                                }
+                                sortList = defaultSort.map((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();
+                            }
+                        }
+                        const commitParams = {
+                            code,
+                            button,
+                            isInited,
+                            isReload,
+                            $grid: this,
+                            page: pageParams,
+                            sort: sortList.length ? sortList[0] : {},
+                            sorts: sortList,
+                            filters: filterList,
+                            form: formData,
+                            options: ajaxMethods
+                        };
+                        this.sortData = sortList;
+                        this.filterData = filterList;
+                        this.tableLoading = true;
+                        const applyArgs = [commitParams].concat(args);
+                        return Promise.resolve((beforeQuery || ajaxMethods)(...applyArgs))
+                            .then(rest => {
+                            this.tableLoading = false;
+                            if (rest) {
+                                if (pagerConfig && isEnableConf(pagerOpts)) {
+                                    const totalProp = resConfigs.total;
+                                    const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $grid: this }) : XEUtils.get(rest, totalProp || 'page.total')) || 0;
+                                    tablePage.total = XEUtils.toNumber(total);
+                                    const resultProp = resConfigs.result;
+                                    this.tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $grid: this }) : XEUtils.get(rest, resultProp || 'result')) || [];
+                                    // 检验当前页码，不能超出当前最大页数
+                                    const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
+                                    if (tablePage.currentPage > pageCount) {
+                                        tablePage.currentPage = pageCount;
+                                    }
+                                }
+                                else {
+                                    const listProp = resConfigs.list;
+                                    this.tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $grid: this }) : XEUtils.get(rest, listProp)) : rest) || [];
+                                }
+                            }
+                            else {
+                                this.tableData = [];
+                            }
+                            if (afterQuery) {
+                                afterQuery(...applyArgs);
+                            }
+                            if (querySuccessMethods) {
+                                querySuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                            }
+                            return { status: true };
+                        }).catch((rest) => {
+                            this.tableLoading = false;
+                            if (queryErrorMethods) {
+                                queryErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                            }
+                            return { status: false };
+                        });
+                    }
+                    else {
+                        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                            errLog('vxe.error.notFunc', ['proxy-config.ajax.query']);
+                        }
+                    }
+                    break;
+                }
+                case 'delete': {
+                    const ajaxMethods = ajax.delete;
+                    const deleteSuccessMethods = ajax.deleteSuccess;
+                    const deleteErrorMethods = ajax.deleteError;
+                    if (ajaxMethods) {
+                        const selectRecords = $xetable.getCheckboxRecords();
+                        const removeRecords = selectRecords.filter((row) => !$xetable.isInsertByRow(row));
+                        const body = { removeRecords };
+                        const commitParams = { $grid: this, code, button, body, form: formData, options: ajaxMethods };
+                        const applyArgs = [commitParams].concat(args);
+                        if (selectRecords.length) {
+                            return this.handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
+                                if (!removeRecords.length) {
+                                    return $xetable.remove(selectRecords);
+                                }
+                                this.tableLoading = true;
+                                return Promise.resolve((beforeDelete || ajaxMethods)(...applyArgs))
+                                    .then(rest => {
+                                    this.tableLoading = false;
+                                    $xetable.setPendingRow(removeRecords, false);
+                                    if (isRespMsg) {
+                                        // 检测弹窗模块
+                                        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                                            if (!VxeUI.modal) {
+                                                errLog('vxe.error.reqModule', ['Modal']);
+                                            }
+                                        }
+                                        VxeUI.modal.message({ content: this.getRespMsg(rest, 'vxe.grid.delSuccess'), status: 'success' });
+                                    }
+                                    if (afterDelete) {
+                                        afterDelete(...applyArgs);
+                                    }
+                                    else {
+                                        this.commitProxy('query');
+                                    }
+                                    if (deleteSuccessMethods) {
+                                        deleteSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                    }
+                                    return { status: true };
+                                })
+                                    .catch(rest => {
+                                    this.tableLoading = false;
+                                    if (isRespMsg) {
+                                        // 检测弹窗模块
+                                        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                                            if (!VxeUI.modal) {
+                                                errLog('vxe.error.reqModule', ['Modal']);
+                                            }
+                                        }
+                                        VxeUI.modal.message({ id: code, content: this.getRespMsg(rest, 'vxe.grid.operError'), status: 'error' });
+                                    }
+                                    if (deleteErrorMethods) {
+                                        deleteErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                    }
+                                    return { status: false };
+                                });
+                            });
+                        }
+                        else {
+                            if (isActiveMsg) {
+                                // 检测弹窗模块
+                                if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                                    if (!VxeUI.modal) {
+                                        errLog('vxe.error.reqModule', ['Modal']);
+                                    }
+                                }
+                                VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
+                            }
+                        }
+                    }
+                    else {
+                        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                            errLog('vxe.error.notFunc', ['proxy-config.ajax.delete']);
+                        }
+                    }
+                    break;
+                }
+                case 'save': {
+                    const ajaxMethods = ajax.save;
+                    const saveSuccessMethods = ajax.saveSuccess;
+                    const saveErrorMethods = ajax.saveError;
+                    if (ajaxMethods) {
+                        const body = this.getRecordset();
+                        const { insertRecords, removeRecords, updateRecords, pendingRecords } = body;
+                        const commitParams = { $grid: this, code, button, body, form: formData, options: ajaxMethods };
+                        const applyArgs = [commitParams].concat(args);
+                        // 排除掉新增且标记为删除的数据
+                        if (insertRecords.length) {
+                            body.pendingRecords = pendingRecords.filter((row) => insertRecords.indexOf(row) === -1);
+                        }
+                        // 排除已标记为删除的数据
+                        if (pendingRecords.length) {
+                            body.insertRecords = insertRecords.filter((row) => pendingRecords.indexOf(row) === -1);
+                        }
+                        let restPromise = Promise.resolve();
+                        if (editRules) {
+                            // 只校验新增和修改的数据
+                            restPromise = this[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords));
+                        }
+                        return restPromise.then((errMap) => {
+                            if (errMap) {
+                                // 如果校验不通过
+                                return;
+                            }
+                            if (body.insertRecords.length || removeRecords.length || updateRecords.length || body.pendingRecords.length) {
+                                this.tableLoading = true;
+                                return Promise.resolve((beforeSave || ajaxMethods)(...applyArgs))
+                                    .then(rest => {
+                                    this.tableLoading = false;
+                                    $xetable.clearPendingRow();
+                                    if (isRespMsg) {
+                                        // 检测弹窗模块
+                                        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                                            if (!VxeUI.modal) {
+                                                errLog('vxe.error.reqModule', ['Modal']);
+                                            }
+                                        }
+                                        VxeUI.modal.message({ content: this.getRespMsg(rest, 'vxe.grid.saveSuccess'), status: 'success' });
+                                    }
+                                    if (afterSave) {
+                                        afterSave(...applyArgs);
+                                    }
+                                    else {
+                                        this.commitProxy('query');
+                                    }
+                                    if (saveSuccessMethods) {
+                                        saveSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                    }
+                                    return { status: true };
+                                })
+                                    .catch(rest => {
+                                    this.tableLoading = false;
+                                    if (isRespMsg) {
+                                        // 检测弹窗模块
+                                        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                                            if (!VxeUI.modal) {
+                                                errLog('vxe.error.reqModule', ['Modal']);
+                                            }
+                                        }
+                                        VxeUI.modal.message({ id: code, content: this.getRespMsg(rest, 'vxe.grid.operError'), status: 'error' });
+                                    }
+                                    if (saveErrorMethods) {
+                                        saveErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                    }
+                                    return { status: false };
+                                });
+                            }
+                            else {
+                                if (isActiveMsg) {
+                                    // 检测弹窗模块
+                                    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                                        if (!VxeUI.modal) {
+                                            errLog('vxe.error.reqModule', ['Modal']);
+                                        }
+                                    }
+                                    VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.dataUnchanged'), status: 'info' });
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                            errLog('vxe.error.notFunc', ['proxy-config.ajax.save']);
+                        }
+                    }
+                    break;
+                }
+                default: {
+                    const gCommandOpts = commands.get(code);
+                    if (gCommandOpts) {
+                        if (gCommandOpts.commandMethod) {
+                            gCommandOpts.commandMethod({ code, button, $grid: this, $table: $xetable }, ...args);
+                        }
+                        else {
+                            if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                                errLog('vxe.error.notCommands', [code]);
+                            }
+                        }
+                    }
+                }
+            }
+            return this.$nextTick();
+        },
+        getRespMsg(rest, defaultMsg) {
+            const { proxyOpts } = this;
+            const resConfigs = proxyOpts.response || proxyOpts.props || {};
+            let msg;
+            if (rest && resConfigs.message) {
+                msg = XEUtils.get(rest, resConfigs.message);
+            }
+            return msg || getI18n(defaultMsg);
+        },
+        handleDeleteRow(code, alertKey, callback) {
+            const selectRecords = this.getCheckboxRecords();
+            if (this.isActiveMsg) {
+                if (selectRecords.length) {
+                    return VxeUI.modal.confirm({ id: `cfm_${code}`, content: getI18n(alertKey), escClosable: true }).then(type => {
+                        if (type === 'confirm') {
+                            return callback();
+                        }
+                    });
+                }
+                else {
+                    // 检测弹窗模块
+                    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                        if (!VxeUI.modal) {
+                            errLog('vxe.error.reqModule', ['Modal']);
+                        }
+                    }
+                    VxeUI.modal.message({ id: `msg_${code}`, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
+                }
+            }
+            else {
+                if (selectRecords.length) {
+                    callback();
+                }
+            }
+            return Promise.resolve();
+        },
+        getFormData() {
+            const { proxyConfig, proxyOpts, formOpts, formData } = this;
+            return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data;
+        },
+        getFormItems(itemIndex) {
+            const { formConfig, formOpts } = this;
+            const itemList = [];
+            XEUtils.eachTree(isEnableConf(formConfig) && formOpts.items ? formOpts.items : [], item => {
+                itemList.push(item);
+            }, { children: 'children' });
+            return XEUtils.isUndefined(itemIndex) ? itemList : itemList[itemIndex];
+        },
+        triggerToolbarCommitEvent(params, evnt) {
+            const { code } = params;
+            return this.commitProxy(params, evnt).then((rest) => {
+                if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
+                    this.$emit(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), { isReload: code === 'reload', $grid: this, $event: evnt }));
+                }
+            });
+        },
+        triggerToolbarBtnEvent(button, evnt) {
+            this.triggerToolbarCommitEvent(button, evnt);
+            this.$emit('toolbar-button-click', { code: button.code, button, $grid: this, $event: evnt });
+        },
+        triggerToolbarTolEvent(tool, evnt) {
+            this.triggerToolbarCommitEvent(tool, evnt);
+            this.$emit('toolbar-tool-click', { code: tool.code, tool, $grid: this, $event: evnt });
+        },
+        triggerPendingEvent(code) {
+            const { isActiveMsg } = this;
+            const selectRecords = this.getCheckboxRecords();
+            if (selectRecords.length) {
+                this.togglePendingRow(selectRecords);
+                this.clearCheckboxRow();
+            }
+            else {
+                if (isActiveMsg) {
+                    // 检测弹窗模块
+                    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                        if (!VxeUI.modal) {
+                            errLog('vxe.error.reqModule', ['Modal']);
+                        }
+                    }
+                    VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
+                }
+            }
+        },
+        pageChangeEvent(params) {
+            const { proxyConfig, tablePage } = this;
+            const { currentPage, pageSize } = params;
+            tablePage.currentPage = currentPage;
+            tablePage.pageSize = pageSize;
+            this.$emit('page-change', Object.assign({ $grid: this }, params));
+            if (proxyConfig) {
+                this.commitProxy('query').then((rest) => {
+                    this.$emit('proxy-query', Object.assign(Object.assign({}, rest), { $grid: this, $event: params.$event }));
+                });
+            }
+        },
+        sortChangeEvent(params) {
+            const { $table, column, sortList } = params;
+            const isRemote = XEUtils.isBoolean(column.remoteSort) ? column.remoteSort : $table.sortOpts.remote;
+            // 如果是服务端排序
+            if (isRemote) {
+                this.sortData = sortList;
+                if (this.proxyConfig) {
+                    this.tablePage.currentPage = 1;
+                    this.commitProxy('query').then((rest) => {
+                        this.$emit('proxy-query', Object.assign(Object.assign({}, rest), { $grid: this, $event: params.$event }));
+                    });
+                }
+            }
+            this.$emit('sort-change', Object.assign({ $grid: this }, params));
+        },
+        filterChangeEvent(params) {
+            const { $table, filterList } = params;
+            // 如果是服务端过滤
+            if ($table.filterOpts.remote) {
+                this.filterData = filterList;
+                if (this.proxyConfig) {
+                    this.tablePage.currentPage = 1;
+                    this.commitProxy('query').then((rest) => {
+                        this.$emit('proxy-query', Object.assign(Object.assign({}, rest), { $grid: this, $event: params.$event }));
+                    });
+                }
+            }
+            this.$emit('filter-change', Object.assign({ $grid: this }, params));
+        },
+        submitEvent(params) {
+            const { proxyConfig } = this;
+            if (proxyConfig) {
+                this.commitProxy('reload').then((rest) => {
+                    this.$emit('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true, $grid: this, $event: params.$event }));
+                });
+            }
+            this.$emit('form-submit', Object.assign({ $grid: this }, params));
+        },
+        resetEvent(params) {
+            const { proxyConfig } = this;
+            if (proxyConfig) {
+                this.commitProxy('reload').then((rest) => {
+                    this.$emit('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true, $grid: this, $event: params.$event }));
+                });
+            }
+            this.$emit('form-reset', Object.assign({ $grid: this }, params));
+        },
+        submitInvalidEvent(params) {
+            this.$emit('form-submit-invalid', Object.assign({ $grid: this }, params));
+        },
+        collapseEvent(params) {
+            this.$nextTick(() => this.recalculate(true));
+            this.$emit('form-toggle-collapse', Object.assign({ $grid: this }, params));
+            this.$emit('form-collapse', Object.assign({ $grid: this }, params));
+        },
+        triggerZoomEvent(evnt) {
+            this.zoom();
+            this.$emit('zoom', { $grid: this, type: this.isZMax ? 'max' : 'revert', $event: evnt });
+        },
+        zoom() {
+            return this[this.isZMax ? 'revert' : 'maximize']();
+        },
+        isMaximized() {
+            return this.isZMax;
+        },
+        maximize() {
+            return this.handleZoom(true);
+        },
+        revert() {
+            return this.handleZoom();
+        },
+        handleZoom(isMax) {
+            const { isZMax } = this;
+            if (isMax ? !isZMax : isZMax) {
+                this.isZMax = !isZMax;
+                if (this.tZindex < getLastZIndex()) {
+                    this.tZindex = nextZIndex();
+                }
+            }
+            return this.$nextTick().then(() => this.recalculate(true)).then(() => this.isZMax);
+        },
+        getProxyInfo() {
+            const { $refs, sortData, proxyConfig } = this;
+            const $xetable = $refs.xTable;
+            if (proxyConfig) {
+                return {
+                    data: this.tableData,
+                    filter: this.filterData,
+                    form: this.getFormData(),
+                    sort: sortData.length ? sortData[0] : {},
+                    sorts: sortData,
+                    pager: this.tablePage,
+                    pendingRecords: $xetable ? $xetable.getPendingRecords() : []
+                };
+            }
+            return null;
+        } }), (process.env.VUE_APP_VXE_TABLE_ENV === 'development'
+        ? {
+            loadColumn(columns) {
+                const { $scopedSlots } = this;
+                XEUtils.eachTree(columns, column => {
+                    if (column.slots) {
+                        XEUtils.each(column.slots, (func) => {
+                            if (!XEUtils.isFunction(func)) {
+                                if (!$scopedSlots[func]) {
+                                    errLog('vxe.error.notSlot', [func]);
+                                }
+                            }
+                        });
+                    }
+                });
+                return this.$refs.xTable.loadColumn(columns);
+            },
+            reloadColumn(columns) {
+                this.clearAll();
+                return this.loadColumn(columns);
+            }
+        }
+        : null))
+};