添加表编辑

Author: magicalconchs

DataProviders/HiDb.DataProvider.SqlServer/TableDataProvider.cs

@@ -38,8 +38,7 @@ LEFT JOIN
 
         public List<TableColumnOutput> GetDbColumnList(TableColumnInput input)
         {
-            var use = @$"use [{input.DataBase}];";
-            return GetList<TableColumnOutput>(use + @$"SELECT 
+            return GetList<TableColumnOutput>(@$"SELECT 
                                 COLUMN_NAME AS Name,
                                 DATA_TYPE AS Type,
                                 IS_NULLABLE AS AllowNull

DataProviders/HiDb.DataProvider/Dtos/Tables/TableColumnInput.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -8,10 +9,12 @@ namespace HiDb.DataProvider.Dtos.Tables
 {
     public class TableColumnInput
     {
+        [Required]
         public string DataBase { get; set; }
 
         public string Mode { get; set; }
 
+        [Required]
         public string Table { get; set; }
     }
 }

Gui/HiDb.Vue/src/renderer/api/table.ts

@@ -0,0 +1,25 @@
+import request from '@renderer/utils/request'
+
+// 获取列表
+export function getTableColumnList(data, dbtype) {
+    return request({
+        url: '/table/column/list',
+        method: 'post',
+        data: data,
+        headers: {
+            'dbtype': dbtype
+        }
+    })
+}
+
+// 获取详情
+export function getTableColumnDetail(data, dbtype) {
+    return request({
+        url: '/table/column/detail',
+        method: 'post',
+        data: data,
+        headers: {
+            'dbtype': dbtype
+        }
+    })
+}

Gui/HiDb.Vue/src/renderer/components/MainPage.vue

@@ -99,7 +99,7 @@
                     <a-dropdown :trigger="['contextmenu']">
                       <span>{{ title }}</span>
                       <template #overlay>
-                        <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
+                        <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey,currRightData)">
                           <div v-if="currRightData.type == 'db'">
                             <a-menu-item key="11">查看数据库</a-menu-item>
                             <a-menu-item key="12">删除数据库</a-menu-item>
@@ -110,9 +110,9 @@
                           </div> -->
                           <div v-if="currRightData.type == 'table'">
                             <a-menu-item key="31">查看表数据</a-menu-item>
-                            <!-- <a-menu-item key="32">编辑表结构</a-menu-item>
+                            <a-menu-item key="32">编辑表结构</a-menu-item>
                             <a-menu-item key="33">删除表</a-menu-item>
-                            <a-menu-item key="34">归档表</a-menu-item> -->
+                            <a-menu-item key="34">归档表</a-menu-item>
                           </div>
                         </a-menu>
                       </template>
@@ -190,7 +190,11 @@
               </div>
             </div>
             <div  v-show="viewMode == 3" class="work" :style="{ 'width': bodyWidth }">
-              编辑表结构
+              <my-sql-edit 
+                :database="editTableData.database" 
+                :table="editTableData.table" 
+                :mode="editTableData.mode" 
+                :dbtype="editTableData.dbtype"></my-sql-edit>
             </div>
             <div  v-show="viewMode == 1" class="work" :style="{ 'width': bodyWidth }">
               编辑数据库
@@ -319,7 +323,7 @@
 
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash-es';
-import { h, ref, watch, onMounted, UnwrapRef, reactive  } from 'vue';
+import { h, ref, watch, onMounted, UnwrapRef, reactive, defineComponent  } from 'vue';
 import MySql from './icons/MySql.vue';
 import SqlServer from './icons/SqlServer.vue';
 import PgSql from './icons/PgSql.vue';
@@ -334,7 +338,7 @@ import { DataType } from 'vue-request';
 import { getGuid } from '@renderer/utils/guid';
 import { life } from '../api/life';
 import * as monaco from 'monaco-editor';
-
+import MySqlEdit from './table-edit/MySqlEdit.vue';
   const sh = 280;
   const pageHeight = ref(0);
   const dftPageHeight = ref(0);
@@ -398,6 +402,12 @@ import * as monaco from 'monaco-editor';
     console.log('onResize:' + pageHeight.value);
   };
   const viewMode = ref(0); // 视图模式，0数据视图，1 编辑表视图 2编辑模式视图 3编辑数据库视图
+  const editTableData = ref({
+    table: '',
+    database: '',
+    mode: '',
+    dbtype: 0
+  }); // 当前标记表
   const searchValue = ref<string>(''); // 左侧搜索内容
   const expandedMenuKeys = ref<string[]>([]); // tree搜索key
   const selectedMenuKeys = ref<string[]>([]); // tree选择key
@@ -587,8 +597,7 @@ import * as monaco from 'monaco-editor';
     encrypt: true,
     saveLocal: true
   });
-  const onContextMenuClick = (treeKey: string, menuKey: string | number) => {
-    console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+  const onContextMenuClick = (treeKey: string, menuKey: string | number, data: any) => {
     if (menuKey == '11') {
       viewMode.value = 1;
     } else if (menuKey == '12') {
@@ -602,6 +611,13 @@ import * as monaco from 'monaco-editor';
       }
       searchData();
     } else if (menuKey == '32') {
+      editTableData.value = {
+        database: currRightData.value.database,
+        table: currRightData.value.title,
+        mode: currRightData.value.mode,
+        dbtype: currDatabase.value.type
+      }
+      console.log(editTableData)
       viewMode.value = 3;
     } else if (menuKey == '33') {
       viewMode.value = 3;
@@ -814,14 +830,13 @@ import * as monaco from 'monaco-editor';
                 type: 'tablenull',
               }];
             } else {
-              console.log('getTable:' + JSON.stringify(res.data));
-              console.log(res.data);
               treeNode.dataRef.children = res.data.map(c => {
                 return {            
                   title: c.name,
                   key: c.name,
                   isLeaf: true,
                   type: 'table',
+                  mode: treeNode.title,
                   database: treeNode.type == 'db' ? treeNode.title : treeNode.type == 'mode' ?  treeNode.parent.key : ''
                 }
               });

Gui/HiDb.Vue/src/renderer/components/table-edit/MySqlEdit.vue

@@ -47,15 +47,30 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep } from 'lodash-es';
-import { UnwrapRef, reactive, ref } from 'vue';
+import { UnwrapRef, reactive, ref, watchEffect } from 'vue';
 import { ConnectDbInput } from '../model/MainPageMode';
+import { getTableColumnList } from '../../api/table';
+
+const props = defineProps(['database','mode','table','dbtype'])
 
 // 表格数据列
 const dbColumns = ref<any[]>([{
     title: '名称',
     dataIndex: 'name',
+    sorter: false
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+    sorter: false,
+    width: 150
+  },
+  {
+    title: '是否允许null',
+    dataIndex: 'allowNull',
     sorter: false,
-    width: 150}
+    width: 80
+  }
 ]);
 // 可编辑的列
 const allowEditColumns = ref<string[]>(['name','type']);
@@ -81,6 +96,26 @@ const cancel = (key: string) => {
     delete editableData[key];
 };
 
+const loading = ref(false);
+// 加载字段配置
+const loadTableColumn = ()=>{
+  loading.value = true;
+  getTableColumnList({
+    database: props.database,
+    mode: props.mode,
+    table: props.table
+  }, props.dbtype).then((res: any) => {
+    loading.value = false;
+    currdbData.value = res;
+  },()=> {
+    loading.value = false;
+  })
+}
+watchEffect(()=>{
+  console.log('watch');
+  loadTableColumn();
+});
+
 </script>
 <style scoped lang="scss">
 .content {

Services/HiDb.Api/Controllers/TableController.cs

@@ -0,0 +1,41 @@
+using HiDb.DataProvider.Dtos.Search;
+using HiDb.DataProvider.Dtos.Tables;
+using HiDb.DataProvider.Factory;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+
+namespace HiDb.Api.Controllers;
+
+/// <summary>
+/// Search
+/// </summary>
+/// <param name="searchDataProvider"></param>
+[ApiController]
+[AllowAnonymous]
+[Route("table")]
+public class TableController : MainController
+{
+    /// <summary>
+    /// 获取属性详情
+    /// </summary>
+    /// <param name="input"></param>
+    /// <returns></returns>
+    [HttpPost("column/detail")]
+    public TableColumnFullOutput GetDbColumnFullInfo(TableColumnFullInput input)
+    {
+        var data = GetService(ServiceFactory.GetTable).GetDbColumnFullInfo(input);
+        return data;
+    }
+
+    /// <summary>
+    /// 获取表属性列表
+    /// </summary>
+    /// <param name="input"></param>
+    /// <returns></returns>
+    [HttpPost("column/list")]
+    public List<TableColumnOutput> GetDbColumnList(TableColumnInput input)
+    {
+        var data = GetService(ServiceFactory.GetTable).GetDbColumnList(input);
+        return data;
+    }
+}