✨ 优化实例选择逻辑

server/app/socket/clients.js

@@ -101,7 +101,7 @@ module.exports = (httpServer) => {
         if (timer) clearInterval(timer)
         clientSockets.forEach(socket => socket.close && socket.close())
         clientSockets = null
-        clientsData = null
+        clientsData = {}
         consola.info('clients-socket 连接断开: ', socket.id)
       })
     })

web/src/views/server/components/host-form.vue

@@ -12,14 +12,14 @@
   >
     <div v-if="isBatchModify" class="batch_info">
       <el-alert title="正在进行批量修改操作,留空默认保留原值" type="warning" :closable="false" />
-      <!-- <el-tag
+      <el-tag
         v-for="item in batchHosts"
         :key="item.id"
         class="host_name_tag"
         type="warning"
       >
         {{ item.name }}
-      </el-tag> -->
+      </el-tag>
     </div>
     <el-form
       ref="formRef"
@@ -83,7 +83,7 @@
             <el-input
               v-model.trim.number="hostForm.port"
               clearable
-              placeholder="port"
+              placeholder=""
               autocomplete="off"
             />
           </el-form-item>
@@ -312,7 +312,7 @@ const rules = computed(() => {
     group: { required: !isBatchModify.value, message: '选择一个分组' },
     name: { required: !isBatchModify.value, message: '输入实例别名', trigger: 'change' },
     host: { required: !isBatchModify.value, message: '输入IP/域名', trigger: 'change' },
-    port: { required: true, type: 'number', message: '输入ssh端口', trigger: 'change' },
+    port: { required: !isBatchModify.value, type: 'number', message: '输入ssh端口', trigger: 'change' },
     index: { required: !isBatchModify.value, type: 'number', message: '输入数字', trigger: 'change' },
     // password: [{ required: hostForm.authType === 'password', trigger: 'change' },],
     // privateKey: [{ required: hostForm.authType === 'privateKey', trigger: 'change' },],
@@ -345,7 +345,7 @@ const setDefaultData = () => {
 
 const setBatchDefaultData = () => {
   if (!isBatchModify.value) return
-  Object.assign(hostForm.value, { ...formField }, { group: '' })
+  Object.assign(hostForm.value, { ...formField }, { group: '', port: '', username: '', authType: '' })
 }
 const handleOpen = async () => {
   setDefaultData()
@@ -404,6 +404,7 @@ const handleSave = () => {
       if (isBatchModify.value) {
         // eslint-disable-next-line
         let updateFileData = Object.fromEntries(Object.entries(formData).filter(([key, value]) => Boolean(value))) // 剔除掉未更改的值
+        if (Object.keys(updateFileData).length === 0) return $message.warning('没有任何修改')
         // console.log(updateFileData)
         let newHosts = batchHosts.value
           .map(item => ({ ...item, ...updateFileData }))

web/src/views/server/components/host-table.vue

@@ -3,10 +3,10 @@
     <el-table
       ref="tableRef"
       :data="hosts"
-      @select="handleSelectionChange"
-      @select-all="handleSelectionChange"
+      row-key="host"
+      @selection-change="handleSelectionChange"
     >
-      <el-table-column type="selection" />
+      <el-table-column type="selection" reserve-selection />
       <el-table-column prop="index" label="序号" width="100px" />
       <el-table-column label="名称">
         <template #default="scope">{{ scope.row.name }}</template>
@@ -43,7 +43,7 @@
 </template>
 
 <script setup>
-import { ref, computed, getCurrentInstance, nextTick, watch } from 'vue'
+import { ref, computed, getCurrentInstance, nextTick, watch, defineExpose } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const { proxy: { $api, $router, $tools } } = getCurrentInstance()
@@ -107,23 +107,31 @@ const handleSSH = async ({ host }) => {
   $router.push({ path: '/terminal', query: { host } })
 }
 
-let selectHosts = ref([])
+// 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 })
+// 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('select: ', val)
-  selectHosts.value = val
+  // selectHosts.value = val
   emit('select-change', val)
 }
 
+const clearSelection = () => {
+  tableRef.value.clearSelection()
+}
+
+defineExpose({
+  clearSelection
+})
+
 const handleRemoveHost = async ({ host }) => {
   ElMessageBox.confirm('确认删除实例', 'Warning', {
     confirmButtonText: '确定',

web/src/views/server/index.vue

@@ -44,6 +44,7 @@
               @update-list="handleUpdateList"
             /> -->
             <HostTable
+              ref="hostTableRefs"
               :hosts="hosts"
               :hidden-ip="hiddenIp"
               @update-host="handleUpdateHost"
@@ -60,7 +61,7 @@
       :is-batch-modify="isBatchModify"
       :batch-hosts="selectHosts"
       @update-list="handleUpdateList"
-      @closed="updateHostData = null;isBatchModify = false"
+      @closed="hostFormClosed"
     />
     <ImportHost
       v-model:show="importVisible"
@@ -84,6 +85,7 @@ let hostFormVisible = ref(false)
 let importVisible = ref(false)
 let selectHosts = ref([])
 let isBatchModify = ref(false)
+const hostTableRefs = ref([])
 
 let hiddenIp = ref(Number(localStorage.getItem('hiddenIp') || 0))
 let activeGroup = ref([])
@@ -165,6 +167,13 @@ watch(groupHostList, () => {
 
 let isNoHost = computed(() => Object.keys(groupHostList.value).length === 0)
 
+let hostFormClosed = () => {
+  updateHostData.value = null
+  isBatchModify.value = false
+  selectHosts.value = []
+  hostTableRefs.value.forEach(item => item.clearSelection())
+}
+
 </script>
 
 <style lang="scss" scoped>