多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

286 lines
8.6 KiB

<template>
<v-container class="ma-0 pa-0"
style="height:calc(100% - 50px)"
fluid
:style="cssStyle ? cssStyle : ''">
<monaco-editor
style="height: 100% "
class="editor card"
ref="editor"
@selection="selectionFn"
theme="vs-dark"
v-model="codeLocal"
language="sql"
:minimap="minimap"
:readOnly="readOnly"
:actions="actions"
:tables="tables"
:columnNames="columnNames"
:columnNameCbk="columnNameCbk"
>
</monaco-editor>
</v-container>
</template>
<script>
import MonacoEditor from "./index.js";
import sqlFormatter from "sql-formatter";
const monaco = require("monaco-editor");
export default {
ssr: false,
components: {
MonacoEditor,
// sqlFormatter
},
beforeCreate() {
// console.log(MonacoEditor)
},
data() {
const vm = this;
return {
codeLocal: `${this.code || ""}`,
selection: null,
minimap: {
enabled: true
},
actions: [{
// An unique identifier of the contributed action.
id: 'x-sql-pretify',
// A label of the action that will be presented to the user.
label: 'Format SQL',
// An optional array of keybindings for the action.
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KEY_L
],
// A precondition for this action.
precondition: null,
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run: function (ed) {
vm.pretify()
}
}, {
// An unique identifier of the contributed action.
id: 'x-sql-execute',
// A label of the action that will be presented to the user.
label: 'Run Query',
// An optional array of keybindings for the action.
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter
],
// A precondition for this action.
precondition: null,
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run: function (ed) {
vm.$emit('execute', ed)
}
}, {
id: 'x-sql-run-all',
label: 'Run All',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.Enter
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: function (ed) {
vm.$emit('runAll', ed)
}
}, {
id: 'x-sql-bookmark',
label: 'Bookmark Query',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: function (ed) {
vm.$emit('bookmark', ed)
}
}, {
id: 'x-sql-search',
label: 'Search Query History',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_P
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: function (ed) {
vm.$emit('searchHistory', ed)
}
}, {
id: 'x-sql-toggle-bookmark',
label: 'Show/Hide Bookmarks',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: function (ed) {
vm.$emit('toggleBookmark', ed)
}
}, {
id: 'x-sql-file-open',
label: 'Open File',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_O
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: function (ed) {
vm.$emit('openFile', ed)
}
}, {
id: 'x-sql-save-file',
label: 'Save File',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: function (ed) {
vm.$emit('saveFile', ed)
}
}, {
id: 'x-sql-clear-editor',
label: 'Clear Editor',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_N
],
precondition: null,
keybindingContext: null,
contextMenuGroupId: 'navigation',
contextMenuOrder: 1.5,
run: function (ed) {
vm.$emit('clearEditor', ed)
}
}]
};
},
computed: {},
props: ["code", "cssStyle", "readOnly", "heading", "tables", "columnNames", "columnNameCbk"],
methods: {
selectionFn() {
const editor = this.$refs.editor.getMonaco();
const range = editor.getSelection();
const selectedText = editor.getModel().getValueInRange(range);
// console.log('getValue', editor.getModel())
this.selection = selectedText;
this.selectionRange = range;
},
pretify() {
// console.log("this.code", this.code);
const editor = this.$refs.editor.getMonaco();
if (this.selection && this.selectionRange) {
const op = {
identifier: "prettifySelection",
range: this.selectionRange,
text: sqlFormatter.format(this.selection),
forceMoveMarkers: true
};
editor.executeEdits("sqlFormatter", [op]);
this.selection = null;
this.selectionRange = null;
} else {
// console.log("selected format before:: ", this.codeLocal);
const op = {
identifier: "prettifyDoc",
range: editor.getModel().getFullModelRange(),
text: sqlFormatter.format(this.codeLocal || ""),
forceMoveMarkers: true
};
editor.executeEdits("sqlFormatter", [op]);
}
},
toggleMiniMap() {
const editor = this.$refs.editor.getMonaco();
this.minimap.enabled = !this.minimap.enabled;
editor.updateOptions({
minimap: {
enabled: this.minimap.enabled
}
});
},
getCurrentQuery() {
return this.$refs.editor.getCurrentQuery();
},
getAllContent() {
return this.$refs.editor.getAllContent();
},
focus() {
this.$refs.editor.focus();
}
},
watch: {
codeLocal: function (newValue) {
//INFO: for updating value of prop `code` in parent comp
// console.log("update:code Event Emitted", newValue);
this.$emit("update:code", newValue);
},
code: function (newValue) {
this.codeLocal = newValue;
}
},
created() {
//
}
};
</script>
<style>
.editor {
/* width: 100%;
height: 800px; */
}
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->