feat:清除编辑地图数据

张含笑

2025-10-29 d95ca015de7641aba381e1c61de9dbdada085d4e

 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>