From 3cd18f18f767de842c7464dbaed89dcef18b4b79 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 28 Apr 2022 14:53:35 +0800
Subject: [PATCH] feat: calc top for table affix

---
 src/layouts/components/Header.vue         | 17 +++++++++++++++++
 src/pages/list/base/index.vue             |  9 ++++++++-
 src/pages/list/components/CommonTable.vue | 13 +++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 14878ac..a8d6493 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -161,6 +161,23 @@ const navToHelper = () => {
     height: 64px;
   }
 
+  &-menu-fixed {
+    position: fixed;
+    top: 0;
+    z-index: 1001;
+
+    &-side {
+      left: 232px;
+      right: 0;
+      z-index: 10;
+      width: auto;
+      transition: all 0.3s;
+      &-compact {
+        left: 64px;
+      }
+    }
+  }
+
   &-logo-container {
     cursor: pointer;
     display: inline-flex;
diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue
index 4047ffa..340b766 100644
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@@ -26,7 +26,7 @@
         :selected-row-keys="selectedRowKeys"
         :loading="dataLoading"
         :header-affixed-top="true"
-        :header-affix-props="{ offsetTop: 0, container: getContainer }"
+        :header-affix-props="{ offsetTop, container: getContainer }"
         @page-change="rehandlePageChange"
         @change="rehandleChange"
         @select-change="rehandleSelectChange"
@@ -85,9 +85,12 @@ import { CONTRACT_STATUS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES } from '@/const
 import Trend from '@/components/trend/index.vue';
 import { ResDataType } from '@/interface';
 import request from '@/utils/request';
+import { useSettingStore } from '@/store';
 
 import { COLUMNS } from './constants';
 
+const store = useSettingStore();
+
 const data = ref([]);
 const pagination = ref({
   defaultPageSize: 20,
@@ -179,6 +182,10 @@ const handleClickDelete = (row: { rowIndex: any }) => {
   confirmVisible.value = true;
 };
 
+const offsetTop = computed(() => {
+  return store.isUseTabsRouter ? 48 : 0;
+});
+
 const getContainer = () => {
   return document.querySelector('.tdesign-starter-layout');
 };
diff --git a/src/pages/list/components/CommonTable.vue b/src/pages/list/components/CommonTable.vue
index 411dc02..0fe29cd 100644
--- a/src/pages/list/components/CommonTable.vue
+++ b/src/pages/list/components/CommonTable.vue
@@ -64,6 +64,8 @@
         :hover="hover"
         :pagination="pagination"
         :loading="dataLoading"
+        :header-affixed-top="true"
+        :header-affix-props="{ offsetTop, container: getContainer }"
         @page-change="rehandlePageChange"
         @change="rehandleChange"
       >
@@ -108,6 +110,7 @@ import { MessagePlugin } from 'tdesign-vue-next';
 import Trend from '@/components/trend/index.vue';
 import request from '@/utils/request';
 import { ResDataType } from '@/interface';
+import { useSettingStore } from '@/store';
 
 import {
   CONTRACT_STATUS,
@@ -117,6 +120,8 @@ import {
   CONTRACT_PAYMENT_TYPES,
 } from '@/constants';
 
+const store = useSettingStore();
+
 const COLUMNS = [
   {
     title: '合同名称',
@@ -250,6 +255,14 @@ const rehandleChange = (changeParams, triggerAndData) => {
 const rehandleClickOp = ({ text, row }) => {
   console.log(text, row);
 };
+
+const offsetTop = computed(() => {
+  return store.isUseTabsRouter ? 48 : 0;
+});
+
+const getContainer = () => {
+  return document.querySelector('.tdesign-starter-layout');
+};
 </script>
 
 <style lang="less">