11<template >
2- <el-drawer
2+ <div class =" layout" >
3+ <el-row class =" header" >
4+ <div class =" title" >
5+ <el-button text :icon =" ArrowLeft" @click =" back()" />
6+ {{ props.dsName }}
7+ </div >
8+ <el-button type =" primary" @click =" save()" >
9+ Save
10+ </el-button >
11+ </el-row >
12+ <el-row class =" data" >
13+ <el-table-v2
14+ :columns =" tableColumns"
15+ :data =" tableData"
16+ :width =" 1000"
17+ :height =" 800"
18+ fixed
19+ />
20+ </el-row >
21+ <el-drawer
322 v-model =" drawer"
423 direction =" btt"
524 :destroy-on-close =" true"
1130 </template >
1231 <template #default >
1332 <el-row :gutter =" 20" >
14- <el-col :span =" 12" >
15- <el-table-v2
16- :columns =" tableColumns"
17- :data =" tableData"
18- :width =" 700"
19- :height =" 400"
20- fixed
21- />
22- </el-col >
23- <el-col :span =" 12" >
24- <el-table-v2
25- :columns =" fieldColumns"
26- :data =" fieldData"
27- :width =" 700"
28- :height =" 400"
29- fixed
30- />
31- </el-col >
33+ <el-table-v2
34+ :columns =" fieldColumns"
35+ :data =" fieldData"
36+ :width =" 1000"
37+ :height =" 800"
38+ fixed
39+ />
3240 </el-row >
3341 </template >
3442 <template #footer >
3543 <div style =" flex : auto " >
36- <el-button @click =" cancelClick" >cancel </el-button >
37- <el-button type =" primary" @click =" confirmClick" >confirm </el-button >
44+ <el-button @click =" cancelClick" >Cancel </el-button >
45+ <el-button type =" primary" @click =" confirmClick" >Confirm </el-button >
3846 </div >
3947 </template >
4048 </el-drawer >
49+ </div >
4150</template >
4251
4352<script lang="tsx" setup>
4453import { ref } from ' vue'
4554import { datasourceApi } from ' @/api/datasource'
4655import { ElButton } from ' element-plus'
4756import { h } from ' vue'
57+ import { onMounted } from ' vue'
58+ import { ArrowLeft } from ' @element-plus/icons-vue'
59+
60+ const props = defineProps ({
61+ dsId: { type: [Number ], required: true },
62+ dsName: { type: [String ], required: true }
63+ })
4864
4965const drawer = ref <boolean >(false )
5066const tableColumns = ref <any >([
@@ -55,9 +71,9 @@ const tableColumns = ref<any>([
5571 width: 150 ,
5672 },
5773 {
58- key:" tableRemark " ,
59- dataKey:" tableRemark " ,
60- title: ' Table Remark ' ,
74+ key:" tableComment " ,
75+ dataKey:" tableComment " ,
76+ title: ' Table Comment ' ,
6177 width: 300 ,
6278 },
6379 {
@@ -87,24 +103,25 @@ const fieldColumns = ref<any>([
87103 width: 150 ,
88104 },
89105 {
90- key:" fieldRemark " ,
91- dataKey:" fieldRemark " ,
92- title: ' Field Remark ' ,
106+ key:" fieldComment " ,
107+ dataKey:" fieldComment " ,
108+ title: ' Field Comment ' ,
93109 width: 300 ,
94110 }
95111])
96112const fieldData = ref <any >([])
97113const dsId = ref <Number >(0 )
98114
99- const open = (id : Number ) => {
100- drawer . value = true
101- dsId . value = id
102- datasourceApi . getTables ( id ). then (( res ) => {
103- tableData . value = res
104- })
115+ const back = () => {
116+ history . back ()
117+ }
118+
119+ const save = () => {
120+
105121}
106122
107123const showFields = (tableName : string ) => {
124+ drawer .value = true
108125 datasourceApi .getFields (dsId .value , tableName ).then ((res ) => {
109126 fieldData .value = res
110127 })
@@ -119,9 +136,27 @@ const confirmClick = () => {
119136 cancelClick ()
120137}
121138
139+ onMounted (() => {
140+ dsId .value = props .dsId
141+ datasourceApi .getTables (props .dsId ).then ((res ) => {
142+ tableData .value = res
143+ })
144+ })
145+
122146defineExpose ({ open })
123147 </script >
124148
125149<style lang="less" scoped>
126-
150+ .layout {
151+ padding : 20px 40px ;
152+ .header {
153+ padding : 20px 0 ;
154+ display : flex ;
155+ justify-content : space-between ;
156+ }
157+ .title {
158+ display : flex ;
159+ align-items : center ;
160+ }
161+ }
127162 </style >
0 commit comments