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

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listBackupRestoreLogApi" :data-callback="dataCallback">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" v-auth="['manage:backupRestore:sync']" @click="backup()"> 备份文件 </el-button>
        <el-button type="primary" v-auth="['manage:faultCase:sync']" icon="Refresh" @click="syncFileData()"> 同步文件至服务器 </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 === '备份'" link icon="View" @click="restore()"> 恢复 </el-button>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef" />
  </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 { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { listBackupRestoreLogApi, backupApi, restoreApi, syncFileDataApi } from '@/api/modules/manage/backupRestore'

// 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 backup = () => {
  backupApi().then(res => {
    if (res.code === 200) {
      proTable.value?.getTableList()
      ElMessage.success('备份成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const restore = () => {
  restoreApi().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 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: '数据类型'
  },
  {
    prop: 'operateType',
    label: '操作方式',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'status',
    label: '备份状态'
  },
  {
    prop: 'updateTime',
    label: '更新时间'
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
// 表单配置项
let itemsOptions: ProForm.ItemsOptions[] = []
const setItemsOptions = () => {
  itemsOptions = [
    {
      label: '数据类型',
      prop: 'type',
      compOptions: {
        placeholder: '请输入数据类型'
      }
    },
    {
      label: '操作方式',
      prop: 'operateType',
      compOptions: {
        placeholder: '请输入操作方式'
      }
    },
    {
      label: '备份状态',
      prop: 'status',
      compOptions: {
        placeholder: '请输入备份状态'
      }
    }
  ]
}
</script>
@/api/modules/manage/backupRestore