资源管理1.0(树结构）

src/views/rms/components/locationaTree.vue

@@ -0,0 +1,134 @@
+<template>
+    <div :style="{ height: String(height) + 'px' }" class="tree">
+        <div class="title"><span>地址树</span><span><a-icon type="redo" @click="getTreeData"
+                    style="float: right;margin-right: 20px;" /></span></div>
+        <div class="tree-border"></div>
+        <div class="tree-content">
+            <div v-if="isLoading" class="example">
+                <a-spin tip="加载中..."></a-spin>
+            </div>
+            <a-tree default-expand-all :tree-data="treeData" @select="onSelect" v-if="treeData.length > 0 && !isLoading">
+                <template #title="{ key: treeKey, title }">
+                    <span>{{ title }}</span>
+                </template>
+            </a-tree>
+            <a-empty v-if="treeData.length === 0 && !isLoading" />
+        </div>
+    </div>
+</template>
+<script>
+import { getAction } from '@/api/manage'
+export default {
+    name: 'locationaTree',
+    props: {
+        // 图表高度
+        height: {
+            type: Number,
+            default: 530
+        },
+    },
+    data() {
+        return {
+            showLine: true,
+            showIcon: false,
+            treeData: [],
+            getTreeUrl: '/rms/rmsLocation/getTree',
+            isLoading: false,
+        };
+    },
+    mounted() {
+        //生成的时候默认请求树结构数据
+        this.getTreeData();
+    },
+    methods: {
+        // onSelect函数，当节点被选中时调用
+        onSelect(selectedKeys, info) {
+            if (selectedKeys.length === 0) {
+                this.$emit('onSelect', []);
+                return;
+            }
+            const selectedKey = selectedKeys[0];
+            // 查找选中的节点
+            const findNode = (key, nodes) => {
+                for (let node of nodes) {
+                    if (node.key === key) {
+                        return node;
+                    }
+                    if (node.children) {
+                        const found = findNode(key, node.children);
+                        if (found) {
+                            return found;
+                        }
+                    }
+                }
+                return null;
+            };
+            const selectedNode = findNode(selectedKey, this.treeData);
+            const childKeys = this.collectChildKeys(selectedNode);
+            childKeys.push(selectedKey);
+            //回调到父组件
+            this.$emit('onSelect', childKeys);
+        },
+        collectChildKeys(node, keys = []) {
+            if (!node) {
+                return keys;
+            }
+            // 如果节点有children，递归遍历它们
+            if (node.children && node.children.length > 0) {
+                node.children.forEach(child => {
+                    keys.push(child.key);
+                    this.collectChildKeys(child, keys);
+                });
+            }
+            return keys;
+        },
+        getTreeData() {
+            this.isLoading = true;
+            getAction(this.getTreeUrl, {}).then(res => {
+                if (res.success) {
+                    this.isLoading = false;
+                    this.treeData = res.result;
+                }
+            });
+        },
+    },
+};
+</script>
+<style scoped>
+.tree {
+    width: 100%;
+    height: 500px;
+    padding: 10px;
+    position: relative;
+    z-index: 999;
+
+    .title {
+        line-height: 30px;
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+
+    /* 树边框 */
+    .tree-border {
+        border-top: 1px solid #cdcdcd;
+        width: 80%;
+    }
+
+    .tree-content {
+        height: 100%;
+        overflow: auto;
+        padding: 10px;
+
+        .example {
+            text-align: center;
+            border-radius: 4px;
+            margin-bottom: 20px;
+            padding: 30px 50px;
+            margin: 20px 0;
+            top: 50%;
+            position: relative;
+        }
+    }
+}
+</style>