添加元数据界面，修改数据备份/恢复页面UI
This commit is contained in:
wangchengming
parent
9ebd7a24ec
commit
a6e15e0b04
149
src/views/data/metadata.vue
Normal file
149
src/views/data/metadata.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="20">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="数据类型">
|
||||
<a-select placeholder="选择同步状态" option-filter-prop="children" size="large"
|
||||
v-model="queryParam.syncState">
|
||||
<a-select-option key="">
|
||||
全部
|
||||
</a-select-option>
|
||||
<a-select-option key="0">
|
||||
未同步
|
||||
</a-select-option>
|
||||
<a-select-option key="1">
|
||||
进行中
|
||||
</a-select-option>
|
||||
<a-select-option key="2">
|
||||
已结束
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="关键词">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.databaseName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-button type="primary" style="left: 10px" icon="search">查询</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<a-row :gutter="30" style="padding: 0 10px;">
|
||||
<a-col :md="6">
|
||||
<div class="linese"></div>
|
||||
<!-- 分类区域 -->
|
||||
<div style="height:calc(100vh - 300px);background: #e6e9f1;padding:10px;">
|
||||
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="18">
|
||||
<div class="linese"></div>
|
||||
<!-- 表格区域 -->
|
||||
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
|
||||
<a-table ref="table" size="middle" style="height:calc(100vh - 344px);" bordered rowKey="id"
|
||||
:columns="columns" :dataSource="dataSource" :loading="loading">
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<!-- <span slot="name" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="20" />
|
||||
</span>
|
||||
<span slot="describe" slot-scope="text">
|
||||
<j-ellipsis :value="text" :length="20" />
|
||||
</span> -->
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "metadata",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
// 查询条件
|
||||
queryParam: {
|
||||
databaseName: null,
|
||||
syncState: null,
|
||||
pageNum: 1,
|
||||
pageSize: 9999999,
|
||||
},
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'id',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '字段名称',
|
||||
width: 200,
|
||||
align: "center",
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '索引类型',
|
||||
width: 130,
|
||||
align: "center",
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '数据长度',
|
||||
width: 100,
|
||||
align: "center",
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '数据精度',
|
||||
width: 100,
|
||||
align: "center",
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
align: "center",
|
||||
dataIndex: 'issuingTime',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -5,19 +5,35 @@
|
|||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="模式名称">
|
||||
<a-select placeholder="选择模式" option-filter-prop="children" size="large" v-model="queryParam.schemaName">
|
||||
<a-select-option v-for="d in allSchemaName" :key="d">
|
||||
{{ d }}
|
||||
<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="6" :sm="24" >
|
||||
<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 :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>
|
||||
|
||||
|
|
@ -25,38 +41,36 @@
|
|||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="linese"></div>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:900px;overflow-y:auto;">
|
||||
<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"-->
|
||||
<div style="height:calc(100vh - 300px);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>
|
||||
<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>查看日志</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-popconfirm> -->
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
|
|
@ -64,158 +78,181 @@
|
|||
</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";
|
||||
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,
|
||||
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
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '数据库备份',
|
||||
dataSource: [
|
||||
{
|
||||
id:"1",
|
||||
name:"第一次备份",
|
||||
createTime:"2024-03-06 10:30:26",
|
||||
startTime:"2024-03-06 10:30:26",
|
||||
startTime:"2024-03-06 15:30:26",
|
||||
Status:2
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: '',
|
||||
key: 'id',
|
||||
width: 60,
|
||||
align: "id",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 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: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '备份开始时间',
|
||||
align:"center",
|
||||
dataIndex: 'startTime'
|
||||
},
|
||||
{
|
||||
title: '备份结束时间',
|
||||
align:"center",
|
||||
dataIndex: 'endTime',
|
||||
},
|
||||
{
|
||||
title: '备份状态',
|
||||
align:"center",
|
||||
dataIndex: 'Status',
|
||||
scopedSlots: { customRender: 'Status' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
width:180,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
]
|
||||
{
|
||||
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"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
created () {
|
||||
this.getAllSchemaName();
|
||||
this.ipagination = pagination;
|
||||
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"
|
||||
getAllSchemaName() {
|
||||
getAction("/fileDataLink/getAllSchemaName").then((res) => {
|
||||
if (res.success) {
|
||||
console.log(res)
|
||||
this.allSchemaName = res.result;
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
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 = "新增";
|
||||
},
|
||||
}
|
||||
});
|
||||
},
|
||||
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';
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
|
|
@ -25,8 +25,9 @@
|
|||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="linese"></div>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:900px;overflow-y:auto;">
|
||||
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
|
|
@ -58,7 +59,7 @@
|
|||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<div class="linese"></div>
|
||||
<!-- 表单区域 -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user