fix(date-time-picker): 修复使用了动态的start值无法在第一次渲染时正确的限制时间 (#1324)

* fix(date-time-picker): 修复使用了动态的start值无法在第一次渲染时正确的限制时间

fix #1285

* test(picker): 更新测试用例

src/date-time-picker/__test__/index.test.jsx

@@ -3,8 +3,8 @@ import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
 import dayjs from 'dayjs';
 
-import DateTimePicker from '../date-time-picker.vue';
-import PickerItem from '../../picker/picker-item.vue';
+import DateTimePicker from '../date-time-picker';
+import PickerItem from '../../picker/picker-item';
 import { DEFAULT_ITEM_HEIGHT, ANIMATION_TIME_LIMIT } from '../../picker/picker.class';
 
 const makeTouch = (el, eventName, touchPosition) => {
@@ -139,7 +139,7 @@ describe('DateTimePicker', () => {
           start: '2023-06-13'
         },
       });
-      expect(wrapper.vm.valueOfPicker).toStrictEqual(['10', '0', '0'])
+      expect(wrapper.vm.value).toStrictEqual('10:00:00')
     })
 
     it(': start && end ', async () => {

src/date-time-picker/date-time-picker.vue → src/date-time-picker/date-time-picker.tsx

@@ -1,22 +1,8 @@
-<template>
-  <t-picker
-    :class="className"
-    :value="valueOfPicker"
-    :title="title"
-    :confirm-btn="confirmButtonText"
-    :cancel-btn="cancelButtonText"
-    :columns="columns"
-    @confirm="onConfirm"
-    @cancel="onCancel"
-    @pick="onPick"
-  />
-</template>
-
-<script lang="ts">
 import { ref, computed, defineComponent, toRefs, watch, nextTick } from 'vue';
 import dayjs, { Dayjs, UnitType } from 'dayjs';
 import weekday from 'dayjs/plugin/weekday';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import objectSupport from 'dayjs/plugin/objectSupport';
 import isArray from 'lodash/isArray';
 
 import config from '../config';
@@ -29,25 +15,17 @@ import { useConfig } from '../config-provider/useConfig';
 
 dayjs.extend(weekday);
 dayjs.extend(customParseFormat);
+dayjs.extend(objectSupport);
 
 const { prefix } = config;
 const name = `${prefix}-date-time-picker`;
 
-const precisionRankRecord: Record<string, number> = {
-  year: 0,
-  month: 1,
-  date: 2,
-  hour: 3,
-  minute: 4,
-  second: 5,
-};
-
 export default defineComponent({
   name,
   components: { TPicker },
   props: DateTimePickerProps,
   emits: ['change', 'cancel', 'confirm', 'pick', 'update:modelValue', 'update:value'],
-  setup(props: any) {
+  setup(props) {
     const { globalConfig } = useConfig('dateTimePicker');
     const className = computed(() => [`${name}`]);
     const { value } = toRefs(props);
@@ -60,6 +38,7 @@ export default defineComponent({
     const title = computed(() => {
       return props.title || globalConfig.value.title;
     });
+
     const confirmButtonText = computed(() => props.confirmBtn || globalConfig.value.confirm);
     const cancelButtonText = computed(() => props.cancelBtn || globalConfig.value.cancel);
     const normalize = (val: string | number, defaultDay: Dayjs) =>
@@ -84,7 +63,6 @@ export default defineComponent({
         const dateStr = dayjs(start.value).format('YYYY-MM-DD');
         currentValue = `${dateStr} ${currentValue}`;
       }
-
       return currentValue && dayjs(currentValue).isValid() ? rationalize(dayjs(currentValue)) : start.value;
     };
     const curDate = ref(calcDate(innerValue.value));
@@ -174,9 +152,15 @@ export default defineComponent({
       return ret;
     });
 
-    const onConfirm = () => {
-      props.onConfirm?.(dayjs(curDate.value).format(props.format));
-      setDateTimePickerValue(dayjs(curDate.value).format(props.format));
+    const onConfirm = (value: string[]) => {
+      const dayObject = value.reduce((map, cur, index) => {
+        const type = meaningColumn.value[index];
+        map[type] = cur;
+        return map;
+      }, {});
+      const cur = dayjs(dayObject);
+      props.onConfirm?.(dayjs(cur || curDate.value).format(props.format));
+      setDateTimePickerValue(dayjs(cur || curDate.value).format(props.format));
     };
 
     const onCancel = (context: { e: MouseEvent }) => {
@@ -196,19 +180,20 @@ export default defineComponent({
       curDate.value = calcDate(val);
     });
 
-    return {
-      className,
-      confirmButtonText,
-      cancelButtonText,
-      title,
-      start,
-      end,
-      valueOfPicker,
-      columns,
-      onConfirm,
-      onCancel,
-      onPick,
+    return () => {
+      return (
+        <t-picker
+          class={className.value}
+          value={valueOfPicker.value}
+          title={title.value}
+          confirm-btn={confirmButtonText.value}
+          cancel-btn={cancelButtonText.value}
+          columns={columns.value}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          onPick={onPick}
+        />
+      );
     };
   },
 });
-</script>

src/date-time-picker/index.ts

@@ -1,4 +1,4 @@
-import DateTimePicker from './date-time-picker.vue';
+import DateTimePicker from './date-time-picker';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';

src/picker/__test__/__snapshots__/demo.test.jsx.snap

@@ -73,7 +73,9 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
           </div>
           <div
             class="t-picker__title"
-          />
+          >
+            
+          </div>
           <div
             class="t-picker__confirm"
           >
@@ -262,7 +264,9 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
           </div>
           <div
             class="t-picker__title"
-          />
+          >
+            
+          </div>
           <div
             class="t-picker__confirm"
           >
@@ -367,7 +371,9 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
           </div>
           <div
             class="t-picker__title"
-          />
+          >
+            
+          </div>
           <div
             class="t-picker__confirm"
           >
@@ -808,7 +814,9 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-picker__title"
-              />
+              >
+                
+              </div>
               <div
                 class="t-picker__confirm"
               >
@@ -913,7 +921,9 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-picker__title"
-              />
+              >
+                
+              </div>
               <div
                 class="t-picker__confirm"
               >
@@ -1102,7 +1112,9 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-picker__title"
-              />
+              >
+                
+              </div>
               <div
                 class="t-picker__confirm"
               >
@@ -1305,7 +1317,9 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-picker__title"
-              />
+              >
+                
+              </div>
               <div
                 class="t-picker__confirm"
               >
@@ -1485,7 +1499,9 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
           </div>
           <div
             class="t-picker__title"
-          />
+          >
+            
+          </div>
           <div
             class="t-picker__confirm"
           >

src/picker/__test__/index.test.jsx

@@ -1,8 +1,8 @@
 import { nextTick, ref } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import Picker from '../picker.vue';
-import PickerItem from '../picker-item.vue';
+import Picker from '../picker';
+import PickerItem from '../picker-item';
 
 import { DEFAULT_ITEM_HEIGHT, ANIMATION_TIME_LIMIT } from '../picker.class';
 

src/picker/cascade.vue

@@ -10,7 +10,7 @@ import { computed, defineComponent, ref } from 'vue';
 import config from '../config';
 import PickerProps from './props';
 import { PickerColumn, PickerValue } from './type';
-import Picker from './picker.vue';
+import Picker from './picker';
 
 const { prefix } = config;
 const name = `${prefix}-cascade`;

src/picker/index.ts

@@ -1,4 +1,4 @@
-import _Picker from './picker.vue';
+import _Picker from './picker';
 import _Cascade from './cascade.vue';
 import { withInstall, WithInstallType } from '../shared';
 

src/picker/picker-item.vue → src/picker/picker-item.tsx

@@ -1,12 +1,3 @@
-<template>
-  <ul ref="root" :class="className">
-    <li v-for="(option, index) in options" :key="index" :class="itemClassName">
-      {{ renderLabel ? renderLabel(option) : option.label }}
-    </li>
-  </ul>
-</template>
-
-<script lang="ts">
 import { ref, computed, onMounted, toRefs, defineComponent, PropType, watch } from 'vue';
 import config from '../config';
 import Picker from './picker.class';
@@ -46,7 +37,6 @@ export default defineComponent({
     };
 
     const className = computed(() => `${name}`);
-    const wrapperClassName = computed(() => [`${name}__wrapper`]);
     const itemClassName = computed(() => [`${name}__item`]);
     const setIndex = (index: number) => {
       if (picker) {
@@ -78,15 +68,17 @@ export default defineComponent({
     });
 
     onMounted(() => {
-      picker = new Picker({
-        el: root.value,
-        defaultIndex: getIndexByValue(props.value) || 0,
-        onChange: (index: number) => {
-          const curItem = props.options[index];
-          const changeValue = { value: curItem.value, index };
-          props.onPick?.(changeValue);
-        },
-      });
+      if (root.value) {
+        picker = new Picker({
+          el: root.value,
+          defaultIndex: getIndexByValue(props.value) || 0,
+          onChange: (index: number) => {
+            const curItem = props.options[index];
+            const changeValue = { value: curItem.value, index };
+            props.onPick?.(changeValue);
+          },
+        });
+      }
     });
 
     watch(
@@ -97,13 +89,16 @@ export default defineComponent({
       { flush: 'post', deep: true },
     );
 
-    return {
-      root,
-      className,
-      wrapperClassName,
-      itemClassName,
-      ...toRefs(props),
+    return () => {
+      return (
+        <ul ref={root} class={className.value}>
+          {(props.options || []).map((option, index) => (
+            <li key={index} class={itemClassName.value}>
+              {props.renderLabel ? props.renderLabel(option) : option.label}
+            </li>
+          ))}
+        </ul>
+      );
     };
   },
 });
-</script>