<template>
<!--连接管理-->
<div id="dataSources" class="asideBgc tab">
<div class='butClick'>
<xf-buttons @changes="searChange" :btnAuthority='authority' @add='dataEditSql = true' @edit='clickeEdit'
@deletes='delectVals' @get='searchChange' :searchPlaceholder='searchPlaceholder' :addText='addText'>
<!-- 下拉列表框 -->
<!-- <template #dataSource>
<span>
<el-dropdown trigger="click" @command='handleCommand'>
<span class="el-dropdown-link">
<i class="iconfont icon-xiala"></i> 连接添加
</span>
<el-dropdown-menu slot="dropdown">
<ul class="iconSql">
<ul class="el-select-group__wrap" v-for="(group,index) in mysqls" :key="index">
<li class="el-select-group__title">{{group.label}}</li>
<li>
<ul class="el-select-group">
<li v-for="item in group.options" :key='item.label'>
<el-dropdown-item :command='item.value' :icon="item.iconfont">{{item.label}}
</el-dropdown-item>
</li>
</ul>
</li>
</ul>
</ul>
</el-dropdown-menu>
</el-dropdown>
</span>
</template> -->
</xf-buttons>
</div>
<xfTable ref="table" :btnAuthority='authority' @sizeSee='sizeChange' @selectionChange='selectionChange'
@currentChange='currentChange' @refreshChange='refreshChange' @handleEdit='handleEdit' @delectVal='delectVal'
@ruleAdden='ruleAdden' :slotOverhidden='slotName'>
</xfTable>
<!-- 数据添加 -->
<el-dialog :title="modelH" :visible.sync="dataEdit" :close-on-click-modal='closeOnClick' :lock-scroll='closeOnClick'
width="50%" @open='openContent' @close='closeContent' :modal='closeOnClick'>
<SqlSource ref='sqlSources' @dataEdits='dataEdits' @updateData='getLists'></SqlSource>
</el-dialog>
<!-- 数据库类型和队列类型 -->
<el-dialog title="添加数据库或队列" :visible.sync="dataEditSql" :close-on-click-modal='closeOnClick'
:lock-scroll='closeOnClick' width="50%" :modal='closeOnClick'>
<div v-for='(item,index) in mysqls' :key='index'>
<p class="sqlGx">{{item.label}}</p>
<el-row type='flex' class="sqlIcon">
<el-col :span='5' :offset='1' v-for='items in item.options' :key='items.value' class="text-center"
@click.native='handleCommand(items.value)'>
<el-card shadow="hover">
<span><i :class="items.iconfont"></i></span>
<p>{{items.value}}</p>
</el-card>
</el-col>
</el-row>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dataEditSql = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import project from '../../mixins/project'
import * as locasto from '../../util/item';
import SqlSource from '../../model/sqlSource';
var moment = require('moment');
import {
notify
} from '../../util/item'
/*负责导出组件*/
export default {
name: 'dataSources',
data() {
return {
deleteId: 'id', //标记删除字段
addText: '添加连接', //标记删除字段
modelHead: ['添加连接信息', '修改连接信息'],
modelH: '',
mysqls: [{
label: '数据库',
options: [{
value: 'MySQL',
iconfont: 'iconfont icon-mysql',
label: 'MySQL'
}, {
value: 'Oracle',
iconfont: 'iconfont icon-oracle',
label: 'Oracle'
}, {
value: 'SQLServer',
iconfont: 'iconfont icon-db_mysql_server',
label: 'SQLServer'
}, {
value: 'MongoDB',
iconfont: 'iconfont icon-MongoDB',
label: 'MongoDB'
}]
}, {
label: '消息队列',
options: [{
value: 'RabbitMQ',
iconfont: 'iconfont icon-RabbitMQ',
label: 'RabbitMQ'
}]
}],
mysqlsValue: '',
searchPlaceholder: '请输入规则名称',
dialogVisible: false,
dataEdit: false,
dataEditSql: false,
center: true,
editAdd: true,
closeOnClick: false,
slotName: 'dataSourceName',
deleteList: [],
clickValue: '',
loadOption: {
menuWidth: 150,
selection: true, //多选框选择
menu: true,
column: [{
label: '数据库类型',
prop: 'dbType'
}, {
label: '连接名称',
prop: 'dataSourceName',
overHidden: true,
solt: true
}, {
label: '数据库地址URL',
prop: 'url'
}, {
label: '创建人',
prop: 'createdby'
}, {
label: '创建时间',
prop: 'created',
formatter: function (row, value, text, column) {
if (value === null) {
return ''
}
return moment(value).format('YYYY-MM-DD HH:mm:ss')
}
}]
},
}
},
mixins: [project],
mounted() {
this.getLists();
},
components: {
SqlSource
},
methods: {
handleCommand(command) {
// 下拉选中数据库类型
this.dataEditSql = false;
this.mysqlsValue = command;
this.handleAdd()
},
dataEdits(val) {
/**
* 隐藏
*/
this.dataEdit = val;
},
searchChange(val = '') {
// 搜索数据
if (val === '') {
this.page.currentPage = 1;
this.getLists();
} else {
this.getLists(val);
}
},
ruleAdden(row, index) {
console.log(row);
console.log(index);
},
sortDataCopy(row) {
/**
* 数据渲染
*/
for (let [key, value] of Object.entries(this.ruleForm)) {
this.ruleForm[key] = row[key];
}
},
async getLists(ruleName = null) {
/**
* 获取任务列表
*/
this.deleteList = [];
let datas = {
params: {
"pageNo": this.page.currentPage,
"pageSize": this.page.pageSize
}
}
// 获取数据返回状态 日志
let response = await this.getTableData(datas, this.nozzle.getSource);
this.rendering(response);
},
resetClear(item, keys) {
for (let items of Object.keys(this.ruleForm[item])) {
if (items === keys) {
this.ruleForm[item][items] = []
} else {
this.ruleForm[item][items] = ''
}
}
},
handleAdd() {
// 新增按钮
if (this.mysqlsValue === '') {
this.$notify({
type: 'info',
message: "请选择数据库或消息队列再进行数据"
})
return
}
this.editAdd = true;
this.modelH = this.modelHead[0];
this.dataEdit = true;
this.$nextTick(function () {
this.$refs.sqlSources.mysqlVal(this.mysqlsValue)
})
},
clickeEdit() {
// 单击修改
if (!this.clickValue) {
this.$notify.warning('请先选择要修改的行,再进行数据修改!');
return
} else {
this.handleEdit(this.clickValue)
}
},
handleEdit(row) {
// 行内点击修改
this.editAdd = false;
this.modelH = this.modelHead[1]
this.dataEdit = true;
this.$nextTick(function () {
this.$refs.sqlSources.editVal(row)
})
},
deleteUserLise(ids) {
// 删除用户
let datas = {
"params": {
"ids": ids
}
}
this.asyncDelete(datas, this.nozzle.deleteSource);
},
}
}
</script>
<style>
#dataSources .formJcDoc {
font-size: 20px;
color: #333;
margin: 15px 0;
}
#dataSources .iconfont[class^="icon"] {
width: 17px;
}
#dataSources .aboutType {
color: rgb(102, 177, 255);
cursor: pointer;
}
.deleteIcon {
cursor: pointer;
color: #f15353;
}
.conditiona {
padding: 0px 0 10px 100px;
}
hr {
opacity: 0.3;
}
.m-b-20 {
margin-bottom: 20px;
}
#dataSources .sourceS {
display: inline-block;
width: 124px;
line-height: 29px;
background-color: #F0F0F0;
border: 1px solid #D1D1D1;
margin-right: 10px;
border-radius: 3px;
padding-left: 10px;
transform: translateY(1px);
}
#dataSources .el-dropdown-link {
color: #333;
}
.iconSql .iconfont[class^=icon] {
font-size: 18px;
}
.sqlGx {
position: relative;
padding-left: 15px;
font-size: 20px;
cursor: pointer;
}
.sqlIcon {
margin: 20px 0;
}
.sqlIcon p {
line-height: 36px;
}
.sqlIcon .iconfont[class^="icon"] {
width: auto !important;
font-size: 60px;
}
.sqlGx::after {
content: '';
position: absolute;
left: 0;
top: 10%;
width: 2px;
height: 80%;
background-color: #678ee0;
}
</style>
