diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 9df780aa..a8d2e7b0 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -263,10 +263,20 @@ const NodeTypeDbInst = new NodeType(SqlExecNodeType.DbInst).withLoadNodesFunc((p
const NodeTypeDb = new NodeType(SqlExecNodeType.Db)
.withLoadNodesFunc(async (parentNode: TagTreeNode) => {
const params = parentNode.params;
+ // pg类数据库会多一层schema
if (params.type == 'postgres' || params.type === 'dm') {
- return [new TagTreeNode(`${params.id}.${params.db}.schema-menu`, 'schema', NodeTypePostgresScheamMenu).withParams(params).withIcon(SchemaIcon)];
+ const params = parentNode.params;
+ const { id, db } = params;
+ const schemaNames = await dbApi.pgSchemas.request({ id, db });
+ return schemaNames.map((sn: any) => {
+ // 将db变更为 db/schema;
+ const nParams = { ...params };
+ nParams.schema = sn;
+ nParams.db = nParams.db + '/' + sn;
+ nParams.dbs = schemaNames;
+ return new TagTreeNode(`${params.id}.${params.db}.schema.${sn}`, sn, NodeTypePostgresScheam).withParams(nParams).withIcon(SchemaIcon);
+ });
}
-
return [
new TagTreeNode(`${params.id}.${params.db}.table-menu`, '表', NodeTypeTableMenu).withParams(params).withIcon(TableIcon),
new TagTreeNode(getSqlMenuNodeKey(params.id, params.db), 'SQL', NodeTypeSqlMenu).withParams(params).withIcon(SqlIcon),
@@ -274,23 +284,6 @@ const NodeTypeDb = new NodeType(SqlExecNodeType.Db)
})
.withNodeClickFunc(nodeClickChangeDb);
-// postgres schema模式菜单
-const NodeTypePostgresScheamMenu = new NodeType(SqlExecNodeType.PgSchemaMenu)
- .withLoadNodesFunc(async (parentNode: TagTreeNode) => {
- const params = parentNode.params;
- const { id, db } = params;
- const schemaNames = await dbApi.pgSchemas.request({ id, db });
- return schemaNames.map((sn: any) => {
- // 将db变更为 db/schema;
- const nParams = { ...params };
- nParams.schema = sn;
- nParams.db = nParams.db + '/' + sn;
- nParams.dbs = schemaNames;
- return new TagTreeNode(`${params.id}.${params.db}.schema.${sn}`, sn, NodeTypePostgresScheam).withParams(nParams).withIcon(SchemaIcon);
- });
- })
- .withNodeClickFunc(nodeClickChangeDb);
-
// postgres schema模式
const NodeTypePostgresScheam = new NodeType(SqlExecNodeType.PgSchema)
.withLoadNodesFunc(async (parentNode: TagTreeNode) => {
diff --git a/mayfly_go_web/src/views/ops/db/component/table/ColumnFormItem.vue b/mayfly_go_web/src/views/ops/db/component/table/ColumnFormItem.vue
index 7d0d5dfa..3cb847f7 100644
--- a/mayfly_go_web/src/views/ops/db/component/table/ColumnFormItem.vue
+++ b/mayfly_go_web/src/views/ops/db/component/table/ColumnFormItem.vue
@@ -11,7 +11,7 @@
/>
{
* @param colIndex ci
*/
const canEdit = (rowIndex: number, colIndex: number) => {
- return state.table && nowUpdateCell && nowUpdateCell.rowIndex == rowIndex && nowUpdateCell.colIndex == colIndex;
+ return state.table && nowUpdateCell?.rowIndex == rowIndex && nowUpdateCell?.colIndex == colIndex && state.editorLang === 'string';
};
/**
@@ -646,6 +648,29 @@ const onExportSql = async () => {
);
};
+const getEditorLangByValue = (value: any) => {
+ if (typeof value === 'string') {
+ // 判断是否是json
+ try {
+ if (typeof JSON.parse(value) === 'object') {
+ return 'json';
+ }
+ } catch (e) {
+ /* empty */
+ }
+ // 判断是否是html
+ try {
+ const doc = new DOMParser().parseFromString(value, 'text/html');
+ if (Array.from(doc.body.childNodes).some((node) => node.nodeType === 1)) {
+ return 'html';
+ }
+ } catch (e) {
+ /* empty */
+ }
+ }
+ return 'string';
+};
+
const onEnterEditMode = (rowData: any, column: any, rowIndex = 0, columnIndex = 0) => {
if (!state.table) {
return;
@@ -658,10 +683,24 @@ const onEnterEditMode = (rowData: any, column: any, rowIndex = 0, columnIndex =
oldValue: rowData[column.dataKey],
dataType: dbDialect.getDataType(column.columnType),
};
+
+ // 编辑器语言，如：json、html、string，目前支持json、html使用MonacoEditor编辑器
+ let editorLang = getEditorLangByValue(rowData[column.dataKey]);
+ state.editorLang = editorLang;
+ if (editorLang === 'html' || editorLang === 'json') {
+ TableDataEditorBox({
+ content: rowData[column.dataKey],
+ title: '编辑字段' + column.dataKey,
+ language: editorLang,
+ runSuccessCallback: (newVal: any) => {
+ rowData[column.dataKey] = newVal;
+ onExitEditMode(rowData, column, rowIndex);
+ },
+ });
+ }
};
const onExitEditMode = (rowData: any, column: any, rowIndex = 0) => {
- console.trace('exit');
const oldValue = nowUpdateCell.oldValue;
const newValue = rowData[column.dataKey];
diff --git a/mayfly_go_web/src/views/ops/db/component/table/DbTableDataEditorDialog.ts b/mayfly_go_web/src/views/ops/db/component/table/DbTableDataEditorDialog.ts
new file mode 100644
index 00000000..1e04d619
--- /dev/null
+++ b/mayfly_go_web/src/views/ops/db/component/table/DbTableDataEditorDialog.ts
@@ -0,0 +1,45 @@
+import { h, render, VNode } from 'vue';
+import SqlExecDialog from './DbTableDataEditorDialog.vue';
+
+export type TableDataEditorProps = {
+ content: string;
+ title: string;
+ language: string;
+ runSuccessCallback?: Function;
+ cancelCallback?: Function;
+};
+
+const boxId = 'table-data-editor-id';
+
+const renderBox = (): VNode => {
+ const props: TableDataEditorProps = {
+ content: '',
+ title: '',
+ language: '',
+ };
+ const container = document.createElement('div');
+ container.id = boxId;
+ // 创建 虚拟dom
+ const boxVNode = h(SqlExecDialog, props);
+ // 将虚拟dom渲染到 container dom 上
+ render(boxVNode, container);
+ // 最后将 container 追加到 body 上
+ document.body.appendChild(container);
+
+ return boxVNode;
+};
+
+let boxInstance: any;
+
+const TableDataEditorBox = (props: TableDataEditorProps): void => {
+ if (boxInstance) {
+ const boxVue = boxInstance.component;
+ // 调用open方法显示弹框，注意不能使用boxVue.ctx来调用组件函数（build打包后ctx会获取不到）
+ boxVue.exposed.open(props);
+ } else {
+ boxInstance = renderBox();
+ TableDataEditorBox(props);
+ }
+};
+
+export default TableDataEditorBox;
diff --git a/mayfly_go_web/src/views/ops/db/component/table/DbTableDataEditorDialog.vue b/mayfly_go_web/src/views/ops/db/component/table/DbTableDataEditorDialog.vue
new file mode 100644
index 00000000..f97496de
--- /dev/null
+++ b/mayfly_go_web/src/views/ops/db/component/table/DbTableDataEditorDialog.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
+
+