feat: datasource UI

Author: XiaJunjie2020

frontend/src/style.less

@@ -55,18 +55,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
 .card {
   padding: 2em;
 }

frontend/src/views/ds/TableList.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-drawer 
+    v-model="drawer" 
+    direction="btt" 
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    size="80%"
+  >
+    <template #header>
+      <div>Detail</div>
+    </template>
+    <template #default>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-table-v2
+            :columns="tableColumns"
+            :data="tableData"
+            :width="700"
+            :height="400"
+            fixed
+          />
+        </el-col>
+        <el-col :span="12">
+          <el-table-v2
+            :columns="fieldColumns"
+            :data="fieldData"
+            :width="700"
+            :height="400"
+            fixed
+          />
+        </el-col>
+      </el-row>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="cancelClick">cancel</el-button>
+        <el-button type="primary" @click="confirmClick">confirm</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="tsx" setup>
+import { ref } from 'vue'
+import { datasourceApi } from '@/api/datasource'
+import { ElButton } from 'element-plus'
+import { h } from 'vue'
+
+const drawer = ref<boolean>(false)
+const tableColumns = ref<any>([
+  {
+    key:"tableName",
+    dataKey:"tableName",
+    title: 'Table Name',
+    width: 150,
+  },
+  {
+    key:"tableRemark",
+    dataKey:"tableRemark",
+    title: 'Table Remark',
+    width: 300,
+  },
+  {
+    key: 'operations',
+    title: 'Operations',
+    cellRenderer: ({ rowData }) => {
+      return h(ElButton,{
+        onClick: () => showFields(rowData.tableName)
+      },"Show Fields")
+    },
+    width: 150,
+    align: 'center',
+  }
+])
+const tableData = ref<any>([])
+const fieldColumns = ref<any>([
+  {
+    key:"fieldName",
+    dataKey:"fieldName",
+    title: 'Field Name',
+    width: 150,
+  },
+  {
+    key:"fieldType",
+    dataKey:"fieldType",
+    title: 'Field Type',
+    width: 150,
+  },
+  {
+    key:"fieldRemark",
+    dataKey:"fieldRemark",
+    title: 'Field Remark',
+    width: 300,
+  }
+])
+const fieldData = ref<any>([])
+const dsId = ref<Number>(0)
+
+const open = (id: Number) => {
+  drawer.value = true
+  dsId.value = id
+  datasourceApi.getTables(id).then((res) => {
+    tableData.value = res
+  })
+}
+
+const showFields = (tableName: string) =>{
+  datasourceApi.getFields(dsId.value, tableName).then((res) => {
+    fieldData.value = res
+  })
+}
+
+const cancelClick = () => {
+  drawer.value = false
+}
+
+const confirmClick = () => {
+  // save something
+  cancelClick()
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="less" scoped>
+
+</style>

frontend/src/views/ds/form.vue

@@ -3,6 +3,7 @@
     v-model="dialogVisible"
     title="Add Datasource"
     width="500"
+    :destroy-on-close="true"
   >
     <el-form :model="form" label-width="auto" ref="dsFormRef" :rules="rules">
       <el-form-item label="Name" prop="name">
@@ -169,4 +170,4 @@ const check = () => {
 defineExpose({ open })
 </script>
 <style lang="less" scoped>
-</style>./js/aes
+</style>

frontend/src/views/ds/index.vue

@@ -35,28 +35,31 @@
         </div>
         <div class="connection-status" :class="`${getStatus(ds.status)}`">{{ ds.status }}</div>
         <div class="connection-actions">
-          <el-button class="action-btn" @click="getTables(ds.id)">Info</el-button>
+          <el-button class="action-btn" circle @click="getTables(ds.id)" :icon="List" />
           <el-button type="primary" class="action-btn" circle @click="editDs(ds)" :icon="IconOpeEdit"/>
           <el-button type="danger" class="action-btn" circle @click="deleteDs(ds)" :icon="IconOpeDelete"/>
         </div>
       </div>
     </div>
   </div>
   <DsForm ref="dsForm" @refresh="refresh"/>
+  <TableList ref="tableList" />
 </template>
 <script lang="ts" setup>
 import IconOpeAdd from '@/assets/svg/operate/ope-add.svg'
 import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
 import IconOpeDelete from '@/assets/svg/operate/ope-delete.svg'
-import { Search } from '@element-plus/icons-vue'
+import { Search, List } from '@element-plus/icons-vue'
 import { ref, onMounted } from 'vue'
 import DsForm from './form.vue'
 import { datasourceApi } from '@/api/datasource'
 import { datetimeFormat } from '@/utils/utils'
 import { ElMessageBox } from 'element-plus'
+import TableList from './TableList.vue'
 
 const searchValue = ref<string>('')
 const dsForm = ref()
+const tableList = ref()
 const dsList = ref<any>([])// show ds list
 const allDsList = ref<any>([])// all ds list
 
@@ -124,9 +127,10 @@ const getTables = (id: Number) => {
   //   console.log(res)
   // })
 
-  datasourceApi.execSql(id,'select id,name,table_name from core_dataset_table limit 10').then((res) => {
-    console.log(res)
-  })
+  // datasourceApi.execSql(id,'select id,name,table_name from core_dataset_table limit 10').then((res) => {
+  //   console.log(res)
+  // })
+  tableList.value.open(id)
 }
 
 onMounted(() => {

frontend/vite.config.ts

@@ -43,5 +43,9 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    esbuild: {
+      jsxFactory: 'h',
+      jsxFragment: 'Fragment',
+    },
   }
 })