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

<template>
  <div>
    <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 { computed, reactive, ref, watch } from 'vue'
import recursive from './recursive'
defineOptions({ name:'common-components-areaTree-recursive'})

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
  }
}

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) => {
  console.log('init', item.name)
  if (index === 'other') return
  else {
    actIndex.value = index
    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);
}
span {
  cursor: pointer;
  &:hover {
    color: var(--v-primary-lighten1);
  }
}
.embedded {
  padding: 4px 12px;
  background-color: #f8f8f8;
}
</style>