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

<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <div class="d-flex align-center">
      <!-- <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
        :time-picker-inline="true"
        :show-now-button="item.showToday"
        now-button-label="今天"
        :disabled-dates="item.disabledDates ? disabledDates : []"
        :enable-time-picker="item.enableTimePicker ?? false"
        :clearable="item.clearable ?? true"
        :day-names="['一', '二', '三', '四', '五', '六', '七']"
        select-text="确认"
        cancel-text="取消"
        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 class="form-label" :style="{'width': item.labelWidth + 'px'}">{{ item.label }}</div>
      <el-config-provider :locale="zhCn">
        <el-date-picker
          style="flex: 1;"
          v-model="value"
          size="large"
          :type="item.mode || 'date'"
          :placeholder="item.placeholder || '请选择'"
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
          :format="item.format"
          :value-format="item.valueFormat || 'x'"
          :disabled="item.disabled"
          :disabled-date="disabledDates"
          :date-format="item.dateFormat"
          :time-format="item.timeFormat"
          :default-value="item.defaultValue"
          @change="modelValueUpDate"
          @clear="handleClear"
          @blur="handleOpen"
        >
        </el-date-picker>
      </el-config-provider>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name:'FormUI-v-text-field'})
import { timesTampChange } from '@/utils/date'
import { computed, ref, watch } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// import { ElDatePicker } from 'element-plus'

const props = defineProps({item: Object, modelValue: [String, Number, Boolean, Array], 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 disabledDates = (date) => {
  const currentDate = new Date()
  if (!props.item.disabledDate) return false
  currentDate.setDate(currentDate.getDate() - 1)
  return date.getTime() < currentDate.getTime()
}

// 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>