TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-03 07:50:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
96607667.zh
2022-01-16 05:19:44 +08:00
parent d7c95cd56e
commit bcbd003dbe
6 changed files with 420 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
mayfly_go_web/src/views/ops/component/Table/CreateTable.vue Normal file
View File

@@ -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>

3
mayfly_go_web/src/views/ops/component/Table/service.js Normal file
View File

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

69
mayfly_go_web/src/views/ops/component/TableEdit.vue Normal file
View File

@@ -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>

11
mayfly_go_web/src/views/ops/db/DbList.vue
View File

@@ -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;
};

103
mayfly_go_web/src/views/ops/db/SqlExec.vue
View File

@@ -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 style="margin-top: 1px" :data="execRes.data" size="mini" max-height="300" :empty-text="execRes.emptyResText" stripe border>
<el-table
@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,

10
mayfly_go_web/yarn.lock
View File

@@ -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==