menduner/src/views/recruit/enterprise/personnelManagement/components/screen.vue

<template>
  <div>
    <CommonStyle v-for="(val, i) in list" :key="i" :btnTitle="val.title">
      <v-list>
        <v-list-item
          v-for="(item, index) in val.items"
          :key="index"
          :active="val.selected.includes(item.value)"
          color="primary"
          :value="item.value"
          @click="handleClick(item, val)"
        >
          <v-list-item-title>{{ item.label }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </CommonStyle>
    <span class="reset-text cursor-pointer ml-3" @click="handleReset">重置</span>
  </div>
</template>

<script setup>
defineOptions({ name: 'screen-page'})
import { ref, defineProps, defineEmits, watch } from 'vue'
import { getJobAdvertised } from '@/api/enterprise'
import { getDict } from '@/hooks/web/useDictionaries'
import { dealDictArrayData } from '@/views/recruit/position/components/dict'
import CommonStyle from './commonStyle.vue'

const emit = defineEmits(['search', 'reset'])
const props = defineProps({
  tab: String
})

const list = ref([
  {
    title: '应聘岗位',
    defaultTitle: '应聘岗位',
    key: 'jobId',
    selected: [],
    api: getJobAdvertised,
    items: []
  },
  {
    title: '学历',
    defaultTitle: '学历',
    key: 'eduType',
    dictTypeName: 'menduner_education_type',
    selected: [],
    items: []
  },
  {
    title: '工作经验',
    defaultTitle: '工作经验',
    key: 'expType',
    dictTypeName: 'menduner_exp_type',
    selected: [],
    items: []
  },
  {
    title: '求职状态',
    defaultTitle: '求职状态',
    key: 'jobStatus',
    dictTypeName: 'menduner_job_status',
    selected: [],
    items: []
  }
])

// 获取字典数据
list.value.forEach(k => {
  if (k.dictTypeName) {
    getDict(k.dictTypeName).then(({ data }) => {
      data = data?.length && data || []
      k.items = data
    })
  }
  if (k.api) {
    k.api().then(data => {
      if (data.length) {
        const list = dealDictArrayData([], data)
        k.items = list.map(e => {
          return { label: `${e.name}_${e.areaName} ${e.payFrom}-${e.payTo}/${e.payName}`, value: e.id }
        })
      }
    })
  }
})

// 单击
const handleClick = (item, val) => {
  const obj = val.selected.includes(item.value)
  val.selected = obj ? val.selected.filter(i => i !== item.value) : [item.value]
  val.title = obj ? val.defaultTitle : item.label
  emit('search', { key: val.key, value: obj ? '' : item.value })
}

// 重置
const handleReset = () => {
  list.value.map(e => {
    e.selected = []
    e.title = e.defaultTitle
    return e
  })
  emit('reset')
}

watch(
  () => props.tab,
  () => {
    handleReset()
  }
)
</script>

<style scoped lang="scss">
.reset-text {
  font-size: 14px;
  color: #777;
  &:hover {
    color: var(--v-primary-base);
  }
}
</style>