职位搜索回显

src/views/recruit/position/components/areaCascader/index.vue

@@ -33,10 +33,10 @@
 // import recursive from './recursive'
 import { getDict } from '@/hooks/web/useDictionaries'
 import { inject, reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
+// import { useRoute } from 'vue-router'
 defineOptions({ name:'common-components-areaTree'})
 const emits = defineEmits(['checkedInput'])
-const route = useRoute()
+// const route = useRoute()
 
 const props = defineProps({
   // items: Object,
@@ -62,32 +62,48 @@ const query = inject('routeQuery')
 getDict('areaTreeData', {}, 'areaTreeData').then(({ data }) => {
   const arr = data?.length && data || []
   treeList.value = [arr]
-  if (query && query.level1) {
-    // 刷新回显
-    Object.keys(query).forEach(key => {
-      if(key.includes('level')) {
-        const levelIndex = key.split('level')[1] - 1
-        if (levelIndex !== -1 && treeList.value[levelIndex]?.length) {
-          const idsStr = route.query[key]?.split(',')[0] || ''
-          if (idsStr) {
-            const arr = idsStr.split('_')
-            if (arr?.length) {
-              arr.forEach(idItem => {
-                const dataItem = treeList.value[levelIndex].find(findItem => (findItem.id - 0) === (idItem - 0))
-                const params = {
-                  item: dataItem,
-                  index: levelIndex,
-                  expand: true,
-                  updateSearch: false
-                }
-                if (dataItem) handleNext(params)
-              })
-            }
+  if (query && query.city) { // 刷新回显
+    const city = query.city
+    const levelCountArr = city.split('__')
+    levelCountArr?.forEach((areaIds, levelIndex) => {
+      const idArr = areaIds.split('_')
+      if (idArr?.length) {
+        idArr.forEach(idItem => {
+          const dataItem = treeList.value[levelIndex].find(findItem => (findItem.id - 0) === (idItem - 0))
+          const params = {
+            item: dataItem,
+            index: levelIndex,
+            expand: true,
+            updateSearch: false
           }
-        }
-
+          if (dataItem) handleNext(params)
+        })
       }
     })
+    // Object.keys(query).forEach(key => {
+    //   if(key.includes('level')) {
+    //     const levelIndex = key.split('level')[1] - 1
+    //     if (levelIndex !== -1 && treeList.value[levelIndex]?.length) {
+    //       const idsStr = route.query[key]?.split(',')[0] || ''
+    //       if (idsStr) {
+    //         const arr = idsStr.split('_')
+    //         if (arr?.length) {
+    //           arr.forEach(idItem => {
+    //             const dataItem = treeList.value[levelIndex].find(findItem => (findItem.id - 0) === (idItem - 0))
+    //             const params = {
+    //               item: dataItem,
+    //               index: levelIndex,
+    //               expand: true,
+    //               updateSearch: false
+    //             }
+    //             if (dataItem) handleNext(params)
+    //           })
+    //         }
+    //       }
+    //     }
+
+    //   }
+    // })
   } else {
     // 默认展开城市到defaultOpen级
     if (props.defaultOpen > 0) {

src/views/recruit/position/components/cityFilter.vue

@@ -25,7 +25,8 @@ const checkedInputChange = (idChecked) => {
     idChecked.forEach((_e, index) => {
       if (_e?.length) {
         // obj[`level${index+1}`] = _e.join('_')
-        city += `${index ? '%' : ''}CL${index+1}_${_e.join('_')}` // CL: city-level
+        // city += `${index ? '%' : ''}CL${index+1}_${_e.join('_')}` // CL: city-level
+        city += `${index ? '__' : ''}${_e.join('_')}` // CL: city-level
       }
     })
     // query = obj

src/views/recruit/position/components/conditionFilter.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="d-flex">
-    <companyIndustry @inputChange="val => inputChange('industryIds', val)"></companyIndustry>
-    <positionType @inputChange="val => inputChange('positionId', val)"></positionType>
+    <companyIndustry positionIndexPage @inputChange="val => inputChange('industryIds', val)"></companyIndustry>
+    <positionType positionIndexPage @inputChange="val => inputChange('positionId', val)"></positionType>
     <JobType positionIndexPage @inputChange="val => inputChange('jobType', val)"></JobType>
     <expType positionIndexPage @inputChange="val => inputChange('expType', val)"></expType>
-    <payScope @inputChange="val => inputChange('payType', val)"></payScope>
-    <educationType :isSingle="false" @inputChange="val => inputChange('eduType', val)"></educationType>
-    <scale @inputChange="val => inputChange('scale', val)"></scale>
-    <financingStatus @inputChange="val => inputChange('financingStatus', val)"></financingStatus>
+    <payScope positionIndexPage @inputChange="val => inputChange('payType', val)"></payScope>
+    <educationType positionIndexPage :isSingle="false" @inputChange="val => inputChange('eduType', val)"></educationType>
+    <scale positionIndexPage @inputChange="val => inputChange('scale', val)"></scale>
+    <financingStatus positionIndexPage @inputChange="val => inputChange('financingStatus', val)"></financingStatus>
   </div>
 </template>
 <script setup>

src/views/recruit/position/components/conditionFilter/JobType.vue

@@ -23,6 +23,13 @@ import { ref, defineEmits, inject } from 'vue';
 defineOptions({name: 'conditionFilter-JobType'})
 const emits = defineEmits(['inputChange'])
 const query = inject('routeQuery')
+const props = defineProps({
+  positionIndexPage: { // 职位检索
+    type: Boolean,
+    default: false
+  }
+})
+
 const title = ref('求职类型')
 let show = ref(false)
 let items = ref()
@@ -38,6 +45,7 @@ getDict('menduner_job_type').then(({ data }) => {
     if (arr?.length) {
       selectedItems.value = arr
       title.value = selectedItems.value.length ? `求职类型（${selectedItems.value.length}）` : '求职类型'
+      if (!props.positionIndexPage) emits('inputChange', { values: selectedItems.value, isEmit: true })
     }
   }
   show.value = true
@@ -49,7 +57,8 @@ const handle = (val) => {
     selectedItems.value.push(val)
   }
   title.value = selectedItems.value.length ? `求职类型（${selectedItems.value.length}）` : '求职类型'
-  emits('inputChange', selectedItems.value)
+  if (props.positionIndexPage) emits('inputChange', selectedItems.value)
+  else emits('inputChange', { values: selectedItems.value, isEmit: true })
 }
 </script>
 <style lang="scss" scoped>

src/views/recruit/position/components/conditionFilter/educationType.vue

@@ -20,20 +20,25 @@ import commonStyle from './commonStyle.vue'
 import { getDict } from '@/hooks/web/useDictionaries'
 import { ref, defineEmits, inject } from 'vue';
 defineOptions({name: 'conditionFilter-educationType'})
+const emits = defineEmits(['inputChange'])
+const query = inject('routeQuery')
 
 const props = defineProps({
   isSingle: {
     type: Boolean,
     default: false
+  },
+  positionIndexPage: { // 职位检索
+    type: Boolean,
+    default: false
   }
 })
 
-const show = ref(false)
-const query = inject('routeQuery')
 const title = ref('学历要求')
-const emits = defineEmits(['inputChange'])
+const show = ref(false)
 let items = ref()
 const selectedItems = ref([])
+
 getDict('menduner_education_type').then(({ data }) => {
   data = data?.length && data || []
   items.value = data
@@ -42,8 +47,8 @@ getDict('menduner_education_type').then(({ data }) => {
     const arr = str.split('_')
     if (arr?.length) {
       selectedItems.value = arr
-      title.value = `学历要求(${arr.length})`
-      emits('inputChange', { values: selectedItems.value, isEmit: true })
+      title.value = selectedItems.value.length ? `学历要求（${selectedItems.value.length}）` : '学历要求'
+      if (!props.positionIndexPage) emits('inputChange', { values: selectedItems.value, isEmit: true })
     }
   }
   show.value = true
@@ -61,7 +66,8 @@ const handle = (val) => {
     } else selectedItems.value.push(val)
     title.value = selectedItems.value.length ? `学历要求(${selectedItems.value.length})` : '学历要求'
   }
-  emits('inputChange', { values: selectedItems.value, isEmit: true })
+  if (props.positionIndexPage) emits('inputChange', selectedItems.value)
+  else emits('inputChange', { values: selectedItems.value, isEmit: true })
 }
 </script>
 <style lang="scss" scoped>

src/views/recruit/position/components/conditionFilter/financingStatus.vue

@@ -20,12 +20,18 @@ import commonStyle from './commonStyle.vue'
 import { getDict } from '@/hooks/web/useDictionaries'
 import { ref, defineEmits, inject } from 'vue';
 defineOptions({name: 'conditionFilter-financingStatus'})
-
 const emits = defineEmits(['inputChange'])
-let items = ref()
-const show = ref(false)
 const query = inject('routeQuery')
+const props = defineProps({
+  positionIndexPage: { // 职位检索
+    type: Boolean,
+    default: false
+  }
+})
+
 const title = ref('融资阶段')
+let show = ref(false)
+let items = ref()
 const selectedItems = ref([])
 
 getDict('menduner_financing_status').then(({ data }) => {
@@ -36,17 +42,21 @@ getDict('menduner_financing_status').then(({ data }) => {
     const arr = str.split('_')
     if (arr?.length) {
       selectedItems.value = arr
-      title.value = `融资阶段(${arr.length})`
-      emits('inputChange', { values: selectedItems.value, isEmit: true })
+      title.value = selectedItems.value.length ? `融资阶段（${selectedItems.value.length}）` : '融资阶段'
+      if (!props.positionIndexPage) emits('inputChange', { values: selectedItems.value, isEmit: true })
     }
   }
   show.value = true
 })
 const handle = (val) => {
-  if (selectedItems.value.includes(val)) selectedItems.value = selectedItems.value.filter(i => i !== val)
-  else selectedItems.value.push(val)
-  title.value = selectedItems.value.length ? `融资阶段(${selectedItems.value.length})` : '融资阶段'
-  emits('inputChange', { values: selectedItems.value, isEmit: true })
+  if (selectedItems.value.includes(val)) {
+    selectedItems.value = selectedItems.value.filter(i => i !== val)
+  } else {
+    selectedItems.value.push(val)
+  }
+  title.value = selectedItems.value.length ? `融资阶段（${selectedItems.value.length}）` : '融资阶段'
+  if (props.positionIndexPage) emits('inputChange', selectedItems.value)
+  else emits('inputChange', { values: selectedItems.value, isEmit: true })
 }
 </script>
 <style lang="scss" scoped>

src/views/recruit/position/components/conditionFilter/payScope.vue

@@ -20,32 +20,39 @@ import commonStyle from './commonStyle.vue'
 import { getDict } from '@/hooks/web/useDictionaries'
 import { ref, defineEmits, inject } from 'vue';
 defineOptions({name: 'conditionFilter-payScope'})
-
-const show = ref(false)
+const emits = defineEmits(['inputChange'])
 const query = inject('routeQuery')
+const props = defineProps({
+  positionIndexPage: { // 职位检索
+    type: Boolean,
+    default: false
+  }
+})
+
 const title = ref('薪资待遇')
-const emits = defineEmits(['inputChange'])
+const show = ref(false)
 let items = ref()
 let selectedItems = ref([])
+
 getDict('menduner_pay_scope').then(({ data }) => {
   data = data?.length && data || []
   items.value = data
   if (query && query.payType) {
     title.value = '薪资待遇（1）'
     selectedItems.value = [query.payType]
-    emits('inputChange', { values: selectedItems.value, isEmit: true })
+    if (!props.positionIndexPage) emits('inputChange', { values: selectedItems.value, isEmit: true })
   }
   show.value = true
 })
 const handle = (val) => {
   if (selectedItems.value.includes(val)) {
-    title.value = '薪资待遇'
     selectedItems.value = selectedItems.value.filter(i => i !== val)
   } else {
-    title.value = '薪资待遇（1）'
     selectedItems.value = [val]
   }
-  emits('inputChange', { values: selectedItems.value, isEmit: true })
+  title.value = selectedItems.value.length ? `薪资待遇（${selectedItems.value.length}）` : '薪资待遇'
+  if (props.positionIndexPage) emits('inputChange', selectedItems.value)
+  else emits('inputChange', { values: selectedItems.value, isEmit: true })
 }
 </script>
 <style lang="scss" scoped>

src/views/recruit/position/components/conditionFilter/scale.vue

@@ -22,10 +22,16 @@ import { getDict } from '@/hooks/web/useDictionaries'
 import { ref, defineEmits, inject } from 'vue';
 defineOptions({name: 'conditionFilter-scale'})
 const emits = defineEmits(['inputChange'])
-
-const show = ref(false)
 const query = inject('routeQuery')
+const props = defineProps({
+  positionIndexPage: { // 职位检索
+    type: Boolean,
+    default: false
+  }
+})
+
 const title = ref('公司规模')
+let show = ref(false)
 let items = ref()
 const selectedItems = ref([])
 
@@ -37,17 +43,21 @@ getDict('menduner_scale').then(({ data }) => {
     const arr = str.split('_')
     if (arr?.length) {
       selectedItems.value = arr
-      title.value = `公司规模(${arr.length})`
-      emits('inputChange', { values: selectedItems.value, isEmit: true })
+      title.value = selectedItems.value.length ? `公司规模（${selectedItems.value.length}）` : '公司规模'
+      if (!props.positionIndexPage) emits('inputChange', { values: selectedItems.value, isEmit: true })
     }
   }
   show.value = true
 })
 const handle = (val) => {
-  if (selectedItems.value.includes(val)) selectedItems.value = selectedItems.value.filter(i => i !== val)
-  else selectedItems.value.push(val)
-  title.value = selectedItems.value.length ? `公司规模(${selectedItems.value.length})` : '公司规模'
-  emits('inputChange', { values: selectedItems.value, isEmit: true })
+  if (selectedItems.value.includes(val)) {
+    selectedItems.value = selectedItems.value.filter(i => i !== val)
+  } else {
+    selectedItems.value.push(val)
+  }
+  title.value = selectedItems.value.length ? `公司规模（${selectedItems.value.length}）` : '公司规模'
+  if (props.positionIndexPage) emits('inputChange', selectedItems.value)
+  else emits('inputChange', { values: selectedItems.value, isEmit: true })
 }
 </script>
 <style lang="scss" scoped>

src/views/recruit/position/index.vue

@@ -48,16 +48,36 @@ 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
-const testQuery = (route?.query && route.query && Object.keys(route?.query).length) ? reactive(route.query) : reactive({})
+// const routeQuery = (route?.query && route.query && Object.keys(route?.query).length) ? route.query : null
+let routeQuery = (route?.query && route.query && Object.keys(route?.query).length) ? reactive(route.query) : reactive({})
 provide('routeQuery', routeQuery)
 
-let pageReqVO = reactive({
-  ...pageInfo
-})
+// let pageReqVO = reactive({
+//   ...pageInfo
+// })
 
 // 职位搜索
-const getPositionList = async () => {
+const getData = async () => {
+  const pageReqVO = { ...pageInfo }
+  // route.query参数
+  if (routeQuery && Object.keys(routeQuery).length) {
+    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 pageReqVO[key] = routeQuery[key].split('_')
+    })
+  }
+  console.log('pageReqVO', pageReqVO)
   const { list, total: number } = await getJobAdvertisedSearch(pageReqVO)
   items.value = list.map(e => {
     e.job = { ...e.job, ...dealDictObjData({}, e.job) }
@@ -66,6 +86,7 @@ const getPositionList = async () => {
   })
   total.value = number
 }
+getData()
 
 // const removeEmptyStringsAndReturnNew = (obj) => {
 //   const result = {}
@@ -105,18 +126,20 @@ const getPositionList = async () => {
 
 // 刷新路由
 const updateRouter = () => {
-  const str = Object.keys(testQuery).length ? Object.keys(testQuery).reduce((res, _key) => {
-    res += `${res ? '&' : ''}${_key}=${testQuery[_key]}`
+  const str = Object.keys(routeQuery).length ? Object.keys(routeQuery).reduce((res, _key) => {
+    res += `${res ? '&' : ''}${_key}=${routeQuery[_key]}`
     return res
   }, '') : ''
-  console.log('{route.path}?${str}->str', str)
+  // console.log('route.path', str)
+  // const str1 = "city=1__140000__140300__140321_140322_140303&jobType=1_3_0"
   router.push(`${route.path}?${str}`)
-  handleSearchPosition()
+  // router.push(`${route.path}?${str1}`)
+  getData()
 }
 
-const handleMounted = (key, val) => { // val为字符串
-  testQuery[key] = val
-  // console.log('testQuery', key, val)
+const handleMounted = (key, val) => { // val为字符串,数组的话用_下划线分隔
+  routeQuery[key] = val
+  console.log('routeQuery', key, val)
   updateRouter()
   //  
   nextTick(() => {
@@ -124,34 +147,34 @@ const handleMounted = (key, val) => { // val为字符串
   })
 }
 
-// 职位搜索
-const handleSearchPosition = () => {
-  // const conditionParams = conditionFilterRef.value?.params
-  // const cityParams = cityFilterRef.value?.getQuery
-  // pageReqVO = { ...pageReqVO, ...conditionParams, ...cityParams, content: pageReqVO.content }
-  pageReqVO = { ...pageReqVO }
-  getPositionList()
-}
+// // 职位搜索
+// const handleSearchPosition = () => {
+//   // const conditionParams = conditionFilterRef.value?.params
+//   // const cityParams = cityFilterRef.value?.getQuery
+//   // pageReqVO = { ...pageReqVO, ...conditionParams, ...cityParams, content: pageReqVO.content }
+//   pageReqVO = { ...pageReqVO }
+//   getData()
+// }
 
 // 职位类型、关键字
 const dealParams = (val, key) => {
-  pageReqVO[key] = val
+  // pageReqVO[key] = val
   handleMounted(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) handleMounted(routeQuery.content, 'content')
-  getPositionList()
-} else getPositionList()
+// // 刷新后有参数则进行搜索
+// 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) handleMounted(routeQuery.content, 'content')
+//   getData()
+// } else getData()
 
 // 分页
 const handleChangePage = (index) => {
   pageInfo.pageNo = index
-  getPositionList()
+  getData()
 }
 </script>