vxe-table 4.17.20 → 4.17.21

package/es/grid/src/grid.js

@@ -16,7 +16,9 @@ const { getConfig, getI18n, commands, hooks, useFns, createEvent, globalEvents,
 const tableComponentPropKeys = Object.keys(tableProps);
 const tableComponentMethodKeys = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'setRow', 'createData', 'createRow', 'revertData', 'clearData', 'isRemoveByRow', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getFullColumns', 'getData', 'getCheckboxRecords', 'getParentRow', 'getTreeRowChildren', 'getTreeRowLevel', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'recalcRowHeight', 'setRowHeightConf', 'getRowHeightConf', 'setRowHeight', 'getRowHeight', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'setCheckboxRowKey', 'isCheckedByCheckboxRow', 'isCheckedByCheckboxRowKey', 'isIndeterminateByCheckboxRow', 'isIndeterminateByCheckboxRowKey', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'isCheckedByRadioRowKey', 'setRadioRow', 'setRadioRowKey', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'hasPendingByRow', 'isPendingByRow', 'getPendingRecords', 'clearPendingRow', 'setFilterByEvent', 'sort', 'setSort', 'setSortByEvent', 'clearSort', 'clearSortByEvent', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'clearFilterByEvent', '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', 'getScrollData', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'setMergeHeaderCells', 'removeMergeHeaderCells', 'getMergeHeaderCells', 'clearMergeHeaderCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'getCustomStoreData', 'setRowGroupExpand', 'setRowGroupExpandByField', 'setAllRowGroupExpand', 'clearRowGroupExpand', 'isRowGroupExpandByRow', 'isRowGroupRecord', 'isAggregateRecord', 'isAggregateExpandByRow', 'getAggregateContentByRow', 'getAggregateRowChildren', 'setRowGroups', 'clearRowGroups', 'openTooltip', 'moveColumnTo', 'moveRowTo', 'getCellLabel', 'getCellElement', 'focus', 'blur', 'connect', 'connectToolbar'];
 function createInternalData() {
-    return {};
+    return {
+        uFoot: false
+    };
 }
 export default defineVxeComponent({
     name: 'VxeGrid',
@@ -39,6 +41,7 @@ export default defineVxeComponent({
             filterData: [],
             formData: {},
             sortData: [],
+            footerData: [],
             tZindex: 0,
             tablePage: {
                 total: 0,
@@ -122,20 +125,30 @@ export default defineVxeComponent({
         const computeTableExtendProps = computed(() => {
             const rest = {};
             tableComponentPropKeys.forEach((key) => {
-                rest[key] = props[key];
+                if (props[key] !== undefined) {
+                    rest[key] = props[key];
+                }
             });
             return rest;
         });
         const computeTableProps = computed(() => {
-            const { seqConfig, pagerConfig, editConfig, proxyConfig } = props;
-            const { isZMax, tablePage } = reactData;
+            const { showFooter, seqConfig, pagerConfig, editConfig, proxyConfig } = props;
+            const { isZMax, tablePage, footerData } = reactData;
             const tableExtendProps = computeTableExtendProps.value;
             const proxyOpts = computeProxyOpts.value;
             const pagerOpts = computePagerOpts.value;
             const isLoading = computeIsLoading.value;
             const tProps = Object.assign({}, tableExtendProps);
+            if (showFooter && !tProps.footerData) {
+                // 如果未设置自己的标位数据，则使用代理的
+                tProps.footerData = footerData;
+            }
+            else if (proxyOpts.footer && footerData.length) {
+                // 如果代理标为数据，且未请求到数据，则用自己的
+                tProps.footerData = footerData;
+            }
             if (isZMax) {
-                if (tableExtendProps.maxHeight) {
+                if (tProps.maxHeight) {
                     tProps.maxHeight = '100%';
                 }
                 else {
@@ -382,9 +395,12 @@ export default defineVxeComponent({
                 reactData.filterData = params.filterList;
                 if (proxyConfig && isEnableConf(proxyOpts)) {
                     reactData.tablePage.currentPage = 1;
+                    internalData.uFoot = true;
                     $xeGrid.commitProxy('query').then((rest) => {
                         $xeGrid.dispatchEvent('proxy-query', rest, params.$event);
                     });
+                    internalData.uFoot = false;
+                    updateQueryFooter();
                 }
             }
         };
@@ -403,9 +419,12 @@ export default defineVxeComponent({
                 return;
             }
             if (proxyConfig && isEnableConf(proxyOpts)) {
+                internalData.uFoot = true;
                 $xeGrid.commitProxy('reload').then((rest) => {
                     $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), params.$event);
                 });
+                internalData.uFoot = false;
+                updateQueryFooter();
             }
             $xeGrid.dispatchEvent('form-submit', params, params.$event);
         };
@@ -418,9 +437,12 @@ export default defineVxeComponent({
                 if ($xeTable) {
                     $xeTable.clearScroll();
                 }
+                internalData.uFoot = true;
                 $xeGrid.commitProxy('reload').then((rest) => {
                     $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), $event);
                 });
+                internalData.uFoot = false;
+                updateQueryFooter();
             }
             $xeGrid.dispatchEvent('form-reset', params, $event);
         };
@@ -820,13 +842,26 @@ export default defineVxeComponent({
                 if (!proxyInited) {
                     reactData.proxyInited = true;
                     if (proxyOpts.autoLoad !== false) {
-                        nextTick().then(() => $xeGrid.commitProxy('initial')).then((rest) => {
+                        nextTick().then(() => {
+                            internalData.uFoot = true;
+                            const rest = $xeGrid.commitProxy('initial');
+                            internalData.uFoot = false;
+                            updateQueryFooter();
+                            return rest;
+                        }).then((rest) => {
                             dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('initial'));
                         });
                     }
                 }
             }
         };
+        const updateQueryFooter = () => {
+            const proxyOpts = computeProxyOpts.value;
+            const { ajax } = proxyOpts;
+            if (ajax && ajax.queryFooter) {
+                return $xeGrid.commitProxy('queryFooter');
+            }
+        };
         const handleGlobalKeydownEvent = (evnt) => {
             const zoomOpts = computeZoomOpts.value;
             const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
@@ -847,15 +882,15 @@ export default defineVxeComponent({
              * @param {String/Object} code 字符串或对象
              */
             commitProxy(proxyTarget, ...args) {
-                const { proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props;
+                const { showFooter, proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props;
                 const { tablePage } = reactData;
                 const isActiveMsg = computeIsActiveMsg.value;
                 const isRespMsg = computeIsRespMsg.value;
                 const proxyOpts = computeProxyOpts.value;
                 const pagerOpts = computePagerOpts.value;
                 const toolbarOpts = computeToolbarOpts.value;
-                const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts;
-                const resConfigs = proxyOpts.response || proxyOpts.props || {};
+                const { beforeQuery, afterQuery, beforeQueryFooter, afterQueryFooter, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts;
+                const resConfigs = (proxyOpts.response || proxyOpts.props || {});
                 const $xeTable = refTable.value;
                 if (!$xeTable) {
                     return nextTick();
@@ -905,10 +940,10 @@ export default defineVxeComponent({
                     case 'initial':
                     case 'reload':
                     case 'query': {
-                        const ajaxMethods = ajax.query;
-                        const querySuccessMethods = ajax.querySuccess;
-                        const queryErrorMethods = ajax.queryError;
-                        if (ajaxMethods) {
+                        const qMethods = ajax.query;
+                        const qsMethods = ajax.querySuccess;
+                        const qeMethods = ajax.queryError;
+                        if (qMethods) {
                             const isInited = code === 'initial';
                             const isReload = code === 'reload';
                             if (!isInited && reactData.tableLoading) {
@@ -990,24 +1025,25 @@ export default defineVxeComponent({
                                 sorts: sortList,
                                 filters: filterList,
                                 form: formData,
-                                options: ajaxMethods
+                                options: qMethods
                             };
                             reactData.sortData = sortList;
                             reactData.filterData = filterList;
                             reactData.tableLoading = true;
                             return Promise.all([
-                                Promise.resolve((beforeQuery || ajaxMethods)(commitParams, ...args)),
+                                Promise.resolve((beforeQuery || qMethods)(commitParams, ...args)),
                                 operPromise
                             ]).then(([rest]) => {
                                 let tableData = [];
                                 reactData.tableLoading = false;
                                 if (rest) {
+                                    const reParams = { data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: null };
                                     if (pagerConfig && isEnableConf(pagerOpts)) {
                                         const totalProp = resConfigs.total;
-                                        const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: null }) : XEUtils.get(rest, totalProp || 'page.total')) || 0;
+                                        const total = (XEUtils.isFunction(totalProp) ? totalProp(reParams) : XEUtils.get(rest, totalProp || 'page.total')) || 0;
                                         tablePage.total = XEUtils.toNumber(total);
                                         const resultProp = resConfigs.result;
-                                        tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: null }) : XEUtils.get(rest, resultProp || 'result')) || [];
+                                        tableData = (XEUtils.isFunction(resultProp) ? resultProp(reParams) : XEUtils.get(rest, resultProp || 'result')) || [];
                                         // 检验当前页码，不能超出当前最大页数
                                         const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
                                         if (tablePage.currentPage > pageCount) {
@@ -1016,7 +1052,19 @@ export default defineVxeComponent({
                                     }
                                     else {
                                         const listProp = resConfigs.list;
-                                        tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: null }) : XEUtils.get(rest, listProp)) : rest) || [];
+                                        if (XEUtils.isArray(rest)) {
+                                            tableData = rest;
+                                        }
+                                        else if (listProp) {
+                                            tableData = (XEUtils.isFunction(listProp) ? listProp(reParams) : XEUtils.get(rest, listProp)) || [];
+                                        }
+                                    }
+                                    if (showFooter) {
+                                        const fdProp = resConfigs.footerData;
+                                        const footerList = fdProp ? (XEUtils.isFunction(fdProp) ? fdProp(reParams) : XEUtils.get(rest, fdProp)) : [];
+                                        if (XEUtils.isArray(footerList)) {
+                                            reactData.footerData = footerList;
+                                        }
                                     }
                                 }
                                 if ($xeTable) {
@@ -1033,14 +1081,14 @@ export default defineVxeComponent({
                                 if (afterQuery) {
                                     afterQuery(commitParams, ...args);
                                 }
-                                if (querySuccessMethods) {
-                                    querySuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                if (qsMethods) {
+                                    qsMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
                                 }
                                 return { status: true };
                             }).catch((rest) => {
                                 reactData.tableLoading = false;
-                                if (queryErrorMethods) {
-                                    queryErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                if (qeMethods) {
+                                    qeMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
                                 }
                                 return { status: false };
                             });
@@ -1050,11 +1098,51 @@ export default defineVxeComponent({
                         }
                         break;
                     }
+                    case 'queryFooter': {
+                        const qfMethods = ajax.queryFooter;
+                        const qfSuccessMethods = ajax.queryFooterSuccess;
+                        const qfErrorMethods = ajax.queryFooterError;
+                        if (qfMethods) {
+                            let filterList = [];
+                            if ($xeTable) {
+                                filterList = $xeTable.getCheckedFilters();
+                            }
+                            const commitParams = {
+                                $table: $xeTable,
+                                $grid: $xeGrid,
+                                $gantt: null,
+                                code,
+                                button,
+                                filters: filterList,
+                                form: formData,
+                                options: qfMethods
+                            };
+                            return Promise.resolve((beforeQueryFooter || qfMethods)(commitParams, ...args)).then(rest => {
+                                reactData.footerData = XEUtils.isArray(rest) ? rest : [];
+                                if (afterQueryFooter) {
+                                    afterQueryFooter(commitParams, ...args);
+                                }
+                                if (qfSuccessMethods) {
+                                    qfSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                }
+                                return { status: true };
+                            }).catch((rest) => {
+                                if (qfErrorMethods) {
+                                    qfErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                }
+                                return { status: false };
+                            });
+                        }
+                        else {
+                            errLog('vxe.error.notFunc', ['[grid] proxy-config.ajax.queryFooter']);
+                        }
+                        break;
+                    }
                     case 'delete': {
-                        const ajaxMethods = ajax.delete;
+                        const dMethods = ajax.delete;
                         const deleteSuccessMethods = ajax.deleteSuccess;
                         const deleteErrorMethods = ajax.deleteError;
-                        if (ajaxMethods) {
+                        if (dMethods) {
                             const selectRecords = $xeGrid.getCheckboxRecords();
                             const removeRecords = selectRecords.filter(row => !$xeTable.isInsertByRow(row));
                             const body = { removeRecords };
@@ -1066,7 +1154,7 @@ export default defineVxeComponent({
                                 button,
                                 body,
                                 form: formData,
-                                options: ajaxMethods
+                                options: dMethods
                             };
                             if (selectRecords.length) {
                                 return handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
@@ -1074,7 +1162,7 @@ export default defineVxeComponent({
                                         return $xeTable.remove(selectRecords);
                                     }
                                     reactData.tableLoading = true;
-                                    return Promise.resolve((beforeDelete || ajaxMethods)(commitParams, ...args))
+                                    return Promise.resolve((beforeDelete || dMethods)(commitParams, ...args))
                                         .then(rest => {
                                         reactData.tableLoading = false;
                                         $xeTable.setPendingRow(removeRecords, false);
@@ -1087,7 +1175,10 @@ export default defineVxeComponent({
                                             afterDelete(commitParams, ...args);
                                         }
                                         else {
+                                            internalData.uFoot = true;
                                             $xeGrid.commitProxy('query');
+                                            internalData.uFoot = false;
+                                            updateQueryFooter();
                                         }
                                         if (deleteSuccessMethods) {
                                             deleteSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
@@ -1171,7 +1262,10 @@ export default defineVxeComponent({
                                             afterSave(commitParams, ...args);
                                         }
                                         else {
+                                            internalData.uFoot = true;
                                             $xeGrid.commitProxy('query');
+                                            internalData.uFoot = false;
+                                            updateQueryFooter();
                                         }
                                         if (saveSuccessMethods) {
                                             saveSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
@@ -1411,11 +1505,23 @@ export default defineVxeComponent({
             },
             triggerToolbarCommitEvent(params, evnt) {
                 const { code } = params;
-                return $xeGrid.commitProxy(params, evnt).then((rest) => {
-                    if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
-                        $xeGrid.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), { isReload: code === 'reload' }), evnt);
+                if (code) {
+                    const isUf = ['reload', 'delete', 'save'].includes(code);
+                    if (isUf) {
+                        internalData.uFoot = true;
                     }
-                });
+                    const rest = $xeGrid.commitProxy(params, evnt).then((rest) => {
+                        if (rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
+                            $xeGrid.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), { isReload: code === 'reload' }), evnt);
+                        }
+                    });
+                    internalData.uFoot = false;
+                    if (isUf) {
+                        updateQueryFooter();
+                    }
+                    return rest;
+                }
+                return nextTick();
             },
             triggerToolbarBtnEvent(button, evnt) {
                 $xeGrid.triggerToolbarCommitEvent(button, evnt);