✨ 支持批量连接终端

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

@@ -107,28 +107,23 @@ 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 })
-
+let selectHosts = ref([])
 const handleSelectionChange = (val) => {
   // console.log('select: ', val)
-  // selectHosts.value = val
+  selectHosts.value = val
   emit('select-change', val)
 }
 
+const getSelectHosts = () => {
+  return selectHosts.value
+}
+
 const clearSelection = () => {
   tableRef.value.clearSelection()
 }
 
 defineExpose({
+  getSelectHosts,
   clearSelection
 })
 

web/src/views/server/index.vue

@@ -50,7 +50,6 @@
               :hidden-ip="hiddenIp"
               @update-host="handleUpdateHost"
               @update-list="handleUpdateList"
-              @select-change="handleSelectChange"
             />
           </div>
         </el-collapse-item>
@@ -100,22 +99,33 @@ let handleUpdateList = async () => {
   }
 }
 
-let handleSelectChange = (val) => {
-  selectHosts.value = val
+// 收集选中的实例
+let collectSelectHost = () => {
+  let allSelectHosts = []
+  hostTableRefs.value.map(item => {
+    if (item) allSelectHosts = allSelectHosts.concat(item.getSelectHosts())
+  })
+  selectHosts.value = allSelectHosts
 }
 
 let handleBatchSSH = () => {
-  let ips = selectHosts.value.map(item => item.host)
+  collectSelectHost()
+  if (!selectHosts.value.length) return $message.warning('请选择要批量操作的实例')
+  let ips = selectHosts.value.filter(item => item.isConfig).map(item => item.host)
+  if (!ips.length) return $message.warning('所选实例未配置ssh连接信息')
+  if (ips.length < selectHosts.value.length) $message.warning('部分实例未配置ssh连接信息,已忽略')
   $router.push({ path: '/terminal', query: { host: ips.join(',') } })
 }
 
 let handleBatchModify = async () => {
+  collectSelectHost()
   if (!selectHosts.value.length) return $message.warning('请选择要批量操作的实例')
   isBatchModify.value = true
   hostFormVisible.value = true
 }
 
 let handleBatchRemove = async () => {
+  collectSelectHost()
   if (!selectHosts.value.length) return $message.warning('请选择要批量操作的实例')
   let ips = selectHosts.value.map(item => item.host)
   let names = selectHosts.value.map(item => item.name)