职位类型更换为级联选择器

src/views/recruit/enterprise/search/components/common.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex align-center color-666">
-    <span class="font-size-14">{{ title }}：</span>
+    <span class="font-size-14" :class="labelActiveColor && select ? 'color-primary' : 'color-777'">{{ title }}：</span>
     <v-chip-group v-model="select" selected-class="text-primary" mandatory @update:modelValue="handleSelect">
       <v-chip v-for="val in items" :key="val.id" :text="val.label" :value="val.value" label filter size="small"></v-chip>
     </v-chip-group>
@@ -14,8 +14,10 @@ import { getDict } from '@/hooks/web/useDictionaries'
 
 const emit = defineEmits(['select', 'clear'])
 const props = defineProps({
+  labelActiveColor: Boolean,
   dictType: String,
   title: String,
+  title: String,
   isClear: Boolean
 })
 

src/views/recruit/enterprise/search/retrieval/index.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class="mt-4">
-    <div class="d-flex justify-center">
+  <div>
+    <div class="d-flex justify-center my-4">
       <TextInput v-model="queryParams.content" :item="textItem" @enter="handleConfirm" @appendInnerClick="handleConfirm"></TextInput>
     </div>
     <div>
-      <Position :isClear="clear" @clear="clear = false" :selectData="position" @select="val => position = val"></Position>
+      <!-- <Position :isClear="clear" @clear="clear = false" :selectData="position" @select="val => position = val"></Position> -->
       <div class="font-size-15 d-flex align-center color-666">
-        <span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区：</span>
-        <cascade v-model="queryParams.areaIds" :item="selectItems" @change="val => handleSearch('areaIds', val)" style="width: 300px;"></cascade>
+        <span :class="queryParams.areaIds?.length ? 'color-primary' : 'color-777'">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区：</span>
+        <cascade v-model="queryParams.areaIds" :item="selectItems" @change="val => handleSearch('areaIds', val)" style="width: 300px;" class="mr-5"></cascade>
+        <span :class="queryParams.positionIds?.length ? 'color-primary' : 'color-777'">职位类型：</span>
+        <cascade v-model="queryParams.positionIds" :item="positionItems" @change="val => handleSearch('positionIds', val)" style="width: 300px;" class="mr-5"></cascade>
       </div>
-      <CommonPage :isClear="clear" @clear="clear = false" class="my-3" dictType="menduner_education_type" title="最高学历" @select="val => handleSearch('eduType', val)"></CommonPage>
-      <CommonPage :isClear="clear" @clear="clear = false" dictType="menduner_exp_type" title="工作经验" @select="val => handleSearch('expType', val)"></CommonPage>
+      <CommonPage :isClear="clear" @clear="clear = false" labelActiveColor class="my-3" dictType="menduner_education_type" title="最高学历" @select="val => handleSearch('eduType', val)"></CommonPage>
+      <CommonPage :isClear="clear" @clear="clear = false" labelActiveColor dictType="menduner_exp_type" title="工作经验" @select="val => handleSearch('expType', val)"></CommonPage>
       <v-divider class="mt-1 mb-3"></v-divider>
       <div>
-        <div>
+        <!-- <div>
           <v-chip v-for="k in position" :key="k.id" label class="mr-3" closable @click:close="handleClose(k)">{{ k.nameCn }}</v-chip>
-        </div>
+        </div> -->
         <div class="text-end">
           <v-btn  color="primary" variant="text" @click="handleClear">清空筛选条件</v-btn>
         </div>
@@ -112,7 +114,7 @@
 defineOptions({ name: 'searchRetrieval' })
 import { ref, computed } from 'vue'
 import CommonPage from '../components/common.vue'
-import Position from './components/position.vue'
+// import Position from './components/position.vue'
 import { getPersonSearchPage } from '@/api/enterprise.js'
 import { dealDictArrayData } from '@/utils/position'
 import { timesTampChange } from '@/utils/date'
@@ -133,7 +135,9 @@ const textItem = ref({
   value: '',
   label: '输入关键字',
   clearable: true,
-  appendInnerIcon: 'mdi-magnify'
+  hideDetails: true,
+  appendInnerIcon: 'mdi-magnify',
+  placeholder: '请输入'
 })
 const query = ref({
   pageNo: 1,
@@ -143,6 +147,7 @@ const queryParams = ref({
   content: null,
   positionIds: [],
   areaIds: [],
+  positionIds: [],
   expType: '',
   eduType: ''
 })
@@ -156,7 +161,21 @@ const selectItems = ref({
   multiple: true,
   checkStrictly: true,
   collapseTags: true,
-  placeholder: '地区',
+  labelActiveColor: true,
+  placeholder: '请选择',
+  items: [],
+})
+const positionItems = ref({
+  value: null,
+  itemText: 'nameCn',
+  itemValue: 'id',
+  hideDetails: true,
+  clearable: true,
+  multiple: true,
+  checkStrictly: false,
+  collapseTags: true,
+  labelActiveColor: true,
+  placeholder: '请选择',
   items: [],
 })
 
@@ -172,6 +191,11 @@ getDict('positionData', {}, 'positionData').then(({ data }) => {
   positionData.value = data
 })
 
+getDict('positionTreeData', {}, 'positionTreeData').then(({ data }) => {
+  positionItems.value.items = data
+  
+})
+
 const total = ref(0)
 const items = ref([])
 const loading = ref(false)
@@ -226,8 +250,8 @@ const checkValue = (obj) => {
 }
 
 const handleConfirm = () => {
-  const positionIds = position.value.map(k => k.id)
-  queryParams.value.positionIds = positionIds || []
+  // const positionIds = position.value.map(k => k.id)
+  // queryParams.value.positionIds = positionIds || []
   query.value.pageNo = 1
   if (!checkValue(queryParams.value)) {
     Snackbar.warning('至少选择一个条件进行搜索')
@@ -372,4 +396,10 @@ const badgeIcon = computed(() => (item) => {
   width: 10px !important;
   height: 10px !important;
 }
+
+.active {
+  :deep(.v-field__input) {
+    color: var(--v-primary-base);
+  }
+}
 </style>