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

数据源管理编辑优化

Browse Source
This commit is contained in:
守護
2024-05-09 22:43:30 +08:00
parent 3473986b86
commit 18c24089f3
2 changed files with 59 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,13 +18,6 @@
icon="el-icon-document-add"
@click="selectDataSource">接入数据源</el-button>
</div>
<!-- <div class="right-add-button-group">-->
<!-- <el-button type="primary"-->
<!-- size="mini"-->
<!-- icon="el-icon-document-add"-->
<!-- @click="addConnection">旧接入数据源</el-button>-->
<!-- </div>-->
</div>
<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
@@ -47,10 +40,6 @@
label="驱动版本"
show-overflow-tooltip
min-width="12%"></el-table-column>
<!-- <el-table-column prop="url"-->
<!-- label="JDBC连接串"-->
<!-- show-overflow-tooltip-->
<!-- min-width="15%"></el-table-column>-->
<el-table-column prop="createTime"
label="创建时间"
min-width="18%"></el-table-column>
@@ -100,265 +89,6 @@
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"></el-pagination>
</div>
<!-- <el-dialog title="查看数据库连接信息"-->
<!-- :visible.sync="dialogFormVisible"-->
<!-- :showClose="false"-->
<!-- :before-close="handleClose">-->
<!-- <el-form :model="queryForm"-->
<!-- size="mini">-->
<!-- <el-form-item label="连接名称"-->
<!-- label-width="120px"-->
<!-- style="width:85%">-->
<!-- <el-input v-model="queryForm.name"-->
<!-- auto-complete="off"-->
<!-- :readonly=true></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库类型"-->
<!-- label-width="120px"-->
<!-- style="width:85%">-->
<!-- <el-input v-model="queryForm.type"-->
<!-- auto-complete="off"-->
<!-- :readonly=true></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库驱动"-->
<!-- label-width="120px"-->
<!-- style="width:85%">-->
<!-- <el-input v-model="queryForm.driver"-->
<!-- auto-complete="off"-->
<!-- :readonly=true></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="驱动版本号"-->
<!-- label-width="120px"-->
<!-- style="width:85%">-->
<!-- <el-input v-model="queryForm.version"-->
<!-- auto-complete="off"-->
<!-- :readonly=true></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="JDBC连接串"-->
<!-- label-width="120px"-->
<!-- style="width:85%">-->
<!-- <el-input type="textarea"-->
<!-- :rows="6"-->
<!-- :spellcheck="false"-->
<!-- v-model="queryForm.url"-->
<!-- auto-complete="off"-->
<!-- :readonly=true></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="账号名称"-->
<!-- label-width="120px"-->
<!-- style="width:85%">-->
<!-- <el-input v-model="queryForm.username"-->
<!-- auto-complete="off"-->
<!-- :readonly=true></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="连接密码"-->
<!-- label-width="120px"-->
<!-- style="width:85%">-->
<!-- <el-input type="password"-->
<!-- v-model="queryForm.password"-->
<!-- auto-complete="off"-->
<!-- :readonly=true></el-input>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer"-->
<!-- class="dialog-footer">-->
<!-- <el-button @click="dialogFormVisible = false">关闭</el-button>-->
<!-- </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"-->
<!-- :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:85%">-->
<!-- <el-input v-model="createform.name"-->
<!-- auto-complete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库类型"-->
<!-- label-width="120px"-->
<!-- :required=true-->
<!-- prop="type"-->
<!-- style="width:85%">-->
<!-- <el-select v-model="createform.type"-->
<!-- @change="selectChangedDriverVersion"-->
<!-- placeholder="请选择数据库">-->
<!-- <el-option v-for="(item,index) in databaseType"-->
<!-- :key="index"-->
<!-- :label="item.type"-->
<!-- :value="item.type"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="驱动版本"-->
<!-- label-width="120px"-->
<!-- :required=true-->
<!-- prop="version"-->
<!-- style="width:85%">-->
<!-- <el-select v-model="createform.version"-->
<!-- placeholder="请选择版本">-->
<!-- <el-option v-for="(item,index) in connectionDriver"-->
<!-- :key="index"-->
<!-- :label="item.driverVersion"-->
<!-- :value="item.driverVersion"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="JDBC连接串"-->
<!-- label-width="120px"-->
<!-- :required=true-->
<!-- prop="url"-->
<!-- style="width:85%">-->
<!-- <el-tooltip placement="top">-->
<!-- <i class="el-icon-question">样例:</i>-->
<!-- <div slot="content">-->
<!-- {{ createform.sample }}-->
<!-- </div>-->
<!-- </el-tooltip>-->
<!-- <el-input type="textarea"-->
<!-- :rows="6"-->
<!-- :spellcheck="false"-->
<!-- placeholder="请输入"-->
<!-- v-model="createform.url"-->
<!-- auto-complete="off">-->
<!-- </el-input>-->
<!-- </el-form-item>-->
<!-- <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="密码"-->
<!-- label-width="120px"-->
<!-- prop="password"-->
<!-- style="width:85%">-->
<!-- <el-input type="password"-->
<!-- v-model="createform.password"-->
<!-- auto-complete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer"-->
<!-- class="dialog-footer">-->
<!-- <el-button @click="createFormVisible = false">取 消</el-button>-->
<!-- <el-button type="primary"-->
<!-- @click="handleCreate">确 定-->
<!-- </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:85%">-->
<!-- <el-input v-model="updateform.name"-->
<!-- auto-complete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库类型"-->
<!-- label-width="120px"-->
<!-- :required=true-->
<!-- prop="type"-->
<!-- style="width:85%">-->
<!-- <el-select v-model="updateform.type"-->
<!-- @change="selectChangedDriverVersion"-->
<!-- placeholder="请选择数据库">-->
<!-- <el-option v-for="(item,index) in databaseType"-->
<!-- :key="index"-->
<!-- :label="item.type"-->
<!-- :value="item.type"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="驱动版本"-->
<!-- label-width="120px"-->
<!-- :required=true-->
<!-- prop="version"-->
<!-- style="width:85%">-->
<!-- <el-select v-model="updateform.version"-->
<!-- placeholder="请选择版本">-->
<!-- <el-option v-for="(item,index) in connectionDriver"-->
<!-- :key="index"-->
<!-- :label="item.driverVersion"-->
<!-- :value="item.driverVersion"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="JDBC连接串"-->
<!-- label-width="120px"-->
<!-- :required=true-->
<!-- prop="url"-->
<!-- style="width:85%">-->
<!-- <el-input type="textarea"-->
<!-- :rows="6"-->
<!-- :spellcheck="false"-->
<!-- v-model="updateform.url"-->
<!-- auto-complete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="账号名称"-->
<!-- label-width="120px"-->
<!-- prop="username"-->
<!-- style="width:85%">-->
<!-- <el-input v-model="updateform.username"-->
<!-- auto-complete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="连接密码"-->
<!-- label-width="120px"-->
<!-- prop="password"-->
<!-- style="width:85%">-->
<!-- <el-input type="password"-->
<!-- v-model="updateform.password"-->
<!-- auto-complete="off"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer"-->
<!-- class="dialog-footer">-->
<!-- <el-button @click="updateFormVisible = false">取 消</el-button>-->
<!-- <el-button type="primary"-->
<!-- @click="handleSave">确 定-->
<!-- </el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
</el-card>
</div>
</template>
@@ -505,8 +235,6 @@ export default {
}
);
},
// handleClose(done) {
// },
handleDelete: function (index, row) {
this.$confirm(
"此操作将此数据源ID=" + row.id + "删除么, 是否继续?",
@@ -520,7 +248,6 @@ export default {
this.$http.delete(
"/dbswitch/admin/api/v1/connection/delete/" + row.id
).then(res => {
//console.log(res);
if (0 === res.data.code) {
this.loadData();
} else {
@@ -534,14 +261,11 @@ export default {
path: "/connection/list/dataSourceInfo", query:
row
});
// this.dialogFormVisible = true;
// this.queryForm = row;
},
handleTest: function (index, row) {
this.$http.get(
"/dbswitch/admin/api/v1/connection/test/" + row.id
).then(res => {
//console.log(res);
if (0 === res.data.code) {
this.$message({
message: '测试连接成功!',
@@ -552,142 +276,21 @@ export default {
}
});
},
// addConnection: function () {
// this.createFormVisible = true;
// this.createform = {};
// },
selectDataSource: function () {
// this.dataSourceCreateStep1 = true;
this.$router.push('/connection/list/addDataSource1');
},
// handleCreate: function () {
// let driverClass = "";
// if (this.databaseType.length > 0) {
// for (let i = 0; i < this.databaseType.length; i++) {
// //console.log(this.databaseType[i])
// if (this.databaseType[i].type == this.createform.type) {
// driverClass = this.databaseType[i].driver;
// break;
// }
// }
// }
//
// this.$refs['createform'].validate(valid => {
// if (valid) {
// this.$http({
// method: "POST",
// headers: {
// 'Content-Type': 'application/json'
// },
// url: "/dbswitch/admin/api/v1/connection/create",
// data: JSON.stringify({
// name: this.createform.name,
// type: this.createform.type,
// version: this.createform.version,
// driver: driverClass,
// url: this.createform.url,
// username: this.createform.username,
// password: this.createform.password
// })
// }).then(res => {
// if (0 === res.data.code) {
// this.createFormVisible = false;
// this.$message("添加连接信息成功");
// this.createform = {};
// this.loadData();
// } else {
// alert("添加连接信息失败:" + res.data.message);
// }
// });
// } else {
// alert("请检查输入");
// }
// });
// },
// selectChangedDriverVersion: function (value) {
// this.connectionDriver = [];
// this.$http.get(
// "/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;
// });
// if (varDatabaseType) {
// this.createform.sample = varDatabaseType.sample;
// }
// } else {
// this.$message.error("查询数据库可用的驱动版本失败," + res.data.message);
// this.connectionDriver = [];
// }
// });
// },
handleUpdate: function (index, row) {
row["templateUrl"] = this.databaseType.find(
(item) => {
return item.type === row['type'];
}).url;
this.$router.push({
path: "/connection/list/updateDataSource", query:
row
});
// this.updateform = JSON.parse(JSON.stringify(row));
// this.$http.get(
// "/dbswitch/admin/api/v1/connection/" + this.updateform.type + "/drivers"
// ).then(res => {
// if (0 === res.data.code) {
// this.connectionDriver = res.data.data;
// } else {
// this.$message.error("查询数据库可用的驱动版本失败," + res.data.message);
// this.connectionDriver = [];
// }
// });
// this.updateFormVisible = true;
},
// handleSave: function () {
// let driverClass = "";
// if (this.databaseType.length > 0) {
// for (let i = 0; i < this.databaseType.length; i++) {
// //console.log(this.databaseType[i])
// if (this.databaseType[i].type == this.updateform.type) {
// driverClass = this.databaseType[i].driver;
// break;
// }
// }
// }
//
// this.$refs['updateform'].validate(valid => {
// if (valid) {
// this.$http({
// method: "POST",
// headers: {
// 'Content-Type': 'application/json'
// },
// url: "/dbswitch/admin/api/v1/connection/update",
// data: JSON.stringify({
// id: this.updateform.id,
// name: this.updateform.name,
// type: this.updateform.type,
// version: this.updateform.version,
// driver: driverClass,
// url: this.updateform.url,
// username: this.updateform.username,
// password: this.updateform.password
// })
// }).then(res => {
// if (0 === res.data.code) {
// this.updateFormVisible = false;
// this.$message("修改连接信息成功");
// this.loadData();
// this.updateform = {};
// } else {
// alert("修改连接信息失败:" + res.data.message);
// }
// });
// } else {
// alert("请检查输入");
// }
// });
// },
handleSizeChange: function (pageSize) {
this.loading = true;
this.pageSize = pageSize;

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

@@ -53,7 +53,7 @@
</el-radio-group>
</el-form-item>
<el-form-item prop="address" label="连接地址">
<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>
/
@@ -61,7 +61,7 @@
placeholder="Port"></el-input>
</el-form-item>
<el-form-item prop="databaseName" label="数据库名" style="width:24%">
<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>
@@ -147,7 +147,7 @@ export default {
password: "",
sample: "",
url: "",
oldUrl: "",
templateUrl: "",
},
rules: {
name: [
@@ -257,7 +257,58 @@ export default {
});
},
changeUrl: function () {
console.log('')
var params = this.updateform.url.split("?");
var turl = this.updateform.templateUrl
var flag = false
if (Object.keys(this.updateform.address).length > 0){
// address
var address = this.updateform.address
turl = turl.replaceAll("{host}",address)
flag = true
}
if (Object.keys(this.updateform.port).length > 0){
// port
var port = this.updateform.port
turl = turl.replaceAll("{port}",port)
flag = true
}
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)
flag = true
}
if (flag){
if (Object.keys(params).length > 1){
this.updateform.url = turl + "?" + params[1]
}else{
this.updateform.url = turl
}
} else{
debugger
if (Object.keys(params).length > 1){
this.updateform.url = this.updateform.sample.split("?")[0] + "?" + params[1]
}else{
this.updateform.url = this.updateform.sample
}
}
},
isShowDatabaseName: function () {
var type = this.updateform.type
var flag = true;
if (type === "ELASTICSEARCH"){
flag = false
}
return flag;
},
isShowUrlAndPort: function () {
var type = this.updateform.type
var flag = true;
if (type === "SQLITE3"){
flag = false
}
return flag;
},
startTest: function () {
let driverClass = "";