fix(components): fix multi gantt component in one page problem

ISSUES CLOSED: #10

src/App.vue

@@ -195,7 +195,7 @@
     </template>
   </div>
 
-  <!-- <div v-show="isMulti" aria-label="多页">
+  <div v-show="isMulti" aria-label="多页">
     <div style="padding-bottom: 10px">
       <div style="height: 200px; padding-bottom: 10px">
         <JGantt
@@ -385,7 +385,7 @@
         </div>
       </template>
     </div>
-  </div> -->
+  </div>
 
   <div class="tip-text">按 F12 打开控制台以查看事件输出内容。</div>
 
@@ -407,7 +407,7 @@ export default defineComponent({
 
   data() {
     return {
-      isMulti: false,
+      isMulti: true,
       changeColor: 0,
       isDark: false,
       dataList: [] as any[],

src/components/gantt/index.vue

@@ -31,6 +31,7 @@
         :style="weekendStyle(item)"
       />
 
+      <!-- TODO: 递归问题 -->
       <RowWrap :data="rowData" :name="Variables.name.ganttRow" />
     </div>
   </div>

src/composables/data/useData.ts

@@ -1,21 +1,22 @@
-import { ComputedRef, reactive, Ref, computed, watch } from 'vue';
-import { GanttData } from '@/models/data/data';
+import { ComputedRef, Ref, computed, watch } from 'vue';
 import { Row } from '@/models/data/row';
 // eslint-disable-next-line import/no-cycle
 import { useSetGanttHeader } from '../useParam';
 import useRootEmit from '../event/useRootEmit';
-
-// 全局共享一个数据对象
-const GtData = reactive(new GanttData());
+import { useStore } from '@/store';
 
 export default () => {
-  return { GtData };
+  const store = useStore();
+  return { GtData: store.GtData };
 };
 
 export function useInitData(
   data: Ref<Array<any>>,
   options: ComputedRef<DataOptions>
 ) {
+  const store = useStore();
+  const { GtData } = store;
+
   const { setHeaders } = useSetGanttHeader();
   const { IFClickRow } = useRootEmit();
 

src/composables/event/useInitEvent.ts

@@ -1,12 +1,12 @@
-import { ref } from 'vue';
-
-const rootEmit = ref();
+import { useStore } from '@/store';
 
 export default (emit: any) => {
-  rootEmit.value = emit;
+  const store = useStore();
+  store.rootEmit.value = emit;
   return {};
 };
 
 export function useGetRootEmit() {
-  return rootEmit;
+  const store = useStore();
+  return store.rootEmit;
 }

src/composables/useGanttRef.ts

@@ -1,11 +1,11 @@
-import { ref } from 'vue';
-
-const ganttRef = ref<HTMLDivElement>();
+import { useStore } from '@/store';
 
 export function useInitGanttRef() {
-  return { ganttRef };
+  const store = useStore();
+  return { ganttRef: store.ganttRef };
 }
 
 export default () => {
-  return { ganttRef };
+  const store = useStore();
+  return { ganttRef: store.ganttRef };
 };

src/composables/useMask.ts

@@ -1,20 +1,21 @@
-import { computed, ref } from 'vue';
-
-const isShowMask = ref(false);
+import { computed } from 'vue';
+import { useStore } from '@/store';
 
 export default () => {
+  const store = useStore();
+
   function showMask() {
-    isShowMask.value = true;
+    store.isShowMask.value = true;
   }
 
   function hideMask() {
-    isShowMask.value = false;
+    store.isShowMask.value = false;
   }
 
   const maskClass = computed(() => {
     return {
-      'gt-mask-show': isShowMask.value,
-      'gt-mask-hide': !isShowMask.value
+      'gt-mask-show': store.isShowMask.value,
+      'gt-mask-hide': !store.isShowMask.value
     };
   });
 

src/composables/useParam.ts

@@ -1,35 +1,42 @@
-import { reactive, Slots, toRefs, watch, ref, computed } from 'vue';
+import { Slots, toRefs, watch, computed } from 'vue';
 import { Variables } from '@/constants/vars';
-import { ParamData } from '@/models/param/param';
 import { parseNumber } from '@/utils/common';
 import { getDateInterval, getDateOffset, getMillisecond } from '@/utils/date';
 // eslint-disable-next-line import/no-cycle
 import useData from './data/useData';
 import { HeaderDateUnit } from '@/typings/ParamOptions';
 import { Errors } from '@/constants/errors';
+import { useStore } from '@/store';
 
-// 全局共享一个参数对象
-const GtParam = reactive(new ParamData());
-const oneDayWidth = computed(() => {
-  const size = GtParam.ganttOptions.columnSize ?? 'normal';
-  switch (size) {
-    case 'small':
-      if (GtParam.headerUnit === 'week') return 7;
-      if (GtParam.headerUnit === 'month') return 4;
-      return 15;
-    case 'large':
-      if (GtParam.headerUnit === 'week') return 30;
-      if (GtParam.headerUnit === 'month') return 15;
-      return 60;
-    case 'normal':
-    default:
-      if (GtParam.headerUnit === 'week') return 15;
-      if (GtParam.headerUnit === 'month') return 8;
-      return 30;
-  }
-});
+const useParamObject = () => {
+  const store = useStore();
+  const { GtParam } = store;
+
+  return {
+    GtParam,
+    oneDayWidth: computed(() => {
+      const size = GtParam.ganttOptions.columnSize ?? 'normal';
+      switch (size) {
+        case 'small':
+          if (GtParam.headerUnit === 'week') return 7;
+          if (GtParam.headerUnit === 'month') return 4;
+          return 15;
+        case 'large':
+          if (GtParam.headerUnit === 'week') return 30;
+          if (GtParam.headerUnit === 'month') return 15;
+          return 60;
+        case 'normal':
+        default:
+          if (GtParam.headerUnit === 'week') return 15;
+          if (GtParam.headerUnit === 'month') return 8;
+          return 30;
+      }
+    })
+  };
+};
 
 export default () => {
+  const { GtParam, oneDayWidth } = useParamObject();
   return {
     GtParam,
     colSize: computed(() => GtParam.ganttOptions.columnSize ?? 'normal'),
@@ -39,10 +46,12 @@ export default () => {
   };
 };
 
-const initGanttWidth = ref(0);
 export function useSetGanttHeader() {
+  const { GtParam, oneDayWidth } = useParamObject();
   const { GtData } = useData();
 
+  const store = useStore();
+
   function setHeaders() {
     const start = GtData.start as Date;
     const end = GtData.end as Date;
@@ -51,9 +60,10 @@ export function useSetGanttHeader() {
     const d =
       getDateInterval(start, tmpEnd) / getMillisecond(GtParam.headerUnit);
 
-    if (d * oneDayWidth.value < initGanttWidth.value) {
+    if (d * oneDayWidth.value < store.initGanttWidth.value) {
       const offset =
-        (initGanttWidth.value - d * oneDayWidth.value) / oneDayWidth.value;
+        (store.initGanttWidth.value - d * oneDayWidth.value) /
+        oneDayWidth.value;
       tmpEnd = getDateOffset(
         tmpEnd,
         offset * getMillisecond(GtParam.headerUnit)
@@ -64,13 +74,14 @@ export function useSetGanttHeader() {
   }
 
   return {
-    initGanttWidth,
+    initGanttWidth: store.initGanttWidth,
     setHeaders
   };
 }
 
 export function useInitParam(props: any, slots: Readonly<Slots>) {
   const { setHeaders } = useSetGanttHeader();
+  const { GtParam } = useParamObject();
   const {
     showCheckbox,
     showExpand,
@@ -163,6 +174,8 @@ export function useInitParam(props: any, slots: Readonly<Slots>) {
 }
 
 export function useExportParamFunc() {
+  const { GtParam } = useParamObject();
+
   function updateGanttHeaderUnit(unit: HeaderDateUnit) {
     if (['day', 'week', 'month'].includes(unit)) {
       GtParam.headerUnit = unit;

src/composables/useResize.ts

@@ -13,6 +13,7 @@ import { isNumber } from '@/utils/is';
 import useGanttRef from './useGanttRef';
 import useRootRef from './useRootRef';
 import useData from './data/useData';
+import { useStore } from '@/store';
 
 export default () => {
   const { GtParam, oneDayWidth } = useParam();
@@ -65,35 +66,32 @@ export function useResizeGanttObserver() {
   return {};
 }
 
-// 设置移动线
-const columnSliderLineVisible = ref(false);
-const columnSliderLineLeft = ref(0);
-const columnDefaultLeft = ref(-1);
 /**
  * 左侧表格调整列宽方法
  */
 export function useResizeTableColumn() {
   const { GtParam } = useParam();
   const { GtData } = useData();
   const { rootRef } = useRootRef();
+  const store = useStore();
 
   const rootClientWidth = computed(() => rootRef.value?.clientWidth || 0);
 
   function onHiddenColumnSliderLine() {
-    columnSliderLineVisible.value = false;
-    columnDefaultLeft.value = -1;
+    store.columnSliderLineVisible.value = false;
+    store.columnDefaultLeft.value = -1;
   }
 
   function onMoveColumnSliderLine(offset: number) {
-    if (columnSliderLineVisible.value === false) {
-      columnSliderLineVisible.value = true;
+    if (store.columnSliderLineVisible.value === false) {
+      store.columnSliderLineVisible.value = true;
     }
 
-    if (columnDefaultLeft.value === -1) {
-      columnDefaultLeft.value = rootRef.value?.offsetLeft as number;
+    if (store.columnDefaultLeft.value === -1) {
+      store.columnDefaultLeft.value = rootRef.value?.offsetLeft as number;
     }
 
-    columnSliderLineLeft.value = offset - columnDefaultLeft.value;
+    store.columnSliderLineLeft.value = offset - store.columnDefaultLeft.value;
   }
 
   /**
@@ -197,13 +195,13 @@ export function useResizeTableColumn() {
 
   const sliderLineClass = computed(() => {
     return {
-      'gt-hide': !columnSliderLineVisible.value
+      'gt-hide': !store.columnSliderLineVisible.value
     };
   });
 
   const sliderLineStyle = computed(() => {
     return {
-      left: `${columnSliderLineLeft.value}px`
+      left: `${store.columnSliderLineLeft.value}px`
     };
   });
 

src/composables/useRootRef.ts

@@ -1,11 +1,12 @@
-import { ref, readonly } from 'vue';
-
-const rootRef = ref<HTMLDivElement>();
+import { readonly } from 'vue';
+import { useStore } from '@/store';
 
 export function useInitRootRef() {
-  return { rootRef };
+  const store = useStore();
+  return { rootRef: store.rootRef };
 }
 
 export default () => {
-  return { rootRef: readonly(rootRef) };
+  const store = useStore();
+  return { rootRef: readonly(store.rootRef) };
 };

src/composables/useShowDate.ts

@@ -1,20 +1,21 @@
-import { reactive, readonly } from 'vue';
-
-const showDateList = reactive<Date[]>([]);
+import { readonly } from 'vue';
+import { useStore } from '@/store';
 
 export default () => {
+  const store = useStore();
+
   function clearShowDateList() {
-    showDateList.length = 0;
+    store.showDateList.length = 0;
   }
 
   function addShowDate(showDate: Date) {
-    showDateList.push(showDate);
+    store.showDateList.push(showDate);
   }
 
   return {
     clearShowDateList,
     addShowDate,
 
-    showDateList: readonly(showDateList)
+    showDateList: readonly(store.showDateList)
   };
 };