feat: ✨添加 column 对日期格式化的支持

xpyjs · May 11, 2023 · e3b27f8 · e3b27f8
1 parent b426863
commit e3b27f8
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 160 deletions.
diff --git a/demo/demo.vue b/demo/demo.vue
@@ -39,7 +39,11 @@
         {{ scope.row.endDate.getHours() }}:{{ scope.row.endDate.getMinutes() }}
       </x-gantt-column> -->
 
-      <x-gantt-column label="结束日期" format="MM-dd HH:mm:ss" />
+      <x-gantt-column
+        label="结束日期"
+        prop="endDate"
+        date-format="MM-dd HH:mm:ss"
+      />
 
       <x-gantt-slider prop="name"></x-gantt-slider>
     </x-gantt>

diff --git a/src/components/column/index.vue b/src/components/column/index.vue
@@ -21,7 +21,9 @@
       <slot v-if="slots.default" v-bind="toRowData(props.data)" />
 
       <template v-else-if="props.prop">{{
-        props.data?.data?.[props.prop]
+        props.dateFormat
+          ? formatDate(props.data?.data?.[props.prop], props.dateFormat)
+          : props.data?.data?.[props.prop]
       }}</template>
     </div>
   </div>
@@ -36,6 +38,7 @@ import useSlotsBox from '@/composables/useSlotsBox';
 import SelectionVue from './selection.vue';
 import useData from '@/composables/useData';
 // import useData from '@/composables/useData';
+import { formatDate } from '@/utils/date';
 
 export default defineComponent({
   name: Variables.name.column
@@ -53,9 +56,11 @@ watch(
 );
 
 const { $styleBox, rowHeight } = useStyle();
-const { $slotsBox, isMerge } = useSlotsBox();
 const { toRowData } = useData();
 
+// #region 计算宽度
+const { $slotsBox, isMerge } = useSlotsBox();
+
 const realWidth = computed(() => {
   let curWidth = $slotsBox.tableHeaders.leafs[props!.__index ?? 1].width;
 
@@ -71,6 +76,7 @@ const realWidth = computed(() => {
 
   return curWidth;
 });
+// #endregion
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/column/props.ts b/src/components/column/props.ts
@@ -29,6 +29,53 @@ export default {
     default: () => false
   },
 
+  /**
+   * 居中显示
+   */
+  center: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * 自定义格式化显示日期。如果列内需要显示日期时间，提供一个格式化字符串
+   * * 只有提供了该字段才会生效。哪怕只给了key，会使用 yyyy-MM-dd 进行解析
+   * * 注意，这里不能提供默认值，否则所有数据都会被作为日期解析
+   */
+  dateFormat: String,
+
+  /**
+   * 设置空数据显示内容。默认 "无数据 😢"
+   */
+  emptyData: {
+    type: String,
+    default: Variables.noData
+  },
+
+  /**
+   * 是否可以选择文本
+   */
+  selectable: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * 内容样式
+   */
+  columnStyle: {
+    type: [Object, String],
+    default: () => ({})
+  },
+
+  /**
+   * 内容类名
+   */
+  columnClass: {
+    type: [Object, String],
+    default: () => ({})
+  },
+
   // ********* 内部参数 ********* //
   data: RowItem,
   __index: Number

diff --git a/src/utils/date.ts b/src/utils/date.ts
@@ -12,160 +12,69 @@ dayjs.extend(IsoWeek);
 
 export const day = dayjs;
 
-// /**
-//  * 获取两个日期间的所有日期列表
-//  * @param startDate
-//  * @param endDate
-//  * @param format
-//  */
-// export function dateList(
-//   startDate: string | number | Date | null,
-//   endDate: string | number | Date | null,
-//   unit: HeaderDateUnit
-// ): HeaderDateOptions[] {
-//   const r: Record<string, Array<{ len: number; text: string }>> = {};
-//   const startTime = createDate(startDate).getTime();
-//   const endTime = createDate(endDate).getTime();
-
-//   for (let i = startTime; i <= endTime; ) {
-//     const year = dayjs(i).year();
-//     const month = `${dayjs(i).month() + 1}`.padStart(2, '0');
-//     switch (unit) {
-//       case 'week':
-//         if (Object.hasOwn(r, `${year}-${month}`)) {
-//           r[`${year}-${month}`].push({
-//             text: getWeekStr(i),
-//             len: 7
-//           });
-//         } else {
-//           r[`${year}-${month}`] = [
-//             {
-//               text: getWeekStr(i),
-//               len: i === startTime ? 7 - dayjs(i).day() : 7
-//             }
-//           ];
-//         }
-
-//         i +=
-//           i === startTime
-//             ? (7 - dayjs(i).day()) * Variables.time.millisecondOfDay
-//             : Variables.time.millisecondOfWeek;
-//         break;
-//       case 'month':
-//         if (Object.hasOwn(r, `${year}`)) {
-//           r[`${year}`].push({
-//             text: getMonthStr(i),
-//             len: dayjs(i).daysInMonth()
-//           });
-//         } else {
-//           r[`${year}`] = [
-//             {
-//               text: getMonthStr(i),
-//               len:
-//                 i === startTime
-//                   ? dayjs(i).daysInMonth() - dayjs(i).date() + 1
-//                   : dayjs(i).daysInMonth()
-//             }
-//           ];
-//         }
-
-//         i +=
-//           i === startTime
-//             ? (dayjs(i).daysInMonth() - dayjs(i).date() + 1) *
-//               Variables.time.millisecondOfDay
-//             : dayjs(i).daysInMonth() * Variables.time.millisecondOfDay;
-//         break;
-//       case 'day':
-//       default:
-//         if (Object.hasOwn(r, `${year}-${month}`)) {
-//           r[`${year}-${month}`].push({
-//             text: getDayStr(i),
-//             len: 1
-//           });
-//         } else {
-//           r[`${year}-${month}`] = [
-//             {
-//               text: getDayStr(i),
-//               len: 1
-//             }
-//           ];
-//         }
-
-//         i += Variables.time.millisecondOfDay;
-//     }
-//   }
-
-//   const res = [] as HeaderDateOptions[];
-//   for (const key in r) {
-//     res.push({ unit: key, one: r[key] });
-//   }
-
-//   return res;
-// }
-
-// type FormatKey = 'M+' | 'd+' | 'h+' | 'H+' | 'm+' | 's+' | 'q+' | 'S';
-// export type LanguageKey = 'zh' | 'en';
-
-// /**
-//  * 格式化时间
-//  * @param date 日期对象，或一个日期字符串，对其进行格式化
-//  * @param fmt 格式文本，y:年，q:季度，M:月，d:日，D:星期，H:小时，m:分钟，s:秒，S:毫秒。例：`yyyy-MM-dd`
-//  * @param lang 显示星期的文本，中文或者英文
-//  * @return 格式化的内容
-//  */
-// 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 = createDate(date);
-
-//   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;
-// }
+type FormatKey = 'M+' | 'd+' | 'h+' | 'H+' | 'm+' | 's+' | 'q+' | 'S';
+export type LanguageKey = 'zh' | 'en';
+
+/**
+ * 格式化时间
+ * @param date 日期对象，或一个日期字符串，对其进行格式化
+ * @param fmt 格式文本，y:年，q:季度，M:月，d:日，D:星期，H:小时，m:分钟，s:秒，S:毫秒。例：`yyyy-MM-dd`
+ * @param lang 显示星期的文本，中文或者英文
+ * @return 格式化的内容
+ */
+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;
+}