feat(slider): ✨ 点击行可以将 slider 移动到视图

xpyjs · Jun 1, 2023 · 53226e6 · 53226e6
1 parent 4f73a4a
commit 53226e6
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 5 deletions.
diff --git a/docs/docs/root.md b/docs/docs/root.md
@@ -308,6 +308,12 @@ const ganttLinks = reactive([
 
 设置是否显示甘特图中的 `周末` 时间线。
 
+### slider-into-view <Badge text="新增" type="tip" />
+
+<DataParameter t="Boolean" d="false" />
+
+该属性将允许在点击行时，将当前行的甘特区域的 slider 滑块滑动到可视区域内（如果该行数据有日期属性）。
+
 ### unit <Badge text="新增" type="tip" />
 
 <DataParameter t="'month' | 'week' | 'day' | 'hour'" d="day" />

diff --git a/src/components/container/Row.vue b/src/components/container/Row.vue
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
 import useEvent from '@/composables/useEvent';
+import useExport from '@/composables/useExport';
 import useParam from '@/composables/useParam';
 import useStyle from '@/composables/useStyle';
 import RowItem from '@/models/data/row';
@@ -72,6 +73,8 @@ const bgColor = computed(() => {
   return c;
 });
 
+const { jumpToDate } = useExport();
+
 const { EmitRowClick, EmitRowDblClick } = useEvent();
 let clicks = 0;
 const delay = 300;
@@ -84,6 +87,10 @@ function onClick() {
       clicks = 0;
     }, delay);
 
+    if ($styleBox.sliderIntoView && props.data?.start) {
+      jumpToDate(props.data.start.date);
+    }
+
     $param.selectItem = props.data ?? null;
     EmitRowClick(props.data?.data);
   } else {

diff --git a/src/components/root/index.vue b/src/components/root/index.vue
@@ -79,6 +79,7 @@ import useRoot from '@/composables/useRoot';
 import useLinks from '@/composables/useLinks';
 import Variables from '@/constants/vars';
 import useExport from '@/composables/useExport';
+import useElement from '@/composables/useElement';
 
 const containerId = uuid(10);
 const props = defineProps(rootProps);
@@ -89,7 +90,7 @@ const { rootRef } = useRoot();
 
 // #region 获取表格下方的滚动条 gap
 const tableRef = ref<DefineComponent | null>(null);
-const ganttRef = ref<DefineComponent | null>(null);
+const { ganttRef } = useElement();
 const scrollGapSize = ref(0);
 
 function getScrollGapSize() {
@@ -189,7 +190,7 @@ onResizeTableColumn(midLineRef, {
 // console.log('.....root', getCurrentInstance());
 
 // #region 暴露方法
-const exports = useExport(ganttRef);
+const exports = useExport();
 defineExpose(exports);
 // #endregion
 </script>

diff --git a/src/components/root/rootProps.ts b/src/components/root/rootProps.ts
@@ -220,5 +220,13 @@ export default {
   highlightDate: {
     type: Boolean,
     default: false
+  },
+
+  /**
+   * 允许点击行时，将甘特进度条滚动到可视区域
+   */
+  sliderIntoView: {
+    type: Boolean,
+    default: false
   }
 };
diff --git a/src/composables/useElement.ts b/src/composables/useElement.ts
@@ -4,7 +4,7 @@ import useParam from './useParam';
 
 export default () => {
   const { $param } = useParam();
-  const { tableHeaderRef, ganttHeaderRef, ganttBodyRef } = useStore();
+  const { tableHeaderRef, ganttHeaderRef, ganttBodyRef, ganttRef } = useStore();
 
   function getMaxHeaderHeight() {
     return Math.max(
@@ -24,6 +24,7 @@ export default () => {
     tableHeaderRef,
     ganttHeaderRef,
     ganttBodyRef,
+    ganttRef,
     getMaxHeaderHeight,
     updateHeaderHeight
   };

diff --git a/src/composables/useStyle.ts b/src/composables/useStyle.ts
@@ -46,6 +46,7 @@ export default () => {
       store.$styleBox.headerStyle = props.headerStyle;
       store.$styleBox.bodyStyle = props.bodyStyle;
       store.$styleBox.primaryColor = props.primaryColor;
+      store.$styleBox.sliderIntoView = props.sliderIntoView;
     };
 
     fn();

diff --git a/src/models/param/styles.ts b/src/models/param/styles.ts
@@ -132,4 +132,13 @@ export default class StyleBox {
   public set bodyStyle(v: BodyOptions) {
     this._bodyStyle = v;
   }
+
+  private _sliderIntoView: boolean = false;
+  public get sliderIntoView(): boolean {
+    return this._sliderIntoView;
+  }
+
+  public set sliderIntoView(v: boolean) {
+    this._sliderIntoView = v;
+  }
 }
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -2,11 +2,18 @@
  * @Author: JeremyJone
  * @Date: 2021-12-24 16:36:33
  * @LastEditors: JeremyJone
- * @LastEditTime: 2023-05-17 09:49:28
+ * @LastEditTime: 2023-06-01 00:26:42
  * @Description: 头部注释
  */
 
-import { inject, provide, reactive, type Ref, ref } from 'vue';
+import {
+  inject,
+  provide,
+  reactive,
+  type Ref,
+  ref,
+  type DefineComponent
+} from 'vue';
 import EventBus from '@/utils/bus';
 import { AllData, AllLinks } from '@/models/data';
 import { GanttHeader, Param, SlotsBox, StyleBox } from '@/models/param';
@@ -49,6 +56,9 @@ export const initStore = (emit: any) => {
   const ganttBodyRef = ref<HTMLElement | null>(null);
   provide('ganttBodyRef', ganttBodyRef);
 
+  const ganttRef = ref<DefineComponent | null>(null);
+  provide('ganttRef', ganttRef);
+
   const linking = reactive({
     startPos: { x: 0, y: 0 },
     endPos: { x: 0, y: 0 },
@@ -127,6 +137,11 @@ export const useStore = () => {
      */
     ganttBodyRef: inject('ganttBodyRef') as Ref<HTMLElement | null>,
 
+    /**
+     * 甘特图ref
+     */
+    ganttRef: inject('ganttRef') as Ref<DefineComponent | null>,
+
     /**
      * 鼠标创建的连接中的连线数据
      */

diff --git a/types/root/prop.d.ts b/types/root/prop.d.ts
@@ -236,6 +236,14 @@ export declare const props: {
    * @see https://docs.xiaopangying.com/gantt/root.html#highlight-date
    */
   highlightDate: boolean;
+
+  /**
+   * 点击行时，是否将当前行滚动到视图中
+   * @default false
+   *
+   * @see https://docs.xiaopangying.com/gantt/root.html#slider-into-view
+   */
+  sliderIntoView: boolean;
 };
 
 export type RootProps = ExtractPropTypes<typeof props>;