From c7320834cbb22a476f2a98cbb50d9057c05bac7d Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Tue, 28 Nov 2023 17:08:53 +0800
Subject: [PATCH] support machine el-transfer select

---
 frontend/src/views/Cluster/CreateBatch.vue | 42 +++++++++++++++++++---
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/Cluster/CreateBatch.vue b/frontend/src/views/Cluster/CreateBatch.vue
index b676ec5..ae85696 100644
--- a/frontend/src/views/Cluster/CreateBatch.vue
+++ b/frontend/src/views/Cluster/CreateBatch.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="department">
-            <PGTree>
+            <PGTree :onNodeClicked="onNodeClicked">
                 <template v-slot:header>
                     <p>部门</p>
                 </template>
@@ -16,9 +16,10 @@
                     <el-input class="ipInput" type="text" autocomplete="off"></el-input>
                 </el-form-item>
             </el-form>
-            <el-transfer class="transfer" filterable filter-placeholder="请输入关键字" :titles="['备选项', '已选项']">
+            <el-transfer class="transfer" filterable filter-placeholder="请输入关键字" :titles="['备选项', '已选项']"
+                :data="nodeMachines" v-model="selectedMachines">
                 <template #left-footer>
-                    <el-button class="" type="primary">重置</el-button>
+                    <el-button type="primary">重置</el-button>
                 </template>
                 <template #right-footer>
                     <el-button type="primary">创建</el-button>
@@ -29,13 +30,46 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { ref, toRaw, onMounted } from "vue";
+import { ElMessage } from 'element-plus';
 
 import PGTree from "@/components/PGTree.vue";
 
 onMounted(() => {
 })
 
+import { getDepartMachines } from "@/request/cluster";
+import { RespCodeOK } from "@/request/request";
+
+const nodeMachines = ref<any[]>([])
+const selectedMachines = ref<any[]>()
+
+
+function onNodeClicked(node: any) {
+    let nodeInfo = toRaw(node)
+    console.log("node clicked", nodeInfo)
+
+    getDepartMachines({
+        DepartId: nodeInfo.id,
+    }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            nodeMachines.value = []
+            console.log("machines:", resp.data)
+            resp.data.forEach((item: any) => {
+                nodeMachines.value.push({
+                    key: item.uuid,
+                    label: item.ip,
+                    disabled: false,
+                })
+            });
+        } else {
+            ElMessage.error("failed to get department machines: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get department machines:" + err.msg)
+    })
+}
+
 </script>
 
 <style lang="scss" scoped>
-- 
Gitee