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></headSearch>
      </div>
      <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @updateCheckedInput="updateRouteQuery"></cityFilter>
      <conditionFilter class="mx-5 mb-3" ref="conditionFilterRef" @conditionFilterChange="updateRouteQuery"></conditionFilter>
    </v-card>
    <div class="d-flex mt-3">
      <div class="mr-3" style="min-width: 884px;">
        <div v-if="!items?.length" style="text-align: center;">暂无数据</div>
        <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 { getJobAdvertisedSearch } from '@/api/position'
import CtPagination from '@/components/CtPagination'
// import { dealDictData } from '@/views/recruit/position/components/dict'
import { ref } from 'vue'

import { useRoute, useRouter } from 'vue-router'
defineOptions({name: 'retrieval-position-page'})
// const route = useRoute()
const route = useRoute(); const router = useRouter()
const cityFilterRef = ref(); const conditionFilterRef = ref()
console.log('to:/recruit/position-> query', route.query)

const pageInfo = { pageNo: 1, pageSize: 20}
const items = ref([])
const total = ref(0)

// 测试数据
const test = {
  job: {
    id: 1, 
    pos: "广州", 
    name: "测试数据", 
    positionId: 1, 
    payFrom: 5000, 
    payTo: 12000, 
    payUnit: 1, 
    areaId: 110000, 
    expType: 0, 
    eduType: 0, 
    tagList: [
      "无经验要求", 
      "金融产品", 
    ]
  }, 
  enterprise: {
    id: 1, 
    name: "广州门墩儿科技有限公司", 
    anotherName: "门墩儿科技", 
    industryId: 1, 
    scale: 0, 
    financingStatus: 0, 
    logoUrl: "https://img.bosszhipin.com/beijin/mcs/chatphoto/20171009/8b09998594701c82c6d9932c6f5d3ea293cf1c0a52480018916865cbf3ed2c2f.jpg?x-oss-process=image/resize,w_120,limit_0", 
    tags: [ "培训/辅导机构",  "天使轮",   "100-499人"],
    tags1: [ '就近分配', '室内清洁', '系统接单', '无需坐班', '日常保洁', '简单易上手', '日常保洁', '简单易上手'],
    welfareList: ['周末双休', '五险一金', '包餐', '节日福利', '员工旅游', '定期体检', '全勤奖', '带薪年假，年底双薪等福利多多']
  }, 
  contact: {
    enterpriseId: 1, 
    userId: 1, 
    avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5bbef4cc-6268-46d9-87b3-3aa7d2168aad%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1718339519&t=6ff0d47abd90d209ca81b671e898deb8", 
    name: "ces女士", 
    status: 1, 
    postNameCn: "人事经理", 
    postNameEn: "uman resources", 
    postCode: "HR"
  }
}
// 测试数据

// 职位搜索
const getPositionList = async () => {
  const pageReqVO = {
    ...pageInfo,
    // content: '', // 搜索内容,示例值(xx科技/xx经理)
    // areaIds: [], //工作地区id集合,示例值([])
    // expType: 0, // 工作经验(menduner_exp_type),示例值(1)
    // eduType: 0, // 	学历要求(menduner_education_type),示例值(1)
    // payType: 0, // 薪酬待遇范围(menduner_pay_scope),示例值(12)
    // jobType: 0, // 求职类型(menduner_job_type),示例值(2)
    // positionId: 0, // 职位类型,示例值(2)
    // enterpriseType: 0, // 企业类型(menduner_enterprise_type)
    // industryIds: [], // 行业信息id集合,示例值([])
    // scale: 0, // 人员规模（0-20人，20-99人)示例值(1)
    // financingStatus: 0 // 融资阶段（未融资，天使轮，A轮，不需要融资）,示例值(1)
  }
  const res = await getJobAdvertisedSearch(pageReqVO)
  // items.value = res.list
  // total.value = res.total
  // 测试数据
  items.value = [test, ...res.list]
  total.value = res.total + 1
}
// items.value = [test]
getPositionList()

const handleChangePage = (index) => {
  pageInfo.pageNo = index
  getPositionList()
}

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

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

</script>