数据库列表
parent
62f28a9563
commit
baaeeebe8c
|
|
@ -13,36 +13,61 @@
|
|||
v-for="(database, dbIndex) in item.databaseList"
|
||||
:key="dbIndex"
|
||||
:index="item.id + '-' + (dbIndex + 1)"
|
||||
class="custom-menu-item"
|
||||
>
|
||||
{{ database }}
|
||||
<span>{{ database}}</span>
|
||||
<el-select
|
||||
clearable
|
||||
v-model="select[dbIndex]"
|
||||
style="margin-left: 10px"
|
||||
class="custom-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tableList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
{{item}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header style="text-align: right; font-size: 12px">
|
||||
<el-dropdown>
|
||||
<i class="el-icon-setting" style="margin-right: 15px"></i>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>查看</el-dropdown-item>
|
||||
<el-dropdown-item>新增</el-dropdown-item>
|
||||
<el-dropdown-item>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<span>王小虎</span>
|
||||
</el-header>
|
||||
|
||||
<el-main>
|
||||
<el-table :data="tableData">
|
||||
<el-card style="height: 500px">
|
||||
<el-container>
|
||||
<el-header style="height: 200px">
|
||||
<h1 style=" margin-top: -2px; font-size: 50px; text-align: center; width: 100%; font-weight: 600; line-height: 100px ">{{title}}--资产结构概述</h1>
|
||||
|
||||
<el-table-column prop="date" label="日期" width="140">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row style="margin-top: -50px" justify="center">
|
||||
<el-col :span="12">
|
||||
<el-card style="width: 80%;" class="centered-card"></el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card style="width: 80%;" class="centered-card"></el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-container>
|
||||
<el-main>Main</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<textarea v-model="selectSqlResp.sql" style="height: 400px;width: 100%">
|
||||
|
||||
</textarea>
|
||||
<el-button type="primary" @click="selectSql">查询</el-button>
|
||||
</el-card>
|
||||
<el-card style="height: 100%">
|
||||
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
|
@ -74,23 +99,49 @@ export default {
|
|||
/*数据源查询条件*/
|
||||
queryParams: {},
|
||||
databaseList:[],
|
||||
tableList:[]
|
||||
tableList:[],
|
||||
select:[],
|
||||
selectSqlResp:{},
|
||||
title:''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
watch:{
|
||||
"select":{
|
||||
handler(val){
|
||||
val.forEach(item=>{
|
||||
if(item){
|
||||
this.selectSqlResp.tableName=item
|
||||
}
|
||||
})
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectSql(){
|
||||
console.log(this.selectSqlResp)
|
||||
},
|
||||
/*选中标题*/
|
||||
handSubmenuTitle(item){
|
||||
this.title=item.name
|
||||
let databaseConnect={};
|
||||
item.databaseList=[]
|
||||
databaseConnect.username=item.username;
|
||||
databaseConnect.password=item.password;
|
||||
databaseConnect.host=item.host;
|
||||
databaseConnect.type=item.type;
|
||||
selectDatabaseList(databaseConnect).then(
|
||||
res=>{
|
||||
item.databaseList=res.data
|
||||
/*所有数据库*/
|
||||
//item.databaseList=res.data
|
||||
res.data.forEach(item1=>{
|
||||
if(item1==item.databaseName){
|
||||
item.databaseList.push(item1)
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
console.log(item)
|
||||
|
|
@ -137,6 +188,7 @@ export default {
|
|||
password: item.password,
|
||||
type: item.type,
|
||||
connectionParam: item.connectionParam,
|
||||
databaseName: item.databaseName,
|
||||
databaseList:[
|
||||
|
||||
]
|
||||
|
|
@ -150,6 +202,14 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.centered-card {
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
flex-direction: column; /* 如果需要垂直堆叠内容 */
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
|
|
@ -159,4 +219,28 @@ export default {
|
|||
.el-aside {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.custom-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
margin-left: 10px; /* 根据需要调整间距 */
|
||||
}
|
||||
|
||||
.el-header, .el-footer {
|
||||
background-color: white;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
|
||||
.el-main {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue