menduner/src/views/recruit/personal/company/components/financingStatus.vue

<template>
  <div class="d-flex">
    <div class="label-title">融资阶段</div>
    <div class="label-content">
      <span 
        v-for="k in items" 
        :key="k.value"
        :class="['label-color', {'actives': k.active}]"
        @click="handleItemClick(k)"
      >{{ k.label }}</span>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'search-financing-status'})
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getDict } from '@/hooks/web/useDictionaries'

const emits = defineEmits(['handleClick', 'clear'])
const props = defineProps({
  isClear: {
    type: Boolean,
    default: false
  }
})
watch(
  () => props.isClear, 
  (newVal) => {
    if (!newVal) return
    // 清空筛选条件时默认选中不限
    items.value.map(e => {
      e.active = false
      if (e.value === -1) e.active = true
      return e
    })
    emits('clear')
  }
)

const route = useRoute()
const routeQuery = route.query

const items = ref([])
getDict('menduner_financing_status').then(({ data }) => {
  data = data?.length && data || []
  const list = data.map(e => {
    e.active = false
    return e
  })
  items.value = [{ value: -1, label: '不限', active: true }, ...list]
  // 刷新回显
  if (routeQuery.financingStatus) {
    const obj = items.value.find(e => e.value === routeQuery.financingStatus)
    items.value.map(e => e.active = false)
    if (obj) obj.active = true
  }
})

const handleItemClick = (k) => {
  items.value.map(e => e.active = false)
  k.active = true
  emits('handleClick', k.value, 'financingStatus')
}
</script>

<style scoped lang="scss">
@import '@/styles/recruit/company.scss';
</style>