minnan/src/components/form/DateTimePickerField.vue

<template>
  <Popup
    :show="popupShow"
    @close="onCancel"
    :closeIcon="false"
    position="bottom"
    closeable
  >
    <ActionSheetTitle 
      v-bind="titleProps"
      :title="title"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
    <DateTimePicker 
      v-bind="props"
      v-model="tempValue"
      @selectTextChange="onSelectTextChange"
    />
  </Popup>
  <Text
    v-if="showSelectText"
    :size="30"
    :color="selectText ? 'text.content' : 'text.second'"
    :text="selectText || placeholder" 
    :maxWidth="300"
    v-bind="textProps"
  />
</template>

<script setup lang="ts">
import { ref, toRef } from 'vue';
import { useFieldChildValueInjector } from './FormContext';
import type { DateTimePickerProps } from './DateTimePicker.vue';
import Popup from '../dialog/Popup.vue';
import ActionSheetTitle, { type ActionSheetTitleProps } from '../dialog/ActionSheetTitle.vue';
import DateTimePicker from './DateTimePicker.vue';
import { usePickerFieldTempStorageData } from './PickerUtils';
import Text, { type TextProps } from '../basic/Text.vue';
import { usePickerFieldInstance, type PickerFieldInstance } from './Picker';

export interface DateTimePickerFieldProps extends Omit<DateTimePickerProps, 'modelValue'> {
  modelValue?: Date;
  /**
   * 标题
   * @default '请选择时间'
   */
  title?: string,
  /**
   * 标题属性
   */
  titleProps?: Omit<ActionSheetTitleProps, 'title'>,
  /**
   * 是否显示选择的文本
   * @default true
   */
  showSelectText?: boolean,
  /**
   * 占位符
   * @default '请选择时间'
   */
  placeholder?: string,
  /**
   * 初始值
   */
  initalValue?: Date,
  /**
   * 是否立即更新绑定值
   * @default false
   */
  shouldUpdateValueImmediately?: boolean,
  /**
   * 显示的文本属性
   */
  textProps?: TextProps,
}

const emit = defineEmits([ 'update:modelValue', 'cancel', 'confirm', 'selectTextChange', 'tempValueChange' ]);
const props = withDefaults(defineProps<DateTimePickerFieldProps>(), {
  title: '请选择时间',
  placeholder: '请选择时间',
  titleProps: () => ({
    cancelText: '取消',
    confirmText: '确定',
  }),
  showSelectText: true,
  showYears: true,
  showMonths: true,
  showDays: true,
  showHours: true,
  showMinute: true,
  showSecond: true,
});

const popupShow = ref(false);

const {
  value,
  updateValue,
} = useFieldChildValueInjector(
  toRef(props, 'modelValue'), 
  (v) => emit('update:modelValue', v),
  undefined,
  () => {
    popupShow.value = true;
  },
  props.initalValue,
);

const {
  onSelectTextChange,
  onCancel,
  onConfirm,
  selectText,
  tempValue,
} = usePickerFieldTempStorageData(
  value,
  updateValue,
  () => popupShow.value = false,
  emit as any,
  new Date(),
  props.shouldUpdateValueImmediately,
  undefined,
  popupShow,
);
defineExpose<PickerFieldInstance>(usePickerFieldInstance(popupShow));

defineOptions({
  options: {
    styleIsolation: "shared",
    virtualHost: true,
  }
})
</script>