From e36060d3ea41ea05aa10470df3cfeb028f08a7f8 Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Tue, 7 Mar 2023 10:09:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/database/mysql/create/index.vue | 118 ++++++++++--------
 .../views/database/mysql/setting/index.vue    |   8 +-
 .../database/mysql/setting/slow-log/index.vue |  10 +-
 .../mysql/setting/variables/index.vue         |  13 +-
 .../views/database/redis/setting/index.vue    |  14 ++-
 .../redis/setting/persistence/index.vue       |  33 ++---
 6 files changed, 108 insertions(+), 88 deletions(-)

diff --git a/frontend/src/views/database/mysql/create/index.vue b/frontend/src/views/database/mysql/create/index.vue
index 953912624..793f8c8e1 100644
--- a/frontend/src/views/database/mysql/create/index.vue
+++ b/frontend/src/views/database/mysql/create/index.vue
@@ -1,55 +1,57 @@
 <template>
-    <el-drawer v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
-        <template #header>
-            <DrawerHeader :header="$t('database.create')" :back="handleClose" />
-        </template>
-        <el-form ref="formRef" label-position="top" :model="form" :rules="rules">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input clearable v-model.trim="form.name">
-                            <template #append>
-                                <el-select v-model="form.format" style="width: 120px">
-                                    <el-option label="utf8mb4" value="utf8mb4" />
-                                    <el-option label="utf-8" value="utf8" />
-                                    <el-option label="gbk" value="gbk" />
-                                    <el-option label="big5" value="big5" />
-                                </el-select>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.username')" prop="username">
-                        <el-input clearable v-model.trim="form.username" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.password')" prop="password">
-                        <el-input type="password" clearable show-password v-model.trim="form.password" />
-                    </el-form-item>
+    <div v-loading="loading">
+        <el-drawer v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+            <template #header>
+                <DrawerHeader :header="$t('database.create')" :back="handleClose" />
+            </template>
+            <el-form ref="formRef" label-position="top" :model="form" :rules="rules">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('commons.table.name')" prop="name">
+                            <el-input clearable v-model.trim="form.name">
+                                <template #append>
+                                    <el-select v-model="form.format" style="width: 120px">
+                                        <el-option label="utf8mb4" value="utf8mb4" />
+                                        <el-option label="utf-8" value="utf8" />
+                                        <el-option label="gbk" value="gbk" />
+                                        <el-option label="big5" value="big5" />
+                                    </el-select>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.login.username')" prop="username">
+                            <el-input clearable v-model.trim="form.username" />
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.login.password')" prop="password">
+                            <el-input type="password" clearable show-password v-model.trim="form.password" />
+                        </el-form-item>
 
-                    <el-form-item :label="$t('database.permission')" prop="permission">
-                        <el-select v-model="form.permission">
-                            <el-option value="localhost" :label="$t('database.permissionLocal')" />
-                            <el-option value="%" :label="$t('database.permissionAll')" />
-                            <el-option value="ip" :label="$t('database.permissionForIP')" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
-                        <el-input clearable v-model="form.permissionIPs" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.description')" prop="description">
-                        <el-input type="textarea" clearable v-model="form.description" />
-                    </el-form-item>
-                </el-col>
-            </el-row>
-        </el-form>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="createVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="onSubmit(formRef)">
-                    {{ $t('commons.button.confirm') }}
-                </el-button>
-            </span>
-        </template>
-    </el-drawer>
+                        <el-form-item :label="$t('database.permission')" prop="permission">
+                            <el-select v-model="form.permission">
+                                <el-option value="localhost" :label="$t('database.permissionLocal')" />
+                                <el-option value="%" :label="$t('database.permissionAll')" />
+                                <el-option value="ip" :label="$t('database.permissionForIP')" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
+                            <el-input clearable v-model="form.permissionIPs" />
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.table.description')" prop="description">
+                            <el-input type="textarea" clearable v-model="form.description" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="createVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button type="primary" @click="onSubmit(formRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -61,6 +63,7 @@ import { addMysqlDB } from '@/api/modules/database';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
+const loading = ref();
 const createVisiable = ref(false);
 const form = reactive({
     name: '',
@@ -108,10 +111,17 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
         if (form.permission === 'ip') {
             form.permission = form.permissionIPs;
         }
-        await addMysqlDB(form);
-        MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-        emit('search');
-        createVisiable.value = false;
+        loading.value = true;
+        await addMysqlDB(form)
+            .then(() => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                emit('search');
+                createVisiable.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
     });
 };
 
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 2cf54906a..e170f2434 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -75,7 +75,7 @@
                     </el-row>
                 </div>
                 <Status v-show="activeName === 'status'" ref="statusRef" />
-                <Variables v-show="activeName === 'tuning'" ref="variablesRef" />
+                <Variables @loading="changeLoading" v-show="activeName === 'tuning'" ref="variablesRef" />
                 <div v-show="activeName === 'port'">
                     <el-form :model="baseInfo" ref="panelFormRef" label-position="top">
                         <el-row>
@@ -94,7 +94,7 @@
                     </el-form>
                 </div>
                 <ContainerLog v-show="activeName === 'log'" ref="dialogContainerLogRef" />
-                <SlowLog v-show="activeName === 'slowLog'" ref="slowLogRef" />
+                <SlowLog @loading="changeLoading" v-show="activeName === 'slowLog'" ref="slowLogRef" />
             </template>
         </LayoutContent>
 
@@ -259,6 +259,10 @@ const loadBaseInfo = async () => {
     loadContainerLog(baseInfo.containerID);
 };
 
+const changeLoading = (status: boolean) => {
+    loading.value = status;
+};
+
 const loadVariables = async () => {
     const res = await loadMysqlVariables();
     variables.value = res.data;
diff --git a/frontend/src/views/database/mysql/setting/slow-log/index.vue b/frontend/src/views/database/mysql/setting/slow-log/index.vue
index 331324fcf..ab452cb55 100644
--- a/frontend/src/views/database/mysql/setting/slow-log/index.vue
+++ b/frontend/src/views/database/mysql/setting/slow-log/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-loading="loading">
+    <div>
         <span style="float: left; line-height: 30px">{{ $t('database.longQueryTime') }}</span>
         <div style="margin-left: 5px; float: left">
             <el-input type="number" v-model.number="variables.long_query_time">
@@ -54,7 +54,6 @@ import i18n from '@/lang';
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 
-const loading = ref();
 const extensions = [javascript(), oneDark];
 const slowLogs = ref();
 const view = shallowRef();
@@ -95,6 +94,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     }, 1000 * 5);
     oldVariables.value = { ...variables };
 };
+const emit = defineEmits(['loading']);
 
 const handleSlowLogs = async () => {
     let params = {
@@ -118,14 +118,14 @@ const onSave = async () => {
         param.push({ param: 'long_query_time', value: variables.long_query_time + '' });
         param.push({ param: 'slow_query_log_file', value: '/var/lib/mysql/1Panel-slow.log' });
     }
-    loading.value = true;
+    emit('loading', true);
     await updateMysqlVariables(param)
         .then(() => {
-            loading.value = false;
+            emit('loading', false);
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         })
         .catch(() => {
-            loading.value = false;
+            emit('loading', false);
         });
 };
 
diff --git a/frontend/src/views/database/mysql/setting/variables/index.vue b/frontend/src/views/database/mysql/setting/variables/index.vue
index c282fc7d1..59f1d235e 100644
--- a/frontend/src/views/database/mysql/setting/variables/index.vue
+++ b/frontend/src/views/database/mysql/setting/variables/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-loading="loading">
+    <div>
         <el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-position="top">
             <el-row>
                 <el-col :span="1"><br /></el-col>
@@ -63,7 +63,7 @@
                     </el-form-item>
 
                     <el-form-item>
-                        <el-button :disabled="loading" @click="onSaveStart(variableFormRef)" type="primary">
+                        <el-button @click="onSaveStart(variableFormRef)" type="primary">
                             {{ $t('commons.button.save') }}
                         </el-button>
                     </el-form-item>
@@ -124,8 +124,6 @@ import i18n from '@/lang';
 import { planOptions } from './../helper';
 import { MsgSuccess } from '@/utils/message';
 
-const loading = ref(false);
-
 const plan = ref();
 const confirmDialogRef = ref();
 const mysqlVersion = ref();
@@ -198,6 +196,7 @@ const acceptParams = (params: DialogProps): void => {
     mysqlVariables.max_connections = Number(params.variables.max_connections);
     oldVariables.value = { ...mysqlVariables };
 };
+const emit = defineEmits(['loading']);
 
 const changePlan = async () => {
     for (const item of planOptions) {
@@ -282,14 +281,14 @@ const onSaveVariables = async () => {
     if (oldVariables.value?.max_connections !== mysqlVariables.max_connections) {
         param.push({ param: 'max_connections', value: mysqlVariables.max_connections });
     }
-    loading.value = true;
+    emit('loading', true);
     await updateMysqlVariables(param)
         .then(() => {
-            loading.value = false;
+            emit('loading', false);
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         })
         .catch(() => {
-            loading.value = false;
+            emit('loading', false);
         });
 };
 
diff --git a/frontend/src/views/database/redis/setting/index.vue b/frontend/src/views/database/redis/setting/index.vue
index f9382c9df..2f0326ee1 100644
--- a/frontend/src/views/database/redis/setting/index.vue
+++ b/frontend/src/views/database/redis/setting/index.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-show="settingShow">
-        <LayoutContent :title="'Redis ' + $t('database.setting')" :reload="true" v-loading="loading">
+    <div v-show="settingShow" v-loading="loading">
+        <LayoutContent :title="'Redis ' + $t('database.setting')" :reload="true">
             <template #buttons>
                 <el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
                     {{ $t('database.confChange') }}
@@ -109,14 +109,14 @@
                         </el-row>
                     </el-form>
                 </div>
-                <Persistence v-show="activeName === 'persistence'" ref="persistenceRef" />
+                <Persistence @loading="changeLoading" v-show="activeName === 'persistence'" ref="persistenceRef" />
             </template>
         </LayoutContent>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="submtiFile"></ConfirmDialog>
         <ConfirmDialog ref="confirmFileRef" @confirm="submtiFile"></ConfirmDialog>
         <ConfirmDialog ref="confirmFormRef" @confirm="submtiForm"></ConfirmDialog>
-        <ConfirmDialog ref="confirmPortRef" @confirm="onChangePort(formRef)"></ConfirmDialog>
+        <ConfirmDialog ref="confirmPortRef" @confirm="onChangePort(portRef)"></ConfirmDialog>
     </div>
 </template>
 
@@ -180,6 +180,10 @@ const changeTab = (val: string) => {
     activeName.value = val;
 };
 
+const changeLoading = (status: boolean) => {
+    loading.value = status;
+};
+
 const acceptParams = (prop: DialogProps): void => {
     redisStatus.value = prop.status;
     redisName.value = prop.redisName;
@@ -216,9 +220,11 @@ function callback(error: any) {
     }
 }
 const onChangePort = async (formEl: FormInstance | undefined) => {
+    console.log('asdqwdwqd');
     if (!formEl) return;
     const result = await formEl.validateField('port', callback);
     if (!result) {
+        console.log('daqdwq');
         return;
     }
     let params = {
diff --git a/frontend/src/views/database/redis/setting/persistence/index.vue b/frontend/src/views/database/redis/setting/persistence/index.vue
index 236b8598f..14082cfab 100644
--- a/frontend/src/views/database/redis/setting/persistence/index.vue
+++ b/frontend/src/views/database/redis/setting/persistence/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="persistenceShow" v-loading="loading">
+    <div v-if="persistenceShow">
         <el-row :gutter="20" style="margin-top: 5px" class="row-box">
             <el-col :span="12">
                 <el-card class="el-card">
@@ -88,7 +88,9 @@
                 </template>
                 <el-table-column type="selection" fix />
                 <el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="fileName" />
-                <el-table-column :label="$t('database.source')" prop="backupType" />
+                <el-table-column :label="$t('database.source')" prop="backupType">
+                    <template #default="{ row }">{{ $t('setting.' + row.source) }}</template>
+                </el-table-column>
                 <el-table-column :label="$t('file.dir')" show-overflow-tooltip prop="fileDir" />
                 <el-table-column :label="$t('commons.table.createdAt')" :formatter="dateFormat" prop="createdAt" />
                 <fu-table-operations
@@ -120,8 +122,6 @@ import { useDeleteData } from '@/hooks/use-delete-data';
 import { MsgInfo, MsgSuccess } from '@/utils/message';
 import { Backup } from '@/api/interface/backup';
 
-const loading = ref(false);
-
 interface saveStruct {
     second: number;
     count: number;
@@ -148,6 +148,7 @@ const acceptParams = (prop: DialogProps): void => {
         search();
     }
 };
+const emit = defineEmits(['loading']);
 
 const data = ref();
 const selects = ref<any>([]);
@@ -183,15 +184,15 @@ const search = async () => {
     paginationConfig.total = res.data.total;
 };
 const onBackup = async () => {
-    loading.value = true;
+    emit('loading', true);
     await handleBackup({ name: '', detailName: '', type: 'redis' })
         .then(() => {
-            loading.value = false;
+            emit('loading', false);
             search();
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         })
         .catch(() => {
-            loading.value = false;
+            emit('loading', false);
         });
 };
 const onRecover = async () => {
@@ -201,14 +202,14 @@ const onRecover = async () => {
         detailName: '',
         file: currentRow.value.fileDir + '/' + currentRow.value.fileName,
     };
-    loading.value = true;
+    emit('loading', true);
     await handleRecover(param)
         .then(() => {
-            loading.value = false;
+            emit('loading', false);
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         })
         .catch(() => {
-            loading.value = false;
+            emit('loading', false);
         });
 };
 
@@ -255,14 +256,14 @@ const onSave = async (formEl: FormInstance | undefined, type: string) => {
             param.type = type;
             param.appendfsync = form.appendfsync;
             param.appendonly = form.appendonly;
-            loading.value = true;
+            emit('loading', true);
             await updateRedisPersistenceConf(param)
                 .then(() => {
-                    loading.value = false;
+                    emit('loading', false);
                     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 })
                 .catch(() => {
-                    loading.value = false;
+                    emit('loading', false);
                 });
         });
         return;
@@ -277,14 +278,14 @@ const onSave = async (formEl: FormInstance | undefined, type: string) => {
     }
     param.type = type;
     param.save = itemSaves.join(' ');
-    loading.value = true;
+    emit('loading', true);
     await updateRedisPersistenceConf(param)
         .then(() => {
-            loading.value = false;
+            emit('loading', false);
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         })
         .catch(() => {
-            loading.value = false;
+            emit('loading', false);
         });
 };