✨ feat(时间日期相关控件): 进入时默认获取当前日期时间

hookehuyr
Commit c4795243722aff86e206b56eec5cff4f0af78144 c4795243 1 parent 78ca250d
Showing 3 changed files with 54 additions and 5 deletions
src/components/DatePickerField/index.vue
src/components/DateTimePickerField/index.vue
src/components/TimePickerField/index.vue
--- a/src/components/DatePickerField/index.vue
View file @c479524
+++ b/src/components/DatePickerField/index.vue
View file @c479524
 <!--
  * @Date: 2022-08-31 11:45:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-29 11:45:54
+ * @LastEditTime: 2023-02-07 14:06:11
  * @FilePath: /data-table/src/components/DatePickerField/index.vue
  * @Description: 日期选择组件
 -->
@@ -60,14 +60,28 @@ const onConfirm = ({ selectedValues, selectedOptions }) => {
 const columns_type = ref([]);
 const date_format = props.item.component_props.data_dateformat; // YYYY-MM=年月，YYYY-MM-DD=年月日
+// 数字前面补位
+const formatZero = (num, len) => {
+  if (String(num).length > len) {
+    return num;
+  }
+  return (Array(len).join(0) + num).slice(-len)
+}
 onMounted(() => {
   currentDate.value = props.item.value.split("-");
+  const Year = String(dayjs().year());
+  const Month = formatZero(dayjs().month(), 2);
+  const Day = formatZero(dayjs().date(), 2);
   switch (date_format) {
     case "YYYY-MM":
       columns_type.value = ['year', 'month']
+      // 设置默认值
+      currentDate.value = [Year, Month];
       break;
     case "YYYY-MM-DD":
       columns_type.value = ['year', 'month', 'day']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
       break;
   }
 });
--- a/src/components/DateTimePickerField/index.vue
View file @c479524
+++ b/src/components/DateTimePickerField/index.vue
View file @c479524
 <!--
  * @Date: 2022-09-08 15:02:45
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-29 11:44:54
+ * @LastEditTime: 2023-02-07 14:07:51
  * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
  * @Description: 日期时间选择器
 -->
@@ -69,33 +69,61 @@ const onCancel = () => {
 const columns_date_type = ref([]);
 const columns_time_type = ref([]);
 const date_format = props.item.component_props.data_dateformat;
+// 数字前面补位
+const formatZero = (num, len) => {
+  if (String(num).length > len) {
+    return num;
+  }
+  return (Array(len).join(0) + num).slice(-len)
+}
 onMounted(() => {
   // 获取值定位显示
   const datetime = props.item.value.split(" ");
   currentDate.value = datetime[0]?.split("-");
   currentTime.value = datetime[1]?.split(":");
   // YYYY=年，YYYY-MM=年月，YYYY-MM-DD=年月日，YYYY-MM-DD HH=年月日时，YYYY-MM-DD HH:mm=年月日时分，YYYY-MM-DD HH:mm:ss=年月日时分秒
+  const Hour = String(dayjs().hour());
+  const Minute = String(dayjs().minute());
+  const Second = String(dayjs().second());
+  const Year = String(dayjs().year());
+  const Month = formatZero(dayjs().month(), 2);
+  const Day = formatZero(dayjs().date(), 2);
   switch (date_format) {
     case "YYYY":
       columns_date_type.value = ['year']
+      // 设置默认值
+      currentDate.value = [Year];
       break;
     case "YYYY-MM":
       columns_date_type.value = ['year', 'month']
+      // 设置默认值
+      currentDate.value = [Year, Month];
       break;
     case "YYYY-MM-DD":
       columns_date_type.value = ['year', 'month', 'day']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
       break;
     case "YYYY-MM-DD HH":
       columns_date_type.value = ['year', 'month', 'day']
       columns_time_type.value = ['hour']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
+      currentTime.value = [Hour];
       break;
     case "YYYY-MM-DD HH:mm":
       columns_date_type.value = ['year', 'month', 'day']
       columns_time_type.value = ['hour', 'minute']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
+      currentTime.value = [Hour, Minute];
       break;
     case "YYYY-MM-DD HH:mm:ss":
       columns_date_type.value = ['year', 'month', 'day']
       columns_time_type.value = ['hour', 'minute', 'second']
+      // 设置默认值
+      currentDate.value = [Year, Month, Day];
+      currentTime.value = [Hour, Minute, Second];
       break;
   }
 });
--- a/src/components/TimePickerField/index.vue
View file @c479524
+++ b/src/components/TimePickerField/index.vue
View file @c479524
 <!--
  * @Date: 2022-08-31 11:45:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-29 11:46:19
+ * @LastEditTime: 2023-02-07 14:06:51
  * @FilePath: /data-table/src/components/TimePickerField/index.vue
  * @Description: 时间选择组件
 -->
@@ -63,12 +63,19 @@ const columns_type = ref([]);
 const date_format = props.item.component_props.data_dateformat; // HH:mm=时分，HH:mm:ss=时分秒
 onMounted(() => {
   currentTime.value = props.item.value.split(":");
+  const Hour = String(dayjs().hour());
+  const Minute = String(dayjs().minute());
+  const Second = String(dayjs().second());
   switch (date_format) {
     case "HH:mm":
-      columns_type.value = ['hour', 'minute']
+      columns_type.value = ['hour', 'minute'];
+      // 设置默认值
+      currentTime.value = [Hour, Minute];
       break;
     case "HH:mm:ss":
-      columns_type.value = ['hour', 'minute', 'second']
+      columns_type.value = ['hour', 'minute', 'second'];
+      // 设置默认值
+      currentTime.value = [Hour, Minute, Second];
       break;
   }
 });