From fe42ca706295cebbf654b6f4b1177a3443dd3d90 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Thu, 23 Nov 2023 14:36:31 +0800
Subject: [PATCH] add machines list in batch detail page

---
 frontend/src/views/Batch/Batch.vue  | 10 +++--
 frontend/src/views/Batch/Detail.vue | 59 +++++++++++++++++++++++++++--
 2 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/Batch/Batch.vue b/frontend/src/views/Batch/Batch.vue
index 8dd41ea..ec6983f 100644
--- a/frontend/src/views/Batch/Batch.vue
+++ b/frontend/src/views/Batch/Batch.vue
@@ -22,7 +22,7 @@
             <template v-slot:content>
                 <el-table-column label="批次名称">
                     <template #default="scope">
-                        <router-link :to="$route.path +'/'+ scope.row.ID">
+                        <router-link :to="'/batch/detail/' + scope.row.ID">
                             {{ scope.row.name }}
                         </router-link>
                     </template>
@@ -51,19 +51,20 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import PGTable from "@/components/PGTable.vue";
 import { ElMessage } from 'element-plus';
 
 import { RespCodeOK } from "@/request/request";
-import {getBatches} from '@/request/batch';
+import { getBatches } from '@/request/batch';
 
 const batches = ref([])
 const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
 
-getBatches({
+onMounted(() => {
+    getBatches({
         page: currentPage.value,
         size: pageSize.value,
     }).then((resp: any) => {
@@ -76,6 +77,7 @@ getBatches({
     }).catch((err: any) => {
         ElMessage.error("failed to get batch info:" + err.msg)
     })
+})
 
 </script>
 
diff --git a/frontend/src/views/Batch/Detail.vue b/frontend/src/views/Batch/Detail.vue
index a567aa7..bb76d50 100644
--- a/frontend/src/views/Batch/Detail.vue
+++ b/frontend/src/views/Batch/Detail.vue
@@ -1,9 +1,62 @@
 <template>
-    <p>batch detail of {{ $route.params.id }}</p>
+    <PGTable :data="machines" title="机器列表" :showSelect="showSelect" :total="total" :currentPage="currentPage">
+        <template v-slot:action>
+            <el-dropdown>
+                <el-button type="primary">
+                    操作 <el-icon>
+                        <ArrowDown />
+                    </el-icon>
+                </el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item>
+                            <el-button>
+                                rpm下发
+                            </el-button>
+                        </el-dropdown-item>
+                        <el-dropdown-item>
+                            <el-button>
+                                rpm卸载
+                            </el-button>
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </template>
+        <template v-slot:content>
+            <el-table-column label="ip">
+                <template v-slot="data">
+                    <span title="查看机器详情">
+                        {{ data.row.ip }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="cpu" label="cpu">
+            </el-table-column>
+            <el-table-column label="状态">
+                <template #default="scope">
+                    <state-dot :state="scope.row.state"></state-dot>
+                </template>
+            </el-table-column>
+            <el-table-column prop="systeminfo" label="系统">
+            </el-table-column>
+        </template>
+    </PGTable>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
+import PGTable from "@/components/PGTable.vue";
+import StateDot from "@/components/StateDot.vue";
+
+
+// 机器列表
+const showSelect = ref(true)
+const machines = ref([])
+const currentPage = ref(1)
+// const pageSize = ref(10)
+const total = ref(0)
 </script>
 
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
-- 
Gitee