148 lines
2.9 KiB
Vue
148 lines
2.9 KiB
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>
|