From d95ca015de7641aba381e1c61de9dbdada085d4e Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 29 Oct 2025 14:02:56 +0800
Subject: [PATCH] feat:清除编辑地图数据
---
src/views/layerManagement/components/leftList.vue | 124 +++++++++++++++++++++++++++++++---------
1 files changed, 95 insertions(+), 29 deletions(-)
diff --git a/src/views/layerManagement/components/leftList.vue b/src/views/layerManagement/components/leftList.vue
index f55a09a..ba1a79e 100644
--- a/src/views/layerManagement/components/leftList.vue
+++ b/src/views/layerManagement/components/leftList.vue
@@ -12,8 +12,8 @@
</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">
@@ -30,16 +30,38 @@
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.stop="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>
<script setup>
import { treeDataApi } from '@/api/layer/index';
-import { onMounted } from 'vue';
-const emit = defineEmits(['update:coverData']);
+import { inject, onMounted } from 'vue';
+const emit = defineEmits(['update:coverData', 'update:deitData']);
const coverData = ref();
+const layerParams = inject('layerParams');
+const checkedKeys = ref([]); // 存储勾选的节点key
+const treeRef = ref(null); // 获取tree实例
+const checkedNodes = ref([]); // 存储勾选的节点数据
const props = defineProps(['activeName']);
const formData = {
isPush: undefined,
@@ -58,58 +80,85 @@
try {
const res = await treeDataApi();
treeAllData.value = res.data.data;
- // console.log('接口获取数据', treeAllData.value);
+
setupWatch();
} catch (error) {
console.error('获取数据失败:', error);
}
};
+
const setupWatch = () => {
watch(
() => props.activeName,
newVal => {
const matchedCategory = treeAllData.value.find(item => item.name === newVal);
treeData.value = matchedCategory.children;
+
+ if (treeData.value && treeData.value.length > 0) {
+ const folderNode = treeData.value[0];
+ // 赋值给 layerParams
+ layerParams.value.total_count = folderNode.total_count ?folderNode.total_count :0;
+ layerParams.value.total_area = folderNode.total_area ? folderNode.total_area :0;
+ }
},
{ immediate: true }
);
};
-const checkedKeys = ref([]); // 存储勾选的节点key
-const treeRef = ref(null); // 获取tree实例
-
-const checkedNodes = ref([]); // 存储勾选的节点数据
-
const handleCheck = (checkedNodesData, checkedKeysData) => {
+ const filteredNodes = checkedKeysData.checkedNodes.filter(node => node.level === 3);
checkedNodes.value = checkedNodesData.checkedNodes;
-
- coverData.value = checkedKeysData.checkedNodes;
-
+ checkedKeys.value = filteredNodes.map(node => node.id);
+ coverData.value = filteredNodes;
emit('update:coverData', coverData.value);
- // console.log('选中的节点数据:', checkedKeysData);
};
// 全选方法
const selectAll = () => {
if (treeRef.value) {
- // 获取所有节点的key
- const allKeys = treeData.value.flatMap(item => [
- item.id,
- ...item.children.map(child => child.id),
- ]);
+ const allFenceKeys = treeData.value.flatMap(
+ folder => folder.children.map(fence => fence.id) // folder 是 level 2，children 是 level 3
+ );
- if (checkedKeys.value.length === allKeys.length) {
- // 如果已经全选，则取消全选
+ const allFenceNodes = treeData.value.flatMap(folder => folder.children);
+ if (checkedKeys.value.length === allFenceKeys.length) {
+ // 取消全选：清空 keys 和数据
treeRef.value.setCheckedKeys([]);
+ checkedKeys.value = [];
checkedNodes.value = [];
+ coverData.value = [];
} else {
- // 否则全选
- treeRef.value.setCheckedKeys(allKeys);
- // 获取所有节点数据
- checkedNodes.value = treeData.value.flatMap(item => [ ...item.children]);
- console.log('所有数据', checkedNodes.value);
+ // 全选：仅设置 level 3 节点的 id
+ treeRef.value.setCheckedKeys(allFenceKeys);
+ checkedKeys.value = allFenceKeys; // 同步更新 checkedKeys
+ checkedNodes.value = allFenceNodes; // 存储 level 3 数据
+ coverData.value = allFenceNodes; // 同步 coverData
}
+ emit('update:coverData', coverData.value);
}
};
+// 定位按钮事件
+const handleLocation = node => {
+ console.log('定位操作，节点：', node);
+};
+// 编辑按钮事件
+const handleEdit = node => {
+ checkedKeys.value = [];
+ checkedNodes.value = [];
+ coverData.value = [];
+ layerParams.value.editNest = true;
+ emit('update:deitData', node.data);
+};
+
+// 删除按钮事件
+const handleDelete = node => {
+ console.log('删除操作，节点：', node.data);
+};
+// 新增围栏
+const addFence = () => {
+ layerParams.value.addNest = true;
+};
+// 新增文件夹
+const addFolder = () => {};
onMounted(() => {
gettreeDataApi();
});
@@ -124,9 +173,8 @@
height: 95%;
z-index: 99;
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 +227,23 @@
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