vxe-table 3.19.19 → 3.19.21

package/es/grid/src/grid.js

@@ -40,7 +40,9 @@ XEUtils.each(VxeTableComponent.methods, (fn, name) => {
     };
 });
 function createInternalData() {
-    return {};
+    return {
+        uFoot: false
+    };
 }
 export default {
     name: 'VxeGrid',
@@ -70,6 +72,7 @@ export default {
             filterData: [],
             formData: {},
             sortData: [],
+            footerData: [],
             tZindex: 0,
             tablePage: {
                 total: 0,
@@ -173,7 +176,9 @@ export default {
             const rest = {};
             const gridProps = props;
             propKeys.forEach(key => {
-                rest[key] = gridProps[key];
+                if (gridProps[key] !== undefined) {
+                    rest[key] = gridProps[key];
+                }
             });
             return rest;
         },
@@ -181,15 +186,23 @@ export default {
             const $xeGrid = this;
             const props = $xeGrid;
             const reactData = $xeGrid.reactData;
-            const { seqConfig, pagerConfig, editConfig, proxyConfig } = props;
-            const { isZMax, tablePage } = reactData;
+            const { showFooter, seqConfig, pagerConfig, editConfig, proxyConfig } = props;
+            const { isZMax, tablePage, footerData } = reactData;
             const tableExtendProps = $xeGrid.computeTableExtendProps;
             const proxyOpts = $xeGrid.computeProxyOpts;
             const pagerOpts = $xeGrid.computePagerOpts;
             const isLoading = $xeGrid.computeIsLoading;
             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 {
@@ -432,6 +445,7 @@ export default {
             const $xeGrid = this;
             const props = $xeGrid;
             const reactData = $xeGrid.reactData;
+            const internalData = $xeGrid.internalData;
             const { proxyConfig, formConfig } = props;
             const { proxyInited } = reactData;
             const proxyOpts = $xeGrid.computeProxyOpts;
@@ -440,14 +454,30 @@ export default {
                 if (isEnableConf(formConfig) && proxyOpts.form && formOpts.items) {
                     reactData.formData = $xeGrid.getDefaultFormData();
                 }
-                if (!proxyInited && proxyOpts.autoLoad !== false) {
+                if (!proxyInited) {
                     reactData.proxyInited = true;
-                    $xeGrid.$nextTick().then(() => $xeGrid.commitProxy('initial')).then((rest) => {
-                        $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('initial'));
-                    });
+                    if (proxyOpts.autoLoad !== false) {
+                        $xeGrid.$nextTick().then(() => {
+                            internalData.uFoot = true;
+                            const rest = $xeGrid.commitProxy('initial');
+                            internalData.uFoot = false;
+                            $xeGrid.updateQueryFooter();
+                            return rest;
+                        }).then((rest) => {
+                            $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('initial'));
+                        });
+                    }
                 }
             }
         },
+        updateQueryFooter() {
+            const $xeGrid = this;
+            const proxyOpts = $xeGrid.computeProxyOpts;
+            const { ajax } = proxyOpts;
+            if (ajax && ajax.queryFooter) {
+                return $xeGrid.commitProxy('queryFooter');
+            }
+        },
         handleGlobalKeydownEvent(evnt) {
             const $xeGrid = this;
             const reactData = $xeGrid.reactData;
@@ -521,20 +551,21 @@ export default {
             const $xeGrid = this;
             const props = $xeGrid;
             const reactData = $xeGrid.reactData;
+            const internalData = $xeGrid.internalData;
             /**
              * 已废弃
              * @deprecated
              */
             const toolbar = props.toolbar;
-            const { proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props;
+            const { showFooter, proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props;
             const { tablePage } = reactData;
             const isActiveMsg = $xeGrid.computeIsActiveMsg;
             const isRespMsg = $xeGrid.computeIsRespMsg;
             const proxyOpts = $xeGrid.computeProxyOpts;
             const pagerOpts = $xeGrid.computePagerOpts;
             const toolbarOpts = $xeGrid.computeToolbarOpts;
-            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 = $xeGrid.$refs.refTable;
             let formData = $xeGrid.getFormData();
             let button = null;
@@ -582,10 +613,10 @@ export default {
                 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) {
@@ -665,24 +696,25 @@ export default {
                             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) {
@@ -691,7 +723,19 @@ export default {
                                 }
                                 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) {
@@ -708,14 +752,14 @@ export default {
                             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 };
                         });
@@ -725,11 +769,51 @@ export default {
                     }
                     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 = $xeTable.getCheckboxRecords();
                         const removeRecords = selectRecords.filter((row) => !$xeTable.isInsertByRow(row));
                         const body = { removeRecords };
@@ -741,7 +825,7 @@ export default {
                             button,
                             body,
                             form: formData,
-                            options: ajaxMethods
+                            options: dMethods
                         };
                         const applyArgs = [commitParams].concat(args);
                         if (selectRecords.length) {
@@ -750,7 +834,7 @@ export default {
                                     return $xeTable.remove(selectRecords);
                                 }
                                 reactData.tableLoading = true;
-                                return Promise.resolve((beforeDelete || ajaxMethods)(...applyArgs))
+                                return Promise.resolve((beforeDelete || dMethods)(...applyArgs))
                                     .then(rest => {
                                     reactData.tableLoading = false;
                                     $xeTable.setPendingRow(removeRecords, false);
@@ -763,7 +847,10 @@ export default {
                                         afterDelete(...applyArgs);
                                     }
                                     else {
+                                        internalData.uFoot = true;
                                         $xeGrid.commitProxy('query');
+                                        internalData.uFoot = false;
+                                        $xeGrid.updateQueryFooter();
                                     }
                                     if (deleteSuccessMethods) {
                                         deleteSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
@@ -848,7 +935,10 @@ export default {
                                         afterSave(...applyArgs);
                                     }
                                     else {
+                                        internalData.uFoot = true;
                                         $xeGrid.commitProxy('query');
+                                        internalData.uFoot = false;
+                                        $xeGrid.updateQueryFooter();
                                     }
                                     if (saveSuccessMethods) {
                                         saveSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
@@ -1023,12 +1113,25 @@ export default {
         },
         triggerToolbarCommitEvent(params, evnt) {
             const $xeGrid = this;
+            const internalData = $xeGrid.internalData;
             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 (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 (isUf) {
+                    $xeGrid.updateQueryFooter();
+                }
+                internalData.uFoot = false;
+                return rest;
+            }
+            return $xeGrid.$nextTick();
         },
         triggerToolbarBtnEvent(button, evnt) {
             const $xeGrid = this;
@@ -1090,6 +1193,7 @@ export default {
             const $xeGrid = this;
             const props = $xeGrid;
             const reactData = $xeGrid.reactData;
+            const internalData = $xeGrid.internalData;
             const $xeTable = $xeGrid.$refs.refTable;
             const { proxyConfig } = props;
             const proxyOpts = $xeGrid.computeProxyOpts;
@@ -1099,9 +1203,12 @@ export default {
                 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;
+                    $xeGrid.updateQueryFooter();
                 }
             }
         },
@@ -1119,30 +1226,38 @@ export default {
             const $xeGrid = this;
             const props = $xeGrid;
             const reactData = $xeGrid.reactData;
+            const internalData = $xeGrid.internalData;
             const { proxyConfig } = props;
             const proxyOpts = $xeGrid.computeProxyOpts;
             if (reactData.tableLoading) {
                 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;
+                $xeGrid.updateQueryFooter();
             }
             $xeGrid.dispatchEvent('form-submit', params, params.$event);
         },
         resetFormEvent(params) {
             const $xeGrid = this;
             const props = $xeGrid;
+            const internalData = $xeGrid.internalData;
             const $xeTable = $xeGrid.$refs.refTable;
             const { proxyConfig } = props;
             const { $event } = params;
             const proxyOpts = $xeGrid.computeProxyOpts;
             if (proxyConfig && isEnableConf(proxyOpts)) {
                 $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;
+                $xeGrid.updateQueryFooter();
             }
             $xeGrid.dispatchEvent('form-reset', params, $event);
         },