合并冲突

2025-12-25 09:06:34 +08:00 · 2022-01-19 17:39:23 +08:00
parent 471f9d6240 7626c24991
commit c53fb97a6e
8 changed files with 231 additions and 166 deletions
--- a/mayfly_go_web/src/common/SocketBuilder.ts
+++ b/mayfly_go_web/src/common/SocketBuilder.ts
@@ -9,7 +9,6 @@ class SocketBuilder {
      if (!url) {
        throw new Error('websocket url不能为空');
      }
-      console.log(url)
      this.websocket = new WebSocket(url);
    }
  
--- a/mayfly_go_web/src/components/codemirror/codemirror.vue
+++ b/mayfly_go_web/src/components/codemirror/codemirror.vue
@@ -310,9 +310,6 @@ export default defineComponent({
 </script>

 <style lang="scss">
-.CodeMirror {
-    height: 500px;
-}
 .in-coder-panel {
    flex-grow: 1;
    display: flex;
--- a/mayfly_go_web/src/views/ops/db/DbList.vue
+++ b/mayfly_go_web/src/views/ops/db/DbList.vue
@@ -118,15 +118,16 @@
        </el-dialog>

        <el-dialog width="40%" :title="`${chooseTableName} 字段信息`" v-model="columnDialog.visible">
-            <el-table border :data="columnDialog.columns">
+            <el-table border :data="columnDialog.columns" 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-column width="80" prop="nullable" label="是否可为空" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="columnComment" label="备注" show-overflow-tooltip> </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog width="40%" :title="`${chooseTableName} 索引信息`" v-model="indexDialog.visible">
-            <el-table border :data="indexDialog.indexs">
+            <el-table border :data="indexDialog.indexs" size="small">
                <el-table-column prop="indexName" label="索引名" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="columnName" label="列名" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="seqInIndex" label="列序列号" show-overflow-tooltip> </el-table-column>
@@ -135,7 +136,7 @@
        </el-dialog>

        <el-dialog width="55%" :title="`${chooseTableName} Create-DDL`" v-model="ddlDialog.visible">
-            <el-input disabled type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="ddlDialog.ddl"> </el-input>
+            <el-input disabled type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="ddlDialog.ddl" size="small"> </el-input>
        </el-dialog>

        <db-edit
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -15,23 +15,13 @@
                                    </el-option>
                                </el-select>
                            </el-form-item>
-                            <el-form-item>
-                                <el-button
-                                    type="success"
-                                    @click="
-                                        newQueryShow = true;
-                                        activeName = 'second';
-                                    "
-                                    >新建查询</el-button
-                                >
-                            </el-form-item>
                        </template>
                    </project-env-select>
                </el-col>
            </el-row>
        </div>

-        <el-container style="border: 1px solid #eee; margin-top: 1px; height: 630px">
+        <el-container style="border: 1px solid #eee; margin-top: 1px; height: 640px">
            <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%">
@@ -53,40 +43,11 @@
                    </el-table>
                </el-main>
            </el-container>
-            <el-tabs style="width: 70%; margin-left: 10px" v-model="activeName">
-                <el-tab-pane label="数据信息" name="first">
-                    <el-table
-                        @cell-dblclick="cellClick"
-                        @row-contextmenu="contextmenu"
-                        @sort-change="tableSortChange"
-                        style="margin-top: 1px"
-                        :data="execRes.data"
-                        size="small"
-                        max-height="580"
-                        :empty-text="execRes.emptyResText"
-                        stripe
-                        border
-                    >
-                        <el-table-column
-                            min-width="100"
-                            :width="flexColumnWidth(item, execRes.data)"
-                            align="center"
-                            v-for="item in execRes.tableColumn"
-                            :key="item"
-                            :prop="item"
-                            :label="item"
-                            show-overflow-tooltip
-                            :sortable="nowTableName != '' ? 'custom' : false"
-                        >
-                        </el-table-column>
-                    </el-table>
-                    <el-row v-if="dbId">
-                        <el-button @click="addRow" type="text" icon="plus"></el-button>
-                    </el-row>
-                </el-tab-pane>

-                <el-tab-pane label="新建查询" v-if="newQueryShow" name="second">
-                    <el-aside id="sqlcontent" width="100%" style="background-color: rgb(238, 241, 246)">
+            <el-tabs @tab-remove="removeDataTab" @tab-click="onDataTabClick" style="width: 70%; margin-left: 10px" v-model="activeName">
+                <el-tab-pane label="查询" :name="queryTabName">
+                    <div>
+                        <div>
                            <div class="toolbar">
                                <div class="fl">
                                    <el-upload
@@ -126,9 +87,13 @@
                                    <el-button @click="deleteSql" type="danger" icon="delete" plain size="small">删除</el-button>
                                </div>
                            </div>
+                        </div>
+
+                        <div class="mt10">
                            <codemirror
                                @mousemove="listenMouse"
                                @beforeChange="onBeforeChange"
+                                height="300px"
                                class="codesql"
                                ref="cmEditor"
                                language="sql"
@@ -136,10 +101,67 @@
                                :options="cmOptions"
                            />
                            <el-button-group :style="btnStyle">
-                            <el-button @click="runSql" type="success" icon="video-play" size="small" plain>执行</el-button>
+                                <el-button @click="onRunSql" type="success" icon="video-play" size="small" plain>执行</el-button>
                                <el-button @click="formatSql" type="primary" icon="magic-stick" size="small" plain>格式化</el-button>
                            </el-button-group>
-                    </el-aside>
+                        </div>
+
+                        <div class="mt10">
+                            <el-table
+                                @cell-dblclick="cellClick"
+                                style="margin-top: 1px"
+                                :data="execRes.data"
+                                size="small"
+                                max-height="220"
+                                empty-text="tips: select *开头的单表查询或点击表名默认查询的数据,可双击数据在线修改"
+                                stripe
+                                border
+                            >
+                                <el-table-column
+                                    min-width="100"
+                                    :width="flexColumnWidth(item, execRes.data)"
+                                    align="center"
+                                    v-for="item in execRes.tableColumn"
+                                    :key="item"
+                                    :prop="item"
+                                    :label="item"
+                                    show-overflow-tooltip
+                                >
+                                </el-table-column>
+                            </el-table>
+                        </div>
+                    </div>
+                </el-tab-pane>
+
+                <el-tab-pane closable v-for="dt in dataTabs" :key="dt.name" :label="dt.label" :name="dt.name">
+                    <el-table
+                        @cell-dblclick="cellClick"
+                        @row-contextmenu="contextmenu"
+                        @sort-change="onTableSortChange"
+                        style="margin-top: 1px"
+                        :data="dt.execRes.data"
+                        size="small"
+                        max-height="580"
+                        :empty-text="dt.execRes.emptyResText"
+                        stripe
+                        border
+                    >
+                        <el-table-column
+                            min-width="100"
+                            :width="flexColumnWidth(item, dt.execRes.data)"
+                            align="center"
+                            v-for="item in dt.execRes.tableColumn"
+                            :key="item"
+                            :prop="item"
+                            :label="item"
+                            show-overflow-tooltip
+                            :sortable="nowTableName != '' ? 'custom' : false"
+                        >
+                        </el-table-column>
+                    </el-table>
+                    <el-row v-if="dbId">
+                        <el-button @click="addRow" type="text" icon="plus"></el-button>
+                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-container>
@@ -190,20 +212,21 @@ export default defineComponent({
            nowTableName: '', // 当前表格数据操作的数据库表名，用于双击编辑表内容使用
            tableMetadata: [],
            columnMetadata: [],
-            sqlName: '',
-            sqlNames: [],
+            sqlName: '', // 当前sql模板名
+            sqlNames: [], // 所有sql模板名
            sql: '',
-            newQueryShow: false,
-            activeName: 'first',
+            activeName: 'Query',
+            queryTabName: 'Query',
            sqlTabs: {
                tabs: [] as any,
                active: '',
                index: 1,
            },
+            dataTabs: {}, // 点击表信息后执行结果数据展示tabs
+            // 点击执行按钮执行结果信息
            execRes: {
-                tableColumn: [],
                data: [],
-                emptyResText: '没有数据',
+                tableColumn: [],
            },
            params: {
                pageNum: 1,
@@ -272,40 +295,14 @@ export default defineComponent({
        /**
         * 执行sql
         */
-        const runSql = async () => {
+        const onRunSql = async () => {
            notNull(state.dbId, '请先选择数据库');
            // 没有选中的文本，则为全部文本
            let sql = getSql();
            notNull(sql, '内容不能为空');
-            runSqlStr(sql);
-        };

-        /**
-         * 执行sql str
-         *
-         * @param sql 执行的sql
-         * @param replaceColumn 是否替换列名，如点击排序时，不需要替换表头，否则排序icon无法回显
-         */
-        const runSqlStr = async (sql: string, replaceColumn: boolean = true) => {
-            state.activeName = 'first';
-            sql = sql.trim();
-            if (replaceColumn) {
-                state.execRes.tableColumn = [];
-            }
-            state.execRes.data = [];
-            state.execRes.emptyResText = '查询中...';
-            const res = await dbApi.sqlExec.request({
-                id: state.dbId,
-                sql: sql,
-            });
-            state.execRes.emptyResText = '没有数据';
-            if (replaceColumn) {
-                state.execRes.tableColumn = res.colNames;
-            }
-            state.execRes.data = res.res;
-
-            // 设置当前可双击修改表数据内容的表名，即只有以该字符串开头的sql才可修改表数据内容
-            if (sql.startsWith('SELECT *') || sql.startsWith('select *')) {
+            // 即只有以该字符串开头的sql才可修改表数据内容
+            if (sql.startsWith('SELECT *') || sql.startsWith('select *') || sql.startsWith('SELECT\n  *')) {
                const tableName = sql.split(/from/i)[1];
                if (tableName) {
                    state.nowTableName = tableName.trim().split(' ')[0];
@@ -315,6 +312,50 @@ export default defineComponent({
            } else {
                state.nowTableName = '';
            }
+
+            const colAndData: any = await runSql(sql);
+            state.execRes.data = colAndData.res;
+            state.execRes.tableColumn = colAndData.colNames;
+        };
+
+        /**
+         * 执行sql str
+         *
+         * @param sql 执行的sql
+         */
+        const runSql = (sql: string) => {
+            return dbApi.sqlExec.request({
+                id: state.dbId,
+                sql: sql.trim(),
+            });
+        };
+
+        const removeDataTab = (targetName: string) => {
+            const tabNames = Object.keys(state.dataTabs);
+            let activeName = state.activeName;
+            tabNames.forEach((name, index) => {
+                if (name === targetName) {
+                    const nextTab = tabNames[index + 1] || tabNames[index - 1] || state.queryTabName;
+                    if (nextTab) {
+                        activeName = nextTab;
+                    }
+                }
+            });
+            state.activeName = activeName;
+            delete state.dataTabs[targetName];
+        };
+
+        /**
+         * 数据tab点击
+         */
+        const onDataTabClick = (tab: any) => {
+            const name = tab.props.name;
+            // 不是查询tab，则为表数据tab，同时赋值当前表名，用于在线修改表数据等
+            if (name != state.queryTabName) {
+                state.nowTableName = name;
+            } else {
+                state.nowTableName = '';
+            }
        };

        const beforeUpload = (file: File) => {
@@ -422,7 +463,7 @@ export default defineComponent({
                // 赋值第一个表信息
                if (state.tableMetadata.length > 0) {
                    state.tableName = state.tableMetadata[0]['tableName'];
-                    changeTable(state.tableName, true);
+                    changeTable(state.tableName, false);
                }
            });

@@ -437,10 +478,66 @@ export default defineComponent({
            getSqlNames();
        };

+        // 选择表事件
+        const changeTable = async (tableName: string, execSelectSql: boolean = true) => {
+            if (tableName == '') {
+                return;
+            }
+            dbApi.columnMetadata
+                .request({
+                    id: state.dbId,
+                    tableName: tableName,
+                })
+                .then((res) => {
+                    state.columnMetadata = res;
+                });
+
+            if (!execSelectSql) {
+                return;
+            }
+
+            // 执行sql，并新增tab
+            state.nowTableName = tableName;
+            state.activeName = tableName;
+
+            let tab = state.dataTabs[tableName];
+            if (!tab) {
+                tab = {
+                    label: tableName,
+                    name: tableName,
+                    execRes: {
+                        tableColumn: [],
+                        data: [],
+                        emptyResText: '执行中...',
+                    },
+                };
+            }
+            state.dataTabs[tableName] = tab;
+            state.dataTabs[tableName].execRes.tableColumn = [];
+            state.dataTabs[tableName].execRes.data = [];
+
+            const colAndData: any = await runSql(`SELECT * FROM ${tableName} LIMIT ${state.defalutLimit}`);
+            state.dataTabs[tableName].execRes.emptyResText = '没有数据';
+            state.dataTabs[tableName].execRes.tableColumn = colAndData.colNames;
+            state.dataTabs[tableName].execRes.data = colAndData.res;
+        };
+
        const changeSqlTemplate = () => {
            getUserSql();
        };

+        /**
+         * 表排序字段变更
+         */
+        const onTableSortChange = async (sort: any) => {
+            if (!state.nowTableName) {
+                return;
+            }
+            const sortType = sort.order == 'descending' ? 'DESC' : 'ASC';
+            const colAndData: any = await runSql(`SELECT * FROM ${state.nowTableName} ORDER BY ${sort.prop} ${sortType} LIMIT ${state.defalutLimit}`);
+            state.dataTabs[state.activeName].execRes.data = colAndData.res;
+        };
+
        /**
         * 获取用户保存的sql模板内容
         */
@@ -511,30 +608,14 @@ export default defineComponent({
            state.tableName = '';
            state.tableMetadata = [];
            state.columnMetadata = [];
+            state.dataTabs = {};
+            state.sql = '';
+            state.sqlNames = [];
+            state.activeName = state.queryTabName;
            state.execRes.data = [];
            state.execRes.tableColumn = [];
-            state.sql = '';
            state.cmOptions.hintOptions.tables = [];
        };
-
-        // 选择表事件
-        const changeTable = (tableName: string, execSelectSql: boolean = true) => {
-            if (tableName == '') {
-                return;
-            }
-            dbApi.columnMetadata
-                .request({
-                    id: state.dbId,
-                    tableName: tableName,
-                })
-                .then((res) => {
-                    state.columnMetadata = res;
-                });
-
-            if (execSelectSql) {
-                runSqlStr(`SELECT * FROM ${tableName} LIMIT ${state.defalutLimit}`);
-            }
-        };
        // 某一行鼠标右击
        const contextmenu = (row: any, column: any, event: any) => {
            event.preventDefault();
@@ -688,11 +769,8 @@ export default defineComponent({
                    }
                },
            })
-                .then(async (action) => {
-                    await dbApi.sqlExec.request({
-                        id: state.dbId,
-                        sql: sql,
-                    });
+                .then((action) => {
+                    runSql(sql);
                    successFunc();
                })
                .catch(() => {
@@ -764,17 +842,6 @@ export default defineComponent({
            getSelection(e);
        };

-        /**
-         * 表排序字段变更
-         */
-        const tableSortChange = (sort: any) => {
-            if (!state.nowTableName) {
-                return;
-            }
-            const sortType = sort.order == 'descending' ? 'DESC' : 'ASC';
-            runSqlStr(`SELECT * FROM ${state.nowTableName} ORDER BY ${sort.prop} ${sortType} LIMIT ${state.defalutLimit}`, false);
-        };
-
        return {
            ...toRefs(state),
            cmEditor,
@@ -782,7 +849,9 @@ export default defineComponent({
            inputRead,
            changeTable,
            cellClick,
-            runSql,
+            onRunSql,
+            removeDataTab,
+            onDataTabClick,
            beforeUpload,
            getUploadSqlFileUrl,
            execSqlFileSuccess,
@@ -795,9 +864,9 @@ export default defineComponent({
            formatSql,
            onBeforeChange,
            listenMouse,
-            tableSortChange,
            addRow,
            contextmenu,
+            onTableSortChange,
        };
    },
 });
@@ -809,13 +878,8 @@ export default defineComponent({
    font-weight: 600;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
 }
-#sqlcontent {
-    .CodeMirror {
-        height: 300px !important;
-    }
-}
 .el-tabs__header {
-    padding: 0 20px;
+    padding: 0 10px;
    background-color: #fff;
 }
 </style>
--- a/mayfly_go_web/src/views/ops/machine/FileManage.vue
+++ b/mayfly_go_web/src/views/ops/machine/FileManage.vue
@@ -29,7 +29,7 @@
                </el-table-column>
                <el-table-column label="操作" width>
                    <template #default="scope">
-                        <el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success" icon="success" size="small" plain
+                        <el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success" icon="success-filled" size="small" plain
                            >确定</el-button
                        >
                        <el-button v-if="scope.row.id != null" @click="getConf(scope.row)" type="primary" icon="tickets" size="small" plain
--- a/mayfly_go_web/src/views/ops/machine/ProcessList.vue
+++ b/mayfly_go_web/src/views/ops/machine/ProcessList.vue
@@ -128,7 +128,9 @@ export default defineComponent({
            // root         1  0.0  0.0 125632  3352 ?        Ss    2019 154:04 /usr/lib/systemd/systemd --system --deserialize 22
            const psStrings = res.split('\n');
            const ps = [];
-            for (let i = 1; i < psStrings.length; i++) {
+            // 如果有根据名称查进程，则第一行没有表头
+            const index = state.params.name == '' ? 1 : 0;
+            for (let i = index; i < psStrings.length; i++) {
                const psStr = psStrings[i];
                const process = psStr.split(/\s+/);
                if (process.length < 2) {
--- a/server/devops/application/db_app.go
+++ b/server/devops/application/db_app.go
@@ -291,7 +291,7 @@ const (

 	// mysql 列信息元数据
 	MYSQL_COLOUMN_MA = `SELECT table_name tableName, column_name columnName, column_type columnType,
-	column_comment columnComment, column_key columnKey, extra from information_schema.columns
+	column_comment columnComment, column_key columnKey, extra, is_nullable nullable from information_schema.columns
 	WHERE table_name in (%s) AND table_schema = (SELECT database()) ORDER BY ordinal_position limit 18000`
 )

--- a/server/mayfly-go.sql
+++ b/server/mayfly-go.sql
@@ -396,6 +396,8 @@ INSERT INTO `t_sys_resource` VALUES (62, 61, 2, 1, '基本权限', 'redis:data',
 INSERT INTO `t_sys_resource` VALUES (63, 60, 1, 1, 'redis管理', 'manage', 2, '{\"component\":\"RedisList\",\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"RedisList\"}', 1, 'admin', 1, 'admin', '2021-07-20 10:48:04', '2021-07-20 10:48:04');
 INSERT INTO `t_sys_resource` VALUES (64, 63, 2, 1, '基本权限', 'redis:manage', 1, 'null', 1, 'admin', 1, 'admin', '2021-07-20 10:48:26', '2021-07-20 10:48:26');
 INSERT INTO `t_sys_resource` VALUES (70, 48, 2, 1, '项目删除', 'project:del', 6, 'null', 1, 'admin', 1, 'admin', '2021-08-17 11:20:37', '2021-08-17 11:20:37');
+INSERT INTO `t_sys_resource` VALUES (71, 61, 2, 1, '数据保存', 'redis:data:save', 6, 'null', 1, 'admin', 1, 'admin', '2021-08-17 11:20:37', '2021-08-17 11:20:37');
+INSERT INTO `t_sys_resource` VALUES (72, 3, 2, 1, '终止进程', 'machine:killprocess', 6, 'null', 1, 'admin', 1, 'admin', '2021-08-17 11:20:37', '2021-08-17 11:20:37');
 COMMIT;

 -- ----------------------------