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

前端页面修改

Browse Source
This commit is contained in:
守護
2024-01-17 20:37:41 +08:00
parent 1c674f8355
commit 2214322c97
5 changed files with 231 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dbswitch-admin-ui/package.json
View File

@@ -10,13 +10,16 @@
"build": "node build/build.js"
},
"dependencies": {
"ant-design-vue": "^2.2.8",
"axios": "^0.19.2",
"echarts": "^4.9.0",
"element-ui": "^2.15.6",
"qs": "^6.11.2",
"urlencode": "^1.1.0",
"vue": "^2.5.2",
"vue-count-to": "^1.0.13",
"vue-cron": "^1.0.9",
"vue-hot-reload-api": "^2.3.4",
"vue-router": "^3.0.1"
},
"devDependencies": {

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

@@ -24,45 +24,53 @@ const constantRouter = new Router({
},
{
path: '/connection',
name: '连接配置',
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')
// children: [
// {
// path: '/dataSourceCreateStep1',
// name: '选择数据源',
// icon: "el-icon-menu",
// component: () => import('@/views/connection/dataSourceCreateStep1')
// }
// ]
},
{
path: '/connection/driver',
name: '驱动配置',
icon: "el-icon-help",
component: () => import('@/views/connection/driver'),
},
{
path: '/connection/list',
name: '连接管理',
icon: "el-icon-bank-card",
component: () => import('@/views/connection/list')
}
]
},
{
path: '/metadata',
name: '数据目录',
name: '数据库管理',
icon: "el-icon-coin",
component: () => import('@/views/metadata/index')
},
{
path: '/task',
name: '任务管理',
name: '数据集成 MDI',
icon: "el-icon-s-tools",
component: () => import('@/views/task/index'),
children: [
{
path: '/task/assignment',
name: '任务安排',
name: '任务管理',
icon: "el-icon-eleme",
component: () => import('@/views/task/assignment'),
},
{
path: '/task/schedule',
name: '调度记录',
name: '监控调度',
icon: "el-icon-pie-chart",
component: () => import('@/views/task/schedule')
}

2
dbswitch-admin-ui/src/views/connection/driver.vue
View File

@@ -13,7 +13,7 @@
<li v-for="(item,index) in connectionTypes"
:key="index"
@click="handleChooseClick(item.type,index)"
:class="{active:index==isActive}">[{{item.id}}]{{item.type}}</li>
:class="{active:index==isActive}">[{{item.id}}] {{item.type}}</li>
</ul>
</div>
</el-card>

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

@@ -16,7 +16,10 @@
<el-button type="primary"
size="mini"
icon="el-icon-document-add"
@click="addConnection">添加</el-button>
@click="addConnection">接入数据源</el-button>
<!-- @click="selectDataSource">接入数据源-->
<!-- </el-button>-->
</div>
</div>
@@ -25,10 +28,10 @@
size="small"
border>
<el-table-column prop="id"
label="编号"
label="序号"
min-width="5%"></el-table-column>
<el-table-column prop="name"
label="连接名称"
label="数据源名称"
show-overflow-tooltip
min-width="20%"></el-table-column>
<el-table-column prop="createTime"
@@ -58,22 +61,26 @@
type="danger"
icon="el-icon-video-play"
@click="handleTest(scope.$index, scope.row)"
round>测试</el-button>
round>测试
</el-button>
<el-button size="small"
type="primary"
icon="el-icon-document"
@click="handleMore(scope.$index, scope.row)"
round>详情</el-button>
round>详情
</el-button>
<el-button size="small"
type="warning"
icon="el-icon-edit"
@click="handleUpdate(scope.$index, scope.row)"
round>编辑</el-button>
round>编辑
</el-button>
<el-button size="small"
type="success"
icon="el-icon-delete"
@click="handleDelete(scope.$index, scope.row)"
round>删除</el-button>
round>删除
</el-button>
</el-button-group>
</template>
</el-table-column>
@@ -155,6 +162,31 @@
</div>
</el-dialog>
<el-dialog title="接入数据源"
:visible.sync="dataSourceCreateStep1"
: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="type">
<el-radio-group v-model="createform.type" @change="selectChangedDriverVersion">
<el-radio :label="item.type" :key="index" v-for="(item,index) in databaseType">{{ item.type }}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="添加数据源连接信息"
:visible.sync="createFormVisible"
:showClose="false"
@@ -164,7 +196,7 @@
status-icon
:rules="rules"
ref="createform">
<el-form-item label="连接名称"
<el-form-item label="数据源名称"
label-width="120px"
:required=true
prop="name"
@@ -207,7 +239,7 @@
<el-tooltip placement="top">
<i class="el-icon-question">样例:</i>
<div slot="content">
{{createform.sample}}
{{ createform.sample }}
</div>
</el-tooltip>
<el-input type="textarea"
@@ -218,14 +250,14 @@
auto-complete="off">
</el-input>
</el-form-item>
<el-form-item label="账号名称"
<el-form-item label="用户名"
label-width="120px"
prop="username"
style="width:85%">
<el-input v-model="createform.username"
auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="连接密码"
<el-form-item label="密码"
label-width="120px"
prop="password"
style="width:85%">
@@ -238,7 +270,8 @@
class="dialog-footer">
<el-button @click="createFormVisible = false">取 消</el-button>
<el-button type="primary"
@click="handleCreate">确 定</el-button>
@click="handleCreate">确 定
</el-button>
</div>
</el-dialog>
@@ -317,7 +350,8 @@
class="dialog-footer">
<el-button @click="updateFormVisible = false">取 消</el-button>
<el-button type="primary"
@click="handleSave">确 定</el-button>
@click="handleSave">确 定
</el-button>
</div>
</el-dialog>
</el-card>
@@ -327,7 +361,7 @@
<script>
export default {
data () {
data() {
return {
loading: true,
keyword: null,
@@ -337,8 +371,7 @@ export default {
totalCount: 2,
databaseType: [],
connectionDriver: [],
tableData: [
],
tableData: [],
queryForm: {
title: "",
type: "",
@@ -413,7 +446,8 @@ export default {
},
dialogFormVisible: false,
createFormVisible: false,
updateFormVisible: false
updateFormVisible: false,
dataSourceCreateStep1: false,
}
},
methods: {
@@ -466,7 +500,7 @@ export default {
}
);
},
handleClose (done) {
handleClose(done) {
},
handleDelete: function (index, row) {
this.$confirm(
@@ -510,6 +544,10 @@ export default {
this.createFormVisible = true;
this.createform = {};
},
selectDataSource: function () {
this.dataSourceCreateStep1 = true;
},
handleCreate: function () {
let driverClass = "";
if (this.databaseType.length > 0) {
@@ -643,9 +681,9 @@ export default {
this.loading = true;
this.currentPage = currentPage;
this.loadData();
}
},
created () {
},
created() {
this.loadDatabaseTypes();
this.loadData();
}
@@ -657,12 +695,14 @@ export default {
width: 100%;
height: 100%;
}
.el-card,
.el-message {
width: 100%;
height: 100%;
overflow: auto;
}
.connection-list-top {
width: 100%;
display: flex;
@@ -675,14 +715,18 @@ export default {
display: flex;
justify-content: space-between;
}
.left-search-input {
width: 300px;
margin-right: auto;
margin: 10px 5px;
}
.right-add-button-group {
width: 100px;
margin-left: auto;
margin: 10px 5px;
}
</style>

8
dbswitch-admin/src/main/resources/application.yml
View File

@@ -12,9 +12,9 @@ spring:
static-path-pattern: /statics/**
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://192.168.31.57:3306/dbswitch?createDatabaseIfNotExist=true&useUnicode=true&characterEncoding=UTF8&autoReconnect=true&useSSL=false&allowMultiQueries=true&failOverReadOnly=false&connectTimeout=30000
username: tangyibo
password: 123456
url: jdbc:mysql://192.168.171.131:3306/dbswitch?createDatabaseIfNotExist=true&useUnicode=true&characterEncoding=UTF8&autoReconnect=true&useSSL=false&allowMultiQueries=true&failOverReadOnly=false&connectTimeout=30000
username: root
password: root
validation-query: SELECT 1
test-on-borrow: true
flyway:
@@ -32,4 +32,4 @@ mybatis:
dbswitch:
configuration:
drivers-base-path: ${APP_DRIVERS_PATH}
drivers-base-path: ${APP_DRIVERS_PATH:D:\Code\Gitee\IdeaProjects\dbswitch\drivers}