123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- <template>
- <div class="document-tree-container">
- <div class="document-tree-header">
- <span class="document-tree-title">题库归属</span>
- <el-button type="primary" size="small" @click="handleAddDocument">
- <el-icon><Plus /></el-icon>添加分类
- </el-button>
- </div>
- <el-tree
- ref="treeRef"
- :data="treeData"
- node-key="id"
- :props="defaultProps"
- default-expand-all
- highlight-current
- @node-click="handleNodeClick"
- >
- <template #default="{ node, data }">
- <div class="custom-tree-node">
- <div class="node-label">
- <el-icon><Folder /></el-icon>
- <span class="ml-2">{{ data.title }}</span>
- </div>
- <!-- <div class="node-actions" v-if="data.id">
- <el-button type="primary" link size="small" @click.stop="handleEdit(data)">
- <el-icon><Edit /></el-icon>
- </el-button>
- <el-button type="danger" link size="small" @click.stop="handleDelete(node, data)">
- <el-icon><Delete /></el-icon>
- </el-button>
- </div> -->
- </div>
- </template>
- </el-tree>
- </div>
- </template>
-
- <script lang="ts" setup>
- import { ref, defineProps, defineEmits } from 'vue';
- import { Plus, Folder, Edit, Delete } from '@element-plus/icons-vue';
-
- const props = defineProps({
- treeData: {
- type: Array,
- default: () => []
- }
- });
-
- const emit = defineEmits(['treeClick', 'updateDocument', 'deleteDocument']);
-
- const treeRef = ref(null);
-
- const defaultProps = {
- children: 'children',
- label: 'title'
- };
-
- // 处理节点点击
- const handleNodeClick = (data: any, node: any) => {
- // 获取当前节点的层级路径
- let currentNode = node;
- let firstLevelNode = null;
- let secondLevelNode = null;
-
- // 遍历父节点找到一级和二级节点
- while (currentNode) {
- if (currentNode.level === 1) {
- firstLevelNode = currentNode.data;
- } else if (currentNode.level === 2) {
- secondLevelNode = currentNode.data;
- }
- currentNode = currentNode.parent;
- }
-
- // 如果当前点击的是一级节点
- if (node.level === 1) {
- firstLevelNode = data;
- secondLevelNode = null;
- }
- // 如果当前点击的是二级节点
- else if (node.level === 2) {
- secondLevelNode = data;
- }
-
- emit('treeClick', {
- firstLevel: firstLevelNode,
- secondLevel: secondLevelNode,
- currentNode: data
- });
- };
-
- // 添加文档分类
- const handleAddDocument = () => {
- emit('updateDocument', 'add');
- };
-
- // 编辑文档分类
- const handleEdit = (data: any) => {
- emit('updateDocument', 'update', data);
- };
-
- // 删除文档分类
- const handleDelete = (node: any, data: any) => {
- emit('deleteDocument', data.id, () => {
- // 回调函数,删除成功后可以执行
- });
- };
-
- defineExpose({
- treeRef
- });
- </script>
-
- <style lang="scss" scoped>
- .document-tree-container {
- height: 100%;
- display: flex;
- flex-direction: column;
- }
-
- .document-tree-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
- }
-
- .document-tree-title {
- font-size: 16px;
- font-weight: bold;
- }
-
- .custom-tree-node {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-right: 8px;
- }
-
- .node-label {
- display: flex;
- align-items: center;
- flex: 1;
- min-width: 0;
- position: relative;
-
- .ml-2 {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- flex: 1;
- }
- }
-
-
- .node-actions {
- display: none;
- }
-
- .custom-tree-node:hover .node-actions {
- display: flex;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- </style>
|