feat: 优化数据库删除

web/src/api/panel/database/index.ts

@@ -15,6 +15,8 @@ export default {
     http.Get('/databaseServer', { params: { page, limit } }),
   // 创建数据库服务器
   serverCreate: (data: any) => http.Post('/databaseServer', data),
+  // 获取数据库服务器
+  serverGet: (id: number) => http.Get(`/databaseServer/${id}`),
   // 更新数据库服务器
   serverUpdate: (id: number, data: any) => http.Put(`/databaseServer/${id}`, data),
   // 删除数据库服务器
@@ -28,6 +30,8 @@ export default {
   userList: (page: number, limit: number) => http.Get('/databaseUser', { params: { page, limit } }),
   // 创建数据库用户
   userCreate: (data: any) => http.Post('/databaseUser', data),
+  // 获取数据库用户
+  userGet: (id: number) => http.Get(`/databaseUser/${id}`),
   // 更新数据库用户
   userUpdate: (id: number, data: any) => http.Put(`/databaseUser/${id}`, data),
   // 删除数据库用户

web/src/views/database/CreateDatabaseModal.vue

@@ -28,16 +28,21 @@ const handleCreate = () => {
   })
 }
 
-onMounted(() => {
-  database.serverList(1, 10000).then((data: any) => {
-    for (const server of data.items) {
-      servers.value.push({
-        label: server.name,
-        value: server.id
+watch(
+  () => show.value,
+  (value) => {
+    if (value) {
+      database.serverList(1, 10000).then((data: any) => {
+        for (const server of data.items) {
+          servers.value.push({
+            label: server.name,
+            value: server.id
+          })
+        }
       })
     }
-  })
-})
+  }
+)
 </script>
 
 <template>

web/src/views/database/CreateUserModal.vue

@@ -28,16 +28,21 @@ const handleCreate = () => {
   })
 }
 
-onMounted(() => {
-  database.serverList(1, 10000).then((data: any) => {
-    for (const server of data.items) {
-      servers.value.push({
-        label: server.name,
-        value: server.id
+watch(
+  () => show.value,
+  (value) => {
+    if (value) {
+      database.serverList(1, 10000).then((data: any) => {
+        for (const server of data.items) {
+          servers.value.push({
+            label: server.name,
+            value: server.id
+          })
+        }
       })
     }
-  })
-})
+  }
+)
 </script>
 
 <template>
@@ -76,7 +81,7 @@ onMounted(() => {
           placeholder="输入密码"
         />
       </n-form-item>
-      <n-form-item path="host-select" label="主机">
+      <n-form-item path="host-select" label="主机（仅 MySQL）">
         <n-select
           v-model:value="createModel.host"
           @keydown.enter.prevent

web/src/views/database/UpdateUserModal.vue

@@ -0,0 +1,71 @@
+<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({
+  password: '',
+  privileges: [],
+  remark: ''
+})
+
+const handleUpdate = () => {
+  useRequest(() => database.userUpdate(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.userGet(id.value).then((data: any) => {
+        updateModel.value.password = data.password
+        updateModel.value.privileges = data.privileges
+        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="password" label="密码">
+        <n-input
+          v-model:value="updateModel.password"
+          type="password"
+          @keydown.enter.prevent
+          placeholder="输入密码"
+        />
+      </n-form-item>
+      <n-form-item path="privileges" label="授权">
+        <n-dynamic-input v-model:value="updateModel.privileges" 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>

web/src/views/database/UserList.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { renderIcon } from '@/utils'
-import { NButton, NInput, NInputGroup, NPopconfirm, NTag } from 'naive-ui'
+import { NButton, NFlex, NInput, NInputGroup, NPopconfirm, NTag } from 'naive-ui'
 
 import database from '@/api/panel/database'
 import { formatDateTime } from '@/utils'
+import UpdateUserModal from '@/views/database/UpdateUserModal.vue'
+
+const updateModal = ref(false)
+const updateID = ref(0)
 
 const columns: any = [
   {
@@ -63,7 +67,7 @@ const columns: any = [
     width: 150,
     render(row: any) {
       return h(NTag, null, {
-        default: () => row.host
+        default: () => row.host || '无'
       })
     }
   },
@@ -75,6 +79,21 @@ const columns: any = [
       return row.server.name
     }
   },
+  {
+    title: '授权',
+    key: 'privileges',
+    width: 200,
+    render(row: any) {
+      return h(NFlex, null, {
+        default: () =>
+          row.privileges.map((privilege: string) =>
+            h(NTag, null, {
+              default: () => privilege
+            })
+          )
+      })
+    }
+  },
   {
     title: '备注',
     key: 'remark',
@@ -121,6 +140,21 @@ const columns: any = [
     hideInExcel: true,
     render(row: any) {
       return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            onClick: () => {
+              updateID.value = row.id
+              updateModal.value = true
+            }
+          },
+          {
+            default: () => '编辑',
+            icon: renderIcon('material-symbols:edit', { size: 14 })
+          }
+        ),
         h(
           NPopconfirm,
           {
@@ -128,7 +162,7 @@ const columns: any = [
           },
           {
             default: () => {
-              return '确定删除服务器吗？'
+              return '确定删除用户吗？'
             },
             trigger: () => {
               return h(
@@ -188,7 +222,7 @@ onUnmounted(() => {
   <n-data-table
     striped
     remote
-    :scroll-x="1500"
+    :scroll-x="1700"
     :loading="loading"
     :columns="columns"
     :data="data"
@@ -205,6 +239,7 @@ onUnmounted(() => {
       pageSizes: [20, 50, 100, 200]
     }"
   />
+  <update-user-modal v-model:id="updateID" v-model:show="updateModal" />
 </template>
 
 <style scoped lang="scss"></style>