From e315b06175eb6c8007f1ebdea3162fd8a4c1c468 Mon Sep 17 00:00:00 2001
From: jeremyjone <jeremyjone@qq.com>
Date: Mon, 17 Apr 2023 11:09:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8add=20reactive=20gantt=20heade?=
 =?UTF-8?q?r=20by=20unit=20and=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/demo.vue                         |  2 +-
 src/components/common/GanttHeader.vue |  5 ++--
 src/components/root/index.vue         | 27 ++++++++++++++++--
 src/components/root/rootProps.ts      | 17 +++++++-----
 src/composables/useData.ts            | 25 ++++++++++++-----
 src/composables/useGanttWidth.ts      | 21 ++++++++++++--
 src/composables/useStyle.ts           |  3 ++
 src/models/param/header.ts            | 40 +++++++++++++++++++++------
 src/models/param/styles.ts            | 31 ++++++++++++++++-----
 src/typings/size.d.ts                 | 15 ++++++++++
 10 files changed, 148 insertions(+), 38 deletions(-)
 create mode 100644 src/typings/size.d.ts

diff --git a/demo/demo.vue b/demo/demo.vue
index fee1732..73a749d 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -48,7 +48,7 @@ ganttData[0].children = [
     id: ++id,
     name: 'sub-t' + id,
     startDate: new Date(2020, 0, 1),
-    endDate: new Date(2020, 5, 5),
+    endDate: new Date(2020, 0, 5),
     children: [
       {
         id: ++id,
diff --git a/src/components/common/GanttHeader.vue b/src/components/common/GanttHeader.vue
index df86b0d..5ecd278 100644
--- a/src/components/common/GanttHeader.vue
+++ b/src/components/common/GanttHeader.vue
@@ -28,9 +28,8 @@ import useStyle from '@/composables/useStyle';
 
 const { $styleBox } = useStyle();
 
-const { getDateList } = useData();
-const dateList = getDateList();
-console.log('getDateList', dateList);
+const { dateList } = useData();
+console.log('getDateList', dateList.value);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/root/index.vue b/src/components/root/index.vue
index cf27680..eb8c0ac 100644
--- a/src/components/root/index.vue
+++ b/src/components/root/index.vue
@@ -55,7 +55,14 @@ import GanttBody from '@/components/common/GanttBody.vue';
 import useSlotsBox from '@/composables/useSlotsBox';
 import useTableWidth from '@/composables/useTableWidth';
 import { uuid } from '@/utils/common';
-import { getCurrentInstance, onMounted, onUpdated, ref, toRefs } from 'vue';
+import {
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  onUpdated,
+  ref,
+  toRefs
+} from 'vue';
 import rootProps from './rootProps';
 import useData from '@/composables/useData';
 import useStyle from '@/composables/useStyle';
@@ -93,6 +100,10 @@ const { setSlots } = useSlotsBox();
 setSlots(props.slots);
 // #endregion
 
+// #region 获取表格宽度
+const { tableWidth } = useTableWidth();
+// #endregion
+
 // #region 处理数据
 const { data } = toRefs(props);
 
@@ -100,8 +111,18 @@ const { initData } = useData();
 initData(data);
 // #endregion
 
-// #region 获取表格宽度
-const { tableWidth } = useTableWidth();
+// #region 监听 gantt 尺寸变化，表头和宽度需要重新渲染
+const ganttResizeObserver = ref<ResizeObserver>();
+const { setGanttHeaders } = useData();
+
+onMounted(() => {
+  ganttResizeObserver.value = new ResizeObserver(setGanttHeaders);
+  ganttRef?.value && ganttResizeObserver.value?.observe(ganttRef.value.$el);
+});
+
+onUnmounted(() => {
+  ganttResizeObserver.value = undefined;
+});
 // #endregion
 
 console.log('.....root', getCurrentInstance());
diff --git a/src/components/root/rootProps.ts b/src/components/root/rootProps.ts
index 9076953..d81089e 100644
--- a/src/components/root/rootProps.ts
+++ b/src/components/root/rootProps.ts
@@ -1,11 +1,6 @@
 import { type PropType, type Slots } from 'vue';
 import { Errors } from '@/constants/errors';
 import { Variables } from '@/constants/vars';
-import {
-  type GanttColumnSize,
-  type ParamBodyOptions,
-  type ParamHeaderOptions
-} from '@/typings/ParamOptions';
 import { parseNumber } from '@/utils/common';
 
 export default {
@@ -185,7 +180,7 @@ export default {
    * 头部样式，一个对象
    */
   headerStyle: {
-    type: Object as PropType<ParamHeaderOptions>,
+    type: Object as PropType<HeaderOptions>,
     default: () => {
       return {};
     }
@@ -195,7 +190,7 @@ export default {
    * 内容样式，一个对象
    */
   bodyStyle: {
-    type: Object as PropType<ParamBodyOptions>,
+    type: Object as PropType<BodyOptions>,
     default: () => {
       return {};
     }
@@ -223,5 +218,13 @@ export default {
   showSettingBtn: {
     type: Boolean,
     default: true
+  },
+
+  /**
+   * 日期单位
+   */
+  unit: {
+    type: String as PropType<HeaderDateUnit>,
+    default: 'day'
   }
 };
diff --git a/src/composables/useData.ts b/src/composables/useData.ts
index a42d9ab..9e0ec7e 100644
--- a/src/composables/useData.ts
+++ b/src/composables/useData.ts
@@ -1,12 +1,22 @@
 import { useStore } from '@/store';
-import { watch, type Ref } from 'vue';
+import { computed, watch, type Ref } from 'vue';
+import useGanttWidth from './useGanttWidth';
+import useTableWidth from './useTableWidth';
 
 export default () => {
   const store = useStore();
+  const { ganttColumnWidth } = useGanttWidth();
+  const { tableWidth } = useTableWidth();
 
   // 设置甘特日期头
   function setGanttHeaders() {
-    store.ganttHeader.setDate(store.$data.start, store.$data.end);
+    store.ganttHeader.setDate(
+      // 使用 window 的宽度减去 table 的宽度，就是最小需要的列数，再加一个阈值即可
+      (window.innerWidth - tableWidth.value) / ganttColumnWidth.value + 5,
+      store.$data.start,
+      store.$data.end,
+      store.$styleBox.unit
+    );
   }
 
   function initData(data: Ref<any[]>) {
@@ -26,9 +36,10 @@ export default () => {
     );
   }
 
-  function getDateList() {
-    return store.ganttHeader.headers;
-  }
-
-  return { $data: store.$data, initData, getDateList };
+  return {
+    $data: store.$data,
+    initData,
+    dateList: computed(() => store.ganttHeader.headers),
+    setGanttHeaders
+  };
 };
diff --git a/src/composables/useGanttWidth.ts b/src/composables/useGanttWidth.ts
index 8924a22..0aecc74 100644
--- a/src/composables/useGanttWidth.ts
+++ b/src/composables/useGanttWidth.ts
@@ -4,9 +4,26 @@ import { computed } from 'vue';
 export default () => {
   const store = useStore();
 
+  const ganttColumnWidth = computed(() => {
+    // const size = store.$styleBox.ganttColumnSize;
+    // switch (size) {
+    //   case 'small':
+    //     if (store.$styleBox.unit === 'week') return 7;
+    //     return 15;
+    //   case 'large':
+    //     if (store.$styleBox.unit === 'week') return 30;
+    //     return 60;
+    //   case 'normal':
+    //   default:
+    //     if (store.$styleBox.unit === 'week') return 15;
+    //     return 30;
+    // }
+    return 30;
+  });
+
   const ganttWidth = computed(() => {
-    return store.ganttHeader.headers[1].length * 30;
+    return store.ganttHeader.headers[1].length * ganttColumnWidth.value;
   });
 
-  return { ganttWidth };
+  return { ganttWidth, ganttColumnWidth };
 };
diff --git a/src/composables/useStyle.ts b/src/composables/useStyle.ts
index eb840ad..3e88ed7 100644
--- a/src/composables/useStyle.ts
+++ b/src/composables/useStyle.ts
@@ -10,6 +10,9 @@ export default () => {
   const setStyles = (props: ExtractPropTypes<typeof rootProps>) => {
     store.$styleBox.setBorder(props.border);
     store.$styleBox.setBorderColor(props.borderColor);
+
+    store.$styleBox.ganttColumnSize = props.ganttColumnSize;
+    store.$styleBox.unit = props.unit;
   };
 
   return { bodyHeight, setStyles, $styleBox: store.$styleBox };
diff --git a/src/models/param/header.ts b/src/models/param/header.ts
index 1abc701..8b39dc4 100644
--- a/src/models/param/header.ts
+++ b/src/models/param/header.ts
@@ -49,7 +49,18 @@ class GanttColumn extends Column {
     super();
 
     this.date = date;
-    this.label = this.date.getBy(unit).toString();
+
+    // this.label = this.date.getBy(unit).toString();
+    switch (unit) {
+      case 'month':
+        this.label = this.date.toMonth();
+        break;
+      case 'week':
+        this.label = this.date.toWeek();
+        break;
+      default:
+        this.label = this.date.getBy(unit).toString();
+    }
   }
 }
 
@@ -179,19 +190,28 @@ class GanttHeader extends Header {
   start?: XDate;
   end?: XDate;
   unit: HeaderDateUnit = 'day';
+  minLength: number = 0;
 
   /**
    * 设置日期
    */
-  setDate(start?: XDate, end?: XDate, unit: HeaderDateUnit = 'day') {
+  setDate(
+    minLen: number,
+    start?: XDate,
+    end?: XDate,
+    unit: HeaderDateUnit = 'day'
+  ) {
     this.start = start;
     this.end = end;
     this.unit = unit;
+    this.minLength = minLen;
 
     this.generate();
   }
 
   generate() {
+    this.dates = [];
+
     // 通过 start 和 end 以及 unit 来生成 columns
     const columns: GanttColumn[] = [];
 
@@ -199,12 +219,16 @@ class GanttHeader extends Header {
     const end = this.end!.date.getTime();
 
     // TODO 这里可以优化一下，直接一次循环就可以组成 headers。因为是固定格式
-    for (
-      let i = start;
-      i <= end;
-      i += Variables.time.millisecondOf[this.unit]
-    ) {
-      this.dates.push(new XDate(i));
+    let s: number;
+    const step = Variables.time.millisecondOf[this.unit];
+    for (s = start; s <= end; s += step) {
+      this.dates.push(new XDate(s));
+    }
+
+    // 保证要占满所有宽度
+    while (this.dates.length < this.minLength) {
+      this.dates.push(new XDate(s));
+      s += step;
     }
 
     let last: number;
diff --git a/src/models/param/styles.ts b/src/models/param/styles.ts
index 1b55a1d..d0af9b7 100644
--- a/src/models/param/styles.ts
+++ b/src/models/param/styles.ts
@@ -1,22 +1,39 @@
 type Style = Record<string, string>;
 
 export default class StyleBox {
-  private border: number = 1;
-  private borderColor: string = '#e5e5e5';
-
+  private __border: number = 1;
   setBorder(b: number) {
-    this.border = b;
+    this.__border = b;
   }
 
   getBorder(): Style {
-    return { border: `${this.border}px solid` };
+    return { border: `${this.__border}px solid` };
   }
 
+  private __borderColor: string = '#e5e5e5';
   setBorderColor(bc: string) {
-    this.borderColor = bc;
+    this.__borderColor = bc;
   }
 
   getBorderColor(): Style {
-    return { 'border-color': this.borderColor };
+    return { 'border-color': this.__borderColor };
+  }
+
+  private __ganttColumnSize: GanttColumnSize = 'normal';
+  public set ganttColumnSize(gs: GanttColumnSize) {
+    this.__ganttColumnSize = gs;
+  }
+
+  public get ganttColumnSize(): GanttColumnSize {
+    return this.__ganttColumnSize;
+  }
+
+  private __unit: HeaderDateUnit = 'day';
+  public get unit(): HeaderDateUnit {
+    return this.__unit;
+  }
+
+  public set unit(v: HeaderDateUnit) {
+    this.__unit = v;
   }
 }
diff --git a/src/typings/size.d.ts b/src/typings/size.d.ts
new file mode 100644
index 0000000..e49325e
--- /dev/null
+++ b/src/typings/size.d.ts
@@ -0,0 +1,15 @@
+declare type GanttColumnSize = 'small' | 'normal' | 'large';
+
+declare interface HeaderOptions {
+  bgColor?: string;
+  textColor?: string;
+}
+
+declare interface BodyOptions {
+  todayColor?: string;
+  weekendColor?: string;
+  bgColor?: string;
+  textColor?: string;
+  hoverColor?: string;
+  selectColor?: string;
+}