fine:()前台代码列表添加
Yueng
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