fine:()前台代码列表添加
parent
c98f8abb8f
commit
6144a9390a
|
@ -0,0 +1,17 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function getConnectList(data) {
|
||||||
|
return request({
|
||||||
|
url: '/property/connect/selectConnect',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function insertConnectList(data) {
|
||||||
|
return request({
|
||||||
|
url: '/property/connect/add',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
|
@ -0,0 +1,308 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<el-form ref="form" :model="connectDTO" label-width="130px" :inline="true">
|
||||||
|
<el-form-item label="接入源名称:">
|
||||||
|
<el-input v-model="connectDTO.accSourName" style="width: 300px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="数据来源系统名称:">
|
||||||
|
<el-input v-model="connectDTO.dataSourSystemName" style="width: 300px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="数据接入类型:">
|
||||||
|
<el-input v-model="connectDTO.dataAccType" style="width: 300px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="selectConnectList">立即创建</el-button>
|
||||||
|
<el-button>取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-button type="primary" @click="insertConnectList" plain>添加</el-button>
|
||||||
|
<el-button type="danger" plain>删除</el-button>
|
||||||
|
<el-button type="warning" plain>导出</el-button>
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="connect"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
:style="{width: tableWidth}"
|
||||||
|
@selection-change="handleSelectionChange">
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="接入源名称">
|
||||||
|
<template slot-scope="scope">{{ scope.row.accSourName }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="数据来源系统名称">
|
||||||
|
<template slot-scope="scope">{{ scope.row.dataSourSystemName }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="ip地址">
|
||||||
|
<template slot-scope="scope">{{ scope.row.ipAddress }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="端口号地址">
|
||||||
|
<template slot-scope="scope">{{ scope.row.port }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="数据接入类型">
|
||||||
|
<template slot-scope="scope">{{ scope.row.dataAccType }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="数据库名称">
|
||||||
|
<template slot-scope="scope">{{ scope.row.databaseName }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="是否初始化">
|
||||||
|
<template slot-scope="scope">{{ scope.row.initialization }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="备注">
|
||||||
|
<template slot-scope="scope">{{ scope.row.notes }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="操作">
|
||||||
|
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
||||||
|
<el-button type="text" size="small">编辑</el-button>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Form -->
|
||||||
|
|
||||||
|
<el-dialog title="收货地址" :visible.sync="addDialogFormVisible" width="1100px">
|
||||||
|
<el-form :model="connectDTO" :inline="true" :label-width="formLabelWidth">
|
||||||
|
|
||||||
|
<el-card class="box-card">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>基本配置信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="text item" :label-width="formLabelWidth">
|
||||||
|
<el-form-item label="接入源名称">
|
||||||
|
<el-input v-model="connectDTO.accSourName" autocomplete="off" placeholder="请输入接入源名称"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="数据来源系统名称" label-width="125px">
|
||||||
|
<el-input v-model="connectDTO.dataSourSystemName" autocomplete="off" placeholder="请输入数据来源系统"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="ip地址">
|
||||||
|
<el-input v-model="connectDTO.ipAddress" autocomplete="off" placeholder="请输入IP地址"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="端口号地址">
|
||||||
|
<el-input v-model="connectDTO.port" autocomplete="off" placeholder="请输入端口号地址"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="数据接入类型" label-width="110px">
|
||||||
|
<template>
|
||||||
|
<el-select v-model="connectDTO.dataAccType" placeholder="请选择" label-width="100px">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<!-- <el-input v-model="connectDTO.name" autocomplete="off" placeholder="请输入数据接入类型"></el-input>-->
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="数据库名称">
|
||||||
|
<el-input v-model="connectDTO.databaseName" autocomplete="off" placeholder="请输入数据库名称"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="数据库用户">
|
||||||
|
<el-input v-model="connectDTO.userName" autocomplete="off" placeholder="数据库用户"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="数据库密码" label-width="125px">
|
||||||
|
<el-input v-model="connectDTO.password" autocomplete="off" placeholder="数据库密码"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-card class="box-card">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>数据连接参数</span>
|
||||||
|
</div>
|
||||||
|
<div class="text item" >
|
||||||
|
<el-form-item label="数据连接参数">
|
||||||
|
<el-input v-model="connectDTO.dataConnParam" autocomplete="off" placeholder="请输入数据连接参数" style="width: 990px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="box-card" style="margin-top: 20px;">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>连接池配置</span>
|
||||||
|
</div>
|
||||||
|
<div class="text item" >
|
||||||
|
<el-form-item label="初始连接数量">
|
||||||
|
<el-input v-model="connectDTO.initSize" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="最大连接数量">
|
||||||
|
<el-input v-model="connectDTO.maxNumConn" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="最大等待时间">
|
||||||
|
<el-input v-model="connectDTO.maxWaitTime" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="最大等待次数">
|
||||||
|
<el-input v-model="connectDTO.maxWaitTimes" autocomplete="off" placeholder="请输入数据连接参数" style="width: 350px;"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="box-card" style="margin-top: 20px;">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>其他信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="text item" >
|
||||||
|
<el-form-item label="是否初始化" :label-width="formLabelWidth">
|
||||||
|
<el-radio v-model="connectDTO.initialization" label="Y">是</el-radio>
|
||||||
|
<el-radio v-model="connectDTO.initialization" label="N">否</el-radio>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="备注" :label-width="formLabelWidth">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="2"
|
||||||
|
:cole="1000"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="connectDTO.textarea" style="width: 850px;">
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="addDialogFormVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="addsDialogFormVisible">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等),
|
||||||
|
//例如:import 《组件名称》 from '《组件路径》,
|
||||||
|
import { getConnectList, insertConnectList } from '@/api/property/property'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用"
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
//这里存放数据"
|
||||||
|
|
||||||
|
return {
|
||||||
|
connectDTO:{
|
||||||
|
maxWaitTimes: 3,
|
||||||
|
maxWaitTime: 3000,
|
||||||
|
maxNumConn: 20,
|
||||||
|
initSize: 5,
|
||||||
|
dataConnParam:'useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior'
|
||||||
|
},
|
||||||
|
connect:[],
|
||||||
|
tableWidth: '100%',
|
||||||
|
multipleSelection: [],
|
||||||
|
addDialogFormVisible: false,
|
||||||
|
formLabelWidth:'100px',
|
||||||
|
options: [{
|
||||||
|
value: 'Mysql',
|
||||||
|
label: 'Mysql'
|
||||||
|
}, {
|
||||||
|
value: 'Oracle',
|
||||||
|
label: 'Oracle'
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
//监控data中的数据变化",
|
||||||
|
watch: {},
|
||||||
|
//方法集合",
|
||||||
|
methods: {
|
||||||
|
insertConnectList(){
|
||||||
|
this.addDialogFormVisible=true
|
||||||
|
},
|
||||||
|
addsDialogFormVisible(){
|
||||||
|
insertConnectList(this.connectDTO).then(res=>{
|
||||||
|
|
||||||
|
this.addDialogFormVisible=false
|
||||||
|
this.getConnectList()
|
||||||
|
this.$message.success(res.msg)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.multipleSelection = val;
|
||||||
|
},
|
||||||
|
getConnectList(){
|
||||||
|
getConnectList(this.connectDTO).then(res=>{
|
||||||
|
console.log(res)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
selectConnectList(){
|
||||||
|
this.getConnectList();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
handleResize() {
|
||||||
|
// 根据窗口宽度更新表格宽度
|
||||||
|
this.tableWidth = window.innerWidth < 768 ? '100%' : '80%';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//生命周期 - 创建完成(可以访问当前this实例)",
|
||||||
|
created() {
|
||||||
|
this.getConnectList();
|
||||||
|
},
|
||||||
|
//生命周期 - 挂载完成(可以访问DOM元素)",
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
}, //生命周期 - 创建之前",
|
||||||
|
beforeMount() {
|
||||||
|
}, //生命周期 - 挂载之前",
|
||||||
|
beforeUpdate() {
|
||||||
|
}, //生命周期 - 更新之前",
|
||||||
|
updated() {
|
||||||
|
}, //生命周期 - 更新之后",
|
||||||
|
beforeDestroy() {
|
||||||
|
}, //生命周期 - 销毁之前",
|
||||||
|
destroyed() {
|
||||||
|
}, //生命周期 - 销毁完成",
|
||||||
|
activated() {
|
||||||
|
} //如果页面有keep-alive缓存功能,这个函数会触发",
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
Loading…
Reference in New Issue