From f12c6c951191a7778393d7c8b276bd65e439dfb2 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 28 Oct 2025 17:29:24 +0800
Subject: [PATCH] feat:面板
---
src/views/layerManagement/components/leftList.vue | 95 ++++++++++++++++++++++++++++++++++++++---------
1 files changed, 77 insertions(+), 18 deletions(-)
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index f55a09a..bbff123 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -12,25 +12,39 @@
</div>
</div>
<div class="btnGroups">
- <el-button class="ztzf-button">新增围栏</el-button>
- <el-button class="ztzf-button">新增文件夹</el-button>
+ <el-button class="ztzf-button" @click="addFence">新增围栏</el-button>
+ <el-button class="ztzf-button" @click="addFolder">新增文件夹</el-button>
<el-button class="ztzf-button" @click="selectAll">全选</el-button>
</div>
<div class="tableListBox">
- <el-tree
- class="ztzf-el-tree"
- ref="treeRef"
- v-model="checkedKeys"
- :data="treeData"
- show-checkbox
- node-key="id"
- default-expand-all
- @check="handleCheck"
- :props="{
- label: 'name',
- children: 'children',
- }"
- />
+ <el-tree
+ class="ztzf-el-tree"
+ ref="treeRef"
+ v-model="checkedKeys"
+ :data="treeData"
+ show-checkbox
+ node-key="id"
+ default-expand-all
+ @check="handleCheck"
+ :props="{
+ label: 'name',
+ children: 'children',
+ }"
+>
+ <!-- 自定义节点内容 -->
+ <template #default="{ node }">
+ <div class="tree-node">
+ <!-- 节点名称 -->
+ <span>{{ node.label }}</span>
+ <!-- 操作按钮组 -->
+ <div class="tree-node-actions">
+ <el-button icon="el-icon-location" type="text" @click="handleLocation(node)"></el-button>
+ <el-button icon="el-icon-edit" type="text" @click="handleEdit(node)"></el-button>
+ <el-button icon="el-icon-delete" type="text" @click="handleDelete(node)"></el-button>
+ </div>
+ </div>
+ </template>
+</el-tree>
</div>
</div>
</template>
@@ -58,7 +72,7 @@
try {
const res = await treeDataApi();
treeAllData.value = res.data.data;
- // console.log('接口获取数据', treeAllData.value);
+ console.log('接口获取数据', treeAllData.value);
setupWatch();
} catch (error) {
console.error('获取数据失败:', error);
@@ -109,7 +123,33 @@
}
}
};
+// 定位按钮事件
+const handleLocation = (node) => {
+ console.log('定位操作，节点：', node);
+
+};
+
+// 编辑按钮事件
+const handleEdit = (node) => {
+ console.log('编辑操作，节点：', node.data);
+ emit('update:coverData', [node.data]);
+
+};
+
+// 删除按钮事件
+const handleDelete = (node) => {
+ console.log('删除操作，节点：', node.data);
+
+};
+// 新增围栏
+const addFence =()=>{
+
+}
+// 新增文件夹
+const addFolder =()=>{
+
+}
onMounted(() => {
gettreeDataApi();
});
@@ -126,7 +166,7 @@
width: 392px;
overflow: hidden;
- background: rgba(0, 0, 0, 0.51);
+ background: rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 8px;
padding: 16px 12px;
}
@@ -179,5 +219,24 @@
display: flex;
}
.tableListBox {
+.tree-node {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
}
+
+.tree-node-actions {
+ display: flex;
+ gap: 8px; // 按钮之间的间距
+ button {
+ padding: 0; // 清除默认内边距
+ color: #fff; // 按钮图标颜色
+ &:hover {
+ color: #409eff; // hover 时的颜色
+ }
+ }
+}
+}
+
</style>
--
Gitblit v1.9.3