feat(date): ✨ 对接 dayjs 显示

src/components/column/index.vue

@@ -31,7 +31,7 @@
 
         <template v-else-if="props.prop || props.label">{{
           props.dateFormat
-            ? formatDate(originData, props.dateFormat)
+            ? day(originData).format(props.dateFormat)
             : originData
         }}</template>
       </div>
@@ -55,7 +55,7 @@ import useStyle from '@/composables/useStyle';
 import useSlotsBox from '@/composables/useSlotsBox';
 import SelectionVue from './selection.vue';
 import useData from '@/composables/useData';
-import { formatDate } from '@/utils/date';
+import { day } from '@/utils/date';
 
 export default defineComponent({
   name: Variables.name.column

src/components/container/GanttHeader.vue

@@ -32,7 +32,8 @@
                 ['day', 'hour'].includes(ganttHeader.unit) &&
                 ($param.hoverItem?.start.isSame(c.date, ganttHeader.unit) ||
                   $param.hoverItem?.end.isSame(c.date, ganttHeader.unit))
-            }
+            },
+            { 'xg-gantt-header-cell__each': trIndex !== 0 }
           ]"
           :style="{
             'border-color': $styleBox.borderColor,
@@ -91,6 +92,11 @@ onMounted(updateHeaderHeight);
     font-size: 14px;
   }
 
+  .xg-gantt-header-cell__each {
+    font-size: 12px;
+    word-wrap: break-word;
+  }
+
   .highlight {
     filter: brightness(1.2);
   }

src/components/slider/index.vue

@@ -40,7 +40,7 @@
         >
           {{
             props.dateFormat
-              ? formatDate(originData, props.dateFormat)
+              ? day(originData).format(props.dateFormat)
               : originData
           }}
         </div>
@@ -127,7 +127,7 @@ import useGanttWidth from '@/composables/useGanttWidth';
 import useDrag from '@/composables/useDrag';
 import useParam from '@/composables/useParam';
 import useStyle from '@/composables/useStyle';
-import { baseUnit, formatDate } from '@/utils/date';
+import { baseUnit, day } from '@/utils/date';
 import { flow, isBoolean, isFunction, isNumber } from 'lodash';
 import useEvent from '@/composables/useEvent';
 import { MoveSliderInternalData } from '@/typings/data';

src/models/param/date.ts

@@ -1,4 +1,4 @@
-import { day, formatDate } from '@/utils/date';
+import { day } from '@/utils/date';
 
 enum DateEnum {
   'year',
@@ -29,25 +29,29 @@ export class XDate {
   }
 
   /**
-   * 获取日期的周数文本
+   * 基于单位获取当前日期的格式化字符
    */
-  toWeek() {
-    // return `第 ${day(this.date).week()} 周`;
-    return `W${day(this.date).week()}`;
-  }
-
-  /**
-   * 获取日期的月份文本
-   */
-  toMonth() {
-    return formatDate(this.date, 'yyyy-MM');
-  }
-
-  /**
-   * 获取日期在当月的具体日期的文本
-   */
-  toDate() {
-    return day(this.date).date().toString();
+  getString(unit: DateUnit) {
+    switch (unit) {
+      case 'year':
+        return day(this.date).format('YYYY');
+      case 'month':
+        return day(this.date).format('YYYY-MM');
+      case 'week':
+        return day(this.date).format('wo');
+      case 'day':
+        return day(this.date).format('Do');
+      case 'hour':
+        return day(this.date).format('H');
+      case 'minute':
+        return day(this.date).format('m');
+      case 'second':
+        return day(this.date).format('s');
+      case 'millisecond':
+        return day(this.date).format('SSS');
+      default:
+        return '';
+    }
   }
 
   /**
@@ -115,7 +119,7 @@ export class XDate {
   /**
    * 返回一个可格式化的日期字符串
    */
-  toString(format: string = 'YYYY-MM-DD') {
+  toString(format: string = 'YYYY-MM-DD : HH:mm:ss') {
     return day(this.date).format(format);
   }
 

src/models/param/header.ts

@@ -54,18 +54,7 @@ class GanttColumn extends Column {
     super();
 
     this.date = date;
-
-    // this.label = this.date.getBy(unit).toString();
-    switch (unit) {
-      case 'month':
-        this.label = this.date.toMonth();
-        break;
-      case 'week':
-        this.label = this.date.toWeek();
-        break;
-      default:
-        this.label = this.date.getBy(unit).toString();
-    }
+    this.label = this.date.getString(unit);
   }
 }
 

src/utils/date.ts

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import IsoWeek from 'dayjs/plugin/isoWeek';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
 import Variables from '@/constants/vars';
 
 /** ********************************** */
@@ -11,75 +12,17 @@ import Variables from '@/constants/vars';
 dayjs.extend(weekOfYear);
 dayjs.extend(IsoWeek);
 
-export const day = dayjs;
+// 添加自定义格式化
+dayjs.extend(advancedFormat);
 
-type FormatKey = 'M+' | 'd+' | 'h+' | 'H+' | 'm+' | 's+' | 'q+' | 'S';
-export type LanguageKey = 'zh' | 'en';
+export const day = dayjs;
 
 /**
- * 格式化时间
- * @param date 日期对象，或一个日期字符串，对其进行格式化
- * @param fmt 格式文本，y:年，q:季度，M:月，d:日，D:星期，H:小时，m:分钟，s:秒，S:毫秒。例：`yyyy-MM-dd`
- * @param lang 显示星期的文本，中文或者英文
- * @return 格式化的内容
+ * 获取对应单位的毫秒数
+ * @param unit
+ * @param date 所在月的日期，用于计算月份的时间
+ * @returns
  */
-export function formatDate(
-  date: Date | string | number,
-  fmt = 'yyyy-MM-dd',
-  lang: LanguageKey = 'zh'
-) {
-  const WEEK = {
-    zh: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
-    en: [
-      'Sunday',
-      'Monday',
-      'Tuesday',
-      'Wednesday',
-      'Thursday',
-      'Friday',
-      'Saturday'
-    ]
-  };
-
-  if (!['zh', 'en'].includes(lang)) lang = 'zh';
-
-  date = dayjs(date).toDate();
-
-  const o: Record<FormatKey, number> = {
-    'M+': date.getMonth() + 1, // 月份
-    'd+': date.getDate(), // 日
-    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
-    'H+': date.getHours(), // 小时
-    'm+': date.getMinutes(), // 分
-    's+': date.getSeconds(), // 秒
-    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
-    S: date.getMilliseconds() // 毫秒
-  };
-
-  let k: keyof Record<FormatKey, number>;
-  // eslint-disable-next-line no-restricted-syntax
-  for (k in o)
-    if (new RegExp(`(${k})`).test(fmt)) {
-      const v = o[k].toString();
-      fmt = fmt.replace(
-        RegExp.$1,
-        RegExp.$1.length === 1 ? v : `00${v}`.substr(`${v}`.length)
-      );
-    }
-
-  // 年份
-  if (/(y+)/.test(fmt))
-    fmt = fmt.replace(
-      RegExp.$1,
-      `${date.getFullYear()}`.substr(4 - RegExp.$1.length)
-    );
-  // 星期
-  if (/(D+)/.test(fmt)) {
-    fmt = fmt.replace(RegExp.$1, WEEK[lang][date.getDay()]);
-  }
-  return fmt;
-}
-
 export function getMillisecondBy(unit: HeaderDateUnit, date?: Date | number) {
   if (unit === 'month') {
     return dayjs(date).daysInMonth() * Variables.time.millisecondOf.day;