feat: 完成 mysql 数据库备份与恢复功能

2022-10-27 23:09:39 +08:00
parent 325bb7bb5f
commit 8cf9c27f5f
21 changed files with 494 additions and 82 deletions
--- a/frontend/src/views/database/mysql/backup/index.vue
+++ b/frontend/src/views/database/mysql/backup/index.vue
@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <el-dialog v-model="backupVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="50%">
+            <template #header>
+                <div class="card-header">
+                    <span>{{ $t('database.backup') }} - {{ dbName }}</span>
+                </div>
+            </template>
+            <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
+                <template #toolbar>
+                    <el-button type="primary" @click="onBackup()">
+                        {{ $t('database.backup') }}
+                    </el-button>
+                    <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete">
+                        {{ $t('commons.button.delete') }}
+                    </el-button>
+                </template>
+                <el-table-column type="selection" fix />
+                <el-table-column :label="$t('commons.table.name')" prop="fileName" show-overflow-tooltip />
+                <el-table-column :label="$t('database.source')" prop="source" />
+                <el-table-column
+                    prop="createdAt"
+                    :label="$t('commons.table.date')"
+                    :formatter="dateFromat"
+                    show-overflow-tooltip
+                />
+
+                <fu-table-operations type="icon" :buttons="buttons" :label="$t('commons.table.operate')" fix />
+            </ComplexTable>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import ComplexTable from '@/components/complex-table/index.vue';
+import { reactive, ref } from 'vue';
+import { dateFromat } from '@/utils/util';
+import { useDeleteData } from '@/hooks/use-delete-data';
+import { backup, searchBackupRecords } from '@/api/modules/database';
+import i18n from '@/lang';
+import { ElMessage } from 'element-plus';
+import { deleteBackupRecord } from '@/api/modules/backup';
+import { Backup } from '@/api/interface/backup';
+
+const selects = ref<any>([]);
+
+const data = ref();
+const paginationConfig = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0,
+});
+
+const backupVisiable = ref(false);
+const version = ref();
+const dbName = ref();
+interface DialogProps {
+    version: string;
+    dbName: string;
+}
+const acceptParams = (params: DialogProps): void => {
+    version.value = params.version;
+    dbName.value = params.dbName;
+    backupVisiable.value = true;
+    search();
+};
+
+const search = async () => {
+    let params = {
+        page: paginationConfig.currentPage,
+        pageSize: paginationConfig.pageSize,
+        version: version.value,
+        dbName: dbName.value,
+    };
+    const res = await searchBackupRecords(params);
+    data.value = res.data.items || [];
+    paginationConfig.total = res.data.total;
+};
+
+const onBackup = async () => {
+    let params = {
+        version: version.value,
+        dbName: dbName.value,
+    };
+    await backup(params);
+    ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+    search();
+};
+
+const onBatchDelete = async (row: Backup.RecordInfo | null) => {
+    let ids: Array<number> = [];
+    if (row) {
+        ids.push(row.id);
+    } else {
+        selects.value.forEach((item: Backup.RecordInfo) => {
+            ids.push(item.id);
+        });
+    }
+    await useDeleteData(deleteBackupRecord, { ids: ids }, 'commons.msg.delete', true);
+    search();
+};
+
+const buttons = [
+    {
+        label: i18n.global.t('commons.button.delete'),
+        icon: 'Delete',
+        click: (row: Backup.RecordInfo) => {
+            onBatchDelete(row);
+        },
+    },
+];
+
+defineExpose({
+    acceptParams,
+});
+</script>