清空筛选条件

src/locales/en.js

@@ -32,7 +32,9 @@ export default {
     operationSuccessful: 'Operation successful',
     close: 'Close',
     suspend: 'Suspend',
-    release: 'Release'
+    release: 'Release',
+    clearFilterCriteria: 'Clear Filter Criteria',
+    clearSelectedLocation: 'Clear Selected Location',
   },
   sys: {
     api: {

src/locales/zh-CN.js

@@ -32,7 +32,9 @@ export default {
     operationSuccessful: '操作成功',
     close: '关闭',
     suspend: '暂停',
-    release: '发布'
+    release: '发布',
+    clearFilterCriteria: '清空筛选条件',
+    clearSelectedLocation: '清空已选位置',
   },
   sys: {
     api: {

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

@@ -1,13 +1,13 @@
 <template>
   <div class="d-flex">
-    <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 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>
+    <companyIndustry positionIndexPage @inputChange="val => inputChange(ids.industryIds, val)"></companyIndustry>
+    <positionType positionIndexPage @inputChange="val => inputChange(ids.positionId, val)"></positionType>
+    <JobType positionIndexPage @inputChange="val => inputChange(ids.jobType, val)"></JobType>
+    <expType positionIndexPage @inputChange="val => inputChange(ids.expType, val)"></expType>
+    <payScope positionIndexPage @inputChange="val => inputChange(ids.payType, val)"></payScope>
+    <educationType positionIndexPage :isSingle="false" @inputChange="val => inputChange(ids.scale, val)"></educationType>
+    <scale positionIndexPage @inputChange="val => inputChange(ids.eduType, val)"></scale>
+    <financingStatus positionIndexPage @inputChange="val => inputChange(ids.financingStatus, val)"></financingStatus>
   </div>
 </template>
 <script setup>
@@ -19,11 +19,30 @@ 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 { defineExpose, ref } from 'vue'
 defineOptions({name: 'retrieval-components-conditionFilter'})
 const emits = defineEmits(['change'])
+const ids = ref({
+  industryIds: 'industryIds',
+  positionId: 'positionId',
+  jobType: 'jobType',
+  expType: 'expType',
+  payType: 'payType',
+  eduType: 'eduType',
+  scale: 'scale',
+  financingStatus: 'financingStatus',
+})
 
 const inputChange = (key, arr) => {
   const str = arr.length ? arr.join('_') : ''
   emits('change', key, str)
 }
+
+// const clearFun = () => {
+//   Object.keys(ids).forEach(key => emits('change', key, ''))
+// }
+
+defineExpose({
+  ids
+})
 </script>

src/views/recruit/position/index.vue

@@ -10,7 +10,10 @@
         ></headSearch>
       </div>
       <cityFilter class="mx-5 mb-3" ref="cityFilterRef" @change="handleQueryChange"></cityFilter>
-      <conditionFilter class="mx-5 mb-3" ref="conditionFilterRef" @change="handleQueryChange"></conditionFilter>
+      <div v-if="showConditionFilter" class="d-flex justify-space-between mx-5 mb-3">
+        <conditionFilter ref="conditionFilterRef" @change="handleQueryChange"></conditionFilter>
+        <span class="clearFilterCriteria" @click="handleClearConditionFilter">{{ $t('common.clearFilterCriteria') }}</span>
+      </div>
     </div>
     <div class="d-flex mt-3">
       <div class="mr-3" style="min-width: 884px;">
@@ -46,6 +49,7 @@ defineOptions({name: 'retrieval-position-page'})
 const route = useRoute(); const router = useRouter()
 const cityFilterRef = ref(); const conditionFilterRef = ref()
 
+const showConditionFilter = ref(true)
 const pageInfo = { pageNo: 1, pageSize: 20}
 const items = ref([])
 const total = ref(0)
@@ -82,7 +86,7 @@ const getData = async () => {
       else pageReqVO[key] = routeQuery[key].split('_') // 传给后端Arr
     })
   }
-  console.log('getData参数pageReqVO', pageReqVO)
+  // console.log('getData参数pageReqVO', pageReqVO)
   const { list, total: number } = await getJobAdvertisedSearch(pageReqVO)
   items.value = list.map(e => {
     e.job = { ...e.job, ...dealDictObjData({}, e.job) }
@@ -111,9 +115,34 @@ const handleQueryChange = (key, val) => { // val为字符串,数组的话用_下
   updateRouter()
 }
 
+// 清空筛选条件
+const handleClearConditionFilter = async () => {
+  if (conditionFilterRef.value?.ids) {
+    showConditionFilter.value = false
+    const ids = conditionFilterRef.value.ids
+    Object.keys(ids).forEach(key => {
+      if (routeQuery[key]) delete routeQuery[key]
+    })
+    await updateRouter()
+    showConditionFilter.value = true
+  }
+}
+
 // 分页
 const handleChangePage = (index) => {
   pageInfo.pageNo = index
   getData()
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.clearFilterCriteria {
+  cursor: pointer;
+  line-height: 28px;
+  margin-right: 12px;
+  font-size: 14px;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+</style>