From e33cffbfe7c55ac7202a14891a593bbfc651d638 Mon Sep 17 00:00:00 2001
From: chaos-zhu <ggchaos1022@gmail.com>
Date: Sun, 4 Aug 2024 04:59:22 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=BC=98=E5=8C=96=E5=AE=9E?=
 =?UTF-8?q?=E4=BE=8B=E9=80=89=E6=8B=A9=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/store/index.js                        |  5 +--
 web/src/views/server/components/host-form.vue |  5 ++-
 .../views/server/components/host-table.vue    | 41 ++++++++++---------
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/web/src/store/index.js b/web/src/store/index.js
index 76201af..51ebd27 100644
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@@ -80,7 +80,7 @@ const useStore = defineStore({
         path: '/clients',
         forceNew: true,
         reconnectionDelay: 5000,
-        reconnectionAttempts: 3
+        reconnectionAttempts: 1000
       })
       this.HostStatusSocket = socketInstance
       socketInstance.on('connect', () => {
@@ -91,8 +91,7 @@ const useStore = defineStore({
           // console.log(data)
           this.hostList.forEach(item => {
             const { host } = item
-            if (data[host] === null) return
-            return Object.assign(item, { monitorData: data[host] })
+            return Object.assign(item, { monitorData: Object.freeze(data[host]) })
           })
         })
         socketInstance.on('token_verify_fail', (message) => {
diff --git a/web/src/views/server/components/host-form.vue b/web/src/views/server/components/host-form.vue
index d8ae796..1554af1 100644
--- a/web/src/views/server/components/host-form.vue
+++ b/web/src/views/server/components/host-form.vue
@@ -337,9 +337,10 @@ let sshList = computed(() => $store.sshList)
 
 const setDefaultData = () => {
   if (!defaultData.value) return
-  let { host } = defaultData.value
+  // eslint-disable-next-line no-unused-vars
+  let { host, monitorData, ...rest } = defaultData.value
   oldHost.value = host
-  Object.assign(hostForm.value, { ...defaultData.value })
+  Object.assign(hostForm.value, { host, ...rest })
 }
 
 const setBatchDefaultData = () => {
diff --git a/web/src/views/server/components/host-table.vue b/web/src/views/server/components/host-table.vue
index c964ce5..2c12f7e 100644
--- a/web/src/views/server/components/host-table.vue
+++ b/web/src/views/server/components/host-table.vue
@@ -1,6 +1,11 @@
 <template>
   <el-card shadow="always" class="host_card">
-    <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange">
+    <el-table
+      ref="tableRef"
+      :data="hosts"
+      @select="handleSelectionChange"
+      @select-all="handleSelectionChange"
+    >
       <el-table-column type="selection" />
       <el-table-column prop="index" label="序号" width="100px" />
       <el-table-column label="名称">
@@ -27,7 +32,6 @@
             content="请先配置ssh连接信息"
             placement="left"
           >
-            <!-- <el-button type="warning">连接终端</el-button> -->
             <el-button type="success" :disabled="!row.isConfig" @click="handleSSH(row)">连接终端</el-button>
           </el-tooltip>
           <el-button type="primary" @click="handleUpdate(row)">修改</el-button>
@@ -39,7 +43,7 @@
 </template>
 
 <script setup>
-import { ref, computed, getCurrentInstance, reactive, watch } from 'vue'
+import { ref, computed, getCurrentInstance, nextTick, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const { proxy: { $api, $router, $tools } } = getCurrentInstance()
@@ -57,21 +61,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update-list', 'update-host', 'select-change',])
 
-let tableData = ref([])
-
-const updateTableData = () => {
-  console.log('refresh server table data')
-  tableData.value = props.hosts?.map(item => {
-    let { monitorData, ...rest } = item
-    return { ...rest, connect: monitorData?.connect || false }
-  }) || []
-}
-
-const connectValues = computed(() => {
-  return props.hosts.map(item => item.monitorData?.connect).join(',')
-})
-// 监听到连接状态变化，刷新列表
-watch(connectValues, updateTableData)
+let tableRef = ref(null)
 
 const hostInfo = computed(() => props.hostInfo || {})
 // const host = computed(() => hostInfo.value?.host)
@@ -117,9 +107,20 @@ const handleSSH = async ({ host }) => {
   $router.push({ path: '/terminal', query: { host } })
 }
 
+let selectHosts = ref([])
+// 由于table数据内部字段更新后table组件会自动取消勾选,所以这里需要手动set勾选
+watch(() => props.hosts, () => {
+  // console.log('hosts change')
+  nextTick(() => {
+    selectHosts.value.forEach(row => {
+      tableRef.value.toggleRowSelection && tableRef.value.toggleRowSelection(row, true)
+    })
+  })
+}, { immediate: true, deep: true })
+
 const handleSelectionChange = (val) => {
-  // console.log(val)
-  // selectHosts.value = val
+  // console.log('select: ', val)
+  selectHosts.value = val
   emit('select-change', val)
 }