数据源管理 编辑 100%

This commit is contained in:
守護
2024-04-11 20:51:39 +08:00
parent 1a6a68751b
commit cf8e104c01
6 changed files with 264 additions and 258 deletions

View File

@@ -193,7 +193,7 @@ export default {
.active { .active {
background-color: #ffffff !important; background-color: #ffffff !important;
border: 1.8px solid #409EFF; border: 1px solid #409EFF;
} }
.tag-mdi { .tag-mdi {

View File

@@ -40,9 +40,9 @@
:value="item.driverVersion"></el-option> :value="item.driverVersion"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="编码格式"> <!-- <el-form-item label="编码格式">-->
<label>utf8、utf8mb4</label> <!-- <label>utf8、utf8mb4</label>-->
</el-form-item> <!-- </el-form-item>-->
</div> </div>
<div class="f1"> <div class="f1">
@@ -69,7 +69,7 @@
<el-form-item label="编码格式" style="width:24%"> <el-form-item label="编码格式" style="width:24%">
<el-select v-model="createform.characterEncoding" placeholder="请选择编码格式"> <el-select v-model="createform.characterEncoding" placeholder="请选择编码格式">
<el-option label="utf8" value="utf8"></el-option> <el-option label="utf8" value="utf8"></el-option>
<el-option label="utf8mb4" value="utf8mb4"></el-option> <!-- <el-option label="utf8mb4" value="utf8mb4"></el-option>-->
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -113,10 +113,10 @@
</el-form> </el-form>
</el-main> </el-main>
<el-footer> <el-footer>
<el-row> <el-row style="text-align: center">
<el-button class="cancel" @click="cancel">取消</el-button>
<el-button type="primary" class="createDataSource" @click="createDataSource">创建</el-button>
<el-button type="success" class="startTest" @click="startTest">开始检测</el-button> <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-row>
</el-footer> </el-footer>
</el-container> </el-container>
@@ -316,7 +316,7 @@ export default {
}); });
this.$router.push("/connection/list") this.$router.push("/connection/list")
} else { } else {
alert("添加连接信息失败:" + res.data.message); this.$message.error("添加连接信息失败" + res.data.message);
} }
}); });
} else { } else {
@@ -362,8 +362,8 @@ export default {
} }
.cancel { .cancel {
float: right; //float: right;
margin-left: 20px; //margin-left: 20px;
padding: 6px 14px; padding: 6px 14px;
border: 1px solid #dcdcdd; border: 1px solid #dcdcdd;
cursor: pointer; cursor: pointer;
@@ -371,8 +371,8 @@ export default {
} }
.createDataSource { .createDataSource {
float: right; //float: right;
margin-left: 20px; //margin-left: 20px;
padding: 6px 14px; padding: 6px 14px;
border: none; border: none;
color: white; color: white;
@@ -381,7 +381,7 @@ export default {
} }
.startTest { .startTest {
float: right; //float: right;
padding: 6px 14px; padding: 6px 14px;
cursor: pointer; cursor: pointer;
} }

View File

@@ -98,7 +98,7 @@
</el-form> </el-form>
</el-main> </el-main>
<el-footer> <el-footer>
<el-row> <el-row style="text-align: center">
<el-button class="cancel" @click="cancel">取消</el-button> <el-button class="cancel" @click="cancel">取消</el-button>
</el-row> </el-row>
</el-footer> </el-footer>
@@ -171,8 +171,8 @@ export default {
} }
.cancel { .cancel {
float: right; //float: right;
margin-left: 20px; //margin-left: 20px;
padding: 6px 14px; padding: 6px 14px;
border: 1px solid #dcdcdd; border: 1px solid #dcdcdd;
cursor: pointer; cursor: pointer;

View File

@@ -280,85 +280,85 @@
<!-- </div>--> <!-- </div>-->
<!-- </el-dialog>--> <!-- </el-dialog>-->
<el-dialog title="修改数据源连接信息" <!-- <el-dialog title="修改数据源连接信息"-->
:visible.sync="updateFormVisible" <!-- :visible.sync="updateFormVisible"-->
:showClose="false" <!-- :showClose="false"-->
:before-close="handleClose"> <!-- :before-close="handleClose">-->
<el-form :model="updateform" <!-- <el-form :model="updateform"-->
size="mini" <!-- size="mini"-->
status-icon <!-- status-icon-->
:rules="rules" <!-- :rules="rules"-->
ref="updateform"> <!-- ref="updateform">-->
<el-form-item label="连接名称" <!-- <el-form-item label="连接名称"-->
label-width="120px" <!-- label-width="120px"-->
:required=true <!-- :required=true-->
prop="name" <!-- prop="name"-->
style="width:85%"> <!-- style="width:85%">-->
<el-input v-model="updateform.name" <!-- <el-input v-model="updateform.name"-->
auto-complete="off"></el-input> <!-- auto-complete="off"></el-input>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="数据库类型" <!-- <el-form-item label="数据库类型"-->
label-width="120px" <!-- label-width="120px"-->
:required=true <!-- :required=true-->
prop="type" <!-- prop="type"-->
style="width:85%"> <!-- style="width:85%">-->
<el-select v-model="updateform.type" <!-- <el-select v-model="updateform.type"-->
@change="selectChangedDriverVersion" <!-- @change="selectChangedDriverVersion"-->
placeholder="请选择数据库"> <!-- placeholder="请选择数据库">-->
<el-option v-for="(item,index) in databaseType" <!-- <el-option v-for="(item,index) in databaseType"-->
:key="index" <!-- :key="index"-->
:label="item.type" <!-- :label="item.type"-->
:value="item.type"></el-option> <!-- :value="item.type"></el-option>-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="驱动版本" <!-- <el-form-item label="驱动版本"-->
label-width="120px" <!-- label-width="120px"-->
:required=true <!-- :required=true-->
prop="version" <!-- prop="version"-->
style="width:85%"> <!-- style="width:85%">-->
<el-select v-model="updateform.version" <!-- <el-select v-model="updateform.version"-->
placeholder="请选择版本"> <!-- placeholder="请选择版本">-->
<el-option v-for="(item,index) in connectionDriver" <!-- <el-option v-for="(item,index) in connectionDriver"-->
:key="index" <!-- :key="index"-->
:label="item.driverVersion" <!-- :label="item.driverVersion"-->
:value="item.driverVersion"></el-option> <!-- :value="item.driverVersion"></el-option>-->
</el-select> <!-- </el-select>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="JDBC连接串" <!-- <el-form-item label="JDBC连接串"-->
label-width="120px" <!-- label-width="120px"-->
:required=true <!-- :required=true-->
prop="url" <!-- prop="url"-->
style="width:85%"> <!-- style="width:85%">-->
<el-input type="textarea" <!-- <el-input type="textarea"-->
:rows="6" <!-- :rows="6"-->
:spellcheck="false" <!-- :spellcheck="false"-->
v-model="updateform.url" <!-- v-model="updateform.url"-->
auto-complete="off"></el-input> <!-- auto-complete="off"></el-input>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="账号名称" <!-- <el-form-item label="账号名称"-->
label-width="120px" <!-- label-width="120px"-->
prop="username" <!-- prop="username"-->
style="width:85%"> <!-- style="width:85%">-->
<el-input v-model="updateform.username" <!-- <el-input v-model="updateform.username"-->
auto-complete="off"></el-input> <!-- auto-complete="off"></el-input>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item label="连接密码" <!-- <el-form-item label="连接密码"-->
label-width="120px" <!-- label-width="120px"-->
prop="password" <!-- prop="password"-->
style="width:85%"> <!-- style="width:85%">-->
<el-input type="password" <!-- <el-input type="password"-->
v-model="updateform.password" <!-- v-model="updateform.password"-->
auto-complete="off"></el-input> <!-- auto-complete="off"></el-input>-->
</el-form-item> <!-- </el-form-item>-->
</el-form> <!-- </el-form>-->
<div slot="footer" <!-- <div slot="footer"-->
class="dialog-footer"> <!-- class="dialog-footer">-->
<el-button @click="updateFormVisible = false">取 消</el-button> <!-- <el-button @click="updateFormVisible = false">取 消</el-button>-->
<el-button type="primary" <!-- <el-button type="primary"-->
@click="handleSave">确 定 <!-- @click="handleSave">确 定-->
</el-button> <!-- </el-button>-->
</div> <!-- </div>-->
</el-dialog> <!-- </el-dialog>-->
</el-card> </el-card>
</div> </div>
</template> </template>
@@ -505,8 +505,8 @@ export default {
} }
); );
}, },
handleClose(done) { // handleClose(done) {
}, // },
handleDelete: function (index, row) { handleDelete: function (index, row) {
this.$confirm( this.$confirm(
"此操作将此数据源ID=" + row.id + "删除么, 是否继续?", "此操作将此数据源ID=" + row.id + "删除么, 是否继续?",
@@ -552,79 +552,79 @@ export default {
} }
}); });
}, },
addConnection: function () { // addConnection: function () {
this.createFormVisible = true; // this.createFormVisible = true;
this.createform = {}; // this.createform = {};
}, // },
selectDataSource: function () { selectDataSource: function () {
// this.dataSourceCreateStep1 = true; // this.dataSourceCreateStep1 = true;
this.$router.push('/connection/list/addDataSource1'); this.$router.push('/connection/list/addDataSource1');
}, },
handleCreate: function () { // handleCreate: function () {
let driverClass = ""; // let driverClass = "";
if (this.databaseType.length > 0) { // if (this.databaseType.length > 0) {
for (let i = 0; i < this.databaseType.length; i++) { // for (let i = 0; i < this.databaseType.length; i++) {
//console.log(this.databaseType[i]) // //console.log(this.databaseType[i])
if (this.databaseType[i].type == this.createform.type) { // if (this.databaseType[i].type == this.createform.type) {
driverClass = this.databaseType[i].driver; // driverClass = this.databaseType[i].driver;
break; // break;
} // }
} // }
} // }
//
this.$refs['createform'].validate(valid => { // this.$refs['createform'].validate(valid => {
if (valid) { // if (valid) {
this.$http({ // this.$http({
method: "POST", // method: "POST",
headers: { // headers: {
'Content-Type': 'application/json' // 'Content-Type': 'application/json'
}, // },
url: "/dbswitch/admin/api/v1/connection/create", // url: "/dbswitch/admin/api/v1/connection/create",
data: JSON.stringify({ // data: JSON.stringify({
name: this.createform.name, // name: this.createform.name,
type: this.createform.type, // type: this.createform.type,
version: this.createform.version, // version: this.createform.version,
driver: driverClass, // driver: driverClass,
url: this.createform.url, // url: this.createform.url,
username: this.createform.username, // username: this.createform.username,
password: this.createform.password // password: this.createform.password
}) // })
}).then(res => { // }).then(res => {
if (0 === res.data.code) { // if (0 === res.data.code) {
this.createFormVisible = false; // this.createFormVisible = false;
this.$message("添加连接信息成功"); // this.$message("添加连接信息成功");
this.createform = {}; // this.createform = {};
this.loadData(); // this.loadData();
} else { // } else {
alert("添加连接信息失败:" + res.data.message); // alert("添加连接信息失败:" + res.data.message);
} // }
}); // });
} else { // } else {
alert("请检查输入"); // alert("请检查输入");
} // }
}); // });
}, // },
selectChangedDriverVersion: function (value) { // selectChangedDriverVersion: function (value) {
this.connectionDriver = []; // this.connectionDriver = [];
this.$http.get( // this.$http.get(
"/dbswitch/admin/api/v1/connection/" + value + "/drivers" // "/dbswitch/admin/api/v1/connection/" + value + "/drivers"
).then(res => { // ).then(res => {
if (0 === res.data.code) { // if (0 === res.data.code) {
this.connectionDriver = res.data.data; // this.connectionDriver = res.data.data;
let varDatabaseType = this.databaseType.find( // let varDatabaseType = this.databaseType.find(
(item) => { // (item) => {
return item.type === value; // return item.type === value;
}); // });
if (varDatabaseType) { // if (varDatabaseType) {
this.createform.sample = varDatabaseType.sample; // this.createform.sample = varDatabaseType.sample;
} // }
} else { // } else {
this.$message.error("查询数据库可用的驱动版本失败," + res.data.message); // this.$message.error("查询数据库可用的驱动版本失败," + res.data.message);
this.connectionDriver = []; // this.connectionDriver = [];
} // }
}); // });
}, // },
handleUpdate: function (index, row) { handleUpdate: function (index, row) {
this.$router.push({ this.$router.push({
path: "/connection/list/updateDataSource", query: path: "/connection/list/updateDataSource", query:
@@ -643,51 +643,51 @@ export default {
// }); // });
// this.updateFormVisible = true; // this.updateFormVisible = true;
}, },
handleSave: function () { // handleSave: function () {
let driverClass = ""; // let driverClass = "";
if (this.databaseType.length > 0) { // if (this.databaseType.length > 0) {
for (let i = 0; i < this.databaseType.length; i++) { // for (let i = 0; i < this.databaseType.length; i++) {
//console.log(this.databaseType[i]) // //console.log(this.databaseType[i])
if (this.databaseType[i].type == this.updateform.type) { // if (this.databaseType[i].type == this.updateform.type) {
driverClass = this.databaseType[i].driver; // driverClass = this.databaseType[i].driver;
break; // break;
} // }
} // }
} // }
//
this.$refs['updateform'].validate(valid => { // this.$refs['updateform'].validate(valid => {
if (valid) { // if (valid) {
this.$http({ // this.$http({
method: "POST", // method: "POST",
headers: { // headers: {
'Content-Type': 'application/json' // 'Content-Type': 'application/json'
}, // },
url: "/dbswitch/admin/api/v1/connection/update", // url: "/dbswitch/admin/api/v1/connection/update",
data: JSON.stringify({ // data: JSON.stringify({
id: this.updateform.id, // id: this.updateform.id,
name: this.updateform.name, // name: this.updateform.name,
type: this.updateform.type, // type: this.updateform.type,
version: this.updateform.version, // version: this.updateform.version,
driver: driverClass, // driver: driverClass,
url: this.updateform.url, // url: this.updateform.url,
username: this.updateform.username, // username: this.updateform.username,
password: this.updateform.password // password: this.updateform.password
}) // })
}).then(res => { // }).then(res => {
if (0 === res.data.code) { // if (0 === res.data.code) {
this.updateFormVisible = false; // this.updateFormVisible = false;
this.$message("修改连接信息成功"); // this.$message("修改连接信息成功");
this.loadData(); // this.loadData();
this.updateform = {}; // this.updateform = {};
} else { // } else {
alert("修改连接信息失败:" + res.data.message); // alert("修改连接信息失败:" + res.data.message);
} // }
}); // });
} else { // } else {
alert("请检查输入"); // alert("请检查输入");
} // }
}); // });
}, // },
handleSizeChange: function (pageSize) { handleSizeChange: function (pageSize) {
this.loading = true; this.loading = true;
this.pageSize = pageSize; this.pageSize = pageSize;

View File

@@ -6,9 +6,9 @@
<el-container> <el-container>
<el-header style="height: 80px"> <el-header style="height: 80px">
<div style="display: inline-block;float: left"> <div style="display: inline-block;float: left">
<img title="DB" :src="require('@/assets/icons/' + this.selectedDataSource.name +'.png')" class="image"> <img title="DB" :src="require('@/assets/icons/' + this.updateform.typeName +'.png')" class="image">
</div> </div>
<h3 style="font-family: 楷体;margin-left: 60px" class=".h-title">{{ this.selectedDataSource.name }}</h3> <h3 style="font-family: 楷体;margin-left: 60px" class=".h-title">{{ this.updateform.typeName }}</h3>
</el-header> </el-header>
<el-main> <el-main>
@@ -40,9 +40,9 @@
:value="item.driverVersion"></el-option> :value="item.driverVersion"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="编码格式"> <!-- <el-form-item label="编码格式">-->
<label>utf8、utf8mb4</label> <!-- <label>utf8、utf8mb4</label>-->
</el-form-item> <!-- </el-form-item>-->
</div> </div>
<div class="f1"> <div class="f1">
@@ -69,7 +69,7 @@
<el-form-item label="编码格式" style="width:24%"> <el-form-item label="编码格式" style="width:24%">
<el-select v-model="updateform.characterEncoding" placeholder="请选择编码格式"> <el-select v-model="updateform.characterEncoding" placeholder="请选择编码格式">
<el-option label="utf8" value="utf8"></el-option> <el-option label="utf8" value="utf8"></el-option>
<el-option label="utf8mb4" value="utf8mb4"></el-option> <!-- <el-option label="utf8mb4" value="utf8mb4"></el-option>-->
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -113,10 +113,10 @@
</el-form> </el-form>
</el-main> </el-main>
<el-footer> <el-footer>
<el-row> <el-row style="text-align: center">
<el-button class="cancel" @click="cancel">取消</el-button>
<el-button type="primary" class="createDataSource" @click="createDataSource">创建</el-button>
<el-button type="success" class="startTest" @click="startTest">开始检测</el-button> <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-row>
</el-footer> </el-footer>
</el-container> </el-container>
@@ -132,9 +132,11 @@ export default {
connectionDriver: [], connectionDriver: [],
databaseType: [], databaseType: [],
updateform: { updateform: {
id: 0,
diver: "", diver: "",
name: "", name: "",
type: "", type: "",
typeName: "",
version: "", version: "",
mode: 0, mode: 0,
address: "", address: "",
@@ -261,7 +263,7 @@ export default {
let driverClass = ""; let driverClass = "";
if (this.connectionDriver.length > 0) { if (this.connectionDriver.length > 0) {
for (let i = 0; i < this.connectionDriver.length; i++) { for (let i = 0; i < this.connectionDriver.length; i++) {
if (this.connectionDriver[i].driverVersion == this.createform.version) { if (this.connectionDriver[i].driverVersion == this.updateform.version) {
driverClass = this.connectionDriver[i].driverClass; driverClass = this.connectionDriver[i].driverClass;
break; break;
} }
@@ -274,13 +276,13 @@ export default {
}, },
url: "/dbswitch/admin/api/v1/connection/preTest", url: "/dbswitch/admin/api/v1/connection/preTest",
data: JSON.stringify({ data: JSON.stringify({
name: this.createform.name, name: this.updateform.name,
type: this.selectedDataSource.type, type: this.updateform.type,
version: this.createform.version, version: this.updateform.version,
driver: driverClass, driver: driverClass,
url: this.createform.url, url: this.updateform.url,
username: this.createform.username, username: this.updateform.username,
password: this.createform.password password: this.updateform.password
}) })
}).then(res => { }).then(res => {
if (0 === res.data.code) { if (0 === res.data.code) {
@@ -293,52 +295,55 @@ export default {
} }
}); });
}, },
createDataSource: function () { updateDataSource: function () {
let driverClass = ""; let driverClass = "";
if (this.connectionDriver.length > 0) { if (this.connectionDriver.length > 0) {
for (let i = 0; i < this.connectionDriver.length; i++) { for (let i = 0; i < this.connectionDriver.length; i++) {
if (this.connectionDriver[i].driverVersion == this.createform.version) { if (this.connectionDriver[i].driverVersion == this.updateform.version) {
driverClass = this.connectionDriver[i].driverClass; driverClass = this.connectionDriver[i].driverClass;
break; break;
} }
} }
} }
this.$refs['createform'].validate(valid => { this.$refs['updateform'].validate(valid => {
if (valid) { if (valid) {
this.$http({ this.$http({
method: "POST", method: "POST",
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
url: "/dbswitch/admin/api/v1/connection/create", url: "/dbswitch/admin/api/v1/connection/update",
data: JSON.stringify({ data: JSON.stringify({
name: this.createform.name, id: this.updateform.id,
type: this.selectedDataSource.type, name: this.updateform.name,
version: this.createform.version, type: this.updateform.type,
version: this.updateform.version,
driver: driverClass, driver: driverClass,
mode:0, mode: 0,
address:this.createform.address, address: this.updateform.address,
port:this.createform.port, port: this.updateform.port,
databaseName:this.createform.databaseName, databaseName: this.updateform.databaseName,
characterEncoding:this.createform.characterEncoding, characterEncoding: this.updateform.characterEncoding,
url: this.createform.url, url: this.updateform.url,
username: this.createform.username, username: this.updateform.username,
password: this.createform.password password: this.updateform.password
}) })
}).then(res => { }).then(res => {
if (0 === res.data.code) { if (0 === res.data.code) {
this.$message({ this.$message({
message: '添加连接信息成功!', message: '修改连接信息成功!',
type: 'success' type: 'success'
}); });
this.$router.push("/connection/list") this.$router.push("/connection/list")
} else { } else {
alert("添加连接信息失败:" + res.data.message); this.$message.error("修改连接信息失败" + res.data.message);
} }
}); });
} else { } else {
alert("请检查输入"); alert("请检查输入");
this.$message.error("请检查输入");
} }
}); });
}, },
@@ -350,15 +355,6 @@ export default {
this.updateform = this.$route.query; this.updateform = this.$route.query;
this.updateform.mode = parseInt(this.updateform.mode) this.updateform.mode = parseInt(this.updateform.mode)
this.loadDatabaseTypes(); this.loadDatabaseTypes();
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) {
this.selectedDataSource = this.databaseType[i].driver;
break;
}
}
}
this.selectChangedDriverVersion(this.updateform.type); this.selectChangedDriverVersion(this.updateform.type);
} }
} }
@@ -390,8 +386,8 @@ export default {
} }
.cancel { .cancel {
float: right; //float: right;
margin-left: 20px; //margin-left: 20px;
padding: 6px 14px; padding: 6px 14px;
border: 1px solid #dcdcdd; border: 1px solid #dcdcdd;
cursor: pointer; cursor: pointer;
@@ -399,8 +395,8 @@ export default {
} }
.createDataSource { .createDataSource {
float: right; //float: right;
margin-left: 20px; //margin-left: 20px;
padding: 6px 14px; padding: 6px 14px;
border: none; border: none;
color: white; color: white;
@@ -409,7 +405,7 @@ export default {
} }
.startTest { .startTest {
float: right; //float: right;
padding: 6px 14px; padding: 6px 14px;
cursor: pointer; cursor: pointer;
} }

View File

@@ -23,6 +23,11 @@ public class DbConnectionUpdateRequest {
private ProductTypeEnum type; private ProductTypeEnum type;
private String version; private String version;
private String driver; private String driver;
private Integer mode;
private String address;
private String port;
private String databaseName;
private String characterEncoding;
private String url; private String url;
private String username; private String username;
private String password; private String password;
@@ -34,6 +39,11 @@ public class DbConnectionUpdateRequest {
databaseConnectionEntity.setType(type); databaseConnectionEntity.setType(type);
databaseConnectionEntity.setVersion(version.trim()); databaseConnectionEntity.setVersion(version.trim());
databaseConnectionEntity.setDriver(driver.trim()); databaseConnectionEntity.setDriver(driver.trim());
databaseConnectionEntity.setMode(mode);
databaseConnectionEntity.setAddress(address.trim());
databaseConnectionEntity.setPort(port.trim());
databaseConnectionEntity.setDatabaseName(databaseName.trim());
databaseConnectionEntity.setCharacterEncoding(characterEncoding.trim());
databaseConnectionEntity.setUrl(url.trim()); databaseConnectionEntity.setUrl(url.trim());
databaseConnectionEntity.setUsername(username); databaseConnectionEntity.setUsername(username);
databaseConnectionEntity.setPassword(password); databaseConnectionEntity.setPassword(password);