From 94778f06c563ef04d721cf6dd1e8e87bce8fe33b Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Tue, 12 Dec 2023 16:35:27 +0800
Subject: [PATCH] PGTree support edit

---
 frontend/src/components/PGTree.vue     | 31 +++++++++++++++++++++++++-
 frontend/src/views/Cluster/Cluster.vue |  2 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PGTree.vue b/frontend/src/components/PGTree.vue
index e337ff3..f320606 100644
--- a/frontend/src/components/PGTree.vue
+++ b/frontend/src/components/PGTree.vue
@@ -4,7 +4,24 @@
             <slot name="header"></slot>
         </div>
         <el-tree :data="department" :props="defaultProps" :show-checkbox="selectable" @node-click="onNodeClicked"
-            :allow-drag="allowDrag" :draggable="dragable"></el-tree>
+            :allow-drag="allowDrag" :draggable="dragable">
+            <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                    <span>{{ node.label }}</span>
+                    <span v-if="editable">
+                        <el-icon>
+                            <Plus />
+                        </el-icon>
+                        <el-icon>
+                            <EditPen />{{ console.log(node) }}
+                        </el-icon>
+                        <el-icon v-if="data.id !== 1">
+                            <Delete />
+                        </el-icon>
+                    </span>
+                </span>
+            </template>
+        </el-tree>
     </div>
 </template>
 
@@ -39,6 +56,11 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // 是否可编辑
+    editable:{
+        type: Boolean,
+        default: false,
+    },
     onNodeClicked: {
         type: Function
     }
@@ -79,4 +101,11 @@ function allowDrag() {
     justify-content: center;
     align-items: center;
 }
+
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Cluster/Cluster.vue b/frontend/src/views/Cluster/Cluster.vue
index 09a8cff..8614244 100644
--- a/frontend/src/views/Cluster/Cluster.vue
+++ b/frontend/src/views/Cluster/Cluster.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="department">
-            <PGTree>
+            <PGTree :editable="true">
                 <template v-slot:header>
                     <p>部门</p>
                 </template>
-- 
Gitee