From f820e28540e3d61953e72a8a2a9aff1cb8ac5f8f Mon Sep 17 00:00:00 2001
From: chaoszhu <zhulj@aupup.com>
Date: Thu, 25 Jul 2024 22:24:59 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20=E4=BF=AE=E5=A4=8Dgroup&ssh=20ID?=
 =?UTF-8?q?=E7=B4=A2=E5=BC=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/app/controller/group.js |  11 +-
 server/app/controller/ssh.js   |   1 +
 server/app/db.js               |   2 +-
 web/src/views/group/index.vue  | 191 ++++++++++-----------------------
 4 files changed, 66 insertions(+), 139 deletions(-)

diff --git a/server/app/controller/group.js b/server/app/controller/group.js
index 30c2f20..7737d2f 100644
--- a/server/app/controller/group.js
+++ b/server/app/controller/group.js
@@ -13,7 +13,7 @@ const addGroupList = async ({ res, request }) => {
   let { body: { name, index } } = request
   if (!name) return res.fail({ data: false, msg: '参数错误' })
   let groupList = await readGroupList()
-  let group = { id: randomStr(), name, index }
+  let group = { name, index }
   groupList.push(group)
   await writeGroupList(groupList)
   res.success({ data: '新增成功' })
@@ -24,9 +24,10 @@ const updateGroupList = async ({ res, request }) => {
   let { body: { name, index } } = request
   if (!id || !name) return res.fail({ data: false, msg: '参数错误' })
   let groupList = await readGroupList()
-  let idx = groupList.findIndex(item => item.id === id)
-  let group = { id, name, index: Number(index) || 0 }
+  let idx = groupList.findIndex(item => item._id === id)
   if (idx === -1) return res.fail({ data: false, msg: `分组ID${ id }不存在` })
+  const { _id } = groupList[idx]
+  let group = { _id, name, index: Number(index) || 0 }
   groupList.splice(idx, 1, group)
   await writeGroupList(groupList)
   res.success({ data: '修改成功' })
@@ -36,13 +37,13 @@ const removeGroup = async ({ res, request }) => {
   let { params: { id } } = request
   if (id === 'default') return res.fail({ data: false, msg: '保留分组, 禁止删除' })
   let groupList = await readGroupList()
-  let idx = groupList.findIndex(item => item.id === id)
+  let idx = groupList.findIndex(item => item._id === id)
   if (idx === -1) return res.fail({ msg: '分组不存在' })
 
   // 移除分组将所有该分组下host分配到default中去
   let hostList = await readHostList()
   hostList = hostList?.map((item) => {
-    if (item.group === groupList[idx].id) item.group = 'default'
+    if (item.group === groupList[idx]._id) item.group = 'default'
     return item
   })
   await writeHostList(hostList)
diff --git a/server/app/controller/ssh.js b/server/app/controller/ssh.js
index 8ae1125..7cad4fa 100644
--- a/server/app/controller/ssh.js
+++ b/server/app/controller/ssh.js
@@ -52,6 +52,7 @@ const updateSSH = async ({ res, request }) => {
     record[authType] = await AESEncryptSync(clearSSHKey)
     console.log(`${ authType }__commonKey加密存储: `, record[authType])
   }
+  record._id = sshRecord[idx]._id
   sshRecord.splice(idx, 1, record)
   await writeSSHRecord(sshRecord)
   consola.info('修改凭证：', name)
diff --git a/server/app/db.js b/server/app/db.js
index af121e4..4a9f993 100644
--- a/server/app/db.js
+++ b/server/app/db.js
@@ -75,7 +75,7 @@ function initGroupDB() {
       } else {
         if (count === 0) {
           consola.log('初始化groupDB✔')
-          const defaultData = [{ 'id': 'default', 'name': '默认分组', 'index': 0 }]
+          const defaultData = [{ '_id': 'default', 'name': '默认分组', 'index': 0 }]
           await writeGroupList(defaultData)
         }
       }
diff --git a/web/src/views/group/index.vue b/web/src/views/group/index.vue
index 6c809b8..3b6f4a6 100644
--- a/web/src/views/group/index.vue
+++ b/web/src/views/group/index.vue
@@ -1,64 +1,14 @@
 <template>
   <div class="group_container">
-    <el-form
-      ref="groupFormRef"
-      :model="groupForm"
-      :rules="rules"
-      :inline="true"
-      :hide-required-asterisk="true"
-      label-suffix="："
-      :show-message="false"
-    >
-      <el-form-item label="" prop="name" style="width: 200px;">
-        <el-input
-          v-model.trim="groupForm.name"
-          clearable
-          placeholder="分组名称"
-          autocomplete="off"
-          @keyup.enter="addGroup"
-        />
-      </el-form-item>
-      <el-form-item label="" prop="index" style="width: 200px;">
-        <el-input
-          v-model.number="groupForm.index"
-          clearable
-          placeholder="序号(数字, 用于分组排序)"
-          autocomplete="off"
-          @keyup.enter="addGroup"
-        />
-      </el-form-item>
-      <el-form-item label="">
-        <el-button type="primary" @click="addGroup">
-          添加
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <!-- 提示 -->
-    <el-alert type="success" :closable="false">
-      <template #title>
-        <span style="letter-spacing: 2px;">
-          Tips: 已添加实例数量 <u>{{ hostGroupInfo.total }}</u>
-          <span v-show="hostGroupInfo.notGroupCount">, 有 <u>{{ hostGroupInfo.notGroupCount }}</u> 台实例尚未分组</span>
-        </span>
-      </template>
-    </el-alert><br>
-    <el-alert type="success" :closable="false">
-      <template #title>
-        <span style="letter-spacing: 2px;"> Tips: 删除分组会将分组内所有实例移至默认分组 </span>
-      </template>
-    </el-alert>
+    <div class="header">
+      <el-button type="primary" @click="addGroup">添加分组</el-button>
+    </div>
     <el-table v-loading="loading" :data="list">
       <el-table-column prop="index" label="序号" />
-      <el-table-column prop="id" label="ID" />
       <el-table-column prop="name" label="分组名称" />
       <el-table-column label="关联实例数量">
         <template #default="{ row }">
-          <el-popover
-            v-if="row.hosts.list.length !== 0"
-            placement="left"
-            :width="350"
-            trigger="hover"
-          >
+          <el-popover v-if="row.hosts.list.length !== 0" placement="left" :width="350" trigger="hover">
             <template #reference>
               <u class="host_count">{{ row.hosts.count }}</u>
             </template>
@@ -80,41 +30,21 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog
-      v-model="visible"
-      width="400px"
-      title="修改分组"
-      :close-on-click-modal="false"
-    >
-      <el-form
-        ref="updateFormRef"
-        :model="updateForm"
-        :rules="rules"
-        :hide-required-asterisk="true"
-        label-suffix="："
-        label-width="100px"
-      >
+    <el-dialog v-model="groupFormVisible" width="600px" top="150px" :title="isModify ? '修改分组' : '添加分组'"
+      :close-on-click-modal="false" @close="clearFormInfo">
+      <el-form ref="updateFormRef" :model="groupForm" :rules="rules" :hide-required-asterisk="true" label-suffix="："
+        label-width="100px" :show-message="false">
         <el-form-item label="分组名称" prop="name">
-          <el-input
-            v-model.trim="updateForm.name"
-            clearable
-            placeholder="分组名称"
-            autocomplete="off"
-          />
+          <el-input v-model.trim="groupForm.name" clearable placeholder="" autocomplete="off" />
         </el-form-item>
         <el-form-item label="分组序号" prop="index">
-          <el-input
-            v-model.number="updateForm.index"
-            clearable
-            placeholder="分组序号"
-            autocomplete="off"
-          />
+          <el-input v-model.number="groupForm.index" clearable placeholder="用于分组排序" autocomplete="off" />
         </el-form-item>
       </el-form>
       <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="visible = false">关闭</el-button>
-          <el-button type="primary" @click="updateGroup">修改</el-button>
+        <span>
+          <el-button @click="groupFormVisible = false">关闭</el-button>
+          <el-button type="primary" @click="updateForm">{{ isModify ? '修改' : '新增' }}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -122,40 +52,34 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, getCurrentInstance } from 'vue'
+import { ref, reactive, computed, nextTick, getCurrentInstance } from 'vue'
 
 const { proxy: { $api, $message, $messageBox, $store } } = getCurrentInstance()
 
 const loading = ref(false)
-const visible = ref(false)
+const groupFormVisible = ref(false)
+let isModify = ref(false)
 const groupForm = reactive({
+  id: null,
   name: '',
   index: ''
 })
-const updateForm = reactive({
-  name: '',
-  index: ''
-})
-const rules = reactive({
-  name: { required: true, message: '需输入分组名称', trigger: 'change' },
-  index: { required: true, type: 'number', message: '需输入数字', trigger: 'change' }
-})
 
-const groupFormRef = ref(null)
+const rules = computed(() => {
+  return {
+    name: { required: true, message: '需输入分组名称', trigger: 'change' },
+    index: { required: true, type: 'number', message: '需输入数字', trigger: 'change' }
+  }
+})
+
 const updateFormRef = ref(null)
 
-const hostGroupInfo = computed(() => {
-  const total = $store.hostList.length
-  const notGroupCount = $store.hostList.reduce((prev, next) => {
-    if (!next.group) prev++
-    return prev
-  }, 0)
-  return { total, notGroupCount }
-})
+let groupList = computed(() => $store.groupList || [])
+const hostList = computed(() => $store.hostList)
 
 const list = computed(() => {
   return groupList.value.map(item => {
-    const hosts = $store.hostList.reduce((prev, next) => {
+    const hosts = hostList.value.reduce((prev, next) => {
       if (next.group === item.id) {
         prev.count++
         prev.list.push(next)
@@ -166,45 +90,39 @@ const list = computed(() => {
   })
 })
 
-let groupList = computed(() => $store.groupList || [])
-
-const addGroup = () => {
-  groupFormRef.value.validate()
-    .then(() => {
-      const { name, index } = groupForm
-      $api.addGroup({ name, index })
-        .then(() => {
-          $message.success('success')
-          groupForm.name = ''
-          groupForm.index = ''
-          $store.getGroupList()
-          groupFormRef.value.resetFields()
-        })
-    })
+let addGroup = () => {
+  groupForm.id = null
+  groupFormVisible.value = true
+  isModify.value = false
 }
 
-const handleChange = ({ id, name, index }) => {
-  updateForm.id = id
-  updateForm.name = name
-  updateForm.index = index
-  visible.value = true
+const handleChange = (row) => {
+  Object.assign(groupForm, { ...row })
+  groupFormVisible.value = true
+  isModify.value = true
 }
 
-const updateGroup = () => {
+const updateForm = () => {
   updateFormRef.value.validate()
-    .then(() => {
-      const { id, name, index } = updateForm
-      $api.updateGroup(id, { name, index })
-        .then(() => {
-          $message.success('success')
-          visible.value = false
-          $store.getGroupList()
-        })
+    .then(async () => {
+      const { id, index, name } = groupForm
+      if (isModify.value) {
+        await $api.updateGroup(id, { index, name })
+      } else {
+        await $api.addGroup({ index, name })
+      }
+      await $store.getGroupList()
+      groupFormVisible.value = false
+      $message.success('success')
     })
 }
 
+const clearFormInfo = () => {
+  nextTick(() => updateFormRef.value.resetFields())
+}
+
 const deleteGroup = ({ id, name }) => {
-  $messageBox.confirm(`确认删除分组：${ name }`, 'Warning', {
+  $messageBox.confirm(`确认删除分组：${name} (分组下实例将移动至默认分组)`, 'Warning', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
@@ -222,6 +140,13 @@ const deleteGroup = ({ id, name }) => {
 <style lang="scss" scoped>
 .group_container {
   padding: 20px;
+
+  .header {
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
 }
 
 .host_count {