职位搜索

src/components/industryTypeCard/index.vue

@@ -7,7 +7,13 @@
             <div class="categoryName2">{{ item.nameCn }}</div>
             <div class="rightContent">
               <div v-if="!item.children?.length"></div>
-              <div v-else class="jobItem" v-for="val in item.children" :key="val.id">{{ val.nameCn }}</div>
+              <div
+                v-else
+                class="jobItem"
+                :class="{'act': item.act}"
+                v-for="val in item.children" :key="val.id"
+                @click="handleClick(val)"
+              >{{ val.nameCn }}</div>
             </div>
           </div>
         </div>
@@ -17,14 +23,42 @@
 
 <script setup>
 import { getDict } from '@/hooks/web/useDictionaries'
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 defineOptions({ name:'common-components-industryTypeCard'})
+const emits = defineEmits('inputChange')
 
 let items = ref()
 getDict('industryTreeData', null, 'industryTreeData').then(({ data }) => {
   data = data?.length && data || []
   items.value = data
+  console.log('industryTreeData', data)
 })
+
+// 设置选中ids
+const idChecked = reactive([])
+const handleClick = (val) => {
+  val.act = !val.act
+  console.log('val', val)
+  const findIndex = idChecked?.length ? idChecked.findIndex(j => j === val.id) : -1
+  if (findIndex === -1) {  
+    idChecked.push(val.id) // 添加  
+  } else {  
+    idChecked.splice(findIndex, 1) // 删除  
+  }
+  console.log('idChecked', idChecked)
+  if (idChecked?.length) emits('inputChange', idChecked)
+}
+
+// 选中样式判断
+const calcAct = (id) => {
+  if (!id) return false
+  if (Array.isArray(idChecked)) {
+    const index = idChecked.findIndex(itemToCheck => itemToCheck=== id)
+    const bool = index !== -1
+    return bool ? true : false; // 如果找到返回索引，否则返回 false
+  }
+  else return false
+}
 </script>
 <style lang="scss" scoped>
 .card { border-radius: 12px; }
@@ -37,6 +71,7 @@ getDict('industryTreeData', null, 'industryTreeData').then(({ data }) => {
   // .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px; color: var(--v-primary-base)}
   .categoryName2 { font-size: 14px; color: #000; width: 150px; margin-right: 4px;}
   .jobItem { font-size: 14px; color: #333333; }
+  .act { color: var(--v-primary-base); }
   .rowItem {
     padding: 8px 0;
   }

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

@@ -68,8 +68,9 @@ getDict('areaTreeData', {}, 'areaTreeData').then(({ data }) => {
       if(key.includes('level')) {
         const levelIndex = key.split('level')[1] - 1
         if (levelIndex !== -1 && treeList.value[levelIndex]?.length) {
-          if (route.query[key]) {
-            const arr = route.query[key].split('_')
+          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 === (idItem - 0))
@@ -110,12 +111,12 @@ const getIdChecked = (item, levelIndex) => {
     }
   }
   idChecked.splice(levelIndex + 1, treeList.value.length) // 取消其下级数据
+  emits('checkedInput', idChecked)
 }
 
 // 展开下一级
 const handleNext = (item, index, stopExpand) => { // stopExpand：不展开下级
   getIdChecked(item, index)
-  emits('checkedInput', idChecked)
   if (!stopExpand &&item.children && item.children.length) {
     treeList.value[index + 1] = item.children
     treeList.value.splice(index + 2, treeList.value.length)

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

@@ -12,18 +12,30 @@
 </template>
 <script setup>
 import areaTree from './areaCascader'
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 defineOptions({name: 'retrieval-components-cityFilter'})
 const emits = defineEmits('updateCheckedInput')
-
+let query = reactive({})
 const checkedInputChange = (idChecked) => {
   if (idChecked?.length) {
-    emits('updateCheckedInput', idChecked)
+    const obj = {}
+    idChecked.forEach((_e, index) => {
+      // if (_e?.length) str.value += `${index ? '&' : '' }level${index+1}=${_e.join('_')}`
+      if (_e?.length) {
+        obj[`level${index+1}`] = _e.join('_')
+      }
+    })
+    query = obj
+    emits('updateCheckedInput')
   }
 }
 
 const tab = ref(1)
 const tabClick = () => {
 }
+const getQuery = () => {
+  return query
+}
+defineExpose({ getQuery })
 </script>

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

@@ -1,13 +1,13 @@
 <template>
   <div class="d-flex">
-    <companyIndustry></companyIndustry>
-    <positionType></positionType>
-    <JobType></JobType>
-    <expType></expType>
-    <payScope></payScope>
-    <educationType></educationType>
-    <scale></scale>
-    <financingStatus></financingStatus>
+    <companyIndustry @inputChange="val => inputChange('industryIds', val)"></companyIndustry>
+    <positionType @inputChange="val => inputChange('positionId', val)"></positionType>
+    <JobType @inputChange="val => inputChange('jobType', val)"></JobType>
+    <expType @inputChange="val => inputChange('expType', val)"></expType>
+    <payScope @inputChange="val => inputChange('payScope', val)"></payScope>
+    <educationType @inputChange="val => inputChange('educationType', val)"></educationType>
+    <scale @inputChange="val => inputChange('scale', val)"></scale>
+    <financingStatus @inputChange="val => inputChange('financingStatus', val)"></financingStatus>
   </div>
 </template>
 <script setup>
@@ -19,5 +19,39 @@ import payScope from './conditionFilter/payScope.vue'
 import educationType from './conditionFilter/educationType.vue'
 import scale from './conditionFilter/scale.vue'
 import financingStatus from './conditionFilter/financingStatus.vue'
+import { reactive } from 'vue'
 defineOptions({name: 'retrieval-components-conditionFilter'})
+const emits = defineEmits('inputChangeEmits')
+
+const removeEmptyStringsAndReturnNew = (obj) => {
+  const result = {}
+  Object.keys(obj).forEach(function(key) {
+    if (obj[key]) {
+      result[key] = obj[key]
+    }
+  })
+  return result
+}
+  
+let query = reactive({
+  industryIds: '',
+  positionId: '',
+  jobType: '',
+  expType: '',
+  payScope: '',
+  scale: '',
+  financingStatus: '',
+})
+console.log('query', query)
+const inputChange = (key, arr) => {
+  query[key] = arr.join('_')
+  query = removeEmptyStringsAndReturnNew(query)
+  emits('conditionFilterChange', query.value)
+  // const newObj = removeEmptyStringsAndReturnNew(query)
+  // emits('conditionFilterChange', newObj)
+}
+const getQuery = () => {
+  return query
+}
+defineExpose({ getQuery })
 </script>

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

@@ -1,5 +1,8 @@
 <template>
-  <commonStyle btnTitle="求职类型" :close-on-content-click="false">
+  <commonStyle btnTitle="求职类型" :close-on-content-click="false" v-if="show">
+    <!-- <v-list :items="items" item-title="label" item-value="value" open-strategy="multiple">
+    </v-list> -->
+    <!-- \ -->
     <v-list>
       <v-list-item
         color="primary"
@@ -16,19 +19,38 @@
 import commonStyle from './commonStyle.vue'
 import { getDict } from '@/hooks/web/useDictionaries'
 import { ref, defineEmits } from 'vue';
+import { useRoute } from 'vue-router';
 
 defineOptions({name: 'conditionFilter-JobType'})
-const emits = defineEmits(['selectedItems'])
+const emits = defineEmits(['inputChange'])
+const route = useRoute()
+let show = ref(false)
 let items = ref()
 const selectedItems = ref([])
+
 getDict('menduner_job_type').then(({ data }) => {
   data = data?.length && data || []
   items.value = data
+  // selectedItems.value = ['2', '3']
+  // 刷新回显
+  if (route?.query && Object.keys(route?.query).length && route.query.jobType) {
+    const arr = route.query.jobType.split('jobType')
+    let idsStr = arr.length > 1 ? arr[1] : ''
+    if (idsStr) {
+      idsStr = idsStr.split(',')[0]
+      const idArr = idsStr.split('_')
+      if (idArr?.length) {
+        selectedItems.value = idArr
+        emits('inputChange', selectedItems.value)
+      }
+    }
+  }
+  show.value = true
 })
 const handle = (val) => {
   if (selectedItems.value.includes(val)) selectedItems.value = selectedItems.value.filter(i => i !== val)
   else selectedItems.value.push(val)
-  emits('selectedItems', selectedItems.value)
+  emits('inputChange', selectedItems.value)
 }
 </script>
 <style lang="scss" scoped>

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

@@ -1,6 +1,7 @@
 <template>
-  <commonStyle btnTitle="行业类型">
+  <commonStyle btnTitle="行业类型" :close-on-content-click="false">
     <industryTypeCard></industryTypeCard>
+    <!-- <industryTypeCard @inputChange="val => emits('inputChange', val)"></industryTypeCard> -->
   </commonStyle>
 </template>
 <script setup>
@@ -8,6 +9,7 @@ import commonStyle from './commonStyle.vue'
 import industryTypeCard from '@/components/industryTypeCard'
 
 defineOptions({name: 'conditionFilter-company-industry'})
+// const emits = defineEmits('inputChange')
 </script>
 <style lang="scss" scoped>
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <commonStyle btnTitle="薪资待遇">
+  <commonStyle btnTitle="薪资待遇" :close-on-content-click="false">
     <v-list>
       <v-list-item
         color="primary"

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

@@ -1,5 +1,5 @@
 <template>
-  <commonStyle btnTitle="职位类型">
+  <commonStyle btnTitle="职位类型" :close-on-content-click="false">
     <jobTypeCard></jobTypeCard>
   </commonStyle>
 </template>

src/views/recruit/position/index.vue

@@ -6,8 +6,8 @@
       <div class="stickyBox my-3">
         <headSearch></headSearch>
       </div>
-      <cityFilter class="mx-5 mb-3" @updateCheckedInput="checkedInputChange"></cityFilter>
-      <conditionFilter class="mx-5 mb-3"></conditionFilter>
+      <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;">
@@ -40,6 +40,7 @@ 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}
@@ -120,14 +121,38 @@ const handleChangePage = (index) => {
   getPositionList()
 }
 
-const checkedInputChange = (idChecked) => {
-  console.log('str11111111111', idChecked)
-  
-  let str = ref('')
-  idChecked.forEach((_e, index) => {
-    if (_e?.length) str.value += `${index ? '&' : '' }level${index+1}=${_e.join('_')}`
+const removeEmptyStringsAndReturnNew = (obj) => {
+  const result = {}
+  Object.keys(obj).forEach(function(key) {
+    if (obj[key]) {
+      result[key] = obj[key]
+    }
   })
-  if (str.value) router.push(`${route.path}?${str.value}`)
+  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>