From bcbd003dbe4161db9390d42937ba8c4892c62567 Mon Sep 17 00:00:00 2001 From: "96607667.zh" Date: Sun, 16 Jan 2022 05:19:44 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=88=9B=E5=BB=BA?= =?UTF-8?q?=E8=A1=A8=E5=92=8C=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/ops/component/Table/CreateTable.vue | 260 ++++++++++++++++++ .../src/views/ops/component/Table/service.js | 3 + .../src/views/ops/component/TableEdit.vue | 69 +++++ mayfly_go_web/src/views/ops/db/DbList.vue | 11 + mayfly_go_web/src/views/ops/db/SqlExec.vue | 103 +++++-- mayfly_go_web/yarn.lock | 10 +- 6 files changed, 420 insertions(+), 36 deletions(-) create mode 100644 mayfly_go_web/src/views/ops/component/Table/CreateTable.vue create mode 100644 mayfly_go_web/src/views/ops/component/Table/service.js create mode 100644 mayfly_go_web/src/views/ops/component/TableEdit.vue diff --git a/mayfly_go_web/src/views/ops/component/Table/CreateTable.vue b/mayfly_go_web/src/views/ops/component/Table/CreateTable.vue new file mode 100644 index 00000000..80a17233 --- /dev/null +++ b/mayfly_go_web/src/views/ops/component/Table/CreateTable.vue @@ -0,0 +1,260 @@ + + + + + diff --git a/mayfly_go_web/src/views/ops/component/Table/service.js b/mayfly_go_web/src/views/ops/component/Table/service.js new file mode 100644 index 00000000..7365c0d0 --- /dev/null +++ b/mayfly_go_web/src/views/ops/component/Table/service.js @@ -0,0 +1,3 @@ +export const TYPE_LIST = ['bigint', 'binary', 'blob', 'char', 'datetime', 'decimal', 'double', 'enum', 'float', 'int', 'json', 'longblob', 'longtext', 'mediumblob', 'mediumtext', 'set', 'smallint', 'text', 'time', 'timestamp', 'tinyint', 'varbinary', 'varchar'] + +export const CHARACTER_SET_NAME_LIST = ['armscii8', 'ascii', 'big5', 'binary', 'cp1250', 'cp1251', 'cp1256', 'cp1257', 'cp850', 'cp852', 'cp866', 'cp932', 'dec8', 'eucjpms', 'euckr', 'gb18030', 'gb2312', 'gbk', 'geostd8', 'greek', 'hebrew', 'hp8', 'keybcs2', 'koi8r', 'koi8u', 'latin1', 'latin2', 'latin5', 'latin7', 'macce', 'macroman', 'sjis', 'swe7', 'tis620', 'ucs2', 'ujis', 'utf16', 'utf16le', 'utf32', 'utf8', 'utf8mb4'] \ No newline at end of file diff --git a/mayfly_go_web/src/views/ops/component/TableEdit.vue b/mayfly_go_web/src/views/ops/component/TableEdit.vue new file mode 100644 index 00000000..658d2147 --- /dev/null +++ b/mayfly_go_web/src/views/ops/component/TableEdit.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/mayfly_go_web/src/views/ops/db/DbList.vue b/mayfly_go_web/src/views/ops/db/DbList.vue index 17d75652..4be63a93 100644 --- a/mayfly_go_web/src/views/ops/db/DbList.vue +++ b/mayfly_go_web/src/views/ops/db/DbList.vue @@ -79,6 +79,9 @@ :before-close="closeTableInfo" v-model="tableInfoDialog.visible" > + + 创建表 + @@ -148,6 +151,7 @@ v-model:visible="dbEditDialog.visible" v-model:db="dbEditDialog.data" > + @@ -156,15 +160,18 @@ import { toRefs, reactive, onMounted, defineComponent } from 'vue'; import { ElMessage, ElMessageBox } from 'element-plus'; import { formatByteSize } from '@/common/utils/format'; import DbEdit from './DbEdit.vue'; +import CreateTable from '../component/Table/CreateTable.vue'; import { dbApi } from './api'; import { projectApi } from '../project/api.ts'; export default defineComponent({ name: 'DbList', components: { DbEdit, + CreateTable, }, setup() { const state = reactive({ + dbId: 0, permissions: { saveDb: 'db:save', delDb: 'db:del', @@ -207,6 +214,9 @@ export default defineComponent({ data: null, title: '新增数据库', }, + tableCreateDialog: { + visible: false, + }, }); onMounted(async () => { @@ -265,6 +275,7 @@ export default defineComponent({ const tableInfo = async (row: any) => { state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: row.id }); + state.dbId = row.id; state.tableInfoDialog.visible = true; }; diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue index d608d4a4..affee342 100644 --- a/mayfly_go_web/src/views/ops/db/SqlExec.vue +++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue @@ -22,7 +22,28 @@ - + + + + + + + + + + + + + + + + +
@@ -258,7 +268,7 @@ export default defineComponent({ state.execRes.tableColumn = []; state.execRes.data = []; state.execRes.emptyResText = '查询中...'; - + console.log(sql); const res = await dbApi.sqlExec.request({ id: state.dbId, sql: sql, @@ -373,7 +383,7 @@ export default defineComponent({ // 赋值第一个表信息 if (state.tableMetadata.length > 0) { state.tableName = state.tableMetadata[0]['tableName']; - changeTable(state.tableName, false); + changeTable(state.tableName, true); } }); @@ -480,6 +490,44 @@ export default defineComponent({ runSqlStr(`SELECT * FROM ${tableName} ORDER BY create_time DESC LIMIT 25`); } }; + // 监听单元格点击事件 + const cellClick = (row: any, column: any, cell: any, event: any) => { + console.log(cell.children[0].tagName); + let isDiv = cell.children[0].tagName === 'DIV'; + let text = cell.children[0].innerText; + let div = cell.children[0]; + if (isDiv) { + let input = document.createElement('input'); + input.setAttribute('value', text); + input.setAttribute('style', 'height:30px'); + cell.replaceChildren(input); + input.focus(); + input.addEventListener('blur', () => { + div.innerText = input.value; + cell.replaceChildren(div); + console.log(input.value, column.rawColumnKey, text, 42242); + if (input.value !== text) { + dbApi.sqlExec.request({ + id: state.dbId, + sql: `UPDATE ${state.tableName} SET ${column.rawColumnKey} = '${input.value}' WHERE ${column.rawColumnKey} = '${text}'`, + }); + } + }); + } + }; + // 添加新数据行 + // const addRow = () => { + // let obj: any = {}; + // (state.execRes.tableColumn as any) = state.columnMetadata.map((i) => (i as any).columnName); + // state.execRes.tableColumn.forEach((item) => { + // obj[item] = 'NULL'; + // }); + // (state.execRes.data as any).push(obj); + // let values = Object.values(obj).join(','); + // console.log(values, 4343); + // let sql = `INSERT INTO \`${state.tableName}\` VALUES (${values});`; + // // runSqlStr(sql); + // }; /** * 自动提示功能 @@ -532,6 +580,7 @@ export default defineComponent({ changeProjectEnv, inputRead, changeTable, + cellClick, runSql, beforeUpload, getUploadSqlFileUrl, diff --git a/mayfly_go_web/yarn.lock b/mayfly_go_web/yarn.lock index 27e8cad3..d2c30a0c 100644 --- a/mayfly_go_web/yarn.lock +++ b/mayfly_go_web/yarn.lock @@ -1670,15 +1670,7 @@ vue-router@^4.0.2: dependencies: "@vue/devtools-api" "^6.0.0-beta.18" -vue3-json-editor@^1.1.3: - version "1.1.3" - resolved "https://registry.nlark.com/vue3-json-editor/download/vue3-json-editor-1.1.3.tgz#2ca32c9f1403b3cc3ac71072f3a76669f0140e5e" - integrity sha1-LKMsnxQDs8w6xxBy86dmafAUDl4= - dependencies: - core-js "^3.6.5" - vue "^3.1.2" - -vue@^3.0.5, vue@^3.1.2: +vue@^3.0.5: version "3.2.26" resolved "https://registry.npmmirror.com/vue/download/vue-3.2.26.tgz#5db575583ecae495c7caa5c12fd590dffcbb763e" integrity sha512-KD4lULmskL5cCsEkfhERVRIOEDrfEL9CwAsLYpzptOGjaGFNWo3BQ9g8MAb7RaIO71rmVOziZ/uEN/rHwcUIhg==