refactor: sql执行列返回字段类型

mayfly_go_web/src/theme/app.scss

@@ -248,7 +248,7 @@ body,
 
 /* 字体大小全局样式
 ------------------------------- */
-@for $i from 10 through 32 {
+@for $i from 8 through 32 {
     .font#{$i} {
         font-size: #{$i}px !important;
     }

mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue

@@ -362,9 +362,10 @@ const onRunSql = async (newTab = false) => {
         // 要实时响应，故需要用索引改变数据才生效
         state.execResTabs[i].data = colAndData.res;
         // 兼容表格字段配置
-        state.execResTabs[i].tableColumn = colAndData.colNames.map((x: any) => {
+        state.execResTabs[i].tableColumn = colAndData.columns.map((x: any) => {
             return {
-                columnName: x,
+                columnName: x.name,
+                columnType: x.type,
                 show: true,
             };
         });

mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue

@@ -26,16 +26,23 @@
                                     borderRight: 'var(--el-table-border)',
                                 }"
                             >
-                                <!-- 行号列表头 -->
+                                <!-- 行号列 -->
-                                <div v-if="column.key == rowNoColumn.key || !showColumnTip">
+                                <div v-if="column.key == rowNoColumn.key">
                                     <el-text tag="b"> {{ column.title }} </el-text>
                                 </div>
 
-                                <div v-else @contextmenu="headerContextmenuClick($event, column)">
+                                <!-- 字段名列 -->
+                                <div v-else @contextmenu="headerContextmenuClick($event, column)" style="position: relative">
+                                    <div class="column-type">
+                                        <span class="font8">{{ dbDialect.getShortColumnType(column.columnType) }}</span>
+                                    </div>
+
                                     <div v-if="showColumnTip" @mouseover="column.showSetting = true" @mouseleave="column.showSetting = false">
                                         <el-tooltip :show-after="500" raw-content placement="top">
                                             <template #content> {{ getColumnTip(column) }} </template>
-                                            <el-text tag="b" style="cursor: pointer"> {{ column.title }} </el-text>
+                                            <el-text tag="b" style="cursor: pointer">
+                                                {{ column.title }}
+                                            </el-text>
                                         </el-tooltip>
 
                                         <span>
@@ -48,7 +55,9 @@
                                     </div>
 
                                     <div v-else>
-                                        <el-text tag="b" style="cursor: pointer"> {{ column.title }} </el-text>
+                                        <el-text tag="b">
+                                            {{ column.title }}
+                                        </el-text>
                                     </div>
                                 </div>
                             </div>
@@ -58,7 +67,7 @@
                     <template #cell="{ rowData, column, rowIndex, columnIndex }">
                         <div @contextmenu="dataContextmenuClick($event, rowIndex, column, rowData)" class="table-data-cell">
                             <!-- 行号列 -->
-                            <div v-if="column.key == 'tableDataRowNo'">
+                            <div v-if="column.key == rowNoColumn.key">
                                 <el-text tag="b" size="small">
                                     {{ rowIndex + 1 }}
                                 </el-text>
@@ -78,7 +87,7 @@
                                 </div>
 
                                 <div v-else :class="isUpdated(rowIndex, column.dataKey) ? 'update_field_active' : ''">
-                                    <el-text style="color: var(--el-color-info-light-5)" v-if="rowData[column.dataKey!] === null" size="small" truncated>
+                                    <el-text v-if="rowData[column.dataKey!] === null" size="small" truncated style="color: var(--el-color-info-light-5)">
                                         NULL
                                     </el-text>
 
@@ -134,6 +143,7 @@ import SvgIcon from '@/components/svgIcon/index.vue';
 import { exportCsv, exportFile } from '@/common/utils/export';
 import { dateStrFormat } from '@/common/utils/date';
 import { useIntervalFn } from '@vueuse/core';
+import { getDbDialect, DbDialect } from '../../dialect/index';
 
 const emits = defineEmits(['dataDelete', 'sortChange', 'deleteData', 'selectionChange', 'changeUpdatedField']);
 
@@ -273,6 +283,8 @@ class TableCellData {
     oldValue: any;
 }
 
+let dbDialect: DbDialect = null as any;
+
 let nowSortColumn = null as any;
 
 // 当前正在更新的单元格
@@ -388,6 +400,8 @@ onMounted(async () => {
 
     state.dbId = props.dbId;
     state.dbType = props.dbType;
+    dbDialect = getDbDialect(state.dbType);
+
     state.db = props.db;
     state.table = props.table;
     setTableData(props.data);
@@ -789,5 +803,14 @@ defineExpose({
     .update_field_active {
         background-color: var(--el-color-success);
     }
+
+    .column-type {
+        color: var(--el-color-info-light-3);
+        font-weight: bold;
+        position: absolute;
+        top: -12px;
+        padding: 2px;
+        height: 12px;
+    }
 }
 </style>

mayfly_go_web/src/views/ops/db/db.ts

@@ -373,6 +373,15 @@ export class DbInst {
         return columnType.match(/int|double|float|nubmer|decimal|byte|bit/gi);
     }
 
+    /**
+     * 判断字段类型是否为日期相关类型
+     * @param columnType 字段类型
+     * @returns
+     */
+    static isDate(columnType: string) {
+        return columnType.match(/date|time/gi);
+    }
+
     /**
      *
      * @param str 字符串
@@ -385,8 +394,8 @@ export class DbInst {
             return;
         }
 
-        // 获取列名称的长度 加上排序图标长度
+        // 获取列名称的长度 加上排序图标长度、abc为字段类型简称占位符
-        const columnWidth: number = getTextWidth(prop) + 23;
+        const columnWidth: number = getTextWidth(prop + 'abc') + 23;
         // prop为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
         if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
             return columnWidth;

mayfly_go_web/src/views/ops/db/dialect/dm_dialect.ts

@@ -1,3 +1,4 @@
+import { DbInst } from '../db';
 import { DbDialect, sqlColumnType, DialectInfo, RowDefinition, IndexDefinition, EditorCompletionItem, commonCustomKeywords, EditorCompletion } from './index';
 import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/sql/sql.js';
 export { DMDialect, DM_TYPE_LIST };
@@ -429,10 +430,21 @@ class DMDialect implements DbDialect {
             indexComment: '',
         };
     }
+
     wrapName = (name: string) => {
         return name;
     };
 
+    getShortColumnType(columnType: string): string {
+        if (DbInst.isNumber(columnType)) {
+            return '123';
+        }
+        if (DbInst.isDate(columnType)) {
+            return 'date';
+        }
+        return 'abc';
+    }
+
     matchType(text: string, arr: string[]): boolean {
         if (!text || !arr || arr.length === 0) {
             return false;

mayfly_go_web/src/views/ops/db/dialect/index.ts

@@ -106,6 +106,12 @@ export interface DbDialect {
 
     getDefaultIndex(): IndexDefinition;
 
+    /**
+     * 根据数据库完整字段类型，获取类型简称。如字符串为abc、数字为123、日期为date等。
+     * @param columnType 数据库原始字段类型
+     */
+    getShortColumnType(columnType: string): string;
+
     /**
      * 包裹数据库表名、字段名等，避免使用关键字为字段名或表名时报错
      * @param name 名称

mayfly_go_web/src/views/ops/db/dialect/mysql_dialect.ts

@@ -1,3 +1,4 @@
+import { DbInst } from '../db';
 import { commonCustomKeywords, DbDialect, DialectInfo, EditorCompletion, EditorCompletionItem, IndexDefinition, RowDefinition } from './index';
 import { language as mysqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql.js';
 
@@ -178,6 +179,16 @@ class MysqlDialect implements DbDialect {
         };
     }
 
+    getShortColumnType(columnType: string): string {
+        if (DbInst.isNumber(columnType)) {
+            return '123';
+        }
+        if (DbInst.isDate(columnType)) {
+            return 'date';
+        }
+        return 'abc';
+    }
+
     wrapName = (name: string) => {
         return `\`${name}\``;
     };

mayfly_go_web/src/views/ops/db/dialect/postgres_dialect.ts

@@ -1,3 +1,4 @@
+import { DbInst } from '../db';
 import { commonCustomKeywords, DbDialect, DialectInfo, EditorCompletion, EditorCompletionItem, IndexDefinition, RowDefinition, sqlColumnType } from './index';
 import { language as pgsqlLanguage } from 'monaco-editor/esm/vs/basic-languages/pgsql/pgsql.js';
 
@@ -189,6 +190,16 @@ class PostgresqlDialect implements DbDialect {
         };
     }
 
+    getShortColumnType(columnType: string): string {
+        if (DbInst.isNumber(columnType)) {
+            return '123';
+        }
+        if (DbInst.isDate(columnType)) {
+            return 'date';
+        }
+        return 'abc';
+    }
+
     wrapName = (name: string) => {
         return name;
     };

server/internal/db/api/db.go

@@ -136,7 +136,7 @@ func (d *Db) ExecSql(rc *req.Ctx) {
 	}
 
 	colAndRes := make(map[string]any)
-	colAndRes["colNames"] = execResAll.ColNames
+	colAndRes["columns"] = execResAll.Columns
 	colAndRes["res"] = execResAll.Res
 	rc.ResData = colAndRes
 }
@@ -349,11 +349,11 @@ func (d *Db) dumpDb(writer *gzipWriter, dbId uint64, dbName string, tables []str
 		writer.WriteString(fmt.Sprintf("\n-- ----------------------------\n-- 表记录: %s \n-- ----------------------------\n", table))
 		writer.WriteString("BEGIN;\n")
 		insertSql := "INSERT INTO %s VALUES (%s);\n"
-		dbMeta.WalkTableRecord(table, func(record map[string]any, columns []string) {
+		dbMeta.WalkTableRecord(table, func(record map[string]any, columns []*dbm.QueryColumn) {
 			var values []string
 			writer.TryFlush()
 			for _, column := range columns {
-				value := record[column]
+				value := record[column.Name]
 				if value == nil {
 					values = append(values, "NULL")
 					continue

server/internal/db/application/db_sql_exec.go

@@ -26,19 +26,19 @@ type DbSqlExecReq struct {
 }
 
 type DbSqlExecRes struct {
-	ColNames []string
+	Columns []*dbm.QueryColumn
 	Res     []map[string]any
 }
 
 // 合并执行结果，主要用于执行多条sql使用
 func (d *DbSqlExecRes) Merge(execRes *DbSqlExecRes) {
-	canMerge := len(d.ColNames) == len(execRes.ColNames)
+	canMerge := len(d.Columns) == len(execRes.Columns)
 	if !canMerge {
 		return
 	}
 	// 列名不一致，则不合并
-	for i, colName := range d.ColNames {
+	for i, col := range d.Columns {
-		if execRes.ColNames[i] != colName {
+		if execRes.Columns[i].Name != col.Name {
 			return
 		}
 	}
@@ -188,12 +188,12 @@ func doSelect(ctx context.Context, selectStmt *sqlparser.Select, execSqlReq *DbS
 func doRead(ctx context.Context, execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error) {
 	dbConn := execSqlReq.DbConn
 	sql := execSqlReq.Sql
-	colNames, res, err := dbConn.QueryContext(ctx, sql)
+	cols, res, err := dbConn.QueryContext(ctx, sql)
 	if err != nil {
 		return nil, err
 	}
 	return &DbSqlExecRes{
-		ColNames: colNames,
+		Columns: cols,
 		Res:     res,
 	}, nil
 }
@@ -285,7 +285,11 @@ func doExec(ctx context.Context, sql string, dbConn *dbm.DbConn) (*DbSqlExecRes,
 	res = append(res, resData)
 
 	return &DbSqlExecRes{
-		ColNames: []string{"sql", "rowsAffected", "result"},
+		Columns: []*dbm.QueryColumn{
+			{Name: "sql", Type: "string"},
+			{Name: "rowsAffected", Type: "number"},
+			{Name: "result", Type: "string"},
+		},
 		Res: res,
 	}, err
 }

server/internal/db/dbm/conn.go

@@ -19,17 +19,23 @@ type DbConn struct {
 	db *sql.DB
 }
 
+// 执行数据库查询返回的列信息
+type QueryColumn struct {
+	Name string `json:"name"` // 列名
+	Type string `json:"type"` // 类型
+}
+
 // 执行查询语句
-// 依次返回 列名数组(顺序)，结果map，错误
+// 依次返回 列信息数组(顺序)，结果map，错误
-func (d *DbConn) Query(querySql string) ([]string, []map[string]any, error) {
+func (d *DbConn) Query(querySql string) ([]*QueryColumn, []map[string]any, error) {
 	return d.QueryContext(context.Background(), querySql)
 }
 
 // 执行查询语句
-// 依次返回 列名数组(顺序)，结果map，错误
+// 依次返回 列信息数组(顺序)，结果map，错误
-func (d *DbConn) QueryContext(ctx context.Context, querySql string) ([]string, []map[string]any, error) {
+func (d *DbConn) QueryContext(ctx context.Context, querySql string) ([]*QueryColumn, []map[string]any, error) {
 	result := make([]map[string]any, 0, 16)
-	columns, err := walkTableRecord(ctx, d.db, querySql, func(record map[string]any, columns []string) {
+	columns, err := walkTableRecord(ctx, d.db, querySql, func(record map[string]any, columns []*QueryColumn) {
 		result = append(result, record)
 	})
 	if err != nil {
@@ -55,7 +61,7 @@ func (d *DbConn) Query2Struct(execSql string, dest any) error {
 }
 
 // WalkTableRecord 遍历表记录
-func (d *DbConn) WalkTableRecord(ctx context.Context, selectSql string, walk func(record map[string]any, columns []string)) error {
+func (d *DbConn) WalkTableRecord(ctx context.Context, selectSql string, walk func(record map[string]any, columns []*QueryColumn)) error {
 	_, err := walkTableRecord(ctx, d.db, selectSql, walk)
 	return err
 }
@@ -100,7 +106,7 @@ func (d *DbConn) Close() {
 	}
 }
 
-func walkTableRecord(ctx context.Context, db *sql.DB, selectSql string, walk func(record map[string]any, columns []string)) ([]string, error) {
+func walkTableRecord(ctx context.Context, db *sql.DB, selectSql string, walk func(record map[string]any, columns []*QueryColumn)) ([]*QueryColumn, error) {
 	rows, err := db.QueryContext(ctx, selectSql)
 
 	if err != nil {
@@ -120,13 +126,13 @@ func walkTableRecord(ctx context.Context, db *sql.DB, selectSql string, walk fun
 	}
 	lenCols := len(colTypes)
 	// 列名用于前端表头名称按照数据库与查询字段顺序显示
-	colNames := make([]string, lenCols)
+	cols := make([]*QueryColumn, lenCols)
 	// 这里表示一行填充数据
 	scans := make([]any, lenCols)
 	// 这里表示一行所有列的值，用[]byte表示
 	values := make([][]byte, lenCols)
 	for k, colType := range colTypes {
-		colNames[k] = colType.Name()
+		cols[k] = &QueryColumn{Name: colType.Name(), Type: colType.DatabaseTypeName()}
 		// 这里scans引用values，把数据填充到[]byte里
 		scans[k] = &values[k]
 	}
@@ -142,10 +148,10 @@ func walkTableRecord(ctx context.Context, db *sql.DB, selectSql string, walk fun
 		for i, v := range values {
 			rowData[colTypes[i].Name()] = valueConvert(v, colTypes[i])
 		}
-		walk(rowData, colNames)
+		walk(rowData, cols)
 	}
 
-	return colNames, nil
+	return cols, nil
 }
 
 // 将查询的值转为对应列类型的实际值，不全部转为字符串

server/internal/db/dbm/dialect.go

@@ -63,10 +63,10 @@ type DbDialect interface {
 
 	// 获取指定表的数据-分页查询
 	// @return columns: 列字段名；result: 结果集；error: 错误
-	GetTableRecord(tableName string, pageNum, pageSize int) ([]string, []map[string]any, error)
+	GetTableRecord(tableName string, pageNum, pageSize int) ([]*QueryColumn, []map[string]any, error)
 
 	// WalkTableRecord 遍历指定表的数据
-	WalkTableRecord(tableName string, walk func(record map[string]any, columns []string)) error
+	WalkTableRecord(tableName string, walk func(record map[string]any, columns []*QueryColumn)) error
 
 	GetSchemas() ([]string, error)
 }

server/internal/db/dbm/dialect_dm.go

@@ -232,11 +232,11 @@ func (pd *DMDialect) GetCreateTableDdl(tableName string) (string, error) {
 	return builder.String(), nil
 }
 
-func (pd *DMDialect) GetTableRecord(tableName string, pageNum, pageSize int) ([]string, []map[string]any, error) {
+func (pd *DMDialect) GetTableRecord(tableName string, pageNum, pageSize int) ([]*QueryColumn, []map[string]any, error) {
 	return pd.dc.Query(fmt.Sprintf("SELECT * FROM %s OFFSET %d LIMIT %d", tableName, (pageNum-1)*pageSize, pageSize))
 }
 
-func (pd *DMDialect) WalkTableRecord(tableName string, walk func(record map[string]any, columns []string)) error {
+func (pd *DMDialect) WalkTableRecord(tableName string, walk func(record map[string]any, columns []*QueryColumn)) error {
 	return pd.dc.WalkTableRecord(context.Background(), fmt.Sprintf("SELECT * FROM %s", tableName), walk)
 }
 

server/internal/db/dbm/dialect_mysql.go

@@ -174,11 +174,11 @@ func (md *MysqlDialect) GetCreateTableDdl(tableName string) (string, error) {
 	return res[0]["Create Table"].(string) + ";", nil
 }
 
-func (md *MysqlDialect) GetTableRecord(tableName string, pageNum, pageSize int) ([]string, []map[string]any, error) {
+func (md *MysqlDialect) GetTableRecord(tableName string, pageNum, pageSize int) ([]*QueryColumn, []map[string]any, error) {
 	return md.dc.Query(fmt.Sprintf("SELECT * FROM %s LIMIT %d, %d", tableName, (pageNum-1)*pageSize, pageSize))
 }
 
-func (md *MysqlDialect) WalkTableRecord(tableName string, walk func(record map[string]any, columns []string)) error {
+func (md *MysqlDialect) WalkTableRecord(tableName string, walk func(record map[string]any, columns []*QueryColumn)) error {
 	return md.dc.WalkTableRecord(context.Background(), fmt.Sprintf("SELECT * FROM %s", tableName), walk)
 }
 

server/internal/db/dbm/dialect_pgsql.go

@@ -245,11 +245,11 @@ func (pd *PgsqlDialect) GetCreateTableDdl(tableName string) (string, error) {
 	return res[0]["sql"].(string), nil
 }
 
-func (pd *PgsqlDialect) GetTableRecord(tableName string, pageNum, pageSize int) ([]string, []map[string]any, error) {
+func (pd *PgsqlDialect) GetTableRecord(tableName string, pageNum, pageSize int) ([]*QueryColumn, []map[string]any, error) {
 	return pd.dc.Query(fmt.Sprintf("SELECT * FROM %s OFFSET %d LIMIT %d", tableName, (pageNum-1)*pageSize, pageSize))
 }
 
-func (pd *PgsqlDialect) WalkTableRecord(tableName string, walk func(record map[string]any, columns []string)) error {
+func (pd *PgsqlDialect) WalkTableRecord(tableName string, walk func(record map[string]any, columns []*QueryColumn)) error {
 	return pd.dc.WalkTableRecord(context.Background(), fmt.Sprintf("SELECT * FROM %s", tableName), walk)
 }