diantou/src_product/iam/components/picker/audit-range-picker.vue

<template>
  <div>
    <a-range-picker
      ref="aRangeYear"
      :placeholder="['开始年份', '结束年份']"
      format="YYYY"
      :value="value"
      :mode="['year', 'year']"
      :open="showYearPicker"
      @openChange="(val) => openChange(val)"
      @panelChange="handlePanelChange"
      @change="emptyChange"
    />
  </div>
</template>

<script>
import components from './_import-components/audit-range-picker-import'
export default {
  name: 'AuditRangePicker',
  components,
  props: {
    timeRange: {
      type: Array,
      default: undefined,
    },
    parentComponent: {
      type: Object,
      default: undefined,
    },
  },
  data() {
    return {
      showYearPicker: false,
      value: [],
    }
  },
  watch: {
    timeRange(val) {
      this.value = val
    },
    showYearPicker(val) {
      if (!val && this.value.length) {
        if (!this.value[0].isBefore(this.value[1])) {
          this.value[0] = [this.value[1], (this.value[1] = this.value[0])][0]
        }
        this.$emit('update:timeRange', this.value)
        this.$emit('formValidate')
      }
    },
  },
  methods: {
    openChange(val) {
      this.showYearPicker = val
    },
    handleChange(val) {
      this.value = val
    },
    handlePanelChange(val, mode) {
      this.value = val
      if (mode[1] === null) this.showYearPicker = false
    },
    emptyChange(val) {
      if (!val.length) this.$emit('update:timeRange', [])
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>