hi-ucs/front/src/views/instructionManual/components/abilityDocTree.vue

<template>
  <div class="list-box">
    <div class="list-item" v-for="(item, i) in newDataList" :key="i" @click.stop="showChildren(item)">
      <a-tooltip placement="top" :title="item.title" arrow-point-at-center>
        <div :class="[
          newClickData.title === item.title ? 'select' : '',
          level === 1 ? 'parent' : '',
          judgeLeaf(item) ? 'leaf' : '',
        ]" class="list-text">
          {{ item.title }}
          <DownOutlined v-show="!item.show && !judgeLeaf(item)" />
          <UpOutlined v-show="item.show && !judgeLeaf(item)" />
        </div>
      </a-tooltip>
      <div style="margin-left: 10px" v-if="!judgeLeaf(item) && item.show">
        <abilityDocTree :dataList="item.children" @tree-click="handleTreeItem" :clickData="newClickData"
          :level="newLevel + 1"></abilityDocTree>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  defineComponent,
  onMounted,
  ref,
  watch,
  defineProps,
  defineEmits,
} from 'vue'
import { getDevelopDocTree } from '@/api/home'
import { message } from 'ant-design-vue'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
  level: {
    type: Number,
    default: 1,
  },
  clickData: {
    type: Object,
    default: () => {
      ''
    },
  },
})

// 数组
const newDataList = ref(props.dataList)
// 级别
const newLevel = ref(props.level)

const newClickData = ref(props.clickData)

// 判断是不是叶子节点
const judgeLeaf = (item) => {
  if (item.children && item.children.length > 0) {
    return false
  } else {
    return true
  }
}

const showChildren = (item) => {
  if (!(item.children && item.children.length > 0)) {
    if (newClickData.value.title !== '') {
      handleTreeItem(item)
    } else {
      handleTreeItem({ title: '' })
    }
  }
  if (item.children && item.children.length > 0) {
    item.show = !item.show
  }
}

watch(
  () => props.dataList,
  (val) => {
    if (val) {
      newDataList.value = val
    }
  }
)

watch(
  () => props.clickData,
  (val) => {
    if (val) {
      newClickData.value = val
    }
  }
)

const emit = defineEmits(['treeClick'])
const handleTreeItem = (item) => {
  emit('tree-click', item)
}
</script>
<style lang="less" scoped>
.list-text {
  font-size: 16px;
  color: #333;
  padding: 10px 0;
  cursor: pointer;
  padding-left: 10px;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  /*文本不会换行*/
  white-space: nowrap;
  /*当文本溢出包含元素时，以省略号表示超出的文本*/
  text-overflow: ellipsis;

  &:hover {
    color: #0058e1;
    cursor: pointer;
  }
}

.parent {
  margin-bottom: 10px;
  background: rgba(0, 135, 225, 0.1);
  color: #333;

  &:hover {
    color: #fff;
    background: #0058e1;
    cursor: pointer;
  }
}

.leaf {
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

.select {
  color: #0058e1;
  font-weight: 600;
  cursor: pointer;
}
</style>