feat: 优化数据库备份页面样式 (#6221)

frontend/src/components/backup/index.vue

@@ -72,30 +72,52 @@
             </ComplexTable>
         </el-drawer>
 
+        <el-dialog
+            v-model="open"
+            :title="isBackup ? $t('commons.button.backup') : $t('commons.button.recover') + ' - ' + name"
+            width="40%"
+            :close-on-click-modal="false"
+            :before-close="handleClose"
+        >
+            <el-form ref="backupForm" label-position="left" v-loading="loading">
+                <el-form-item
+                    :label="$t('setting.compressPassword')"
+                    style="margin-top: 10px"
+                    v-if="type === 'app' || type === 'website'"
+                >
+                    <el-input v-model="secret" :placeholder="$t('setting.backupRecoverMessage')" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="handleClose" :disabled="loading">
+                        {{ $t('commons.button.cancel') }}
+                    </el-button>
+                    <el-button type="primary" @click="onSubmit" :disabled="loading">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+
         <OpDialog ref="opRef" @search="search" />
     </div>
-
-    <AppBackUp ref="backupRef" @close="search" />
-    <AppRecover ref="recoverRef" />
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { computeSize, dateFormat, downloadFile } from '@/utils/util';
-import { getBackupList } from '@/api/modules/setting';
+import { getBackupList, handleBackup, handleRecover } from '@/api/modules/setting';
 import i18n from '@/lang';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { deleteBackupRecord, downloadBackupRecord, searchBackupRecords } from '@/api/modules/setting';
 import { Backup } from '@/api/interface/backup';
 import router from '@/routers';
-import AppBackUp from '@/views/app-store/installed/backup/index.vue';
-import AppRecover from '@/views/app-store/installed/recover/index.vue';
+import { MsgSuccess } from '@/utils/message';
 
 const selects = ref<any>([]);
 const loading = ref();
 const opRef = ref();
-const backupRef = ref();
-const recoverRef = ref();
 
 const data = ref();
 const paginationConfig = reactive({
@@ -113,6 +135,10 @@ const backupPath = ref();
 const status = ref();
 const secret = ref();
 
+const open = ref();
+const isBackup = ref();
+const currentRow = ref();
+
 interface DialogProps {
     type: string;
     name: string;
@@ -133,6 +159,9 @@ const acceptParams = (params: DialogProps): void => {
 const handleClose = () => {
     backupVisible.value = false;
 };
+const handleBackupClose = () => {
+    open.value = false;
+};
 
 const loadBackupDir = () => {
     getBackupList().then((res) => {
@@ -175,25 +204,84 @@ const search = async () => {
 };
 
 const onBackup = async () => {
+    isBackup.value = true;
+    if (type.value !== 'app' && type.value !== 'website') {
+        ElMessageBox.confirm(
+            i18n.global.t('commons.msg.backupHelper', [name.value + '( ' + detailName.value + ' )']),
+            i18n.global.t('commons.button.backup'),
+            {
+                confirmButtonText: i18n.global.t('commons.button.confirm'),
+                cancelButtonText: i18n.global.t('commons.button.cancel'),
+            },
+        ).then(async () => {
+            onSubmit();
+        });
+        return;
+    }
+    open.value = true;
+};
+
+const onSubmit = async () => {
+    if (isBackup.value) {
+        let params = {
+            type: type.value,
+            name: name.value,
+            detailName: detailName.value,
+            secret: secret.value,
+        };
+        loading.value = true;
+        await handleBackup(params)
+            .then(() => {
+                loading.value = false;
+                handleClose();
+                handleBackupClose();
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                search();
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+        return;
+    }
     let params = {
+        source: currentRow.value.source,
         type: type.value,
         name: name.value,
         detailName: detailName.value,
+        file: currentRow.value.fileDir + '/' + currentRow.value.fileName,
         secret: secret.value,
     };
-    backupRef.value.acceptParams(params);
+    loading.value = true;
+    await handleRecover(params)
+        .then(() => {
+            loading.value = false;
+            handleClose();
+            handleBackupClose();
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+            search();
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 
 const onRecover = async (row: Backup.RecordInfo) => {
-    let params = {
-        source: row.source,
-        type: type.value,
-        name: name.value,
-        detailName: detailName.value,
-        file: row.fileDir + '/' + row.fileName,
-        secret: secret.value,
-    };
-    recoverRef.value.acceptParams(params);
+    isBackup.value = false;
+    currentRow.value = row;
+    if (type.value !== 'app' && type.value !== 'website') {
+        ElMessageBox.confirm(
+            i18n.global.t('commons.msg.recoverHelper', [name.value + '( ' + detailName.value + ' )']),
+            i18n.global.t('commons.button.recover'),
+            {
+                confirmButtonText: i18n.global.t('commons.button.confirm'),
+                cancelButtonText: i18n.global.t('commons.button.cancel'),
+            },
+        ).then(async () => {
+            onSubmit();
+        });
+        return;
+    }
+    open.value = true;
 };
 
 const onDownload = async (row: Backup.RecordInfo) => {

frontend/src/views/app-store/installed/backup/index.vue

@@ -1,96 +0,0 @@
-<template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.backup') + ' - ' + appInstallName"
-        width="40%"
-        :close-on-click-modal="false"
-        :before-close="handleClose"
-    >
-        <el-form ref="backupForm" label-position="left" v-loading="loading">
-            <el-form-item
-                :label="$t('setting.compressPassword')"
-                style="margin-top: 10px"
-                v-if="backupReq.type === 'app' || backupReq.type === 'website'"
-            >
-                <el-input v-model="backupReq.secret" :placeholder="$t('setting.backupRecoverMessage')" />
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="handleClose" :disabled="loading">
-                    {{ $t('commons.button.cancel') }}
-                </el-button>
-                <el-button type="primary" @click="submit" :disabled="loading">
-                    {{ $t('commons.button.confirm') }}
-                </el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { FormInstance } from 'element-plus';
-import i18n from '@/lang';
-import { handleBackup } from '@/api/modules/setting';
-import { MsgSuccess } from '@/utils/message';
-
-let appInstallName = ref('');
-let loading = ref(false);
-let open = ref(false);
-const backupForm = ref<FormInstance>();
-const emit = defineEmits<{ (e: 'search'): void }>();
-
-interface DialogProps {
-    type: string;
-    name: string;
-    detailName: string;
-    status: string;
-}
-
-let backupReq = ref({
-    type: '',
-    name: '',
-    detailName: '',
-    secret: '',
-});
-
-const handleClose = () => {
-    open.value = false;
-};
-const acceptParams = (params: DialogProps): void => {
-    appInstallName.value = params.name;
-    backupReq.value = {
-        type: params.type,
-        name: params.name,
-        detailName: params.detailName,
-        secret: '',
-    };
-    open.value = true;
-};
-
-const submit = async () => {
-    let params = {
-        type: backupReq.value.type,
-        name: backupReq.value.name,
-        detailName: backupReq.value.detailName,
-        secret: backupReq.value.secret,
-    };
-    loading.value = true;
-    await handleBackup(params)
-        .then(() => {
-            loading.value = false;
-            handleClose();
-            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-            emit('search');
-        })
-        .catch(() => {
-            loading.value = false;
-        });
-};
-
-defineExpose({
-    acceptParams,
-});
-</script>
-<style scoped lang="scss"></style>

frontend/src/views/app-store/installed/recover/index.vue

@@ -1,116 +0,0 @@
-<template>
-    <el-dialog
-        v-model="open"
-        :title="$t('commons.button.recover') + ' - ' + appInstallName"
-        width="40%"
-        :close-on-click-modal="false"
-        :before-close="handleClose"
-    >
-        <el-form ref="recoverForm" label-position="left" v-loading="loading">
-            <el-form-item
-                :label="$t('setting.compressPassword')"
-                style="margin-top: 10px"
-                v-if="recoverReq.type === 'app' || recoverReq.type === 'website'"
-            >
-                <el-input v-model="recoverReq.secret" :placeholder="$t('setting.backupRecoverMessage')" />
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="handleClose" :disabled="loading">
-                    {{ $t('commons.button.cancel') }}
-                </el-button>
-                <el-button type="primary" @click="submit" :disabled="loading">
-                    {{ $t('commons.button.confirm') }}
-                </el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { FormInstance } from 'element-plus';
-import i18n from '@/lang';
-import { MsgSuccess } from '@/utils/message';
-import { handleRecover, handleRecoverByUpload } from '@/api/modules/setting';
-
-let appInstallName = ref('');
-let loading = ref(false);
-let open = ref(false);
-const recoverForm = ref<FormInstance>();
-
-interface DialogProps {
-    source: string;
-    type: string;
-    name: string;
-    detailName: string;
-    file: string;
-    recoverType: string;
-}
-
-let recoverReq = ref({
-    source: '',
-    type: '',
-    name: '',
-    detailName: '',
-    file: '',
-    secret: '',
-    recoverType: '',
-});
-
-const handleClose = () => {
-    open.value = false;
-};
-const acceptParams = (params: DialogProps): void => {
-    appInstallName.value = params.name;
-    recoverReq.value = {
-        source: params.source,
-        type: params.type,
-        name: params.name,
-        detailName: params.detailName,
-        file: params.file,
-        secret: '',
-        recoverType: params.recoverType,
-    };
-    open.value = true;
-};
-
-const submit = async () => {
-    let params = {
-        source: recoverReq.value.source,
-        type: recoverReq.value.type,
-        name: recoverReq.value.name,
-        detailName: recoverReq.value.detailName,
-        file: recoverReq.value.file,
-        secret: recoverReq.value.secret,
-    };
-    loading.value = true;
-    if (recoverReq.value.recoverType === 'upload') {
-        await handleRecoverByUpload(params)
-            .then(() => {
-                loading.value = false;
-                handleClose();
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-        return false;
-    }
-    await handleRecover(params)
-        .then(() => {
-            loading.value = false;
-            handleClose();
-            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-        })
-        .catch(() => {
-            loading.value = false;
-        });
-};
-
-defineExpose({
-    acceptParams,
-});
-</script>
-<style scoped lang="scss"></style>