gphm_web/src/views/manage/dbBackupRestore/index.vue

<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :init-param="initParam"
      :columns="columns"
      row-key="id"
      :request-api="listBackupRestoreLogApi"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" v-auth="['manage:backupRestore:sync']" @click="backupAll()"> 全量备份 </el-button>
        <el-button type="primary" v-auth="['manage:backupRestore:sync']" @click="backup()"> 增量备份 </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link icon="View" v-auth="['manage:backupRestore:query']" @click="openDialog(3, '备份恢复日志查看', scope.row)">
          查看
        </el-button>
        <el-button
          type="primary"
          v-if="scope.row.operateType === '备份' && scope.row.restoreStatus !== '成功'"
          link
          icon="View"
          @click="restore(scope.row)"
        >
          恢复
        </el-button>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef" />
    <TableDialog ref="tableDialogRef" @submit-form="submitForm" />
  </div>
</template>

<script setup lang="tsx" name="BackupRestore">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import ProTable from '@/components/ProTable/index.vue'
import FormDialog from '@/components/FormDialog/index.vue'
import TableDialog from '@/components/TableDialog/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { listBackupRestoreLogApi, dbBackupAllApi, dbRestoreApi, dbBackupApi } from '@/api/modules/manage/backupRestore'
import { listDbTableApi } from '@/api/modules/tool/gen'

// ProTable 实例
const proTable = ref<ProTableInstance>()
const dataCallback = (data: any) => {
  const page = proTable.value!.pageable
  return {
    list: data.data,
    total: data.total,
    pageNum: page.pageNum,
    pageSize: page.pageSize
  }
}
const dataType = [
  { label: '文件', value: 1 },
  { label: '数据库', value: 2 }
]
const initParam = reactive({ type: 2 })
const backupAll = () => {
  dbBackupAllApi({}).then(res => {
    if (res.code === 200) {
      proTable.value?.getTableList()
      ElMessage.success('备份成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const restore = (val: any) => {
  dbRestoreApi(val.id).then(res => {
    if (res.code === 200) {
      proTable.value?.getTableList()
      ElMessage.success('恢复成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}
// const syncFileData = () => {
//   syncFileDataApi({}).then(res => {
//     if (res.code === 200) {
//       ElMessage.success('同步成功')
//       proTable.value?.getTableList()
//     } else {
//       ElMessage.error(res.msg)
//     }
//   })
// }
// 表格弹框提交
const submitForm = () => {
  proTable.value?.getTableList()
}
// 批量添加表信息
const tableDialogRef = ref<InstanceType<typeof TableDialog> | null>(null)
const backup = () => {
  const params = {
    title: '备份表',
    width: 880,
    toolButton: false,
    rowKey: 'tableName',
    columns: subColumns,
    api: dbBackupApi,
    getTableList: listDbTableApi
  }
  tableDialogRef.value?.openDialog(params)
}

const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
// 打开弹框的功能
const openDialog = async (type: number, title: string, row?: any) => {
  // 重置表单
  setItemsOptions()
  const params = {
    title,
    width: 580,
    isEdit: false,
    itemsOptions: itemsOptions,
    model: row,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  {
    prop: 'type',
    label: '数据类型',
    enum: dataType,
    tag: true,
    search: {
      el: 'select'
    }
  },
  {
    prop: 'operateType',
    label: '操作方式',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'target',
    label: '目标'
  },
  {
    prop: 'status',
    label: '备份状态'
  },
  {
    prop: 'updateTime',
    label: '更新时间'
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
// 表单配置项
let itemsOptions: ProForm.ItemsOptions[] = []
const setItemsOptions = () => {
  itemsOptions = [
    {
      label: '数据类型',
      prop: 'type',
      compOptions: {
        elTagName: 'select',
        enum: dataType,
        placeholder: '请输入数据类型'
      }
    },
    {
      label: '目标',
      prop: 'target',
      compOptions: {
        placeholder: '请输入操作方式'
      }
    },
    {
      label: '操作方式',
      prop: 'operateType',
      compOptions: {
        placeholder: '请输入操作方式'
      }
    },
    {
      label: '备份状态',
      prop: 'status',
      compOptions: {
        placeholder: '请输入备份状态'
      }
    }
  ]
}
// 表格配置项
const subColumns: ColumnProps[] = [
  { type: 'selection', fixed: 'left', width: 60 },
  {
    prop: 'tableName',
    label: '表名称',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'tableComment',
    label: '表描述',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'createTime',
    label: '创建时间'
  }
]
</script>