feat:新增/编辑文件夹

张含笑

2025-10-31 69cc010e3c7f994f302426c6f3acdc15c2b49cbb

 src/views/layerManagement/components/leftList.vue

@@ -12,7 +12,9 @@
      </div>
    </div>
    <div class="btnGroups">
      <el-button class="ztzf-button" @click="addFence">{{props.activeName === '电子围栏' ? '新增围栏' : '新增禁飞区'}}</el-button>
      <el-button class="ztzf-button" @click="addFence">{{
        props.activeName === '电子围栏' ? '新增围栏' : '新增禁飞区'
      }}</el-button>
      <el-button class="ztzf-button" @click="addFolder">新增文件夹</el-button>
      <el-button class="ztzf-button" @click="selectAll">全选</el-button>
    </div>
@@ -38,7 +40,8 @@
            <span>{{ node.label }}</span>
            <!-- 操作按钮组 -->
            <div class="tree-node-actions">
              <el-button v-if="node.level !== 1"
              <el-button
               
                icon="el-icon-location"
                type="text"
                @click="handleLocation(node)"
@@ -54,10 +57,11 @@
</template>

<script setup>
import { treeDataApi ,deleteFenceApi} from '@/api/layer/index';
import { ElMessage } from 'element-plus';
import { treeDataApi, deleteFenceApi } from '@/api/layer/index';
import { inject, onMounted } from 'vue';
const emit = defineEmits(['update:coverData', 'update:deitData','newFencesMethods']);
import EventBus from '@/utils/eventBus'
const emit = defineEmits(['update:coverData', 'update:deitData', 'newFencesMethods']);
import EventBus from '@/utils/eventBus';
const coverData = ref();
const layerParams = inject('layerParams');
const checkedKeys = ref([]); // 存储勾选的节点key
@@ -81,7 +85,7 @@
  try {
    const res = await treeDataApi();
    treeAllData.value = res.data.data;
console.log('接口数据',treeAllData.value);
    console.log('接口数据', treeAllData.value);

    setupWatch();
  } catch (error) {
@@ -99,9 +103,9 @@
      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;     
      } 
        layerParams.value.total_count = folderNode.total_count ? folderNode.total_count : 0;
        layerParams.value.total_area = folderNode.total_area ? folderNode.total_area : 0;
      }
    },
    { immediate: true }
  );
@@ -144,51 +148,72 @@

// 编辑按钮事件
const handleEdit = node => {
  checkedKeys.value = [];
  checkedNodes.value = [];
  coverData.value = [];
  if (node.data.level == 2) {
    layerParams.value.editFolder = true;
    layerParams.value.addAnEditingFolder = 2;
    if (props.activeName === '电子围栏') {
      layerParams.value.fileType = 1;
    } else if (props.activeName === '自定义禁飞区') {
      layerParams.value.fileType = 2;
    }
    emit('update:editFolder', node.data);
  } else if (node.data.level === 3) {
    checkedKeys.value = [];
    checkedNodes.value = [];
    coverData.value = [];
    layerParams.value.editNest = true;
    layerParams.value.decideWhetherToAddOrEdit = 2
      if (props.activeName === '电子围栏') {
    layerParams.value.fenceType = 1; // 电子围栏类型标识
  } else if (props.activeName === '自定义禁飞区') {
    layerParams.value.fenceType = 2; // 自定义禁飞区类型标识
    layerParams.value.decideWhetherToAddOrEdit = 2;
    if (props.activeName === '电子围栏') {
      layerParams.value.fenceType = 1; // 电子围栏类型标识
    } else if (props.activeName === '自定义禁飞区') {
      layerParams.value.fenceType = 2; // 自定义禁飞区类型标识
    }
    emit('update:deitData', node.data);
  }
  emit('update:deitData', node.data);
};

// 删除按钮事件
const handleDelete = node => {
let id = node.data.id
  deleteFenceApi(id).then(res=>{
    console.log('删除成功',res);
  })
    gettreeDataApi();
  let id = node.data.id;
  deleteFenceApi(id).then(res => {
   if (res.status === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        });
      }
  });
  gettreeDataApi();
};
// 新增围栏
const addFence = () => {
  layerParams.value.addNest = true;
   layerParams.value.decideWhetherToAddOrEdit = 1
   if (props.activeName === '电子围栏') {
  layerParams.value.decideWhetherToAddOrEdit = 1;
  if (props.activeName === '电子围栏') {
    layerParams.value.fenceType = 1; // 电子围栏类型标识
  } else if (props.activeName === '自定义禁飞区') {
    layerParams.value.fenceType = 2; // 自定义禁飞区类型标识
  }
   emit('newFencesMethods'); 
  emit('newFencesMethods');
};
// 新增文件夹
const addFolder = () => {
  layerParams.value.addFolder = true
  layerParams.value.addAnEditingFolder =1
  layerParams.value.addFolder = true;
  layerParams.value.addAnEditingFolder = 1;
  if (props.activeName === '电子围栏') {
    layerParams.value.fileType = 1;
  } else if (props.activeName === '自定义禁飞区') {
    layerParams.value.fileType = 2;
  }
};

onMounted(() => {
  gettreeDataApi();
  EventBus.on('gettreeDataApi', gettreeDataApi)
  EventBus.on('gettreeDataApi', gettreeDataApi);
});
onBeforeUnmount(()=>{
    EventBus.off('gettreeDataApi', gettreeDataApi)
})
onBeforeUnmount(() => {
  EventBus.off('gettreeDataApi', gettreeDataApi);
});
</script>

<style scoped lang="scss">
@@ -264,9 +289,8 @@
  //  }
  //}


  :deep(){
    .el-checkbox{
  :deep() {
    .el-checkbox {
      --el-checkbox-bg-color: transparent !important;
    }
  }
@@ -275,7 +299,6 @@
    justify-content: space-between;
    align-items: center;
    width: 100%;

  }

  .tree-node-actions {