IDCDatasync/IDCDatasync-vue
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加元数据界面，修改数据备份/恢复页面UI

Browse Source
This commit is contained in:
wangchengming 2025-04-18 18:42:47 +08:00
parent 9ebd7a24ec
commit a6e15e0b04
3 changed files with 359 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/views/data/metadata.vue Normal file
View 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>

375
src/views/securityAndBackup/backup.vue
View File

@ -5,19 +5,35 @@
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery"> <a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :md="6" :sm="8"> <a-col :md="5" :sm="5">
<a-form-item label="模式名称"> <a-form-item label="任务名称">
<a-select placeholder="选择模式" option-filter-prop="children" size="large" v-model="queryParam.schemaName"> <a-input placeholder="请输入" v-model="queryParam.databaseName"></a-input>
<a-select-option v-for="d in allSchemaName" :key="d"> </a-form-item>
{{ d }} </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-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </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"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="24" > <a-col :md="4" :sm="4">
<a-button type="primary" style="left: 10px" @click="loadData" icon="search">查询</a-button> <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-button type="primary" @click="searchReset" icon="reload"
style="margin-left: 8px;left: 10px">重置</a-button>
</a-col> </a-col>
</span> </span>
@ -25,38 +41,36 @@
</a-form> </a-form>
</div> </div>
<div class="linese"></div>
<!-- table区域-begin --> <!-- table区域-begin -->
<div style="height:900px;overflow-y:auto;"> <div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
ref="table" :pagination="ipagination" :loading="loading"
size="middle" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">
bordered <!-- :locale="myLocale"-->
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"> <template slot="Status" slot-scope="text">
<span style="color:black;" v-if="text === 0" >未备份</span> <span style="color:black;" v-if="text === 0">未备份</span>
<span style="color:darkorange;" v-if="text === 1">备份中</span> <span style="color:darkorange;" v-if="text === 1">备份中</span>
<span style="color:#87d068;" v-if="text === 2">完成</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> </template>
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">详情</a> <a @click="handleEdit(record)">详情</a>
<a-divider type="vertical" /> <!-- <a-divider type="vertical" />
<a >查看日志</a> <a>查看日志</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a> <a>删除</a>
</a-popconfirm> </a-popconfirm> -->
</span> </span>
</a-table> </a-table>
</div> </div>
<div class="linese"></div>
<!-- table区域-end --> <!-- table区域-end -->
<!-- 表单区域 --> <!-- 表单区域 -->
@ -64,158 +78,181 @@
</template> </template>
<script> <script>
import { shipModelPageList, import {
shipModeldeleteById } from '@/api/ship' shipModelPageList,
import { getAction} from '@/api/manage' shipModeldeleteById
import { taskCreate, } from '@/api/ship'
taskUpdateById, import { getAction } from '@/api/manage'
taskQueryById, import {
taskPageList, taskCreate,
taskDistributeTask, taskUpdateById,
taskDeleteById } from '@/api/task' taskQueryById,
import { JeecgListMixin } from '@/mixins/JeecgListMixin' taskPageList,
import JEllipsis from "@/components/jeecg/JEllipsis"; taskDistributeTask,
taskDeleteById
} from '@/api/task'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from "@/components/jeecg/JEllipsis";
export default { export default {
name: "backup", name: "backup",
mixins:[JeecgListMixin], mixins: [JeecgListMixin],
components: { components: {
JEllipsis, JEllipsis,
VNodes: { VNodes: {
functional: true, functional: true,
render: (h, ctx) => ctx.props.vnodes, 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: [
data () { {
return { title: '序号',
description: '数据库备份', dataIndex: '',
dataSource: [ key: 'id',
{ width: 60,
id:"1", align: "id",
name:"第一次备份", customRender: function (t, r, index) {
createTime:"2024-03-06 10:30:26", return parseInt(index) + 1;
startTime:"2024-03-06 10:30:26",
startTime:"2024-03-06 15:30:26",
Status:2
} }
],
schemaName:"",
allSchemaName:[],
queryParam: {
pageNum :1,
pageSize:20
}, },
columns: [ {
{ title: '任务名称',
title: '#', align: "center",
dataIndex: '', dataIndex: 'name',
key:'id', },
width:60, {
align:"id", title: '数据库',
customRender:function (t,r,index) { align: "center",
return parseInt(index)+1; dataIndex: 'dataBaseName',
} },
}, {
{ title: '调度开始时间',
title: '任务名称', align: "center",
align:"center", dataIndex: 'startTime'
dataIndex: 'name', },
}, {
{ title: '调度结束时间',
title: '创建时间', align: "center",
align:"center", dataIndex: 'endTime',
dataIndex: 'createTime' },
}, {
{ title: '表达式',
title: '备份开始时间', align: "center",
align:"center", dataIndex: 'larmder',
dataIndex: 'startTime' },
}, {
{ title: '调度状态',
title: '备份结束时间', align: "center",
align:"center", dataIndex: 'Status',
dataIndex: 'endTime', scopedSlots: { customRender: 'Status' },
}, },
{ {
title: '备份状态', title: '是否启用',
align:"center", align: "center",
dataIndex: 'Status', dataIndex: 'endisStatus',
scopedSlots: { customRender: 'Status' }, scopedSlots: { customRender: 'endisStatus' },
}, },
{ {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
align:"center", align: "center",
width:180, width: 180,
scopedSlots: { customRender: 'action' }, 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;
computed: {
},
created () {
this.getAllSchemaName();
this.loadData(); this.loadData();
}, },
methods: { getAllSchemaName() {
//筛选需要重写handleTableChange getAction("/fileDataLink/getAllSchemaName").then((res) => {
handleTableChange(pagination, filters, sorter) { if (res.success) {
//分页、排序、筛选变化时触发 console.log(res)
//TODO 筛选 this.allSchemaName = res.result;
if (Object.keys(sorter).length > 0) { } else {
this.isorter.column = sorter.field; this.$message.warning(res.message);
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
} }
this.ipagination = pagination; });
this.loadData(); },
}, 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) { handleDelete: function (id) {
var that = this; var that = this;
taskDeleteById({id: id}).then((res) => { taskDeleteById({ id: id }).then((res) => {
if (res.success) { if (res.success) {
that.$message.success(res.message); that.$message.success(res.message);
that.loadData(); that.loadData();
} else { } else {
that.$message.warning(res.message); that.$message.warning(res.message);
} }
}); });
}, },
handleEdit: function (record) { handleEdit: function (record) {
this.$refs.modalForm.edit(record); this.$refs.modalForm.edit(record);
this.$refs.modalForm.title = "编辑"; this.$refs.modalForm.title = "编辑";
}, },
handleDistribute:function (id) { handleDistribute: function (id) {
var that = this; var that = this;
taskDistributeTask({id: id}).then((res) => { taskDistributeTask({ id: id }).then((res) => {
if (res.success) { if (res.success) {
that.$message.success(res.message); that.$message.success(res.message);
that.loadData(); that.loadData();
} else { } else {
that.$message.warning(res.message); that.$message.warning(res.message);
} }
}); });
}, },
handleAdd() { handleAdd() {
this.$refs.modalForm.add(); this.$refs.modalForm.add();
this.$refs.modalForm.title = "新增"; this.$refs.modalForm.title = "新增";
}, },
} onChangeStartTime(date, dateString) {
console.log(date, dateString);
},
onChangeEndTime(date, dateString) {
console.log(date, dateString);
},
} }
}
</script> </script>
<style scoped> <style scoped>
@import '~@assets/less/common.less'; @import '~@assets/less/common.less';
</style> </style>

5
src/views/securityAndBackup/recovery.vue
View File

@ -25,8 +25,9 @@
</a-form> </a-form>
</div> </div>
<div class="linese"></div>
<!-- table区域-begin --> <!-- table区域-begin -->
<div style="height:900px;overflow-y:auto;"> <div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
<a-table <a-table
ref="table" ref="table"
size="middle" size="middle"
@ -58,7 +59,7 @@
</a-table> </a-table>
</div> </div>
<!-- table区域-end --> <!-- table区域-end -->
<div class="linese"></div>
<!-- 表单区域 --> <!-- 表单区域 -->
</a-card> </a-card>
</template> </template>