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

密码框

Browse Source
master
jwg 1 month 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>
<!-- Excel类型数据源 -->
<div class="datalink_mysql">
<div class="head"><span>{{dataLinkInfo.name}}(<em>类型：SqlServer</em>)</span></div>
<div class="title">
<span>基本信息</span><em></em>
</div>
<div class="base_info">
<ul>
<li>
<div class="label">数据源名称：</div>
<el-input class="inp_1" v-model="dataLinkInfo.name" @blur="editDataLink" placeholder="请输入数据源名称"></el-input>
</li>
<li>
<div class="label">服务器：</div>
<el-input class="inp_1" v-model="dataLinkInfo.host" @blur="editDataLink" placeholder=""></el-input>
</li>
<li>
<div class="label">端口：</div>
<el-input class="inp_1" v-model="dataLinkInfo.port" @blur="editDataLink" placeholder=""></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" v-model="dataLinkInfo.password" @blur="editDataLink" placeholder=""></el-input>
</li>
<li>
<div class="label"></div>
<div class="datalink_mysql">
<div class="head">
<span>{{ dataLinkInfo.name }}(<em>类型：SqlServer</em>)</span>
</div>
<div class="title"><span>基本信息</span><em></em></div>
<div class="base_info">
<ul>
<li>
<div class="label">数据源名称：</div>
<el-input
class="inp_1"
v-model="dataLinkInfo.name"
@blur="editDataLink"
placeholder="请输入数据源名称"
></el-input>
</li>
<li>
<div class="label">服务器：</div>
<el-input
class="inp_1"
v-model="dataLinkInfo.host"
@blur="editDataLink"
placeholder=""
></el-input>
</li>
<li>
<div class="label">端口：</div>
<el-input
class="inp_1"
v-model="dataLinkInfo.port"
@blur="editDataLink"
placeholder=""
></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>
</li>
</ul>
</div>
<div class="title">
<span>表信息</span><em></em>
</div>
<div class="table_search">
<div class="label">筛选：</div>
<el-input class="inp_1" prefix-icon="el-icon-search" v-model="input" placeholder="输入关键字筛选"></el-input>
</div>
<el-table
:data="tableData.filter(data => !input || data.table_text.toLowerCase().includes(input.toLowerCase()))"
class="table_list"
highlight-current-row="true"
:empty-text="emptyext"
border
style="width: 100%">
<el-table-column
prop="table_text"
label="表名称"
align="center"
>
</el-table-column>
<el-table-column
prop="action"
label="操作"
align="center"
>
<template #default="scope">
<el-button @click="ShowData(scope.row.table_name,scope.row.table_text)" type="text" size="small">数据预览</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 数据预览 -->
<show-data ref="ShowData1" :tableName="showTableName" :tableText="showTableText" />
<el-button size="small" type="primary" @click="testLink">{{
testLinkText
}}</el-button>
</li>
</ul>
</div>
<div class="title"><span>表信息</span><em></em></div>
<div class="table_search">
<div class="label">筛选：</div>
<el-input
class="inp_1"
prefix-icon="el-icon-search"
v-model="input"
placeholder="输入关键字筛选"
></el-input>
</div>
<el-table
:data="
tableData.filter(
(data) =>
!input ||
data.table_text.toLowerCase().includes(input.toLowerCase())
)
"
class="table_list"
highlight-current-row="true"
:empty-text="emptyext"
border
style="width: 100%"
>
<el-table-column prop="table_text" label="表名称" align="center">
</el-table-column>
<el-table-column prop="action" label="操作" align="center">
<template #default="scope">
<el-button
@click="ShowData(scope.row.table_name, scope.row.table_text)"
type="text"
size="small"
>数据预览</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<!-- 数据预览 -->
<show-data
ref="ShowData1"
:tableName="showTableName"
:tableText="showTableText"
/>
</template>
<script>
@ -85,173 +130,383 @@ export default {
components: {
ShowData
},
data(){
data() {
return {
name:"",
dataLinkInfo:{},//数据连接基本信息
input:"",
testLinkText:"测试数据连接",//测试连接文字
testLineOK:true,//测试连接开关按钮
emptyext:"暂无数据",
tableData: [],//数据源下所有的表
showTableName:"",//需要预览的表的表名
showTableText:"",//需要预览的表的表名
name: '',
dataLinkInfo: {}, //数据连接基本信息
input: '',
testLinkText: '测试数据连接', //测试连接文字
testLineOK: true, //测试连接开关按钮
emptyext: '暂无数据',
tableData: [], //数据源下所有的表
showTableName: '', //需要预览的表的表名
showTableText: '' //需要预览的表的表名
}
},
mounted(){
mounted() {
//加载数据连接基本信息
this.getDataLinkInfo();
this.getTables();
this.getDataLinkInfo()
this.getTables()
},
methods: {
//数据预览
ShowData(tableName,tableText){
if(!tableName){
return false;
}
this.showTableName=tableName;
this.showTableText=tableText;
this.$refs['ShowData1'].onOpen();
},
//加载数据连接基本信息
async getDataLinkInfo(){
// alert(12)
var dataLinkId=this.$route.query.dataLinkId;
const res =await axios({url:'dataLink/getDataLink',params:{data_link_id:dataLinkId}, method: 'get'});
// console.log("res",res);
//成功
if(res.code==1){
this.dataLinkInfo=res.data;
}else{
// ElMessage(res.message);
this.$message({ type: 'error', message:res.message});
}
},
//测试数据连接
async testLink(){
if(!this.testLineOK){
ElMessage("正在测试中...请等待测试结果！");
return false;
}
this.testLineOK=false;
this.testLinkText="连接中.....";
var dataLinkId=this.$route.query.dataLinkId;
const res =await axios({url:'dataLink/testLink',params:{data_link_id:dataLinkId}, method: 'get'});
//成功
if(res.code==1){
if(res.data){
// ElMessage("测试连接成功！");
this.$message({ type: 'success', message:"测试连接成功！"});
this.getTables();//测试成功，重载表信息
}else{
// ElMessage("测试连接失败！");
this.$message({ type: 'error', message:"测试连接失败！"});
}
}else{
// ElMessage(res.message);
this.$message({ type: 'error', message:res.message});
// this.emptyext=res.message;
}
//无论成功与否，都还原为之前的状态
this.testLineOK=true;
this.testLinkText="测试数据连接";
},
//加载表信息
async getTables(){
var dataLinkId=this.$route.query.dataLinkId;
const res =await axios({url:'dataLink/getTables',params:{data_link_id:dataLinkId}, method: 'get'});
//当请求的数据源连接id不一致时，说明已经切换数据源，需要拦截之前已经请求过的数据链id，不做任何处理
if(dataLinkId != this.$route.query.dataLinkId){
return false;
}
//成功
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");
//数据预览
ShowData(tableName, tableText) {
if (!tableName) {
return false
}
this.showTableName = tableName
this.showTableText = tableText
this.$refs['ShowData1'].onOpen()
},
//加载数据连接基本信息
async getDataLinkInfo() {
// alert(12)
var dataLinkId = this.$route.query.dataLinkId
const res = await axios({
url: 'dataLink/getDataLink',
params: { data_link_id: dataLinkId },
method: 'get'
})
// console.log("res",res);
//成功
if (res.code == 1) {
this.dataLinkInfo = res.data
} else {
// ElMessage(res.message);
this.$message({ type: 'error', message: res.message })
}
},
//测试数据连接
async testLink() {
if (!this.testLineOK) {
ElMessage('正在测试中...请等待测试结果！')
return false
}
this.testLineOK = false
this.testLinkText = '连接中.....'
var dataLinkId = this.$route.query.dataLinkId
const res = await axios({
url: 'dataLink/testLink',
params: { data_link_id: dataLinkId },
method: 'get'
})
//成功
if (res.code == 1) {
if (res.data) {
// ElMessage("测试连接成功！");
this.$message({ type: 'success', message: '测试连接成功！' })
this.getTables() //测试成功，重载表信息
} else {
// ElMessage("测试连接失败！");
this.$message({ type: 'error', message: '测试连接失败！' })
}
} else {
// ElMessage(res.message);
this.$message({ type: 'error', message: res.message })
// this.emptyext=res.message;
}
//无论成功与否，都还原为之前的状态
this.testLineOK = true
this.testLinkText = '测试数据连接'
},
//加载表信息
async getTables() {
var dataLinkId = this.$route.query.dataLinkId
const res = await axios({
url: 'dataLink/getTables',
params: { data_link_id: dataLinkId },
method: 'get'
})
//当请求的数据源连接id不一致时，说明已经切换数据源，需要拦截之前已经请求过的数据链id，不做任何处理
if (dataLinkId != this.$route.query.dataLinkId) {
return false
}
//成功
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: {
'$route' (to, from) {
//加载数据连接基本信息
// this.getDataLinkInfo();
watch: {
$route(to, from) {
//加载数据连接基本信息
if(to.path=="/dataSource/sqlserver"){
this.tableData=[];
this.getDataLinkInfo();
this.getTables();
}
}
}
// this.getDataLinkInfo();
//加载数据连接基本信息
if (to.path == '/dataSource/sqlserver') {
this.tableData = []
this.getDataLinkInfo()
this.getTables()
}
}
}
}
</script>
<style lang="scss">
<style lang="scss">
//excel数据源
.datalink_mysql{ width: 100%; overflow: hidden;}
.datalink_mysql .head{ width:100%; border-bottom: #101419 1px solid; height: 42px; overflow: hidden; padding: 0 0 14px 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;}
.datalink_mysql {
width: 100%;
overflow: hidden;
}
.datalink_mysql .head {
width: 100%;
border-bottom: #101419 1px solid;
height: 42px;
overflow: hidden;
padding: 0 0 14px 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 输入框
.datalink_mysql .base_info .inp_1.el-input{ float: left; width: 435px;}
.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 .inp_1.el-input {
float: left;
width: 435px;
}
.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 .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;}
.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 .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 文件上传 按钮
// .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:hover{ border: #4794ff 1px solid; color: #4794ff;}
.datalink_mysql .base_info ul li .el-button:active{ border: #145dc2 1px solid; color: #145dc2;}
.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: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 .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;}
.table_search {
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 输入框
.table_search .inp_1.el-input{ float: left; width: 435px;}
.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;}
.table_search .inp_1.el-input {
float: left;
width: 435px;
}
.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 表格
.table_list{ background: none; border: 1px solid #27343e; margin: 15px 0 0 0;}
.table_list tr{ 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;}
.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;}
.table_list {
background: none;
border: 1px solid #27343e;
margin: 15px 0 0 0;
}
.table_list tr {
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;
}
.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 表格--按钮
.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:hover{ /*border: #4794ff 1px solid;*/border:none; color: #4794ff;}
.table_list .el-button:active{ /*border: #145dc2 1px solid;*/border:none; color: #145dc2;}
.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:hover {
/*border: #4794ff 1px solid;*/
border: none;
color: #4794ff;
}
.table_list .el-button:active {
/*border: #145dc2 1px solid;*/
border: none;
color: #145dc2;
}
</style>

Write Preview
Loading…
Cancel
Save