feat: ✨添加移动的层级联动

demo/demo.vue

@@ -11,6 +11,7 @@
       :show-today="true"
       :show-weekend="true"
       @row-click="onClickRow"
+      @move-slider="onMoveSlider"
     >
       <x-gantt-column label="group1">
         <x-gantt-column prop="index" width="120px"></x-gantt-column>
@@ -52,7 +53,13 @@
         ellipsis
       />
 
-      <x-gantt-slider prop="o.t1" :move="onMove" resize-left resize-right>
+      <x-gantt-slider
+        prop="o.t1"
+        :move="onMove"
+        resize-left
+        resize-right
+        linked-resize
+      >
         <!-- <template #content="scope">
           <div
             style="
@@ -139,7 +146,7 @@ const showExpand = ref(true);
 function onExpand() {
   showExpand.value = !showExpand.value;
 }
-const expandAll = ref(false);
+const expandAll = ref(true);
 function onExpandAll() {
   expandAll.value = !expandAll.value;
 }
@@ -168,6 +175,10 @@ const onClickRow = (data: any) => {
   console.log('click row', data);
 };
 
+const onMoveSlider = (data: any) => {
+  console.log('move slider', data);
+};
+
 function onMove(data: any) {
   return true;
 }

src/components/common/Row.vue

@@ -49,10 +49,10 @@ function onLeave() {
   $param.hoverItem = null;
 }
 
-const { EmitClickRow } = useEvent();
+const { EmitRowClick } = useEvent();
 function onClick() {
   $param.selectItem = props.data ?? null;
-  EmitClickRow(props.data?.data);
+  EmitRowClick(props.data?.data);
 }
 
 function onDblClick() {

src/components/root/RootWrap.vue

@@ -23,7 +23,7 @@ const emit = defineEmits<{
   (e: 'row-click', data: any): void;
   (e: 'row-dbl-click', data: any): void;
   (e: 'row-checked', state: boolean, data: any): void;
-  (e: 'move-slider', data: any[], old: { start: Date; end: Date }): void;
+  (e: 'move-slider', data: MoveSliderData[]): void;
   (e: 'move-progress', data: any, old: number): void;
   (e: 'no-date-error'): void;
 }>();

src/components/slider/index.vue

@@ -96,7 +96,8 @@ import useDrag from '@/composables/useDrag';
 import useParam from '@/composables/useParam';
 import useStyle from '@/composables/useStyle';
 import { formatDate } from '@/utils/date';
-import { isBoolean, isFunction } from 'lodash';
+import { flow, isBoolean, isFunction } from 'lodash';
+import useEvent from '@/composables/useEvent';
 
 export default defineComponent({
   name: Variables.name.slider
@@ -167,23 +168,42 @@ onMounted(() => {
   });
 });
 
+// 移动过的对象数组
+const { EmitMoveSlider } = useEvent();
+let movedData: MoveSliderData[] = [];
+function EmitMove() {
+  movedData.unshift({
+    row: props.data!.data,
+    old: {
+      start: startDate!.date,
+      end: endDate!.date
+    }
+  });
+  EmitMoveSlider(movedData);
+  movedData = [];
+}
+
 let startDate = props.data?.start.clone();
 const setStart = (x: number) => {
   props.data?.setStart(
     startDate!.getOffset(
       (x / ganttColumnWidth.value) * currentMillisecond.value
     ),
     ganttHeader.unit,
-    props.linkedResize
+    props.linkedResize,
+    movedData
   );
+
+  return x;
 };
 
 let endDate = props.data?.end.clone();
 const setEnd = (x: number) =>
   props.data?.setEnd(
     endDate!.getOffset((x / ganttColumnWidth.value) * currentMillisecond.value),
     ganttHeader.unit,
-    props.linkedResize
+    props.linkedResize,
+    movedData
   );
 
 const sliderRef = ref(null) as Ref<HTMLElement | null>;
@@ -197,10 +217,8 @@ onDrag(sliderRef, {
     endDate = props.data?.end.clone();
   },
 
-  onMove: x => {
-    setStart(x);
-    setEnd(x);
-  }
+  onMove: flow(setStart, setEnd),
+  onEnd: EmitMove
 });
 // #endregion
 
@@ -219,9 +237,8 @@ onDrag(resizeLeftRef, {
     startDate = props.data?.start.clone();
   },
 
-  onMove: x => {
-    setStart(x);
-  }
+  onMove: setStart,
+  onEnd: EmitMove
 });
 // #endregion
 
@@ -240,9 +257,8 @@ onDrag(resizeRightRef, {
     endDate = props.data?.end.clone();
   },
 
-  onMove: x => {
-    setEnd(x);
-  }
+  onMove: setEnd,
+  onEnd: EmitMove
 });
 // #endregion
 

src/composables/useEvent.ts

@@ -7,12 +7,39 @@ export default () => {
     rootEmit.value = emit;
   }
 
-  function EmitClickRow(row: any) {
+  /**
+   * 点击行事件
+   * @param row 该行的原始数据
+   */
+  function EmitRowClick(row: any) {
     rootEmit.value?.('row-click', toRaw(row));
   }
 
+  // (e: 'row-dbl-click', data: any): void;
+  // (e: 'row-checked', state: boolean, data: any): void;
+  // (e: 'move-slider', { row: any; old: { start: Date; end: Date } }[]): void;
+  // (e: 'move-progress', data: any, old: number): void;
+  // (e: 'no-date-error'): void;
+
+  /**
+   * 移动滑块事件
+   * @param data 移动的所有原始数据集合（时间已被更新）。每一行包含旧时间
+   */
+  function EmitMoveSlider(data: MoveSliderData[]) {
+    rootEmit.value?.(
+      'move-slider',
+      data.map(item => {
+        return {
+          row: toRaw(item.row),
+          old: item.old
+        };
+      })
+    );
+  }
+
   return {
     setRootEmit,
-    EmitClickRow
+    EmitRowClick,
+    EmitMoveSlider
   };
 };

src/models/data/row.ts

@@ -2,12 +2,12 @@
  * @Author: JeremyJone
  * @Date: 2021-09-09 15:50:52
  * @LastEditors: JeremyJone
- * @LastEditTime: 2023-05-11 14:18:14
+ * @LastEditTime: 2023-05-13 21:09:27
  * @Description: 一条数据类
  */
 
 import { Variables } from '@/constants/vars';
-import { uuid } from '@/utils/common';
+import { addIfNotExist, uuid } from '@/utils/common';
 import { cloneDeep, isEqual } from 'lodash';
 import { XDate } from '../param/date';
 
@@ -190,7 +190,7 @@ export default class RowItem {
     date: XDate,
     unit: HeaderDateUnit,
     linkage = false,
-    modifyArr: RowItem[] = []
+    modifyArr?: MoveSliderData[]
   ) {
     this.__data[this.options.startLabel] = date.date;
 
@@ -203,30 +203,42 @@ export default class RowItem {
         Variables.time.millisecondOf[unit]
       ).date;
 
-    // if (!linkage) return;
-
-    // // 查看父节点
-    // let pNode = this.parentNode;
-    // while (pNode !== null) {
-    //   if (compareDate(this.start, pNode.start) === 'l') {
-    //     // 赋值应该给data的日期数据赋值
-    //     pNode.setStart(this.start, unit);
-    //     addIfNotExist<RowItem>(modifyArr, pNode);
-    //   } else {
-    //     break;
-    //   }
-    //   pNode = pNode.parentNode;
-    // }
-
-    // // 查看子节点
-    // this.__setChildrenDate(this, 'start', unit, modifyArr);
+    if (!linkage) return;
+
+    // 查看父节点
+    let pNode = this.parentNode;
+    while (pNode !== null) {
+      if (this.start.compareTo(pNode.start) === 'l') {
+        const oldDate = pNode.start;
+        // 赋值应该给data的日期数据赋值
+        pNode.setStart(this.start, unit);
+        modifyArr &&
+          addIfNotExist<MoveSliderData>(
+            modifyArr,
+            {
+              row: pNode.data,
+              old: { start: oldDate.date, end: pNode.end.date }
+            },
+            item =>
+              item.row.uuid === pNode?.uuid &&
+              item.old.start === oldDate.date &&
+              item.old.end === pNode?.end.date
+          );
+      } else {
+        break;
+      }
+      pNode = pNode.parentNode;
+    }
+
+    // 查看子节点
+    this.__setChildrenDate(this, 'start', unit, modifyArr);
   }
 
   setEnd(
     date: XDate,
     unit: HeaderDateUnit,
     linkage = false,
-    modifyArr: RowItem[] = []
+    modifyArr?: MoveSliderData[]
   ) {
     this.__data[this.options.endLabel] = date.date;
 
@@ -241,21 +253,33 @@ export default class RowItem {
         Variables.time.millisecondOf[unit]
       ).date;
 
-    // if (!linkage) return;
-
-    // let pNode = this.parentNode;
-    // while (pNode !== null) {
-    //   if (compareDate(this.end, pNode.end) === 'r') {
-    //     pNode.setEnd(this.end, unit);
-    //     addIfNotExist<RowItem>(modifyArr, pNode);
-    //   } else {
-    //     break;
-    //   }
-    //   pNode = pNode.parentNode;
-    // }
-
-    // // 查看子节点
-    // this.__setChildrenDate(this, 'end', unit, modifyArr);
+    if (!linkage) return;
+
+    let pNode = this.parentNode;
+    while (pNode !== null) {
+      if (this.end.compareTo(pNode.end) === 'r') {
+        const oldDate = pNode.end;
+        pNode.setEnd(this.end, unit);
+        modifyArr &&
+          addIfNotExist<MoveSliderData>(
+            modifyArr,
+            {
+              row: pNode.data,
+              old: { start: pNode.start.date, end: oldDate.date }
+            },
+            item =>
+              item.row.uuid === pNode?.uuid &&
+              item.old.start === pNode?.start.date &&
+              item.old.end === pNode?.end.date
+          );
+      } else {
+        break;
+      }
+      pNode = pNode.parentNode;
+    }
+
+    // 查看子节点
+    this.__setChildrenDate(this, 'end', unit, modifyArr);
   }
 
   /**
@@ -267,20 +291,40 @@ export default class RowItem {
     node: RowItem,
     key: 'start' | 'end',
     unit: HeaderDateUnit,
-    modifyArr: RowItem[]
+    modifyArr?: MoveSliderData[]
   ) {
+    const pushTo = (item: MoveSliderData) => {
+      modifyArr &&
+        addIfNotExist<MoveSliderData>(
+          modifyArr,
+          item,
+          i =>
+            i.row.uuid === item?.row.uuid &&
+            i.old.start === item?.old.start &&
+            i.old.end === item?.old.end
+        );
+    };
+
     for (let i = 0; i < node.children.length; i++) {
       const c = node.children[i];
       if (key === 'start') {
         if (c.start.compareTo(node.start) === 'l') {
+          const oldDate = c.start;
           c.setStart(node.start, unit);
-          modifyArr.push(c);
+          pushTo({
+            row: c.data,
+            old: { start: oldDate.date, end: c.end.date }
+          });
           this.__setChildrenDate(c, key, unit, modifyArr);
         }
       } else if (key === 'end') {
         if (c.end.compareTo(node.end) === 'r') {
+          const oldDate = c.end;
           c.setEnd(node.end, unit);
-          modifyArr.push(c);
+          pushTo({
+            row: c.data,
+            old: { start: c.start.date, end: oldDate.date }
+          });
           this.__setChildrenDate(c, key, unit, modifyArr);
         }
       }

src/typings/data.d.ts

@@ -6,3 +6,11 @@ declare interface RowData {
   $index?: number;
   level?: number;
 }
+
+/**
+ * 滑动抛出的数据
+ */
+declare interface MoveSliderData {
+  row: any;
+  old: { start: Date; end: Date };
+}