From fce07ce55f8917268794d3f3fca78e8811c372ef Mon Sep 17 00:00:00 2001
From: jeremyjone <jeremyjone@qq.com>
Date: Sat, 13 May 2023 21:13:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=E6=B7=BB=E5=8A=A0=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=9A=84=E5=B1=82=E7=BA=A7=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/demo.vue                    |  15 +++-
 src/components/common/Row.vue    |   4 +-
 src/components/root/RootWrap.vue |   2 +-
 src/components/slider/index.vue  |  42 +++++++----
 src/composables/useEvent.ts      |  31 +++++++-
 src/models/data/row.ts           | 122 +++++++++++++++++++++----------
 src/typings/data.d.ts            |   8 ++
 src/utils/common.ts              |   7 +-
 8 files changed, 169 insertions(+), 62 deletions(-)

diff --git a/demo/demo.vue b/demo/demo.vue
index 82a7656..54420d5 100644
--- a/demo/demo.vue
+++ b/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;
 }
diff --git a/src/components/common/Row.vue b/src/components/common/Row.vue
index e69f86f..900843a 100644
--- a/src/components/common/Row.vue
+++ b/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() {
diff --git a/src/components/root/RootWrap.vue b/src/components/root/RootWrap.vue
index 6d5e746..d279686 100644
--- a/src/components/root/RootWrap.vue
+++ b/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;
 }>();
diff --git a/src/components/slider/index.vue b/src/components/slider/index.vue
index d3d473c..465c181 100644
--- a/src/components/slider/index.vue
+++ b/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,6 +168,21 @@ 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(
@@ -174,8 +190,11 @@ const setStart = (x: number) => {
       (x / ganttColumnWidth.value) * currentMillisecond.value
     ),
     ganttHeader.unit,
-    props.linkedResize
+    props.linkedResize,
+    movedData
   );
+
+  return x;
 };
 
 let endDate = props.data?.end.clone();
@@ -183,7 +202,8 @@ 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
 
diff --git a/src/composables/useEvent.ts b/src/composables/useEvent.ts
index f58b4d2..5fd959d 100644
--- a/src/composables/useEvent.ts
+++ b/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
   };
 };
diff --git a/src/models/data/row.ts b/src/models/data/row.ts
index 09a828a..aeead8a 100644
--- a/src/models/data/row.ts
+++ b/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);
         }
       }
diff --git a/src/typings/data.d.ts b/src/typings/data.d.ts
index 321be12..0353def 100644
--- a/src/typings/data.d.ts
+++ b/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 };
+}
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 5265d28..7b46f20 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -93,11 +93,12 @@ export function camelToKebabCased(str: string): string {
 /**
  * 查找一个数组是否存在该元素，如果不存在，则将其添加
  */
-export function addIfNotExist<T>(arr: T[], item: T): T[] {
-  if (!arr.includes(item)) {
+export function addIfNotExist<T>(arr: T[], item: T, cb?: (item: T) => unknown) {
+  if (!item) return;
+
+  if (cb ? !~arr.findIndex(cb) : !arr.includes(item)) {
     arr.push(item);
   }
-  return arr;
 }
 
 /**