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

<!-- 检索列表页 - 职位检索 -->
<template>
  <div class="default-width">
    <div class="py-3" style="z-index: 998; background-color: #fff">
      <div class="stickyBox">
        <headSearch
          v-model="headSearchText"
          text="中国"
          @handleSearch="val => handleQueryChange('content', val)"
        ></headSearch>
      </div>
      <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @change="handleQueryChange"></cityFilter>
      <conditionFilter class="mx-5 mb-3" ref="conditionFilterRef" @change="handleQueryChange"></conditionFilter>
    </div>
    <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 { dealDictObjData } 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)
let routeQuery = (route?.query && route.query && Object.keys(route?.query).length) ? reactive(route.query) : reactive({})
// if (routeQuery && Object.keys(routeQuery).length) {
//   if ()
// }
provide('routeQuery', routeQuery)

const headSearchText = ref(routeQuery?.content || '')

// 职位搜索
const getData = async () => {
  const pageReqVO = { ...pageInfo }
  // route.query参数
  if (routeQuery && Object.keys(routeQuery).length) {
    const passingStrings = ['content'] // 传递字符串
    const passingOneId = ['positionId'] // 单选且传递整型
    Object.keys(routeQuery).forEach(key => {
      if (key === 'city') { // 工作地区id集合,示例值([])
        const city = routeQuery[key]
        const areaIds = []
        const levelCountArr = city.split('__')
        levelCountArr?.forEach(levelIds => {
          const idArr = levelIds.split('_')
          if (idArr?.length) {
            idArr.forEach(idItem => areaIds.push(idItem))
          }
        })
        pageReqVO.areaIds = areaIds
      }
      else if (passingStrings.includes(key)) pageReqVO[key] = routeQuery[key] // 传给后端字符串
      else if (passingOneId.includes(key)) pageReqVO[key] = +routeQuery[key] // 传给后端单选且传递整型
      else pageReqVO[key] = routeQuery[key].split('_') // 传给后端Arr
    })
  }
  console.log('getData参数pageReqVO', pageReqVO)
  const { list, total: number } = await getJobAdvertisedSearch(pageReqVO)
  items.value = list.map(e => {
    e.job = { ...e.job, ...dealDictObjData({}, e.job) }
    e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise) }
    return e
  })
  total.value = number
}

// 页面刷新
if (routeQuery && Object.keys(routeQuery).length) getData() 

// 参数改变后刷新路由，触发数据刷新
const updateRouter = () => {
  const str = Object.keys(routeQuery).length ? Object.keys(routeQuery).reduce((res, _key) => {
    if (routeQuery[_key] !== '') res += `${res ? '&' : ''}${_key}=${routeQuery[_key]}`
    return res
  }, '') : ''
  router.push(`${route.path}?${str}`)
  getData()
}

// 参数改变
const handleQueryChange = (key, val) => { // val为字符串,数组的话用_下划线分隔
  routeQuery[key] = val
  updateRouter()
}

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