dromara/dbswitch
1
0
Fork 0
mirror of https://gitee.com/dromara/dbswitch.git synced 2025-09-09 13:39:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

!86 version for 1.6.6

Browse Source 
* version for 1.6.6
This commit is contained in:
inrgihc
2022-03-16 14:56:26 +00:00
parent 3268385b2a
commit 0312a4b1a4
134 changed files with 3680 additions and 1956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dbswitch-admin-ui/src/router/index.js
View File

@@ -44,7 +44,7 @@ const constantRouter = new Router({
path: '/task/assignment',
name: '任务安排',
icon: "el-icon-eleme",
component: () => import('@/views/task/assignment')
component: () => import('@/views/task/assignment'),
},
{
path: '/task/schedule',
@@ -87,6 +87,18 @@ const constantRouter = new Router({
hidden: true,
component: () => import('@/views/personal/index')
},
{
path: '/task/create',
name: '创建任务',
hidden: true,
component: () => import('@/views/task/create')
},
{
path: '/task/update',
name: '修改任务',
hidden: true,
component: () => import('@/views/task/update')
}
],
},

6
dbswitch-admin-ui/src/views/connection/list.vue
View File

@@ -342,7 +342,7 @@ export default {
this.totalCount = res.data.pagination.total;
this.tableData = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.errmsg);
alert("加载任务列表失败:" + res.data.message);
}
this.totalCount = this.tableData.length;
},
@@ -362,7 +362,7 @@ export default {
if (0 === res.data.code) {
this.databaseType = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.errmsg);
alert("加载任务列表失败:" + res.data.message);
}
},
function () {
@@ -389,7 +389,7 @@ export default {
if (0 === res.data.code) {
this.loadData();
} else {
alert("删除任务失败:" + res.data.errmsg);
alert("删除任务失败:" + res.data.message);
}
});
});

763
dbswitch-admin-ui/src/views/task/assignment.vue
View File

@@ -67,377 +67,6 @@
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"></el-pagination>
</div>
<el-dialog title="添加任务"
:visible.sync="createFormVisible"
:showClose="false"
:before-close="handleClose">
<el-form :model="createform"
size="mini"
status-icon
:rules="rules"
ref="createform">
<el-form-item label="名称"
label-width="120px"
:required=true
prop="name"
style="width:65%">
<el-input v-model="createform.name"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="描述"
label-width="120px"
prop="description"
style="width:65%">
<el-input v-model="createform.description"
type="textarea"
:rows="3"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="调度方式"
label-width="120px"
:required=true
prop="scheduleMode"
style="width:65%">
<el-select v-model="createform.scheduleMode">
<el-option label="手动调度"
value="MANUAL"></el-option>
<el-option label="系统调度"
value="SYSTEM_SCHEDULED"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Cron表达式"
label-width="120px"
style="width:65%"
v-if="createform.scheduleMode=='SYSTEM_SCHEDULED'">
<el-col :span="10">
<el-popover v-model="cronPopover">
<vueCron @change="changeCreateCronExpression"
@close="cronPopover=false"
i18n="cn" />
<el-input slot="reference"
:disabled=false
v-model="createform.cronExpression"
placeholder="点击选择"
@click="cronPopover=true" />
</el-popover>
</el-col>
</el-form-item>
<el-form-item label="来源端数据源"
label-width="120px"
:required=true
prop="sourceConnectionId"
style="width:65%">
<el-select v-model="createform.sourceConnectionId"
@change="selectChangedSourceConnection"
placeholder="请选择">
<el-option v-for="(item,index) in connectionNameList"
:key="index"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="源端模式名"
label-width="120px"
:required=true
prop="sourceSchema"
style="width:65%">
<el-select v-model="createform.sourceSchema"
@change="selectCreateChangedSourceSchema"
placeholder="请选择">
<el-option v-for="(item,index) in sourceConnectionSchemas"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="配置方式"
label-width="120px"
:required=true
prop="includeOrExclude"
style="width:65%">
<el-select placeholder="请选择配置方式"
v-model="createform.includeOrExclude">
<el-option label="包含表"
value="INCLUDE"></el-option>
<el-option label="排除表"
value="EXCLUDE"></el-option>
</el-select>
</el-form-item>
<el-form-item label="表名配置"
label-width="120px"
:required=false
prop="sourceTables"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
当为包含表时，选择所要精确包含的表名，如果不选则代表选择所有；当为排除表时，选择索要精确排除的表名。
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-select placeholder="请选择表名"
multiple
v-model="createform.sourceTables">
<el-option v-for="(item,index) in sourceSchemaTables"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的端数据源"
label-width="120px"
:required=true
prop="targetConnectionId"
style="width:65%">
<el-select v-model="createform.targetConnectionId"
@change="selectChangedTargetConnection"
placeholder="请选择">
<el-option v-for="(item,index) in connectionNameList"
:key="index"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的端模式名"
label-width="120px"
:required=true
prop="targetSchema"
style="width:65%">
<el-select v-model="createform.targetSchema"
placeholder="请选择">
<el-option v-for="(item,index) in targetConnectionSchemas"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的端表名前缀"
label-width="120px"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
目的端表增加的前缀，例如: DEST_，因某些数据库有表名字符长度限制(如Oracle为32个字符)，该参数不宜过长
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-input v-model="createform.tablePrefix"
:maxlength="12"
style="width:50%"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="数据批次大小"
label-width="120px"
:required=true
prop="batchSize"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
数据同步时单个批次处理的行记录总数，该值越到越占用内存空间。建议：小字段表设置为10000，大字段表设置为1000
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-select v-model="createform.batchSize">
<el-option label=1000
:value=1000></el-option>
<el-option label=5000
:value=5000></el-option>
<el-option label=10000
:value=10000></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer"
class="dialog-footer">
<el-button @click="createFormVisible = false">取 消</el-button>
<el-button type="primary"
@click="handleCreateSave">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="修改任务"
:visible.sync="updateFormVisible"
:showClose="false"
:before-close="handleClose">
<el-form :model="updateform"
size="mini"
status-icon
:rules="rules"
ref="updateform">
<el-form-item label="名称"
label-width="120px"
:required=true
prop="name"
style="width:65%">
<el-input v-model="updateform.name"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="描述"
label-width="120px"
style="width:65%">
<el-input v-model="updateform.description"
type="textarea"
:rows="3"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="调度方式"
label-width="120px"
:required=true
prop="scheduleMode"
style="width:65%">
<el-select v-model="updateform.scheduleMode">
<el-option label="手动调度"
value="MANUAL"></el-option>
<el-option label="系统调度"
value="SYSTEM_SCHEDULED"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Cron表达式"
label-width="120px"
style="width:65%"
v-if="updateform.scheduleMode=='SYSTEM_SCHEDULED'">
<el-col :span="10">
<el-popover v-model="cronPopover">
<vueCron @change="changeUpdateCronExpression"
@close="cronPopover=false"
i18n="cn" />
<el-input slot="reference"
:disabled=false
v-model="updateform.cronExpression"
placeholder="点击选择"
@click="cronPopover=true" />
</el-popover>
</el-col>
</el-form-item>
<el-form-item label="来源端数据源"
label-width="120px"
:required=true
prop="sourceConnectionId"
style="width:65%">
<el-select v-model="updateform.sourceConnectionId"
@change="selectChangedSourceConnection"
placeholder="请选择">
<el-option v-for="(item,index) in connectionNameList"
:key="index"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="源端模式名"
label-width="120px"
:required=true
prop="sourceSchema"
style="width:65%">
<el-select v-model="updateform.sourceSchema"
@change="selectUpdateChangedSourceSchema"
placeholder="请选择">
<el-option v-for="(item,index) in sourceConnectionSchemas"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="配置方式"
label-width="120px"
:required=true
prop="includeOrExclude"
style="width:65%">
<el-select placeholder="请选择配置方式"
v-model="updateform.includeOrExclude">
<el-option label="包含表"
value="INCLUDE"></el-option>
<el-option label="排除表"
value="EXCLUDE"></el-option>
</el-select>
</el-form-item>
<el-form-item label="表名配置"
label-width="120px"
:required=false
prop="sourceTables"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
当为包含表时，选择所要精确包含的表名，如果不选则代表选择所有；当为排除表时，选择索要精确排除的表名。
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-select placeholder="请选择表名"
multiple
v-model="updateform.sourceTables">
<el-option v-for="(item,index) in sourceSchemaTables"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的端数据源"
label-width="120px"
:required=true
prop="targetConnectionId"
style="width:65%">
<el-select v-model="updateform.targetConnectionId"
@change="selectChangedTargetConnection"
placeholder="请选择">
<el-option v-for="(item,index) in connectionNameList"
:key="index"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的端模式名"
label-width="120px"
:required=true
prop="targetSchema"
style="width:65%">
<el-select v-model="updateform.targetSchema"
placeholder="请选择">
<el-option v-for="(item,index) in targetConnectionSchemas"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的端表名前缀"
label-width="120px"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
目的端表增加的前缀，例如: DEST_，因某些数据库有表名字符长度限制(如Oracle为32个字符)，该参数不宜过长
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-input v-model="updateform.tablePrefix"
:maxlength="12"
style="width:50%"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="数据批次大小"
label-width="120px"
:required=true
prop="batchSize"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
数据同步时单个批次处理的行记录总数，该值越到越占用内存空间。建议：小字段表设置为10000，大字段表设置为1000
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-select v-model="updateform.batchSize">
<el-option label=1000
:value=1000></el-option>
<el-option label=5000
:value=5000></el-option>
<el-option label=10000
:value=10000></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer"
class="dialog-footer">
<el-button @click="updateFormVisible = false">取 消</el-button>
<el-button type="primary"
@click="handleUpdateSave">确 定</el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
@@ -451,183 +80,10 @@ export default {
currentPage: 1,
pageSize: 10,
totalCount: 2,
connectionNameList: [],
tableData: [],
createform: {
name: "",
description: "",
scheduleMode: "MANUAL",
cronExpression: "",
sourceConnectionId: 0,
sourceSchema: "",
includeOrExclude: "",
sourceTables: [],
tablePrefix: "",
targetConnectionId: 0,
targetDropTable: true,
targetSchema: "",
batchSize: 5000
},
updateform: {
id: 0,
name: "",
description: "",
scheduleMode: "MANUAL",
cronExpression: "",
sourceConnectionId: 0,
sourceSchema: "",
includeOrExclude: "",
sourceTables: [],
tablePrefix: "",
targetConnectionId: 0,
targetDropTable: true,
targetSchema: "",
batchSize: 5000
},
rules: {
name: [
{
required: true,
message: "任务名称不能为空",
trigger: "blur"
}
],
scheduleMode: [
{
required: true,
type: 'string',
message: "调度方式必须选择",
trigger: "change"
}
],
sourceConnectionId: [
{
required: true,
type: 'integer',
message: "必选选择一个来源端",
trigger: "change"
}
],
sourceSchema: [
{
required: true,
type: 'string',
message: "必选选择一个Schema名",
trigger: "change"
}
],
includeOrExclude: [
{
required: true,
type: 'string',
message: "配置方式必须选择",
trigger: "change"
}
],
sourceTables: [
{
required: false,
type: 'array',
message: "必选选择一个Table名",
trigger: "change"
}
],
targetConnectionId: [
{
required: true,
type: 'integer',
message: "必选选择一个目的端",
trigger: "change"
}
],
targetSchema: [
{
required: true,
type: 'string',
message: "必选选择一个Schema名",
trigger: "change"
}
],
batchSize: [
{
required: true,
type: 'integer',
message: "必选选择一个批大小",
trigger: "change"
}
]
},
jobTaskName: "",
jobTableData: [
{
jobId: 0,
scheduleTime: "",
startTime: "",
finishTime: "",
duration: "",
jobStatus: "",
scheduleMode: "",
errorLog: ""
}
],
jobHistoryTableData: [
{
jobId: 0,
scheduleTime: "",
startTime: "",
finishTime: "",
duration: "",
jobStatus: "",
scheduleMode: "",
errorLog: ""
}
],
jobHistoryDrawer: false,
jobTableVisible: false,
createFormVisible: false,
updateFormVisible: false,
cronPopover: false,
sourceConnectionSchemas: [],
sourceSchemaTables: [],
targetConnectionSchemas: []
};
},
methods: {
clearAndReset: function () {
this.cronPopover = false;
this.createform = {
name: "",
description: "",
scheduleMode: "MANUAL",
cronExpression: "",
sourceConnectionId: 0,
sourceSchema: "",
includeOrExclude: "",
sourceTables: [],
tablePrefix: "",
targetConnectionId: 0,
targetDropTable: true,
targetSchema: "",
batchSize: 5000
};
this.updateform = {
id: 0,
name: "",
description: "",
scheduleMode: "MANUAL",
cronExpression: "",
sourceConnectionId: 0,
sourceSchema: "",
includeOrExclude: "",
sourceTables: [],
tablePrefix: "",
targetConnectionId: 0,
targetDropTable: true,
targetSchema: "",
batchSize: 5000
}
},
loadData: function () {
this.$http({
method: "GET",
@@ -640,7 +96,9 @@ export default {
this.totalCount = res.data.pagination.total;
this.tableData = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.errmsg);
if (res.data.message) {
alert("加载任务列表失败:" + res.data.errmsg);
}
}
this.totalCount = this.tableData.length;
},
@@ -649,24 +107,6 @@ export default {
}
);
},
loadConnections: function () {
this.connectionNameList = [];
this.$http({
method: "GET",
url: "/dbswitch/admin/api/v1/connection/list/name"
}).then(
res => {
if (0 === res.data.code) {
this.connectionNameList = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.errmsg);
}
},
function () {
console.log("failed");
}
);
},
boolFormatPublish (row, column) {
if (row.isPublished === true) {
return "是";
@@ -681,10 +121,11 @@ export default {
return "系统";
}
},
handleClose: function () { },
handleCreate: function () {
this.createFormVisible = true;
this.createform = {};
this.$router.push('/task/create')
},
handleUpdate: function (index, row) {
this.$router.push({ path: '/task/update', query: { id: row.id } })
},
handleDelete: function (index, row) {
this.$confirm(
@@ -702,128 +143,13 @@ export default {
if (0 === res.data.code) {
this.loadData();
} else {
alert("删除任务失败:" + res.data.message);
if (res.data.message) {
alert("删除任务失败:" + res.data.message);
}
}
});
});
},
handleUpdate: function (index, row) {
this.$http.get(
"/dbswitch/admin/api/v1/assignment/detail/id/" + row.id
).then(res => {
if (0 === res.data.code) {
let detail = res.data.data;
this.updateform = {
id: detail.id,
name: detail.name,
description: detail.description,
scheduleMode: detail.scheduleMode,
cronExpression: detail.cronExpression,
sourceConnectionId: detail.configuration.sourceConnectionId,
sourceSchema: detail.configuration.sourceSchema,
includeOrExclude: detail.configuration.includeOrExclude,
sourceTables: detail.configuration.sourceTables,
tablePrefix: detail.configuration.tablePrefix,
targetConnectionId: detail.configuration.targetConnectionId,
targetDropTable: detail.configuration.targetDropTable,
targetSchema: detail.configuration.targetSchema,
batchSize: detail.configuration.batchSize
}
this.selectChangedSourceConnection(this.updateform.sourceConnectionId)
this.selectUpdateChangedSourceSchema(this.updateform.sourceSchema)
this.selectChangedTargetConnection(this.updateform.targetConnectionId)
this.updateFormVisible = true;
} else {
alert("查询任务失败," + res.data.message);
}
});
},
handleCreateSave: function () {
this.$refs['createform'].validate(valid => {
if (valid) {
this.$http({
method: "POST",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/assignment/create",
data: JSON.stringify({
name: this.createform.name,
description: this.createform.description,
scheduleMode: this.createform.scheduleMode,
cronExpression: this.createform.cronExpression,
config: {
sourceConnectionId: this.createform.sourceConnectionId,
sourceSchema: this.createform.sourceSchema,
includeOrExclude: this.createform.includeOrExclude,
sourceTables: this.createform.sourceTables,
targetConnectionId: this.createform.targetConnectionId,
targetSchema: this.createform.targetSchema,
tablePrefix: this.createform.tablePrefix,
targetDropTable: true,
batchSize: this.createform.batchSize
}
})
}).then(res => {
if (0 === res.data.code) {
this.createFormVisible = false;
this.$message("添加任务成功");
this.createform = {};
this.loadData();
this.clearAndReset();
} else {
alert("添加任务失败:" + res.data.message);
}
});
} else {
alert("请检查输入");
}
});
},
handleUpdateSave: function () {
this.$refs['updateform'].validate(valid => {
if (valid) {
this.$http({
method: "POST",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/assignment/update",
data: JSON.stringify({
id: this.updateform.id,
name: this.updateform.name,
description: this.updateform.description,
scheduleMode: this.updateform.scheduleMode,
cronExpression: this.updateform.cronExpression,
config: {
sourceConnectionId: this.updateform.sourceConnectionId,
sourceSchema: this.updateform.sourceSchema,
includeOrExclude: this.updateform.includeOrExclude,
sourceTables: this.updateform.sourceTables,
targetConnectionId: this.updateform.targetConnectionId,
targetSchema: this.updateform.targetSchema,
tablePrefix: this.updateform.tablePrefix,
targetDropTable: true,
batchSize: this.updateform.batchSize
}
})
}).then(res => {
if (0 === res.data.code) {
this.updateFormVisible = false;
this.$message("修改任务成功");
this.updateformform = {};
this.loadData();
this.clearAndReset();
} else {
alert("修改任务失败," + res.data.message);
}
});
} else {
alert("请检查输入");
}
});
},
handlePublish: function (index, row) {
this.$http({
method: "POST",
@@ -836,7 +162,9 @@ export default {
this.$message("任务发布成功");
this.loadData();
} else {
alert("任务发布失败," + res.data.message);
if (res.data.message) {
alert("任务发布失败," + res.data.message);
}
}
});
},
@@ -853,7 +181,9 @@ export default {
this.$message("手动启动执行任务成功");
this.loadData();
} else {
alert("手动启动执行任务失败," + res.data.message);
if (res.data.message) {
alert("手动启动执行任务失败," + res.data.message);
}
}
});
},
@@ -869,69 +199,16 @@ export default {
this.$message("下线任务成功");
this.loadData();
} else {
alert("下线任务失败," + res.data.message);
if (res.data.message) {
alert("下线任务失败," + res.data.message);
}
}
});
},
changeCreateCronExpression: function (value) {
this.createform.cronExpression = value;
},
changeUpdateCronExpression: function (value) {
this.updateform.cronExpression = value;
},
selectChangedSourceConnection: function (value) {
this.sourceConnectionSchemas = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/schemas/get/" + value
).then(res => {
if (0 === res.data.code) {
this.sourceConnectionSchemas = res.data.data;
} else {
this.$message.error("查询来源端数据库的Schema失败," + res.data.message);
}
});
},
selectCreateChangedSourceSchema: function (value) {
this.sourceSchemaTables = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/tables/get/" + this.createform.sourceConnectionId + "?schema=" + value
).then(res => {
if (0 === res.data.code) {
this.sourceSchemaTables = res.data.data;
} else {
this.$message.error("查询来源端数据库在制定Schema下的表列表失败," + res.data.message);
}
});
},
selectUpdateChangedSourceSchema: function (value) {
this.sourceSchemaTables = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/tables/get/" + this.updateform.sourceConnectionId + "?schema=" + value
).then(res => {
if (0 === res.data.code) {
this.sourceSchemaTables = res.data.data;
} else {
this.$message.error("查询来源端数据库在制定Schema下的表列表失败," + res.data.message);
}
});
},
selectChangedTargetConnection: function (value) {
this.targetConnectionSchemas = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/schemas/get/" + value
).then(res => {
if (0 === res.data.code) {
this.targetConnectionSchemas = res.data.data;
} else {
this.$message.error("查询目的端数据库的Schema失败," + res.data.message);
}
});
}
},
created () {
this.loadConnections();
this.loadData();
}
},
};
</script>

790
dbswitch-admin-ui/src/views/task/create.vue Normal file
View File

@@ -0,0 +1,790 @@
<template>
<el-card>
<el-steps :active="active"
finish-status="success">
<el-step title="基本信息配置" />
<el-step title="同步源端配置" />
<el-step title="目标端配置" />
<el-step title="映射转换配置" />
<el-step title="配置确认提交" />
</el-steps>
<el-form :model="createform"
status-icon
:rules="rules"
ref="createform">
<div v-show="active == 1">
<el-form-item label="名称"
label-width="240px"
:required=true
prop="name"
style="width:65%">
<el-input v-model="createform.name"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="描述"
label-width="240px"
prop="description"
style="width:65%">
<el-input v-model="createform.description"
type="textarea"
:rows="3"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="调度方式"
label-width="240px"
:required=true
prop="scheduleMode"
style="width:65%">
<el-select v-model="createform.scheduleMode">
<el-option label="手动调度"
value="MANUAL"></el-option>
<el-option label="系统调度"
value="SYSTEM_SCHEDULED"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Cron表达式"
label-width="240px"
style="width:65%"
v-if="createform.scheduleMode=='SYSTEM_SCHEDULED'">
<el-col :span="10">
<el-popover v-model="cronPopover">
<vueCron @change="changeCreateCronExpression"
@close="cronPopover=false"
i18n="cn" />
<el-input slot="reference"
:disabled=false
v-model="createform.cronExpression"
placeholder="点击选择"
@click="cronPopover=true" />
</el-popover>
</el-col>
</el-form-item>
</div>
<div v-show="active == 2">
<el-form-item label="源端数据源"
label-width="240px"
:required=true
prop="sourceConnectionId"
style="width:65%">
<el-select v-model="createform.sourceConnectionId"
@change="selectChangedSourceConnection"
placeholder="请选择">
<el-option v-for="(item,index) in connectionNameList"
:key="index"
:label="`[${item.id}]${item.name}`"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="源端模式名"
label-width="240px"
:required=true
prop="sourceSchema"
style="width:65%">
<el-select v-model="createform.sourceSchema"
@change="selectCreateChangedSourceSchema"
placeholder="请选择">
<el-option v-for="(item,index) in sourceConnectionSchemas"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="配置方式"
label-width="240px"
:required=true
prop="includeOrExclude"
style="width:65%">
<el-select placeholder="请选择配置方式"
v-model="createform.includeOrExclude">
<el-option label="包含表"
value="INCLUDE"></el-option>
<el-option label="排除表"
value="EXCLUDE"></el-option>
</el-select>
</el-form-item>
<el-form-item label="表名配置"
label-width="240px"
:required=false
prop="sourceTables"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
当为包含表时，选择所要精确包含的表名，如果不选则代表选择所有；当为排除表时，选择索要精确排除的表名。
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-select placeholder="请选择表名"
multiple
v-model="createform.sourceTables">
<el-option v-for="(item,index) in sourceSchemaTables"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="active == 3">
<el-form-item label="目的端数据源"
label-width="240px"
:required=true
prop="targetConnectionId"
style="width:65%">
<el-select v-model="createform.targetConnectionId"
@change="selectChangedTargetConnection"
placeholder="请选择">
<el-option v-for="(item,index) in connectionNameList"
:key="index"
:label="`[${item.id}]${item.name}`"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的端模式名"
label-width="240px"
:required=true
prop="targetSchema"
style="width:65%">
<el-select v-model="createform.targetSchema"
placeholder="请选择">
<el-option v-for="(item,index) in targetConnectionSchemas"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据处理批次大小"
label-width="240px"
:required=true
prop="batchSize"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
数据同步时单个批次处理的行记录总数，该值越到越占用内存空间。建议：小字段表设置为10000，大字段表设置为1000
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-select v-model="createform.batchSize">
<el-option label=1000
:value=1000></el-option>
<el-option label=5000
:value=5000></el-option>
<el-option label=10000
:value=10000></el-option>
<el-option label=20000
:value=20000></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="active == 4">
<div class="tip-content">
<p>说明：(1) 当表名映射规则记录为空时，代表目标表名与源表名的名称相同;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
(2) 当字段名映射规则记录为空时，代表目标表的字段名与源表名的字段名相同</p>
</div>
<el-button type="success"
@click="addTableNameMapperListRow()"
round>添加表名映射</el-button>
<el-button type="warning"
@click="previewTableNameMapList()"
round>预览表名映射</el-button>
<el-table :data="createform.tableNameMapper"
size="mini"
border
height="200"
style="width:90%;margin-top: 15px;">
<template slot="empty">
<span>请点击"添加表名映射"按钮添加表名映射关系记录</span>
</template>
<el-table-column label="表名匹配的正则名"
width="320">
<template slot-scope="scope">
<el-input v-model="scope.row.fromPattern"
type="string"> </el-input>
</template>
</el-table-column>
<el-table-column label="替换的目标值"
width="320">
<template slot-scope="scope">
<el-input v-model="scope.row.toValue"
type="string"></el-input>
</template>
</el-table-column>
<el-table-column label="操作"
width="220">
<template slot-scope="scope">
<el-button size="mini"
type="danger"
@click="deleteTableNameMapperListItem(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="success"
@click="addColumnNameMapperListRow()"
round>添加字段名映射</el-button>
<el-button type="warning"
@click="previewColumnNameMapList()"
round>预览字段名映射</el-button>
<el-table :data="createform.columnNameMapper"
size="mini"
border
height="200"
style="width:90%;margin-top: 15px;">
<template slot="empty">
<span>请点击"添加字段名映射"按钮添加字段名映射关系记录</span>
</template>
<el-table-column label="字段名匹配的正则名"
width="320">
<template slot-scope="scope">
<el-input v-model="scope.row.fromPattern"
type="string"> </el-input>
</template>
</el-table-column>
<el-table-column label="替换的目标值"
width="320">
<template slot-scope="scope">
<el-input v-model="scope.row.toValue"
type="string"></el-input>
</template>
</el-table-column>
<el-table-column label="操作"
width="220">
<template slot-scope="scope">
<el-button size="mini"
type="danger"
@click="deleteColumnNameMapperListItem(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-show="active == 5">
<el-descriptions size="small"
:column="1"
label-class-name="el-descriptions-item-label-class"
border>
<el-descriptions-item label="任务名称">{{createform.name}}</el-descriptions-item>
<el-descriptions-item label="任务描述">{{createform.description}}</el-descriptions-item>
<el-descriptions-item label="调度方式">
<span v-if="createform.scheduleMode == 'MANUAL'">
手动执行
</span>
<span v-if="createform.scheduleMode == 'SYSTEM_SCHEDULED'">
系统调度
</span>
</el-descriptions-item>
<el-descriptions-item v-if="createform.scheduleMode == 'SYSTEM_SCHEDULED'"
label="CRON表达式">{{createform.cronExpression}}</el-descriptions-item>
<el-descriptions-item label="源端数据源">[{{createform.sourceConnectionId}}]{{sourceConnection.name}}</el-descriptions-item>
<el-descriptions-item label="源端schema">{{createform.sourceSchema}}</el-descriptions-item>
<el-descriptions-item label="源端表选择方式">
<span v-if="createform.includeOrExclude == 'INCLUDE'">
包含表
</span>
<span v-if="createform.includeOrExclude == 'EXCLUDE'">
排除表
</span>
</el-descriptions-item>
<el-descriptions-item label="源端表名列表">
<span v-show="createform.includeOrExclude == 'INCLUDE' && (!createform.sourceTables || createform.sourceTables.length==0)"><b>所有物理表</b></span>
<p v-for="item in createform.sourceTables"
v-bind:key="item">{{item}}</p>
</el-descriptions-item>
<el-descriptions-item label="目地端数据源">[{{createform.targetConnectionId}}]{{targetConnection.name}}</el-descriptions-item>
<el-descriptions-item label="目地端schema">{{createform.targetSchema}}</el-descriptions-item>
<el-descriptions-item label="数据处理批次量">{{createform.batchSize}}</el-descriptions-item>
<el-descriptions-item label="表名映射规则">
<span v-show="createform.tableNameMapper.length==0">[映射关系为空]</span>
<table v-if="createform.tableNameMapper.length>0"
class="name-mapper-table">
<tr>
<th>表名匹配的正则名</th>
<th>替换的目标值</th>
</tr>
<tr v-for='(item,index) in createform.tableNameMapper'
:key="index">
<td>{{item['fromPattern']}}</td>
<td>{{item['toValue']}}</td>
</tr>
</table>
</el-descriptions-item>
<el-descriptions-item label="字段名映射规则">
<span v-show="createform.columnNameMapper.length==0">[映射关系为空]</span>
<table v-if="createform.columnNameMapper.length>0"
class="name-mapper-table">
<tr>
<th>字段名匹配的正则名</th>
<th>替换的目标值</th>
</tr>
<tr v-for='(item,index) in createform.columnNameMapper'
:key="index">
<td>{{item['fromPattern']}}</td>
<td>{{item['toValue']}}</td>
</tr>
</table>
</el-descriptions-item>
</el-descriptions>
</div>
</el-form>
<el-button round
v-if="active > 1"
style="margin-top: 12px"
@click="pre">
上一步
</el-button>
<el-button round
@click="next"
v-if="active > 0 && active < 5">
下一步
</el-button>
<el-button round
@click="handleSave"
v-if="active == 5">
提交
</el-button>
<el-dialog v-if="active == 4"
title="查看表名映射关系"
:visible.sync="tableNameMapperDialogVisible"
:showClose="false"
:before-close="handleClose">
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
:data="tableNamesMapperData"
size="mini"
border>
<el-table-column prop="originalName"
label="源端表名"
min-width="20%"></el-table-column>
<el-table-column prop="targetName"
label="目标表名"
min-width="20%"></el-table-column>
</el-table>
<div slot="footer"
class="dialog-footer">
<el-button @click="tableNameMapperDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<el-dialog v-if="active == 4"
title="查看字段影射关系"
:visible.sync="columnNameMapperDialogVisible"
:showClose="false"
:before-close="handleClose">
<el-select @change="queryPreviewColumnNameMapperList"
v-model="preiveTableName"
placeholder="请选择">
<el-option v-for="(item,index) in preiveSeeTableNameList"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
:data="columnNamesMapperData"
size="mini"
border>
<el-table-column prop="originalName"
label="原始字段名"
min-width="20%"></el-table-column>
<el-table-column prop="targetName"
label="目标表字段名"
min-width="20%"></el-table-column>
</el-table>
<div slot="footer"
class="dialog-footer">
<el-button @click="columnNameMapperDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
</el-card>
</template>
<script>
export default {
data () {
return {
cronPopover: false,
createform: {
name: "",
description: "",
scheduleMode: "MANUAL",
cronExpression: "",
sourceConnectionId: '请选择',
sourceSchema: "",
includeOrExclude: "",
sourceTables: [],
tableNameMapper: [],
columnNameMapper: [],
targetConnectionId: '请选择',
targetDropTable: true,
targetSchema: "",
batchSize: 5000
},
rules: {
name: [
{
required: true,
message: "任务名称不能为空",
trigger: "blur"
}
],
scheduleMode: [
{
required: true,
type: 'string',
message: "调度方式必须选择",
trigger: "change"
}
],
sourceConnectionId: [
{
required: true,
type: 'integer',
message: "必选选择一个来源端",
trigger: "change"
}
],
sourceSchema: [
{
required: true,
type: 'string',
message: "必选选择一个Schema名",
trigger: "change"
}
],
includeOrExclude: [
{
required: true,
type: 'string',
message: "配置方式必须选择",
trigger: "change"
}
],
sourceTables: [
{
required: false,
type: 'array',
message: "必选选择一个Table名",
trigger: "change"
}
],
targetConnectionId: [
{
required: true,
type: 'integer',
message: "必选选择一个目的端",
trigger: "change"
}
],
targetSchema: [
{
required: true,
type: 'string',
message: "必选选择一个Schema名",
trigger: "change"
}
],
batchSize: [
{
required: true,
type: 'integer',
message: "必选选择一个批大小",
trigger: "change"
}
]
},
active: 1,
sourceConnection: {},
targetConnection: {},
sourceConnectionSchemas: [],
sourceSchemaTables: [],
targetConnectionSchemas: [],
tableNameMapperDialogVisible: false,
columnNameMapperDialogVisible: false,
tableNamesMapperData: [],
columnNamesMapperData: [],
preiveSeeTableNameList: [],
preiveTableName: "",
}
},
methods: {
handleClose (done) {
},
next () {
if (this.active++ > 4) this.active = 5
},
pre () {
if (this.active-- < 2) this.active = 1
},
loadConnections: function () {
this.connectionNameList = [];
this.$http({
method: "GET",
url: "/dbswitch/admin/api/v1/connection/list/name"
}).then(
res => {
if (0 === res.data.code) {
this.connectionNameList = res.data.data;
} else {
if (res.data.message) {
alert("加载任务列表失败:" + res.data.message);
this.connectionNameList = [];
}
}
},
function () {
console.log("failed");
}
);
},
changeCreateCronExpression: function (value) {
this.createform.cronExpression = value;
},
selectChangedSourceConnection: function (value) {
this.sourceConnection = this.connectionNameList.find(
(item) => {
return item.id === value;
});
this.sourceConnectionSchemas = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/schemas/get/" + value
).then(res => {
if (0 === res.data.code) {
this.sourceConnectionSchemas = res.data.data;
} else {
this.$message.error("查询来源端数据库的Schema失败," + res.data.message);
this.sourceConnectionSchemas = [];
}
});
},
selectCreateChangedSourceSchema: function (value) {
this.sourceSchemaTables = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/tables/get/" + this.createform.sourceConnectionId + "?schema=" + value
).then(res => {
if (0 === res.data.code) {
this.sourceSchemaTables = res.data.data;
} else {
this.$message.error("查询来源端数据库在制定Schema下的表列表失败," + res.data.message);
this.sourceSchemaTables = [];
}
});
},
selectChangedTargetConnection: function (value) {
this.targetConnection = this.connectionNameList.find(
(item) => {
return item.id === value;
});
this.targetConnectionSchemas = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/schemas/get/" + value
).then(res => {
if (0 === res.data.code) {
this.targetConnectionSchemas = res.data.data;
} else {
this.$message.error("查询目的端数据库的Schema失败," + res.data.message);
this.targetConnectionSchemas = [];
}
});
},
addTableNameMapperListRow: function () {
this.createform.tableNameMapper.push({ "fromPattern": "", "toValue": "" });
},
deleteTableNameMapperListItem: function (index) {
this.createform.tableNameMapper.splice(index, 1);
},
previewTableNameMapList: function () {
if (!this.createform.sourceConnectionId || this.createform.sourceConnectionId < 0
|| !this.createform.sourceSchema || this.createform.sourceSchema.length == 0) {
alert("请选择【源端数据源】和【源端模式名】！");
return;
}
this.$http({
method: "POST",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/mapper/preview/table",
data: JSON.stringify({
id: this.createform.sourceConnectionId,
schemaName: this.createform.sourceSchema,
isInclude: this.createform.includeOrExclude == 'INCLUDE',
tableNames: this.createform.sourceTables,
nameMapper: this.createform.tableNameMapper,
})
}).then(res => {
if (0 === res.data.code) {
this.tableNamesMapperData = res.data.data;
this.tableNameMapperDialogVisible = true;
} else {
this.tableNamesMapperData = [];
if (res.data.message) {
alert(res.data.message);
}
}
});
},
addColumnNameMapperListRow: function () {
this.createform.columnNameMapper.push({ "fromPattern": "", "toValue": "" });
},
deleteColumnNameMapperListItem: function (index) {
this.createform.columnNameMapper.splice(index, 1);
},
previewColumnNameMapList: function () {
if (!this.createform.sourceConnectionId || this.createform.sourceConnectionId <= 0
|| !this.createform.sourceSchema || this.createform.sourceSchema.length == 0) {
alert("请选择【源端数据源】和【源端模式名】！");
return;
}
if (!this.createform.includeOrExclude) {
alert("请选择源端表选择的【配置方式】！");
return;
}
if (this.createform.includeOrExclude == "INCLUDE") {
if (this.createform.sourceTables.length == 0) {
this.preiveSeeTableNameList = this.sourceSchemaTables;
} else {
this.preiveSeeTableNameList = this.createform.sourceTables;
}
} else {
if (this.createform.sourceTables.length == 0) {
alert("请选择排除表的【表名配置】！");
return;
}
// 排除表，求差集
this.preiveSeeTableNameList = JSON.parse(JSON.stringify(this.sourceSchemaTables));
for (var i = 0; i < this.createform.sourceTables.length; ++i) {
var one = this.createform.sourceTables[i];
this.preiveSeeTableNameList.some((item, index) => {
if (item == one) {
this.preiveSeeTableNameList.splice(index, 1)
return true;
}
})
}
}
//console.log(this.preiveSeeTableNameList)
this.preiveTableName = "";
this.columnNamesMapperData = [];
this.columnNameMapperDialogVisible = true;
},
queryPreviewColumnNameMapperList: function () {
if (!this.preiveSeeTableNameList || this.preiveSeeTableNameList.length == 0) {
alert("请在源端配置【表名配置】！");
return;
}
if (!this.preiveTableName || this.preiveTableName.length == 0) {
alert("请选择一个表名！");
return;
}
this.$http({
method: "POST",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/mapper/preview/column",
data: JSON.stringify({
id: this.createform.sourceConnectionId,
schemaName: this.createform.sourceSchema,
isInclude: this.createform.includeOrExclude == 'INCLUDE',
tableName: this.preiveTableName,
nameMapper: this.createform.columnNameMapper,
})
}).then(res => {
if (0 === res.data.code) {
this.columnNamesMapperData = res.data.data;
} else {
if (res.data.message) {
alert(res.data.message);
}
}
});
},
handleSave: function () {
this.$refs['createform'].validate(valid => {
if (valid) {
this.$http({
method: "POST",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/assignment/create",
data: JSON.stringify({
name: this.createform.name,
description: this.createform.description,
scheduleMode: this.createform.scheduleMode,
cronExpression: this.createform.cronExpression,
config: {
sourceConnectionId: this.createform.sourceConnectionId,
sourceSchema: this.createform.sourceSchema,
includeOrExclude: this.createform.includeOrExclude,
sourceTables: this.createform.sourceTables,
targetConnectionId: this.createform.targetConnectionId,
targetSchema: this.createform.targetSchema,
tableNameMapper: this.createform.tableNameMapper,
columnNameMapper: this.createform.columnNameMapper,
targetDropTable: true,
batchSize: this.createform.batchSize
}
})
}).then(res => {
if (0 === res.data.code) {
this.$message("添加任务成功");
this.$router.push('/task/assignment')
} else {
if (res.data.message) {
alert(res.data.message);
}
}
});
} else {
alert("请点击【上一步】检查输入");
}
});
}
},
created () {
this.loadConnections();
},
}
</script>
<style scoped>
.el-card {
width: 100%;
height: 100%;
overflow: auto;
}
.tip-content {
font-size: 12px;
}
.name-mapper-table,
.name-mapper-table table tr th,
.name-mapper-table table tr td {
border-collapse: collapse;
border: 1px solid #e0dddd;
width: 100%;
}
.el-descriptions__body
.el-descriptions__table
.el-descriptions-row
.el-descriptions-item__label {
min-width: 20px;
max-width: 60px;
}
</style>

18
dbswitch-admin-ui/src/views/task/schedule.vue
View File

@@ -22,9 +22,9 @@
:data="jobTableData"
size="small"
border>
<template slot="empty">
<span>单击左侧任务列表记录来查看作业调度记录</span>
</template>
<template slot="empty">
<span>单击左侧任务列表记录来查看作业调度记录</span>
</template>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left"
@@ -127,7 +127,9 @@ export default {
if (0 === res.data.code) {
this.allTaskAssignments = res.data.data;
} else {
alert("初始化任务安排信息失败:" + res.data.errmsg);
if (res.data.message) {
alert("初始化任务安排信息失败:" + res.data.message);
}
}
}
);
@@ -153,7 +155,9 @@ export default {
this.totalCount = res.data.pagination.total;
this.jobTableData = res.data.data;
} else {
alert("查询JOB执行历史纪录失败," + res.data.message);
if (res.data.message) {
alert("查询JOB执行历史纪录失败," + res.data.message);
}
}
});
},
@@ -170,7 +174,9 @@ export default {
this.$message("停止JOB成功");
this.loadJobsData();
} else {
alert("JOB停止失败," + res.data.message);
if (res.data.message) {
alert("JOB停止失败," + res.data.message);
}
}
});
}

843
dbswitch-admin-ui/src/views/task/update.vue Normal file
View File

@@ -0,0 +1,843 @@
<template>
<el-card>
<el-steps :active="active"
finish-status="success">
<el-step title="基本信息配置" />
<el-step title="同步源端配置" />
<el-step title="目标端配置" />
<el-step title="映射转换配置" />
<el-step title="配置确认提交" />
</el-steps>
<el-form :model="updateform"
status-icon
:rules="rules"
ref="updateform">
<div v-show="active == 1">
<el-form-item label="名称"
label-width="240px"
:required=true
prop="name"
style="width:65%">
<el-input v-model="updateform.name"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="描述"
label-width="240px"
prop="description"
style="width:65%">
<el-input v-model="updateform.description"
type="textarea"
:rows="3"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="调度方式"
label-width="240px"
:required=true
prop="scheduleMode"
style="width:65%">
<el-select v-model="updateform.scheduleMode">
<el-option label="手动调度"
value="MANUAL"></el-option>
<el-option label="系统调度"
value="SYSTEM_SCHEDULED"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Cron表达式"
label-width="240px"
style="width:65%"
v-if="updateform.scheduleMode=='SYSTEM_SCHEDULED'">
<el-col :span="10">
<el-popover v-model="cronPopover">
<vueCron @change="changeUpdateCronExpression"
@close="cronPopover=false"
i18n="cn" />
<el-input slot="reference"
:disabled=false
v-model="updateform.cronExpression"
placeholder="点击选择"
@click="cronPopover=true" />
</el-popover>
</el-col>
</el-form-item>
</div>
<div v-show="active == 2">
<el-form-item label="源端数据源"
label-width="240px"
:required=true
prop="sourceConnectionId"
style="width:65%">
<el-select v-model="updateform.sourceConnectionId"
@change="selectChangedSourceConnection"
placeholder="请选择">
<el-option v-for="(item,index) in connectionNameList"
:key="index"
:label="`[${item.id}]${item.name}`"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="源端模式名"
label-width="240px"
:required=true
prop="sourceSchema"
style="width:65%">
<el-select v-model="updateform.sourceSchema"
@change="selectUpdateChangedSourceSchema"
placeholder="请选择">
<el-option v-for="(item,index) in sourceConnectionSchemas"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="配置方式"
label-width="240px"
:required=true
prop="includeOrExclude"
style="width:65%">
<el-select placeholder="请选择配置方式"
v-model="updateform.includeOrExclude">
<el-option label="包含表"
value="INCLUDE"></el-option>
<el-option label="排除表"
value="EXCLUDE"></el-option>
</el-select>
</el-form-item>
<el-form-item label="表名配置"
label-width="240px"
:required=false
prop="sourceTables"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
当为包含表时，选择所要精确包含的表名，如果不选则代表选择所有；当为排除表时，选择索要精确排除的表名。
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-select placeholder="请选择表名"
multiple
v-model="updateform.sourceTables">
<el-option v-for="(item,index) in sourceSchemaTables"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="active == 3">
<el-form-item label="目的端数据源"
label-width="240px"
:required=true
prop="targetConnectionId"
style="width:65%">
<el-select v-model="updateform.targetConnectionId"
@change="selectChangedTargetConnection"
placeholder="请选择">
<el-option v-for="(item,index) in connectionNameList"
:key="index"
:label="`[${item.id}]${item.name}`"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的端模式名"
label-width="240px"
:required=true
prop="targetSchema"
style="width:65%">
<el-select v-model="updateform.targetSchema"
placeholder="请选择">
<el-option v-for="(item,index) in targetConnectionSchemas"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据处理批次大小"
label-width="240px"
:required=true
prop="batchSize"
style="width:65%">
<el-tooltip placement="top">
<div slot="content">
数据同步时单个批次处理的行记录总数，该值越到越占用内存空间。建议：小字段表设置为10000，大字段表设置为1000
</div>
<i class="el-icon-question"></i>
</el-tooltip>
<el-select v-model="updateform.batchSize">
<el-option label=1000
:value=1000></el-option>
<el-option label=5000
:value=5000></el-option>
<el-option label=10000
:value=10000></el-option>
<el-option label=20000
:value=20000></el-option>
</el-select>
</el-form-item>
</div>
<div v-show="active == 4">
<div class="tip-content">
<p>说明：(1) 当表名映射规则记录为空时，代表目标表名与源表名的名称相同;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
(2) 当字段名映射规则记录为空时，代表目标表的字段名与源表名的字段名相同</p>
</div>
<el-button type="success"
@click="addTableNameMapperListRow()"
round>添加表名映射</el-button>
<el-button type="warning"
@click="previewTableNameMapList()"
round>预览表名映射</el-button>
<el-table :data="updateform.tableNameMapper"
size="mini"
border
height="200"
style="width:90%;margin-top: 15px;">
<template slot="empty">
<span>请点击"添加表名映射"按钮添加表名映射关系记录</span>
</template>
<el-table-column label="表名匹配的正则名"
width="320">
<template slot-scope="scope">
<el-input v-model="scope.row.fromPattern"
type="string"> </el-input>
</template>
</el-table-column>
<el-table-column label="替换的目标值"
width="320">
<template slot-scope="scope">
<el-input v-model="scope.row.toValue"
type="string"></el-input>
</template>
</el-table-column>
<el-table-column label="操作"
width="220">
<template slot-scope="scope">
<el-button size="mini"
type="danger"
@click="deleteTableNameMapperListItem(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="success"
@click="addColumnNameMapperListRow()"
round>添加字段名映射</el-button>
<el-button type="warning"
@click="previewColumnNameMapList()"
round>预览字段名映射</el-button>
<el-table :data="datas = updateform.columnNameMapper"
size="mini"
border
height="200"
style="width:90%;margin-top: 15px;">
<template slot="empty">
<span>请点击"添加字段名映射"按钮添加字段名映射关系记录</span>
</template>
<el-table-column label="字段名匹配的正则名"
width="320">
<template slot-scope="scope">
<el-input v-model="scope.row.fromPattern"
type="string"> </el-input>
</template>
</el-table-column>
<el-table-column label="替换的目标值"
width="320">
<template slot-scope="scope">
<el-input v-model="scope.row.toValue"
type="string"></el-input>
</template>
</el-table-column>
<el-table-column label="操作"
width="220">
<template slot-scope="scope">
<el-button size="mini"
type="danger"
@click="deleteColumnNameMapperListItem(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-show="active == 5">
<el-descriptions size="small"
:column="1"
label-class-name="el-descriptions-item-label-class"
border>
<el-descriptions-item label="任务名称">{{updateform.name}}</el-descriptions-item>
<el-descriptions-item label="任务描述">{{updateform.description}}</el-descriptions-item>
<el-descriptions-item label="调度方式">
<span v-if="updateform.scheduleMode == 'MANUAL'">
手动执行
</span>
<span v-if="updateform.scheduleMode == 'SYSTEM_SCHEDULED'">
系统调度
</span>
</el-descriptions-item>
<el-descriptions-item v-if="updateform.scheduleMode == 'SYSTEM_SCHEDULED'"
label="CRON表达式">{{updateform.cronExpression}}</el-descriptions-item>
<el-descriptions-item label="源端数据源">[{{updateform.sourceConnectionId}}]{{sourceConnection.name}}</el-descriptions-item>
<el-descriptions-item label="源端schema">{{updateform.sourceSchema}}</el-descriptions-item>
<el-descriptions-item label="源端表选择方式">
<span v-if="updateform.includeOrExclude == 'INCLUDE'">
包含表
</span>
<span v-if="updateform.includeOrExclude == 'EXCLUDE'">
排除表
</span>
</el-descriptions-item>
<el-descriptions-item label="源端表名列表">
<span v-show="updateform.includeOrExclude == 'INCLUDE' && (!updateform.sourceTables || updateform.sourceTables.length==0)"><b>所有物理表</b></span>
<p v-for="item in updateform.sourceTables"
v-bind:key="item">{{item}}</p>
</el-descriptions-item>
<el-descriptions-item label="目地端数据源">[{{updateform.targetConnectionId}}]{{targetConnection.name}}</el-descriptions-item>
<el-descriptions-item label="目地端schema">{{updateform.targetSchema}}</el-descriptions-item>
<el-descriptions-item label="数据处理批次量">{{updateform.batchSize}}</el-descriptions-item>
<el-descriptions-item label="表名映射规则">
<span v-show="!updateform.tableNameMapper || updateform.tableNameMapper.length==0">[映射关系为空]</span>
<table v-if="updateform.tableNameMapper && updateform.tableNameMapper.length>0"
class="name-mapper-table">
<tr>
<th>表名匹配的正则名</th>
<th>替换的目标值</th>
</tr>
<tr v-for='(item,index) in updateform.tableNameMapper'
:key="index">
<td>{{item['fromPattern']}}</td>
<td>{{item['toValue']}}</td>
</tr>
</table>
</el-descriptions-item>
<el-descriptions-item label="字段名映射规则">
<span v-show="!updateform.columnNameMapper || updateform.columnNameMapper.length==0">[映射关系为空]</span>
<table v-if="updateform.columnNameMapper && updateform.columnNameMapper.length>0"
class="name-mapper-table">
<tr>
<th>字段名匹配的正则名</th>
<th>替换的目标值</th>
</tr>
<tr v-for='(item,index) in updateform.columnNameMapper'
:key="index">
<td>{{item['fromPattern']}}</td>
<td>{{item['toValue']}}</td>
</tr>
</table>
</el-descriptions-item>
</el-descriptions>
</div>
</el-form>
<el-button round
v-if="active > 1"
style="margin-top: 12px"
@click="pre">
上一步
</el-button>
<el-button round
@click="next"
v-if="active > 0 && active < 5">
下一步
</el-button>
<el-button round
@click="handleSave"
v-if="active == 5 && !can_go_back">
提交
</el-button>
<el-button round
@click="handleGoBack"
v-if="active == 5 && can_go_back">
返回
</el-button>
<el-dialog v-if="active == 4"
title="查看表名映射关系"
:visible.sync="tableNameMapperDialogVisible"
:showClose="false"
:before-close="handleClose">
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
:data="tableNamesMapperData"
size="mini"
border>
<el-table-column prop="originalName"
label="源端表名"
min-width="20%"></el-table-column>
<el-table-column prop="targetName"
label="目标表名"
min-width="20%"></el-table-column>
</el-table>
<div slot="footer"
class="dialog-footer">
<el-button @click="tableNameMapperDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
<el-dialog v-if="active == 4"
title="查看字段影射关系"
:visible.sync="columnNameMapperDialogVisible"
:showClose="false"
:before-close="handleClose">
<el-select @change="queryPreviewColumnNameMapperList"
v-model="preiveTableName"
placeholder="请选择">
<el-option v-for="(item,index) in preiveSeeTableNameList"
:key="index"
:label="item"
:value="item"></el-option>
</el-select>
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
:data="columnNamesMapperData"
size="mini"
border>
<el-table-column prop="originalName"
label="原始字段名"
min-width="20%"></el-table-column>
<el-table-column prop="targetName"
label="目标表字段名"
min-width="20%"></el-table-column>
</el-table>
<div slot="footer"
class="dialog-footer">
<el-button @click="columnNameMapperDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
</el-card>
</template>
<script>
export default {
data () {
return {
cronPopover: false,
updateform: {
id: 0,
name: "",
description: "",
scheduleMode: "MANUAL",
cronExpression: "",
sourceConnectionId: '请选择',
sourceSchema: "",
includeOrExclude: "",
sourceTables: [],
tableNameMapper: [],
columnNameMapper: [],
targetConnectionId: '请选择',
targetDropTable: true,
targetSchema: "",
batchSize: 5000
},
rules: {
name: [
{
required: true,
message: "任务名称不能为空",
trigger: "blur"
}
],
scheduleMode: [
{
required: true,
type: 'string',
message: "调度方式必须选择",
trigger: "change"
}
],
sourceConnectionId: [
{
required: true,
type: 'integer',
message: "必选选择一个来源端",
trigger: "change"
}
],
sourceSchema: [
{
required: true,
type: 'string',
message: "必选选择一个Schema名",
trigger: "change"
}
],
includeOrExclude: [
{
required: true,
type: 'string',
message: "配置方式必须选择",
trigger: "change"
}
],
sourceTables: [
{
required: false,
type: 'array',
message: "必选选择一个Table名",
trigger: "change"
}
],
targetConnectionId: [
{
required: true,
type: 'integer',
message: "必选选择一个目的端",
trigger: "change"
}
],
targetSchema: [
{
required: true,
type: 'string',
message: "必选选择一个Schema名",
trigger: "change"
}
],
batchSize: [
{
required: true,
type: 'integer',
message: "必选选择一个批大小",
trigger: "change"
}
]
},
can_go_back: true,
active: 5,
sourceConnection: {},
targetConnection: {},
sourceConnectionSchemas: [],
sourceSchemaTables: [],
targetConnectionSchemas: [],
tableNameMapperDialogVisible: false,
columnNameMapperDialogVisible: false,
tableNamesMapperData: [],
columnNamesMapperData: [],
preiveSeeTableNameList: [],
preiveTableName: "",
}
},
methods: {
handleClose (done) {
},
next () {
this.can_go_back = false;
if (this.active++ > 4) this.active = 5
},
pre () {
this.can_go_back = false;
if (this.active-- < 2) this.active = 1
},
handleGoBack () {
if (this.can_go_back) {
this.$router.go(-1);
}
},
loadConnections: function () {
this.connectionNameList = [];
this.$http({
method: "GET",
url: "/dbswitch/admin/api/v1/connection/list/name"
}).then(
res => {
if (0 === res.data.code) {
this.connectionNameList = res.data.data;
} else {
this.connectionNameList = [];
if (res.data.message) {
alert("加载任务列表失败:" + res.data.message);
}
}
},
function () {
console.log("failed");
}
);
},
loadAssignmentDetail: function () {
this.$http.get(
"/dbswitch/admin/api/v1/assignment/detail/id/" + this.$route.query.id
).then(res => {
if (0 === res.data.code) {
let detail = res.data.data;
this.updateform = {
id: detail.id,
name: detail.name,
description: detail.description,
scheduleMode: detail.scheduleMode,
cronExpression: detail.cronExpression,
sourceConnectionId: detail.configuration.sourceConnectionId,
sourceSchema: detail.configuration.sourceSchema,
includeOrExclude: detail.configuration.includeOrExclude,
sourceTables: detail.configuration.sourceTables,
tableNameMapper: detail.configuration.tableNameMapper,
columnNameMapper: detail.configuration.columnNameMapper,
targetConnectionId: detail.configuration.targetConnectionId,
targetDropTable: detail.configuration.targetDropTable,
targetSchema: detail.configuration.targetSchema,
batchSize: detail.configuration.batchSize
}
this.selectChangedSourceConnection(this.updateform.sourceConnectionId)
this.selectUpdateChangedSourceSchema(this.updateform.sourceSchema)
this.selectChangedTargetConnection(this.updateform.targetConnectionId)
} else {
if (res.data.message) {
alert("查询任务失败," + res.data.message);
}
}
});
},
changeUpdateCronExpression: function (value) {
this.updateform.cronExpression = value;
},
selectChangedSourceConnection: function (value) {
this.sourceConnection = this.connectionNameList.find(
(item) => {
return item.id === value;
});
this.sourceConnectionSchemas = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/schemas/get/" + value
).then(res => {
if (0 === res.data.code) {
this.sourceConnectionSchemas = res.data.data;
} else {
this.$message.error("查询来源端数据库的Schema失败," + res.data.message);
this.sourceConnectionSchemas = [];
}
});
},
selectUpdateChangedSourceSchema: function (value) {
this.sourceSchemaTables = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/tables/get/" + this.updateform.sourceConnectionId + "?schema=" + value
).then(res => {
if (0 === res.data.code) {
this.sourceSchemaTables = res.data.data;
} else {
this.$message.error("查询来源端数据库在制定Schema下的表列表失败," + res.data.message);
this.sourceSchemaTables = [];
}
});
},
selectChangedTargetConnection: function (value) {
this.targetConnection = this.connectionNameList.find(
(item) => {
return item.id === value;
});
this.targetConnectionSchemas = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/schemas/get/" + value
).then(res => {
if (0 === res.data.code) {
this.targetConnectionSchemas = res.data.data;
} else {
this.$message.error("查询目的端数据库的Schema失败," + res.data.message);
this.targetConnectionSchemas = [];
}
});
},
addTableNameMapperListRow: function () {
if (!this.updateform.tableNameMapper) {
this.updateform.tableNameMapper = [];
}
this.updateform.tableNameMapper.push({ "fromPattern": "", "toValue": "" });
},
deleteTableNameMapperListItem: function (index) {
if (!this.updateform.tableNameMapper) {
this.updateform.tableNameMapper = [];
}
this.updateform.tableNameMapper.splice(index, 1);
},
previewTableNameMapList: function () {
if (this.updateform.sourceConnectionId <= 0 || !this.updateform.sourceSchema || this.updateform.sourceSchema.length == 0) {
alert("请选择源端数据源和源端模式名！");
return;
}
this.$http({
method: "POST",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/mapper/preview/table",
data: JSON.stringify({
id: this.updateform.sourceConnectionId,
schemaName: this.updateform.sourceSchema,
isInclude: this.updateform.includeOrExclude == 'INCLUDE',
tableNames: this.updateform.sourceTables,
nameMapper: this.updateform.tableNameMapper,
})
}).then(res => {
if (0 === res.data.code) {
this.tableNamesMapperData = res.data.data;
this.tableNameMapperDialogVisible = true;
} else {
if (res.data.message) {
alert(res.data.message);
}
}
});
},
addColumnNameMapperListRow: function () {
if (!this.updateform.columnNameMapper) {
this.updateform.columnNameMapper = [];
}
this.updateform.columnNameMapper.push({ "fromPattern": "", "toValue": "" });
},
deleteColumnNameMapperListItem: function (index) {
if (!this.updateform.columnNameMapper) {
this.updateform.columnNameMapper = [];
}
this.updateform.columnNameMapper.splice(index, 1);
},
previewColumnNameMapList: function () {
if (!this.updateform.sourceConnectionId || this.updateform.sourceConnectionId <= 0
|| !this.updateform.sourceSchema || this.updateform.sourceSchema.length == 0) {
alert("请选择【源端数据源】和【源端模式名】！");
return;
}
if (!this.updateform.includeOrExclude) {
alert("请选择源端表选择的【配置方式】！");
return;
}
if (this.updateform.includeOrExclude == "INCLUDE") {
this.preiveSeeTableNameList = this.updateform.sourceTables;
} else {
if (this.updateform.sourceTables.length == 0) {
alert("请选择排除表的【表名配置】！");
return;
}
// 排除表，求差集
this.preiveSeeTableNameList = JSON.parse(JSON.stringify(this.sourceSchemaTables));
for (var i = 0; i < this.updateform.sourceTables.length; ++i) {
var one = this.updateform.sourceTables[i];
this.preiveSeeTableNameList.some((item, index) => {
if (item == one) {
this.preiveSeeTableNameList.splice(index, 1)
return true;
}
})
}
}
this.preiveTableName = "";
this.columnNamesMapperData = [];
this.columnNameMapperDialogVisible = true;
},
queryPreviewColumnNameMapperList: function () {
if (!this.preiveSeeTableNameList || this.preiveSeeTableNameList.length == 0) {
alert("请在源端配置【表名配置】！");
return;
}
if (!this.preiveTableName || this.preiveTableName.length == 0) {
alert("请选择一个表名！");
return;
}
this.$http({
method: "POST",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/mapper/preview/column",
data: JSON.stringify({
id: this.updateform.sourceConnectionId,
schemaName: this.updateform.sourceSchema,
isInclude: this.updateform.includeOrExclude == 'INCLUDE',
tableName: this.preiveTableName,
nameMapper: this.updateform.columnNameMapper,
})
}).then(res => {
if (0 === res.data.code) {
this.columnNamesMapperData = res.data.data;
} else {
if (res.data.message) {
alert(res.data.message);
}
}
});
},
handleSave: function () {
this.$refs['updateform'].validate(valid => {
if (valid) {
this.$http({
method: "POST",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/assignment/update",
data: JSON.stringify({
id: this.$route.query.id,
name: this.updateform.name,
description: this.updateform.description,
scheduleMode: this.updateform.scheduleMode,
cronExpression: this.updateform.cronExpression,
config: {
sourceConnectionId: this.updateform.sourceConnectionId,
sourceSchema: this.updateform.sourceSchema,
includeOrExclude: this.updateform.includeOrExclude,
sourceTables: this.updateform.sourceTables,
targetConnectionId: this.updateform.targetConnectionId,
targetSchema: this.updateform.targetSchema,
tableNameMapper: this.updateform.tableNameMapper,
columnNameMapper: this.updateform.columnNameMapper,
targetDropTable: true,
batchSize: this.updateform.batchSize
}
})
}).then(res => {
if (0 === res.data.code) {
this.$message("修改任务成功");
this.$router.push('/task/assignment')
} else {
if (res.data.message) {
alert(res.data.message);
}
}
});
} else {
alert("请点击【上一步】检查输入");
}
});
}
},
created () {
this.loadConnections();
this.loadAssignmentDetail();
},
}
</script>
<style scoped>
.el-card {
width: 100%;
height: 100%;
overflow: auto;
}
.tip-content {
font-size: 12px;
}
.name-mapper-table,
.name-mapper-table table tr th,
.name-mapper-table table tr td {
border-collapse: collapse;
border: 1px solid #e0dddd;
width: 100%;
}
.el-descriptions__body
.el-descriptions__table
.el-descriptions-row
.el-descriptions-item__label {
min-width: 20px;
max-width: 60px;
}
</style>