|
|
|
@ -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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|