feat: ✨添加抛出事件

demo/demo.vue

@@ -1,6 +1,10 @@
 <template>
   <div style="top: 20vh; width: 100%; height: 500px">
-    <x-gantt :data="ganttData" style="padding-left: 20vh">
+    <x-gantt
+      :data="ganttData"
+      style="padding-left: 20vh"
+      @click-row="onClickRow"
+    >
       <x-gantt-column label="group1">
         <x-gantt-column prop="id" width="150px"></x-gantt-column>
         <x-gantt-column label="group2">
@@ -91,6 +95,10 @@ function onAdd() {
 function onReduce() {
   ganttData.splice(ganttData.length - 1, 1);
 }
+
+const onClickRow = (data: any) => {
+  console.log('click row', data);
+};
 </script>
 
 <style scoped></style>

src/components/common/GanttBody.vue

@@ -8,6 +8,10 @@
         <component :is="$slotsBox.slider" :data="d" />
       </RowVue>
     </template>
+
+    <div class="xg-gantt-body-date-line"></div>
+
+    <div class="xg-gantt-body-line-wrap"></div>
   </div>
 </template>
 
@@ -29,12 +33,29 @@ const { inView } = useInView();
   position: relative;
 
   .xg-gantt-row {
+    z-index: 99;
     // width: 100%;
     // background-color: darkkhaki;
     // position: absolute;
     // overflow: hidden;
     // border-bottom: 1px solid;
     // box-sizing: border-box;
   }
+
+  .xg-gantt-body-date-line {
+    z-index: 9;
+    height: 100%;
+    width: 20px;
+    position: absolute;
+    top: 0;
+    left: 40px;
+    background-color: aqua;
+    opacity: 0.6;
+  }
+
+  .xg-gantt-body-line-wrap {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

src/components/common/Row.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+import useEvent from '@/composables/useEvent';
 import useParam from '@/composables/useParam';
 import useStyle from '@/composables/useStyle';
 import RowItem from '@/models/data/row';
@@ -37,8 +38,10 @@ function onLeave() {
   $param.hoverId = '';
 }
 
+const { EmitClickRow } = useEvent();
 function onClick() {
   $param.selectId = props.data.uuid;
+  EmitClickRow(props.data.data);
 }
 
 function onDblClick() {
@@ -50,17 +53,17 @@ function onDblClick() {
 .xg-row {
   width: 100%;
   position: absolute;
-  background-color: #fafafa;
+  // background-color: #fafafa;
   overflow: hidden;
   border-bottom: 1px solid;
   box-sizing: border-box;
 }
 
 .xg-row.xg-row__hover {
-  background-color: #f0f0f0;
+  background-color: #f0f0f0aa;
 }
 
 .xg-row__select {
-  background-color: #e0e0e0;
+  background-color: #e0e0e0aa;
 }
 </style>

src/components/root/RootWrap.vue

@@ -7,6 +7,7 @@ import { defineComponent, useSlots } from 'vue';
 import { initStore } from '@/store';
 import useElement from '@/composables/useElement';
 import Root from './index.vue';
+import useEvent from '@/composables/useEvent';
 
 export default defineComponent({
   name: 'RootWrap',
@@ -18,21 +19,33 @@ export default defineComponent({
 
 <script lang="ts" setup>
 const slots = useSlots();
+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-progress', data: any, old: number): void;
+  (e: 'no-date-error'): void;
+}>();
 
 // 初始全局数据
 initStore();
 
-const { rootWrapRef } = useElement();
+// 设置 emit
+const { setRootEmit } = useEvent();
+setRootEmit(emit);
+
+const { rootRef } = useElement();
 
 const setSelected = (args: any) => {
-  (rootWrapRef.value as any)?.setSelected(args);
+  (rootRef.value as any)?.setSelected(args);
 };
 const jumpToDate = (args: any) => {
-  (rootWrapRef.value as any)?.jumpToDate(args);
+  (rootRef.value as any)?.jumpToDate(args);
 };
 
 const setHeaderUnit = (args: any) => {
-  (rootWrapRef.value as any)?.setHeaderUnit(args);
+  (rootRef.value as any)?.setHeaderUnit(args);
 };
 
 // ***** 对外方法 ***** //

src/composables/useElement.ts

@@ -1,8 +1,7 @@
 import { ref } from 'vue';
 
 const rootRef = ref<HTMLElement | null>(null);
-const rootWrapRef = ref<HTMLElement | null>(null);
 
 export default () => {
-  return { rootRef, rootWrapRef };
+  return { rootRef };
 };

src/composables/useEvent.ts

@@ -0,0 +1,18 @@
+import { ref, toRaw } from 'vue';
+
+const rootEmit: any = ref(null);
+
+export default () => {
+  function setRootEmit(emit: any) {
+    rootEmit.value = emit;
+  }
+
+  function EmitClickRow(row: any) {
+    rootEmit.value?.('click-row', toRaw(row));
+  }
+
+  return {
+    setRootEmit,
+    EmitClickRow
+  };
+};