城市

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

@@ -1,55 +1,125 @@
 <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 < 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="props.items?.length && children" :items="children"></recursive>
+    <div :class="{'embedded': outweigh}">
+      <template v-if="outweigh">
+        <span :class="{'act': actIndex === -1}">不限</span>
+        <!-- <span class="text666 mr-2"></span> -->
+      </template>
+      <span v-for="(item, index) in props.items" :key="item.id">
+        <span v-if="index < num" class="mx-3" :class="{'act': actIndex === index}" style="line-height: 32px;" @click="handleClick(item, index)">{{ item.name }}</span>
+      </span>
+      <template v-if="underAndEqual">
+        <!-- <span class="text666 mr-2"></span> -->
+        <span v-if="props.items?.length >= num" @click="handleClick(props.items, 'other')">其他</span>
+      </template>
+    </div>
+    <template v-if="children?.length">
+      <v-divider v-if="outweigh" class="mx-2"></v-divider>
+      <recursive ref="childRef" :defaultOpen="props.defaultOpen" :items="children" :parentId="itemId"></recursive>
+    </template>
   </div>
 </template>
 <script setup>
-import { ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import recursive from './recursive'
 defineOptions({ name:'common-components-areaTree-recursive'})
 
-const num = 15
-const props = defineProps({items: Object})
-let actIndex = ref(0)
-let children = ref('')
+const num = 14
+const childRef = ref(null)
+const props = defineProps({
+  items: Object,
+  defaultOpen: {
+    type: Number,
+    default: 3
+  },
+  parentId: {
+    type: [Number, String],
+    default: -1
+  }
+})
+// const currentRowType = computed(() => {
+//   if (props.items?.length) return props.items[0].type - 0
+//   else return 0
+// })
+let itemId = ref(0)
 let currentRowType = ref(0)
+let actIndex = ref(0)
+let currentRow = reactive({ id: -1})
+let children = ref([])
+const setRow = (item) => {
+  if (item) {
+    console.log('currentRow1', { ...item, children: null})
+    currentRow = item
+    children.value = currentRow.children
+    itemId.value = currentRow.id || 0
+    currentRowType.value = currentRow.type || 0
+  } else {
+    currentRow = { id: -1 }
+    itemId.value = -1
+    currentRowType.value = 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 init = () => {
+  itemId.value = -1
+  if (currentRowType.value < props.defaultOpen && props.items?.length) {
+    setRow(props.items[0])
+    actIndex.value = 0
+  } else {
+    setRow(null)
+  }
+  if (currentRowType.value > props.defaultOpen) {
+    actIndex.value = -1
   }
 }
 
+// 监听
+watch(
+  () => props.parentId, 
+  () => {
+    // 函数
+    init()
+  },
+  { immediate: true },
+  { deep: true }
+)
+
 const handleClick = (item, index) => {
-  if (index === 'other') {
-    return
-  } else {
+  console.log('init', item.name)
+  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.value)
+    currentRow.value = item
+    children.value = item.children
+    children.value = item.children
+    itemId.value = item.id || 0
   }
 }
+
+console.log('currentRowType', currentRowType)
+const outweigh = computed(() => (currentRowType.value > props.defaultOpen))
+const underAndEqual = computed(() => (currentRowType.value <= props.defaultOpen))
+
 </script>
 <style lang="scss" scoped>
+.text666 {
+  // color: #666666;
+  border-right: 1px solid #666666;
+}
+.text333 {
+  color: #333333;
+}
 .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);
   }
 }
+.embedded {
+  padding: 4px 12px;
+  background-color: #f8f8f8;
+}
 </style>