root
/
B2-front
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

密码框

Browse Source
master
jwg 3 weeks ago
parent 1b9f16fd68
commit 22c5df5a5a
1 changed files with 471 additions and 216 deletions
Show Stats Download Patch File Download Diff File

687
src/views/DataSource/view/SqlServer.vue
Unescape Escape View File

@ -1,76 +1,121 @@
<template> <template>
<!-- Excel类型数据源 --> <!-- Excel类型数据源 -->
<div class="datalink_mysql"> <div class="datalink_mysql">
<div class="head"><span>{{dataLinkInfo.name}}(<em>类型：SqlServer</em>)</span></div> <div class="head">
<div class="title"> <span>{{ dataLinkInfo.name }}(<em>类型：SqlServer</em>)</span>
<span>基本信息</span><em></em> </div>
</div> <div class="title"><span>基本信息</span><em></em></div>
<div class="base_info"> <div class="base_info">
<ul> <ul>
<li> <li>
<div class="label">数据源名称：</div> <div class="label">数据源名称：</div>
<el-input class="inp_1" v-model="dataLinkInfo.name" @blur="editDataLink" placeholder="请输入数据源名称"></el-input> <el-input
</li> class="inp_1"
<li> v-model="dataLinkInfo.name"
<div class="label">服务器：</div> @blur="editDataLink"
<el-input class="inp_1" v-model="dataLinkInfo.host" @blur="editDataLink" placeholder=""></el-input> placeholder="请输入数据源名称"
</li> ></el-input>
<li> </li>
<div class="label">端口：</div> <li>
<el-input class="inp_1" v-model="dataLinkInfo.port" @blur="editDataLink" placeholder=""></el-input> <div class="label">服务器：</div>
</li> <el-input
<li> class="inp_1"
<div class="label">数据库：</div> v-model="dataLinkInfo.host"
<el-input class="inp_1" v-model="dataLinkInfo.default_database" @blur="editDataLink" placeholder=""></el-input> @blur="editDataLink"
</li> placeholder=""
<li> ></el-input>
<div class="label">用户名：</div> </li>
<el-input class="inp_1" v-model="dataLinkInfo.username" @blur="editDataLink" placeholder=""></el-input> <li>
</li> <div class="label">端口：</div>
<li> <el-input
<div class="label">密码：</div> class="inp_1"
<el-input class="inp_1" v-model="dataLinkInfo.password" @blur="editDataLink" placeholder=""></el-input> v-model="dataLinkInfo.port"
</li> @blur="editDataLink"
<li> placeholder=""
<div class="label"></div> ></el-input>
</li>
<li>
<div class="label">数据库：</div>
<el-input
class="inp_1"
v-model="dataLinkInfo.default_database"
@blur="editDataLink"
placeholder=""
></el-input>
</li>
<li>
<div class="label">用户名：</div>
<el-input
class="inp_1"
v-model="dataLinkInfo.username"
@blur="editDataLink"
placeholder=""
></el-input>
</li>
<li>
<div class="label">密码：</div>
<el-input
class="inp_1"
type="password"
show-password
v-model="dataLinkInfo.password"
@blur="editDataLink"
placeholder=""
></el-input>
</li>
<li>
<div class="label"></div>
<el-button size="small" type="primary" @click="testLink">{{testLinkText}}</el-button> <el-button size="small" type="primary" @click="testLink">{{
</li> testLinkText
</ul> }}</el-button>
</div> </li>
<div class="title"> </ul>
<span>表信息</span><em></em> </div>
</div> <div class="title"><span>表信息</span><em></em></div>
<div class="table_search"> <div class="table_search">
<div class="label">筛选：</div> <div class="label">筛选：</div>
<el-input class="inp_1" prefix-icon="el-icon-search" v-model="input" placeholder="输入关键字筛选"></el-input> <el-input
</div> class="inp_1"
<el-table prefix-icon="el-icon-search"
:data="tableData.filter(data => !input || data.table_text.toLowerCase().includes(input.toLowerCase()))" v-model="input"
class="table_list" placeholder="输入关键字筛选"
highlight-current-row="true" ></el-input>
:empty-text="emptyext" </div>
border <el-table
style="width: 100%"> :data="
<el-table-column tableData.filter(
prop="table_text" (data) =>
label="表名称" !input ||
align="center" data.table_text.toLowerCase().includes(input.toLowerCase())
> )
</el-table-column> "
<el-table-column class="table_list"
prop="action" highlight-current-row="true"
label="操作" :empty-text="emptyext"
align="center" border
> style="width: 100%"
<template #default="scope"> >
<el-button @click="ShowData(scope.row.table_name,scope.row.table_text)" type="text" size="small">数据预览</el-button> <el-table-column prop="table_text" label="表名称" align="center">
</template> </el-table-column>
</el-table-column> <el-table-column prop="action" label="操作" align="center">
</el-table> <template #default="scope">
</div> <el-button
<!-- 数据预览 --> @click="ShowData(scope.row.table_name, scope.row.table_text)"
<show-data ref="ShowData1" :tableName="showTableName" :tableText="showTableText" /> type="text"
size="small"
>数据预览</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<!-- 数据预览 -->
<show-data
ref="ShowData1"
:tableName="showTableName"
:tableText="showTableText"
/>
</template> </template>
<script> <script>
@ -85,173 +130,383 @@ export default {
components: { components: {
ShowData ShowData
}, },
data(){ data() {
return { return {
name:"", name: '',
dataLinkInfo:{},//数据连接基本信息 dataLinkInfo: {}, //数据连接基本信息
input:"", input: '',
testLinkText:"测试数据连接",//测试连接文字 testLinkText: '测试数据连接', //测试连接文字
testLineOK:true,//测试连接开关按钮 testLineOK: true, //测试连接开关按钮
emptyext:"暂无数据", emptyext: '暂无数据',
tableData: [],//数据源下所有的表 tableData: [], //数据源下所有的表
showTableName:"",//需要预览的表的表名 showTableName: '', //需要预览的表的表名
showTableText:"",//需要预览的表的表名 showTableText: '' //需要预览的表的表名
} }
}, },
mounted(){ mounted() {
//加载数据连接基本信息 //加载数据连接基本信息
this.getDataLinkInfo(); this.getDataLinkInfo()
this.getTables(); this.getTables()
}, },
methods: { methods: {
//数据预览 //数据预览
ShowData(tableName,tableText){ ShowData(tableName, tableText) {
if(!tableName){ if (!tableName) {
return false; return false
} }
this.showTableName=tableName; this.showTableName = tableName
this.showTableText=tableText; this.showTableText = tableText
this.$refs['ShowData1'].onOpen(); this.$refs['ShowData1'].onOpen()
}, },
//加载数据连接基本信息 //加载数据连接基本信息
async getDataLinkInfo(){ async getDataLinkInfo() {
// alert(12) // alert(12)
var dataLinkId=this.$route.query.dataLinkId; var dataLinkId = this.$route.query.dataLinkId
const res =await axios({url:'dataLink/getDataLink',params:{data_link_id:dataLinkId}, method: 'get'}); const res = await axios({
// console.log("res",res); url: 'dataLink/getDataLink',
//成功 params: { data_link_id: dataLinkId },
if(res.code==1){ method: 'get'
this.dataLinkInfo=res.data; })
}else{ // console.log("res",res);
// ElMessage(res.message); //成功
this.$message({ type: 'error', message:res.message}); if (res.code == 1) {
} this.dataLinkInfo = res.data
}, } else {
//测试数据连接 // ElMessage(res.message);
async testLink(){ this.$message({ type: 'error', message: res.message })
if(!this.testLineOK){ }
ElMessage("正在测试中...请等待测试结果！"); },
return false; //测试数据连接
} async testLink() {
this.testLineOK=false; if (!this.testLineOK) {
this.testLinkText="连接中....."; ElMessage('正在测试中...请等待测试结果！')
var dataLinkId=this.$route.query.dataLinkId; return false
const res =await axios({url:'dataLink/testLink',params:{data_link_id:dataLinkId}, method: 'get'}); }
//成功 this.testLineOK = false
if(res.code==1){ this.testLinkText = '连接中.....'
if(res.data){ var dataLinkId = this.$route.query.dataLinkId
// ElMessage("测试连接成功！"); const res = await axios({
this.$message({ type: 'success', message:"测试连接成功！"}); url: 'dataLink/testLink',
this.getTables();//测试成功，重载表信息 params: { data_link_id: dataLinkId },
}else{ method: 'get'
// ElMessage("测试连接失败！"); })
this.$message({ type: 'error', message:"测试连接失败！"}); //成功
} if (res.code == 1) {
}else{ if (res.data) {
// ElMessage(res.message); // ElMessage("测试连接成功！");
this.$message({ type: 'error', message:res.message}); this.$message({ type: 'success', message: '测试连接成功！' })
// this.emptyext=res.message; this.getTables() //测试成功，重载表信息
} } else {
//无论成功与否，都还原为之前的状态 // ElMessage("测试连接失败！");
this.testLineOK=true; this.$message({ type: 'error', message: '测试连接失败！' })
this.testLinkText="测试数据连接"; }
}, } else {
//加载表信息 // ElMessage(res.message);
async getTables(){ this.$message({ type: 'error', message: res.message })
var dataLinkId=this.$route.query.dataLinkId; // this.emptyext=res.message;
const res =await axios({url:'dataLink/getTables',params:{data_link_id:dataLinkId}, method: 'get'}); }
//当请求的数据源连接id不一致时，说明已经切换数据源，需要拦截之前已经请求过的数据链id，不做任何处理 //无论成功与否，都还原为之前的状态
if(dataLinkId != this.$route.query.dataLinkId){ this.testLineOK = true
return false; this.testLinkText = '测试数据连接'
} },
//成功 //加载表信息
if(res.code==1){ async getTables() {
this.tableData=res.data; var dataLinkId = this.$route.query.dataLinkId
}else{ const res = await axios({
// ElMessage(res.message); url: 'dataLink/getTables',
this.tableData=[]; params: { data_link_id: dataLinkId },
// this.emptyext=res.message; method: 'get'
} })
}, //当请求的数据源连接id不一致时，说明已经切换数据源，需要拦截之前已经请求过的数据链id，不做任何处理
async editDataLink(){ if (dataLinkId != this.$route.query.dataLinkId) {
const res =await axios({url:'dataLink/editDataLink',data:this.dataLinkInfo, method: 'post'}); return false
// console.log("res",res);
//成功
if(res.code!=1){
// this.dataLinkInfo=res.data;
// ElMessage(res.message);
this.$message({ type: 'error', message:res.message});
}
this.$emit("getGroupList");
} }
//成功
if (res.code == 1) {
this.tableData = res.data
} else {
// ElMessage(res.message);
this.tableData = []
// this.emptyext=res.message;
}
},
async editDataLink() {
const res = await axios({
url: 'dataLink/editDataLink',
data: this.dataLinkInfo,
method: 'post'
})
// console.log("res",res);
//成功
if (res.code != 1) {
// this.dataLinkInfo=res.data;
// ElMessage(res.message);
this.$message({ type: 'error', message: res.message })
}
this.$emit('getGroupList')
}
}, },
watch: { watch: {
'$route' (to, from) { $route(to, from) {
//加载数据连接基本信息 //加载数据连接基本信息
// this.getDataLinkInfo(); // this.getDataLinkInfo();
//加载数据连接基本信息 //加载数据连接基本信息
if(to.path=="/dataSource/sqlserver"){ if (to.path == '/dataSource/sqlserver') {
this.tableData=[]; this.tableData = []
this.getDataLinkInfo(); this.getDataLinkInfo()
this.getTables(); this.getTables()
} }
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
//excel数据源 //excel数据源
.datalink_mysql{ width: 100%; overflow: hidden;} .datalink_mysql {
.datalink_mysql .head{ width:100%; border-bottom: #101419 1px solid; height: 42px; overflow: hidden; padding: 0 0 14px 0;} width: 100%;
.datalink_mysql .head span{ display: block; height: 24px; border-left: #2681ff 2px solid; margin: 9px 0 0 2px; padding: 0 0 0 15px; font-size: 16px; color: #ddd;} overflow: hidden;
.datalink_mysql .head span em{ color: #2681ff;} }
.datalink_mysql .title{ width: 100%; height: 32px; background: #2c2f40; margin: 30px 0 0 0; overflow: hidden;} .datalink_mysql .head {
.datalink_mysql .title span{ width: 104px; height: 32px; float: left; line-height: 32px; text-indent: 20px; color: #fff; background: #2681ff; font-size: 14px;} width: 100%;
.datalink_mysql .title em{ float: left;width:0; height:0;border-top:16px solid transparent;border-bottom: 16px solid transparent;border-left: 16px solid #2681ff;} border-bottom: #101419 1px solid;
.datalink_mysql .base_info{ width: 100%;} height: 42px;
.datalink_mysql .base_info ul{margin: 20px 0 0 20px; overflow: hidden; padding: 0 0 20px 0;} overflow: hidden;
.datalink_mysql .base_info ul li{ overflow: hidden; height: 36px; margin: 20px 0 0 0;} padding: 0 0 14px 0;
.datalink_mysql .base_info ul li .label{ float: left; width: 112px; height: 34px; line-height: 34px; text-align: right; color: #666666; font-size: 14px; font-weight: 700; margin: 0 5px 0 0;} }
.datalink_mysql .head span {
display: block;
height: 24px;
border-left: #2681ff 2px solid;
margin: 9px 0 0 2px;
padding: 0 0 0 15px;
font-size: 16px;
color: #ddd;
}
.datalink_mysql .head span em {
color: #2681ff;
}
.datalink_mysql .title {
width: 100%;
height: 32px;
background: #2c2f40;
margin: 30px 0 0 0;
overflow: hidden;
}
.datalink_mysql .title span {
width: 104px;
height: 32px;
float: left;
line-height: 32px;
text-indent: 20px;
color: #fff;
background: #2681ff;
font-size: 14px;
}
.datalink_mysql .title em {
float: left;
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 16px solid #2681ff;
}
.datalink_mysql .base_info {
width: 100%;
}
.datalink_mysql .base_info ul {
margin: 20px 0 0 20px;
overflow: hidden;
padding: 0 0 20px 0;
}
.datalink_mysql .base_info ul li {
overflow: hidden;
height: 36px;
margin: 20px 0 0 0;
}
.datalink_mysql .base_info ul li .label {
float: left;
width: 112px;
height: 34px;
line-height: 34px;
text-align: right;
color: #666666;
font-size: 14px;
font-weight: 700;
margin: 0 5px 0 0;
}
//element-ui 输入框 //element-ui 输入框
.datalink_mysql .base_info .inp_1.el-input{ float: left; width: 435px;} .datalink_mysql .base_info .inp_1.el-input {
.datalink_mysql .base_info .inp_1.el-input .el-input__inner{ float: left; width: 425px; height: 32px; margin: 0px 0 0 0; background-color: #0f1217; border-radius: 0; border: #3c465a 1px solid; padding: 0 0 0 14px; font-size: 14px;color: #ddd; } float: left;
.datalink_mysql .base_info .inp_1.el-input .el-input__inner::placeholder{ color: #333;} width: 435px;
.datalink_mysql .base_info .inp_1.el-input .el-input__inner:focus{ border: #2681ff 1px solid;} }
.datalink_mysql .base_info .inp_1.el-input .el-input__inner {
float: left;
width: 425px;
height: 32px;
margin: 0px 0 0 0;
background-color: #0f1217;
border-radius: 0;
border: #3c465a 1px solid;
padding: 0 0 0 14px;
font-size: 14px;
color: #ddd;
}
.datalink_mysql .base_info .inp_1.el-input .el-input__inner::placeholder {
color: #333;
}
.datalink_mysql .base_info .inp_1.el-input .el-input__inner:focus {
border: #2681ff 1px solid;
}
.datalink_mysql .base_info ul li .file{ float: left; height: 34px; line-height: 34px; color: #666666; font-size: 14px;} .datalink_mysql .base_info ul li .file {
.datalink_mysql .base_info ul li .moban{ float: left; height: 34px; line-height: 34px; color: #666666; font-size: 14px;} float: left;
.datalink_mysql .base_info ul li .moban a{ color: #1856ad; text-decoration: underline; margin: 0 0 0 15px;} height: 34px;
.datalink_mysql .base_info ul li .moban a:hover{ color: #2270dd;} line-height: 34px;
color: #666666;
font-size: 14px;
}
.datalink_mysql .base_info ul li .moban {
float: left;
height: 34px;
line-height: 34px;
color: #666666;
font-size: 14px;
}
.datalink_mysql .base_info ul li .moban a {
color: #1856ad;
text-decoration: underline;
margin: 0 0 0 15px;
}
.datalink_mysql .base_info ul li .moban a:hover {
color: #2270dd;
}
//element-ui 文件上传 按钮 //element-ui 文件上传 按钮
// .datalink_mysql .base_info ul li{ float: left;} // .datalink_mysql .base_info ul li{ float: left;}
.datalink_mysql .base_info ul li .el-button{ border: #2681ff 1px solid; color:#2681ff ; border-radius: 0; background: none; padding: 0; width: 423px; height: 32px;} .datalink_mysql .base_info ul li .el-button {
.datalink_mysql .base_info ul li .el-button:hover{ border: #4794ff 1px solid; color: #4794ff;} border: #2681ff 1px solid;
.datalink_mysql .base_info ul li .el-button:active{ border: #145dc2 1px solid; color: #145dc2;} color: #2681ff;
border-radius: 0;
background: none;
padding: 0;
width: 423px;
height: 32px;
}
.datalink_mysql .base_info ul li .el-button:hover {
border: #4794ff 1px solid;
color: #4794ff;
}
.datalink_mysql .base_info ul li .el-button:active {
border: #145dc2 1px solid;
color: #145dc2;
}
.table_search{ width: 100%; overflow: hidden; height: 38px; margin: 25px 0 0 0;} .table_search {
.table_search .label{ float: left; width: 50px; height: 34px; line-height: 34px; text-align: right; color: #666666; font-size: 14px; margin: 0 0 0 15px; font-weight: 700; margin: 0 5px 0 0;} width: 100%;
overflow: hidden;
height: 38px;
margin: 25px 0 0 0;
}
.table_search .label {
float: left;
width: 50px;
height: 34px;
line-height: 34px;
text-align: right;
color: #666666;
font-size: 14px;
margin: 0 0 0 15px;
font-weight: 700;
margin: 0 5px 0 0;
}
//element-ui 输入框 //element-ui 输入框
.table_search .inp_1.el-input{ float: left; width: 435px;} .table_search .inp_1.el-input {
.table_search .inp_1.el-input .el-input__inner{ float: left; width: 248px; height: 32px; margin: 0px 0 0 0; background-color: #0f1217; border-radius: 0; border: #3c465a 1px solid; padding: 0 0 0 28px; font-size: 14px;color: #ddd; } float: left;
.table_search .inp_1.el-input .el-input__inner::placeholder{ color: #333;} width: 435px;
.table_search .inp_1.el-input .el-icon-search{ font-size: 14px; color: #666; line-height: 30px;} }
.table_search .inp_1.el-input .el-input__inner {
float: left;
width: 248px;
height: 32px;
margin: 0px 0 0 0;
background-color: #0f1217;
border-radius: 0;
border: #3c465a 1px solid;
padding: 0 0 0 28px;
font-size: 14px;
color: #ddd;
}
.table_search .inp_1.el-input .el-input__inner::placeholder {
color: #333;
}
.table_search .inp_1.el-input .el-icon-search {
font-size: 14px;
color: #666;
line-height: 30px;
}
//element-ui 表格 //element-ui 表格
.table_list{ background: none; border: 1px solid #27343e; margin: 15px 0 0 0;} .table_list {
.table_list tr{ background: none;} background: none;
.table_list tr th{ background: none;border-right: 1px solid #27343e; border-bottom: 1px solid #27343e; padding: 6px 0; color: #aaaaaa; font-size: 14px;} border: 1px solid #27343e;
.table_list tr td{ background: none;border-right: 1px solid #27343e; border-bottom: 1px solid #27343e; padding: 2px 0; color: #ccc; font-size: 12px;} margin: 15px 0 0 0;
.table_list.el-table td, .table_list.el-table th.is-leaf{border-bottom: 1px solid #27343e;} }
.table_list.el-table--border::after, .table_list.el-table--group::after, .table_list.el-table::before{background:none;} .table_list tr {
.table_list .el-table__body tr.current-row>td{ background-color: #23272d;} background: none;
.table_list .el-table__body tr:hover>td{ background-color: #23272d;} }
.table_list tr th {
background: none;
border-right: 1px solid #27343e;
border-bottom: 1px solid #27343e;
padding: 6px 0;
color: #aaaaaa;
font-size: 14px;
}
.table_list tr td {
background: none;
border-right: 1px solid #27343e;
border-bottom: 1px solid #27343e;
padding: 2px 0;
color: #ccc;
font-size: 12px;
}
.table_list.el-table td,
.table_list.el-table th.is-leaf {
border-bottom: 1px solid #27343e;
}
.table_list.el-table--border::after,
.table_list.el-table--group::after,
.table_list.el-table::before {
background: none;
}
.table_list .el-table__body tr.current-row > td {
background-color: #23272d;
}
.table_list .el-table__body tr:hover > td {
background-color: #23272d;
}
//element-ui 表格--按钮 //element-ui 表格--按钮
.table_list .el-button{ /*border: #2681ff 1px solid;*/border:none; color:#2681ff ; border-radius: 0; background: none; padding: 0; width: 60px; height: 22px; margin: 5px 0; font-size: 12px;} .table_list .el-button {
.table_list .el-button:hover{ /*border: #4794ff 1px solid;*/border:none; color: #4794ff;} /*border: #2681ff 1px solid;*/
.table_list .el-button:active{ /*border: #145dc2 1px solid;*/border:none; color: #145dc2;} border: none;
color: #2681ff;
border-radius: 0;
background: none;
padding: 0;
width: 60px;
height: 22px;
margin: 5px 0;
font-size: 12px;
}
.table_list .el-button:hover {
/*border: #4794ff 1px solid;*/
border: none;
color: #4794ff;
}
.table_list .el-button:active {
/*border: #145dc2 1px solid;*/
border: none;
color: #145dc2;
}
</style> </style>

Write Preview
Loading…
Cancel
Save