From ab2c7efe6994dacfe0ff407783f2c3b246427bfc Mon Sep 17 00:00:00 2001
From: Lan <6995syu@163.com>
Date: Wed, 16 Jun 2021 22:23:39 +0800
Subject: [PATCH] perf(PageWrapper): fix the height calculation problem when
 footer and global footer are opened at the same time (#760)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf(PageWrapper): 优化PageWrapper在page的footer与全局页脚同时开启时的高度计算表现。

* docs(PageWrapper): 修复footer与全局页脚同时开启时的高度计算问题

Co-authored-by: NorthLan <lan6995@gmail.com>
---
 CHANGELOG.zh_CN.md                      |  1 +
 src/components/Page/src/PageWrapper.vue | 32 +++++++++++++++++++++++--
 src/layouts/default/footer/index.vue    |  2 +-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index f6663b41..4d82ede0 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -18,6 +18,7 @@
 - **PageWrapper** 修复高度计算问题
 - **FlowChart** 修复拖放菜单丢失
 - 修复后台模式下，Iframe 路由错误
+- **PageWrapper** 修复 footer 与全局页脚同时开启时的高度计算问题
 
 ## 2.4.2(2021-06-10)
 
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index 583e1369..d5e9aaba 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -96,7 +96,6 @@
           ...contentStyle,
           minHeight: height,
           ...(fixedHeight ? { height } : {}),
-          paddingBottom: `${unref(footerHeight)}px`,
         };
       });
 
@@ -166,7 +165,36 @@
           const contentMarginTop = Number(marginTop.replace(/[^\d]/g, ''));
           subtractHeight += contentMarginTop;
         }
-        setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight);
+
+        // fix: wrapper marginTop and marginBottom value
+        let wrapperSubtractHeight = 0;
+        let wrapperMarginBottom = ZERO_PX;
+        let wrapperMarginTop = ZERO_PX;
+        const wrapperClassElments = document.querySelectorAll(`.${prefixVar}-page-wrapper`);
+        if (wrapperClassElments && wrapperClassElments.length > 0) {
+          const contentEl = wrapperClassElments[0];
+          const cssStyle = getComputedStyle(contentEl);
+          wrapperMarginBottom = cssStyle?.marginBottom ?? ZERO_PX;
+          wrapperMarginTop = cssStyle?.marginTop ?? ZERO_PX;
+        }
+        if (wrapperMarginBottom) {
+          const contentMarginBottom = Number(wrapperMarginBottom.replace(/[^\d]/g, ''));
+          wrapperSubtractHeight += contentMarginBottom;
+        }
+        if (wrapperMarginTop) {
+          const contentMarginTop = Number(wrapperMarginTop.replace(/[^\d]/g, ''));
+          wrapperSubtractHeight += contentMarginTop;
+        }
+        let height =
+          unref(contentHeight) -
+          unref(footerHeight) -
+          headerHeight -
+          subtractHeight -
+          wrapperSubtractHeight;
+        if (unref(getShowFooter)) {
+          height -= unref(footerHeightRef);
+        }
+        setPageHeight?.(height);
       }
 
       return {
diff --git a/src/layouts/default/footer/index.vue b/src/layouts/default/footer/index.vue
index 7cd2b24d..62e3c5e9 100644
--- a/src/layouts/default/footer/index.vue
+++ b/src/layouts/default/footer/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Footer :class="prefixCls" v-if="getShowLayoutFooter">
+  <Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
     <div :class="`${prefixCls}__links`">
       <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a>
 
-- 
GitLab