feat: ✨add a date class and replace all

.eslintrc.js

@@ -33,6 +33,7 @@ module.exports = {
     'no-plusplus': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
 
     'vue/multi-word-component-names': 'off'
   }

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, 0, 5),
+    endDate: new Date(2020, 5, 5),
     children: [
       {
         id: ++id,

src/components/root/index.vue

@@ -55,7 +55,7 @@ import GanttBody from '@/components/common/GanttBody.vue';
 import useSlotsBox from '@/composables/useSlotsBox';
 import useTableWidth from '@/composables/useTableWidth';
 import { uuid } from '@/utils/common';
-import { onMounted, onUpdated, ref, toRefs } from 'vue';
+import { getCurrentInstance, onMounted, onUpdated, ref, toRefs } from 'vue';
 import rootProps from './rootProps';
 import useData from '@/composables/useData';
 import useStyle from '@/composables/useStyle';
@@ -103,6 +103,8 @@ initData(data);
 // #region 获取表格宽度
 const { tableWidth } = useTableWidth();
 // #endregion
+
+console.log('.....root', getCurrentInstance());
 </script>
 
 <style scoped lang="scss">

src/composables/useData.ts

@@ -4,21 +4,29 @@ import { watch, type Ref } from 'vue';
 export default () => {
   const store = useStore();
 
+  // 设置甘特日期头
+  function setGanttHeaders() {
+    store.ganttHeader.setDate(store.$data.start, store.$data.end);
+  }
+
   function initData(data: Ref<any[]>) {
     store.$data.init(data.value);
 
+    setGanttHeaders();
+
     watch(
       () => data,
       val => {
         // 更新数据
         store.$data.update(val.value);
+
+        setGanttHeaders();
       },
       { deep: true }
     );
   }
 
   function getDateList() {
-    store.ganttHeader.setDate(store.$data.start, store.$data.end);
     return store.ganttHeader.headers;
   }
 

src/models/data/all.ts

@@ -1,4 +1,4 @@
-import { compareDate } from '@/utils/date';
+import { type XDate } from '@/utils/date';
 import { isArray } from 'lodash';
 import RowItem from './row';
 
@@ -26,12 +26,12 @@ export default class AllData {
   /**
    * 整体最开始的日期
    */
-  start: Date | null = null;
+  start?: XDate;
 
   /**
    * 整体最末尾的日期
    */
-  end: Date | null = null;
+  end?: XDate;
 
   /**
    * 整体数据结构的层级数量
@@ -207,11 +207,11 @@ export default class AllData {
    * 更新起止时间
    */
   private __updateDate(row: RowItem) {
-    if (!this.start || compareDate(row.start, this.start) === 'l') {
+    if (!this.start || row.start.compareTo(this.start) === 'l') {
       this.start = row.start;
     }
 
-    if (!this.end || compareDate(row.end, this.end) === 'r') {
+    if (!this.end || row.end.compareTo(this.end) === 'r') {
       this.end = row.end;
     }
   }

src/models/data/row.ts

@@ -2,19 +2,14 @@
  * @Author: JeremyJone
  * @Date: 2021-09-09 15:50:52
  * @LastEditors: JeremyJone
- * @LastEditTime: 2023-04-13 15:56:11
+ * @LastEditTime: 2023-04-15 23:23:12
  * @Description: 一条数据类
  */
 
 import { Variables } from '@/constants/vars';
 import { type HeaderDateUnit } from '@/typings/ParamOptions';
 import { uuid } from '@/utils/common';
-import {
-  compareDate,
-  createDate,
-  getDateOffset,
-  getMillisecond
-} from '@/utils/date';
+import { XDate } from '@/utils/date';
 import { cloneDeep, isEqual } from 'lodash';
 
 export default class RowItem {
@@ -86,14 +81,14 @@ export default class RowItem {
    * 起始时间
    */
   get start() {
-    return createDate(this.__data[this.options.startLabel]);
+    return new XDate(this.__data[this.options.startLabel]);
   }
 
   /**
    * 截止时间
    */
   get end() {
-    return createDate(this.__data[this.options.endLabel]);
+    return new XDate(this.__data[this.options.endLabel]);
   }
 
   /**
@@ -167,21 +162,21 @@ export default class RowItem {
    * @param linkage 是否联动
    */
   setStart(
-    date: Date,
+    date: XDate,
     unit: HeaderDateUnit,
     linkage = false,
     modifyArr: RowItem[] = []
   ) {
-    this.__data[this.options.startLabel] = date;
+    this.__data[this.options.startLabel] = date.date;
 
     // 首先判断起始日期不能大于结束日期
     if (
-      compareDate(date, getDateOffset(this.end, -getMillisecond(unit))) === 'r'
+      date.compareTo(this.end.getOffset(Variables.time.millisecondOfDay)) ===
+      'r'
     )
-      this.data[this.options.endLabel] = getDateOffset(
-        date,
-        getMillisecond(unit)
-      );
+      this.data[this.options.endLabel] = date.getOffset(
+        Variables.time.millisecondOfDay
+      ).date;
 
     // if (!linkage) return;
 
@@ -203,21 +198,22 @@ export default class RowItem {
   }
 
   setEnd(
-    date: Date,
+    date: XDate,
     unit: HeaderDateUnit,
     linkage = false,
     modifyArr: RowItem[] = []
   ) {
-    this.data[this.options.endLabel] = date;
+    this.data[this.options.endLabel] = date.date;
 
     // 首先判断起始日期不能大于结束日期
+
     if (
-      compareDate(date, getDateOffset(this.start, getMillisecond(unit))) === 'l'
+      date.compareTo(this.start.getOffset(Variables.time.millisecondOfDay)) ===
+      'l'
     )
-      this.data[this.options.startLabel] = getDateOffset(
-        date,
-        -getMillisecond(unit)
-      );
+      this.data[this.options.startLabel] = date.getOffset(
+        Variables.time.millisecondOfDay
+      ).date;
 
     // if (!linkage) return;
 
@@ -250,13 +246,13 @@ export default class RowItem {
     for (let i = 0; i < node.children.length; i++) {
       const c = node.children[i];
       if (key === 'start') {
-        if (compareDate(c.start, node.start) === 'l') {
+        if (c.start.compareTo(node.start) === 'l') {
           c.setStart(node.start, unit);
           modifyArr.push(c);
           this.__setChildrenDate(c, key, unit, modifyArr);
         }
       } else if (key === 'end') {
-        if (compareDate(c.end, node.end) === 'r') {
+        if (c.end.compareTo(node.end) === 'r') {
           c.setEnd(node.end, unit);
           modifyArr.push(c);
           this.__setChildrenDate(c, key, unit, modifyArr);

src/models/param/header.ts

@@ -1,3 +1,5 @@
+import { type HeaderDateUnit } from '@/typings/ParamOptions';
+import { type XDate } from '@/utils/date';
 import { isArray } from 'lodash';
 import { type VNode } from 'vue';
 
@@ -167,22 +169,24 @@ class GanttHeader extends Header {
    */
   headers: GanttColumn[][] = [];
 
-  start: Date | null = null;
-  end: Date | null = null;
+  start?: XDate;
+  end?: XDate;
+  unit: HeaderDateUnit = 'day';
 
   /**
    * 设置日期
    */
-  setDate(start: Date | null, end: Date | null) {
+  setDate(start?: XDate, end?: XDate, unit: HeaderDateUnit = 'day') {
     this.start = start;
     this.end = end;
+    this.unit = unit;
 
     this.generate();
   }
 
   generate() {
-    // TODO:根据日期生成一个树形日期结构
-    // 结构大体：[{date: 2020-1, children: [{date: 1}, {date: 2}, {date: 3}]}, {date: 2020-2, children: [{date: 1}, {date: 2}]}]
+    // TODO:根据日期和单位生成一个树形日期结构
+
     const columns: GanttColumn[] = [
       {
         date: '2020-1',