riku
2024-10-18 0906c54770971020cf2d243d06d57a2f6fbbc18c
src/components/search-option/FYOptionTime.vue
@@ -1,18 +1,23 @@
<template>
  <el-form-item label="时间">
  <el-form-item :label="label" :prop="prop">
    <el-date-picker
      v-model="selectedOptions"
      type="month"
      v-model="date"
      @change="handleChange"
      :type="type"
      placeholder="选择时间"
      start-placeholder="选择开始时间"
      end-placeholder="选择结束时间"
      style="width: 150px"
    />
  </el-form-item>
</template>
<script>
import dayjs from 'dayjs'
import dayjs from 'dayjs';
const MONTH = 'month'
const MONTH = 'month';
const DATE = 'date';
const RANGE = 'datetimerange';
export default {
  props: {
@@ -21,50 +26,39 @@
      default: MONTH
    },
    // 返回结果
    value: Date,
    value: Date || Array,
    // 是否默认返回初始选项
    initValue: {
      type: Boolean,
      default: true
    },
    label: {
      type: String,
      default: '时间'
    },
    prop: {
      type: String,
      default: 'time'
    }
  },
  emits: ['update:value'],
  emits: ['update:value', 'change'],
  data() {
    return {
      selectedOptions: ''
    }
      date: this.value
    };
  },
  watch: {
    selectedOptions: {
      handler(nVal, oVal) {
        if (nVal != oVal) {
          this.$emit('update:value', nVal)
        }
      }
    },
    value: {
      handler(nVal, oVal) {
        if (nVal != oVal) {
          this.selectedOptions = nVal
        }
      },
      immediate: true
    }
  },
  computed: {},
  methods: {
    timeFormat() {
      switch (this.type) {
        case MONTH:
          return 'YYYY-MM'
        default:
          return 'YYYY-MM'
      }
    handleChange(value) {
      this.$emit('update:value', value);
      this.$emit('change', value);
    }
  },
  mounted() {
    if (this.initValue) {
      this.selectedOptions = new Date()
      this.date = new Date();
      this.handleChange(this.date);
    }
  }
}
};
</script>