<!-- 连接管理 - 符合数据库列表进行定制的内容 -->
<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%;
}
.sqlType {
font-size: 16px;
color: #001529;
margin-bottom: 20px;
padding-left: 11px;
}
.connection {
margin-top: 5px;
}
</style>
