feat: 自定义头部日期格式化

close #106
xpyjs · Jul 1, 2024 · 1c2a3e8 · 1c2a3e8
1 parent 0f4c589
commit 1c2a3e8
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 8 deletions.
diff --git a/demo/debug.vue b/demo/debug.vue
@@ -12,8 +12,12 @@
       :level-color="['#ffffff']"
       locale="zh-cn"
       primary-color="#F1F2FF"
-      row-height="46"
+      row-height="40"
       show-today
+      format-gantt-header="Q Do"
+      :gantt-column-size="{
+        day: 100
+      }"
     >
       <x-gantt-column prop="index">
         <template #title>

diff --git a/src/components/root/rootProps.ts b/src/components/root/rootProps.ts
@@ -254,5 +254,12 @@ export default {
       Array<{ date: LikeDate | LikeDate[]; color?: string }>
     >,
     default: () => []
+  },
+
+  /**
+   * 自定义日期头格式化
+   */
+  formatGanttHeader: {
+    type: String
   }
 };
diff --git a/src/composables/useGanttHeader.ts b/src/composables/useGanttHeader.ts
@@ -19,11 +19,15 @@ export default () => {
       ),
       store.$data.start,
       store.$data.end,
-      store.$styleBox.unit
+      store.$styleBox.unit,
+      store.$styleBox.formatGanttHeader
     );
   }
 
-  watch(() => store.$styleBox.unit, setGanttHeaders);
+  watch(
+    () => [store.$styleBox.unit, store.$styleBox.formatGanttHeader],
+    setGanttHeaders
+  );
 
   return {
     setGanttHeaders,

diff --git a/src/composables/useStyle.ts b/src/composables/useStyle.ts
@@ -49,6 +49,7 @@ export default () => {
       store.$styleBox.sliderIntoView = props.sliderIntoView;
       store.$styleBox.draggable = props.draggable;
       store.$styleBox.holidays = props.holidays;
+      store.$styleBox.formatGanttHeader = props.formatGanttHeader;
     };
 
     fn();

diff --git a/src/models/param/date.ts b/src/models/param/date.ts
@@ -31,7 +31,9 @@ export class XDate {
   /**
    * 基于单位获取当前日期的格式化字符
    */
-  getString(unit: DateUnit) {
+  getString(unit: DateUnit, format?: string) {
+    if (format) return day(this.date).format(format);
+
     switch (unit) {
       case 'year':
         return day(this.date).format('YYYY');

diff --git a/src/models/param/header.ts b/src/models/param/header.ts
@@ -59,11 +59,11 @@ class GanttColumn extends Column {
   label: string;
   uuid: string = uuid();
 
-  constructor(date: XDate, unit: DateUnit) {
+  constructor(date: XDate, unit: DateUnit, format?: string) {
     super();
 
     this.date = date;
-    this.label = this.date.getString(unit);
+    this.label = this.date.getString(unit, format);
   }
 }
 
@@ -218,6 +218,7 @@ class GanttHeader extends Header {
   end: XDate = new XDate().getOffset(Variables.time.millisecondOf.day);
   unit: HeaderDateUnit = 'day';
   minLength: number = 0;
+  customFormatter?: string; // 自定义格式化。它只自定义下面日期一层，不能自定义上面范围
 
   /**
    * 设置日期
@@ -226,7 +227,8 @@ class GanttHeader extends Header {
     minLen: number,
     start?: XDate,
     end?: XDate,
-    unit: HeaderDateUnit = 'day'
+    unit: HeaderDateUnit = 'day',
+    customFormatter?: string // dayjs format || advancedFormat
   ) {
     let step = -Variables.time.millisecondOf.day;
     if (unit === 'hour') {
@@ -252,6 +254,7 @@ class GanttHeader extends Header {
     this.start = _start ?? new XDate();
     this.end = _end ?? new XDate().getOffset(Variables.time.millisecondOf.day);
     this.minLength = minLen;
+    this.customFormatter = customFormatter;
 
     this.generate();
   }
@@ -302,7 +305,9 @@ class GanttHeader extends Header {
         columns[i].children = [];
       }
 
-      columns[i].children?.push(new GanttColumn(date, this.unit));
+      columns[i].children?.push(
+        new GanttColumn(date, this.unit, this.customFormatter)
+      );
     });
 
     this.headers = this.convertToRows(columns, this.getAllColumns(columns));

diff --git a/src/models/param/styles.ts b/src/models/param/styles.ts
@@ -176,4 +176,13 @@ export default class StyleBox {
 
     this._holidays = h;
   }
+
+  private _formatGanttHeader?: string;
+  public get formatGanttHeader() {
+    return this._formatGanttHeader;
+  }
+
+  public set formatGanttHeader(v: string | undefined) {
+    this._formatGanttHeader = v;
+  }
 }
diff --git a/types/root/prop.d.ts b/types/root/prop.d.ts
@@ -274,6 +274,15 @@ export declare const props: {
    * @see https://docs.xiaopangying.com/gantt/root.html#holidays
    */
   holidays: PropType<Array<{ date: LikeDate | LikeDate[]; color?: string }>>;
+
+  /**
+   * 自定义甘特图头部格式化
+   *
+   * @description 它采用 dayjs 的格式化，并且包含所有高级格式化内容。详细 @see https://day.js.org/docs/en/display/format
+   *
+   * @see https://docs.xiaopangying.com/gantt/root.html#format-gantt-header
+   */
+  formatGanttHeader: string;
 };
 
 export type RootProps = ExtractPropTypes<typeof props>;