IDCDatasync-vue/src/views/securityAndBackup/backup.vue

<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5">
            <a-form-item label="任务名称">
              <a-input placeholder="请输入" v-model="queryParam.databaseName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="数据库">
              <a-select placeholder="请选择" option-filter-prop="children" size="small" v-model="queryParam.schemaName">
                <a-select-option v-for="d in allSchemaName" :key="d">
                  {{ d }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="调度开始时间">
              <a-date-picker  v-model="queryParam.startTime" @change="onChangeStartTime" />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="5">
            <a-form-item label="调度结束时间">
              <a-date-picker  v-model="queryParam.endtime" @change="onChangeEndTime" />
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="4" :sm="4">
              <a-button type="primary" style="left: 10px" @click="loadData" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload"
                style="margin-left: 8px;left: 10px">重置</a-button>
            </a-col>
          </span>

        </a-row>
      </a-form>
    </div>

    <div class="linese"></div>
    <!-- table区域-begin -->
    <div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">
        <!--        :locale="myLocale"-->

        <!-- 字符串超长截取省略号显示-->
        <template slot="Status" slot-scope="text">
          <span style="color:black;" v-if="text === 0">未备份</span>
          <span style="color:darkorange;" v-if="text === 1">备份中</span>
          <span style="color:#87d068;" v-if="text === 2">完成</span>
        </template>
        <template slot="endisStatus" slot-scope="text">
          <span style="color:black;" v-if="text === 0">未启用</span>
          <span style="color:#87d068;" v-if="text === 1">启用</span>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">详情</a>
          <!-- <a-divider type="vertical" />
          <a>查看日志</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm> -->
        </span>
      </a-table>
    </div>
    <div class="linese"></div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
  </a-card>
</template>

<script>
import {
  shipModelPageList,
  shipModeldeleteById
} from '@/api/ship'
import { getAction } from '@/api/manage'
import {
  taskCreate,
  taskUpdateById,
  taskQueryById,
  taskPageList,
  taskDistributeTask,
  taskDeleteById
} from '@/api/task'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from "@/components/jeecg/JEllipsis";

export default {
  name: "backup",
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      description: '数据库备份',
      dataSource: [
        {
          id: "1",
          name: "第一次备份",
          dataBaseName: 'test',
          startTime: "2024-03-06 10:30:26",
          endTime: "2024-03-06 15:30:26",
          larmder: '',
          Status: 2,
          endisStatus: 1
        }
      ],
      schemaName: "",
      allSchemaName: [],
      queryParam: {
        pageNum: 1,
        pageSize: 20
      },
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'id',
          width: 60,
          align: "id",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '任务名称',
          align: "center",
          dataIndex: 'name',
        },
        {
          title: '数据库',
          align: "center",
          dataIndex: 'dataBaseName',
        },
        {
          title: '调度开始时间',
          align: "center",
          dataIndex: 'startTime'
        },
        {
          title: '调度结束时间',
          align: "center",
          dataIndex: 'endTime',
        },
        {
          title: '表达式',
          align: "center",
          dataIndex: 'larmder',
        },
        {
          title: '调度状态',
          align: "center",
          dataIndex: 'Status',
          scopedSlots: { customRender: 'Status' },
        },
        {
          title: '是否启用',
          align: "center",
          dataIndex: 'endisStatus',
          scopedSlots: { customRender: 'endisStatus' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          width: 180,
          scopedSlots: { customRender: 'action' },
        }
      ]
    }
  },
  computed: {
  },
  created() {
    this.getAllSchemaName();
    this.loadData();
  },
  methods: {
    //筛选需要重写handleTableChange
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    getAllSchemaName() {
      getAction("/fileDataLink/getAllSchemaName").then((res) => {
        if (res.success) {
          console.log(res)
          this.allSchemaName = res.result;
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    loadData() {

    },
    handleDelete: function (id) {
      var that = this;
      taskDeleteById({ id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData();
        } else {
          that.$message.warning(res.message);
        }
      });
    },
    handleEdit: function (record) {
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
    },
    handleDistribute: function (id) {
      var that = this;
      taskDistributeTask({ id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData();
        } else {
          that.$message.warning(res.message);
        }
      });
    },
    handleAdd() {
      this.$refs.modalForm.add();
      this.$refs.modalForm.title = "新增";
    },
    onChangeStartTime(date, dateString) {
      console.log(date, dateString);
    },
    onChangeEndTime(date, dateString) {
      console.log(date, dateString);
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>