职位搜索输入框

src/components/headSearch/index.vue

@@ -44,19 +44,17 @@ import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 defineOptions({ name:'common-components-headSearch'})
 const route = useRoute(); const router = useRouter()
-const emits = defineEmits(['handleSearch', 'handleJobClick'])// 定义一个或多个自定义事件
+const emits = defineEmits(['update:modelValue', 'handleSearch', 'handleJobClick'])// 定义一个或多个自定义事件
 const defineProps = defineProps({
-  // showLeft: {
-  //   type: Boolean,
-  //   default: true
-  // },
+  modelValue: [String, Number],
   text: {
     type: String,
     default: '职位类型'
   },
 })
 
-const value = ref('')
+// const value = ref('')
+const value = ref(defineProps.modelValue)
 let drawer = ref(false)
 
 if (route.query && route.query?.content) value.value = route.query.content

src/views/recruit/position/index.vue

@@ -4,8 +4,9 @@
     <div class="py-3" style="z-index: 998; background-color: #fff">
       <div class="stickyBox">
         <headSearch
+          v-model="headSearchText"
           text="中国"
-          @handleSearch="val => dealParams(val, 'content')"
+          @handleSearch="val => handleMounted('content', val)"
         ></headSearch>
       </div>
       <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @change="handleMounted"></cityFilter>
@@ -37,7 +38,7 @@ 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, nextTick } from 'vue'
+import { provide, reactive, ref } from 'vue'
 import { dealDictObjData } from '@/views/recruit/position/components/dict'
 
 import { useRoute, useRouter } from 'vue-router'
@@ -52,6 +53,7 @@ const total = ref(0)
 let routeQuery = (route?.query && route.query && Object.keys(route?.query).length) ? reactive(route.query) : reactive({})
 provide('routeQuery', routeQuery)
 
+const headSearchText = ref(routeQuery?.content || '')
 // let pageReqVO = reactive({
 //   ...pageInfo
 // })
@@ -61,6 +63,7 @@ const getData = async () => {
   const pageReqVO = { ...pageInfo }
   // route.query参数
   if (routeQuery && Object.keys(routeQuery).length) {
+    const passingStrings = ['content'] // 传递字符串
     Object.keys(routeQuery).forEach(key => {
       if (key === 'city') { // 工作地区id集合,示例值([])
         const city = routeQuery[key]
@@ -74,10 +77,11 @@ const getData = async () => {
         })
         pageReqVO.areaIds = areaIds
       }
-      else pageReqVO[key] = routeQuery[key].split('_')
+      else if (passingStrings.includes(key)) pageReqVO[key] = routeQuery[key] // 传给后端字符串
+      else pageReqVO[key] = routeQuery[key].split('_') // 传给后端Arr
     })
   }
-  console.log('pageReqVO', pageReqVO)
+  // console.log('pageReqVO', pageReqVO)
   const { list, total: number } = await getJobAdvertisedSearch(pageReqVO)
   items.value = list.map(e => {
     e.job = { ...e.job, ...dealDictObjData({}, e.job) }
@@ -88,46 +92,10 @@ const getData = async () => {
 }
 getData()
 
-// 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(routeQuery).length ? Object.keys(routeQuery).reduce((res, _key) => {
-    res += `${res ? '&' : ''}${_key}=${routeQuery[_key]}`
+    if (routeQuery[_key] !== '') res += `${res ? '&' : ''}${_key}=${routeQuery[_key]}`
     return res
   }, '') : ''
   // console.log('route.path', str)
@@ -139,12 +107,8 @@ const updateRouter = () => {
 
 const handleMounted = (key, val) => { // val为字符串,数组的话用_下划线分隔
   routeQuery[key] = val
-  console.log('routeQuery', key, val)
+  // console.log('routeQuery', key, val)
   updateRouter()
-  //  
-  nextTick(() => {
-    // updateRouteQuery(val, key)
-  })
 }
 
 // // 职位搜索
@@ -156,11 +120,6 @@ const handleMounted = (key, val) => { // val为字符串,数组的话用_下划
 //   getData()
 // }
 
-// 职位类型、关键字
-const dealParams = (val, key) => {
-  // pageReqVO[key] = val
-  handleMounted(val, key)
-}
 
 // // 刷新后有参数则进行搜索
 // if (routeQuery) {