From ddca95c24da85168774666ef8bd96187dda459aa Mon Sep 17 00:00:00 2001
From: jeremyjone <jeremyjone@qq.com>
Date: Mon, 1 May 2023 23:37:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=E8=A1=A8=E5=A4=B4=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E5=90=8E=E5=B7=A6=E5=8F=B3=E9=AB=98=E5=BA=A6=E4=B8=8D?=
 =?UTF-8?q?=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/GanttHeader.vue   | 11 +++++++--
 src/components/common/TableHeader.vue   | 31 +++++++++++++++++++++----
 src/components/common/TableHeaderTh.vue |  8 +++++--
 src/models/param/param.ts               |  9 +++++++
 4 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/components/common/GanttHeader.vue b/src/components/common/GanttHeader.vue
index cea69ac..e881dd8 100644
--- a/src/components/common/GanttHeader.vue
+++ b/src/components/common/GanttHeader.vue
@@ -1,5 +1,11 @@
 <template>
-  <table class="xg-gantt-header" cellpadding="0" cellspacing="0" border="0">
+  <table
+    class="xg-gantt-header"
+    :style="{ height: `${$param.headerHeight}px` }"
+    cellpadding="0"
+    cellspacing="0"
+    border="0"
+  >
     <colgroup>
       <template v-for="i in dateList[1].length" :key="i">
         <col :width="`${ganttColumnWidth}px`" />
@@ -26,7 +32,9 @@
 import useData from '@/composables/useData';
 import useGanttWidth from '@/composables/useGanttWidth';
 import useStyle from '@/composables/useStyle';
+import useParam from '@/composables/useParam';
 
+const { $param } = useParam();
 const { $styleBox } = useStyle();
 const { dateList } = useData();
 const { ganttColumnWidth } = useGanttWidth();
@@ -35,7 +43,6 @@ const { ganttColumnWidth } = useGanttWidth();
 <style lang="scss" scoped>
 .xg-gantt-header {
   width: 100%;
-  height: 80px;
   background-color: blueviolet;
   table-layout: fixed;
   border-collapse: separate;
diff --git a/src/components/common/TableHeader.vue b/src/components/common/TableHeader.vue
index db57607..fb6b8b2 100644
--- a/src/components/common/TableHeader.vue
+++ b/src/components/common/TableHeader.vue
@@ -1,5 +1,12 @@
 <template>
-  <table class="xg-table-header" cellpadding="0" cellspacing="0" border="0">
+  <table
+    ref="tableRef"
+    class="xg-table-header"
+    :style="{ height: `${$param.headerHeight}px` }"
+    cellpadding="0"
+    cellspacing="0"
+    border="0"
+  >
     <colgroup>
       <template v-for="(c, i) in $slotsBox.tableHeaders.leafs" :key="i">
         <col :width="c.width" />
@@ -7,23 +14,39 @@
     </colgroup>
     <thead>
       <tr v-for="(r, trIndex) in $slotsBox.tableHeaders.headers" :key="trIndex">
-        <TableHeaderTh v-for="(c, i) in r" :key="i" :column="c" />
+        <TableHeaderTh
+          v-for="(c, i) in r"
+          :key="i"
+          :column="c"
+          @resize="onResize"
+        />
       </tr>
     </thead>
   </table>
 </template>
 
 <script lang="ts" setup>
-import TableHeaderTh from './TableHeaderTh.vue';
+import { nextTick, ref } from 'vue';
 import useSlotsBox from '@/composables/useSlotsBox';
+import useParams from '@/composables/useParam';
+import TableHeaderTh from './TableHeaderTh.vue';
+import Variables from '@/constants/vars';
 
 const { $slotsBox } = useSlotsBox();
+
+const { $param } = useParams();
+const tableRef = ref<HTMLElement | null>(null);
+const onResize = () => {
+  nextTick(() => {
+    const table = tableRef.value;
+    $param.headerHeight = table?.clientHeight ?? Variables.default.headerHeight;
+  });
+};
 </script>
 
 <style lang="scss" scoped>
 .xg-table-header {
   width: 100%;
-  height: 80px;
   background-color: blueviolet;
   table-layout: fixed;
   border-collapse: separate;
diff --git a/src/components/common/TableHeaderTh.vue b/src/components/common/TableHeaderTh.vue
index 974731c..86fd963 100644
--- a/src/components/common/TableHeaderTh.vue
+++ b/src/components/common/TableHeaderTh.vue
@@ -28,6 +28,8 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['resize']);
+
 const { $slotsBox } = useSlotsBox();
 
 const { $styleBox } = useStyle();
@@ -46,12 +48,14 @@ onResizeTableColumn(headerRef, {
   onEnd: x => {
     $slotsBox.tableHeaders.leafs[index].width = Math.max(
       $slotsBox.tableHeaders.leafs[index].width + x,
-      20
+      40
     );
+
+    emit('resize');
   },
 
   preMove: (x, clientX) => {
-    if ($slotsBox.tableHeaders.leafs[index].width + x < 20) return false;
+    if ($slotsBox.tableHeaders.leafs[index].width + x < 40) return false;
     return true;
   }
 });
diff --git a/src/models/param/param.ts b/src/models/param/param.ts
index 490f9ea..50cb389 100644
--- a/src/models/param/param.ts
+++ b/src/models/param/param.ts
@@ -43,4 +43,13 @@ export default class Param {
   public set showMoveLine(v: boolean) {
     this._showMoveLine = v;
   }
+
+  private _headerHeight: number = 80;
+  public get headerHeight(): number {
+    return this._headerHeight;
+  }
+
+  public set headerHeight(v: number) {
+    this._headerHeight = v;
+  }
 }