diff --git a/mayfly_go_web/src/common/utils/date.ts b/mayfly_go_web/src/common/utils/date.ts index 684b3044..b0e7d43f 100644 --- a/mayfly_go_web/src/common/utils/date.ts +++ b/mayfly_go_web/src/common/utils/date.ts @@ -7,6 +7,7 @@ export function dateFormat2(fmt: string, date: Date) { 'H+': date.getHours().toString(), // 时 'm+': date.getMinutes().toString(), // 分 's+': date.getSeconds().toString(), // 秒 + 'S+': date.getMilliseconds() ? date.getMilliseconds().toString() : '', // 毫秒 // 有其他格式化字符需求可以继续添加，必须转化成字符串 }; for (const k in opt) { diff --git a/mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue b/mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue index 35efa299..f36f366e 100644 --- a/mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue +++ b/mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue @@ -428,7 +428,7 @@ const saveSql = async () => { const input = await ElMessageBox.prompt('请输入SQL脚本名', 'SQL名', { confirmButtonText: '确定', cancelButtonText: '取消', - inputPattern: /\w+/, + inputPattern: /\.+/, inputErrorMessage: '请输入SQL脚本名', }); sqlName = input.value; diff --git a/mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue b/mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue index 8dcf0ba3..005219c6 100644 --- a/mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue +++ b/mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue @@ -34,7 +34,10 @@
- {{ dbDialect.getShortColumnType(column.columnType) }} + + + + {{ ColumnTypeSubscript[dbDialect.getDataType(column.columnType)] }}
@@ -77,13 +80,49 @@
+ /> + + +
@@ -143,7 +182,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'; +import { getDbDialect, DbDialect, ColumnTypeSubscript, DataType, DbType } from '../../dialect/index'; const emits = defineEmits(['dataDelete', 'sortChange', 'deleteData', 'selectionChange', 'changeUpdatedField']); @@ -152,10 +191,6 @@ const props = defineProps({ type: Number, required: true, }, - dbType: { - type: String, - default: '', - }, db: { type: String, required: true, @@ -256,6 +291,7 @@ const cmDataExportSql = new ContextmenuItem('exportSql', '导出SQL') class NowUpdateCell { rowIndex: number; colIndex: number; + dataType: DataType; oldValue: any; } @@ -399,7 +435,7 @@ onMounted(async () => { state.emptyText = props.emptyText; state.dbId = props.dbId; - state.dbType = props.dbType; + state.dbType = getNowDbInst().type; dbDialect = getDbDialect(state.dbType); state.db = props.db; @@ -415,10 +451,24 @@ onBeforeUnmount(() => { endLoading(); }); +const formatDataValues = (datas: any) => { + // mysql数据暂不做处理 + if (DbType.mysql === getNowDbInst().type) { + return; + } + + for (let data of datas) { + for (let column of props.columns!) { + data[column.columnName] = getFormatTimeValue(dbDialect.getDataType(column.columnType), data[column.columnName]); + } + } +}; + const setTableData = (datas: any) => { tableRef.value.scrollTo({ scrollLeft: 0, scrollTop: 0 }); selectionRowsMap.clear(); cellUpdateMap.clear(); + formatDataValues(datas); state.datas = datas; setTableColumns(props.columns); }; @@ -629,6 +679,7 @@ const onEnterEditMode = (rowData: any, column: any, rowIndex = 0, columnIndex = rowIndex: rowIndex, colIndex: columnIndex, oldValue: rowData[column.dataKey], + dataType: dbDialect.getDataType(column.columnType), }; }; @@ -745,6 +796,28 @@ const rowClass = (row: any) => { return ''; }; +/** + * 根据数据库返回的时间字段类型，获取格式化后的时间值 + * @param dataType getDataType返回的数据类型 + * @param originValue 原始值 + * @return 格式化后的值 + */ +const getFormatTimeValue = (dataType: DataType, originValue: string): string => { + if (!originValue || dataType === DataType.Number || dataType === DataType.String) { + return originValue; + } + switch (dataType) { + case DataType.Time: + return dateStrFormat('HH:mm:ss', originValue); + case DataType.Date: + return dateStrFormat('yyyy-MM-dd', originValue); + case DataType.DateTime: + return dateStrFormat('yyyy-MM-dd HH:mm:ss', originValue); + default: + return originValue; + } +}; + const getColumnTip = (column: any) => { const comment = column.columnComment; return `${column.columnType} ${comment ? ' | ' + comment : ''}`; @@ -812,5 +885,15 @@ defineExpose({ padding: 2px; height: 12px; } + .edit-time-picker { + height: 26px; + width: 100%; + .el-input__prefix { + display: none; + } + .el-input__inner { + text-align: center; + } + } } diff --git a/mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue b/mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue index 46bc1307..cddee980 100644 --- a/mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue +++ b/mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue @@ -183,6 +183,35 @@ class="w100" /> + + + + @@ -203,6 +232,7 @@ import { ElMessage } from 'element-plus'; import { DbInst } from '@/views/ops/db/db'; import DbTableData from './DbTableData.vue'; +import { DataType, DbDialect, getDbDialect } from '@/views/ops/db/dialect'; const props = defineProps({ dbId: { @@ -270,9 +300,10 @@ const state = reactive({ }, tableHeight: '600px', hasUpdatedFileds: false, + dbDialect: {} as DbDialect, }); -const { datas, condition, loading, columns, pageNum, pageSize, pageSizes, count, hasUpdatedFileds, conditionDialog, addDataDialog } = toRefs(state); +const { datas, condition, loading, columns, pageNum, pageSize, pageSizes, count, hasUpdatedFileds, conditionDialog, addDataDialog, dbDialect } = toRefs(state); watch( () => props.tableHeight, @@ -288,7 +319,6 @@ const getNowDbInst = () => { onMounted(async () => { console.log('in table data mounted'); state.tableHeight = props.tableHeight; - const columns = await getNowDbInst().loadColumns(props.dbName, props.tableName); columns.forEach((x: any) => { x.show = true; @@ -296,6 +326,8 @@ onMounted(async () => { state.columns = columns; await onRefresh(); + state.dbDialect = getDbDialect(getNowDbInst().type); + // 点击除选择列按钮外，若存在条件弹窗，则关闭该弹窗 window.addEventListener('click', handlerWindowClick); }); diff --git a/mayfly_go_web/src/views/ops/db/db.ts b/mayfly_go_web/src/views/ops/db/db.ts index 00ce5b4c..98c51c0d 100644 --- a/mayfly_go_web/src/views/ops/db/db.ts +++ b/mayfly_go_web/src/views/ops/db/db.ts @@ -373,15 +373,6 @@ 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 字符串 diff --git a/mayfly_go_web/src/views/ops/db/dialect/dm_dialect.ts b/mayfly_go_web/src/views/ops/db/dialect/dm_dialect.ts index 6211b4a5..40c91592 100644 --- a/mayfly_go_web/src/views/ops/db/dialect/dm_dialect.ts +++ b/mayfly_go_web/src/views/ops/db/dialect/dm_dialect.ts @@ -1,5 +1,15 @@ import { DbInst } from '../db'; -import { DbDialect, sqlColumnType, DialectInfo, RowDefinition, IndexDefinition, EditorCompletionItem, commonCustomKeywords, EditorCompletion } from './index'; +import { + DbDialect, + sqlColumnType, + DialectInfo, + RowDefinition, + IndexDefinition, + EditorCompletionItem, + commonCustomKeywords, + EditorCompletion, + DataType, +} from './index'; import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/sql/sql.js'; export { DMDialect, DM_TYPE_LIST }; @@ -435,16 +445,6 @@ class DMDialect implements DbDialect { 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; @@ -615,4 +615,23 @@ class DMDialect implements DbDialect { } return ''; } + + getDataType(columnType: string): DataType { + if (DbInst.isNumber(columnType)) { + return DataType.Number; + } + // 日期时间类型 + if (/datetime|timestamp/gi.test(columnType)) { + return DataType.DateTime; + } + // 日期类型 + if (/date/gi.test(columnType)) { + return DataType.Date; + } + // 时间类型 + if (/time/gi.test(columnType)) { + return DataType.Time; + } + return DataType.String; + } } diff --git a/mayfly_go_web/src/views/ops/db/dialect/index.ts b/mayfly_go_web/src/views/ops/db/dialect/index.ts index 6528944c..9c1d2206 100644 --- a/mayfly_go_web/src/views/ops/db/dialect/index.ts +++ b/mayfly_go_web/src/views/ops/db/dialect/index.ts @@ -52,6 +52,29 @@ export interface EditorCompletion { variables: EditorCompletionItem[]; } +// 定义一个数据类型的枚举，包含字符串、数字、日期、时间、日期时间 +export enum DataType { + String = 'string', + Number = 'number', + Date = 'date', + Time = 'time', + DateTime = 'datetime', +} + +/** 列数据类型角标 */ +export const ColumnTypeSubscript = { + /** 字符串 */ + string: 'abc', + /** 数字 */ + number: '123', + /** 日期 */ + date: 'icon-clock', + /** 时间 */ + time: 'icon-clock', + /** 日期时间 */ + datetime: 'icon-clock', +}; + // 数据库基础信息 export interface DialectInfo { /** @@ -106,12 +129,6 @@ export interface DbDialect { getDefaultIndex(): IndexDefinition; - /** - * 根据数据库完整字段类型，获取类型简称。如字符串为abc、数字为123、日期为date等。 - * @param columnType 数据库原始字段类型 - */ - getShortColumnType(columnType: string): string; - /** * 包裹数据库表名、字段名等，避免使用关键字为字段名或表名时报错 * @param name 名称 @@ -143,6 +160,9 @@ export interface DbDialect { * @param changeData 改变数据 */ getModifyIndexSql(tableName: string, changeData: { del: any[]; add: any[]; upd: any[] }): string; + + /** 通过数据库字段类型，返回基本数据类型 */ + getDataType: (columnType: string) => DataType; } let mysqlDialect = new MysqlDialect(); diff --git a/mayfly_go_web/src/views/ops/db/dialect/mysql_dialect.ts b/mayfly_go_web/src/views/ops/db/dialect/mysql_dialect.ts index 10f93671..ebd6010b 100644 --- a/mayfly_go_web/src/views/ops/db/dialect/mysql_dialect.ts +++ b/mayfly_go_web/src/views/ops/db/dialect/mysql_dialect.ts @@ -1,5 +1,5 @@ import { DbInst } from '../db'; -import { commonCustomKeywords, DbDialect, DialectInfo, EditorCompletion, EditorCompletionItem, IndexDefinition, RowDefinition } from './index'; +import { commonCustomKeywords, DataType, DbDialect, DialectInfo, EditorCompletion, EditorCompletionItem, IndexDefinition, RowDefinition } from './index'; import { language as mysqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql.js'; export { MYSQL_TYPE_LIST, MysqlDialect }; @@ -179,16 +179,6 @@ 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}\``; }; @@ -314,4 +304,23 @@ class MysqlDialect implements DbDialect { } return ''; } + + getDataType(columnType: string): DataType { + if (DbInst.isNumber(columnType)) { + return DataType.Number; + } + // 日期时间类型 + if (/datetime|timestamp/gi.test(columnType)) { + return DataType.DateTime; + } + // 日期类型 + if (/date/gi.test(columnType)) { + return DataType.Date; + } + // 时间类型 + if (/time/gi.test(columnType)) { + return DataType.Time; + } + return DataType.String; + } } diff --git a/mayfly_go_web/src/views/ops/db/dialect/postgres_dialect.ts b/mayfly_go_web/src/views/ops/db/dialect/postgres_dialect.ts index 3b474ccf..2f13cce0 100644 --- a/mayfly_go_web/src/views/ops/db/dialect/postgres_dialect.ts +++ b/mayfly_go_web/src/views/ops/db/dialect/postgres_dialect.ts @@ -1,5 +1,15 @@ import { DbInst } from '../db'; -import { commonCustomKeywords, DbDialect, DialectInfo, EditorCompletion, EditorCompletionItem, IndexDefinition, RowDefinition, sqlColumnType } from './index'; +import { + commonCustomKeywords, + DataType, + DbDialect, + DialectInfo, + EditorCompletion, + EditorCompletionItem, + IndexDefinition, + RowDefinition, + sqlColumnType, +} from './index'; import { language as pgsqlLanguage } from 'monaco-editor/esm/vs/basic-languages/pgsql/pgsql.js'; export { PostgresqlDialect, GAUSS_TYPE_LIST }; @@ -190,16 +200,6 @@ 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; }; @@ -382,4 +382,23 @@ class PostgresqlDialect implements DbDialect { } return ''; } + + getDataType(columnType: string): DataType { + if (DbInst.isNumber(columnType)) { + return DataType.Number; + } + // 日期时间类型 + if (/datetime|timestamp/gi.test(columnType)) { + return DataType.DateTime; + } + // 日期类型 + if (/date/gi.test(columnType)) { + return DataType.Date; + } + // 时间类型 + if (/time/gi.test(columnType)) { + return DataType.Time; + } + return DataType.String; + } }