Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

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

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div v-if="currentOptions.length">  
+      <label>{{ label }}</label>  
+      <select  
+        v-model="selected"  
+        @change="onChange"  
+        :disabled="!currentOptions.length"  
+      >  
+        <option v-for="option in currentOptions" :key="option.value" :value="option.value">  
+          {{ option.label }}  
+        </option>  
+      </select>  
+      <cascader  
+        v-if="selected"  
+        :options="options"  
+        :value="selected"  
+        :label="`${label} > `"  
+        @update:value="onChildUpdate"  
+      />  
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+defineOptions({name: 'defineOptions-area-cascader'})
+const props = defineProps({
+  modelValue: [String, Number],
+  options: Object,
+  value: {  
+    type: [String, Number],  
+    default: null,  
+  },
+  label: {  
+    type: String,  
+    default: '请选择',  
+  }
+})
+const currentOptions = computed(() => {
+  if (!this.selected) {  
+    return props.options.filter(option => !option.children || !option.children.length);  
+  }  
+
+  const selectedOption = props.options.find(option => option.value === this.selected);  
+  if (selectedOption && selectedOption.children) {  
+    return selectedOption.children;  
+  }  
+
+  return [];  
+})
+</script>
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="show">
+    <recursive v-if="items?.length" :items="items"></recursive>
+  </div>
+</template>
+<script setup>
+import recursive from './recursive'
+import { getDict } from '@/hooks/web/useDictionaries'
+import { ref } from 'vue';
+defineOptions({ name:'common-components-areaTree'})
+
+let items = ref() 
+let children = ref() 
+const show = ref(false) 
+getDict('areaTreeData', {}, 'areaTreeData').then(({ data }) => {
+  items.value = data?.length && data || []
+  children.value = items.value[0]?.children.length && items.value[0].children || []
+  show.value = true
+})
+
+</script>

src/components/areaTree/recursive.vue → src/views/recruit/position/components/areaCascader/recursive.vue

@@ -2,10 +2,10 @@
   <div>
     <span class="mr-5" v-if="currentRowType > 2">不限</span>
     <span v-for="(item, index) in props.items" :key="item.id">
-      <span v-if="index < num" class="mr-6" style="line-height: 32px;" @click="handleClick(item)">{{ item.name }}</span>
+      <span v-if="index < num" class="mr-6" :class="{'act': actIndex === index}" style="line-height: 32px;" @click="handleClick(item, index)">{{ item.name }}</span>
     </span>
     <span v-if="props.items?.length >= num" @click="handleClick(props.items, 'other')">其他</span>
-    <recursive v-if="children" :items="children"></recursive>
+    <recursive v-if="props.items?.length && children" :items="children"></recursive>
   </div>
 </template>
 <script setup>
@@ -15,8 +15,10 @@ defineOptions({ name:'common-components-areaTree-recursive'})
 
 const num = 15
 const props = defineProps({items: Object})
+let actIndex = ref(0)
 let children = ref('')
 let currentRowType = ref(0)
+
 if (props.items && props.items.length) {
   const item = props.items[0] // 首个子级
   currentRowType.value = item.type - 0 // 当前块级数据type
@@ -25,17 +27,29 @@ if (props.items && props.items.length) {
   }
 }
 
-const handleClick = (item, btnType) => {
-  console.log(btnType, 'item', item)
-  if (btnType === 'other') {
+const handleClick = (item, index) => {
+  if (index === 'other') {
     return
   } else {
+    actIndex.value = index
     if ((item.type - 0) === 1) children.value = item.children // 国家级
     else if ((item.type - 0) > 1) { // 省级
       children.value = item.children
     }
-    console.log('children', children)
+    console.log('children', children.value)
   }
 }
-
-</script>
+</script>
+<style lang="scss" scoped>
+.act {
+  color: var(--v-primary-base);
+  // background-color: var(--default-bgc);
+}
+span {
+  cursor: pointer;
+  &:hover {
+    // color: var(--v-primary-base);
+    color: var(--v-primary-lighten1);
+  }
+}
+</style>

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

@@ -11,7 +11,7 @@
     </div>
 </template>
 <script setup>
-import areaTree from '@/components/areaTree'
+import areaTree from './areaCascader'
 import { ref } from 'vue'
 
 defineOptions({name: 'retrieval-components-cityFilter'})