From 20cfb19d192127e304a081ceb60ca9052f813bf7 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 15 一月 2025 13:32:43 +0800
Subject: [PATCH] U 修改完成
---
src/components/HdwTree/index.vue | 138 ++++++++++++++++++++++++++++------------------
1 files changed, 84 insertions(+), 54 deletions(-)
diff --git a/src/components/HdwTree/index.vue b/src/components/HdwTree/index.vue
index 2cf46ce..2b12e17 100644
--- a/src/components/HdwTree/index.vue
+++ b/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>
--
Gitblit v1.9.1