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

<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <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}"
      @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="item.readonly"
          :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>
</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})
const emit = defineEmits(['update:modelValue', 'change'])
const item = props.item

const value = ref(props.modelValue)

watch(() => item.value, (newVal) => {
  value.value = newVal - 0
  if (value.value) getFormatText()
})

const timestamp = 'timestamp' // 固定不能变
// const datepicker = ref()
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)
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 inputFocus = () => {
//   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 - 0; getFormatText()
</script>
<style lang="scss" scoped>
// .removeDetailHeight {}
::v-deep .dp--menu-wrapper {
  // top: 50px !important;
  left: 0 !important;
}
.detailMargin {
  margin-bottom: 22px;
}
</style>