<!-- 连接管理 - 符合数据库列表进行定制的内容 -->
<template>
<div id="sqlSource text-center">
<p class="sqlType">数据库类型：{{ ruleForm.dbType }}</p>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
:label-width="randerWidth"
class="demo-ruleForm"
>
<el-col :span="12">
<el-form-item label="连接名称：" prop="dataSourceName">
<el-input
v-model="ruleForm.dataSourceName"
:disabled="dataSourceDis"
placeholder="请输入连接名称"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12" style="height:62px;">
<el-form-item label="连接url：" prop="url">
<el-col :span="22">
<el-input
v-model="ruleForm.url"
placeholder="请输入连接url"
></el-input>
</el-col>
<el-col :span="2" class="text-right">
<div class="aboutType">
<el-tooltip
class="item"
effect="dark"
:content="'点击图标复制示例：' + examples"
placement="top-start"
>
<span
><i
class="iconfont icon-49"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
v-clipboard:copy="examples"
></i>
</span>
</el-tooltip>
</div>
</el-col>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户名：" prop="userName">
<el-input
v-model="ruleForm.userName"
@keyup.native="notEmpty(ruleForm.userName, 'userName')"
placeholder="请输入用户名"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户密码：" prop="userPassword">
<el-input
type="password"
v-model="ruleForm.userPassword"
@keyup.native="notEmpty(ruleForm.userPassword, 'userPassword')"
placeholder="请输入用户密码"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注：">
<el-input v-model="ruleForm.mark" placeholder="请输入备注"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-show="!messageQueue" label="数据库属性串：">
<el-input
v-model="ruleForm.properties"
placeholder="请输入数据库属性串"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item
v-show="!messageQueue"
label="额外数量连接属性："
prop="extendProperties"
>
<el-input
type="textarea"
v-model="ruleForm.extendProperties"
placeholder="请输入额外数量连接属性"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="交换机名称：" v-show="messageQueue">
<el-input
v-model="exchange"
placeholder="请输入交换机名称"
></el-input>
</el-form-item>
</el-col>
</el-form>
<span slot="footer" class="dialog-footer" :style="modelFloor">
<el-button
@click.native="connectionTesting"
size="mini"
class="f_left connection"
>连 接 测 试</el-button
>
<p class="f_left" :style="errorText" v-show="errorConnect">
{{ errorHtml }}
</p>
<el-button type="primary" v-show="editAdd" @click="submitForm(1)"
>添 加</el-button
>
<el-button type="primary" v-show="!editAdd" @click="submitForm(2)"
>修 改</el-button
>
<el-button @click.native="dataEdits">取 消</el-button>
</span>
</div>
</template>
<script>
import { isJSON, notify } from "../util/item";
import project from "../mixins/project";
export default {
data() {
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback();
} else if (!isJSON(value)) {
callback(new Error("额外数量连接属性，为JSON格式"));
} else {
callback();
}
};
return {
errorText: {
color: "#F56C6C",
lineHeight: "45px",
marginLeft: "10px"
},
randerWidth: "",
errorHtml: "",
editAdd: true,
examples: "",
messageQueue: false,
dataSourceDis: false,
errorConnect: false,
exchange: "",
editId: "",
testPass: 0,
ruleForm: {
dataSourceName: "",
dbType: "",
userName: "",
extendProperties: "",
userPassword: "",
properties: "",
url: "",
mark: ""
},
modelFloor: {
display: "block",
textAlign: "right",
padding: "0 0 22px 0"
},
rules: {
dataSourceName: [
{
required: true,
message: "请输入连接名称",
trigger: "blur"
}
],
extendProperties: [
{
validator: validatePass2,
trigger: "blur"
}
],
url: [
{
required: true,
message: "请输入连接url",
trigger: "blur"
}
],
userName: [
{
required: true,
message: "请输入用户名",
trigger: "blur"
}
],
userPassword: [
{
required: true,
message: "请输入用户密码",
trigger: "blur"
}
]
}
};
},
mixins: [project],
components: {},
computed: {},
mounted() {},
methods: {
mysqlVal(val, row = "") {
/**
* 数据库类型的判断
* @param {String} val 数据库类型
* @param {Object} row 表格参数
*/
this.dataSourceDis = false;
this.resetForm("ruleForm");
this.editAdd = true;
// 连接名为小写
this.ruleForm.dbType = val;
let low = val.toLocaleLowerCase();
// 数据库类型示例
if (val === "MongoDB") {
this.examples = "127.0.0.1:27010/monitoring";
} else {
this.examples = `jdbc:${low}://server:1433;databasename=test`;
}
this.randerWidth = "170px";
if (val === "RabbitMQ") {
this.messageQueue = true;
this.randerWidth = "120px";
this.examples = "127.0.0.1:5672";
// 新增窗口队列
if (row === "") {
this.exchange = "";
// this.dataSourceFlage = false;
} else {
// 修改窗口队列
let properties = JSON.parse(row["properties"]);
this.exchange = properties["exchange"];
// this.dataSourceFlage = true;
}
return;
}
this.messageQueue = false;
},
editVal(row) {
/**
* 修改窗口
* @param {Object} row 表格行点击参数
*/
this.mysqlVal(row.dbType, row);
this.editAdd = false;
this.dataSourceDis = true;
let { keys } = Object;
this.editId = row.id;
for (let item of keys(this.ruleForm)) {
this.ruleForm[item] = row[item];
}
},
connectionTesting() {
/**
* 连接测试，数据矫正
*/
this.correct("ruleForm", () => {
// 消息队列
this.$http
.post(this.nozzle.testSource, this.ruleForm)
.then(response => {
if (response.data.code === 200) {
this.testPass = 200;
this.errorConnect = true;
this.errorText.color = "#41ca4c";
this.errorHtml = "测试连接成功";
} else {
this.testPass = 0;
this.errorHtml = response.data.data;
this.errorConnect = true;
this.errorText.color = "#F56C6C";
}
});
});
},
dataEdits() {
/**
* 按钮取消事件
*/
this.errorConnect = false;
this.testPass = 0;
this.$emit("dataEdits", false);
},
async addParameter(api, dif = 1) {
// 新增数据传值
let datas = this.ruleForm;
// 消息队列
if (this.ruleForm.dbType === "RabbitMQ") {
datas["properties"] = JSON.stringify({
exchange: this.exchange
});
}
// 修改数据
if (dif === 2) {
datas["id"] = this.editId;
}
const response = await this.$http.post(api, datas);
notify(response);
if (response.data.code === 200) {
this.updateData();
}
},
resetForm(formName) {
// 清空表格数据
this.$refs[formName].resetFields();
},
correct(formName, cb, dif = 1) {
// 数据矫正
this.$refs[formName].validate(valid => {
if (valid) {
// 连接测试
// if (dif === 2) {
// if (this.testPass === 0) {
// this.$notify({
// type: 'warning',
// message: '请先完成连接测试'
// })
// return
// }
// }
cb();
return true;
} else {
console.log("error submit!!");
return false;
}
});
},
updateData() {
/**
* 更新数据
*/
this.$emit("updateData");
},
submitForm(dif) {
// 添加数据,修改数据
this.correct(
"ruleForm",
() => {
let api = "";
if (dif === 1) {
api = this.nozzle.addSource;
this.addParameter(api);
} else {
api = this.nozzle.updateSource;
this.addParameter(api, 2);
}
this.dataEdits();
},
2
);
}
}
};
</script>
<style>
#sqlSource {
width: 100%;
}
.connection {
margin-top: 5px;
}
</style>
