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

feat: 小功能优化&前端基于setup语法糖重构

Browse Source
This commit is contained in:
meilin.huang
2022-10-29 20:08:15 +08:00
committed by 刘宗洋
parent a6d9a4b5ae
commit 03291594b1
147 changed files with 9089 additions and 9951 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
mayfly_go_web/src/views/ops/db/component/SqlExecDialog.vue
View File

@@ -2,7 +2,8 @@
<div>
<el-dialog title="待执行SQL" v-model="dialogVisible" :show-close="false" width="600px">
如需执行多条sql，需要在【数据库管理】配置连接参数：multiStatements=true
<codemirror height="350px" class="codesql" ref="cmEditor" language="sql" v-model="sqlValue" :options="cmOptions" />
<codemirror height="350px" class="codesql" ref="cmEditor" language="sql" v-model="sqlValue"
:options="cmOptions" />
<el-input ref="remarkInputRef" v-model="remark" placeholder="请输入执行备注" class="mt5" />
<template #footer>
<span class="dialog-footer">
@@ -14,8 +15,8 @@
</div>
</template>
<script lang="ts">
import { toRefs, ref, nextTick, reactive, defineComponent } from 'vue';
<script lang="ts" setup>
import { toRefs, ref, nextTick, reactive } from 'vue';
import { dbApi } from '../api';
import { ElDialog, ElButton, ElInput, ElMessage, InputInstance } from 'element-plus';
// import base style
@@ -28,126 +29,116 @@ import { format as sqlFormatter } from 'sql-formatter';
import { SqlExecProps } from './SqlExecBox';
export default defineComponent({
name: 'SqlExecDialog',
components: {
codemirror,
ElButton,
ElDialog,
ElInput,
const props = defineProps({
visible: {
type: Boolean,
},
props: {
visible: {
type: Boolean,
},
dbId: {
type: [Number],
},
db: {
type: String,
},
sql: {
type: String,
},
dbId: {
type: [Number],
},
setup(props: any) {
const remarkInputRef = ref<InputInstance>();
const state = reactive({
dialogVisible: false,
sqlValue: '',
dbId: 0,
db: '',
remark: '',
btnLoading: false,
cmOptions: {
tabSize: 4,
mode: 'text/x-sql',
lineNumbers: true,
line: true,
indentWithTabs: true,
smartIndent: true,
matchBrackets: true,
theme: 'base16-light',
autofocus: true,
extraKeys: { Tab: 'autocomplete' }, // 自定义快捷键
},
});
state.sqlValue = props.sql;
let runSuccessCallback: any;
let cancelCallback: any;
let runSuccess: boolean = false;
/**
* 执行sql
*/
const runSql = async () => {
if (!state.remark) {
ElMessage.error('请输入执行的备注信息');
return;
}
try {
state.btnLoading = true;
await dbApi.sqlExec.request({
id: state.dbId,
db: state.db,
remark: state.remark,
sql: state.sqlValue.trim(),
});
ElMessage.success('执行成功');
runSuccess = true;
} catch (e) {
runSuccess = false;
}
if (runSuccess) {
if (runSuccessCallback) {
runSuccessCallback();
}
cancel();
}
state.btnLoading = false;
};
const cancel = () => {
state.dialogVisible = false;
// 没有执行成功，并且取消回调函数存在，则执行
if (!runSuccess && cancelCallback) {
cancelCallback();
}
setTimeout(() => {
state.dbId = 0;
state.sqlValue = '';
state.remark = '';
runSuccessCallback = null;
cancelCallback = null;
runSuccess = false;
}, 200);
};
const open = (props: SqlExecProps) => {
runSuccessCallback = props.runSuccessCallback;
cancelCallback = props.cancelCallback;
state.sqlValue = sqlFormatter(props.sql);
state.dbId = props.dbId;
state.db = props.db;
state.dialogVisible = true;
nextTick(() => {
setTimeout(() => {
remarkInputRef.value?.focus();
});
});
};
return {
...toRefs(state),
remarkInputRef,
open,
runSql,
cancel,
};
db: {
type: String,
},
sql: {
type: String,
},
})
const cmOptions = {
tabSize: 4,
mode: 'text/x-sql',
lineNumbers: true,
line: true,
indentWithTabs: true,
smartIndent: true,
matchBrackets: true,
theme: 'base16-light',
autofocus: true,
extraKeys: { Tab: 'autocomplete' }, // 自定义快捷键
}
const remarkInputRef = ref<InputInstance>();
const state = reactive({
dialogVisible: false,
sqlValue: '',
dbId: 0,
db: '',
remark: '',
btnLoading: false,
});
const {
dialogVisible,
sqlValue,
remark,
btnLoading
} = toRefs(state)
state.sqlValue = props.sql as any;
let runSuccessCallback: any;
let cancelCallback: any;
let runSuccess: boolean = false;
/**
* 执行sql
*/
const runSql = async () => {
if (!state.remark) {
ElMessage.error('请输入执行的备注信息');
return;
}
try {
state.btnLoading = true;
await dbApi.sqlExec.request({
id: state.dbId,
db: state.db,
remark: state.remark,
sql: state.sqlValue.trim(),
});
ElMessage.success('执行成功');
runSuccess = true;
} catch (e) {
runSuccess = false;
}
if (runSuccess) {
if (runSuccessCallback) {
runSuccessCallback();
}
cancel();
}
state.btnLoading = false;
};
const cancel = () => {
state.dialogVisible = false;
// 没有执行成功，并且取消回调函数存在，则执行
if (!runSuccess && cancelCallback) {
cancelCallback();
}
setTimeout(() => {
state.dbId = 0;
state.sqlValue = '';
state.remark = '';
runSuccessCallback = null;
cancelCallback = null;
runSuccess = false;
}, 200);
};
const open = (props: SqlExecProps) => {
runSuccessCallback = props.runSuccessCallback;
cancelCallback = props.cancelCallback;
state.sqlValue = sqlFormatter(props.sql);
state.dbId = props.dbId;
state.db = props.db;
state.dialogVisible = true;
nextTick(() => {
setTimeout(() => {
remarkInputRef.value?.focus();
});
});
};
</script>
<style lang="scss">
.codesql {