menduner/src/views/recruit/position/index.vue

<!-- 检索列表页 - 职位检索 -->
<template>
  <div class="default-width">
    <div style="width: 100%; height: 20px;"></div>
    <v-card style="z-index: 998">
      <div class="stickyBox my-3">
        <headSearch 
          @handleJobClick="val => dealParams(val, 'positionId')" 
          @handleSearch="val => dealParams(val, 'content')"
        ></headSearch>
      </div>
      <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @updateCheckedInput="updateRouteQuery('cityFilterRef')"></cityFilter>
      <conditionFilter class="mx-5 mb-3" ref="conditionFilterRef" @conditionFilterChange="updateRouteQuery('conditionFilterRef')"></conditionFilter>
    </v-card>
    <div class="d-flex mt-3">
      <div class="mr-3" style="min-width: 884px;">
        <Empty v-if="!items?.length"></Empty>
        <PositionLongStrip v-else :items="items"></PositionLongStrip>
      </div>
      <rightRecommend></rightRecommend>
    </div>
    <CtPagination
      v-if="total > 0"
      :total="total"
      :page="pageInfo.pageNo"
      :limit="pageInfo.pageSize"
      @handleChange="handleChangePage"
    ></CtPagination>
  </div>
</template>

<script setup>
import rightRecommend from './components/rightRecommend'
import cityFilter from './components/cityFilter'
import conditionFilter from './components/conditionFilter'
import headSearch from '@/components/headSearch'
import PositionLongStrip from '@/components/PositionLongStrip/item.vue'
import Empty from '@/components/Empty'
import { getJobAdvertisedSearch } from '@/api/position'
import CtPagination from '@/components/CtPagination'
import { provide, reactive, ref } from 'vue'
import { dealDictData } from '@/views/recruit/position/components/dict'

import { useRoute, useRouter } from 'vue-router'
defineOptions({name: 'retrieval-position-page'})
const route = useRoute(); const router = useRouter()
const cityFilterRef = ref(); const conditionFilterRef = ref()

const pageInfo = { pageNo: 1, pageSize: 20}
const items = ref([])
const total = ref(0)
const routeQuery = (route?.query && route.query && Object.keys(route?.query).length) ? route.query : null
provide('routeQuery', routeQuery)

let pageReqVO = reactive({
  ...pageInfo
})

// 职位搜索
const getPositionList = async () => {
  const { list, total: number } = await getJobAdvertisedSearch(pageReqVO)
  items.value = list.map(e => {
    e.job = { ...e.job, ...dealDictData({}, e.job) }
    e.enterprise = { ...e.enterprise, ...dealDictData({}, e.enterprise) }
    return e
  })
  total.value = number
}

const removeEmptyStringsAndReturnNew = (obj) => {
  const result = {}
  Object.keys(obj).forEach(function(key) {
    if (obj[key]) {
      result[key] = obj[key]
    }
  })
  return result
}

const updateRouteQuery = (ref, val, key) => {
  ref
  const queryObj = { cityFilter: {}, conditionFilter: {} }
  if (cityFilterRef.value?.getQuery) {
    queryObj.cityFilter = removeEmptyStringsAndReturnNew(cityFilterRef.value?.getQuery())
  }
  if (conditionFilterRef.value?.getQuery) {
    const objData = conditionFilterRef.value?.getQuery()
    if (val && key) objData[key] = val
    queryObj.conditionFilter = removeEmptyStringsAndReturnNew(objData)
  }
  let queryArr = []
  if (queryObj) {
    Object.keys(queryObj)?.forEach(_k => {
      const newObj = queryObj[_k]
      if (newObj) {
        const arr = Object.keys(newObj).map(itemKey => {
          return `${itemKey}=${newObj[itemKey]}`
        })
        if (arr?.length) queryArr = [ ...queryArr, ...arr]
      }
    })
  }
  const str = queryArr?.join('&')
  if (str) router.push(`${route.path}?${str}`)
  handleSearchPosition(val, key)
}

// 职位搜索
const handleSearchPosition = () => {
  const conditionParams = conditionFilterRef.value?.params
  const cityParams = cityFilterRef.value?.getQuery
  pageReqVO = { ...pageReqVO, ...conditionParams, ...cityParams, content: pageReqVO.content }
  getPositionList()
}

// 职位类型、关键字
const dealParams = (val, key) => {
  pageReqVO[key] = val
  updateRouteQuery('cityFilterRef')
  updateRouteQuery('conditionFilterRef', val, key)
}

// 刷新后有参数则进行搜索
if (routeQuery) {
  for (let i in routeQuery) {
    if (routeQuery[i].indexOf('_') !== -1) pageReqVO[i] = routeQuery[i].split('_')
    else pageReqVO[i] = routeQuery[i]
  }
  if (routeQuery.content) updateRouteQuery('conditionFilterRef', routeQuery.content, 'content')
  getPositionList()
} else getPositionList()

// 分页
const handleChangePage = (index) => {
  pageInfo.pageNo = index
  getPositionList()
}
</script>