feat: 实现数据库备份与恢复

mayfly_go_web/src/common/utils/date.ts

@@ -24,5 +24,8 @@ export function dateStrFormat(fmt: string, dateStr: string) {
 }
 
 export function dateFormat(dateStr: string) {
+    if (dateStr.startsWith('0001-01-01', 0)) {
+        return '';
+    }
     return dateFormat2('yyyy-MM-dd HH:mm:ss', new Date(dateStr));
 }

mayfly_go_web/src/views/ops/db/DbBackupEdit.vue

@@ -0,0 +1,182 @@
+<template>
+    <div>
+        <el-dialog :title="title" :model-value="visible" :before-close="cancel" :close-on-click-modal="false" :destroy-on-close="true" width="38%">
+            <el-form :model="state.form" ref="backupForm" label-width="auto" :rules="rules">
+                <el-form-item prop="dbNames" label="数据库名称">
+                    <el-select
+                        @change="changeDatabase"
+                        v-model="state.selectedDbNames"
+                        multiple
+                        clearable
+                        collapse-tags
+                        collapse-tags-tooltip
+                        filterable
+                        :disabled="state.editOrCreate"
+                        placeholder="数据库名称"
+                        style="width: 100%"
+                    >
+                        <el-option v-for="db in state.dbNamesWithoutBackup" :key="db" :label="db" :value="db" />
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item prop="name" label="任务名称">
+                    <el-input v-model.number="state.form.name" type="text" placeholder="任务名称"></el-input>
+                </el-form-item>
+                <el-form-item prop="startTime" label="开始时间">
+                    <el-date-picker v-model="state.form.startTime" type="datetime" placeholder="开始时间" />
+                </el-form-item>
+                <el-form-item prop="intervalDay" label="备份周期">
+                    <el-input v-model.number="state.form.intervalDay" type="number" placeholder="备份周期（单位：天）"></el-input>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="cancel()">取 消</el-button>
+                    <el-button type="primary" :loading="state.btnLoading" @click="btnOk">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue';
+import { dbApi } from './api';
+import { ElMessage } from 'element-plus';
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+    },
+    data: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+    dbId: {
+        type: [Number],
+        required: true,
+    },
+});
+
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change']);
+
+const rules = {
+    dbNames: [
+        {
+            required: true,
+            message: '请选择需要备份的数据库',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    intervalDay: [
+        {
+            required: true,
+            pattern: /^[1-9]\d*$/,
+            message: '请输入正整数',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    startTime: [
+        {
+            required: true,
+            message: '请选择开始时间',
+            trigger: ['change', 'blur'],
+        },
+    ],
+};
+
+const backupForm: any = ref(null);
+
+const state = reactive({
+    form: {
+        id: 0,
+        dbId: 0,
+        dbNames: String,
+        name: null as any,
+        intervalDay: 1,
+        startTime: null as any,
+        repeated: null as any,
+    },
+    btnLoading: false,
+    selectedDbNames: [] as any,
+    dbNamesWithoutBackup: [] as any,
+    editOrCreate: false,
+});
+
+watch(props, (newValue: any) => {
+    if (newValue.visible) {
+        init(newValue.data);
+    }
+});
+
+/**
+ * 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加数据库
+ */
+const changeDatabase = () => {
+    state.form.dbNames = state.selectedDbNames.length == 0 ? '' : state.selectedDbNames.join(' ');
+};
+
+const init = (data: any) => {
+    state.selectedDbNames = [];
+    state.form.dbId = props.dbId;
+    if (data) {
+        state.editOrCreate = true;
+        state.dbNamesWithoutBackup = [data.dbName];
+        state.selectedDbNames = [data.dbName];
+        state.form.id = data.id;
+        state.form.dbNames = data.dbName;
+        state.form.name = data.name;
+        state.form.intervalDay = data.intervalDay;
+        state.form.startTime = data.startTime;
+    } else {
+        state.editOrCreate = false;
+        state.form.name = '';
+        state.form.intervalDay = 1;
+        const now = new Date();
+        state.form.startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+        getDbNamesWithoutBackup();
+    }
+};
+
+const getDbNamesWithoutBackup = async () => {
+    if (props.dbId > 0) {
+        state.dbNamesWithoutBackup = await dbApi.getDbNamesWithoutBackup.request({ dbId: props.dbId });
+    }
+};
+
+const btnOk = async () => {
+    backupForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            state.form.repeated = true;
+            const reqForm = { ...state.form };
+            let api = dbApi.createDbBackup;
+            if (props.data) {
+                api = dbApi.saveDbBackup;
+            }
+            api.request(reqForm).then(() => {
+                ElMessage.success('保存成功');
+                emit('val-change', state.form);
+                state.btnLoading = true;
+                setTimeout(() => {
+                    state.btnLoading = false;
+                }, 1000);
+
+                cancel();
+            });
+        } else {
+            ElMessage.error('请正确填写信息');
+            return false;
+        }
+    });
+};
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/db/DbBackupList.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="db-backup">
+        <page-table
+            height="100%"
+            ref="pageTableRef"
+            :page-api="dbApi.getDbBackups"
+            :show-selection="true"
+            v-model:selection-data="state.selectedData"
+            :searchItems="searchItems"
+            :before-query-fn="beforeQueryFn"
+            v-model:query-form="query"
+            :data="state.data"
+            :columns="columns"
+            :total="state.total"
+            v-model:page-size="query.pageSize"
+            v-model:page-num="query.pageNum"
+        >
+            <template #dbSelect>
+                <el-select v-model="query.dbName" placeholder="请选择数据库" style="width: 200px" filterable clearable>
+                    <el-option v-for="item in props.dbNames" :key="item" :label="`${item}`" :value="item"> </el-option>
+                </el-select>
+            </template>
+
+            <template #tableHeader>
+                <el-button type="primary" icon="plus" @click="createDbBackup()">添加</el-button>
+                <el-button type="primary" icon="video-play" @click="enableDbBackup(null)">启用</el-button>
+                <el-button type="primary" icon="video-pause" @click="disableDbBackup(null)">禁用</el-button>
+            </template>
+
+            <template #action="{ data }">
+                <el-button @click="editDbBackup(data)" type="primary" link>编辑</el-button>
+                <el-button @click="enableDbBackup(data)" type="primary" link>启用</el-button>
+                <el-button @click="disableDbBackup(data)" type="primary" link>禁用</el-button>
+            </template>
+        </page-table>
+
+        <db-backup-edit
+            @val-change="search"
+            :title="dbBackupEditDialog.title"
+            :dbId="dbId"
+            :data="dbBackupEditDialog.data"
+            v-model:visible="dbBackupEditDialog.visible"
+        ></db-backup-edit>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, defineAsyncComponent, Ref, ref } from 'vue';
+import { dbApi } from './api';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn } from '@/components/pagetable';
+import { SearchItem } from '@/components/SearchForm';
+import { ElMessage } from 'element-plus';
+
+const DbBackupEdit = defineAsyncComponent(() => import('./DbBackupEdit.vue'));
+const pageTableRef: Ref<any> = ref(null);
+
+const props = defineProps({
+    dbId: {
+        type: [Number],
+        required: true,
+    },
+    dbNames: {
+        type: [Array<String>],
+        required: true,
+    },
+});
+
+const searchItems = [SearchItem.slot('dbName', '数据库名称', 'dbSelect')];
+
+const columns = [
+    TableColumn.new('dbName', '数据库名称'),
+    TableColumn.new('name', '任务名称'),
+    TableColumn.new('startTime', '启动时间').isTime(),
+    TableColumn.new('intervalDay', '备份周期'),
+    TableColumn.new('enabled', '是否启用'),
+    TableColumn.new('lastResult', '执行结果'),
+    TableColumn.new('lastTime', '执行时间').isTime(),
+    TableColumn.new('action', '操作').isSlot().setMinWidth(220).fixedRight().alignCenter(),
+];
+
+const emptyQuery = {
+    dbId: 0,
+    dbName: '',
+    pageNum: 1,
+    pageSize: 10,
+    repeated: true,
+};
+
+const state = reactive({
+    data: [],
+    total: 0,
+    query: emptyQuery,
+    dbBackupEditDialog: {
+        visible: false,
+        data: null as any,
+        title: '创建数据库备份任务',
+    },
+    /**
+     * 选中的数据
+     */
+    selectedData: [],
+});
+
+const { query, dbBackupEditDialog } = toRefs(state);
+
+const beforeQueryFn = (query: any) => {
+    query.dbId = props.dbId;
+    return query;
+};
+
+const search = async () => {
+    await pageTableRef.value.search();
+};
+
+const createDbBackup = async () => {
+    state.dbBackupEditDialog.data = null;
+    state.dbBackupEditDialog.title = '创建数据库备份任务';
+    state.dbBackupEditDialog.visible = true;
+};
+
+const editDbBackup = async (data: any) => {
+    state.dbBackupEditDialog.data = data;
+    state.dbBackupEditDialog.title = '修改数据库备份任务';
+    state.dbBackupEditDialog.visible = true;
+};
+
+const enableDbBackup = async (data: any) => {
+    let backupId: String;
+    if (data) {
+        backupId = data.id;
+    } else if (state.selectedData.length > 0) {
+        backupId = state.selectedData.map((x: any) => x.id).join(' ');
+    } else {
+        ElMessage.error('请选择需要启用的备份任务');
+        return;
+    }
+    await dbApi.enableDbBackup.request({ dbId: props.dbId, backupId: backupId });
+    await search();
+    ElMessage.success('启用成功');
+};
+
+const disableDbBackup = async (data: any) => {
+    let backupId: String;
+    if (data) {
+        backupId = data.id;
+    } else if (state.selectedData.length > 0) {
+        backupId = state.selectedData.map((x: any) => x.id).join(' ');
+    } else {
+        ElMessage.error('请选择需要禁用的备份任务');
+        return;
+    }
+    await dbApi.disableDbBackup.request({ dbId: props.dbId, backupId: backupId });
+    await search();
+    ElMessage.success('禁用成功');
+};
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/db/DbList.vue

@@ -61,10 +61,10 @@
                     <template #dropdown>
                         <el-dropdown-menu>
                             <el-dropdown-item :command="{ type: 'detail', data }"> 详情 </el-dropdown-item>
-
-                            <!-- <el-dropdown-item :command="{ type: 'edit', data }" v-if="actionBtns[perms.saveDb]"> 编辑 </el-dropdown-item> -->
-
+                            <!--<el-dropdown-item :command="{ type: 'edit', data }" v-if="actionBtns[perms.saveDb]"> 编辑 </el-dropdown-item>-->
                             <el-dropdown-item :command="{ type: 'dumpDb', data }" v-if="data.type == DbType.mysql"> 导出 </el-dropdown-item>
+                            <el-dropdown-item :command="{ type: 'dbBackup', data }" v-if="data.type == DbType.mysql"> 备份 </el-dropdown-item>
+                            <el-dropdown-item :command="{ type: 'dbRestore', data }" v-if="data.type == DbType.mysql"> 恢复 </el-dropdown-item>
                         </el-dropdown-menu>
                     </template>
                 </el-dropdown>
@@ -122,6 +122,26 @@
             <db-sql-exec-log :db-id="sqlExecLogDialog.dbId" :dbs="sqlExecLogDialog.dbs" />
         </el-dialog>
 
+        <el-dialog
+            width="90%"
+            :title="`${dbBackupDialog.title} - 数据库备份`"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
+            v-model="dbBackupDialog.visible"
+        >
+            <db-backup-list :dbId="dbBackupDialog.dbId" :dbNames="dbBackupDialog.dbs" />
+        </el-dialog>
+
+        <el-dialog
+            width="90%"
+            :title="`${dbRestoreDialog.title} - 数据库恢复`"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
+            v-model="dbRestoreDialog.visible"
+        >
+            <db-restore-list :dbId="dbRestoreDialog.dbId" :dbNames="dbRestoreDialog.dbs" />
+        </el-dialog>
+
         <el-dialog v-model="infoDialog.visible" :before-close="onBeforeCloseInfoDialog" :close-on-click-modal="false">
             <el-descriptions title="详情" :column="3" border>
                 <!-- <el-descriptions-item :span="3" label="标签路径">{{ infoDialog.data?.tagPath }}</el-descriptions-item> -->
@@ -165,6 +185,8 @@ import { useRoute } from 'vue-router';
 import { getDbDialect } from './dialect/index';
 import { getTagPathSearchItem } from '../component/tag';
 import { SearchItem } from '@/components/SearchForm';
+import DbBackupList from './DbBackupList.vue';
+import DbRestoreList from './DbRestoreList.vue';
 
 const DbEdit = defineAsyncComponent(() => import('./DbEdit.vue'));
 
@@ -225,6 +247,24 @@ const state = reactive({
         dbs: [],
         dbId: 0,
     },
+    // 数据库备份弹框
+    dbBackupDialog: {
+        title: '',
+        visible: false,
+        dbs: [],
+        dbId: 0,
+    },
+    // 数据库恢复弹框
+    dbRestoreDialog: {
+        title: '',
+        visible: false,
+        dbs: [],
+        dbId: 0,
+    },
+    chooseTableName: '',
+    tableInfoDialog: {
+        visible: false,
+    },
     exportDialog: {
         visible: false,
         dbId: 0,
@@ -246,7 +286,7 @@ const state = reactive({
     },
 });
 
-const { db, selectionData, query, infoDialog, sqlExecLogDialog, exportDialog, dbEditDialog } = toRefs(state);
+const { db, selectionData, query, infoDialog, sqlExecLogDialog, exportDialog, dbEditDialog, dbBackupDialog, dbRestoreDialog } = toRefs(state);
 
 onMounted(async () => {
     if (Object.keys(actionBtns).length > 0) {
@@ -304,6 +344,15 @@ const handleMoreActionCommand = (commond: any) => {
         }
         case 'dumpDb': {
             onDumpDbs(data);
+            return;
+        }
+        case 'dbBackup': {
+            onShowDbBackupDialog(data);
+            return;
+        }
+        case 'dbRestore': {
+            onShowDbRestoreDialog(data);
+            return;
         }
     }
 };
@@ -347,6 +396,20 @@ const onBeforeCloseSqlExecDialog = () => {
     state.sqlExecLogDialog.dbId = 0;
 };
 
+const onShowDbBackupDialog = async (row: any) => {
+    state.dbBackupDialog.title = `${row.name}`;
+    state.dbBackupDialog.dbId = row.id;
+    state.dbBackupDialog.dbs = row.database.split(' ');
+    state.dbBackupDialog.visible = true;
+};
+
+const onShowDbRestoreDialog = async (row: any) => {
+    state.dbRestoreDialog.title = `${row.name}`;
+    state.dbRestoreDialog.dbId = row.id;
+    state.dbRestoreDialog.dbs = row.database.split(' ');
+    state.dbRestoreDialog.visible = true;
+};
+
 const onDumpDbs = async (row: any) => {
     const dbs = row.database.split(' ');
     const data = [];

mayfly_go_web/src/views/ops/db/DbRestoreEdit.vue

@@ -0,0 +1,283 @@
+<template>
+    <div>
+        <el-dialog :title="title" :model-value="visible" :before-close="cancel" :close-on-click-modal="false" width="38%">
+            <el-form :model="state.form" ref="restoreForm" label-width="auto" :rules="rules">
+                <el-form-item label="恢复方式">
+                    <el-radio-group :disabled="state.editOrCreate" v-model="state.restoreMode">
+                        <el-radio label="point-in-time">指定时间点</el-radio>
+                        <el-radio label="backup-history">指定备份</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item prop="dbName" label="数据库名称">
+                    <el-select
+                        :disabled="state.editOrCreate"
+                        @change="changeDatabase"
+                        v-model="state.form.dbName"
+                        placeholder="数据库名称"
+                        filterable
+                        clearable
+                        class="w100"
+                    >
+                        <el-option v-for="item in props.dbNames" :key="item" :label="`${item}`" :value="item"> </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item v-if="state.restoreMode == 'point-in-time'" prop="pointInTime" label="恢复时间点">
+                    <el-date-picker :disabled="state.editOrCreate" v-model="state.form.pointInTime" type="datetime" placeholder="恢复时间点" />
+                </el-form-item>
+                <el-form-item v-if="state.restoreMode == 'backup-history'" prop="dbBackupHistoryId" label="数据库备份">
+                    <el-select
+                        :disabled="state.editOrCreate"
+                        @change="changeHistory"
+                        v-model="state.history"
+                        placeholder="数据库备份"
+                        filterable
+                        clearable
+                        class="w100"
+                    >
+                        <el-option v-for="item in state.histories" :key="item.id" :label="item.name" :value="item"> </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item prop="startTime" label="开始时间">
+                    <el-date-picker :disabled="state.editOrCreate" v-model="state.form.startTime" type="datetime" placeholder="开始时间" />
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="cancel()">取 消</el-button>
+                    <el-button type="primary" :loading="state.btnLoading" @click="btnOk">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive, ref, watch } from 'vue';
+import { dbApi } from './api';
+import { ElMessage } from 'element-plus';
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+    },
+    data: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+    dbId: {
+        type: [Number],
+        required: true,
+    },
+    dbNames: {
+        type: Array,
+        required: true,
+    },
+});
+
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change']);
+
+const validatePointInTime = (rule: any, value: any, callback: any) => {
+    if (!state.histories || state.histories.length == 0) {
+        callback(new Error('数据库没有备份记录'));
+        return;
+    }
+    const history = state.histories[state.histories.length - 1];
+    if (value < new Date(history.createTime)) {
+        callback(new Error('在此之前数据库没有备份记录'));
+        return;
+    }
+    callback();
+};
+
+const rules = {
+    dbName: [
+        {
+            required: true,
+            message: '请选择需要恢复的数据库',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    pointInTime: [
+        {
+            required: true,
+            // message: '请选择恢复时间点',
+            validator: validatePointInTime,
+            trigger: ['change', 'blur'],
+        },
+    ],
+    dbBackupHistoryId: [
+        {
+            required: true,
+            message: '请选择数据库备份',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    intervalDay: [
+        {
+            required: true,
+            pattern: /^[1-9]\d*$/,
+            message: '请输入正整数',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    startTime: [
+        {
+            required: true,
+            message: '请选择开始时间',
+            trigger: ['change', 'blur'],
+        },
+    ],
+};
+
+const restoreForm: any = ref(null);
+
+const state = reactive({
+    form: {
+        id: 0,
+        dbId: 0,
+        dbName: null as any,
+        intervalDay: 1,
+        startTime: null as any,
+        repeated: null as any,
+        dbBackupId: null as any,
+        dbBackupHistoryId: null as any,
+        dbBackupHistoryName: null as any,
+        pointInTime: null as any,
+    },
+    btnLoading: false,
+    selectedDbNames: [] as any,
+    dbNamesWithoutRestore: [] as any,
+    editOrCreate: false,
+    histories: [] as any,
+    history: null as any,
+    restoreMode: null as any,
+});
+
+onMounted(async () => {
+    await init(props.data);
+});
+
+watch(props, (newValue: any) => {
+    if (newValue.visible) {
+        init(newValue.data);
+    }
+});
+
+/**
+ * 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加数据库
+ */
+const changeDatabase = async () => {
+    await getBackupHistories(props.dbId, state.form.dbName);
+};
+
+const changeHistory = async () => {
+    if (state.history) {
+        state.form.dbBackupId = state.history.dbBackupId;
+        state.form.dbBackupHistoryId = state.history.id;
+        state.form.dbBackupHistoryName = state.history.name;
+    }
+};
+
+const init = async (data: any) => {
+    state.selectedDbNames = [];
+    state.form.dbId = props.dbId;
+    if (data) {
+        state.editOrCreate = true;
+        state.dbNamesWithoutRestore = [data.dbName];
+        state.selectedDbNames = [data.dbName];
+        state.form.id = data.id;
+        state.form.dbName = data.dbName;
+        state.form.intervalDay = data.intervalDay;
+        state.form.pointInTime = data.pointInTime;
+        state.form.startTime = data.startTime;
+        state.form.dbBackupId = data.dbBackupId;
+        state.form.dbBackupHistoryId = data.dbBackupHistoryId;
+        state.form.dbBackupHistoryName = data.dbBackupHistoryName;
+        if (data.dbBackupHistoryId > 0) {
+            state.restoreMode = 'backup-history';
+        } else {
+            state.restoreMode = 'point-in-time';
+        }
+        state.history = {
+            dbBackupId: data.dbBackupId,
+            id: data.dbBackupHistoryId,
+            name: data.dbBackupHistoryName,
+            createTime: data.createTime,
+        };
+        await getBackupHistories(props.dbId, data.dbName);
+    } else {
+        state.form.dbName = '';
+        state.editOrCreate = false;
+        state.form.intervalDay = 1;
+        state.form.pointInTime = new Date();
+        state.form.startTime = new Date();
+        state.histories = [];
+        state.history = null;
+        state.restoreMode = 'point-in-time';
+        await getDbNamesWithoutRestore();
+    }
+};
+
+const getDbNamesWithoutRestore = async () => {
+    if (props.dbId > 0) {
+        state.dbNamesWithoutRestore = await dbApi.getDbNamesWithoutRestore.request({ dbId: props.dbId });
+    }
+};
+
+const btnOk = async () => {
+    restoreForm.value.validate(async (valid: any) => {
+        if (valid) {
+            if (state.restoreMode == 'point-in-time') {
+                state.form.dbBackupId = 0;
+                state.form.dbBackupHistoryId = 0;
+                state.form.dbBackupHistoryName = '';
+            } else {
+                state.form.pointInTime = '0001-01-01T00:00:00Z';
+            }
+            state.form.repeated = false;
+            const reqForm = { ...state.form };
+            let api = dbApi.createDbRestore;
+            if (props.data) {
+                api = dbApi.saveDbRestore;
+            }
+            api.request(reqForm).then(() => {
+                ElMessage.success('保存成功');
+                emit('val-change', state.form);
+                state.btnLoading = true;
+                setTimeout(() => {
+                    state.btnLoading = false;
+                }, 1000);
+                cancel();
+            });
+        } else {
+            ElMessage.error('请正确填写信息');
+            return false;
+        }
+    });
+};
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
+
+const getBackupHistories = async (dbId: Number, dbName: String) => {
+    if (!dbId || !dbName) {
+        state.histories = [];
+        return;
+    }
+    const data = await dbApi.getDbBackupHistories.request({ dbId, dbName });
+    if (!data || !data.list) {
+        // state.form.dbName = '';
+        ElMessage.error('该数据库没有备份记录，无法创建数据库恢复任务');
+        state.histories = [];
+        return;
+    }
+    state.histories = data.list;
+};
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/db/DbRestoreList.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="db-restore">
+        <page-table
+            height="100%"
+            ref="pageTableRef"
+            :page-api="dbApi.getDbRestores"
+            :show-selection="true"
+            v-model:selection-data="state.selectedData"
+            :searchItems="searchItems"
+            :before-query-fn="beforeQueryFn"
+            v-model:query-form="query"
+            :data="state.data"
+            :columns="columns"
+            :total="state.total"
+            v-model:page-size="query.pageSize"
+            v-model:page-num="query.pageNum"
+        >
+            <template #dbSelect>
+                <el-select v-model="query.dbName" placeholder="请选择数据库" style="width: 200px" filterable clearable>
+                    <el-option v-for="item in dbNames" :key="item" :label="`${item}`" :value="item"> </el-option>
+                </el-select>
+            </template>
+
+            <template #tableHeader>
+                <el-button type="primary" icon="plus" @click="createDbRestore()">添加</el-button>
+                <el-button type="primary" icon="video-play" @click="enableDbRestore(null)">启用</el-button>
+                <el-button type="primary" icon="video-pause" @click="disableDbRestore(null)">禁用</el-button>
+            </template>
+
+            <template #action="{ data }">
+                <el-button @click="showDbRestore(data)" type="primary" link>详情</el-button>
+                <el-button @click="enableDbRestore(data)" type="primary" link>启用</el-button>
+                <el-button @click="disableDbRestore(data)" type="primary" link>禁用</el-button>
+            </template>
+        </page-table>
+
+        <db-restore-edit
+            @val-change="search"
+            :title="dbRestoreEditDialog.title"
+            :dbId="dbId"
+            :dbNames="dbNames"
+            :data="dbRestoreEditDialog.data"
+            v-model:visible="dbRestoreEditDialog.visible"
+        ></db-restore-edit>
+
+        <el-dialog v-model="infoDialog.visible" title="数据库恢复">
+            <el-descriptions :column="1" border>
+                <el-descriptions-item :span="1" label="数据库名称">{{ infoDialog.data.dbName }}</el-descriptions-item>
+                <el-descriptions-item v-if="!infoDialog.data.dbBackupHistoryName" :span="1" label="恢复时间点">{{
+                    dateFormat(infoDialog.data.pointInTime)
+                }}</el-descriptions-item>
+                <el-descriptions-item v-if="infoDialog.data.dbBackupHistoryName" :span="1" label="数据库备份">{{
+                    infoDialog.data.dbBackupHistoryName
+                }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="开始时间">{{ dateFormat(infoDialog.data.startTime) }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="是否启用">{{ infoDialog.data.enabled }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="执行时间">{{ dateFormat(infoDialog.data.lastTime) }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="执行结果">{{ infoDialog.data.lastResult }}</el-descriptions-item>
+            </el-descriptions>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, defineAsyncComponent, Ref, ref } from 'vue';
+import { dbApi } from './api';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn } from '@/components/pagetable';
+import { SearchItem } from '@/components/SearchForm';
+import { ElMessage } from 'element-plus';
+import { dateFormat } from '@/common/utils/date';
+const DbRestoreEdit = defineAsyncComponent(() => import('./DbRestoreEdit.vue'));
+const pageTableRef: Ref<any> = ref(null);
+
+const props = defineProps({
+    dbId: {
+        type: [Number],
+        required: true,
+    },
+    dbNames: {
+        type: [Array<String>],
+        required: true,
+    },
+});
+
+// const queryConfig = [TableQuery.slot('dbName', '数据库名称', 'dbSelect')];
+const searchItems = [SearchItem.slot('dbName', '数据库名称', 'dbSelect')];
+
+const columns = [
+    TableColumn.new('dbName', '数据库名称'),
+    TableColumn.new('startTime', '启动时间').isTime(),
+    TableColumn.new('enabled', '是否启用'),
+    TableColumn.new('lastTime', '执行时间').isTime(),
+    TableColumn.new('lastResult', '执行结果'),
+    TableColumn.new('action', '操作').isSlot().setMinWidth(220).fixedRight().alignCenter(),
+];
+
+const emptyQuery = {
+    dbId: props.dbId,
+    dbName: '',
+    pageNum: 1,
+    pageSize: 10,
+    repeated: false,
+};
+
+const state = reactive({
+    data: [],
+    total: 0,
+    query: emptyQuery,
+    dbRestoreEditDialog: {
+        visible: false,
+        data: null as any,
+        title: '创建数据库恢复任务',
+    },
+    infoDialog: {
+        visible: false,
+        data: null as any,
+    },
+    /**
+     * 选中的数据
+     */
+    selectedData: [],
+});
+
+const { query, dbRestoreEditDialog, infoDialog } = toRefs(state);
+
+const beforeQueryFn = (query: any) => {
+    query.dbId = props.dbId;
+    return query;
+};
+
+const search = async () => {
+    await pageTableRef.value.search();
+};
+
+const createDbRestore = async () => {
+    state.dbRestoreEditDialog.data = null;
+    state.dbRestoreEditDialog.title = '数据库恢复';
+    state.dbRestoreEditDialog.visible = true;
+};
+
+const showDbRestore = async (data: any) => {
+    state.infoDialog.data = data;
+    state.infoDialog.visible = true;
+};
+
+const enableDbRestore = async (data: any) => {
+    let restoreId: String;
+    if (data) {
+        restoreId = data.id;
+    } else if (state.selectedData.length > 0) {
+        restoreId = state.selectedData.map((x: any) => x.id).join(' ');
+    } else {
+        ElMessage.error('请选择需要启用的恢复任务');
+        return;
+    }
+    await dbApi.enableDbRestore.request({ dbId: props.dbId, restoreId: restoreId });
+    await search();
+    ElMessage.success('启用成功');
+};
+
+const disableDbRestore = async (data: any) => {
+    let restoreId: String;
+    if (data) {
+        restoreId = data.id;
+    } else if (state.selectedData.length > 0) {
+        restoreId = state.selectedData.map((x: any) => x.id).join(' ');
+    } else {
+        ElMessage.error('请选择需要禁用的恢复任务');
+        return;
+    }
+    await dbApi.disableDbRestore.request({ dbId: props.dbId, restoreId: restoreId });
+    await search();
+    ElMessage.success('禁用成功');
+};
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/db/InstanceList.vue

@@ -28,8 +28,8 @@
             </template>
         </page-table>
 
-        <el-dialog v-model="infoDialog.visible">
-            <el-descriptions title="详情" :column="3" border>
+        <el-dialog v-model="infoDialog.visible" title="详情">
+            <el-descriptions :column="3" border>
                 <el-descriptions-item :span="2" label="名称">{{ infoDialog.data.name }}</el-descriptions-item>
                 <el-descriptions-item :span="1" label="id">{{ infoDialog.data.id }}</el-descriptions-item>
                 <el-descriptions-item :span="2" label="主机">{{ infoDialog.data.host }}</el-descriptions-item>

mayfly_go_web/src/views/ops/db/api.ts

@@ -32,7 +32,6 @@ export const dbApi = {
     // 获取数据库sql执行记录
     getSqlExecs: Api.newGet('/dbs/{dbId}/sql-execs'),
 
-    // 获取权限列表
     instances: Api.newGet('/instances'),
     getInstance: Api.newGet('/instances/{instanceId}'),
     getAllDatabase: Api.newGet('/instances/{instanceId}/databases'),
@@ -41,4 +40,21 @@ export const dbApi = {
     saveInstance: Api.newPost('/instances'),
     getInstancePwd: Api.newGet('/instances/{id}/pwd'),
     deleteInstance: Api.newDelete('/instances/{id}'),
+
+    // 获取数据库备份列表
+    getDbBackups: Api.newGet('/dbs/{dbId}/backups'),
+    createDbBackup: Api.newPost('/dbs/{dbId}/backups'),
+    getDbNamesWithoutBackup: Api.newGet('/dbs/{dbId}/db-names-without-backup'),
+    enableDbBackup: Api.newPut('/dbs/{dbId}/backups/{backupId}/enable'),
+    disableDbBackup: Api.newPut('/dbs/{dbId}/backups/{backupId}/disable'),
+    saveDbBackup: Api.newPut('/dbs/{dbId}/backups/{id}'),
+    getDbBackupHistories: Api.newGet('/dbs/{dbId}/backup-histories'),
+
+    // 获取数据库备份列表
+    getDbRestores: Api.newGet('/dbs/{dbId}/restores'),
+    createDbRestore: Api.newPost('/dbs/{dbId}/restores'),
+    getDbNamesWithoutRestore: Api.newGet('/dbs/{dbId}/db-names-without-restore'),
+    enableDbRestore: Api.newPut('/dbs/{dbId}/restores/{restoreId}/enable'),
+    disableDbRestore: Api.newPut('/dbs/{dbId}/restores/{restoreId}/disable'),
+    saveDbRestore: Api.newPut('/dbs/{dbId}/restores/{id}'),
 };