gantt timelineBar drag perf

Author: akfdwjx

src/components/layout/gantt/GanttTimelineHeader.vue

@@ -59,12 +59,12 @@ function ganttTimeLineYearHeight() {
         {{ cateColumTimeline.cateTitle }}
       </div>
     </div>
-    <div class="flex items-center gantt-timeline-column">
+    <div class="flex items-center gantt-timeline-column" :style="`height:${ganttInfo.ganttShowKind === GanttShowKind.YEAR && ganttTimeLineYearHeight()}`">
       <div
         v-for="(timeline, idx) in ganttInfo.timeline" :key="`${layoutId}-${idx}`"
         :data-value="timeline.value"
         :data-group-value="timeline.categoryTitle"
-        :style="`width: ${getTimelineColumnWidth(props.ganttInfo.ganttShowKind)}px;height:${ganttInfo.ganttShowKind === GanttShowKind.YEAR && ganttTimeLineYearHeight()}`"
+        :style="`width: ${getTimelineColumnWidth(props.ganttInfo.ganttShowKind)}px`"
         :title="`${timeline.value} (${timeline.categoryTitle})`"
         :class="`${props.styleProps.cellClass} iw-gantt-timeline-cell flex justify-center items-center bg-base-200 ${idx !== 0 && 'border-l border-l-base-300'}`"
       >

src/components/layout/gantt/GanttTimelineRows.vue

@@ -338,7 +338,7 @@ onUnmounted(() => {
   unregisterRowTreeTriggerEvent(rowTreeEventId!)
 })
 
-function handleMouseMove(event: MouseEvent, date: string, idx: number) {
+function handleMouseMove(event: MouseEvent, date: string) {
   if (props.ganttInfo.ganttShowKind !== GanttShowKind.DAY)
     return
   if (curTimelineBar.value && curTimelineBar.value !== event.target) {
@@ -370,7 +370,7 @@ function handleMouseMove(event: MouseEvent, date: string, idx: number) {
   }
 
   curTimelineBar.value = (event.target as HTMLElement)
-  curTimelineRowRef.value = timelineRowRef.value[idx]
+  curTimelineRowRef.value = (event.target as HTMLElement).parentElement
 }
 
 async function stopResize(e: PointerEvent, isSave = false) {
@@ -436,7 +436,7 @@ function updateResize(e: PointerEvent) {
 <template>
   <div ref="ganttTimelineRef" class="relative iw-gantt-timeline-area">
     <div
-      v-for="(row, rowIdx) in props.records"
+      v-for="row in props.records"
       ref="timelineRowRef"
       :key="`${props.layoutId}-${row[props.pkColumnName]}`"
       :data-pk="row[props.pkColumnName]"
@@ -469,15 +469,15 @@ function updateResize(e: PointerEvent) {
         :title="getTimelineBarTitle(row, true)"
         :data-start-time="row[props.ganttProps.planStartTimeColumnName]"
         :data-end-time="row[props.ganttProps.planEndTimeColumnName]"
-        @mousemove="(e) => { handleMouseMove(e, operationDateEnum.PLAN, rowIdx) }"
+        @mousemove="(e) => { handleMouseMove(e, operationDateEnum.PLAN) }"
       />
       <div
         v-if="props.ganttProps.actualStartTimeColumnName && props.ganttProps.actualEndTimeColumnName && (row[props.ganttProps.actualStartTimeColumnName] || row[props.ganttProps.actualEndTimeColumnName])"
         class="iw-gantt-timeline-actual-bar absolute hidden py-1 bg-success rounded-sm"
         :title="getTimelineBarTitle(row, false)"
         :data-start-time="row[props.ganttProps.actualStartTimeColumnName]"
         :data-end-time="row[props.ganttProps.actualEndTimeColumnName]"
-        @mousemove="(e) => { handleMouseMove(e, operationDateEnum.ACT, rowIdx) }"
+        @mousemove="(e) => { handleMouseMove(e, operationDateEnum.ACT) }"
       />
     </div>
     <div