menduner/src/views/recruit/enterprise/search/retrieval/components/area.vue

<template>
  <div class="font-size-15 d-flex align-center color-666">
    <span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区：</span>
    <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs" :close-on-content-click="false">
      <template v-slot:activator="{  props }">
        <div>
          <v-chip v-for="k in areaSelect" :key="k.id" class="mr-3" closable label size="small" @click:close="handleAreaClear(k)">{{ k.name }}</v-chip>
          <v-btn icon="mdi-plus" v-bind="props" variant="outlined" size="x-small"></v-btn>
        </div>
      </template>
      <AreaSelect :select="select" :currentData="areaSelect" :limit="false" showSelect @handleClick="handleArea"></AreaSelect>
    </v-menu>
  </div>
</template>

<script setup>
defineOptions({ name: 'search-retrieval-area' })
import { ref, watch } from 'vue'

const emit = defineEmits(['select', 'clear'])
const props = defineProps({
  isClear: Boolean
})
const select = ref([])
const areaSelect = ref([])

const handleArea = (list, arr) => {
  select.value = list
  areaSelect.value = arr
  emit('select', list)
}

const handleAreaClear = (k) => {
  select.value = select.value.filter(item => item !== k.id)
  const index = areaSelect.value.findIndex(item => item.id === k.id)
  if (index !== -1) areaSelect.value.splice(index, 1)
  emit('select', select.value)
}

watch(
  () => props.isClear,
  (val) => {
    if (!val) return
    select.value = []
    areaSelect.value = []
    emit('clear')
  }
)
</script>

<style scoped lang="scss">

</style>