feat:面板

张含笑

2025-10-28 f12c6c951191a7778393d7c8b276bd65e439dfb2

 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>