feat: 数据库数据操作界面优化

2025-11-04 00:10:25 +08:00 · 2022-03-03 11:29:33 +08:00
parent 5def4bc26d
commit d8b99b56cc
4 changed files with 76 additions and 76 deletions
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -12,7 +12,7 @@
    "countup.js": "^2.0.7",
    "cropperjs": "^1.5.11",
    "echarts": "^5.1.1",
-    "element-plus": "^2.0.1",
+    "element-plus": "^2.0.4",
    "@element-plus/icons-vue": "^0.2.4",
    "jsonlint": "^1.6.3",
    "lodash": "^4.17.21",
--- a/mayfly_go_web/src/common/assert.ts
+++ b/mayfly_go_web/src/common/assert.ts
@@ -9,6 +9,39 @@ class AssertError extends Error {
    }
 }

+/**
+ * 断言表达式为true
+ * 
+ * @param condition 条件表达式
+ * @param msg 错误消息
+ */
+ export function isTrue(condition: boolean, msg: string) {
+    if (!condition) {
+        throw new AssertError(msg);
+    }
+}
+
+/**
+ * 断言不能为空值，即null,0,''等
+ * 
+ * @param obj 对象1
+ * @param msg 错误消息
+ */
+ export function notBlank(obj: any, msg: string) {
+    isTrue(obj, msg)
+}
+
+/**
+ * 断言两对象相等
+ * 
+ * @param obj1 对象1
+ * @param obj2 对象2
+ * @param msg 错误消息
+ */
+ export function isEquals(obj1: any, obj2: any, msg: string) {
+    isTrue(obj1 === obj2, msg);
+}
+
 /**
 * 断言对象不为null或undefiend
 * 
@@ -32,42 +65,3 @@ export function notEmpty(str: string, msg: string) {
        throw new AssertError(msg);
    }
 }
-
-/**
- * 断言两对象相等
- * 
- * @param obj1 对象1
- * @param obj2 对象2
- * @param msg 错误消息
- */
-export function isEquals(obj1: any, obj2: any, msg: string) {
-    if (obj1 !== obj2) {
-        throw new AssertError(msg);
-    }
-}
-
-/**
- * 断言不能为空值，即null,0,''等
- * 
- * @param obj1 对象1
- * @param obj2 对象2
- * @param msg 错误消息
- */
- export function notBlank(obj1: any, msg: string) {
-    if (!obj1) {
-        throw new AssertError(msg);
-    }
-}
-
-/**
- * 断言表达式为true
- * 
- * @param obj1 对象1
- * @param obj2 对象2
- * @param msg 错误消息
- */
-export function isTrue(condition: boolean, msg: string) {
-    if (!condition) {
-        throw new AssertError(msg);
-    }
-}
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -15,6 +15,18 @@
                                    </el-option>
                                </el-select>
                            </el-form-item>
+
+                            <el-form-item label-width="40" label="表">
+                                <el-select v-model="tableName" placeholder="选择表查看表数据" @change="changeTable" filterable style="width: 250px">
+                                    <el-option
+                                        v-for="item in tableMetadata"
+                                        :key="item.tableName"
+                                        :label="item.tableName + (item.tableComment != '' ? `【${item.tableComment}】` : '')"
+                                        :value="item.tableName"
+                                    >
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
                        </template>
                    </project-env-select>
                </el-col>
@@ -22,29 +34,7 @@
        </div>

        <el-container id="data-exec" style="border: 1px solid #eee; margin-top: 1px">
-            <el-container style="margin-left: 2px">
-                <el-header style="text-align: left; height: 35px; font-size: 12px; padding: 0px">
-                    <el-select v-model="tableName" placeholder="请选择表" @change="changeTable" filterable style="width: 99%">
-                        <el-option
-                            v-for="item in tableMetadata"
-                            :key="item.tableName"
-                            :label="item.tableName + (item.tableComment != '' ? `【${item.tableComment}】` : '')"
-                            :value="item.tableName"
-                        >
-                        </el-option>
-                    </el-select>
-                </el-header>
-
-                <el-main style="padding: 0px; overflow: hidden">
-                    <el-table :data="columnMetadata" height="100%" size="small">
-                        <el-table-column prop="columnName" label="名称" show-overflow-tooltip> </el-table-column>
-                        <el-table-column prop="columnComment" label="备注" show-overflow-tooltip> </el-table-column>
-                        <el-table-column width="120" prop="columnType" label="类型" show-overflow-tooltip> </el-table-column>
-                    </el-table>
-                </el-main>
-            </el-container>
-
-            <el-tabs @tab-remove="removeDataTab" @tab-click="onDataTabClick" style="width: 70%; margin-left: 10px" v-model="activeName">
+            <el-tabs @tab-remove="removeDataTab" @tab-click="onDataTabClick" style="width: 100%; margin-left: 10px" v-model="activeName">
                <el-tab-pane :label="queryTab.label" :name="queryTab.name">
                    <div>
                        <div>
@@ -158,7 +148,7 @@
                    <el-row class="mt5">
                        <el-input v-model="dt.condition" placeholder="若需条件过滤，输入WHERE之后查询条件点击查询按钮即可" clearable size="small">
                            <template #prepend>
-                                <el-button @click="selectByCondition(dt.name, dt.condition)" icon="search"></el-button>
+                                <el-button @click="selectByCondition(dt.name, dt.condition)" icon="search" size="small"></el-button>
                            </template>
                        </el-input>
                    </el-row>
@@ -187,6 +177,13 @@
                            show-overflow-tooltip
                            :sortable="nowTableName != '' ? 'custom' : false"
                        >
+                            <template #header>
+                                <el-tooltip raw-content effect="dark" placement="top">
+                                    <template #content> {{ getColumnTip(dt.name, item) }} </template>
+                                    <el-icon><question-filled /></el-icon>
+                                </el-tooltip>
+                                {{ item }}
+                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
@@ -332,7 +329,7 @@ export default defineComponent({
            notBlank(state.dbId, '请先选择数据库');
            // 没有选中的文本，则为全部文本
            let sql = getSql();
-            notBlank(sql, '内容不能为空');
+            notBlank(sql.trim(), 'sql内容不能为空');

            state.queryTab.loading = true;
            // 即只有以该字符串开头的sql才可修改表数据内容
@@ -478,6 +475,17 @@ export default defineComponent({
            return flexWidth + 'px';
        };

+        const getColumnTip = (tableName: string, columnName: string) => {
+            // 优先从 table map中获取
+            let columns = tableMap.get(tableName);
+            if (!columns) {
+                return '';
+            }
+            const column = columns.find((c: any) => c.columnName == columnName);
+            const comment = column.columnComment;
+            return `${column.columnType} ${comment ? ' |  ' + comment : ''}`;
+        };
+
        /**
         * 获取sql，如果有鼠标选中，则返回选中内容，否则返回输入框内所有内容
         */
@@ -500,11 +508,6 @@ export default defineComponent({
            clearDb();
            dbApi.tableMetadata.request({ id }).then((res) => {
                state.tableMetadata = res;
-                // 赋值第一个表信息
-                if (state.tableMetadata.length > 0) {
-                    state.tableName = state.tableMetadata[0]['tableName'];
-                    changeTable(state.tableName, false);
-                }
            });

            dbApi.hintTables
@@ -602,7 +605,7 @@ export default defineComponent({
         * 提交事务，用于没有开启自动提交事务
         */
        const onCommit = () => {
-            notBlank(state.dbId, '请先选择数据库');
+            notBlank(state.dbId, "请先选择数据库");
            runSql('COMMIT;');
            ElMessage.success('COMMIT success');
        };
@@ -878,7 +881,7 @@ export default defineComponent({
            if (temp) {
                state.btnStyle.display = 'block';
                if (!state.btnStyle.left) {
-                    state.btnStyle.left = e.target.getBoundingClientRect().left - 550 + 'px';
+                    state.btnStyle.left = e.target.getBoundingClientRect().left;
                    state.btnStyle.top = e.target.getBoundingClientRect().top - 160 + 'px';
                }
            } else {
@@ -906,6 +909,7 @@ export default defineComponent({
            getUploadSqlFileUrl,
            execSqlFileSuccess,
            flexColumnWidth,
+            getColumnTip,
            changeSqlTemplate,
            deleteSql,
            saveSql,
--- a/mayfly_go_web/src/views/ops/db/component/SqlExecDialog.vue
+++ b/mayfly_go_web/src/views/ops/db/component/SqlExecDialog.vue
@@ -2,10 +2,12 @@
    <div>
        <el-dialog title="待执行SQL" v-model="dialogVisible" :show-close="false" width="600px">
            <codemirror height="350px" class="codesql" ref="cmEditor" language="sql" v-model="sql" :options="cmOptions" />
-            <div class="footer mt10">
-                <el-button @click="runSql" type="primary" :loading="btnLoading">执 行</el-button>
-                <el-button @click="cancel">取 消</el-button>
-            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="runSql" type="primary" :loading="btnLoading">执 行</el-button>
+                    <el-button @click="cancel">取 消</el-button>
+                </span>
+            </template>
        </el-dialog>
    </div>
 </template>