区域树形

src/api/common/index.js

@@ -81,6 +81,13 @@ export const getPositionTreeData = async (params) => {
   })
 }
 
+// 获取区域树形
+export const getAreaTreeData = async () => {
+  return await request.get({
+    url: '/app-api/menduner/system/area/get/tree'
+  })
+}
+
 // 获取行业树形
 export const getIndustryTreeData = async (params) => {
   return await request.get({

src/components/areaTree/index.vue

@@ -0,0 +1,22 @@
+<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 }) => {
+  console.log(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

@@ -0,0 +1,40 @@
+<template>
+  <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 < 15" class="mr-5" @click="handleClick(item)">{{ item.name }}</span>
+    </span>
+    <span v-if="props.items?.length >= 15" @click="handleClick(props.items, 'other')">其他</span>
+    <recursive v-if="children" :items="children"></recursive>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import recursive from './recursive'
+defineOptions({ name:'common-components-areaTree-recursive'})
+
+const props = defineProps({items: Object})
+let children = ref('')
+let currentRowType = ref(0)
+if (props.items && props.items.length) {
+  const item = props.items[0] // 首个子级
+  currentRowType.value = item.type - 0 // 当前块级数据type
+  if (currentRowType.value < 2 && item.children && item.children.length) { // 展开子级(暂时默认展示到国家级)
+    children.value = item.children
+  }
+}
+
+const handleClick = (item, btnType) => {
+  console.log(btnType, 'item', item)
+  if (btnType === 'other') {
+    return
+  } else {
+    if ((item.type - 0) === 1) children.value = item.children // 国家级
+    else if ((item.type - 0) > 1) { // 省级
+      children.value = item.children
+    }
+    console.log('children', children)
+  }
+}
+
+</script>

src/hooks/web/useDictionaries.js

@@ -1,4 +1,4 @@
-import { getDictData, getIndustryListData, getAreaListData, getPositionTreeData } from '@/api/common/index'
+import { getDictData, getIndustryListData, getAreaListData, getPositionTreeData, getAreaTreeData } from '@/api/common/index'
 // 定义对应的api
 // const DICT_CITY_API = {
 //   menduner_exp_type: getDictData
@@ -23,6 +23,7 @@ export const getDict = (type, params, apiType = 'dict') => {
       const apiFn = {
         dict: getDictData,
         positionTreeData: getPositionTreeData, // 职位tree
+        areaTreeData: getAreaTreeData, // 区域tree
         industryList: getIndustryListData,
         areaList: getAreaListData
       }

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

@@ -0,0 +1,22 @@
+<!-- 检索列表页 - 公司检索 -->
+<template>
+    <div>
+      <v-tabs v-model="tab" align-tabs="start" color="primary" @click="tabClick">
+        <v-tab :value="1">城市和区域</v-tab>
+      </v-tabs>
+      <v-window v-model="tab" class="mt-3">
+        <v-window-item :value="1">
+          <areaTree></areaTree>
+        </v-window-item>
+      </v-window>
+    </div>
+</template>
+<script setup>
+import areaTree from '@/components/areaTree'
+import { ref } from 'vue'
+
+defineOptions({name: 'retrieval-components-cityFilter'})
+const tab = ref(1)
+const tabClick = () => {
+}
+</script>

src/views/recruit/position/index.vue

@@ -1,10 +1,14 @@
 <!-- 检索列表页 - 职位检索 -->
 <template>
   <div class="default-width">
-    <div>
-      检索
-    </div>
-    <div>筛选条件</div>
+    <div style="width: 100%; height: 20px;"></div>
+    <v-card>
+      <div class="stickyBox my-5">
+        <headSearch></headSearch>
+      </div>
+      <!-- 城市和区域 -->
+      <cityFilter class="mx-5 mb-5"></cityFilter>
+    </v-card>
     <div>
       <div>
         左侧列表
@@ -14,6 +18,8 @@
   </div>
 </template>
 <script setup>
+import cityFilter from './components/cityFilter'
+import headSearch from '@/components/headSearch'
 import { useRoute } from 'vue-router'
 defineOptions({name: 'retrieval-position-page'})
 const route = useRoute()