420 lines
11 KiB
Vue
420 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
|
||
<el-form label-width="80px" :model="SourceReq" ref="queryForm" :inline="true" class="demo-form-inline" size="small">
|
||
<el-form-item label="数据源名称">
|
||
<el-input v-model="SourceReq.dataResourceName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据来源系统名称">
|
||
<el-input v-model="SourceReq.dataSourcesSystemName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据库名称">
|
||
<el-input v-model="SourceReq.databaseName"></el-input>
|
||
</el-form-item>
|
||
<el-button @click="findSelectSourceList()">
|
||
查询
|
||
</el-button>
|
||
</el-form>
|
||
|
||
<el-button
|
||
v-hasPermi="['tool:gen:import']"
|
||
icon="el-icon-download"
|
||
plain
|
||
size="mini"
|
||
type="warning"
|
||
@click="findSelectSourceExport"
|
||
>导出
|
||
</el-button>
|
||
|
||
|
||
<el-button
|
||
icon="el-icon-delete"
|
||
plain
|
||
size="mini"
|
||
type="danger"
|
||
@click="insertAdd()"
|
||
>新增
|
||
</el-button>
|
||
|
||
<el-button
|
||
icon="el-icon-delete"
|
||
plain
|
||
size="mini"
|
||
type="danger"
|
||
@click="deleteSourceByIds()"
|
||
>删除
|
||
</el-button>
|
||
|
||
|
||
<el-dialog title="title" :visible.sync="dialogFormVisible" append-to-body width="60%">
|
||
|
||
<el-form ref="sourceAddReq" :model="sourceAddReq" :rules="rules" label-width="140px" :inline="true" class="demo-form-inline">
|
||
<el-form-item label="接入源名称">
|
||
<el-input v-model="sourceAddReq.dataResourceName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据来源系统名称">
|
||
<el-input v-model="sourceAddReq.dataSourcesSystemName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="主机地址">
|
||
<el-input v-model="sourceAddReq.host"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="主机端口">
|
||
<el-input v-model="sourceAddReq.port"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据接入类型">
|
||
<el-input v-model="sourceAddReq.databaseType"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据库名称">
|
||
<el-input v-model="sourceAddReq.databaseName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据库用户">
|
||
<el-input v-model="sourceAddReq.username"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据库密码">
|
||
<el-input v-model="sourceAddReq.password"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数据连接参数">
|
||
<el-input v-model="sourceAddReq.connectionParams"></el-input>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>连接池配置</span>
|
||
</div>
|
||
<el-form :model="sourceAddReq" label-width="120px" :inline="true" class="demo-form-inline">
|
||
<el-form-item label="初始连接数量：" prop="initCount">
|
||
<el-input v-model="sourceAddReq.initLinkNum" placeholder="初始连接数量"/>
|
||
</el-form-item>
|
||
<el-form-item label="最大连接数量：" prop="maxCount">
|
||
<el-input v-model="sourceAddReq.maxLinkNum" placeholder="最大连接数量"/>
|
||
</el-form-item>
|
||
<el-form-item label="最大等待时间：" prop="maxTime">
|
||
<el-input v-model="sourceAddReq.maxWaitTime" placeholder="最大等待时间"/>
|
||
</el-form-item>
|
||
<el-form-item label="最大等待次数：" prop="maxFrequency">
|
||
<el-input v-model="sourceAddReq.maxWaitTimes" placeholder="最大等待次数"/>
|
||
</el-form-item>
|
||
|
||
|
||
</el-form>
|
||
</el-card>
|
||
|
||
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>其他信息</span>
|
||
</div>
|
||
<el-form :model="sourceAddReq" label-width="140px" :inline="true" class="demo-form-inline">
|
||
<el-form-item label="是否初始化：" prop="status">
|
||
<el-radio-group v-model="sourceAddReq.status">
|
||
<el-radio
|
||
v-for="dict in dict.type.yes_no"
|
||
:key="dict.value"
|
||
:label="dict.value"
|
||
>{{ dict.label }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="备注：">
|
||
<el-input type="textarea" v-model="sourceAddReq.remark"></el-input>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</el-card>
|
||
|
||
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="textP()">测试</el-button>
|
||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="addSource()">确 定</el-button>
|
||
</div>
|
||
|
||
</el-dialog>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<el-table
|
||
:data="source"
|
||
style="width: 100%"
|
||
|
||
@selection-change="handleSelectionChange">
|
||
|
||
<el-table-column
|
||
type="selection"
|
||
width="55">
|
||
</el-table-column>
|
||
|
||
|
||
<el-table-column
|
||
label="接入源名称"
|
||
prop="dataResourceName">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="数据来源系统名称"
|
||
prop="dataSourcesSystemName">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="主机地址"
|
||
prop="host">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="端口号"
|
||
prop="port">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="数据接入类型"
|
||
prop="databaseType">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="数据库名称"
|
||
prop="databaseName">
|
||
</el-table-column>
|
||
|
||
<el-table-column align="status" label="是否初始化" prop="status">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.yes_no" :value="scope.row.status"/>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- <el-table-column-->
|
||
<!-- label="是否初始化"-->
|
||
<!-- prop="status">-->
|
||
<!-- <template slot-scope="scope">-->
|
||
<!-- <dict-tag :options="dict.type.yes_no" :value="scope.row.status"/>-->
|
||
<!-- </template>-->
|
||
<!-- </el-table-column>-->
|
||
|
||
<el-table-column
|
||
label="备注"
|
||
prop="remark">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
align="right">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
icon="el-icon-pear"
|
||
size="mini"
|
||
type="text"
|
||
@click="update(scope.row)">修改</el-button>
|
||
|
||
<el-button
|
||
icon="el-icon-delete"
|
||
size="mini"
|
||
type="text"
|
||
@click="handleDelete(scope.row)">删除</el-button>
|
||
|
||
<el-button
|
||
icon="el-icon-service"
|
||
size="mini"
|
||
type="text"
|
||
@click="struceure(scope.row)">同步资产结构</el-button>
|
||
|
||
<el-button
|
||
icon="el-icon-aim"
|
||
size="mini"
|
||
type="text"
|
||
@click="textConnect(scope.row)">测试连接</el-button>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
import {selectSourceList, update} from "@/api/etl/switch";
|
||
import {connectionTest} from "@/api/etl/switch";
|
||
import {insertAdd} from "@/api/etl/switch";
|
||
import {deleteSource} from "@/api/etl/switch";
|
||
import {getInfo} from "@/api/etl/switch";
|
||
import {structure} from "@/api/etl/switch";
|
||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
|
||
export default {
|
||
|
||
|
||
|
||
|
||
dicts: ['yes_no', 'sys_normal_disable'],
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
components: {
|
||
|
||
},
|
||
props: {},
|
||
data() {
|
||
|
||
//这里存放数据"
|
||
|
||
return {
|
||
sourceAddReq:{
|
||
|
||
},
|
||
rules: {
|
||
dataResourceName: [{required: true, message: "接入源名称不能为空", trigger: "blur"}],
|
||
dataSourcesSystemName: [{required: true, message: "数据来源系统名称不能为空", trigger: "blur"}],
|
||
host: [{required: true, message: "主机地址不能为空", trigger: "blur"}]
|
||
},
|
||
ids:[],
|
||
dialogFormVisible:false,
|
||
SourceReq:{
|
||
|
||
},
|
||
|
||
source:[],
|
||
};
|
||
},
|
||
//计算属性 类似于data概念",
|
||
computed: {},
|
||
//监控data中的数据变化",
|
||
watch: {},
|
||
//方法集合",
|
||
methods: {
|
||
reset() {
|
||
this.sourceAddReq = {
|
||
};
|
||
this.resetForm("sourceAddReq");
|
||
},
|
||
//修改
|
||
update(row){
|
||
this.reset();
|
||
getInfo(row.id).then(res=>{
|
||
this.sourceAddReq=res.data;
|
||
this.dialogFormVisible=true;
|
||
this.title="修改岗位"
|
||
})
|
||
},
|
||
struceure(row){
|
||
structure(row).then(res=>{
|
||
if (res.code ===200){
|
||
alert("同步资产成功,请查询数据库")
|
||
}
|
||
})
|
||
},
|
||
deleteSourceByIds(){
|
||
deleteSource(this.ids).then(res=>{
|
||
if(res.code===200){
|
||
alert("删除成功");
|
||
}
|
||
})
|
||
},
|
||
|
||
handleDelete(row){
|
||
deleteSource(row.id).then(res=>{
|
||
if (res.code===200){
|
||
location.reload();
|
||
}
|
||
})
|
||
},
|
||
textP(){
|
||
connectionTest(this.sourceAddReq).then(res=>{
|
||
if (res.code===200){
|
||
alert("测试连接成功")
|
||
}else{
|
||
alert("连接失败")
|
||
}
|
||
})
|
||
},
|
||
addSource: function (){
|
||
this.$refs["sourceAddReq"].validate(valid=> {
|
||
if (valid){
|
||
if (this.sourceAddReq.id!=undefined){
|
||
update(this.sourceAddReq).then(res=>{
|
||
if (res.code===200){
|
||
alert("修改成功")
|
||
location.reload();
|
||
}
|
||
})
|
||
}else {
|
||
insertAdd(this.sourceAddReq).then(res=>{
|
||
if(res.code===200){
|
||
alert("添加成功")
|
||
location.reload();
|
||
}
|
||
})
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
//测试连接
|
||
textConnect(row){
|
||
connectionTest(row).then(res=>{
|
||
if (res.code===200){
|
||
alert("测试连接成功");
|
||
}else {
|
||
alert("测试连接失败");
|
||
}
|
||
})
|
||
},
|
||
|
||
//新增
|
||
insertAdd(){
|
||
this.reset();
|
||
this.dialogFormVisible=true
|
||
},
|
||
findSelectSourceList(){
|
||
selectSourceList(this.SourceReq).then(res=>{
|
||
this.source=res.data.rows;
|
||
})
|
||
},
|
||
findSelectSourceExport(){
|
||
this.download('source/source/export', {
|
||
...this.SourceReq
|
||
}, `source_${new Date().getTime()}.xlsx`)
|
||
},
|
||
handleSelectionChange(row){
|
||
this.ids=[];
|
||
for (let rowKey in row) {
|
||
this.ids.push(row[rowKey].id)
|
||
}
|
||
},
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
this.findSelectSourceList();
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|