U 修改完成

he wei

2025-01-15 20cfb19d192127e304a081ceb60ca9052f813bf7

 src/components/HdwTree/index.vue

@@ -1,60 +1,90 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { getAreaTreeApi } from '@/api/area';
import { formatAreaTree } from '@/utils/tree';
<script setup>
   import { ref, onMounted, reactive, nextTick } from "vue";
   import { getAreaTreeApi } from "@/api/area";
   import { formatAreaTree } from "@/utils/tree";

export default defineComponent({
  name: 'HdwTree',
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data: []
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    async getAreaTree() {
      try {
        const res = await getAreaTreeApi();
        let data = [];
        if (res.code === 1 && res.data) {
          data = res.data2;
        }
        const treeList = [];
        for (let i = 0; i < data.length; i++) {
          formatAreaTree(data[i], treeList);
        }
        console.log(data);
        console.log(treeList);
        this.data = treeList;
      } catch (e) {
        console.log(e);
      }
    }
  },
  mounted() {
    this.getAreaTree();
  }
});
   const emit = defineEmits(["itemClick"]);
   const defaultProps = reactive({
      children: "children",
      label: "label",
   });

   const treeRef = ref();
   const data = ref([]);
   const defaultSelect = ref([1]);

   onMounted(() => {
      getAreaTree();
   });

   function handleNodeClick(data) {
      console.log(data);
      emit("itemClick", data);
   }

   async function getAreaTree() {
      try {
         const res = await getAreaTreeApi();
         let _data = [];
         if (res.code === 1 && res.data) {
            _data = res.data2;
         }
      console.log('_data', _data, '=============');
      
         const treeList = [];
      let ids = _data.map((v) => v.id);
         for (let i = 0; i < _data.length; i++) {
            formatAreaTree(_data[i], ids, treeList);
         }
         // console.log(_data, 'data');
         console.log(treeList, "treeList");
         data.value = treeList;
         await nextTick();
         // defaultSelect.value = [treeList[0].id]
         handleNodeClick(treeList[0]);
      } catch (e) {
         console.log(e);
      }
   }

   const collapseAll = () => {
      const nodes = treeRef.value.store.nodesMap;
      Object.values(nodes).forEach((node) => {
         if (node.level > 0) {
            // 排除根节点
            node.expanded = false;
         }
      });
      treeRef.value.store.updateExpandedKeys(); // 更新展开状态
   };

   const expandAll = () => {
      const nodes = treeRef.value.store.nodesMap;
      Object.values(nodes).forEach((node) => {
         if (node.level > 0) {
            // 排除根节点
            node.expanded = true;
         }
      });
      treeRef.value.store.updateExpandedKeys(); // 更新展开状态
   };
</script>

<template>
  <el-scrollbar>
    <el-tree
        style="max-width: 600px"
        :data="data"
        :props="defaultProps"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
    />
  </el-scrollbar>
   <el-scrollbar>
    <el-button type="warning" size="small" @click="collapseAll">折叠全部</el-button>
    <el-button type="primary" size="small" @click="expandAll">展开全部</el-button>
      <el-tree
         style="max-width: 600px"
         ref="treeRef"
         :data="data"
         :props="defaultProps"
         node-key="id"
         :expand-on-click-node="false"
         :default-checked-keys="defaultSelect"
         @node-click="handleNodeClick"
      />
   </el-scrollbar>
</template>

<style scoped lang="scss">

</style>
<style scoped lang="scss"></style>