feat: ele 新增 RangePicker 和 getRangePickerDefaultProps 适配

apps/web-ele/src/adapter/component/index.ts

@@ -176,6 +176,7 @@ export type ComponentType =
   | 'Input'
   | 'InputNumber'
   | 'RadioGroup'
+  | 'RangePicker'
   | 'RichTextarea'
   | 'Select'
   | 'Space'
@@ -299,6 +300,26 @@ async function initComponentAdapter() {
         slots,
       );
     },
+    RangePicker: (props, { attrs, slots }) => {
+      const { name, id } = props;
+      const extraProps: Recordable<any> = {};
+      if (name && !Array.isArray(name)) {
+        extraProps.name = [name, `${name}_end`];
+      }
+      if (id && !Array.isArray(id)) {
+        extraProps.id = [id, `${id}_end`];
+      }
+      return h(
+        ElDatePicker,
+        {
+          ...props,
+          type: 'datetimerange',
+          ...attrs,
+          ...extraProps,
+        },
+        slots,
+      );
+    },
     DatePicker: (props, { attrs, slots }) => {
       const { name, id, type } = props;
       const extraProps: Recordable<any> = {};

apps/web-ele/src/utils/rangePickerProps.ts

@@ -1,59 +1,77 @@
-import type { Dayjs } from 'dayjs';
-
 import dayjs from 'dayjs';
 
 import { $t } from '#/locales';
 
-/** 时间段选择器拓展  */
+/** 时间段选择器拓展 */
 export function getRangePickerDefaultProps() {
   return {
-    format: 'YYYY-MM-DD HH:mm:ss',
+    startPlaceholder: $t('utils.rangePicker.beginTime'),
-    placeholder: [
+    endPlaceholder: $t('utils.rangePicker.endTime'),
-      $t('utils.rangePicker.beginTime'),
+    shortcuts: [
-      $t('utils.rangePicker.endTime'),
+      {
+        text: $t('utils.rangePicker.today'),
+        value: () => {
+          return [dayjs().startOf('day'), dayjs().endOf('day')];
+        },
+      },
+      {
+        text: $t('utils.rangePicker.yesterday'),
+        value: () => {
+          return [
+            dayjs().subtract(1, 'day').startOf('day'),
+            dayjs().subtract(1, 'day').endOf('day'),
+          ];
+        },
+      },
+      {
+        text: $t('utils.rangePicker.last7Days'),
+        value: () => {
+          return [
+            dayjs().subtract(7, 'day').startOf('day'),
+            dayjs().endOf('day'),
+          ];
+        },
+      },
+      {
+        text: $t('utils.rangePicker.last30Days'),
+        value: () => {
+          return [
+            dayjs().subtract(30, 'day').startOf('day'),
+            dayjs().endOf('day'),
+          ];
+        },
+      },
+      {
+        text: $t('utils.rangePicker.thisWeek'),
+        value: () => {
+          return [dayjs().startOf('week'), dayjs().endOf('day')];
+        },
+      },
+      {
+        text: $t('utils.rangePicker.lastWeek'),
+        value: () => {
+          return [
+            dayjs().subtract(1, 'week').startOf('day'),
+            dayjs().endOf('day'),
+          ];
+        },
+      },
+      {
+        text: $t('utils.rangePicker.thisMonth'),
+        value: () => {
+          return [dayjs().startOf('month'), dayjs().endOf('day')];
+        },
+      },
     ],
-    ranges: {
-      [$t('utils.rangePicker.today')]: () =>
-        [dayjs().startOf('day'), dayjs().endOf('day')] as [Dayjs, Dayjs],
-      [$t('utils.rangePicker.last7Days')]: () =>
-        [dayjs().subtract(7, 'day').startOf('day'), dayjs().endOf('day')] as [
-          Dayjs,
-          Dayjs,
-        ],
-      [$t('utils.rangePicker.last30Days')]: () =>
-        [dayjs().subtract(30, 'day').startOf('day'), dayjs().endOf('day')] as [
-          Dayjs,
-          Dayjs,
-        ],
-      [$t('utils.rangePicker.yesterday')]: () =>
-        [
-          dayjs().subtract(1, 'day').startOf('day'),
-          dayjs().subtract(1, 'day').endOf('day'),
-        ] as [Dayjs, Dayjs],
-      [$t('utils.rangePicker.thisWeek')]: () =>
-        [dayjs().startOf('week'), dayjs().endOf('day')] as [Dayjs, Dayjs],
-      [$t('utils.rangePicker.thisMonth')]: () =>
-        [dayjs().startOf('month'), dayjs().endOf('day')] as [Dayjs, Dayjs],
-      [$t('utils.rangePicker.lastWeek')]: () =>
-        [dayjs().subtract(1, 'week').startOf('day'), dayjs().endOf('day')] as [
-          Dayjs,
-          Dayjs,
-        ],
-    },
-    showTime: {
-      defaultValue: [
-        dayjs('00:00:00', 'HH:mm:ss'),
-        dayjs('23:59:59', 'HH:mm:ss'),
-      ],
-      format: 'HH:mm:ss',
-    },
     transformDateFunc: (dates: any) => {
+      // TODO puhui999: 没起作用后面调试再看看
       if (dates && dates.length === 2) {
         // 格式化为后台支持的时间格式
         return [dates.createTime[0], dates.createTime[1]].join(',');
       }
       return {};
     },
+    format: 'YYYY-MM-DD HH:mm:ss',
     valueFormat: 'YYYY-MM-DD HH:mm:ss',
   };
 }

apps/web-ele/src/views/system/tenant/data.ts

@@ -149,7 +149,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
     },
-    // TODO @puhui999：貌似创建时间，出不来；
     {
       fieldName: 'createTime',
       label: '创建时间',