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

数据源管理 编辑 100%

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

@@ -280,85 +280,85 @@
<!-- </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-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 +505,8 @@ export default {
}
);
},
handleClose(done) {
},
// handleClose(done) {
// },
handleDelete: function (index, row) {
this.$confirm(
"此操作将此数据源ID=" + row.id + "删除么, 是否继续?",
@@ -552,79 +552,79 @@ export default {
}
});
},
addConnection: function () {
this.createFormVisible = true;
this.createform = {};
},
// 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 = [];
}
});
},
// 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) {
this.$router.push({
path: "/connection/list/updateDataSource", query:
@@ -643,51 +643,51 @@ export default {
// });
// 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("请检查输入");
}
});
},
// 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;

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

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