职位检索的左侧改为国家选择

src/components/headSearch/index.vue

@@ -4,17 +4,16 @@
       <template v-slot:activator="{ isActive, props }">
         <v-btn
           style="height: 100%; font-size: 16px;"
-          class="mr-3"
           variant="text"
           density="comfortable"
           :append-icon="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"
           color="primary"
           v-bind="props"
         >
-          {{ text }}
+          {{ defineProps.text }}
         </v-btn>
       </template>
-      <jobTypeCard class="jobTypeCardBox" @handleJobClick="handleClickJob"></jobTypeCard>
+      <jobTypeCard v-if="defineProps.text === '职位类型'" class="jobTypeCardBox" @handleJobClick="handleClickJob"></jobTypeCard>
     </v-menu>
     <!-- <div style="position: relative;">
       <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click.stop="drawer = !drawer">
@@ -30,7 +29,7 @@
       variant="plain"
       density="compact"
       :hide-details="true"
-      class="px-2"
+      class="ml-3 px-2"
       style="height: 100%; line-height: 100%;"
       @keyup.enter="handleSearch"
     ></v-text-field>
@@ -46,8 +45,17 @@ import { useRoute, useRouter } from 'vue-router'
 defineOptions({ name:'common-components-headSearch'})
 const route = useRoute(); const router = useRouter()
 const emits = defineEmits(['handleSearch', 'handleJobClick'])// 定义一个或多个自定义事件
+const defineProps = defineProps({
+  // showLeft: {
+  //   type: Boolean,
+  //   default: true
+  // },
+  text: {
+    type: String,
+    default: '职位类型'
+  },
+})
 
-const text = ref('职位类型')
 const value = ref('')
 let drawer = ref(false)
 

src/views/recruit/position/index.vue

@@ -3,13 +3,13 @@
   <div class="default-width">
     <div class="py-3" style="z-index: 998; background-color: #fff">
       <div class="stickyBox">
-        <headSearch 
-          @handleJobClick="val => dealParams(val, 'positionId')" 
+        <headSearch
+          text="中国"
           @handleSearch="val => dealParams(val, 'content')"
         ></headSearch>
       </div>
-      <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @updateCheckedInput="handleMounted"></cityFilter>
-      <conditionFilter class="mx-5 mb-3" ref="conditionFilterRef" @conditionFilterChange="handleMounted"></conditionFilter>
+      <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @change="handleMounted"></cityFilter>
+      <conditionFilter class="mx-5 mb-3" ref="conditionFilterRef" @change="handleMounted"></conditionFilter>
     </div>
     <div class="d-flex mt-3">
       <div class="mr-3" style="min-width: 884px;">
@@ -49,6 +49,7 @@ 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({})
 provide('routeQuery', routeQuery)
 
 let pageReqVO = reactive({
@@ -66,53 +67,69 @@ const getPositionList = async () => {
   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 = (val, key) => {
-  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 removeEmptyStringsAndReturnNew = (obj) => {
+//   const result = {}
+//   Object.keys(obj).forEach(function(key) {
+//     if (obj[key]) {
+//       result[key] = obj[key]
+//     }
+//   })
+//   return result
+// }
+// const updateRouteQuery = (val, key) => {
+//   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 updateRouter = () => {
+  const str = Object.keys(testQuery).length ? Object.keys(testQuery).reduce((res, _key) => {
+    res += `${res ? '&' : ''}${_key}=${testQuery[_key]}`
+    return res
+  }, '') : ''
+  console.log('{route.path}?${str}->str', str)
+  router.push(`${route.path}?${str}`)
+  handleSearchPosition()
 }
 
-const handleMounted = (key, val) => {
+const handleMounted = (key, val) => { // val为字符串
+  testQuery[key] = val
+  // console.log('testQuery', key, val)
+  updateRouter()
+  //  
   nextTick(() => {
-    updateRouteQuery(key, val)
+    // updateRouteQuery(val, key)
   })
 }
 
 // 职位搜索
 const handleSearchPosition = () => {
-  const conditionParams = conditionFilterRef.value?.params
-  const cityParams = cityFilterRef.value?.getQuery
-  pageReqVO = { ...pageReqVO, ...conditionParams, ...cityParams, content: pageReqVO.content }
+  // const conditionParams = conditionFilterRef.value?.params
+  // const cityParams = cityFilterRef.value?.getQuery
+  // pageReqVO = { ...pageReqVO, ...conditionParams, ...cityParams, content: pageReqVO.content }
+  pageReqVO = { ...pageReqVO }
   getPositionList()
 }