dromara/dbswitch
1
0
Fork 0
mirror of https://gitee.com/dromara/dbswitch.git synced 2025-10-17 07:03:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

修复issue反馈问题

Browse Source
This commit is contained in:
inrgihc
2024-05-12 00:08:24 +08:00
parent 6f970816a7
commit cdf90ec4db
128 changed files with 2159 additions and 1185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dbswitch-admin-ui/README.md
View File

@@ -32,13 +32,13 @@ npm -v
### 2. Windows下安装Nodejs
可参考[博文教程](https://zhuanlan.zhihu.com/p/572795586)
可参考[博文教程](https://blog.csdn.net/inrgihc/article/details/138013024)
## 二、构建
``` bash
# install dependencies
npm install
npm install --force
# serve with hot reload at localhost:8080
npm run dev

966
dbswitch-admin-ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
dbswitch-admin-ui/src/components/asideBar/asideBar.vue
View File

@@ -8,8 +8,8 @@
unique-opened
@open="handleOpen"
@close="handleClose"
background-color="#f7f7f7"
text-color="#000000"
background-color="#001529"
text-color="rgb(191, 203, 217)"
active-text-color="#ffffff"
:collapse="collapsed"
:default-active="initActivePath"

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

@@ -9,153 +9,152 @@ Vue.use(Router);
//
///////////////////////////////////////////////////////////////////////////
const constantRouter = new Router({
routes: [
routes: [
{
path: '/',
name: '首页',
component: () => import('@/views/layout'),
redirect: '/dashboard',
children: [
{
path: '/',
name: '首页',
component: () => import('@/views/layout'),
redirect: '/dashboard',
children: [
{
path: '/dashboard',
name: '概览',
icon: "el-icon-menu",
component: () => import('@/views/dashboard/index')
},
{
path: '/connection',
name: '数据源管理',
icon: "el-icon-s-order",
component: () => import('@/views/connection/index'),
children: [
{
path: '/connection/list',
name: '数据源',
icon: "el-icon-bank-card",
component: () => import('@/views/connection/list')
},
{
path: '/connection/driver',
name: '驱动配置',
icon: "el-icon-help",
component: () => import('@/views/connection/driver'),
}
]
},
{
path: '/metadata',
name: '数据库管理',
icon: "el-icon-coin",
component: () => import('@/views/metadata/index')
},
{
path: '/task',
name: '数据集成 MDI',
icon: "el-icon-s-tools",
component: () => import('@/views/task/index'),
children: [
{
path: '/task/assignment',
name: '任务管理',
icon: "el-icon-eleme",
component: () => import('@/views/task/assignment'),
},
{
path: '/task/schedule',
name: '监控调度',
icon: "el-icon-pie-chart",
component: () => import('@/views/task/schedule')
}
]
},
{
path: '/log',
name: '审计日志',
icon: "el-icon-platform-eleme",
//redirect: '/log/access',
component: () => import('@/views/log/index'),
children: [
{
path: '/log/access',
name: '登录日志',
icon: "el-icon-place",
component: () => import('@/views/log/access')
},
{
path: '/log/action',
name: '操作日志',
icon: "el-icon-s-check",
component: () => import('@/views/log/action')
}
]
},
{
path: '/about',
name: '关于系统',
icon: "el-icon-s-custom",
component: () => import('@/views/about/me')
},
{
path: '/user/personal',
name: '个人中心',
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')
},
{
path: '/task/detail',
name: '查看任务',
hidden: true,
component: () => import('@/views/task/detail')
},
{
path: '/connection/list/addDataSource1',
name: '接入数据源',
icon: "el-icon-menu",
hidden: true,
component: () => import('@/views/connection/addDataSource1.vue')
},
{
path: '/connection/list/addDataSource2',
name: '接入数据源',
icon: "el-icon-menu",
hidden: true,
component: () => import('@/views/connection/addDataSource2.vue')
},
{
path: '/connection/list/dataSourceInfo',
name: '数据源详情',
icon: "el-icon-menu",
hidden: true,
component: () => import('@/views/connection/dataSourceInfo.vue')
},
{
path: '/connection/list/updateDataSource',
name: '编辑数据源',
icon: "el-icon-menu",
hidden: true,
component: () => import('@/views/connection/updateDataSource.vue')
},
],
path: '/dashboard',
name: '系统概览',
icon: "el-icon-menu",
component: () => import('@/views/dashboard/index')
},
{
path: '/login',
name: '登录',
component: () => import('@/views/login')
}
]
path: '/connection',
name: '连接管理',
icon: "el-icon-s-order",
component: () => import('@/views/connection/index'),
children: [
{
path: '/connection/list',
name: '数据源',
icon: "el-icon-bank-card",
component: () => import('@/views/connection/list')
},
{
path: '/connection/driver',
name: '驱动配置',
icon: "el-icon-help",
component: () => import('@/views/connection/driver'),
}
]
},
{
path: '/metadata',
name: '数据导航',
icon: "el-icon-coin",
component: () => import('@/views/metadata/index')
},
{
path: '/task',
name: '数据接入',
icon: "el-icon-s-tools",
component: () => import('@/views/task/index'),
children: [
{
path: '/task/assignment',
name: '任务管理',
icon: "el-icon-eleme",
component: () => import('@/views/task/assignment'),
},
{
path: '/task/schedule',
name: '监控调度',
icon: "el-icon-pie-chart",
component: () => import('@/views/task/schedule')
}
]
},
{
path: '/log',
name: '审计日志',
icon: "el-icon-platform-eleme",
//redirect: '/log/access',
component: () => import('@/views/log/index'),
children: [
{
path: '/log/access',
name: '登录日志',
icon: "el-icon-place",
component: () => import('@/views/log/access')
},
{
path: '/log/action',
name: '操作日志',
icon: "el-icon-s-check",
component: () => import('@/views/log/action')
}
]
},
{
path: '/about',
name: '关于系统',
icon: "el-icon-s-custom",
component: () => import('@/views/about/me')
},
{
path: '/user/personal',
name: '个人中心',
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')
},
{
path: '/task/detail',
name: '查看任务',
hidden: true,
component: () => import('@/views/task/detail')
},
{
path: '/connection/list/addDataSource1',
name: '接入数据源',
icon: "el-icon-menu",
hidden: true,
component: () => import('@/views/connection/addDataSource1.vue')
},
{
path: '/connection/list/addDataSource2',
name: '接入数据源',
icon: "el-icon-menu",
hidden: true,
component: () => import('@/views/connection/addDataSource2.vue')
},
{
path: '/connection/list/dataSourceInfo',
name: '数据源详情',
icon: "el-icon-menu",
hidden: true,
component: () => import('@/views/connection/dataSourceInfo.vue')
},
{
path: '/connection/list/updateDataSource',
name: '编辑数据源',
icon: "el-icon-menu",
hidden: true,
component: () => import('@/views/connection/updateDataSource.vue')
},
],
},
{
path: '/login',
name: '登录',
component: () => import('@/views/login')
}
]
});
export default constantRouter;

148
dbswitch-admin-ui/src/views/connection/addDataSource1.vue
View File

@@ -1,56 +1,57 @@
<template>
<div>
<el-container>
<el-aside width="134px"></el-aside>
<el-container>
<el-header>
<h3 style="font-family: 楷体" class=".h-title">请选择数据源类型</h3>
</el-header>
<el-main>
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<template slot="title">
<span class="sub-title">数据库</span>
</template>
<div>
<el-row>
<el-col :span="4" v-for="(o, index) of databaseType" :key="index" :offset="1">
<div style="margin-top:20px;cursor: pointer">
<el-card :body-style="{ padding: '0px'}" shadow="hover"
@click.native="selectDbDriver(o)"
:class="selectedIndex === index ? 'active':''">
<div style="display: inline-block;float: left">
<img title="" :src="require('@/assets/icons/' + o.name +'.png')" class="image">
</div>
<div style="display: inline-block;float: left;padding: 10px 0px 0px 10px">
<span>{{ o.name }}</span><br>
<span class="tag-mdi">MDI</span>
</div>
</el-card>
<el-card>
<el-header>
<h3 class=".h-title">请选择数据源类型</h3>
</el-header>
<el-main>
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<template slot="title">
<span class="sub-title">数据库</span>
</template>
<div>
<el-row>
<el-col :span="4"
v-for="(o, index) of databaseType"
:key="index"
:offset="1">
<div style="margin-top:20px;cursor: pointer">
<el-card class="card-item"
:body-style="{ padding: '0px'}"
shadow="hover"
@click.native="selectDbDriver(o)"
:class="selectedIndex === index ? 'active':''">
<div style="display: inline-block;float: left">
<img title=""
:src="require('@/assets/icons/' + o.name +'.png')"
class="image">
</div>
</el-col>
</el-row>
</div>
</el-collapse-item>
</el-collapse>
</el-main>
<el-footer>
<el-row>
<el-button type="primary" class="next" @click="next">下一步</el-button>
<el-button class="cancel" @click="cancel">取消</el-button>
</el-row>
</el-footer>
</el-container>
</el-container>
</div>
<div style="display: inline-block;float: left;padding: 10px 0px 0px 10px">
<span>{{ o.name }}</span><br>
</div>
</el-card>
</div>
</el-col>
</el-row>
</div>
</el-collapse-item>
</el-collapse>
</el-main>
<el-footer>
<el-row>
<el-button type="primary"
class="next"
@click="next">下一步</el-button>
<el-button class="cancel"
@click="cancel">取消</el-button>
</el-row>
</el-footer>
</el-card>
</template>
<script>
export default {
data() {
data () {
return {
activeNames: ['1'],
currentDate: new Date(),
@@ -67,29 +68,29 @@ export default {
method: "GET",
url: "/dbswitch/admin/api/v1/connection/types"
}).then(
res => {
if (0 === res.data.code) {
this.databaseType = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.message);
}
},
function () {
console.log("failed");
res => {
if (0 === res.data.code) {
this.databaseType = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.message);
}
},
function () {
console.log("failed");
}
);
},
selectChangedDriverVersion: function (value) {
this.connectionDriver = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/" + value + "/drivers"
"/dbswitch/admin/api/v1/connection/" + value + "/drivers"
).then(res => {
if (0 === res.data.code) {
this.connectionDriver = res.data.data;
let varDatabaseType = this.databaseType.find(
(item) => {
return item.type === value;
});
(item) => {
return item.type === value;
});
if (varDatabaseType) {
this.createform.sample = varDatabaseType.sample;
}
@@ -109,7 +110,7 @@ export default {
} else {
this.$router.push({
path: "/connection/list/addDataSource2", query:
this.selectedDataSource
this.selectedDataSource
});
}
},
@@ -117,14 +118,26 @@ export default {
this.$router.push("/connection/list");
},
},
created() {
created () {
this.loadDatabaseTypes();
}
}
</script>
<style scoped>
.el-header, .el-main, .el-footer {
.el-card {
border-radius: 4px;
overflow: visible;
}
.card-item {
border-radius: 10px;
overflow: hidden;
}
.el-header,
.el-main,
.el-footer {
background-color: white;
}
@@ -136,7 +149,6 @@ export default {
.sub-title {
flex: 1 0 90%;
order: 1;
font-family: 楷体;
font-weight: bolder;
font-size: 18px;
}
@@ -174,7 +186,6 @@ export default {
}
.image {
//width: 100%;
display: inline-block;
width: 60px;
height: 60px;
@@ -188,12 +199,12 @@ export default {
}
.clearfix:after {
clear: both
clear: both;
}
.active {
background-color: #ffffff !important;
border: 1px solid #409EFF;
border: 1px solid #409eff;
}
.tag-mdi {
@@ -218,8 +229,7 @@ export default {
padding: 6px 14px;
border: none;
color: white;
background-color: #409EFF;
background-color: #409eff;
cursor: pointer;
}
</style>

326
dbswitch-admin-ui/src/views/connection/addDataSource2.vue
View File

@@ -1,132 +1,163 @@
<template>
<div>
<el-container>
<el-aside width="134px"></el-aside>
<el-card>
<el-header style="height: 80px">
<div style="display: inline-block;float: left">
<img title="DB"
:src="require('@/assets/icons/' + this.selectedDataSource.name +'.png')"
class="image">
</div>
<h3 style="font-family: 楷体;margin-left: 60px"
class=".h-title">{{ this.selectedDataSource.name }}</h3>
</el-header>
<el-main>
<el-container>
<el-header style="height: 80px">
<div style="display: inline-block;float: left">
<img title="DB" :src="require('@/assets/icons/' + this.selectedDataSource.name +'.png')" class="image">
</div>
<h3 style="font-family: 楷体;margin-left: 60px" class=".h-title">{{ this.selectedDataSource.name }}</h3>
</el-header>
<el-main>
<el-form ref="createform"
:rules="rules"
:model="createform"
label-width="120px"
label-position="right"
size="medium"
status-icon>
<div class="f1">
<el-form ref="createform" :rules="rules" :model="createform" label-width="120px" label-position="right"
size="medium" status-icon>
<div class="f1">
<el-form-item label="支持版本">
<span v-for="(o, index) of connectionDriver"
:key="index"
:offset="1">
{{ o.driverVersion }}
<span v-if="index !== connectionDriver.length-1">
、
</span>
</span>
</el-form-item>
<el-form-item label="支持版本">
<span v-for="(o, index) of connectionDriver" :key="index" :offset="1">
{{ o.driverVersion }}
<span v-if="index !== connectionDriver.length-1">
、
</span>
</span>
</el-form-item>
<el-form-item prop="name"
label="数据源名称"
style="width:40%">
<el-input v-model="createform.name"
placeholder="请输入数据源名称"
auto-complete="off"></el-input>
<label class="tips-style">数据源名称不能包含 &、<、>、"、'、(、) ，长度为1~200字符</label>
</el-form-item>
<el-form-item :required=true
label="数据库类型">
<label>{{ this.selectedDataSource.name }}</label>
</el-form-item>
<el-form-item prop="version"
label="驱动版本">
<el-select v-model="createform.version"
placeholder="请选择驱动版本">
<el-option v-for="(item,index) in this.connectionDriver"
:key="index"
:label="item.driverVersion"
:value="item.driverVersion"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="编码格式">-->
<!-- <label>utf8、utf8mb4</label>-->
<!-- </el-form-item>-->
<el-form-item prop="name" label="数据源名称" style="width:40%">
<el-input v-model="createform.name" placeholder="请输入数据源名称" auto-complete="off"></el-input>
<label class="tips-style">数据源名称不能包含 &、<、>、"、'、(、) ，长度为1~200字符</label>
</el-form-item>
<el-form-item :required=true label="数据库类型">
<label v-model="createform.type">{{ this.selectedDataSource.name }}</label>
</el-form-item>
<el-form-item prop="version" label="驱动版本">
<el-select v-model="createform.version" placeholder="请选择驱动版本">
<el-option v-for="(item,index) in this.connectionDriver"
:key="index"
:label="item.driverVersion"
:value="item.driverVersion"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="编码格式">-->
<!-- <label>utf8、utf8mb4</label>-->
<!-- </el-form-item>-->
</div>
<div class="f1">
<el-form-item label="连接模式">
<el-radio-group v-model="createform.mode">
<el-radio :label=0>默认</el-radio>
<el-radio :disabled="true"
:label=1>专业</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div class="f1">
<el-form-item label="连接模式">
<el-radio-group v-model="createform.mode">
<el-radio :label=0>默认</el-radio>
<el-radio :disabled="true" :label=1>专业</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="isShowUrlAndPort()"
prop="address"
label="连接地址">
<el-input v-model="createform.address"
auto-complete="off"
@blur="changeUrl()"
style="width:30%"
placeholder="请输入地址"></el-input>
:
<el-input v-model="createform.port"
auto-complete="off"
@blur="changeUrl()"
style="width:10%"
placeholder="端口"></el-input>
</el-form-item>
<el-form-item v-if="isShowUrlAndPort()" prop="address" label="连接地址">
<el-input v-model="createform.address" auto-complete="off" @blur="changeUrl()" style="width:20%"
placeholder="请输入数据源连接地址"></el-input>
/
<el-input v-model="createform.port" auto-complete="off" @blur="changeUrl()" style="width:6%"
placeholder="Port"></el-input>
</el-form-item>
<el-form-item v-if="isShowDatabaseName()"
prop="databaseName"
label="数据库名"
style="width:24%">
<el-input v-model="createform.databaseName"
auto-complete="off"
@blur="changeUrl()"
placeholder="请输入数据库名"></el-input>
</el-form-item>
<el-form-item v-if="isShowDatabaseName()" prop="databaseName" label="数据库名" style="width:24%">
<el-input v-model="createform.databaseName" auto-complete="off" @blur="changeUrl()"
placeholder="请输入数据库名"></el-input>
</el-form-item>
<el-form-item label="编码格式"
style="width:24%">
<el-select v-model="createform.characterEncoding"
placeholder="请选择编码格式">
<el-option label="utf8"
value="utf8"></el-option>
<!-- <el-option label="utf8mb4" value="utf8mb4"></el-option>-->
</el-select>
</el-form-item>
<el-form-item label="编码格式" style="width:24%">
<el-select v-model="createform.characterEncoding" placeholder="请选择编码格式">
<el-option label="utf8" value="utf8"></el-option>
<!-- <el-option label="utf8mb4" value="utf8mb4"></el-option>-->
</el-select>
</el-form-item>
<el-form-item label="用户名"
prop="username"
style="width:24%">
<el-input v-model="createform.username"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password"
style="width:24%">
<el-input type="password"
v-model="createform.password"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="用户名"
prop="username"
style="width:24%">
<el-input v-model="createform.username"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password"
style="width:24%">
<el-input type="password"
v-model="createform.password"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="JDBC连接串"
label-width="120px"
prop="url"
style="width:85%">
<el-tooltip placement="top">
<i class="el-icon-question">样例:</i>
<div slot="content">
{{ this.selectedDataSource.sample }}
</div>
</el-tooltip>
<el-input type="textarea"
:rows="6"
:spellcheck="false"
placeholder="请输入"
v-model="createform.url"
auto-complete="off">
</el-input>
<label class="tips-style">JDBC连接串（因数据库连接方式，连接参数差异较大所以需要手动拼接好），以便测试连接。</label>
</el-form-item>
<el-form-item label="JDBC连接串"
label-width="120px"
prop="url"
style="width:85%">
<el-tooltip placement="top">
<i class="el-icon-question">样例:</i>
<div slot="content">
{{ this.selectedDataSource.sample }}
</div>
</el-tooltip>
<el-input type="textarea"
:rows="6"
:spellcheck="false"
placeholder="请输入"
v-model="createform.url"
auto-complete="off">
</el-input>
<label
class="tips-style">JDBC连接串（因数据库连接方式，连接参数差异较大所以需要手动拼接好），以便测试连接。</label>
</el-form-item>
</div>
</el-form>
</el-main>
<el-footer>
<el-row style="text-align: center">
<el-button type="success" class="startTest" @click="startTest">开始检测</el-button>
<el-button type="primary" class="createDataSource" @click="createDataSource">创建</el-button>
<el-button class="cancel" @click="cancel">取消</el-button>
</el-row>
</el-footer>
</el-container>
</el-container>
</div>
</div>
</el-form>
</el-main>
<el-footer>
<el-row style="text-align: center">
<el-button type="success"
class="startTest"
@click="startTest">开始检测</el-button>
<el-button type="primary"
class="createDataSource"
@click="createDataSource">创建</el-button>
<el-button class="cancel"
@click="cancel">取消</el-button>
</el-row>
</el-footer>
</el-card>
</template>
<script>
export default {
data() {
data () {
return {
selectedDataSource: {},
connectionDriver: [],
@@ -219,14 +250,14 @@ export default {
selectChangedDriverVersion: function (value) {
this.connectionDriver = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/" + value + "/drivers"
"/dbswitch/admin/api/v1/connection/" + value + "/drivers"
).then(res => {
if (0 === res.data.code) {
this.connectionDriver = res.data.data;
let varDatabaseType = this.databaseType.find(
(item) => {
return item.type === value;
});
(item) => {
return item.type === value;
});
if (varDatabaseType) {
this.createform.sample = varDatabaseType.sample;
}
@@ -240,35 +271,35 @@ export default {
var params = this.createform.url.split("?");
var turl = this.createform.templateUrl
var flag = false
if (Object.keys(this.createform.address).length > 0){
if (Object.keys(this.createform.address).length > 0) {
// address
var address = this.createform.address
turl = turl.replaceAll("{host}",address)
turl = turl.replaceAll("{host}", address)
flag = true
}
if (Object.keys(this.createform.port).length > 0){
if (Object.keys(this.createform.port).length > 0) {
// port
var port = this.createform.port
turl = turl.replaceAll("{port}",port)
turl = turl.replaceAll("{port}", port)
flag = true
}
if (Object.keys(this.createform.databaseName).length > 0){
if (Object.keys(this.createform.databaseName).length > 0) {
// databaseName or filePath
var databaseName = this.createform.databaseName
turl = turl.replaceAll("{database}",databaseName)
turl = turl.replaceAll("{file}",databaseName)
turl = turl.replaceAll("{database}", databaseName)
turl = turl.replaceAll("{file}", databaseName)
flag = true
}
if (flag){
if (Object.keys(params).length > 1){
if (flag) {
if (Object.keys(params).length > 1) {
this.createform.url = turl + "?" + params[1]
}else{
} else {
this.createform.url = turl
}
} else{
if (Object.keys(params).length > 1){
} else {
if (Object.keys(params).length > 1) {
this.createform.url = this.selectedDataSource.sample.split("?")[0] + "?" + params[1]
}else{
} else {
this.createform.url = this.selectedDataSource.sample
}
}
@@ -276,7 +307,7 @@ export default {
isShowDatabaseName: function () {
var type = this.selectedDataSource.type
var flag = true;
if (type === "ELASTICSEARCH"){
if (type === "ELASTICSEARCH") {
flag = false
}
return flag;
@@ -284,7 +315,7 @@ export default {
isShowUrlAndPort: function () {
var type = this.selectedDataSource.type
var flag = true;
if (type === "SQLITE3"){
if (type === "SQLITE3") {
flag = false
}
return flag;
@@ -349,11 +380,11 @@ export default {
type: this.selectedDataSource.type,
version: this.createform.version,
driver: driverClass,
mode:0,
address:this.createform.address,
port:this.createform.port,
databaseName:this.createform.databaseName,
characterEncoding:this.createform.characterEncoding,
mode: 0,
address: this.createform.address,
port: this.createform.port,
databaseName: this.createform.databaseName,
characterEncoding: this.createform.characterEncoding,
url: this.createform.url,
username: this.createform.username,
password: this.createform.password
@@ -378,17 +409,24 @@ export default {
this.$router.push("/connection/list")
},
},
created() {
created () {
this.selectedDataSource = this.$route.query;
this.createform.url = this.selectedDataSource.sample;
this.createform.templateUrl = this.selectedDataSource.url.replace("[\\?{params}]","");
this.createform.templateUrl = this.selectedDataSource.url.replace("[\\?{params}]", "");
this.selectChangedDriverVersion(this.selectedDataSource.type);
}
}
</script>
<style scoped>
.el-header, .el-main, .el-footer {
.el-card {
border-radius: 4px;
overflow: visible;
}
.el-header,
.el-main,
.el-footer {
background-color: white;
}
@@ -398,7 +436,6 @@ export default {
margin-left: 20px;
}
.button {
padding: 0;
float: right;
@@ -427,7 +464,7 @@ export default {
padding: 6px 14px;
border: none;
color: white;
background-color: #409EFF;
background-color: #409eff;
cursor: pointer;
}
@@ -441,7 +478,7 @@ export default {
//border: 1px solid red;
margin: 14px 0px;
background-color: #eef0f4;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
padding: 4px 0px;
}
@@ -449,5 +486,4 @@ export default {
font-size: 10px;
color: red;
}
</style>

252
dbswitch-admin-ui/src/views/connection/dataSourceInfo.vue
View File

@@ -1,115 +1,142 @@
<template>
<div>
<el-container>
<el-aside width="134px"></el-aside>
<el-card>
<el-header style="height: 80px">
<div style="display: inline-block;float: left">
<img title="DB"
:src="require('@/assets/icons/' + this.dataSourceInfo.typeName +'.png')"
class="image">
</div>
<h3 class=".h-title">{{ this.dataSourceInfo.typeName }}</h3>
</el-header>
<el-main>
<el-form :model="dataSourceInfo"
label-width="120px"
label-position="right"
size="medium"
status-icon>
<div class="f1">
<el-form-item label="支持版本">
<span>
{{ this.dataSourceInfo.version }}
</span>
</el-form-item>
<el-form-item prop="name"
label="数据源名称"
style="width:40%">
<el-input :readonly=true
v-model="dataSourceInfo.name"
placeholder="请输入数据源名称"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item :required=true
label="数据库类型">
<label>{{ this.dataSourceInfo.typeName }}</label>
</el-form-item>
<el-form-item prop="version"
label="驱动版本"
style="width:40%">
<el-input v-model="dataSourceInfo.version"
placeholder="请选择驱动版本"
auto-complete="off"
:readonly=true></el-input>
</el-form-item>
<el-form-item label="编码格式">
<label>{{dataSourceInfo.characterEncoding}}</label>
</el-form-item>
<el-container>
<el-header style="height: 80px">
<div style="display: inline-block;float: left">
<img title="DB" :src="require('@/assets/icons/' + this.dataSourceInfo.typeName +'.png')" class="image">
</div>
<h3 style="font-family: 楷体;margin-left: 60px" class=".h-title">{{ this.dataSourceInfo.typeName }}</h3>
</el-header>
<el-main>
<div class="f1">
<el-form-item label="连接模式">
<el-radio-group v-model="dataSourceInfo.mode">
<el-radio :label=0>默认</el-radio>
<el-radio :disabled="true"
:label=1>专业</el-radio>
</el-radio-group>
</el-form-item>
<el-form :model="dataSourceInfo" label-width="120px" label-position="right"
size="medium" status-icon>
<div class="f1">
<el-form-item prop="address"
label="连接地址">
<el-input :readonly=true
v-model="dataSourceInfo.address"
auto-complete="off"
style="width:30%"
placeholder="请输入数据源连接地址"></el-input>
:
<el-input :readonly=true
v-model="dataSourceInfo.port"
auto-complete="off"
style="width:10%"
placeholder="请输入端口"></el-input>
</el-form-item>
<el-form-item label="支持版本">
<span>
{{ this.dataSourceInfo.version }}
</span>
</el-form-item>
<el-form-item prop="databaseName"
label="数据库名"
style="width:24%">
<el-input :readonly=true
v-model="dataSourceInfo.databaseName"
auto-complete="off"
placeholder="请输入数据库名"></el-input>
</el-form-item>
<el-form-item prop="name" label="数据源名称" style="width:40%">
<el-input :readonly=true v-model="dataSourceInfo.name" placeholder="请输入数据源名称" auto-complete="off"></el-input>
<label class="tips-style">数据源名称不能包含 &、<、>、"、'、(、) ，长度为1~200字符</label>
</el-form-item>
<el-form-item :required=true label="数据库类型">
<label v-model="dataSourceInfo.typeName">{{ this.dataSourceInfo.typeName }}</label>
</el-form-item>
<el-form-item prop="version" label="驱动版本" style="width:40%">
<el-input v-model="dataSourceInfo.version" placeholder="请选择驱动版本" auto-complete="off" :readonly=true></el-input>
</el-form-item>
<el-form-item label="编码格式"
style="width:24%">
<el-input :readonly=true
v-model="dataSourceInfo.characterEncoding"
auto-complete="off"
placeholder="请选择编码格式"></el-input>
</el-form-item>
<el-form-item label="编码格式">
<label>{{dataSourceInfo.characterEncoding}}</label>
</el-form-item>
<el-form-item label="用户名"
prop="username"
style="width:24%">
<el-input :readonly=true
v-model="dataSourceInfo.username"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password"
style="width:24%">
<el-input :readonly=true
type="password"
v-model="dataSourceInfo.password"
auto-complete="off"></el-input>
</el-form-item>
</div>
<div class="f1">
<el-form-item label="连接模式">
<el-radio-group v-model="dataSourceInfo.mode">
<el-radio :label=0>默认</el-radio>
<el-radio :disabled="true" :label=1>专业</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="JDBC连接串"
label-width="120px"
prop="url"
style="width:85%">
<el-input :readonly=true
type="textarea"
:rows="6"
:spellcheck="false"
placeholder="请输入"
v-model="dataSourceInfo.url"
auto-complete="off">
</el-input>
</el-form-item>
<el-form-item prop="address" label="连接地址">
<el-input :readonly=true v-model="dataSourceInfo.address" auto-complete="off" style="width:20%"
placeholder="请输入数据源连接地址"></el-input>
/
<el-input :readonly=true v-model="dataSourceInfo.port" auto-complete="off" style="width:6%"
placeholder="Port"></el-input>
</el-form-item>
<el-form-item prop="databaseName" label="数据库名" style="width:24%">
<el-input :readonly=true v-model="dataSourceInfo.databaseName" auto-complete="off"
placeholder="请输入数据库名"></el-input>
</el-form-item>
<el-form-item label="编码格式" style="width:24%">
<el-input :readonly=true v-model="dataSourceInfo.characterEncoding" auto-complete="off"
placeholder="请选择编码格式"></el-input>
</el-form-item>
<el-form-item label="用户名"
prop="username"
style="width:24%">
<el-input :readonly=true v-model="dataSourceInfo.username"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password"
style="width:24%">
<el-input :readonly=true type="password"
v-model="dataSourceInfo.password"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="JDBC连接串"
label-width="120px"
prop="url"
style="width:85%">
<el-input :readonly=true type="textarea"
:rows="6"
:spellcheck="false"
placeholder="请输入"
v-model="dataSourceInfo.url"
auto-complete="off">
</el-input>
<label
class="tips-style">JDBC连接串（因数据库连接方式，连接参数差异较大所以需要手动拼接好），以便测试连接。</label>
</el-form-item>
</div>
</el-form>
</el-main>
<el-footer>
<el-row style="text-align: center">
<el-button class="cancel" @click="cancel">取消</el-button>
</el-row>
</el-footer>
</el-container>
</el-container>
</div>
</el-form>
</el-main>
<el-footer>
<el-row style="text-align: center">
<el-button class="cancel"
@click="cancel">取消</el-button>
</el-row>
</el-footer>
</el-card>
</div>
</template>
<script>
export default {
data() {
data () {
return {
activeNames: ['1'],
currentDate: new Date(),
@@ -121,11 +148,11 @@ export default {
typeName: "",
version: "",
driver: "",
mode:0,
address:"",
port:"",
databaseName:"",
characterEncoding:"",
mode: 0,
address: "",
port: "",
databaseName: "",
characterEncoding: "",
url: "",
username: "",
password: ""
@@ -138,7 +165,7 @@ export default {
this.$router.push("/connection/list");
},
},
created() {
created () {
this.dataSourceInfo = this.$route.query;
this.dataSourceInfo.mode = parseInt(this.dataSourceInfo.mode)
}
@@ -146,7 +173,14 @@ export default {
</script>
<style scoped>
.el-header, .el-main, .el-footer {
.el-card {
border-radius: 4px;
overflow: visible;
}
.el-header,
.el-main,
.el-footer {
background-color: white;
}
@@ -156,14 +190,12 @@ export default {
margin-left: 20px;
}
.button {
padding: 0;
float: right;
}
.image {
//width: 100%;
display: inline-block;
width: 60px;
height: 60px;
@@ -171,8 +203,6 @@ export default {
}
.cancel {
//float: right;
//margin-left: 20px;
padding: 6px 14px;
border: 1px solid #dcdcdd;
cursor: pointer;
@@ -185,7 +215,7 @@ export default {
padding: 6px 14px;
border: none;
color: white;
background-color: #409EFF;
background-color: #409eff;
cursor: pointer;
}
@@ -196,10 +226,9 @@ export default {
}
.f1 {
//border: 1px solid red;
margin: 14px 0px;
background-color: #eef0f4;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
padding: 4px 0px;
}
@@ -207,5 +236,4 @@ export default {
font-size: 10px;
color: red;
}
</style>

340
dbswitch-admin-ui/src/views/connection/updateDataSource.vue
View File

@@ -1,132 +1,164 @@
<template>
<div>
<el-container>
<el-aside width="134px"></el-aside>
<el-card>
<el-header style="height: 80px">
<div style="display: inline-block;float: left">
<img title="DB"
:src="require('@/assets/icons/' + this.updateform.typeName +'.png')"
class="image">
</div>
<h3 class=".h-title">{{ this.updateform.typeName }}</h3>
</el-header>
<el-main>
<el-form ref="updateform"
:rules="rules"
:model="updateform"
label-width="120px"
label-position="right"
size="medium"
status-icon>
<div class="f1">
<el-form-item label="支持版本">
<span v-for="(o, index) of connectionDriver"
:key="index"
:offset="1">
{{ o.driverVersion }}
<span v-if="index !== connectionDriver.length-1">
、
</span>
</span>
</el-form-item>
<el-form-item prop="name"
label="数据源名称"
style="width:40%">
<el-input v-model="updateform.name"
placeholder="请输入数据源名称"
auto-complete="off"></el-input>
<label class="tips-style">数据源名称不能包含 &、<、>、"、'、(、) ，长度为1~200字符</label>
</el-form-item>
<el-form-item :required=true
label="数据库类型">
<label>{{ this.selectedDataSource.name }}</label>
</el-form-item>
<el-form-item prop="version"
label="驱动版本">
<el-select v-model="updateform.version"
placeholder="请选择驱动版本">
<el-option v-for="(item,index) in this.connectionDriver"
:key="index"
:label="item.driverVersion"
:value="item.driverVersion"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="编码格式">-->
<!-- <label>utf8、utf8mb4</label>-->
<!-- </el-form-item>-->
<el-container>
<el-header style="height: 80px">
<div style="display: inline-block;float: left">
<img title="DB" :src="require('@/assets/icons/' + this.updateform.typeName +'.png')" class="image">
</div>
<h3 style="font-family: 楷体;margin-left: 60px" class=".h-title">{{ this.updateform.typeName }}</h3>
</el-header>
<el-main>
<div class="f1">
<el-form-item label="连接模式">
<el-radio-group v-model="updateform.mode">
<el-radio :label=0>默认</el-radio>
<el-radio :disabled="true"
:label=1>专业</el-radio>
</el-radio-group>
</el-form-item>
<el-form ref="updateform" :rules="rules" :model="updateform" label-width="120px" label-position="right"
size="medium" status-icon>
<div class="f1">
<el-form-item v-if="isShowUrlAndPort()"
prop="address"
label="连接地址">
<el-input v-model="updateform.address"
auto-complete="off"
@blur="changeUrl()"
style="width:30%"
placeholder="请输入数据源连接地址"></el-input>
:
<el-input v-model="updateform.port"
auto-complete="off"
@blur="changeUrl()"
style="width:10%"
placeholder="请输入端口"></el-input>
</el-form-item>
<el-form-item label="支持版本">
<span v-for="(o, index) of connectionDriver" :key="index" :offset="1">
{{ o.driverVersion }}
<span v-if="index !== connectionDriver.length-1">
、
</span>
</span>
</el-form-item>
<el-form-item v-if="isShowDatabaseName()"
prop="databaseName"
label="数据库名"
style="width:24%">
<el-input v-model="updateform.databaseName"
auto-complete="off"
@blur="changeUrl()"
placeholder="请输入数据库名"></el-input>
</el-form-item>
<el-form-item prop="name" label="数据源名称" style="width:40%">
<el-input v-model="updateform.name" placeholder="请输入数据源名称" auto-complete="off"></el-input>
<label class="tips-style">数据源名称不能包含 &、<、>、"、'、(、) ，长度为1~200字符</label>
</el-form-item>
<el-form-item :required=true label="数据库类型">
<label v-model="updateform.type">{{ this.selectedDataSource.name }}</label>
</el-form-item>
<el-form-item prop="version" label="驱动版本">
<el-select v-model="updateform.version" placeholder="请选择驱动版本">
<el-option v-for="(item,index) in this.connectionDriver"
:key="index"
:label="item.driverVersion"
:value="item.driverVersion"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="编码格式">-->
<!-- <label>utf8、utf8mb4</label>-->
<!-- </el-form-item>-->
<el-form-item label="编码格式"
style="width:24%">
<el-select v-model="updateform.characterEncoding"
placeholder="请选择编码格式">
<el-option label="utf8"
value="utf8"></el-option>
<!-- <el-option label="utf8mb4" value="utf8mb4"></el-option>-->
</el-select>
</el-form-item>
</div>
<div class="f1">
<el-form-item label="连接模式">
<el-radio-group v-model="updateform.mode">
<el-radio :label=0>默认</el-radio>
<el-radio :disabled="true" :label=1>专业</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="用户名"
prop="username"
style="width:24%">
<el-input v-model="updateform.username"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password"
style="width:24%">
<el-input type="password"
v-model="updateform.password"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item v-if="isShowUrlAndPort()" prop="address" label="连接地址">
<el-input v-model="updateform.address" auto-complete="off" @blur="changeUrl()" style="width:20%"
placeholder="请输入数据源连接地址"></el-input>
/
<el-input v-model="updateform.port" auto-complete="off" @blur="changeUrl()" style="width:6%"
placeholder="Port"></el-input>
</el-form-item>
<el-form-item label="JDBC连接串"
label-width="120px"
prop="url"
style="width:85%">
<el-tooltip placement="top">
<i class="el-icon-question">样例:</i>
<div slot="content">
{{ this.selectedDataSource.sample }}
</div>
</el-tooltip>
<el-input type="textarea"
:rows="6"
:spellcheck="false"
placeholder="请输入"
v-model="updateform.url"
auto-complete="off">
</el-input>
<label class="tips-style">JDBC连接串（因数据库连接方式，连接参数差异较大所以需要手动拼接好），以便测试连接。</label>
</el-form-item>
<el-form-item v-if="isShowDatabaseName()" prop="databaseName" label="数据库名" style="width:24%">
<el-input v-model="updateform.databaseName" auto-complete="off" @blur="changeUrl()"
placeholder="请输入数据库名"></el-input>
</el-form-item>
<el-form-item label="编码格式" style="width:24%">
<el-select v-model="updateform.characterEncoding" placeholder="请选择编码格式">
<el-option label="utf8" value="utf8"></el-option>
<!-- <el-option label="utf8mb4" value="utf8mb4"></el-option>-->
</el-select>
</el-form-item>
<el-form-item label="用户名"
prop="username"
style="width:24%">
<el-input v-model="updateform.username"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password"
style="width:24%">
<el-input type="password"
v-model="updateform.password"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="JDBC连接串"
label-width="120px"
prop="url"
style="width:85%">
<el-tooltip placement="top">
<i class="el-icon-question">样例:</i>
<div slot="content">
{{ this.selectedDataSource.sample }}
</div>
</el-tooltip>
<el-input type="textarea"
:rows="6"
:spellcheck="false"
placeholder="请输入"
v-model="updateform.url"
auto-complete="off">
</el-input>
<label
class="tips-style">JDBC连接串（因数据库连接方式，连接参数差异较大所以需要手动拼接好），以便测试连接。</label>
</el-form-item>
</div>
</el-form>
</el-main>
<el-footer>
<el-row style="text-align: center">
<el-button type="success" class="startTest" @click="startTest">开始检测</el-button>
<el-button type="primary" class="createDataSource" @click="updateDataSource">修改</el-button>
<el-button class="cancel" @click="cancel">取消</el-button>
</el-row>
</el-footer>
</el-container>
</el-container>
</div>
</el-form>
</el-main>
<el-footer>
<el-row style="text-align: center">
<el-button type="success"
class="startTest"
@click="startTest">开始检测</el-button>
<el-button type="primary"
class="createDataSource"
@click="updateDataSource">修改</el-button>
<el-button class="cancel"
@click="cancel">取消</el-button>
</el-row>
</el-footer>
</el-card>
</div>
</template>
<script>
export default {
data() {
data () {
return {
selectedDataSource: {},
connectionDriver: [],
@@ -224,29 +256,29 @@ export default {
method: "GET",
url: "/dbswitch/admin/api/v1/connection/types"
}).then(
res => {
if (0 === res.data.code) {
this.databaseType = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.message);
}
},
function () {
console.log("failed");
res => {
if (0 === res.data.code) {
this.databaseType = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.message);
}
},
function () {
console.log("failed");
}
);
},
selectChangedDriverVersion: function (value) {
this.connectionDriver = [];
this.$http.get(
"/dbswitch/admin/api/v1/connection/" + value + "/drivers"
"/dbswitch/admin/api/v1/connection/" + value + "/drivers"
).then(res => {
if (0 === res.data.code) {
this.connectionDriver = res.data.data;
let varDatabaseType = this.databaseType.find(
(item) => {
return item.type === value;
});
(item) => {
return item.type === value;
});
if (varDatabaseType) {
this.updateform.sample = varDatabaseType.sample;
}
@@ -260,36 +292,36 @@ export default {
var params = this.updateform.url.split("?");
var turl = this.updateform.templateUrl
var flag = false
if (Object.keys(this.updateform.address).length > 0){
if (Object.keys(this.updateform.address).length > 0) {
// address
var address = this.updateform.address
turl = turl.replaceAll("{host}",address)
turl = turl.replaceAll("{host}", address)
flag = true
}
if (Object.keys(this.updateform.port).length > 0){
if (Object.keys(this.updateform.port).length > 0) {
// port
var port = this.updateform.port
turl = turl.replaceAll("{port}",port)
turl = turl.replaceAll("{port}", port)
flag = true
}
if (Object.keys(this.updateform.databaseName).length > 0){
if (Object.keys(this.updateform.databaseName).length > 0) {
// databaseName or filePath
var databaseName = this.updateform.databaseName
turl = turl.replaceAll("{database}",databaseName)
turl = turl.replaceAll("{file}",databaseName)
turl = turl.replaceAll("{database}", databaseName)
turl = turl.replaceAll("{file}", databaseName)
flag = true
}
if (flag){
if (Object.keys(params).length > 1){
if (flag) {
if (Object.keys(params).length > 1) {
this.updateform.url = turl + "?" + params[1]
}else{
} else {
this.updateform.url = turl
}
} else{
} else {
debugger
if (Object.keys(params).length > 1){
if (Object.keys(params).length > 1) {
this.updateform.url = this.updateform.sample.split("?")[0] + "?" + params[1]
}else{
} else {
this.updateform.url = this.updateform.sample
}
}
@@ -297,7 +329,7 @@ export default {
isShowDatabaseName: function () {
var type = this.updateform.type
var flag = true;
if (type === "ELASTICSEARCH"){
if (type === "ELASTICSEARCH") {
flag = false
}
return flag;
@@ -305,7 +337,7 @@ export default {
isShowUrlAndPort: function () {
var type = this.updateform.type
var flag = true;
if (type === "SQLITE3"){
if (type === "SQLITE3") {
flag = false
}
return flag;
@@ -402,7 +434,7 @@ export default {
this.$router.push("/connection/list")
},
},
created() {
created () {
this.updateform = this.$route.query;
this.updateform.mode = parseInt(this.updateform.mode)
this.loadDatabaseTypes();
@@ -412,7 +444,14 @@ export default {
</script>
<style scoped>
.el-header, .el-main, .el-footer {
.el-card {
border-radius: 4px;
overflow: visible;
}
.el-header,
.el-main,
.el-footer {
background-color: white;
}
@@ -422,14 +461,12 @@ export default {
margin-left: 20px;
}
.button {
padding: 0;
float: right;
}
.image {
//width: 100%;
display: inline-block;
width: 60px;
height: 60px;
@@ -437,8 +474,6 @@ export default {
}
.cancel {
//float: right;
//margin-left: 20px;
padding: 6px 14px;
border: 1px solid #dcdcdd;
cursor: pointer;
@@ -446,26 +481,22 @@ export default {
}
.createDataSource {
//float: right;
//margin-left: 20px;
padding: 6px 14px;
border: none;
color: white;
background-color: #409EFF;
background-color: #409eff;
cursor: pointer;
}
.startTest {
//float: right;
padding: 6px 14px;
cursor: pointer;
}
.f1 {
//border: 1px solid red;
margin: 14px 0px;
background-color: #eef0f4;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
padding: 4px 0px;
}
@@ -473,5 +504,4 @@ export default {
font-size: 10px;
color: red;
}
</style>

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

@@ -74,16 +74,16 @@ export default {
.el-aside {
float: left;
background: #fdfdfd;
background: #002140;
color: #333;
text-align: left;
}
.el-aside .title {
height: 60px;
background: #454c5a;
background: #001529;
line-height: 64px;
background: #454c5a;
background: #002140;
text-align: center;
}

335
dbswitch-admin-ui/src/views/metadata/index.vue
View File

@@ -4,13 +4,23 @@
<div class="flex-between">
<div class="tree-container">
<el-scrollbar style="height:100%">
<el-tree class="scroller"
<el-select placeholder="请选择数据源"
v-model="dataSourceId"
@change="loadTreeData">
<el-option v-for="(item,index) in connectionList"
:key="index"
:label="`[${item.id}]${item.name}`"
:value="item.id"></el-option>
</el-select>
<el-tree ref="metadataTree"
empty-text="请选择数据源后查看"
:indent=6
:data="treeData"
:props="props"
:load="loadNode"
:load="loadTreeNode"
:expand-on-click-node="true"
:highlight-current="true"
:render-content="renderContent"
@check-change="handleCheckChange"
@node-click="handleNodeClick"
lazy>
</el-tree>
@@ -163,6 +173,9 @@ export default {
disabled: false,
isLeaf: false
},
dataSourceId: null,
connectionList: [],
treeData: [],
currentNode: {
tableName: '-',
schemaName: '-'
@@ -182,6 +195,159 @@ export default {
};
},
methods: {
loadConnections: function () {
this.connectionList = [];
this.$http({
method: "GET",
headers: {
'Content-Type': 'application/json'
},
url: "/dbswitch/admin/api/v1/connection/list/name",
}).then(
res => {
if (0 === res.data.code) {
this.connectionList = res.data.data;
} else {
if (res.data.message) {
alert("加载数据失败:" + res.data.message);
this.connectionList = [];
}
}
}
);
},
loadTreeData: function () {
if (this.dataSourceId && this.dataSourceId > 0) {
this.treeData = []
setTimeout(() => {
this.$http({
method: "GET",
url: "/dbswitch/admin/api/v1/connection/schemas/get/" + this.dataSourceId
}).then(
res => {
if (0 === res.data.code) {
for (let element of res.data.data) {
let obj = new Object();
obj['dataSourceId'] = this.dataSourceId;
obj['label'] = element;
obj['parent'] = this.dataSourceId;
obj['value'] = element;
obj['hasChild'] = true;
obj['type'] = 'DATABASE';
this.treeData.push(obj);
}
} else {
alert("加载失败，原因：" + res.data.message);
}
}
);
}, 500);
}
},
loadTreeNode: function (node, resolve) {
setTimeout(() => {
if (node.level === 1) {
let tableView = [
{
'dataSourceId': this.dataSourceId,
'label': '表',
'parent': this.dataSourceId,
'value': node.label,
'hasChild': true,
'type': 'TABLE',
},
{
'dataSourceId': this.dataSourceId,
'label': '视图',
'parent': this.dataSourceId,
'value': node.label,
'hasChild': true,
'type': 'VIEW',
}
]
resolve(tableView);
} else if (node.level === 2) {
this.loadTablesList(resolve, this.dataSourceId, node.data.value, node.data.type)
} else {
resolve([]);
}
}, 500);
},
loadTablesList: function (resolve, dataSourceId, schema, type) {
var tableType = 'VIEW' === type ? 'views' : 'tables'
this.$http({
method: "GET",
url: "/dbswitch/admin/api/v1/connection/" + tableType + "/get/" + dataSourceId + "?schema=" + urlencode(schema)
}).then(
res => {
if (0 === res.data.code) {
let tableList = []
for (let element of res.data.data) {
let obj = new Object();
obj['dataSourceId'] = dataSourceId;
obj['label'] = element;
obj['parent'] = dataSourceId;
obj['value'] = schema;
obj['hasChild'] = false;
obj['type'] = type;
tableList.push(obj);
}
return resolve(tableList);
} else {
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
}
}
);
},
renderContent (h, { node, data, store }) {
// https://www.cnblogs.com/zhoushuang0426/p/11059989.html
if (node.level === 1) {
return (
<div class="custom-tree-node">
<i class="iconfont icon-shujuku1"></i>
<el-tooltip class="item" effect="light" placement="left">
<div slot="content">{node.label}</div>
<span>{data.label}</span>
</el-tooltip>
</div>
);
} else if (node.level === 2) {
var icon_pic = "iconfont icon-shitu_biaoge";
if (data.type === 'VIEW') {
icon_pic = "iconfont icon-viewList"
}
return (
<div class="custom-tree-node">
<i class={icon_pic}></i>
<span>{data.label}</span>
</div>
);
} else if (node.level === 3) {
var icon_pic = "iconfont icon-shitu_biaoge";
if (data.type === 'VIEW') {
icon_pic = "iconfont icon-viewList"
}
return (
<div class="custom-tree-node">
<i class={icon_pic}></i>
<el-tooltip class="item" effect="light" placement="left">
<div slot="content">{node.label}</div>
<span>{data.label}</span>
</el-tooltip>
</div>
);
} else {
return (
<div class="custom-tree-node">
<i class="el-icon-set-up"></i>
<el-tooltip class="item" effect="light" placement="left">
<div slot="content">{data.type}</div>
<span>{data.label}({data.type})</span>
</el-tooltip>
</div>
);
}
},
formatIndexFields (row, column) {
let list = row.indexFields;
let fields = list.map(
@@ -196,40 +362,18 @@ export default {
})
return fields.join(";");
},
handleCheckChange (data, checked, indeterminate) {
//console.log(data, checked, indeterminate);
},
handleNodeClick (data) {
//console.log(data);
var id = data.id;
var schema = data.schemaName;
var table = data.tableName;
if (!data.hasChild && id && schema && table) {
this.activeName = 'first';
this.getTableMeta(id, schema, table);
this.getTableData(id, schema, table);
}
},
loadNode (node, resolve) {
if (node.level === 0) {
const rootNode = [{ label: '数据源导航树', value: 0, hasChild: true, children: 'child' }]
return resolve(rootNode);
}
setTimeout(() => {
if (node.level === 1) {
this.loadConnectionList(resolve);
} else if (node.level === 2) {
this.loadSchemasList(resolve, node.data.value)
} else if (node.level === 3) {
this.loadTablesList(resolve, node.data.parent, node.data.label)
} else if (node.level == 4) {
resolve([]);
//this.loadColumnList(resolve, node.data.id, node.data.parent, node.data.label)
} else {
resolve([]);
var type = data.type;
if (type === 'VIEW' || type === 'TABLE') {
var datasourceId = data.dataSourceId;
var schema = data.value;
var table = data.label;
if (!data.hasChild && datasourceId && schema && table) {
this.activeName = 'first';
this.getTableMeta(datasourceId, schema, table);
this.getTableData(datasourceId, schema, table);
}
}, 500);
}
},
clearDataSet () {
this.tableData = [];
@@ -278,80 +422,6 @@ export default {
}
);
},
loadConnectionList (resolve) {
this.$http({
method: "GET",
url: "/dbswitch/admin/api/v1/connection/list/name"
}).then(
res => {
if (0 === res.data.code) {
//console.log("list1:" + JSON.stringify(res.data.data))
res.data.data.forEach(function (element) {
element['label'] = element.name;
element['parent'] = 0;
element['value'] = element.id;
element['hasChild'] = true;
element['children'] = 'child';
});
return resolve(res.data.data);
} else {
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
this.clearDataSet();
}
}
);
},
loadSchemasList (resolve, id) {
//console.log("id=" + id);
this.$http({
method: "GET",
url: "/dbswitch/admin/api/v1/metadata/schemas/" + id + "/1/0"
}).then(
res => {
if (0 === res.data.code) {
//console.log("list2:" + JSON.stringify(res.data.data))
res.data.data.forEach(function (element) {
element['label'] = element.schema;
element['parent'] = id;
element['value'] = element.connection;
element['hasChild'] = true;
element['children'] = 'child';
});
//this.tableData = res.data.data;
return resolve(res.data.data);
} else {
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
this.clearDataSet();
}
}
);
},
loadTablesList (resolve, id, schema) {
//console.log("id=" + id + ",schema=" + schema);
this.$http({
method: "GET",
url: "/dbswitch/admin/api/v1/metadata/tables/" + id + "/1/0?schema=" + urlencode(schema)
}).then(
res => {
if (0 === res.data.code) {
//console.log("list3:" + JSON.stringify(res.data.data))
res.data.data.forEach(function (element) {
element['label'] = element.tableName;
element['parent'] = schema;
element['id'] = id;
element['value'] = element.type;
element['hasChild'] = false;
element['children'] = 'child';
});
//this.tableData = res.data.data;
return resolve(res.data.data);
} else {
this.$alert("加载失败，原因：" + res.data.message, '数据加载失败');
this.clearDataSet();
}
}
);
},
loadColumnList (resolve, id, schema, table) {
//console.log("id=" + id);
this.$http({
@@ -377,48 +447,11 @@ export default {
}
);
},
// https://www.cnblogs.com/zhoushuang0426/p/11059989.html
renderContent (h, { node, data, store }) {
if (node.level === 1) {
return (
<div class="custom-tree-node">
<i class="el-icon-takeaway-box"></i>
<span>{data.label}</span>
</div>
);
} else if (node.level === 2) {
return (
<div class="custom-tree-node">
<i class="el-icon-folder-opened"></i>
<span>{data.label}</span>
</div>
);
} else if (node.level === 3) {
return (
<div class="custom-tree-node">
<i class="iconfont icon-shujuku1"></i>
<span>{data.label}</span>
</div>
);
} else {
var icon_pic = "iconfont icon-shitu_biaoge";
if (data.value === 'VIEW') {
icon_pic = "iconfont icon-viewList"
}
return (
<div class="custom-tree-node">
<i class={icon_pic}></i>
<el-tooltip class="item" effect="light" placement="left">
<div slot="content">{node.label}</div>
<span>{data.label}</span>
</el-tooltip>
</div>
);
}
}
}
},
created () {
this.loadConnections();
this.loadTreeData();
},
}
</script>

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

@@ -2,33 +2,47 @@
<div>
<el-card>
<el-row>
<el-button size="mini" icon="el-icon-switch-button" :disabled=isSelected plain @click="batchStart()">启动
<el-button size="mini"
icon="el-icon-switch-button"
:disabled=isSelected
plain
@click="batchStart()">启动
</el-button>
<el-button size="mini" icon="el-icon-video-pause" :disabled=isSelected plain @click="batchStop()">停止</el-button>
<el-button size="mini"
icon="el-icon-video-pause"
:disabled=isSelected
plain
@click="batchStop()">停用</el-button>
<span style="color:#e9e9f3;">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
<el-button size="mini" plain @click="batchImport()">导入任务</el-button>
<el-button size="mini" :disabled=isSelected plain @click="batchExport()">导出任务</el-button>
<!-- <div class="right-add-button-group">-->
<el-button class="right-add-button-group" type="primary"
<el-button size="mini"
plain
@click="batchImport()">导入</el-button>
<el-button size="mini"
:disabled=isSelected
plain
@click="batchExport()">导出</el-button>
<el-button class="right-add-button-group"
type="primary"
size="mini"
icon="el-icon-document-add"
@click="handleCreate">创建任务
@click="handleCreate">创建
</el-button>
<!-- </div>-->
</el-row>
<div class="assignment-list-top">
<div class="left-search-input-group">
<div class="left-search-input">
<el-input size="mini" placeholder="请输入任务名称关键字搜索"
<el-input size="mini"
placeholder="请输入任务名称关键字搜索"
v-model="keyword"
:clearable=true
@change="searchByKeyword"
style="width:100%">
<el-button @click="searchByKeyword" slot="append" icon="el-icon-search"></el-button>
<el-button @click="searchByKeyword"
slot="append"
icon="el-icon-search"></el-button>
</el-input>
</div>
</div>
</div>
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
@@ -40,56 +54,63 @@
label="编号"
type="selection"
min-width="6%"></el-table-column>
<el-table-column
label="任务名称"
min-width="10%">
<el-table-column label="任务名称"
:show-overflow-tooltip="true"
min-width="15%">
<template slot-scope="scope">
<span @click="handleDetail(scope.$index, scope.row)" class="task-name">{{scope.row.name}}</span>
<span @click="handleDetail(scope.$index, scope.row)"
class="task-name">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="scheduleMode"
label="集成模式"
label="模式"
sortable
:formatter="stringFormatSchedule"
min-width="8%"></el-table-column>
<el-table-column
label="源端数据源"
min-width="10%">
<el-table-column label="源端"
min-width="10%">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>源端数据源：{{ scope.row.sourceSchema }}</p>
<el-popover trigger="hover"
placement="top">
<p>源端数据源类型：{{ scope.row.sourceType }}</p>
<div slot="reference" class="name-wrapper">
<p>源端模式名：{{ scope.row.sourceSchema }}</p>
<div slot="reference"
class="name-wrapper">
<el-tag size="medium">{{ scope.row.sourceSchema }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="目标端数据源"
min-width="10%">
<el-table-column label="目标端"
min-width="10%">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>目标端数据源：{{ scope.row.targetSchema }}</p>
<el-popover trigger="hover"
placement="top">
<p>目标端数据源类型：{{ scope.row.targetType }}</p>
<div slot="reference" class="name-wrapper">
<p>目标端模式名：{{ scope.row.targetSchema }}</p>
<div slot="reference"
class="name-wrapper">
<el-tag size="medium">{{ scope.row.targetSchema }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="运行状态"
show-overflow-tooltip
sortable
min-width="10%">
<el-table-column label="运行状态"
show-overflow-tooltip
sortable
min-width="10%">
<template slot-scope="scope">
<el-icon class="el-icon-success color-success" v-if="scope.row.runStatus == '执行成功'"></el-icon>
<el-icon class="el-icon-error color-error" v-if="scope.row.runStatus == '执行异常'"></el-icon>
<el-icon class="el-icon-remove color-cancel" v-if="scope.row.runStatus == '任务取消'"></el-icon>
<el-icon class="el-icon-video-play color-running" v-if="scope.row.runStatus == '执行中'"></el-icon>
<el-icon class="el-icon-loading color-await" v-if="scope.row.runStatus == '待执行'"></el-icon>
<el-icon class="el-icon-success color-success"
v-if="scope.row.runStatus == '执行成功'"></el-icon>
<el-icon class="el-icon-error color-error"
v-if="scope.row.runStatus == '执行异常'"></el-icon>
<el-icon class="el-icon-remove color-cancel"
v-if="scope.row.runStatus == '任务取消'"></el-icon>
<el-icon class="el-icon-video-play color-running"
v-if="scope.row.runStatus == '执行中'"></el-icon>
<el-icon class="el-icon-loading color-await"
v-if="scope.row.runStatus == '待执行'"></el-icon>
<span>{{ scope.row.runStatus }}</span>
</template>
</el-table-column>
@@ -99,20 +120,24 @@
sortable
:formatter="boolFormatPublish"
:show-overflow-tooltip="true"
min-width="8%"></el-table-column>
<el-table-column prop="createTime"
label="开始调度时间"
min-width="12%"></el-table-column>
min-width="10%"></el-table-column>
<el-table-column prop="scheduleTime"
label="调度时间"
min-width="15%"></el-table-column>
<el-table-column label="操作"
min-width="40%">
min-width="35%">
<template slot-scope="scope">
<el-button-group>
<el-button size="small"
type="primary"
icon="el-icon-timer"
@click="schedulingLog(scope.$index, scope.row)"
round>调度日志
</el-button>
<el-tooltip content="跳转到调度监控"
placement="top">
<el-button size="small"
type="primary"
icon="el-icon-timer"
v-if="scope.row.isPublished===true"
@click="schedulingLog(scope.$index, scope.row)"
round>日志
</el-button>
</el-tooltip>
<el-button size="small"
type="primary"
icon="el-icon-timer"
@@ -125,23 +150,29 @@
icon="el-icon-delete-location"
v-if="scope.row.isPublished===true"
@click="handleRetireTask(scope.$index, scope.row)"
round>停止
</el-button>
<el-button size="small"
type="danger"
icon="el-icon-video-play"
@click="handleRunTask(scope.$index, scope.row)"
round>手工调度
round>停用
</el-button>
<el-tooltip content="人工触发调度执行"
placement="top">
<el-button size="small"
type="danger"
icon="el-icon-video-play"
v-if="scope.row.isPublished===true"
@click="handleRunTask(scope.$index, scope.row)"
round>执行
</el-button>
</el-tooltip>
<el-button size="small"
type="warning"
icon="el-icon-edit"
v-if="scope.row.isPublished===false"
@click="handleUpdate(scope.$index, scope.row)"
round>修改
</el-button>
<el-button size="small"
type="success"
icon="el-icon-document"
v-if="scope.row.isPublished===true"
@click="handleDetail(scope.$index, scope.row)"
round>详情
</el-button>
@@ -173,7 +204,7 @@
<script>
export default {
data() {
data () {
return {
loading: true,
currentPage: 1,
@@ -182,7 +213,7 @@ export default {
keyword: null,
tableData: [],
isSelected: true,
idsSelected:[]
idsSelected: []
};
},
methods: {
@@ -199,48 +230,48 @@ export default {
size: this.pageSize
})
}).then(res => {
if (0 === res.data.code) {
this.currentPage = res.data.pagination.page;
this.pageSize = res.data.pagination.size;
this.totalCount = res.data.pagination.total;
this.tableData = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.message);
}
},
function () {
console.log("load assignments list failed");
}
if (0 === res.data.code) {
this.currentPage = res.data.pagination.page;
this.pageSize = res.data.pagination.size;
this.totalCount = res.data.pagination.total;
this.tableData = res.data.data;
} else {
alert("加载任务列表失败:" + res.data.message);
}
},
function () {
console.log("load assignments list failed");
}
);
},
searchByKeyword: function () {
this.currentPage = 1;
this.loadData();
},
boolFormatPublish(row, column) {
boolFormatPublish (row, column) {
if (row.isPublished === true) {
return "启动";
return "已启动";
} else {
return "停止";
return "已停止";
}
},
stringFormatSchedule(row, column) {
stringFormatSchedule (row, column) {
if (row.scheduleMode == "MANUAL") {
return "手动";
} else {
return "定时";
}
},
handleSelectionChange(val) {
handleSelectionChange (val) {
if (val.length > 0) {
this.isSelected = false;
this.idsSelected.push(val.map(item => item.id));
}else {
} else {
this.isSelected = true;
this.idsSelected = []
}
},
batchStart(){
batchStart () {
console.log(this.idsSelected)
this.$http({
method: "POST",
@@ -262,7 +293,7 @@ export default {
}
});
},
batchStop(){
batchStop () {
this.$http({
method: "POST",
headers: {
@@ -283,7 +314,7 @@ export default {
}
});
},
batchExport(){
batchExport () {
this.$http({
method: "POST",
headers: {
@@ -306,17 +337,12 @@ export default {
}
});
},
batchImport(){
batchImport () {
this.$message({
message: '功能暂未开放，敬请期待！',
center: true
});
},
schedulingLog(){
this.$router.push({
path: "/task/schedule"
});
},
downloadFile: function (resp) {
const headers = resp.headers;
const contentType = headers['content-type'];
@@ -359,23 +385,23 @@ export default {
this.$router.push('/task/create')
},
handleDetail: function (index, row) {
this.$router.push({path: '/task/detail', query: {id: row.id}})
this.$router.push({ path: '/task/detail', query: { id: row.id } })
},
handleUpdate: function (index, row) {
this.$router.push({path: '/task/update', query: {id: row.id}})
this.$router.push({ path: '/task/update', query: { id: row.id } })
},
handleDelete: function (index, row) {
this.$confirm(
"是否确定删除任务【"+row.name+"】?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
"是否确定删除任务【" + row.name + "】?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
).then(() => {
this.$http.delete(
"/dbswitch/admin/api/v1/assignment/delete/" + row.id
"/dbswitch/admin/api/v1/assignment/delete/" + row.id
).then(res => {
if (0 === res.data.code) {
this.loadData();
@@ -387,6 +413,11 @@ export default {
});
});
},
schedulingLog: function (index, row) {
this.$router.push({
path: "/task/schedule?id=" + row.id
});
},
handlePublish: function (index, row) {
this.$http({
method: "POST",
@@ -463,7 +494,7 @@ export default {
this.loadData();
}
},
created() {
created () {
this.loadData();
},
};

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

@@ -331,6 +331,10 @@ export default {
},
created () {
this.loadPageTaskAssignments();
if (this.$route.query.id) {
this.taskId = this.$route.query.id
this.loadJobsData();
}
},
beforeDestroy () {
if (this.timer) {