feat(slider): ✨ 添加 move-by-unit 参数

现在滑动条可以基于传入的单位进行移动，目前支持 hour 和 day
xpyjs · May 30, 2023 · d94f750 · d94f750
1 parent cdb94a3
commit d94f750
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 19 deletions.
diff --git a/src/components/slider/index.vue b/src/components/slider/index.vue
@@ -228,27 +228,38 @@ function EmitMove() {
 
 let startDate = props.data?.start.clone();
 const setStart = (x: number) => {
-  props.data?.setStart(
-    startDate!.getOffset(
-      (x / ganttColumnWidth.value) * currentMillisecond.value
-    ),
-    ganttHeader.unit,
-    props.linkedResize,
-    movedData
+  const d = startDate!.getOffset(
+    (x / ganttColumnWidth.value) * currentMillisecond.value
   );
 
+  if (
+    !props.moveByUnit ||
+    Math.abs(props.data!.start.intervalTo(d) / currentMillisecond.value) *
+      ganttColumnWidth.value >=
+      ganttColumnWidth.value
+  ) {
+    props.data?.setStart(d, ganttHeader.unit, 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,
-    movedData
+const setEnd = (x: number) => {
+  const d = endDate!.getOffset(
+    (x / ganttColumnWidth.value) * currentMillisecond.value
   );
 
+  if (
+    !props.moveByUnit ||
+    Math.abs(props.data!.end.intervalTo(d) / currentMillisecond.value) *
+      ganttColumnWidth.value >=
+      ganttColumnWidth.value
+  ) {
+    props.data?.setEnd(d, ganttHeader.unit, props.linkedResize, movedData);
+  }
+};
+
 const sliderRef = ref(null) as Ref<HTMLElement | null>;
 const { onDrag } = useDrag();
 onDrag(sliderRef, {

diff --git a/src/components/slider/props.ts b/src/components/slider/props.ts
@@ -61,6 +61,13 @@ export default {
     default: () => false
   },
 
+  /**
+   * 使用最大单位移动，基于当前单位。day / hour
+   */
+  moveByUnit: {
+    type: Boolean
+  },
+
   /**
    * 允许左侧移动
    */

diff --git a/src/models/data/row.ts b/src/models/data/row.ts
@@ -2,7 +2,7 @@
  * @Author: JeremyJone
  * @Date: 2021-09-09 15:50:52
  * @LastEditors: JeremyJone
- * @LastEditTime: 2023-05-19 18:26:45
+ * @LastEditTime: 2023-05-30 16:59:38
  * @Description: 一条数据类
  */
 
@@ -226,11 +226,13 @@ export default class RowItem {
     // 首先判断起始日期不能大于结束日期
     if (
       date.compareTo(
-        this.end.getOffset(-getMillisecondBy(unit, this.end.date))
+        this.end.getOffset(
+          -getMillisecondBy(unit === 'hour' ? 'hour' : 'day', this.end.date)
+        )
       ) === 'r'
     ) {
       this.__data[this.options.endLabel] = date.getOffset(
-        getMillisecondBy(unit, date.date)
+        getMillisecondBy(unit === 'hour' ? 'hour' : 'day', date.date)
       ).date;
     }
 
@@ -276,14 +278,15 @@ export default class RowItem {
     this.__data[this.options.endLabel] = date.date;
 
     // 首先判断起始日期不能大于结束日期
-
     if (
       date.compareTo(
-        this.start.getOffset(getMillisecondBy(unit, this.start.date))
+        this.start.getOffset(
+          getMillisecondBy(unit === 'hour' ? 'hour' : 'day', this.start.date)
+        )
       ) === 'l'
     ) {
       this.__data[this.options.startLabel] = date.getOffset(
-        -getMillisecondBy(unit, date.date)
+        -getMillisecondBy(unit === 'hour' ? 'hour' : 'day', date.date)
       ).date;
     }
 

diff --git a/src/models/param/date.ts b/src/models/param/date.ts
@@ -157,4 +157,27 @@ export class XDate {
         break;
     }
   }
+
+  /**
+   * 将日期置为单位的结束位置
+   */
+  endOf(unit: DateUnit) {
+    switch (unit) {
+      case 'year':
+        this.date.setMonth(11);
+      case 'month':
+        this.date.setDate(day(this.date).daysInMonth());
+      case 'week':
+        this.date.setDate(this.date.getDate() + (6 - day(this.date).day()));
+      case 'day':
+        this.date.setHours(23);
+      case 'hour':
+        this.date.setMinutes(59);
+      case 'minute':
+        this.date.setSeconds(59);
+      case 'second':
+        this.date.setMilliseconds(999);
+        break;
+    }
+  }
 }
diff --git a/types/slider/prop.d.ts b/types/slider/prop.d.ts
@@ -73,6 +73,16 @@ export declare const props: {
    */
   move: PropType<boolean | ((data: RowData) => boolean)>;
 
+  /**
+   * 使用最大单位移动，基于当前单位。
+   * @default false
+   *
+   * @description `小时`单位按照每小时移动，`天`单位或比`天`更高级的单位会一律按照每天规则移动
+   *
+   * @see https://docs.xiaopangying.com/gantt/slider.html#move-by-unit
+   */
+  moveByUnit: boolean;
+
   /**
    * 允许左侧移动。只有在设置了 move 属性之后，该属性才会生效
    * @default false