fix: 🐛判断日期相等误差

src/components/common/GanttBody.vue

@@ -5,7 +5,7 @@
   >
     <!-- 滑动条 -->
     <template v-for="d in inView" :key="d.uuid">
-      <RowVue :data="d" class="xg-gantt-row">
+      <RowVue :data="d" class="xg-gantt-row" :render-style="false">
         <component :is="$slotsBox.slider" :data="d" />
       </RowVue>
     </template>
@@ -16,6 +16,11 @@
       <LinkPath v-for="link in $links.links" :key="link.uuid" :link="link" />
     </svg>
 
+    <!-- 行样式 -->
+    <template v-for="d in inView" :key="d.uuid">
+      <RowVue :data="d" />
+    </template>
+
     <!-- 周末 -->
     <template v-for="(date, i) in ganttHeader.dates">
       <div
@@ -66,31 +71,25 @@ const { $links } = useLinks();
 <style lang="scss" scoped>
 .xg-gantt-body {
   position: relative;
-  // background-color: darkkhaki;
   z-index: 9;
 
   .xg-gantt-row {
-    z-index: 99;
-    // width: 100%;
-    // position: absolute;
-    // overflow: hidden;
-    // border-bottom: 1px solid;
-    // box-sizing: border-box;
+    z-index: 9;
   }
 
-  .xg-gantt-body-date-line {
-    z-index: 2;
+  .xg-gantt-body-line-wrap {
+    width: 100%;
     height: 100%;
     position: absolute;
-    top: 0;
-    opacity: 0.6;
+    z-index: 5;
   }
 
-  .xg-gantt-body-line-wrap {
-    width: 100%;
+  .xg-gantt-body-date-line {
+    z-index: 2;
     height: 100%;
     position: absolute;
-    z-index: 5;
+    top: 0;
+    opacity: 0.6;
   }
 }
 </style>

src/components/common/GanttHeader.vue

@@ -22,8 +22,8 @@
             {
               highlight:
                 trIndex === dateList.length - 1 &&
-                ($param.hoverItem?.start.compareTo(c.date) === 'e' ||
-                  $param.hoverItem?.end.compareTo(c.date) === 'e')
+                ($param.hoverItem?.start.isSame(c.date, ganttHeader.unit) ||
+                  $param.hoverItem?.end.isSame(c.date, ganttHeader.unit))
             }
           ]"
           :style="{ ...$styleBox.getBorderColor() }"
@@ -44,12 +44,14 @@ import useStyle from '@/composables/useStyle';
 import useParam from '@/composables/useParam';
 import useElement from '@/composables/useElement';
 import { onMounted } from 'vue';
+import useGanttHeader from '@/composables/useGanttHeader';
 
 const { $param } = useParam();
 const { $styleBox } = useStyle();
 const { dateList } = useData();
 const { ganttColumnWidth } = useGanttWidth();
 const { ganttHeaderRef, updateHeaderHeight } = useElement();
+const { ganttHeader } = useGanttHeader();
 onMounted(updateHeaderHeight);
 </script>
 

src/components/common/Row.vue

@@ -2,12 +2,15 @@
   <div
     :class="[
       'xg-row',
-      { 'xg-row__hover': $param.hoverItem?.uuid === props.data.uuid },
-      { 'xg-row__select': $param.selectId === props.data.uuid }
+      {
+        'xg-row__hover': $param.hoverItem?.uuid === props.data?.uuid
+      },
+      { 'xg-row__select': $param.selectItem?.uuid === props.data?.uuid }
     ]"
     :style="{
-      top: `${props.data.flatIndex * rowHeight}px`,
+      top: `${(props.data?.flatIndex ?? 0) * rowHeight}px`,
       height: `${rowHeight}px`,
+      borderWidth: props.renderStyle ? '1px' : 0,
       ...$styleBox.getBorderColor()
     }"
     @mouseenter="onEnter"
@@ -25,13 +28,16 @@ import useParam from '@/composables/useParam';
 import useStyle from '@/composables/useStyle';
 import RowItem from '@/models/data/row';
 
-const props = defineProps<{ data: RowItem }>();
+const props = defineProps({
+  data: RowItem,
+  renderStyle: { type: Boolean, default: true }
+});
 
 const { rowHeight, $styleBox } = useStyle();
 
 const { $param } = useParam();
 function onEnter() {
-  $param.hoverItem = props.data;
+  $param.hoverItem = props.data ?? null;
 }
 
 function onLeave() {
@@ -40,8 +46,8 @@ function onLeave() {
 
 const { EmitClickRow } = useEvent();
 function onClick() {
-  $param.selectId = props.data.uuid;
-  EmitClickRow(props.data.data);
+  $param.selectItem = props.data ?? null;
+  EmitClickRow(props.data?.data);
 }
 
 function onDblClick() {
@@ -53,7 +59,6 @@ function onDblClick() {
 .xg-row {
   width: 100%;
   position: absolute;
-  // background-color: #fafafa;
   overflow: hidden;
   border-bottom: 1px solid;
   box-sizing: border-box;

src/models/param/date.ts

@@ -1,13 +1,12 @@
 import { day, formatDate } from '@/utils/date';
 
-export enum DateEnum {
+enum DateEnum {
   'year',
   'month',
   'day',
   'hour',
   'minute',
-  'second',
-  'millisecond'
+  'second'
 }
 
 /**
@@ -76,9 +75,13 @@ export class XDate {
       return day(this.date).week() === day(date.date).week();
     }
 
+    if (precision === 'millisecond') {
+      return this.date.getMilliseconds() === date.date.getMilliseconds();
+    }
+
     return (
-      this.date.toISOString().split(/T|-|:|\./)[DateEnum[precision]] ===
-      date.date.toISOString().split(/T|-|:|\./)[DateEnum[precision]]
+      this.date.toLocaleString().split(/\s|\/|:/)[DateEnum[precision]] ===
+      date.date.toLocaleString().split(/\s|\/|:/)[DateEnum[precision]]
     );
   }
 
@@ -94,6 +97,7 @@ export class XDate {
    */
   getBy(unit: DateUnit) {
     if (unit === 'week') return day(this.date).week();
+    if (unit === 'millisecond') return this.date.getMilliseconds();
 
     return parseInt(
       this.date.toLocaleString().split(/\s|\/|:/)[DateEnum[unit]]

src/models/param/param.ts

@@ -29,13 +29,13 @@ export default class Param {
     this._hoverItem = v;
   }
 
-  private _selectId: string = '';
-  public get selectId(): string {
-    return this._selectId;
+  private _selectItem: RowItem | null = null;
+  public get selectItem(): RowItem | null {
+    return this._selectItem;
   }
 
-  public set selectId(v: string) {
-    this._selectId = v;
+  public set selectItem(v: RowItem | null) {
+    this._selectItem = v;
   }
 
   private _showMoveLine: boolean = false;