feat:编辑文件夹清除区域

张含笑

2025-11-07 f754a1f2f47ea24c9c74e54c011fb2e33aaa72c8

 src/views/layerManagement/components/leftList.vue

@@ -2,7 +2,7 @@
  <div class="table-overlay">
    <div class="searchBox">
      <el-input
        class="ztzf-input inputName"
        class="ztzf-layer-input inputName"
        v-model="formData.dkbh"
        placeholder="输入名称模糊搜索"
      ></el-input>
@@ -28,17 +28,22 @@
        <el-button class="ztzf-button"> 上传 </el-button>
      </el-upload>

      <template v-if="activeName === '自定义禁飞区'">
      <!-- <template v-if="activeName === '自定义禁飞区'">
        <template v-if="failuresInfo.length">
          <el-button class="ztzf-button" @click="synchronize"> 继续同步 </el-button>
          <el-button class="ztzf-button" @click="failuresDel"> 取消同步 </el-button>
        </template>
        <el-button v-else class="ztzf-button" @click="synchronize"> 同步 </el-button>
      </template>
      </template> -->

      <el-button class="ztzf-button" @click="selectAll">全选</el-button>
    </div>
    <div class="tableListBox">
    <div
      class="tableListBox"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      element-loading-text="加载中..."
    >
      <el-tree
        class="ztzf-el-tree"
        :class="{ isTheTerritory: activeName === '国土空间规划' }"
@@ -65,11 +70,11 @@
            <div class="tree-node-actions">
              <el-button
                link
                icon="el-icon-location"
               
                @click.stop="handleLocation(node)"
              ></el-button>
              <el-button icon="el-icon-edit" link @click.stop="handleEdit(node)"></el-button>
              <el-button icon="el-icon-delete" link @click.stop="handleDelete(node)"></el-button>
              >定位</el-button>
              <el-button link @click.stop="handleEdit(node)">编辑</el-button>
              <el-button link @click.stop="handleDelete(node)">删除</el-button>
            </div>
          </div>
        </template>
@@ -106,17 +111,21 @@
  dkbh: '',
  patchesName: '',
});
const loading = ref(false);
const treeData = ref([]);
const treeAllData = ref([]);
// 获取数据
const gettreeDataApi = async () => {
  try {
    loading.value = true;
    const res = await treeDataApi();
    treeAllData.value = res.data.data;
    console.log('接口数据', treeAllData.value);
 
    setupWatch();
  } catch (error) {
    console.error('获取数据失败:', error);
  } finally {
    loading.value = false;
  }
};

@@ -161,9 +170,9 @@
    } else {
      // 全选：仅设置 level 3 节点的 id
      treeRef.value.setCheckedKeys(allFenceKeys);
      checkedKeys.value = allFenceKeys; // 同步更新 checkedKeys
      checkedNodes.value = allFenceNodes; // 存储 level 3 数据
      coverData.value = allFenceNodes; // 同步 coverData
      checkedKeys.value = allFenceKeys;
      checkedNodes.value = allFenceNodes;
      coverData.value = allFenceNodes;
    }
    emit('update:coverData', coverData.value);
  }
@@ -175,15 +184,13 @@
  coverData.value = [];
  if (node.data.level === 2) {
    const folderChildren = node.data.children || [];
    const childrenIds = folderChildren.map(child => child.id);
    treeRef.value.setCheckedKeys(childrenIds);
    checkedKeys.value = childrenIds;
    checkedNodes.value = folderChildren;
    // const childrenIds = folderChildren.map(child => child.id);
    // treeRef.value.setCheckedKeys(childrenIds);
    // checkedKeys.value = childrenIds;
    // checkedNodes.value = folderChildren;
    coverData.value = folderChildren;

    emit('update:coverData', coverData.value);
  } else {
    console.log('node', node.data);
    emit('update:coverData', [node.data]);
  }
};
@@ -351,7 +358,7 @@
  left: 0;
  height: 95%;
  z-index: 99;
  width: 392px;
  width: 382px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px 8px 8px 8px;
@@ -413,16 +420,10 @@
  }
}
.tableListBox {
  //:deep(.el-tree-node__content) {
  //  // 奇数行背景色
  //  &:nth-child(odd) {
  //    background-color: rgba(13, 43, 56, 0.5) !important;
  //  }
  //  // 偶数行背景色
  //  &:nth-child(even) {
  //    background-color: rgba(30, 45, 81, 0.5) !important;
  //  }
  //}
  :deep(.el-tree-node__content) {
  height: 38px !important;
  line-height: 38px !important;
  }
  overflow-y: scroll;
  height: 0;
  flex-grow: 1;
@@ -448,10 +449,11 @@

  .tree-node-actions {
    display: flex;
    gap: 8px; // 按钮之间的间距
    // gap: 8px; // 按钮之间的间距
    button {
      padding: 0; // 清除默认内边距
      color: #fff; // 按钮图标颜色
      // color: #fff; // 按钮图标颜色
       color: #409eff;
      &:hover {
        color: #409eff; //  hover 时的颜色
      }