vxe-table 3.21.21 → 3.21.23

package/es/table/module/custom/mixin.js

@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils';
 import { getColumnList } from '../../src/util';
 import { toCssUnit } from '../../../ui/src/dom';
+const customColumnCssKeys = ['checkbox', 'sort', 'title', 'width', 'fixed', 'align', 'header-align', 'footer-align'];
 function updatePopupStyle($xeTable) {
     const $xeGrid = $xeTable.$xeGrid;
     const $xeGantt = $xeTable.$xeGantt;
@@ -10,14 +11,15 @@ function updatePopupStyle($xeTable) {
     const customOpts = $xeTable.computeCustomOpts;
     const { mode, placement, popupOptions } = customOpts;
     const showSimple = !(mode === 'modal' || mode === 'drawer');
-    const { transfer, maxHeight } = popupOptions || {};
+    const { transfer, minWidth, maxWidth, maxHeight } = popupOptions || {};
     const customSimpleMode = $xeTable.computeCustomSimpleMode;
     const showCustomSimpleOutside = customSimpleMode === 'outside';
     const bodyEl = document.documentElement;
     let wrapperEl = $xeTable.$refs.refElem;
     let popupTop = 0;
     let popupMaxHeight = 0;
-    const popupStys = {};
+    const defPupStys = {};
+    const panePupStys = {};
     if ($xeGantt) {
         const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
         if (ganttContainerElem) {
@@ -49,24 +51,41 @@ function updatePopupStyle($xeTable) {
     }
     if (!placement || !(['left', 'right', 'bottom-left', 'bottom-right'].includes(placement))) {
         if (popupTop) {
-            popupStys.top = toCssUnit(popupTop);
+            defPupStys.top = toCssUnit(popupTop);
         }
     }
     if (showSimple && transfer) {
         if (placement === 'bottom-left' || placement === 'bottom-right') {
-            popupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1);
+            defPupStys.bottom = toCssUnit(bodyEl.scrollHeight - tableRect.top - tableRect.height + 1);
         }
         if (placement === 'top-left' || placement === 'bottom-left') {
-            popupStys.left = toCssUnit(tableRect.left);
+            defPupStys.left = toCssUnit(tableRect.left);
         }
         else if (!placement || placement === 'top-right' || placement === 'bottom-right') {
-            popupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1);
+            defPupStys.right = toCssUnit(bodyEl.scrollWidth - tableRect.left - tableRect.width + 1);
         }
     }
+    // 同步表格的css变量到弹窗中
+    const bodyComputeStyle = getComputedStyle(bodyEl);
+    const tableComputeStyle = getComputedStyle(wrapperEl);
+    customColumnCssKeys.forEach(key => {
+        const currCssKey = `--vxe-ui-vxe-table-custom-column-${key}-${key === 'title' ? 'min-' : ''}width`;
+        const currCssVal = tableComputeStyle.getPropertyValue(currCssKey);
+        if (currCssVal && currCssVal !== bodyComputeStyle.getPropertyValue(currCssKey)) {
+            panePupStys[currCssKey] = currCssVal;
+        }
+    });
+    if (minWidth) {
+        defPupStys['--vxe-ui-vxe-table-custom-default-min-width'] = toCssUnit(minWidth);
+    }
+    if (maxWidth) {
+        defPupStys['--vxe-ui-vxe-table-custom-default-max-width'] = toCssUnit(maxWidth);
+    }
     if (popupMxHeight) {
-        popupStys.maxHeight = toCssUnit(popupMxHeight);
+        defPupStys.maxHeight = toCssUnit(popupMxHeight);
     }
-    customStore.popupStyle = popupStys;
+    customStore.defPopupStyle = defPupStys;
+    customStore.panePopupStyle = panePupStys;
     customStore.maxHeight = popupMxHeight;
     return $xeTable.$nextTick();
 }
@@ -150,44 +169,64 @@ export default {
             }
             return $xeTable.openCustom();
         },
-        _saveCustom() {
+        _saveCustom(isDirectly) {
             const $xeTable = this;
             const reactData = $xeTable;
             const internalData = $xeTable;
             const { customColumnList, aggHandleFields, rowGroupList } = reactData;
             const customOpts = $xeTable.computeCustomOpts;
-            const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts;
-            XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
-                if (parentColumn) {
-                    // 更新子列信息
-                    column.fixed = parentColumn.fixed;
-                }
-                else {
-                    if (allowSort) {
-                        const sortIndex = index + 1;
-                        column.renderSortNumber = sortIndex;
+            const { allowVisible, allowSort, allowFixed, allowResizable, allowAlign, allowHeaderAlign, allowFooterAlign, allowGroup, allowValues } = customOpts;
+            if (isDirectly) {
+                XEUtils.eachTree(customColumnList, (column) => {
+                    if (allowResizable) {
+                        if (column.renderVisible && (!column.children || !column.children.length)) {
+                            column.resizeWidth = Math.max(0, XEUtils.toNumber(column.renderWidth));
+                        }
                     }
-                    if (allowFixed) {
-                        column.fixed = column.renderFixed;
+                });
+            }
+            else {
+                XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
+                    if (parentColumn) {
+                        // 更新子列信息
+                        column.fixed = parentColumn.fixed;
                     }
-                }
-                if (allowResizable) {
-                    if (column.renderVisible && (!column.children || !column.children.length)) {
-                        if (column.renderResizeWidth !== column.renderWidth) {
-                            column.resizeWidth = column.renderResizeWidth;
-                            column.renderWidth = column.renderResizeWidth;
+                    else {
+                        if (allowSort) {
+                            const sortIndex = index + 1;
+                            column.renderSortNumber = sortIndex;
+                        }
+                        if (allowFixed) {
+                            column.fixed = column.renderFixed;
                         }
                     }
-                }
-                if (allowVisible) {
-                    column.visible = column.renderVisible;
-                }
-                if (allowGroup && allowValues) {
-                    column.aggFunc = column.renderAggFn;
-                }
-            });
+                    if (allowResizable) {
+                        if (column.renderVisible && (!column.children || !column.children.length)) {
+                            if (column.renderResizeWidth !== column.renderWidth) {
+                                column.resizeWidth = column.renderResizeWidth;
+                                column.renderWidth = column.renderResizeWidth;
+                            }
+                        }
+                    }
+                    if (allowVisible) {
+                        column.visible = column.renderVisible;
+                    }
+                    if (allowAlign) {
+                        column.align = column.renderAlign;
+                    }
+                    if (allowHeaderAlign) {
+                        column.headerAlign = column.renderHeaderAlign;
+                    }
+                    if (allowFooterAlign) {
+                        column.footerAlign = column.renderFooterAlign;
+                    }
+                    if (allowGroup && allowValues) {
+                        column.aggFunc = column.renderAggFn;
+                    }
+                });
+            }
             reactData.isCustomStatus = true;
-            if (allowGroup && allowValues && !!$xeTable.handlePivotTableAggData) {
+            if (allowGroup && !!$xeTable.handlePivotTableAggData) {
                 if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
                     // 更新数据分组
                     if (aggHandleFields.length) {
@@ -213,7 +252,7 @@ export default {
             const { customColumnList, customStore } = reactData;
             const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore;
             const customOpts = $xeTable.computeCustomOpts;
-            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
+            const { allowVisible, allowSort, allowFixed, allowAlign, allowHeaderAlign, allowFooterAlign, allowResizable, allowGroup, allowValues } = customOpts;
             XEUtils.eachTree(customColumnList, column => {
                 const colid = column.getKey();
                 const visible = !!oldVisibleMaps[colid];
@@ -232,6 +271,21 @@ export default {
                 if (allowResizable) {
                     column.renderResizeWidth = column.renderWidth;
                 }
+                if (allowAlign) {
+                    column.align = column.renderAlign;
+                }
+                if (allowHeaderAlign) {
+                    column.headerAlign = column.renderHeaderAlign;
+                }
+                if (allowFooterAlign) {
+                    column.footerAlign = column.renderFooterAlign;
+                }
+                if (allowGroup) {
+                    // 无
+                }
+                if (allowValues) {
+                    // 无
+                }
             }, { children: 'children' });
             return $xeTable.$nextTick();
         },
@@ -248,7 +302,10 @@ export default {
                 resizable: options === true,
                 fixed: options === true,
                 sort: options === true,
-                aggFunc: options === true
+                aggFunc: options === true,
+                align: options === true,
+                headerAlign: options === true,
+                footerAlign: options === true
             }, options);
             const allCols = [];
             XEUtils.eachTree(collectColumn, (column) => {
@@ -257,6 +314,7 @@ export default {
                 }
                 if (opts.fixed) {
                     column.fixed = column.defaultFixed;
+                    column.renderFixed = column.defaultFixed;
                 }
                 if (opts.sort) {
                     column.renderSortNumber = column.sortNumber;
@@ -265,6 +323,18 @@ export default {
                 if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
                     column.visible = column.defaultVisible;
                 }
+                if (opts.align) {
+                    column.align = column.defaultAlign;
+                    column.renderAlign = column.defaultAlign;
+                }
+                if (opts.headerAlign) {
+                    column.headerAlign = column.defaultHeaderAlign;
+                    column.renderHeaderAlign = column.defaultHeaderAlign;
+                }
+                if (opts.footerAlign) {
+                    column.footerAlign = column.defaultFooterAlign;
+                    column.renderFooterAlign = column.defaultFooterAlign;
+                }
                 if (opts.aggFunc) {
                     column.aggFunc = column.defaultAggFunc;
                     column.renderAggFn = column.defaultAggFunc;
@@ -365,11 +435,13 @@ export default {
             if (customStore.visible) {
                 $xeTable.closeCustom();
                 emitCustomEvent($xeTable, 'close', evnt);
+                $xeTable.dispatchEvent('custom-close', {}, evnt);
             }
             else {
                 customStore.btnEl = evnt.target;
                 $xeTable.openCustom();
                 emitCustomEvent($xeTable, 'open', evnt);
+                $xeTable.dispatchEvent('custom-open', {}, evnt);
             }
         },
         customOpenEvent(evnt) {
@@ -381,6 +453,7 @@ export default {
                 customStore.btnEl = evnt.target;
                 $xeTable.openCustom();
                 emitCustomEvent($xeTable, 'open', evnt);
+                $xeTable.dispatchEvent('custom-open', {}, evnt);
             }
         },
         customCloseEvent(evnt) {
@@ -391,6 +464,7 @@ export default {
                 customStore.activeBtn = false;
                 $xeTable.closeCustom();
                 emitCustomEvent($xeTable, 'close', evnt);
+                $xeTable.dispatchEvent('custom-close', {}, evnt);
             }
         },
         handleUpdateCustomColumn() {
@@ -408,6 +482,9 @@ export default {
                     column.renderFixed = column.fixed;
                     column.renderVisible = column.visible;
                     column.renderResizeWidth = column.renderWidth;
+                    column.renderAlign = column.align;
+                    column.renderHeaderAlign = column.headerAlign;
+                    column.renderFooterAlign = column.footerAlign;
                     sortMaps[colid] = column.renderSortNumber;
                     fixedMaps[colid] = column.fixed;
                     visibleMaps[colid] = column.visible;