TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-04 08:20:25 +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

130
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',
},
class: 'el-textarea',
},
[
h('textarea', {
attrs: {
class: 'el-textarea__inner',
autocomplete: 'off',
rows: 8,
},
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,
};
},
});