表结构编辑功能添加

30%

Author: magicalconchs

DataProviders/HiDb.DataProvider.MySql/Models/MySqlDbTypeList.cs

@@ -0,0 +1,6 @@
+namespace HiDb.DataProvider.MySql.Models;
+
+public class MySqlDbTypeList
+{
+    public string COLUMNS { get; set; }
+}

DataProviders/HiDb.DataProvider.MySql/TableDataProvider.cs

@@ -4,6 +4,7 @@
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using HiDb.DataProvider.MySql.Models;
 
 namespace HiDb.DataProvider.MySql
 {
@@ -50,5 +51,11 @@ IS_NULLABLE AS AllowNull
                                 AND TABLE_SCHEMA = '{input.Mode}'
                                 AND TABLE_NAME = '{input.Table}';");
         }
+        
+        public List<TableDbTypeOutput> GetDbTypeList()
+        {
+            var res = GetList<MySqlDbTypeList>( @$"SHOW COLUMNS FROM your_table_name;");
+            return res.Select(c => new TableDbTypeOutput() {Name = c.COLUMNS}).ToList();
+        }
     }
 }

DataProviders/HiDb.DataProvider.SqlServer/SqlConnectionFactory.cs

@@ -32,24 +32,13 @@ public static void InitConnection(string connectionString)
         public static IDbConnection GetConnection(string connectionString = "")
         {
             // 如果未初始化，初始化连接
-            if (connection == null)
+            if (connection is not {State: ConnectionState.Open})
             {
-                connection = new SqlConnection(connectionString ?? _connectionString);
-                try
-                {
-                    connection.Open();
-                }
-                catch (Exception ex)
-                {
-                    // 连接打开异常，抛出错误
-                    throw ex;
-                }
+                InitConnection(_connectionString);
                 return connection;
             }
             else
             {
-                // 正常返回连接
-#warning 这里考虑初始化连接的时候，获取到数据库的超时配置，比如说30000毫秒，则设定时间戳，在30000毫秒临近的时候，进行connection Open重连操作，以免连接超时查询异常
                 return connection;
             }
         }

DataProviders/HiDb.DataProvider.SqlServer/TableDataProvider.cs

@@ -41,13 +41,21 @@ public List<TableColumnOutput> GetDbColumnList(TableColumnInput input)
             return GetList<TableColumnOutput>(@$"SELECT 
                                 COLUMN_NAME AS Name,
                                 DATA_TYPE AS Type,
-                                IS_NULLABLE AS AllowNull
+                                IS_NULLABLE AS AllowNullStr
                             FROM 
                                 INFORMATION_SCHEMA.COLUMNS
                             WHERE 
                                 TABLE_CATALOG = '{input.DataBase}'
                                 AND TABLE_SCHEMA = '{input.Mode}'
                                 AND TABLE_NAME = '{input.Table}';");
         }
+
+        public List<TableDbTypeOutput> GetDbTypeList()
+        {
+            return GetList<TableDbTypeOutput>( @$"SELECT name as Name
+                FROM sys.types
+                WHERE is_user_defined = 0
+                ORDER BY name desc");
+        }
     }
 }

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

@@ -21,6 +21,11 @@ public class TableColumnOutput
         /// <summary>
         /// 是否允许Null
         /// </summary>
-        public bool AllowNull { get; set; }
+        public string AllowNullStr { get; set; }
+        
+        /// <summary>
+        /// 是否允许Null
+        /// </summary>
+        public bool AllowNull => this.AllowNullStr == "YES";
     }
 }

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

@@ -0,0 +1,6 @@
+namespace HiDb.DataProvider.Dtos.Tables;
+
+public class TableDbTypeOutput
+{
+    public string Name { get; set; }
+}

DataProviders/HiDb.DataProvider/ITableDataProvider.cs

@@ -25,5 +25,7 @@ public interface ITableDataProvider
         /// <param name="tableName"></param>
         /// <returns></returns>
         public TableColumnFullOutput GetDbColumnFullInfo(TableColumnFullInput input);
+
+        List<TableDbTypeOutput> GetDbTypeList();
     }
 }

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

@@ -22,4 +22,16 @@ export function getTableColumnDetail(data, dbtype) {
             'dbtype': dbtype
         }
     })
+}
+
+
+// 获取详情
+export function getDbType(dbtype) {
+    return request({
+        url: '/table/db-type',
+        method: 'post',
+        headers: {
+            'dbtype': dbtype
+        }
+    })
 }

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

@@ -191,6 +191,7 @@
             </div>
             <div  v-show="viewMode == 3" class="work" :style="{ 'width': bodyWidth }">
               <my-sql-edit 
+                style="width: 100%; height: 100%"
                 :database="editTableData.database" 
                 :table="editTableData.table" 
                 :mode="editTableData.mode" 

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

@@ -1,13 +1,13 @@
 <template>
     <div class="content">
         <a-table class="table"
-                :columns="dbColumns" 
-                size="small"
-                :data-source="currdbData"
-                :scroll="{ y: 500 }"
-                :loading="dbloading"
-                :pagination="false">
-                
+              :columns="dbColumns" 
+              size="small"
+              style="width: 100%;"
+              :data-source="currdbData"
+              :scroll="{ y: tableHeight }"
+              :loading="loading"
+              :pagination="false">
               <template #bodyCell="{ column, text, record }">
                 <template v-if="allowEditColumns.includes(column.dataIndex)">
                   <div>
@@ -18,16 +18,22 @@
                     />
                     <template v-else>
                       <span>
-                        <span v-if="column.dataIndex == 'name'">
-                          <sql-server v-if="record.type == 0"></sql-server>
-                          <my-sql v-if="record.type == 1"></my-sql>
-                          <pg-sql v-if="record.type == 2"></pg-sql>
-                        </span>
                         {{ text }}
                       </span>
                     </template>
                   </div>
                 </template>
+                <template v-if="column.dataIndex == 'type'">
+                  <a-select
+                    v-model:value="record.key"
+                    show-search
+                    placeholder="选择字段类型"
+                    style="width: 200px"
+                    :options="dbTypeOptions"
+                    :filter-option="filterOption"
+                  ></a-select>
+                </template>
+                
                 <template v-else-if="column.dataIndex === 'operation'">
                   <div class="editable-row-operations">
                     <span v-if="editableData[record.key]">
@@ -47,12 +53,22 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep } from 'lodash-es';
-import { UnwrapRef, reactive, ref, watchEffect } from 'vue';
+import { UnwrapRef, reactive, ref, watchEffect,onMounted } from 'vue';
 import { ConnectDbInput } from '../model/MainPageMode';
-import { getTableColumnList } from '../../api/table';
+import { getTableColumnList, getDbType } from '../../api/table';
 
 const props = defineProps(['database','mode','table','dbtype'])
-
+const tableHeight = ref(document.body.clientHeight);
+const sh = 280;
+onMounted(() => {
+  tableHeight.value = document.body.clientHeight - sh;
+  window.addEventListener('resize', onResize);
+  loadDbType();
+});
+// 窗体大小改变事件
+const onResize = () => {
+  tableHeight.value = document.body.clientHeight - sh;
+};
 // 表格数据列
 const dbColumns = ref<any[]>([{
     title: '名称',
@@ -63,24 +79,27 @@ const dbColumns = ref<any[]>([{
     title: '字段类型',
     dataIndex: 'type',
     sorter: false,
-    width: 150
+    width: 180
   },
   {
     title: '是否允许null',
     dataIndex: 'allowNull',
     sorter: false,
-    width: 80
+    width: 160
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 120,
+    fixed: 'right'
   }
 ]);
 // 可编辑的列
-const allowEditColumns = ref<string[]>(['name','type']);
+const allowEditColumns = ref<string[]>(['name','allowNull']);
 // 当前数据库表格数据
 const currdbData = ref<any[]>([]);
-// loading
-const dbloading = ref(false);
 // 编辑数据
-const editableData: UnwrapRef<Record<string, ConnectDbInput>> = reactive({});
-
+const editableData: UnwrapRef<Record<string, any>> = reactive({});
 // 编辑列
 const edit = (key: string) => {
     editableData[key] = cloneDeep(currdbData.value.filter(item => key === item.key)[0]);
@@ -95,7 +114,7 @@ const save = (key: string) => {
 const cancel = (key: string) => {
     delete editableData[key];
 };
-
+// 加载
 const loading = ref(false);
 // 加载字段配置
 const loadTableColumn = ()=>{
@@ -106,13 +125,27 @@ const loadTableColumn = ()=>{
     table: props.table
   }, props.dbtype).then((res: any) => {
     loading.value = false;
-    currdbData.value = res;
+    currdbData.value = res.data;
   },()=> {
     loading.value = false;
   })
 }
+const dbTypeOptions = ref([]);
+const loadDbType = ()=>{
+  getDbType(props.dbtype).then(res=>{
+    dbTypeOptions.value = res.data.map(c => {return { value : c.name, label: c.name}});
+  })
+}
+const filterOption = (input: string, option: any) => {
+  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+const clearData = ()=>{
+  currdbData.value = [];
+}
+
 watchEffect(()=>{
   console.log('watch');
+  clearData();
   loadTableColumn();
 });
 

Gui/HiDb.Vue/src/renderer/components/table-edit/loadDbType.ts

@@ -0,0 +1,8 @@
+import { getDbType } from '../../api/table';
+import { props, dbTypeOptions } from './MySqlEdit.vue';
+
+export const loadDbType = () => {
+getDbType(props.dbtype).then(res => {
+dbTypeOptions.value = res.data.map(c => { return { title: c.name }; });
+});
+};

Gui/HiDb.Vue/src/renderer/dic/datatype.ts

@@ -0,0 +1,5 @@
+
+export const MYSQL_DATA_TYPE = [
+    'int',
+    
+]

Services/HiDb.Api/Controllers/TableController.cs

@@ -38,4 +38,11 @@ public List<TableColumnOutput> GetDbColumnList(TableColumnInput input)
         var data = GetService(ServiceFactory.GetTable).GetDbColumnList(input);
         return data;
     }
+
+    [HttpPost("db-type")]
+    public List<TableDbTypeOutput> GetDbTypeList()
+    {
+        var data = GetService(ServiceFactory.GetTable).GetDbTypeList();
+        return data;
+    }
 }