TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2026-01-02 12:46:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

featL: 添加数据新增和删除

Browse Source
This commit is contained in:
96607667.zh
2022-01-19 17:23:28 +08:00
parent 33377a08e6
commit 471f9d6240
3 changed files with 113 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
mayfly_go_web/src/views/ops/component/Table/CreateTable.vue
View File

@@ -5,17 +5,17 @@
<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-input style="width: 80%" v-model="tableData.tableName" size="small"></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-input style="width: 80%" v-model="tableData.tableComment" size="small"></el-input>
</el-form-item>
</el-col>
<el-col style="margin-top: 20px" :span="12">
<el-form-item prop="characterSet" label="字符集">
<el-select filterable style="width: 80%" v-model="tableData.characterSet" size="mini">
<el-select filterable style="width: 80%" v-model="tableData.characterSet" size="small">
<el-option v-for="item in characterSetNameList" :key="item" :label="item" :value="item"> </el-option>
</el-select>
</el-form-item>
@@ -27,40 +27,40 @@
<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>
<el-input size="small" 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-select filterable size="small" 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>
<el-input size="small" 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>
<el-input size="small" 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>
<el-checkbox size="small" 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>
<el-checkbox size="small" 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>
<el-checkbox size="small" 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>
<el-checkbox :disabled="scope.row.type === 'int'" size="small" 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>
<el-input size="small" v-model="scope.row.remark"> </el-input>
</template>
<!--eslint-disable-next-line-->
<template v-if="item.prop === 'action'" #default="scope">

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

@@ -74,7 +74,7 @@
v-model="tableInfoDialog.visible"
>
<el-row class="mb10">
<el-button type="primary" size="mini" @click="tableCreateDialog.visible = true">创建表</el-button>
<el-button type="primary" size="small" @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>

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

@@ -57,6 +57,7 @@
<el-tab-pane label="数据信息" name="first">
<el-table
@cell-dblclick="cellClick"
@row-contextmenu="contextmenu"
@sort-change="tableSortChange"
style="margin-top: 1px"
:data="execRes.data"
@@ -79,6 +80,9 @@
>
</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">
@@ -139,15 +143,11 @@
</el-tab-pane>
</el-tabs>
</el-container>
<!-- <el-row v-if="dbId">
<el-button @click="addRow" type="text" icon="el-icon-plus"></el-button>
</el-row> -->
</div>
</template>
<script lang="ts">
import { h, toRefs, reactive, computed, defineComponent, ref } from 'vue';
import { h, toRefs, reactive, computed, defineComponent, ref, createApp } from 'vue';
import { dbApi } from './api';
import _ from 'lodash';
@@ -165,7 +165,7 @@ import 'codemirror/addon/hint/sql-hint.js';
import { format as sqlFormatter } from 'sql-formatter';
import { notNull, notEmpty } from '@/common/assert';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElMessage, ElMessageBox, ElMenu, ElMenuItem } from 'element-plus';
import ProjectEnvSelect from '../component/ProjectEnvSelect.vue';
import config from '@/common/config';
import { getSession } from '@/common/utils/storage';
@@ -535,7 +535,77 @@ export default defineComponent({
runSqlStr(`SELECT * FROM ${tableName} LIMIT ${state.defalutLimit}`);
}
};
// 某一行鼠标右击
const contextmenu = (row: any, column: any, event: any) => {
event.preventDefault();
let pagex = event.pageX;
let pagey = event.pageY;
let child = document.getElementById('contextmenu');
if (child) {
document.body.removeChild(child);
}
let div = document.createElement('div');
div.setAttribute('id', 'contextmenu');
div.setAttribute(
'style',
`overflow:hidden;border-radius:10px;border:1px solid #bababa;width:100px;position:absolute;left:${pagex}px;top:${pagey}px;z-index:1000`
);
document.body.appendChild(div);
document.body.addEventListener('click', (e: any) => {
if (!e.target.className.includes('el-menu-item')) {
let child = document.getElementById('contextmenu');
if (child) {
document.body.removeChild(child);
}
}
});
const menu = {
render() {
return h(
ElMenu,
{
activeTextColor: '#413F41',
textColor: '#413F41',
backgroundColor: '#eae4e9',
style: {
width: '100%',
},
},
{
default: () => [
h(
ElMenuItem,
{
onClick: () => {
ElMessageBox({
title: '删除记录',
message: '确定删除这条记录？',
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
})
.then(async (action) => {
let sql = `DELETE FROM ${state.tableName} WHERE id=${row.id};`;
await dbApi.sqlExec.request({
id: state.dbId,
sql: sql,
});
changeTable(state.tableName, true);
})
.catch(() => {});
},
},
{
default: () => ['删除记录'],
}
),
],
}
);
},
};
createApp(menu).mount('#contextmenu');
};
// 监听单元格点击事件
const cellClick = (row: any, column: any, cell: any, event: any) => {
// 如果当前操作的表名不存在，则不允许修改表格内容
@@ -577,29 +647,26 @@ export default defineComponent({
/**
* 弹框提示是否执行sql
*/
const promptExeSql = (sql: string, cancelFunc: any = null) => {
const promptExeSql = (sql: string, cancelFunc: any = null, successFunc: any = null) => {
ElMessageBox({
title: '执行SQL',
message: h(
'div',
{
attrs: {
class: 'el-textarea',
},
},
[
h('textarea', {
attrs: {
class: 'el-textarea__inner',
autocomplete: 'off',
rows: 8,
},
style: {
height: '150px',
width: '100%',
fontWeight: '600',
},
value: sqlFormatter(sql),
onInput: ($event: any) => (sql = $event.target.value),
}),
]
),
@@ -621,11 +688,12 @@ export default defineComponent({
}
},
})
.then((action) => {
dbApi.sqlExec.request({
.then(async (action) => {
await dbApi.sqlExec.request({
id: state.dbId,
sql: sql,
});
successFunc();
})
.catch(() => {
if (cancelFunc) {
@@ -635,18 +703,18 @@ export default defineComponent({
};
// 添加新数据行
// 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);
// };
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';
});
let values = Object.values(obj).join(',');
let sql = `INSERT INTO ${state.tableName} VALUES (${values});`;
promptExeSql(sql, null, () => {
changeTable(state.tableName, true);
});
};
/**
* 自动提示功能
@@ -728,6 +796,8 @@ export default defineComponent({
onBeforeChange,
listenMouse,
tableSortChange,
addRow,
contextmenu,
};
},
});