hy-app 0.4.13 → 0.5.0

package/components/hy-datetime-picker/hy-datetime-picker.vue

@@ -1,686 +1,521 @@
 <template>
-  <view :class="['hy-datetime-picker', customClass]" :style="customStyle">
-    <view
-      v-if="hasInput"
-      class="hy-datetime-picker__has-input"
-      @click="onShowByClickInput"
-    >
-      <slot name="trigger" :value="inputValue">
-        <HyInput
-          v-model="inputValue"
-          :readonly="true"
-          :disabled="input?.disabled"
-          :disabledColor="input?.disabledColor"
-          :shape="input?.shape"
-          :border="input?.border"
-          :prefixIcon="input?.prefixIcon"
-          :suffixIcon="input?.suffixIcon"
-          :color="input?.color"
-          :fontSize="input?.fontSize"
-          :inputAlign="input?.inputAlign"
-          :placeholder="input?.placeholder || '请选择时间'"
-          :placeholderStyle="input?.placeholderStyle"
-          :placeholderClass="input?.placeholderClass"
-          :customStyle="
-            Object.assign({ 'pointer-events': 'none' }, input?.customStyle)
-          "
-        ></HyInput>
-        <view class="input-cover"></view>
-      </slot>
+    <view :class="['hy-datetime-picker', customClass]" :style="customStyle">
+        <view v-if="hasInput" class="hy-datetime-picker__has-input" @click="onShowByClickInput">
+            <slot name="trigger" :value="inputValue">
+                <HyInput
+                    v-model="inputValue"
+                    :readonly="true"
+                    :disabled="input?.disabled"
+                    :disabledColor="input?.disabledColor"
+                    :shape="input?.shape"
+                    :border="input?.border"
+                    :prefixIcon="input?.prefixIcon"
+                    :suffixIcon="input?.suffixIcon"
+                    :color="input?.color"
+                    :fontSize="input?.fontSize"
+                    :inputAlign="input?.inputAlign"
+                    :placeholder="input?.placeholder || '请选择时间'"
+                    :placeholderStyle="input?.placeholderStyle"
+                    :placeholderClass="input?.placeholderClass"
+                    :customStyle="Object.assign({ 'pointer-events': 'none' }, input?.customStyle)"
+                ></HyInput>
+                <view class="input-cover"></view>
+            </slot>
+        </view>
+        <HyPicker
+            ref="picker"
+            :show="show || (hasInput && showByClickInput)"
+            :popupMode="popupMode"
+            :closeOnClickOverlay="closeOnClickOverlay"
+            :columns="columns"
+            :title="title"
+            :itemHeight="itemHeight"
+            :loading="loading"
+            :showToolbar="showToolbar"
+            :visibleItemCount="visibleItemCount"
+            :defaultIndex="innerDefaultIndex"
+            :cancelText="cancelText"
+            :cancelColor="cancelColor"
+            :confirmColor="confirmColor"
+            :toolbarRightSlot="toolbarRightSlot"
+            @close="close"
+            @cancel="cancel"
+            @confirm="confirm"
+            @change="change"
+        >
+            <template #toolbar-right>
+                <slot name="toolbar-right">
+                    {{ confirmText }}
+                </slot>
+            </template>
+            <template #toolbar-bottom>
+                <slot name="toolbar-bottom"></slot>
+            </template>
+        </HyPicker>
     </view>
-    <HyPicker
-      ref="picker"
-      :show="show || (hasInput && showByClickInput)"
-      :popupMode="popupMode"
-      :closeOnClickOverlay="closeOnClickOverlay"
-      :columns="columns"
-      :title="title"
-      :itemHeight="itemHeight"
-      :loading="loading"
-      :showToolbar="showToolbar"
-      :visibleItemCount="visibleItemCount"
-      :defaultIndex="innerDefaultIndex"
-      :cancelText="cancelText"
-      :cancelColor="cancelColor"
-      :confirmColor="confirmColor"
-      :toolbarRightSlot="toolbarRightSlot"
-      @close="close"
-      @cancel="cancel"
-      @confirm="confirm"
-      @change="change"
-    >
-      <template #toolbar-right>
-        <slot name="toolbar-right">
-          {{ confirmText }}
-        </slot>
-      </template>
-      <template #toolbar-bottom>
-        <slot name="toolbar-bottom"></slot>
-      </template>
-    </HyPicker>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-datetime-picker",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-datetime-picker',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import dayjs from "dayjs/esm";
-import { error, padZero, DateModeEnum } from "../../libs";
-import type HyInputProps from "../hy-input/typing";
-import type { IDatetimePickerEmits } from "./typing";
+import { computed, onMounted, ref, watch } from 'vue'
+import dayjs from 'dayjs/esm'
+import { error, padZero, DateModeEnum } from '../../libs'
+import type { IDatetimePickerEmits } from './typing'
+import datetimePickerProps from './props'
 // 组件
-import HyInput from "../hy-input/hy-input.vue";
-import HyPicker from "../hy-picker/hy-picker.vue";
+import HyInput from '../hy-input/hy-input.vue'
+import HyPicker from '../hy-picker/hy-picker.vue'
 
 /**
  * 此选择器用于时间日期选择
  * @displayName hy-datetime-picker
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 用于控制选择器的弹出和收起 */
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * 弹出层弹出方向
-   * @values bottom,top
-   * */
-  popupMode: {
-    type: String,
-    default: "bottom",
-  },
-  /** 是否显示顶部的操作栏 */
-  showToolbar: {
-    type: Boolean,
-    default: true,
-  },
-  /** 绑定值 */
-  modelValue: {
-    type: [String, Number, Date],
-    default: "",
-  },
-  /** 顶部标题 */
-  title: String,
-  /**
-   * 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
-   * @values date,time,year-month,datetime
-   * */
-  mode: {
-    type: String as PropType<DateModeEnum>,
-    default: DateModeEnum.DATETIME,
-  },
-  /** 可选的最大时间  默认值为后10年 */
-  maxDate: {
-    type: Number,
-    default: new Date(new Date().getFullYear() + 10, 0, 1).getTime(),
-  },
-  /** 可选的最小时间  默认值为前10年 */
-  minDate: {
-    type: Number,
-    default: new Date(new Date().getFullYear() - 10, 0, 1).getTime(),
-  },
-  /** 可选的最小小时，仅mode=time有效 */
-  minHour: {
-    type: Number,
-    default: 0,
-  },
-  /** 可选的最大小时，仅mode=time有效 */
-  maxHour: {
-    type: Number,
-    default: 23,
-  },
-  /** 可选的最小分钟，仅mode=time有效 */
-  minMinute: {
-    type: Number,
-    default: 0,
-  },
-  /** 可选的最大分钟，仅mode=time有效 */
-  maxMinute: {
-    type: Number,
-    default: 59,
-  },
-  /** 选项过滤函数 */
-  filter: Function,
-  /** 选项格式化函数 */
-  formatter: Function,
-  /** 是否显示加载中状态 */
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  /** 各列中，单个选项的高度 */
-  itemHeight: {
-    type: Number,
-    default: 44,
-  },
-  /** 取消按钮的文字 */
-  cancelText: {
-    type: String,
-    default: "取消",
-  },
-  /** 确认按钮的文字 */
-  confirmText: {
-    type: String,
-    default: "确认",
-  },
-  /** 取消按钮的颜色 */
-  cancelColor: {
-    type: String,
-    default: "#909193",
-  },
-  /** 确认按钮的颜色 */
-  confirmColor: {
-    type: String,
-    default: "#3c9cff",
-  },
-  /** 每列中可见选项的数量 */
-  visibleItemCount: {
-    type: Number,
-    default: 5,
-  },
-  /** 是否允许点击遮罩关闭选择器 */
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: false,
-  },
-  /** 各列的默认索引 */
-  defaultIndex: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-  /** 输入框是否显示边框 */
-  hasInput: {
-    type: Boolean,
-    default: false,
-  },
-  /** 输入框集合属性 */
-  input: {
-    type: Object as unknown as PropType<HyInputProps>,
-  },
-  /** 自定义时间格式 */
-  format: String,
-  /** 右边插槽 */
-  toolbarRightSlot: {
-    type: Boolean,
-    default: false,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<IDatetimePickerEmits>();
+const props = defineProps(datetimePickerProps)
+const emit = defineEmits<IDatetimePickerEmits>()
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
-const inputValue = ref<string | number>(""); // 表单显示值
-const innerValue = ref<string | number>(""); // 表单显示值
-const showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择弹唱
-const columns = ref<any[]>([]);
-const innerDefaultIndex = ref<number[]>([]);
-let innerFormatter = (type: any, value: any) => value;
+const inputValue = ref<string | number>('') // 表单显示值
+const innerValue = ref<string | number>('') // 表单显示值
+const showByClickInput = ref<boolean>(false) // 是否在hasInput模式下显示日期选择弹唱
+const columns = ref<any[]>([])
+const innerDefaultIndex = ref<number[]>([])
+let innerFormatter = (type: any, value: any) => value
 const validModes = new Set([
-  DateModeEnum.TIME,
-  DateModeEnum.MONTH_DAY,
-  DateModeEnum.HOUR_MINUTE,
-  DateModeEnum.MINUTE_SECOND,
-]);
+    DateModeEnum.TIME,
+    DateModeEnum.MONTH_DAY,
+    DateModeEnum.HOUR_MINUTE,
+    DateModeEnum.MINUTE_SECOND
+])
 
 /**
  * @description 更新各列的值
  * */
 const updateColumns = () => {
-  const formatterFn = props.formatter || innerFormatter;
-  // 获取各列的值，并且map后，对各列的具体值进行补0操作
-  columns.value = getOriginColumns().map((column) =>
-    column.values.map((value) => formatterFn(column.type, value)),
-  );
-};
+    const formatterFn = props.formatter || innerFormatter
+    // 获取各列的值，并且map后，对各列的具体值进行补0操作
+    columns.value = getOriginColumns().map((column) =>
+        column.values.map((value) => formatterFn(column.type, value))
+    )
+}
 
 /**
  * @description 更新各列的值，进行补0、格式化等操作
  * */
 const updateColumnValue = (value: string | number) => {
-  innerValue.value = value;
-  updateColumns();
-  // 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
-  setTimeout(() => {
-    updateIndexes(value);
-  }, 100);
-};
+    innerValue.value = value
+    updateColumns()
+    // 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
+    setTimeout(() => {
+        updateIndexes(value)
+    }, 100)
+}
 
 const init = () => {
-  // 获取当前值
-  innerValue.value = correctValue(props.modelValue);
-  // 更新列表
-  updateColumnValue(innerValue.value);
+    // 获取当前值
+    innerValue.value = correctValue(props.modelValue)
+    // 更新列表
+    updateColumnValue(innerValue.value)
 
-  // 初始化hasInput展示
-  getInputValue(innerValue.value);
-};
+    // 初始化hasInput展示
+    getInputValue(innerValue.value)
+}
 
 watch(
-  () => props.show,
-  (newValue) => {
-    if (newValue) {
-      updateColumnValue(innerValue.value);
+    () => props.show,
+    (newValue) => {
+        if (newValue) {
+            updateColumnValue(innerValue.value)
+        }
     }
-  },
-);
+)
 
 watch(
-  () => props.modelValue,
-  () => init(),
-);
+    () => props.modelValue,
+    () => init()
+)
 
 const propsChange = computed(() => {
-  return [
-    props.mode,
-    props.maxDate,
-    props.minDate,
-    props.minHour,
-    props.maxHour,
-    props.minMinute,
-    props.maxMinute,
-    props.filter,
-  ];
-});
+    return [
+        props.mode,
+        props.maxDate,
+        props.minDate,
+        props.minHour,
+        props.maxHour,
+        props.minMinute,
+        props.maxMinute,
+        props.filter
+    ]
+})
 
 watch(
-  () => propsChange.value,
-  () => init(),
-);
+    () => propsChange.value,
+    () => init()
+)
 
 onMounted(() => {
-  init();
-});
+    init()
+})
 
 const getInputValue = (newValue: string | number) => {
-  if (newValue == "" || !newValue) {
-    inputValue.value = "";
-    return;
-  }
-  if (props.mode === "time") {
-    inputValue.value = newValue;
-  } else {
-    if (props.format) {
-      inputValue.value = dayjs(newValue).format(props.format);
+    if (newValue == '' || !newValue) {
+        inputValue.value = ''
+        return
+    }
+    if (props.mode === 'time') {
+        inputValue.value = newValue
     } else {
-      let format = "";
-      switch (props.mode) {
-        case DateModeEnum.DATE:
-          format = "YYYY-MM-DD";
-          break;
-        case DateModeEnum.YEAR_MONTH:
-          format = "YYYY-MM";
-          break;
-        case DateModeEnum.DATETIME:
-          format = "YYYY-MM-DD HH:mm:ss";
-          break;
-        case DateModeEnum.MONTH_DAY:
-          format = "MM-DD";
-          break;
-        case DateModeEnum.HOUR_MINUTE:
-          format = "HH:mm";
-          break;
-        case DateModeEnum.MINUTE_SECOND:
-          format = "mm:ss";
-          break;
-        default:
-          break;
-      }
-      inputValue.value = dayjs(newValue).isValid()
-        ? dayjs(newValue).format(format)
-        : newValue;
+        if (props.format) {
+            inputValue.value = dayjs(newValue).format(props.format)
+        } else {
+            let format = ''
+            switch (props.mode) {
+                case DateModeEnum.DATE:
+                    format = 'YYYY-MM-DD'
+                    break
+                case DateModeEnum.YEAR_MONTH:
+                    format = 'YYYY-MM'
+                    break
+                case DateModeEnum.DATETIME:
+                    format = 'YYYY-MM-DD HH:mm:ss'
+                    break
+                case DateModeEnum.MONTH_DAY:
+                    format = 'MM-DD'
+                    break
+                case DateModeEnum.HOUR_MINUTE:
+                    format = 'HH:mm'
+                    break
+                case DateModeEnum.MINUTE_SECOND:
+                    format = 'mm:ss'
+                    break
+                default:
+                    break
+            }
+            inputValue.value = dayjs(newValue).isValid() ? dayjs(newValue).format(format) : newValue
+        }
     }
-  }
-};
+}
 const times = (n: number, iteratee: Function) => {
-  let index = -1;
-  const result = Array(n < 0 ? 0 : n);
-  while (++index < n) {
-    result[index] = iteratee(index);
-  }
-  return result;
-};
+    let index = -1
+    const result = Array(n < 0 ? 0 : n)
+    while (++index < n) {
+        result[index] = iteratee(index)
+    }
+    return result
+}
 
 /**
  * @description 关闭选择器
  * */
 const close = () => {
-  if (props.closeOnClickOverlay) {
-    if (props.hasInput) {
-      showByClickInput.value = false;
+    if (props.closeOnClickOverlay) {
+        if (props.hasInput) {
+            showByClickInput.value = false
+        }
+        emit('close')
     }
-    emit("close");
-  }
-};
+}
 
 /**
  * @description 点击工具栏的取消按钮
  * */
 const cancel = () => {
-  if (props.hasInput) {
-    showByClickInput.value = false;
-  }
-  emit("cancel");
-};
+    if (props.hasInput) {
+        showByClickInput.value = false
+    }
+    emit('cancel')
+}
 
 /**
  * @description 点击工具栏的确定按钮
  * */
 const confirm = () => {
-  emit("update:modelValue", innerValue.value);
-  if (props.hasInput) {
-    getInputValue(innerValue.value);
-    showByClickInput.value = false;
-  }
-  emit("confirm", {
-    value: innerValue.value,
-    mode: props.mode,
-  });
-};
+    emit('update:modelValue', innerValue.value)
+    if (props.hasInput) {
+        getInputValue(innerValue.value)
+        showByClickInput.value = false
+    }
+    emit('confirm', {
+        value: innerValue.value,
+        mode: props.mode
+    })
+}
 
 /**
  * @description 用正则截取输出值,当出现多组数字时,抛出错误
  * */
 const intercept = (e: any, type?: string) => {
-  let judge = e.match(/\d+/g);
-  //判断是否掺杂数字
-  if (judge.length > 1) {
-    error("请勿在过滤或格式化函数时添加数字");
-    return 0;
-  } else if (type && judge[0].length == 4) {
-    //判断是否是年份
-    return judge[0];
-  } else if (judge[0].length > 2) {
-    error("请勿在过滤或格式化函数时添加数字");
-    return 0;
-  } else {
-    return judge[0];
-  }
-};
+    let judge = e.match(/\d+/g)
+    //判断是否掺杂数字
+    if (judge.length > 1) {
+        error('请勿在过滤或格式化函数时添加数字')
+        return 0
+    } else if (type && judge[0].length == 4) {
+        //判断是否是年份
+        return judge[0]
+    } else if (judge[0].length > 2) {
+        error('请勿在过滤或格式化函数时添加数字')
+        return 0
+    } else {
+        return judge[0]
+    }
+}
 
 /**
  * @description 列发生变化时触发
  * */
 const change = (e: any) => {
-  const { indexs, values } = e;
-  let selectValue: string | number = "";
-  if (validModes.has(props.mode) && props.mode !== DateModeEnum.MONTH_DAY) {
-    // 根据value各列索引，从各列数组中，取出当前时间的选中值
-    selectValue = `${intercept(values[0][indexs[0]])}:${intercept(values[1][indexs[1]])}`;
-  } else if (props.mode === DateModeEnum.MONTH_DAY) {
-    // 根据value各列索引，从各列数组中，取出当前时间的选中值
-    selectValue = `${intercept(values[0][indexs[0]])}-${intercept(values[1][indexs[1]])}`;
-  } else {
-    // 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
-    const year = parseInt(intercept(values[0][indexs[0]], "year"));
-    const month = parseInt(intercept(values[1][indexs[1]]));
-    let date = parseInt(values[2] ? intercept(values[2][indexs[2]]) : 1);
-    let hour = 0,
-      minute = 0,
-      second = 0;
-    // 此月份的最大天数
-    const maxDate = dayjs(`${year}-${month}`).daysInMonth();
-    // 不允许超过maxDate值
-    date = Math.min(maxDate, date);
-    if (props.mode === DateModeEnum.DATETIME) {
-      hour = parseInt(intercept(values[3][indexs[3]]));
-      minute = parseInt(intercept(values[4][indexs[4]]));
-      second = parseInt(intercept(values[5][indexs[5]]));
+    const { indexs, values } = e
+    let selectValue: string | number = ''
+    if (validModes.has(props.mode) && props.mode !== DateModeEnum.MONTH_DAY) {
+        // 根据value各列索引，从各列数组中，取出当前时间的选中值
+        selectValue = `${intercept(values[0][indexs[0]])}:${intercept(values[1][indexs[1]])}`
+    } else if (props.mode === DateModeEnum.MONTH_DAY) {
+        // 根据value各列索引，从各列数组中，取出当前时间的选中值
+        selectValue = `${intercept(values[0][indexs[0]])}-${intercept(values[1][indexs[1]])}`
+    } else {
+        // 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
+        const year = parseInt(intercept(values[0][indexs[0]], 'year'))
+        const month = parseInt(intercept(values[1][indexs[1]]))
+        let date = parseInt(values[2] ? intercept(values[2][indexs[2]]) : 1)
+        let hour = 0,
+            minute = 0,
+            second = 0
+        // 此月份的最大天数
+        const maxDate = dayjs(`${year}-${month}`).daysInMonth()
+        // 不允许超过maxDate值
+        date = Math.min(maxDate, date)
+        if (props.mode === DateModeEnum.DATETIME) {
+            hour = parseInt(intercept(values[3][indexs[3]]))
+            minute = parseInt(intercept(values[4][indexs[4]]))
+            second = parseInt(intercept(values[5][indexs[5]]))
+        }
+        // 转为时间模式
+        selectValue = Number(new Date(year, month - 1, date, hour, minute, second))
     }
-    // 转为时间模式
-    selectValue = Number(new Date(year, month - 1, date, hour, minute, second));
-  }
-  // 取出准确的合法值，防止超越边界的情况
-  selectValue = correctValue(selectValue);
-  innerValue.value = selectValue;
-  updateColumnValue(selectValue);
-  // 发出change时间，value为当前选中的时间戳
-  emit("change", {
-    value: selectValue,
-    mode: props.mode,
-  });
-};
+    // 取出准确的合法值，防止超越边界的情况
+    selectValue = correctValue(selectValue)
+    innerValue.value = selectValue
+    updateColumnValue(selectValue)
+    // 发出change时间，value为当前选中的时间戳
+    emit('change', {
+        value: selectValue,
+        mode: props.mode
+    })
+}
 
 /**
  * @description 更新索引
  * */
 const updateIndexes = (value: number | string) => {
-  let values: string[] = [];
-  let timeArr: string[] = [];
-  const formatterFn = props.formatter || innerFormatter;
+    let values: string[] = []
+    let timeArr: string[] = []
+    const formatterFn = props.formatter || innerFormatter
 
-  switch (props.mode) {
-    case DateModeEnum.TIME:
-      timeArr = value.toString().split(":");
-      // 使用formatter格式化方法进行管道处理
-      values = [
-        formatterFn("hour", timeArr[0]),
-        formatterFn("minute", timeArr[1]),
-      ];
-      break;
-    case DateModeEnum.MONTH_DAY:
-      timeArr = value.toString().split("-");
-      // 使用formatter格式化方法进行管道处理
-      values = [
-        formatterFn("month", timeArr[0]),
-        formatterFn("day", timeArr[1]),
-      ];
-      break;
-    case DateModeEnum.HOUR_MINUTE:
-      timeArr = value.toString().split(":");
-      // 使用formatter格式化方法进行管道处理
-      values = [
-        formatterFn("hour", timeArr[0]),
-        formatterFn("minute", timeArr[1]),
-      ];
-      break;
-    case DateModeEnum.MINUTE_SECOND:
-      timeArr = value.toString().split(":");
-      // 使用formatter格式化方法进行管道处理
-      values = [
-        formatterFn("minute", timeArr[0]),
-        formatterFn("second", timeArr[1]),
-      ];
-      break;
-    default:
-      values = [
-        formatterFn("year", `${dayjs(value).year()}`),
-        // 月份补0
-        formatterFn("month", padZero(dayjs(value).month() + 1)),
-      ];
-      if (props.mode === DateModeEnum.DATE) {
-        // date模式，需要添加天列
-        values.push(formatterFn("day", padZero(dayjs(value).date())));
-      }
-      if (props.mode === DateModeEnum.DATETIME) {
-        // 数组的push方法，可以写入多个参数
-        values.push(
-          formatterFn("day", padZero(dayjs(value).date())),
-          formatterFn("hour", padZero(dayjs(value).hour())),
-          formatterFn("minute", padZero(dayjs(value).minute())),
-          formatterFn("second", padZero(dayjs(value).second())),
-        );
-      }
-      break;
-  }
-  // 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
-  innerDefaultIndex.value = columns.value.map((column, index) => {
-    // 通过取大值，可以保证不会出现找不到索引的"-1"情况
-    return Math.max(
-      0,
-      column.findIndex((item: string) => item === values[index]),
-    );
-  });
-};
+    switch (props.mode) {
+        case DateModeEnum.TIME:
+            timeArr = value.toString().split(':')
+            // 使用formatter格式化方法进行管道处理
+            values = [formatterFn('hour', timeArr[0]), formatterFn('minute', timeArr[1])]
+            break
+        case DateModeEnum.MONTH_DAY:
+            timeArr = value.toString().split('-')
+            // 使用formatter格式化方法进行管道处理
+            values = [formatterFn('month', timeArr[0]), formatterFn('day', timeArr[1])]
+            break
+        case DateModeEnum.HOUR_MINUTE:
+            timeArr = value.toString().split(':')
+            // 使用formatter格式化方法进行管道处理
+            values = [formatterFn('hour', timeArr[0]), formatterFn('minute', timeArr[1])]
+            break
+        case DateModeEnum.MINUTE_SECOND:
+            timeArr = value.toString().split(':')
+            // 使用formatter格式化方法进行管道处理
+            values = [formatterFn('minute', timeArr[0]), formatterFn('second', timeArr[1])]
+            break
+        default:
+            values = [
+                formatterFn('year', `${dayjs(value).year()}`),
+                // 月份补0
+                formatterFn('month', padZero(dayjs(value).month() + 1))
+            ]
+            if (props.mode === DateModeEnum.DATE) {
+                // date模式，需要添加天列
+                values.push(formatterFn('day', padZero(dayjs(value).date())))
+            }
+            if (props.mode === DateModeEnum.DATETIME) {
+                // 数组的push方法，可以写入多个参数
+                values.push(
+                    formatterFn('day', padZero(dayjs(value).date())),
+                    formatterFn('hour', padZero(dayjs(value).hour())),
+                    formatterFn('minute', padZero(dayjs(value).minute())),
+                    formatterFn('second', padZero(dayjs(value).second()))
+                )
+            }
+            break
+    }
+    // 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
+    innerDefaultIndex.value = columns.value.map((column, index) => {
+        // 通过取大值，可以保证不会出现找不到索引的"-1"情况
+        return Math.max(
+            0,
+            column.findIndex((item: string) => item === values[index])
+        )
+    })
+}
 
 /**
  * @description 获取每列数据
  * */
 const getOriginColumns = () => {
-  // 生成各列的值
-  return getRanges().map(({ type, range }) => {
-    let values = times(range[1] - range[0] + 1, (index: number) => {
-      let value: string | number = range[0] + index;
-      value = type === "year" ? `${value}` : padZero(value);
-      return value;
-    });
-    // 进行过滤
-    if (props.filter) {
-      values = props.filter(type, values);
-      if (!values || (values && values.length == 0)) {
-        error("日期filter结果不能为空");
-      }
-    }
-    return { type, values };
-  });
-};
+    // 生成各列的值
+    return getRanges().map(({ type, range }) => {
+        let values = times(range[1] - range[0] + 1, (index: number) => {
+            let value: string | number = range[0] + index
+            value = type === 'year' ? `${value}` : padZero(value)
+            return value
+        })
+        // 进行过滤
+        if (props.filter) {
+            values = props.filter(type, values)
+            if (!values || (values && values.length == 0)) {
+                error('日期filter结果不能为空')
+            }
+        }
+        return { type, values }
+    })
+}
 
 /**
  * @description 得出合法的时间
  * */
 const correctValue = (value: number | string | Date): string | number => {
-  const isDateMode = props.mode !== DateModeEnum.TIME;
-  // if (isDateMode && !test.date(value)) {
-  if (!isDateMode && !value) {
-    // 如果是时间类型，而又没有默认值的话，就用最小时间
-    value = `${padZero(props.minHour)}:${padZero(props.minMinute)}`;
-  }
-  // 时间类型
-  if (validModes.has(props.mode)) {
-    return value as string;
-  } else {
-    // 如果是日期格式，控制在最小日期和最大日期之间
-    value = dayjs(value).isBefore(dayjs(props.minDate)) ? props.minDate : value;
-    value = dayjs(value).isAfter(dayjs(props.maxDate)) ? props.maxDate : value;
-    return value as string | number;
-  }
-};
+    const isDateMode = props.mode !== DateModeEnum.TIME
+    // if (isDateMode && !test.date(value)) {
+    if (!isDateMode && !value) {
+        // 如果是时间类型，而又没有默认值的话，就用最小时间
+        value = `${padZero(props.minHour)}:${padZero(props.minMinute)}`
+    }
+    // 时间类型
+    if (validModes.has(props.mode)) {
+        return value as string
+    } else {
+        // 如果是日期格式，控制在最小日期和最大日期之间
+        value = dayjs(value).isBefore(dayjs(props.minDate)) ? props.minDate : value
+        value = dayjs(value).isAfter(dayjs(props.maxDate)) ? props.maxDate : value
+        return value as string | number
+    }
+}
 /**
  * @description 获取每列的最大和最小值
  * */
 const getRanges = () => {
-  if (props.mode === DateModeEnum.TIME) {
-    return [
-      {
-        type: "hour",
-        range: [props.minHour, props.maxHour],
-      },
-      {
-        type: "minute",
-        range: [props.minMinute, props.maxMinute],
-      },
-    ];
-  }
-  const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary(
-    "max",
-    innerValue.value,
-  );
-  const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary(
-    "min",
-    innerValue.value,
-  );
-  const result = [
-    {
-      type: "year",
-      range: [minYear, maxYear],
-    },
-    {
-      type: "month",
-      range: [minMonth, maxMonth],
-    },
-    {
-      type: "day",
-      range: [minDate, maxDate],
-    },
-    {
-      type: "hour",
-      range: [minHour, maxHour],
-    },
-    {
-      type: "minute",
-      range: [minMinute, maxMinute],
-    },
-    {
-      type: "second",
-      range: [minMinute, maxMinute],
-    },
-  ];
-  let arr = result;
-  // 截取对应的列数
-  if (props.mode === DateModeEnum.DATE) arr = result.splice(0, 3);
-  if (props.mode === DateModeEnum.YEAR_MONTH) arr = result.splice(0, 2);
-  if (props.mode === DateModeEnum.MONTH_DAY) arr = result.splice(1, 2);
-  if (props.mode === DateModeEnum.HOUR_MINUTE) arr = result.splice(3, 2);
-  if (props.mode === DateModeEnum.MINUTE_SECOND) arr = result.splice(4, 2);
-  return arr;
-};
+    if (props.mode === DateModeEnum.TIME) {
+        return [
+            {
+                type: 'hour',
+                range: [props.minHour, props.maxHour]
+            },
+            {
+                type: 'minute',
+                range: [props.minMinute, props.maxMinute]
+            }
+        ]
+    }
+    const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary('max', innerValue.value)
+    const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary('min', innerValue.value)
+    const result = [
+        {
+            type: 'year',
+            range: [minYear, maxYear]
+        },
+        {
+            type: 'month',
+            range: [minMonth, maxMonth]
+        },
+        {
+            type: 'day',
+            range: [minDate, maxDate]
+        },
+        {
+            type: 'hour',
+            range: [minHour, maxHour]
+        },
+        {
+            type: 'minute',
+            range: [minMinute, maxMinute]
+        },
+        {
+            type: 'second',
+            range: [minMinute, maxMinute]
+        }
+    ]
+    let arr = result
+    // 截取对应的列数
+    if (props.mode === DateModeEnum.DATE) arr = result.splice(0, 3)
+    if (props.mode === DateModeEnum.YEAR_MONTH) arr = result.splice(0, 2)
+    if (props.mode === DateModeEnum.MONTH_DAY) arr = result.splice(1, 2)
+    if (props.mode === DateModeEnum.HOUR_MINUTE) arr = result.splice(3, 2)
+    if (props.mode === DateModeEnum.MINUTE_SECOND) arr = result.splice(4, 2)
+    return arr
+}
 /**
  * @description 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
  * */
 const getBoundary = (type: string, innerVal: string | number) => {
-  const value = new Date(innerVal);
-  const boundary = new Date((props as any)[`${type}Date`]);
-  const year = dayjs(boundary).year();
-  let month = 1;
-  let date = 1;
-  let hour = 0;
-  let minute = 0;
-  if (type === "max") {
-    month = 12;
-    // 月份的天数
-    date = dayjs(value).daysInMonth() || 31;
-    hour = 23;
-    minute = 59;
-  }
-  // 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
-  if (dayjs(value).year() === year) {
-    month = dayjs(boundary).month() + 1;
-    if (dayjs(value).month() + 1 === month) {
-      date = dayjs(boundary).date();
-      if (dayjs(value).date() === date) {
-        hour = dayjs(boundary).hour();
-        if (dayjs(value).hour() === hour) {
-          minute = dayjs(boundary).minute();
+    const value = new Date(innerVal)
+    const boundary = new Date((props as any)[`${type}Date`])
+    const year = dayjs(boundary).year()
+    let month = 1
+    let date = 1
+    let hour = 0
+    let minute = 0
+    if (type === 'max') {
+        month = 12
+        // 月份的天数
+        date = dayjs(value).daysInMonth() || 31
+        hour = 23
+        minute = 59
+    }
+    // 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
+    if (dayjs(value).year() === year) {
+        month = dayjs(boundary).month() + 1
+        if (dayjs(value).month() + 1 === month) {
+            date = dayjs(boundary).date()
+            if (dayjs(value).date() === date) {
+                hour = dayjs(boundary).hour()
+                if (dayjs(value).hour() === hour) {
+                    minute = dayjs(boundary).minute()
+                }
+            }
         }
-      }
     }
-  }
-  return {
-    [`${type}Year`]: year,
-    [`${type}Month`]: month,
-    [`${type}Date`]: date,
-    [`${type}Hour`]: hour,
-    [`${type}Minute`]: minute,
-  };
-};
+    return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Date`]: date,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute
+    }
+}
 const onShowByClickInput = () => {
-  if (!props.input?.disabled) {
-    showByClickInput.value = !showByClickInput.value;
-  }
-};
+    if (!props.input?.disabled) {
+        showByClickInput.value = !showByClickInput.value
+    }
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>