feat:新增创建表和修改数据

mayfly_go_web/src/views/ops/component/Table/CreateTable.vue

@@ -0,0 +1,260 @@
+<template>
+    <div>
+        <el-dialog title="创建表" v-model="dialogVisible" :before-close="cancel" width="90%">
+            <el-form label-position="left" ref="formRef" :model="tableData" label-width="80px">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item prop="tableName" label="表名">
+                            <el-input style="width: 80%" v-model="tableData.tableName" size="mini"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item prop="tableComment" label="备注">
+                            <el-input style="width: 80%" v-model="tableData.tableComment" size="mini"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item prop="characterSet" label="字符集">
+                            <el-select filterable style="width: 80%" v-model="tableData.characterSet" size="mini">
+                                <el-option v-for="item in characterSetNameList" :key="item" :label="item" :value="item"> </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-tabs v-model="activeName">
+                    <el-tab-pane label="字段" name="1">
+                        <el-table :data="tableData.fields.res">
+                            <el-table-column :prop="item.prop" :label="item.label" v-for="item in tableData.fields.colNames" :key="item.prop">
+                                <template v-if="item.prop === 'name'" #default="scope">
+                                    <el-input size="mini" v-model="scope.row.name"></el-input>
+                                </template>
+                                <!--eslint-disable-next-line-->
+                                <template v-if="item.prop === 'type'" #default="scope">
+                                    <el-select filterable size="mini" v-model="scope.row.type">
+                                        <el-option v-for="typeValue in typeList" :key="typeValue" :value="typeValue">{{ typeValue }}</el-option>
+                                    </el-select>
+                                </template>
+                                <!--eslint-disable-next-line-->
+                                <template v-if="item.prop === 'value'" #default="scope">
+                                    <el-input size="mini" v-model="scope.row.value"> </el-input>
+                                </template>
+                                <!--eslint-disable-next-line-->
+                                <template v-if="item.prop === 'length'" #default="scope">
+                                    <el-input size="mini" v-model="scope.row.length"> </el-input>
+                                </template>
+                                <!--eslint-disable-next-line-->
+                                <template v-if="item.prop === 'notNull'" #default="scope">
+                                    <el-checkbox size="mini" v-model="scope.row.notNull"> </el-checkbox>
+                                </template>
+                                <!--eslint-disable-next-line-->
+                                <template v-if="item.prop === 'pri'" #default="scope">
+                                    <el-checkbox size="mini" v-model="scope.row.pri"> </el-checkbox>
+                                </template>
+                                <!--eslint-disable-next-line-->
+                                <template v-if="item.prop === 'auto_increment'" #default="scope">
+                                    <el-checkbox size="mini" v-model="scope.row.auto_increment"> </el-checkbox>
+                                </template>
+                                <!-- <template v-if="item.prop === 'un_signed'" #default="scope">
+                                    <el-checkbox :disabled="scope.row.type === 'int'" size="mini" v-model="scope.row.un_signed"> </el-checkbox>
+                                </template> -->
+                                <!--eslint-disable-next-line-->
+                                <template v-if="item.prop === 'remark'" #default="scope">
+                                    <el-input size="mini" v-model="scope.row.remark"> </el-input>
+                                </template>
+                                <!--eslint-disable-next-line-->
+                                <template v-if="item.prop === 'action'" #default="scope">
+                                    <el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)">删除</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                        <el-row style="margin-top: 20px">
+                            <el-button @click="addRow()" type="text" icon="el-icon-plus"></el-button>
+                        </el-row>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-form>
+            <template #footer>
+                <el-button :loading="btnloading" @click="submit()" type="primary">保存</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+
+<script lang="ts">
+import { watch, toRefs, reactive, defineComponent, ref, getCurrentInstance } from 'vue';
+import { TYPE_LIST, CHARACTER_SET_NAME_LIST } from './service';
+import { dbApi } from '../../db/api';
+import { ElMessage } from 'element-plus';
+export default defineComponent({
+    name: 'createTable',
+    props: {
+        visible: {
+            type: Boolean,
+        },
+        title: {
+            type: String,
+        },
+        data: {
+            type: Object,
+        },
+        dbId: {
+            type: Number,
+        },
+    },
+    setup(props: any, { emit }) {
+        const formRef: any = ref();
+        const { proxy } = getCurrentInstance() as any;
+        const state = reactive({
+            dialogVisible: false,
+            btnloading: false,
+            activeName: '1',
+            typeList: TYPE_LIST,
+            characterSetNameList: CHARACTER_SET_NAME_LIST,
+            tableData: {
+                fields: {
+                    colNames: [
+                        {
+                            prop: 'name',
+                            label: '字段名称',
+                        },
+                        {
+                            prop: 'type',
+                            label: '字段类型',
+                        },
+                        {
+                            prop: 'length',
+                            label: '长度',
+                        },
+                        {
+                            prop: 'value',
+                            label: '默认值',
+                        },
+
+                        {
+                            prop: 'notNull',
+                            label: '非空',
+                        },
+                        {
+                            prop: 'pri',
+                            label: '主键',
+                        },
+                        {
+                            prop: 'auto_increment',
+                            label: '自增',
+                        },
+                        {
+                            prop: 'remark',
+                            label: '备注',
+                        },
+                        {
+                            prop: 'action',
+                            label: '操作',
+                        },
+                    ],
+
+                    res: [
+                        {
+                            name: '',
+                            type: '',
+                            value: '',
+                            length: '',
+                            notNull: false,
+                            pri: false,
+                            auto_increment: false,
+                            remark: '',
+                        },
+                    ],
+                },
+                characterSet: 'utf8mb4',
+                tableName: '',
+                tableComment: '',
+            },
+        });
+
+        watch(props, async (newValue) => {
+            state.dialogVisible = newValue.visible;
+        });
+        const cancel = () => {
+            emit('update:visible', false);
+        };
+        const addRow = () => {
+            state.tableData.fields.res.push({
+                name: '',
+                type: '',
+                value: '',
+                length: '',
+                notNull: false,
+                pri: false,
+                auto_increment: false,
+                remark: '',
+            });
+        };
+        const deleteRow = (index: any) => {
+            state.tableData.fields.res.splice(index, 1);
+        };
+        const submit = async () => {
+            let data = state.tableData;
+            let str = '';
+            let primary_key = '';
+            data.fields.res.forEach((item) => {
+                str += `\`${item.name}\` ${item.type}${+item.length > 0 ? `(${item.length})` : ''} ${item.notNull ? 'NOT NULL' : ''} ${
+                    item.auto_increment ? 'AUTO_INCREMENT' : ''
+                } ${item.value ? 'DEFAULT ' + item.value : item.notNull ? '' : 'DEFAULT NULL'} ${item.remark ? `COMMENT '${item.remark}'` : ''},\n`;
+                if (item.pri) {
+                    primary_key += `\`${item.name}\`,`;
+                }
+            });
+
+            let sql = `
+                CREATE TABLE \`${data.tableName}\` (
+                ${str}
+                PRIMARY KEY (${primary_key.slice(0, -1)})
+                ) ENGINE=InnoDB DEFAULT CHARSET=${data.characterSet} COLLATE=utf8mb4_bin COMMENT='${data.tableComment}';`;
+
+            try {
+                state.btnloading = true;
+                const res = await dbApi.sqlExec.request({
+                    id: props.dbId,
+                    sql: sql,
+                });
+                state.btnloading = false;
+                ElMessage.success('创建成功');
+                proxy.$parent.tableInfo({ id: props.dbId });
+                reset();
+                cancel();
+            } catch (err) {
+                console.error(err);
+                state.btnloading = false;
+                ElMessage.error('创建失败');
+            }
+        };
+        const reset = () => {
+            formRef.value.resetFields();
+            state.tableData.fields.res = [
+                {
+                    name: '',
+                    type: '',
+                    value: '',
+                    length: '',
+                    notNull: false,
+                    pri: false,
+                    auto_increment: false,
+                    remark: '',
+                },
+            ];
+        };
+        return {
+            ...toRefs(state),
+            formRef,
+            cancel,
+            reset,
+            addRow,
+            deleteRow,
+            submit,
+        };
+    },
+});
+</script>
+

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']

mayfly_go_web/src/views/ops/component/TableEdit.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <el-dialog :title="`${title} 详情`" v-model="dialogVisible" :before-close="cancel" width="90%">
+            <el-table @cell-click="cellClick" :data="data.res">
+                <el-table-column :width="200" :prop="item" :label="item" v-for="item in data.colNames" :key="item"> </el-table-column>
+            </el-table>
+        </el-dialog>
+    </div>
+</template>
+
+
+<script lang="ts">
+import { watch, toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'tableEdit',
+    props: {
+        visible: {
+            type: Boolean,
+        },
+        title: {
+            type: String,
+        },
+        data: {
+            type: Object,
+        },
+    },
+    setup(props: any, { emit }) {
+        const state = reactive({
+            dialogVisible: false,
+            data: {
+                res: [],
+                colNames: [],
+            },
+        });
+
+        watch(props, async (newValue) => {
+            state.dialogVisible = newValue.visible;
+            state.data.res = newValue.data.res;
+            state.data.colNames = newValue.data.colNames;
+        });
+        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);
+                cell.replaceChildren(input);
+                input.focus();
+                input.addEventListener('blur', () => {
+                    div.innerText = input.value;
+                    cell.replaceChildren(div);
+                });
+            }
+        };
+        const cancel = () => {
+            emit('update:visible', false);
+        };
+        return {
+            ...toRefs(state),
+            cancel,
+            cellClick,
+        };
+    },
+});
+</script>
+

mayfly_go_web/src/views/ops/db/DbList.vue

@@ -79,6 +79,9 @@
             :before-close="closeTableInfo"
             v-model="tableInfoDialog.visible"
         >
+            <el-row class="mb10">
+                <el-button type="primary" size="mini" @click="tableCreateDialog.visible = true">创建表</el-button>
+            </el-row>
             <el-table border :data="tableInfoDialog.infos" size="small">
                 <el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip></el-table-column>
                 <el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip></el-table-column>
@@ -148,6 +151,7 @@
             v-model:visible="dbEditDialog.visible"
             v-model:db="dbEditDialog.data"
         ></db-edit>
+        <create-table :dbId="dbId" v-model:visible="tableCreateDialog.visible"></create-table>
     </div>
 </template>
 
@@ -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;
         };
 

mayfly_go_web/src/views/ops/db/SqlExec.vue

@@ -22,7 +22,28 @@
         </div>
 
         <el-container style="border: 1px solid #eee; margin-top: 1px; height: 549px">
-            <el-aside id="sqlcontent" width="65%" style="background-color: rgb(238, 241, 246)">
+            <el-container style="margin-left: 2px">
+                <el-header style="text-align: left; height: 45px; 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="mini">
+                        <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-aside id="sqlcontent" width="75%" style="background-color: rgb(238, 241, 246)">
                 <div class="toolbar">
                     <div class="fl">
                         <!-- <el-button v-waves @click="runSql" type="success" icon="el-icon-video-play" size="mini" plain>执行</el-button>
@@ -81,31 +102,17 @@
                     <el-button v-waves @click="formatSql" type="primary" icon="el-icon-magic-stick" size="small" plain>格式化</el-button>
                 </el-button-group>
             </el-aside>
-
-            <el-container style="margin-left: 2px">
-                <el-header style="text-align: left; height: 45px; 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="mini">
-                        <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-container>
-
+        <el-table
-        <el-table style="margin-top: 1px" :data="execRes.data" size="mini" max-height="300" :empty-text="execRes.emptyResText" stripe border>
+            @cell-dblclick="cellClick"
+            style="margin-top: 1px"
+            :data="execRes.data"
+            size="mini"
+            max-height="300"
+            :empty-text="execRes.emptyResText"
+            stripe
+            border
+        >
             <el-table-column
                 min-width="100"
                 :width="flexColumnWidth(item, execRes.data)"
@@ -118,6 +125,9 @@
             >
             </el-table-column>
         </el-table>
+        <!-- <el-row v-if="dbId">
+            <el-button @click="addRow" type="text" icon="el-icon-plus"></el-button>
+        </el-row> -->
     </div>
 </template>
 
@@ -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,

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:
+vue@^3.0.5:
-  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:
   version "3.2.26"
   resolved "https://registry.npmmirror.com/vue/download/vue-3.2.26.tgz#5db575583ecae495c7caa5c12fd590dffcbb763e"
   integrity sha512-KD4lULmskL5cCsEkfhERVRIOEDrfEL9CwAsLYpzptOGjaGFNWo3BQ9g8MAb7RaIO71rmVOziZ/uEN/rHwcUIhg==