menduner/src/components/FormUI/datePicker/index.vue

<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <div class="d-flex">
      <VueDatePicker
        v-model="value"
        ref="datepicker"
        :options="item.options || {}"
        locale="zh-CN"
        :disabled="item.disabled || false"
        :range="item.range || false"
        :model-type="timestamp"
        :month-picker="month"
        :time-picker="time"
        :year-picker="year"
        auto-apply
        text-input
        :show-now-button="item.showToday"
        now-button-label="今天"
        :enable-time-picker="item.enableTimePicker ?? false"
        :clearable="item.clearable ?? true"
        :day-names="['一', '二', '三', '四', '五', '六', '七']"
        v-bind="$attrs"
        :class="{'detailMargin': detailMargin}"
        style="flex: 1"
        @open="handleOpen"
        @closed="handleClosed"
        @update:modelValue="modelValueUpDate"
      >
        <template #trigger>
          <v-text-field
            v-model="formatText"
            variant="outlined"
            :density="item.dense || 'compact'"
            type="text"
            :rules="rules"
            :disabled="item.disabled"
            :style="{width: item.width}"
            :color="item.color || 'primary'"
            :label="item.label"
            :placeholder="item.placeholder || item.label"
            :autofocus="item.autofocus"
            :required="item.required"
            :suffix="item.suffix"
            :append-icon="item.appendIcon"
            :append-inner-icon="item.appendInnerIcon"
            :clearable="item.clearable"
            :readonly="true"
            :counter="item.counter"
            :prepend-inner-icon="item.prependInnerIcon"
            hide-spin-buttons
            :class="item.class"
            :hide-details="hideDetails || false"
            @click:clear="handleClear"
            @click="inputClick"
            @blur="inputBlur"
          ></v-text-field>
        </template>
      </VueDatePicker>
    </div>
  </div>
</template>
<script setup>
import { timesTampChange } from '@/utils/date'
import { computed, ref, watch } from 'vue'
defineOptions({ name:'FormUI-v-text-field'})

const props = defineProps({item: Object, modelValue: [String, Number, Boolean], changeFn: Function})
const emit = defineEmits(['update:modelValue', 'change'])
const item = props.item

const value = ref(props.modelValue)

watch(() => props.modelValue, 
  (newVal) => {
    modelValueUpDate(newVal)
  },
  // { immediate: true },
  // { deep: true }
)

const timestamp = 'timestamp' // 固定不能变
const formatText = ref('')

const modelValueUpDate = (val) => {
  value.value = val
  getFormatText()
  emit('update:modelValue', value.value)
  emit('change', value.value)
}

const getFormatText = () => {
  const format = item.format || 'Y-M-D'
  formatText.value = timesTampChange(value.value, format)
}

const handleClear = () => {
  value.value = null
  emit('change', value.value)
}


const rules = ref(item.rules)
watch(() => item.rules, 
  (newVal) => {
    rules.value = newVal
  },
  { immediate: true },
  { deep: true }
)
const handleOpen = () => {
  rules.value = []
}
const handleClosed = () => {
  rules.value = item.rules
}

const hideDetails = ref(item.hideDetails || false)
const detailMargin = ref(false)
const inputClick = () => {
  if (item.hideDetails) return
  hideDetails.value = true
  detailMargin.value = true
}
const inputBlur = () => {
  if (item.hideDetails) return
  hideDetails.value = item.hideDetails || false
  detailMargin.value = false
}

// dateType: 默认 date, 即年月日
const year = computed(() => {
  return item.dateType === 'year'
})
const month = computed(() => {
  return item.dateType === 'month'
})
const time = computed(() => {
  return item.dateType === 'time'
})

if (!item.format) item.format = year.value ? 'Y' : month.value ? 'Y-M' : time.value ? 'Y-M-D h:m:s' : 'Y-M-D'
if (item.value) value.value = item.value; getFormatText()

</script>
<style lang="scss" scoped>
// .removeDetailHeight {}
:deep(.dp--menu-wrapper) {
  // top: 50px !important;
  left: 0 !important;
}
.detailMargin {
  margin-bottom: 22px;
}
</style>