manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化SQL编辑器引入方式，优化自动提示，优化sqlserver表、字段注释获取和更新方式，数据查询时改为需指定数据库，便于库表检索提示

Browse Source
This commit is contained in:
暮光：城中城
2021-06-20 00:41:28 +08:00
parent da9146f75f
commit a30d9318da
23 changed files with 745 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
zyplayer-doc-ui/db-ui/src/views/data/CodeMirrorEditor.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<div class="data-executor-vue">
<textarea id="sqlTest" style="width: 100%;height: 100px;margin-top: 0;"></textarea>
</div>
</template>
<script>
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/lib/codemirror.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/addon/display/autorefresh.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/addon/display/fullscreen.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
export default {
data() {
return {
}
},
mounted: function () {
this.initCodemirrorEditor();
},
methods: {
initCodemirrorEditor(){
CodeMirror.resolveMode("text/x-sql").keywords["left join"] = true;
CodeMirror.resolveMode("text/x-sql").keywords["left"] = true;
CodeMirror.resolveMode("text/x-sql").keywords["right join"] = true;
CodeMirror.resolveMode("text/x-sql").keywords["right"] = true;
CodeMirror.resolveMode("text/x-sql").keywords["inner join"] = true;
CodeMirror.resolveMode("text/x-sql").keywords["inner"] = true;
CodeMirror.resolveMode("text/x-sql").keywords["when"] = true;
CodeMirror.resolveMode("text/x-sql").keywords["FROM_DAYS(N)"] = true;
CodeMirror.resolveMode("text/x-sql").keywords["UPGRADE"] = true;
let sqlCodeMirror = CodeMirror.fromTextArea(document.getElementById("sqlTest"), {
mode: "text/x-sql",
theme: "monokai",
lineNumbers: true,
lineWrapping: true,
styleActiveLine: true,
matchBrackets: true,
autoRefresh: true,
extraKeys: {
"Alt-/": "autocomplete",
},
hintOptions: {
completeSingle: false,
tables: {
"t_test_login": ["col_a", "col_B", "col_C"],
"t_test_employee": ["other_columns1", "other_columns2"],
"zyplayer_doc.user_info": [],
}
}
});
sqlCodeMirror.setValue("select * from t_test_login where 1=1");
sqlCodeMirror.on("change", function (editor, change) {
if (change.origin == "+input") {
var textArray = change.text;
//不提示
setTimeout(function () { editor.execCommand("autocomplete"); }, 100);
// if (!ignoreInputCode(textArray)) {
// }
}
});
},
}
}
</script>
<style>
.CodeMirror {
font-size: 16px;
}
.cm-s-monokai span.cm-keyword { line-height: 1em; font-weight: bold; }
</style>

114
zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue
View File

@@ -2,7 +2,7 @@
<div class="data-executor-vue">
<div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin-bottom: 10px;">
<pre id="sqlExecutorEditor" style="width: 100%;height: 500px;margin-top: 0;margin-bottom: 10px;"></pre>
<ace-editor v-model="sqlExecutorContent" @init="sqlExecutorInit" lang="sql" theme="monokai" width="100%" height="60" :options="sqlEditorConfig" :source="executorSource" style="margin-bottom: 10px;"></ace-editor>
<div>
<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="small" icon="el-icon-video-pause">取消执行</el-button>
<el-tooltip v-else effect="dark" content="Ctrl+R、Ctrl+Enter" placement="top">
@@ -36,28 +36,31 @@
</el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" v-for="resultItem in executeResultList" v-if="!!resultItem.index">
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{resultItem.errMsg}}</div>
<el-table v-else :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" :max-height="tableMaxHeight"
@selection-change="handleSelectionChange"
@sort-change="tableSortChange"
:default-sort="tableSort">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column sortable v-for="item in resultItem.dataCols" :prop="item.prop" :label="item.prop" :width="item.width">
<template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top: 10px;"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[50, 100, 300, 500]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableTotalCount">
</el-pagination>
<div v-else-if="resultItem.dataList.length <= 0" style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据</div>
<template v-else>
<el-table :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" :max-height="tableMaxHeight"
@selection-change="handleSelectionChange"
@sort-change="tableSortChange"
:default-sort="tableSort">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column sortable v-for="item in resultItem.dataCols" :prop="item.prop" :label="item.prop" :width="item.width">
<template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top: 10px;"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[50, 100, 300, 500]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableTotalCount">
</el-pagination>
</template>
</el-tab-pane>
</el-tabs>
</div>
@@ -114,14 +117,10 @@
</template>
<script>
import '../../common/lib/ace/ace'
import '../../common/lib/ace/theme-monokai'
import '../../common/lib/ace/mode-sql'
import '../../common/lib/ace/ext-language_tools'
import '../../common/lib/ace/snippets/sql'
import datasourceApi from '../../common/api/datasource'
import copyFormatter from './copy/index'
import sqlFormatter from "sql-formatter";
import aceEditor from "../../common/lib/ace-editor";
export default {
name: 'dataPreview',
@@ -160,19 +159,24 @@
url: 'zyplayer-doc-db/data-view/download',
param: {}
},
// 编辑器
sqlExecutorContent: '',
sqlEditorConfig: {
wrap: true,
autoScrollEditorIntoView: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: 3,
maxLines: 3,
},
executorSource: {}
}
},
components: {
'ace-editor': aceEditor
},
mounted: function () {
let that = this;
this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 3);
this.sqlExecutorEditor.setFontSize(16);
this.sqlExecutorEditor.commands.addCommand({
name: "execute-sql",
bindKey: {win: "Ctrl-R|Ctrl-Shift-R|Ctrl-Enter", mac: "Command-R|Command-Shift-R|Command-Enter"},
exec: function (editor) {
that.doExecutorClick();
}
});
// 延迟设置展开的目录，edit比app先初始化
// setTimeout(() => {
// this.doExecutorSqlCommon();
@@ -189,6 +193,7 @@
return;
}
this.pageParam = param;
this.executorSource = {sourceId: param.sourceId, dbName: param.dbName, tableName: param.tableName};
this.doExecutorSqlCommon();
// this.vueQueryParam = to.query;
// let newName = {key: this.$route.fullPath, val: '数据-'+this.vueQueryParam.tableName};
@@ -197,6 +202,18 @@
// this.tableStatusInfo = json.data || {};
// });
},
sqlExecutorInit(editor) {
this.sqlExecutorEditor = editor;
this.sqlExecutorEditor.setFontSize(16);
let that = this;
this.sqlExecutorEditor.commands.addCommand({
name: "execute-sql",
bindKey: {win: "Ctrl-R|Ctrl-Shift-R|Ctrl-Enter", mac: "Command-R|Command-Shift-R|Command-Enter"},
exec: function (editor) {
that.doExecutorClick();
}
});
},
handleCurrentChange(to) {
this.currentPage = to;
this.doExecutorSqlCommon();
@@ -219,6 +236,7 @@
},
cancelExecutorSql() {
datasourceApi.executeSqlCancel({executeId: this.nowExecutorId}).then(() => {
this.sqlExecuting = false;
this.$message.success("取消成功");
});
},
@@ -257,9 +275,9 @@
params: '',
};
datasourceApi.dataViewQuery(param).then(json => {
this.sqlExecuting = false;
if (json.errCode !== 200) {
this.executeError = json.errMsg;
this.sqlExecuting = false;
return;
}
let resultList = json.data || [];
@@ -282,8 +300,9 @@
this.executeShowTable = (itemIndex === 1) ? "table0" : "table1";
this.executeResultInfo = executeResultInfo;
this.executeResultList = executeResultList;
this.sqlExecuting = false;
});
}).catch(e => {
this.sqlExecuting = false;
});
},
getExecuteInfoStr(resultData) {
var resultStr = resultData.sql;
@@ -390,19 +409,6 @@
this.downloadDataParam.dropTableFlag = 0;
}
},
initAceEditor(editor, minLines) {
return ace.edit(editor, {
theme: "ace/theme/monokai",
mode: "ace/mode/sql",
wrap: true,
autoScrollEditorIntoView: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: minLines,
maxLines: minLines
});
},
}
}
</script>

190
zyplayer-doc-ui/db-ui/src/views/data/Executor.vue
View File

@@ -2,7 +2,7 @@
<div class="data-executor-vue">
<div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin-bottom: 10px;">
<pre id="sqlExecutorEditor" style="width: 100%;height: 500px;margin-top: 0;"></pre>
<ace-editor v-model="sqlExecutorContent" ref="sqlEditor" @init="sqlExecutorInit" lang="sql" theme="monokai" width="100%" height="500" :options="sqlEditorConfig" :source="executorSource" style="margin-bottom: 10px;"></ace-editor>
<div>
<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="small" icon="el-icon-video-pause">取消执行</el-button>
<el-tooltip v-else effect="dark" content="Ctrl+R、Ctrl+Enter" placement="top">
@@ -12,13 +12,17 @@
<el-button v-on:click="addFavorite('')" plain size="small" icon="el-icon-star-off">收藏</el-button>
<el-button v-on:click="loadHistoryAndFavoriteList" plain size="small" icon="el-icon-tickets">收藏及历史</el-button>
<div style="float: right;">
<el-select v-model="choiceDatasourceGroup" @change="sourceGroupChangeEvents" size="small" filterable placeholder="请先选择分组" style="width: 200px;">
<el-option value="" label="全部分组"></el-option>
<el-option v-for="item in datasourceGroupList" :key="item" :value="item"></el-option>
</el-select>
<!-- 增加了选择数据库后，分组加上就太长了，先去掉，感觉用处不大 -->
<!-- <el-select v-model="choiceDatasourceGroup" @change="sourceGroupChangeEvents" size="small" filterable placeholder="请先选择分组" style="width: 200px;">-->
<!-- <el-option value="" label="全部分组"></el-option>-->
<!-- <el-option v-for="item in datasourceGroupList" :key="item" :value="item"></el-option>-->
<!-- </el-select>-->
<el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" size="small" filterable placeholder="请选择数据源" style="width: 300px;margin-left: 10px;">
<el-option v-for="item in datasourceOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-select v-model="choiceDatabase" @change="databaseChangeEvents" size="small" filterable placeholder="请选择数据库" style="width: 200px;margin-left: 10px;">
<el-option v-for="item in databaseList" :key="item.dbName" :label="item.dbName" :value="item.dbName"></el-option>
</el-select>
</div>
</div>
</el-card>
@@ -45,6 +49,7 @@
</el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" v-for="resultItem in executeResultList" v-if="!!resultItem.index">
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{resultItem.errMsg}}</div>
<div v-else-if="resultItem.dataList.length <= 0" style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据</div>
<el-table v-else :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" max-height="600"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
@@ -114,14 +119,10 @@
</template>
<script>
import '../../common/lib/ace/ace'
import '../../common/lib/ace/theme-monokai'
import '../../common/lib/ace/mode-sql'
import '../../common/lib/ace/ext-language_tools'
import '../../common/lib/ace/snippets/sql'
import copyFormatter from './copy/index'
import sqlFormatter from "sql-formatter"
import datasourceApi from '../../common/api/datasource'
import aceEditor from "../../common/lib/ace-editor";
export default {
data() {
@@ -156,37 +157,39 @@
exportConditionVisible: false,
conditionDataCols: [],
conditionDataColsChoice: [],
// 编辑器
sqlExecutorContent: '',
sqlEditorConfig: {
wrap: true,
autoScrollEditorIntoView: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: 15,
maxLines: 40,
},
executorSource: {},
}
},
components: {
'ace-editor': aceEditor
},
mounted: function () {
this.loadDatasourceList();
// 下面两行先后顺序不能改
this.addEditorCompleter();
this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 15);
this.sqlExecutorEditor.setFontSize(16);
let that = this;
this.sqlExecutorEditor.commands.addCommand({
name: "execute-sql",
bindKey: {win: "Ctrl-R|Ctrl-Shift-R|Ctrl-Enter", mac: "Command-R|Command-Shift-R|Command-Enter"},
exec: function (editor) {
that.doExecutorSql();
}
});
},
methods: {
initAceEditor(editor, minLines) {
return ace.edit(editor, {
theme: "ace/theme/monokai",
mode: "ace/mode/sql",
wrap: true,
autoScrollEditorIntoView: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: minLines,
maxLines: 40,
});
},
sqlExecutorInit(editor) {
this.sqlExecutorEditor = editor;
this.sqlExecutorEditor.setFontSize(16);
let that = this;
this.sqlExecutorEditor.commands.addCommand({
name: "execute-sql",
bindKey: {win: "Ctrl-R|Ctrl-Shift-R|Ctrl-Enter", mac: "Command-R|Command-Shift-R|Command-Enter"},
exec: function (editor) {
that.doExecutorSql();
}
});
},
cancelExecutorSql() {
datasourceApi.executeSqlCancel({executeId: this.nowExecutorId}).then(() => {
this.$message.success("取消成功");
@@ -261,6 +264,7 @@
this.sqlExecuting = true;
datasourceApi.queryExecuteSql({
sourceId: this.choiceDatasourceId,
dbName: this.choiceDatabase,
executeId: this.nowExecutorId,
sql: sqlValue,
params: '',
@@ -298,9 +302,22 @@
this.datasourceGroupList = Array.from(new Set(datasourceGroupList));
if (this.datasourceList.length > 0) {
this.choiceDatasourceId = this.datasourceList[0].id;
this.loadEditorData();
this.executorSource = {sourceId: this.choiceDatasourceId};
this.loadDatabaseList();
}
});
},
loadDatabaseList() {
datasourceApi.databaseList({sourceId: this.choiceDatasourceId}).then(json => {
this.databaseList = json.data || [];
if (this.databaseList.length > 0) {
// 排除系统库
let sysDbName = ["information_schema", "master", "model", "msdb", "tempdb"];
let notSysDbItem = this.databaseList.find(item => sysDbName.indexOf(item.dbName) < 0);
this.choiceDatabase = (!!notSysDbItem) ?notSysDbItem.dbName : this.databaseList[0].dbName;
this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase};
}
});
},
loadEditorData() {
datasourceApi.getEditorData({sourceId: this.choiceDatasourceId}).then(json => {
@@ -322,13 +339,16 @@
this.datasourceOptions = datasourceOptions;
if (datasourceOptions.length > 0) {
this.choiceDatasourceId = datasourceOptions[0].id;
this.executorSource = {sourceId: this.choiceDatasourceId};
this.loadDatabaseList();
}
},
datasourceChangeEvents() {
this.loadEditorData();
this.executorSource = {sourceId: this.choiceDatasourceId};
this.loadDatabaseList();
},
databaseChangeEvents() {
this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase};
},
getExecuteInfoStr(resultData) {
var resultStr = resultData.sql;
@@ -365,100 +385,6 @@
resultObj.updateCount = resultData.updateCount;
return resultObj;
},
addEditorCompleter() {
let that = this;
var languageTools = ace.require("ace/ext/language_tools");
languageTools.addCompleter({
needDestory: true, // 一定得加上这个参数~不然页面生命周期内页面的切换，编辑器会有多个相同的completer
getCompletions: function (editor, session, pos, prefix, callback) {
var isFound = false;
var callbackArr = [];
var lineStr = session.getLine(pos.row).substring(0, pos.column - 1);
if (lineStr.endsWith("from ") || lineStr.endsWith("join ")) {
// 库
for (var i = 0; i < that.editorDbInfo.length; i++) {
callbackArr.push({caption: that.editorDbInfo[i].dbName, snippet: that.editorDbInfo[i].dbName, meta: "database", type: "snippet", score : 1000});
}
// 所有表
for (var key in that.editorDbTableInfo) {
var tableInfo = that.editorDbTableInfo[key];
for (var i = 0; i < tableInfo.length; i++) {
var caption = (!!tableInfo[i].tableComment) ? tableInfo[i].tableName + "-" + tableInfo[i].tableComment : tableInfo[i].tableName;
callbackArr.push({caption: caption, snippet: tableInfo[i].tableName, meta: "table", type: "snippet", score : 1000});
}
}
callback(null, callbackArr);
} else if (lineStr.endsWith(".")) {
// 匹配 库名. 搜索表名
for (var i = 0; i < that.editorDbInfo.length; i++) {
if (lineStr.endsWith(that.editorDbInfo[i].dbName + ".")) {
var tableInfo = that.editorDbTableInfo[that.editorDbInfo[i].dbName];
if (!!tableInfo) {
for (var j = 0; j < tableInfo.length; j++) {
var caption = (!!tableInfo[j].tableComment) ? tableInfo[j].tableName + "-" + tableInfo[j].tableComment : tableInfo[j].tableName;
callbackArr.push({caption: caption, snippet: tableInfo[j].tableName, meta: "table", type: "snippet", score : 1000});
}
isFound = true;
}
}
}
// 未找到，匹配 表名. 搜索字段名
if (!isFound) {
for (var key in that.editorColumnInfo) {
if (!lineStr.endsWith(key + ".")) {
continue;
}
var columnInfo = that.editorColumnInfo[key];
if (!!columnInfo) {
for (var i = 0; i < columnInfo.length; i++) {
var caption = (!!columnInfo[i].description) ? columnInfo[i].name + "-" + columnInfo[i].description : columnInfo[i].name;
callbackArr.push({caption: caption, snippet: columnInfo[i].name, meta: "column", type: "snippet", score : 1000});
}
isFound = true;
}
}
}
callback(null, callbackArr);
} else if (lineStr.endsWith("select ") || lineStr.endsWith("where ") || lineStr.endsWith("and ")) {
var queryText = "";
// 往前加
for (var i = pos.row; i >= 0; i--) {
var tempLine = session.getLine(i);
queryText = tempLine + " " + queryText;
if (tempLine.indexOf(";") >= 0) {
break;
}
}
// 往后加
for (var i = pos.row + 1; i < session.getLength(); i++) {
var tempLine = session.getLine(i);
queryText = queryText + " " + tempLine;
if (tempLine.indexOf(";") >= 0) {
break;
}
}
// 所有表，找下面的字段列表
for (var key in that.editorDbTableInfo) {
var tableInfo = that.editorDbTableInfo[key];
for (var i = 0; i < tableInfo.length; i++) {
if (queryText.indexOf(tableInfo[i].tableName) < 0) {
continue;
}
var columnInfo = that.editorColumnInfo[tableInfo[i].tableName];
if (!!columnInfo) {
for (var j = 0; j < columnInfo.length; j++) {
var caption = (!!columnInfo[j].description) ? columnInfo[j].name + "-" + columnInfo[j].description : columnInfo[j].name;
callbackArr.push({caption: caption, snippet: columnInfo[j].name, meta: "column", type: "snippet", score : 1000});
}
isFound = true;
}
}
}
callback(null, callbackArr);
}
}
});
},
handleSelectionChange(val) {
this.$set(this.choiceResultObj, this.executeShowTable, val);
},

73
zyplayer-doc-ui/db-ui/src/views/data/TransferData.vue
View File

@@ -59,7 +59,7 @@
</el-select>
</el-form-item>
<el-form-item label="查询SQL：">
<pre id="querySqlEditor" style="width: 100%;height: 100px;margin: 0;"></pre>
<ace-editor v-model="querySqlContent" @init="querySqlInit" lang="sql" theme="monokai" width="100%" height="100" :options="editSqlConfig"></ace-editor>
</el-form-item>
<el-form-item label="总条数查询：">
<el-radio v-model="taskEditInfo.needCount" :label="0">不查询</el-radio>
@@ -71,7 +71,7 @@
</el-select>
</el-form-item>
<el-form-item label="入库SQL：">
<pre id="storageSqlEditor" style="width: 100%;height: 100px;margin: 0;"></pre>
<ace-editor v-model="storageSqlContent" @init="storageSqlInit" lang="sql" theme="monokai" width="100%" height="100" :options="editSqlConfig"></ace-editor>
<el-button v-on:click="autoFillStorageSql" style="margin-top: 10px;">智能填充</el-button>
</el-form-item>
</el-form>
@@ -106,14 +106,9 @@
</template>
<script>
import '../../common/lib/ace/ace'
import '../../common/lib/ace/theme-monokai'
import '../../common/lib/ace/mode-sql'
import '../../common/lib/ace/ext-language_tools'
import '../../common/lib/ace/snippets/sql'
import datasourceApi from '../../common/api/datasource'
import aceEditor from "../../common/lib/ace-editor";
var app;
export default {
data() {
return {
@@ -130,31 +125,51 @@
taskViewDialogVisible: false,
taskEditDialogVisible: false,
taskEditInfo: {},
// 编辑器
querySqlEditor: {},
storageSqlEditor: {},
querySqlContent: '',
storageSqlContent: '',
editSqlConfig: {
wrap: true,
autoScrollEditorIntoView: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: 10,
maxLines: 25,
},
}
},
mounted: function () {
app = this;
this.loadDatasourceList();
},
methods: {
editTask(row) {
this.taskEditInfo = JSON.parse(JSON.stringify(row));
this.taskEditDialogVisible = true;
setTimeout(() => {
app.querySqlEditor = app.initAceEditor("querySqlEditor", 10);
app.storageSqlEditor = app.initAceEditor("storageSqlEditor", 10);
app.querySqlEditor.setValue(app.taskEditInfo.querySql, 1);
app.storageSqlEditor.setValue(app.taskEditInfo.storageSql, 1);
}, 200);
},
},
components: {
'ace-editor': aceEditor
},
mounted() {
this.loadDatasourceList();
},
methods: {
editTask(row) {
this.taskEditInfo = JSON.parse(JSON.stringify(row));
this.taskEditDialogVisible = true;
setTimeout(() => {
this.querySqlEditor.setValue(this.taskEditInfo.querySql, 1);
this.storageSqlEditor.setValue(this.taskEditInfo.storageSql, 1);
}, 200);
},
querySqlInit(editor) {
this.querySqlEditor = editor;
this.querySqlEditor.setFontSize(16);
},
storageSqlInit(editor) {
this.storageSqlEditor = editor;
this.storageSqlEditor.setFontSize(16);
},
createNewTask() {
this.taskEditInfo = {querySql: '', storageSql: '', name: '', needCount: 1, queryDatasourceId: '', storageDatasourceId: ''};
this.taskEditDialogVisible = true;
setTimeout(() => {
app.querySqlEditor = app.initAceEditor("querySqlEditor", 10);
app.storageSqlEditor = app.initAceEditor("storageSqlEditor", 10);
app.querySqlEditor.setValue('', 1);
app.storageSqlEditor.setValue('', 1);
this.querySqlEditor.setValue('', 1);
this.storageSqlEditor.setValue('', 1);
}, 200);
},
deleteTask(id) {
@@ -195,7 +210,7 @@
datasourceApi.transferDetail({id: id}).then(json => {
this.taskEditInfo = json.data || {};
setTimeout(() => {
app.viewTaskLoading = false;
this.viewTaskLoading = false;
}, 300);
});
},

1
zyplayer-doc-ui/db-ui/src/views/table/Info.vue
View File

@@ -169,6 +169,7 @@
let columnList = json.data.columnList || [];
for (let i = 0; i < columnList.length; i++) {
columnList[i].inEdit = 0;
columnList[i].description = columnList[i].description || '';
columnList[i].newDesc = columnList[i].description;
}
this.columnList = columnList;

46
zyplayer-doc-ui/db-ui/src/views/table/ProcedureEdit.vue
View File

@@ -17,7 +17,7 @@
<!-- <el-button type="" @click="" icon="el-icon-video-play" size="mini">运行</el-button>-->
<!-- <el-button type="" @click="" icon="el-icon-video-pause" size="mini">停止</el-button>-->
</div>
<pre id="sqlExecutorEditor" style="width: 100%;height: 500px;margin-top: 0;"></pre>
<ace-editor v-model="sqlExecutorContent" @init="sqlExecutorInit" lang="sql" theme="monokai" width="100%" height="500" :options="sqlEditorConfig" style="margin-bottom: 10px;"></ace-editor>
</el-card>
<!--错误信息弹窗-->
<el-dialog title="保存函数失败" :visible.sync="saveProcedureErrVisible" :footer="null">
@@ -59,12 +59,8 @@
</template>
<script>
import '../../common/lib/ace/ace'
import '../../common/lib/ace/theme-monokai'
import '../../common/lib/ace/mode-sql'
import '../../common/lib/ace/ext-language_tools'
import '../../common/lib/ace/snippets/sql'
import datasourceApi from '../../common/api/datasource'
import aceEditor from "../../common/lib/ace-editor";
export default {
data() {
@@ -81,9 +77,23 @@
pageSize: 30,
currentPage: 1,
tableTotalCount: 0,
// 编辑器
sqlExecutorContent: '',
sqlEditorConfig: {
wrap: true,
autoScrollEditorIntoView: true,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: 20,
maxLines: 40,
},
};
},
mounted: function () {
components: {
'ace-editor': aceEditor
},
mounted() {
// 延迟设置展开的目录，edit比app先初始化
setTimeout(() => {
this.$emit('initLoadDataList', {
@@ -92,16 +102,6 @@
dbName: this.vueQueryParam.dbName
});
}, 500);
let that = this;
this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 20);
this.sqlExecutorEditor.setFontSize(16);
this.sqlExecutorEditor.commands.addCommand({
name: "execute-sql",
bindKey: {win: "Ctrl-S", mac: "Command-S"},
exec: function (editor) {
that.saveProcedure();
}
});
this.initQueryParam(this.$route);
this.searchProcedureDetail();
},
@@ -111,6 +111,18 @@
let newName = {key: this.$route.fullPath, val: '编辑函数-' + this.vueQueryParam.procName};
this.$store.commit('global/addTableName', newName);
},
sqlExecutorInit(editor) {
this.sqlExecutorEditor = editor;
this.sqlExecutorEditor.setFontSize(16);
let that = this;
this.sqlExecutorEditor.commands.addCommand({
name: "execute-sql",
bindKey: {win: "Ctrl-S", mac: "Command-S"},
exec: function (editor) {
that.saveProcedure();
}
});
},
handleCurrentChange(to) {
this.currentPage = to;
this.searchProcedureLogList();