From 8d729aaf489d63ee798537ebef87eb2b3cd07374 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <i@haozi.net>
Date: Wed, 27 Nov 2024 03:29:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=99=A8=E6=94=AF=E6=8C=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 internal/http/request/database_server.go     |   2 +-
 web/src/views/database/ServerList.vue        |  34 +++++-
 web/src/views/database/UpdateServerModal.vue | 113 +++++++++++++++++++
 web/src/views/database/UpdateUserModal.vue   |   4 +-
 web/src/views/database/UserList.vue          |   4 +-
 5 files changed, 149 insertions(+), 8 deletions(-)
 create mode 100644 web/src/views/database/UpdateServerModal.vue

diff --git a/internal/http/request/database_server.go b/internal/http/request/database_server.go
index 53c9316240..e4021a6354 100644
--- a/internal/http/request/database_server.go
+++ b/internal/http/request/database_server.go
@@ -12,7 +12,7 @@ type DatabaseServerCreate struct {
 
 type DatabaseServerUpdate struct {
 	ID       uint   `form:"id" json:"id" validate:"required,exists=database_servers id"`
-	Name     string `form:"name" json:"name" validate:"required,not_exists=database_servers name"`
+	Name     string `form:"name" json:"name" validate:"required"`
 	Host     string `form:"host" json:"host" validate:"required"`
 	Port     uint   `form:"port" json:"port" validate:"required,number,gte=1,lte=65535"`
 	Username string `form:"username" json:"username"`
diff --git a/web/src/views/database/ServerList.vue b/web/src/views/database/ServerList.vue
index cfc1506440..9598c29ef9 100644
--- a/web/src/views/database/ServerList.vue
+++ b/web/src/views/database/ServerList.vue
@@ -4,6 +4,10 @@ import { NButton, NInput, NInputGroup, NPopconfirm, NTag } from 'naive-ui'
 
 import database from '@/api/panel/database'
 import { formatDateTime } from '@/utils'
+import UpdateServerModal from '@/views/database/UpdateServerModal.vue'
+
+const updateModal = ref(false)
+const updateID = ref(0)
 
 const columns: any = [
   {
@@ -114,7 +118,7 @@ const columns: any = [
   {
     title: '操作',
     key: 'actions',
-    width: 200,
+    width: 300,
     align: 'center',
     hideInExcel: true,
     render(row: any) {
@@ -148,10 +152,33 @@ const columns: any = [
             }
           }
         ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 15px;',
+            onClick: () => {
+              updateID.value = row.id
+              updateModal.value = true
+            }
+          },
+          {
+            default: () => '修改',
+            icon: renderIcon('material-symbols:edit-outline', { size: 14 })
+          }
+        ),
         h(
           NPopconfirm,
           {
-            onPositiveClick: () => handleDelete(row.id)
+            onPositiveClick: () => {
+              // 防手贱
+              if (['local_mysql', 'local_postgresql'].includes(row.name)) {
+                window.$message.error('内置服务器不能删除，如需删除请卸载对应应用')
+                return
+              }
+              handleDelete(row.id)
+            }
           },
           {
             default: () => {
@@ -215,7 +242,7 @@ onUnmounted(() => {
   <n-data-table
     striped
     remote
-    :scroll-x="1500"
+    :scroll-x="1600"
     :loading="loading"
     :columns="columns"
     :data="data"
@@ -232,6 +259,7 @@ onUnmounted(() => {
       pageSizes: [20, 50, 100, 200]
     }"
   />
+  <update-server-modal v-model:id="updateID" v-model:show="updateModal" />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/web/src/views/database/UpdateServerModal.vue b/web/src/views/database/UpdateServerModal.vue
new file mode 100644
index 0000000000..d6f9f10dc4
--- /dev/null
+++ b/web/src/views/database/UpdateServerModal.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import database from '@/api/panel/database'
+import { NButton, NInput } from 'naive-ui'
+
+const show = defineModel<boolean>('show', { type: Boolean, required: true })
+const id = defineModel<number>('id', { type: Number, required: true })
+const updateModel = ref({
+  name: '',
+  host: '127.0.0.1',
+  port: 3306,
+  username: '',
+  password: '',
+  remark: ''
+})
+
+const handleUpdate = () => {
+  useRequest(() => database.serverUpdate(id.value, updateModel.value)).onSuccess(() => {
+    show.value = false
+    window.$message.success('修改成功')
+    window.$bus.emit('database-user:refresh')
+  })
+}
+
+watch(
+  () => show.value,
+  (value) => {
+    if (value && id.value) {
+      database.serverGet(id.value).then((data: any) => {
+        updateModel.value.name = data.name
+        updateModel.value.host = data.host
+        updateModel.value.port = data.port
+        updateModel.value.username = data.username
+        updateModel.value.password = data.password
+        updateModel.value.remark = data.remark
+      })
+    }
+  }
+)
+</script>
+
+<template>
+  <n-modal
+    v-model:show="show"
+    preset="card"
+    title="修改服务器"
+    style="width: 60vw"
+    size="huge"
+    :bordered="false"
+    :segmented="false"
+    @close="show = false"
+  >
+    <n-form :model="updateModel">
+      <n-form-item path="name" label="名称">
+        <n-input
+          v-model:value="updateModel.name"
+          type="text"
+          @keydown.enter.prevent
+          placeholder="输入数据库服务器名称"
+        />
+      </n-form-item>
+      <n-row :gutter="[0, 24]">
+        <n-col :span="15">
+          <n-form-item path="host" label="主机">
+            <n-input
+              v-model:value="updateModel.host"
+              type="text"
+              @keydown.enter.prevent
+              placeholder="输入数据库服务器主机"
+            />
+          </n-form-item>
+        </n-col>
+        <n-col :span="2"></n-col>
+        <n-col :span="7">
+          <n-form-item path="port" label="端口">
+            <n-input-number
+              w-full
+              v-model:value="updateModel.port"
+              @keydown.enter.prevent
+              placeholder="输入数据库服务器端口"
+            />
+          </n-form-item>
+        </n-col>
+      </n-row>
+      <n-form-item path="username" label="用户名">
+        <n-input
+          v-model:value="updateModel.username"
+          type="text"
+          @keydown.enter.prevent
+          placeholder="输入数据库服务器用户名"
+        />
+      </n-form-item>
+      <n-form-item path="password" label="密码">
+        <n-input
+          v-model:value="updateModel.password"
+          type="password"
+          @keydown.enter.prevent
+          placeholder="输入数据库服务器密码"
+        />
+      </n-form-item>
+      <n-form-item path="remark" label="备注">
+        <n-input
+          v-model:value="updateModel.remark"
+          type="textarea"
+          @keydown.enter.prevent
+          placeholder="输入数据库服务器备注"
+        />
+      </n-form-item>
+    </n-form>
+    <n-button type="info" block @click="handleUpdate">提交</n-button>
+  </n-modal>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/views/database/UpdateUserModal.vue b/web/src/views/database/UpdateUserModal.vue
index 3d564153da..7cfc8a8ab6 100644
--- a/web/src/views/database/UpdateUserModal.vue
+++ b/web/src/views/database/UpdateUserModal.vue
@@ -13,7 +13,7 @@ const updateModel = ref({
 const handleUpdate = () => {
   useRequest(() => database.userUpdate(id.value, updateModel.value)).onSuccess(() => {
     show.value = false
-    window.$message.success('更新成功')
+    window.$message.success('修改成功')
     window.$bus.emit('database-user:refresh')
   })
 }
@@ -36,7 +36,7 @@ watch(
   <n-modal
     v-model:show="show"
     preset="card"
-    title="更新用户"
+    title="修改用户"
     style="width: 60vw"
     size="huge"
     :bordered="false"
diff --git a/web/src/views/database/UserList.vue b/web/src/views/database/UserList.vue
index 97eee7658b..085fc728f2 100644
--- a/web/src/views/database/UserList.vue
+++ b/web/src/views/database/UserList.vue
@@ -151,8 +151,8 @@ const columns: any = [
             }
           },
           {
-            default: () => '编辑',
-            icon: renderIcon('material-symbols:edit', { size: 14 })
+            default: () => '修改',
+            icon: renderIcon('material-symbols:edit-outline', { size: 14 })
           }
         ),
         h(