refactor: api key

Author: wxg0103

ui/src/layout/components/top-bar/avatar/APIKeyDialog.vue

@@ -21,7 +21,7 @@
     </el-card>
 
     <el-button type="primary" class="mb-16" @click="createApiKey">
-      {{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }}
+      {{ $t('common.create') }}
     </el-button>
     <el-table :data="apiKey" class="mb-16" :loading="loading">
       <el-table-column prop="secret_key" label="API Key">
@@ -34,47 +34,28 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column
-        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.status')"
-        width="60"
-      >
+      <el-table-column :label="$t('common.status')" width="80">
         <template #default="{ row }">
           <div @click.stop>
             <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
           </div>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="name"
-        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.creationDate')"
-        width="170"
-      >
+      <el-table-column prop="name" :label="$t('common.createDate')" width="170">
         <template #default="{ row }">
           {{ datetimeFormat(row.create_time) }}
         </template>
       </el-table-column>
-      <el-table-column
-        :label="$t('views.applicationOverview.appInfo.APIKeyDialog.operations')"
-        align="left"
-        width="80"
-      >
+      <el-table-column :label="$t('common.setting')" align="left" width="80">
         <template #default="{ row }">
           <span class="mr-4">
-            <el-tooltip
-              effect="dark"
-              :content="$t('views.applicationOverview.appInfo.APIKeyDialog.settings')"
-              placement="top"
-            >
+            <el-tooltip effect="dark" :content="$t('common.settings')" placement="top">
               <el-button type="primary" text @click.stop="settingApiKey(row)">
                 <el-icon><Setting /></el-icon>
               </el-button>
             </el-tooltip>
           </span>
-          <el-tooltip
-            effect="dark"
-            :content="$t('views.applicationOverview.appInfo.APIKeyDialog.delete')"
-            placement="top"
-          >
+          <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
             <el-button type="primary" text @click="deleteApiKey(row)">
               <el-icon>
                 <Delete />
@@ -95,7 +76,7 @@ import systemKeyApi from '@/api/system-api-key'
 import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { t } from '@/locales'
-import SettingAPIKeyDialog from './SettingAPIKeyDialog.vue'
+import SettingAPIKeyDialog from '@/views/application-overview/component/SettingAPIKeyDialog.vue'
 
 const route = useRoute()
 const {
@@ -123,23 +104,23 @@ watch(dialogVisible, (bool) => {
 })
 
 function settingApiKey(row: any) {
-  SettingAPIKeyDialogRef.value.open(row)
+  SettingAPIKeyDialogRef.value.open(row, 'USER')
 }
 
 function deleteApiKey(row: any) {
   MsgConfirm(
     // @ts-ignore
-    `${t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm1')}: ${row.secret_key}?`,
-    t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2'),
+    `${t('common.msgConfirm1')}: ${row.secret_key}?`,
+    t('common.msgConfirm2'),
     {
-      confirmButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.confirmDelete'),
-      cancelButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.cancel'),
+      confirmButtonText: t('common.delete'),
+      cancelButtonText: t('common.cancel'),
       confirmButtonClass: 'danger'
     }
   )
     .then(() => {
       systemKeyApi.delAPIKey(row.id, loading).then(() => {
-        MsgSuccess(t('views.applicationOverview.appInfo.APIKeyDialog.deleteSuccess'))
+        MsgSuccess(t('common.deleteSuccess'))
         getApiKeyList()
       })
     })

ui/src/layout/components/top-bar/avatar/SettingAPIKeyDialog.vue

@@ -21,47 +21,28 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column
-        :label="$t('common.status')"
-        width="70"
-      >
+      <el-table-column :label="$t('common.status')" width="70">
         <template #default="{ row }">
           <div @click.stop>
             <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
           </div>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="name"
-        :label="$t('common.createDate')"
-        width="170"
-      >
+      <el-table-column prop="name" :label="$t('common.createDate')" width="170">
         <template #default="{ row }">
           {{ datetimeFormat(row.create_time) }}
         </template>
       </el-table-column>
-      <el-table-column
-        :label="$t('common.operation')"
-        align="left"
-        width="90"
-      >
+      <el-table-column :label="$t('common.operation')" align="left" width="90">
         <template #default="{ row }">
           <span class="mr-4">
-            <el-tooltip
-              effect="dark"
-              :content="$t('common.setting')"
-              placement="top"
-            >
+            <el-tooltip effect="dark" :content="$t('common.setting')" placement="top">
               <el-button type="primary" text @click.stop="settingApiKey(row)">
                 <el-icon><Setting /></el-icon>
               </el-button>
             </el-tooltip>
           </span>
-          <el-tooltip
-            effect="dark"
-            :content="$t('common.delete')"
-            placement="top"
-          >
+          <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
             <el-button type="primary" text @click="deleteApiKey(row)">
               <el-icon><Delete /></el-icon>
             </el-button>
@@ -100,7 +81,7 @@ watch(dialogVisible, (bool) => {
 })
 
 function settingApiKey(row: any) {
-  SettingAPIKeyDialogRef.value.open(row)
+  SettingAPIKeyDialogRef.value.open(row, 'APPLICATION')
 }
 
 function deleteApiKey(row: any) {

ui/src/views/application-overview/component/APIKeyDialog.vue

@@ -38,8 +38,10 @@ import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type { FormInstance, FormRules } from 'element-plus'
 import overviewApi from '@/api/application-overview'
+import overviewSystemApi from '@/api/system-api-key'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { t } from '@/locales'
+
 const route = useRoute()
 const {
   params: { id }
@@ -57,6 +59,7 @@ const dialogVisible = ref<boolean>(false)
 const loading = ref(false)
 
 const APIKeyId = ref('')
+const APIType = ref('APPLICATION')
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
@@ -67,8 +70,9 @@ watch(dialogVisible, (bool) => {
   }
 })
 
-const open = (data: any) => {
+const open = (data: any, type: string) => {
   APIKeyId.value = data.id
+  APIType.value = type
   form.value.allow_cross_domain = data.allow_cross_domain
   form.value.cross_domain_list = data.cross_domain_list?.length
     ? data.cross_domain_list?.join('\n')
@@ -88,7 +92,13 @@ const submit = async (formEl: FormInstance | undefined) => {
             })
           : []
       }
-      overviewApi.putAPIKey(id as string, APIKeyId.value, obj, loading).then((res) => {
+
+      const apiCall =
+        APIType.value === 'APPLICATION'
+          ? overviewApi.putAPIKey(id as string, APIKeyId.value, obj, loading)
+          : overviewSystemApi.putAPIKey(APIKeyId.value, obj, loading)
+
+      apiCall.then((res) => {
         emit('refresh')
         //@ts-ignore
         MsgSuccess(t('views.applicationOverview.appInfo.SettingAPIKeyDialog.successMessage'))