fix 处理单独显示日期样式，处理时间最大最小显示优化

hookehuyr
Commit e1f03f4e71f4d51c698f644fe9c98c449f90d3f8 e1f03f4e 1 parent d3a06ca3
Showing 1 changed file with 79 additions and 22 deletions
src/components/DateTimePickerField/index.vue
--- a/src/components/DateTimePickerField/index.vue
View file @e1f03f4
+++ b/src/components/DateTimePickerField/index.vue
View file @e1f03f4
 <!--
  * @Date: 2022-09-08 15:02:45
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-07 18:13:52
+ * @LastEditTime: 2024-08-09 11:40:31
  * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
  * @Description: 日期时间选择器
 -->
@@ -31,7 +31,7 @@
         @cancel="onCancel"
       >
         <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :columns-type="columns_date_type" />
-        <van-time-picker v-model="currentTime" :columns-type="columns_time_type" />
+        <van-time-picker v-if="columns_time_type.length" v-model="currentTime" :min-time="minTime" :max-time="maxTime" :columns-type="columns_time_type" />
       </van-picker-group>
     </van-popup>
   </div>
@@ -65,7 +65,11 @@ const currentDate = ref([]);
 const currentTime = ref([]);
 const onConfirm = () => {
-  props.item.value = `${currentDate.value.join("-")} ${currentTime.value.join(":")}`;
+  if (columns_time_type.value.length) {
+    props.item.value = `${currentDate.value.join("-")} ${currentTime.value.join(":")}`;
+  } else {
+    props.item.value = `${currentDate.value.join("-")}`;
+  }
   showPicker.value = false;
 };
 const onCancel = () => {
@@ -83,9 +87,15 @@ const formatZero = (num, len) => {
   return (Array(len).join(0) + num).slice(-len)
 }
+const data_minvalue = props.item.component_props.data_minvalue;
+const data_maxvalue = props.item.component_props.data_maxvalue;
+
 const minDate = ref()
 const maxDate = ref()
+const minTime = ref()
+const maxTime = ref()
+
 onMounted(() => {
   // 根据默认值时间调整显示
   props.item.value = props.item.component_props.default ? props.item.component_props.default : '';
@@ -122,16 +132,43 @@ onMounted(() => {
       columns_date_type.value = ['year']
       // 设置默认值
       currentDate.value = [Year];
+      // 设置默认最大最小日期
+      if (data_minvalue.split(" ")[0].length) {
+        const min = data_minvalue.split(" ")[0].split("-");
+        minDate.value = new Date(+min[0] + 1, 0, 0);
+      }
+      if (data_maxvalue.split(" ")[0].length) {
+        const max = data_maxvalue.split(" ")[0].split("-")
+        maxDate.value = new Date(+max[0] + 1, 0, 0)
+      }
       break;
     case "YYYY-MM":
       columns_date_type.value = ['year', 'month']
       // 设置默认值
       currentDate.value = [Year, Month];
+      // 设置默认最大最小日期
+      if (data_minvalue.split(" ")[0].length) {
+        const min = data_minvalue.split(" ")[0].split("-");
+        minDate.value = new Date(+min[0], +min[1], 0);
+      }
+      if (data_maxvalue.split(" ")[0].length) {
+        const max = data_maxvalue.split(" ")[0].split("-")
+        maxDate.value = new Date(+max[0], +max[1], 0)
+      }
       break;
     case "YYYY-MM-DD":
       columns_date_type.value = ['year', 'month', 'day']
       // 设置默认值
       currentDate.value = [Year, Month, Day];
+      // 设置默认最大最小日期
+      if (data_minvalue.split(" ")[0].length) {
+        const min = data_minvalue.split(" ")[0].split("-");
+        minDate.value = new Date(+min[0], +min[1] - 1, +min[2]);
+      }
+      if (data_maxvalue.split(" ")[0].length) {
+        const max = data_maxvalue.split(" ")[0].split("-")
+        maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
+      }
       break;
     case "YYYY-MM-DD HH":
       columns_date_type.value = ['year', 'month', 'day']
@@ -139,6 +176,22 @@ onMounted(() => {
       // 设置默认值
       currentDate.value = [Year, Month, Day];
       currentTime.value = [Hour];
+      // 设置默认最大最小日期
+      if (data_minvalue.split(" ")[0].length) {
+        const min = data_minvalue.split(" ")[0].split("-");
+        minDate.value = new Date(+min[0], +min[1] - 1, +min[2]);
+      }
+      if (data_maxvalue.split(" ")[0].length) {
+        const max = data_maxvalue.split(" ")[0].split("-")
+        maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
+      }
+      // 设置默认最大最小时间
+      if (data_minvalue.split(" ")[1]) {
+        minTime.value = data_minvalue.split(" ")[1];
+      }
+      if (data_maxvalue.split(" ")[1]) {
+        maxTime.value = data_maxvalue.split(" ")[1];
+      }
       break;
     case "YYYY-MM-DD HH:mm":
       columns_date_type.value = ['year', 'month', 'day']
@@ -146,6 +199,13 @@ onMounted(() => {
       // 设置默认值
       currentDate.value = [Year, Month, Day];
       currentTime.value = [Hour, Minute];
+      // 设置默认最大最小时间
+      if (data_minvalue.split(" ")[1]) {
+        minTime.value = data_minvalue.split(" ")[1];
+      }
+      if (data_maxvalue.split(" ")[1]) {
+        maxTime.value = data_maxvalue.split(" ")[1];
+      }
       break;
     case "YYYY-MM-DD HH:mm:ss":
       columns_date_type.value = ['year', 'month', 'day']
@@ -153,30 +213,27 @@ onMounted(() => {
       // 设置默认值
       currentDate.value = [Year, Month, Day];
       currentTime.value = [Hour, Minute, Second];
+      // 设置默认最大最小日期
+      if (data_minvalue.split(" ")[0].length) {
+        const min = data_minvalue.split(" ")[0].split("-");
+        minDate.value = new Date(+min[0], +min[1] - 1, +min[2]);
+      }
+      if (data_maxvalue.split(" ")[0].length) {
+        const max = data_maxvalue.split(" ")[0].split("-")
+        maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
+      }
+      // 设置默认最大最小时间
+      if (data_minvalue.split(" ")[1]) {
+        minTime.value = data_minvalue.split(" ")[1];
+      }
+      if (data_maxvalue.split(" ")[1]) {
+        maxTime.value = data_maxvalue.split(" ")[1];
+      }
       break;
   }
-  // 设置默认最大最小日期
-  if (data_minvalue.split(" ")[0].length) {
-    const min = data_minvalue.split(" ")[0].split("-")
-    if (date_format === 'YYYY-MM') {
-      minDate.value = new Date(+min[0], +min[1] - 1)
-    } else {
-      minDate.value = new Date(+min[0], +min[1] - 1, +min[2])
-    }
-  }
-  if (data_maxvalue.split(" ")[0].length) {
-    const max = data_maxvalue.split(" ")[0].split("-")
-    if (date_format === 'YYYY-MM') {
-      maxDate.value = new Date(+max[0], +max[1] - 1)
-    } else {
-      maxDate.value = new Date(+max[0], +max[1] - 1, +max[2])
-    }
-  }
 });
 const required = props.item.component_props.required;
-const data_minvalue = props.item.component_props.data_minvalue;
-const data_maxvalue = props.item.component_props.data_maxvalue;
 const validator = (val) => {
   if (required && !val) {
     return false;