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

<template>
  <div class="d-flex align-center justify-space-between">
    <div class="d-flex align-center">
      <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>
      <div class="mr-5 d-flex align-center" v-if="props.tab === 0">
        <v-radio-group v-model="bounty" inline style="height: 28px;" @update:modelValue="handleChangeBounty">
          <v-radio v-model="bounty" label="普通职位" :value="false" color="primary" hide-details density="compact" class="mr-3"></v-radio>
          <v-radio v-model="bounty" label="赏金职位" :value="true" color="primary" hide-details density="compact"></v-radio>
        </v-radio-group>
        <v-radio-group class="ml-5" v-model="selected" inline style="height: 28px;" @update:modelValue="handleChangeSelected">
          <v-radio v-model="selected" label="新投递" value="0" color="primary" hide-details density="compact" class="mr-3"></v-radio>
          <v-radio v-model="selected" label="已查看" value="1" color="primary" hide-details density="compact"></v-radio>
        </v-radio-group>
      </div>
    </div>
    <div class="reset-text cursor-pointer ml-3" @click="handleReset">重置</div>
  </div>
</template>

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

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

const selected = ref()
const bounty = ref(null)

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.areaName : ''} ${e.payFrom ? e.payFrom + '-' : ''}${e.payTo}${e.payName ? '/' + 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
  })
  selected.value = ''
  bounty.value = null
  emit('reset')
}

// 新投递&已查看选择
const handleChangeSelected = (e) => {
  emit('select', e)
}

// 赏金职位
const handleChangeBounty = (e) => {
  emit('change', e)
}

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

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