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

feat: 数据操作按钮改为选择文本后显示

Browse Source
This commit is contained in:
96607667.zh
2021-12-25 00:58:07 +08:00
parent 3a811b8bee
commit 361185dcfc
3 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,9 +25,9 @@
<el-aside id="sqlcontent" width="65%" 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>
<!-- <el-button v-waves @click="runSql" type="success" icon="el-icon-video-play" size="mini" plain>执行</el-button>
<el-button v-waves @click="formatSql" type="primary" icon="el-icon-magic-stick" size="mini" plain>格式化</el-button>
<el-button v-waves @click="formatSql" type="primary" icon="el-icon-magic-stick" size="mini" plain>格式化</el-button> -->
<el-button v-waves @click="saveSql" type="primary" icon="el-icon-document-add" size="mini" plain>保存</el-button>
</div>
@@ -50,7 +50,19 @@
</el-upload>
</div>
</div>
<codemirror @beforeChange="onBeforeChange" class="codesql" ref="cmEditor" language="sql" v-model="sql" :options="cmOptions" />
<codemirror
@mousemove="listenMouse"
@beforeChange="onBeforeChange"
class="codesql"
ref="cmEditor"
language="sql"
v-model="sql"
:options="cmOptions"
/>
<el-button-group :style="btnStyle">
<el-button v-waves @click="runSql" type="success" icon="el-icon-video-play" size="small" plain>执行</el-button>
<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">
@@ -95,6 +107,7 @@
<script lang="ts">
import { toRefs, reactive, computed, defineComponent, ref } from 'vue';
import { dbApi } from './api';
import _ from 'lodash';
import 'codemirror/addon/hint/show-hint.css';
// import base style
@@ -149,6 +162,13 @@ export default defineComponent({
pageSize: 10,
envId: null,
},
btnStyle: {
position: 'absolute',
zIndex: 1000,
display: 'none',
left: '',
top: '',
},
cmOptions: {
tabSize: 4,
mode: 'text/x-sql',
@@ -415,7 +435,26 @@ export default defineComponent({
const res = await dbApi.dbs.request(state.params);
state.dbs = res.list;
};
/**
* 获取选择文字，显示隐藏按钮，防抖
*/
const getSelection = _.debounce((e) => {
let temp = codemirror.value.getSelection();
if (temp) {
state.btnStyle.display = 'block';
if (!state.btnStyle.left) {
state.btnStyle.left = e.target.getBoundingClientRect().left - 100 + 'px';
state.btnStyle.top = e.target.getBoundingClientRect().top - 20 + 'px';
}
} else {
state.btnStyle.display = 'none';
state.btnStyle.left = '';
state.btnStyle.top = '';
}
}, 100);
const listenMouse = (e: any) => {
getSelection(e);
};
return {
...toRefs(state),
cmEditor,
@@ -432,6 +471,7 @@ export default defineComponent({
clearDb,
formatSql,
onBeforeChange,
listenMouse,
};
},
});