el-select点击别处让下拉框消失

<template>
  <div class="h-search">
    <el-form
      :inline="true"
      class="h-search-form"
      label-position="right"
      @mouseleave="datePickerRef?.handleClose()"
    >
      <el-form-item>
        <el-tree-select
          placeholder="全部组织"
          :data="treeData"
          :model-value="modelValue['OrgId']"
          @update:model-value="handleValueChange($event, 'OrgId')"
          filterable
          clearable
          collapse-tags
          collapse-tags-tooltip
          :check-strictly="true"
          :props="treeProps"
          @visible-change="treeVisibleChange"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          :model-value="modelValue['EnumStatisticsDateSpanSelect']"
          @update:model-value="handleValueChange($event, 'EnumStatisticsDateSpanSelect')"
          placeholder="时间"
          clearable
          popper-class="h-search date-popper"
          ref="dateSelectRef"
          @visible-change="dateSelectVisibleChange"
        >
          <!-- <el-option label="全部" :value="0" /> -->
          <!-- <el-option label="本月" :value="1" /> -->
          <el-option label="本季度" :value="2" @mouseenter="datePickerRef?.handleClose()" />
          <el-option label="上半年" :value="3" @mouseenter="datePickerRef?.handleClose()" />
          <el-option label="下半年" :value="4" @mouseenter="datePickerRef?.handleClose()" />
          <el-option label="本年" :value="5" @mouseenter="datePickerRef?.handleClose()" />
          <!-- <el-option label="今天" :value="6" /> -->
          <!-- <el-option label="本周" :value="7" /> -->
          <el-option :label="year" :value="99">
            <div class="date-btn" @mouseenter="datePickerRef?.handleOpen()">
              <p class="flx-justify-between">
                <span>选择年份</span>
                <el-icon><ArrowRight /></el-icon>
              </p>
              <div class="date-picker">
                <el-date-picker
                  v-model="year"
                  type="year"
                  value-format="YYYY"
                  @change="yearChange"
                  popper-class="h-search-date-picker"
                  ref="datePickerRef"
                  @visible-change="dateVisibleChange"
                />
              </div>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          :model-value="modelValue['CustomerDataSources']"
          @update:model-value="handleValueChange($event, 'CustomerDataSources')"
          placeholder="来源"
          clearable
          multiple
          popper-class="h-search date-popper"
        >
          <el-option label="搜索引擎" :value="0" />
          <el-option label="转介绍" :value="1" />
          <el-option label="广告推广" :value="2" />
          <el-option label="中国出口企业" :value="3" />
          <el-option label="广交会" :value="4" />
          <el-option label="其他" :value="5" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { GetSelfAndChildOrgList } from '@/api/modules/customer/manage'
import { GetOrganizationTree_Out } from '@/api/types/modules/GetOrganizationTree_Out'

const props = defineProps<{
  modelValue: any
}>()

const dateSelectRef = ref()
const datePickerRef = ref()

const flag = ref(false)

const dateVisibleChange = (val: boolean) => {
  flag.value = val
}

const dateSelectVisibleChange = (val: boolean) => {
  if (flag.value) {
    dateSelectRef.value.visible = true
  } else {
    dateSelectRef.value.visible = val
  }
}

// 组织数据
const treeData = ref<GetOrganizationTree_Out>()

// tree props
const treeProps = { label: 'OrgName', value: 'Id', children: 'Child' }

// 组织下拉事件， 动态获取 options
const treeVisibleChange = (type: boolean) => {
  if (type) {
    GetSelfAndChildOrgList().then((res) => {
      treeData.value = res
    })
  }
}

const emit = defineEmits(['update:modelValue'])

const handleValueChange = (val: any, filed: string) => {
  if (filed === 'EnumStatisticsDateSpanSelect') {
    flag.value = false
  }
  emit('update:modelValue', {
    ...props.modelValue,
    [filed]: val,
    ...(filed === 'EnumStatisticsDateSpanSelect' ? { SelectYear: null } : {}),
  })
}
const yearChange = (val: any) => {
  flag.value = false
  dateSelectRef.value.visible = false
  emit('update:modelValue', {
    ...props.modelValue,
    EnumStatisticsDateSpanSelect: 99,
    SelectYear: val,
  })
}

const year = ref(null)
</script>

<style scoped lang="scss">
.h-search {
  width: 100%;

  .h-search-form {
    text-align: right;
    :deep().el-form-item {
      margin-right: 0;
      margin-left: 10px;
      margin-bottom: 10px;
    }
    :deep().el-input__wrapper {
      box-shadow: 0 0 0 transparent;
    }
  }
  :deep(.el-date-editor .el-input__icon) {
    display: none;
  }
}
</style>
<style lang="scss">
.h-search.date-popper {
  .date-btn {
    .date-picker {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;

      .el-input__wrapper,
      .el-input__inner {
        cursor: pointer;
      }
    }
  }
}
</style>