sql执行器开发
This commit is contained in:
暮光：城中城
29
zyplayer-doc-ui/db-ui/package-lock.json
generated
29
zyplayer-doc-ui/db-ui/package-lock.json
generated
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "element-starter",
|
||||
"name": "console-ui",
|
||||
"requires": true,
|
||||
"lockfileVersion": 1,
|
||||
"dependencies": {
|
||||
@@ -239,7 +239,7 @@
|
||||
},
|
||||
"async-validator": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1565685468183&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
|
||||
"integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
|
||||
"requires": {
|
||||
"babel-runtime": "6.x"
|
||||
@@ -2014,7 +2014,7 @@
|
||||
},
|
||||
"deepmerge": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "http://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
|
||||
"integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
|
||||
},
|
||||
"define-properties": {
|
||||
@@ -2237,9 +2237,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.8.2",
|
||||
"resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.8.2.tgz",
|
||||
"integrity": "sha1-Iaeky5Jhaw+LddTU5jfToc2MCd4=",
|
||||
"version": "2.11.1",
|
||||
"resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.11.1.tgz",
|
||||
"integrity": "sha1-K2f57uPtouaISHPBxYnL4w2anWA=",
|
||||
"requires": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
@@ -2770,7 +2770,8 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -3185,7 +3186,8 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -3241,6 +3243,7 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -3284,12 +3287,14 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -4637,7 +4642,7 @@
|
||||
},
|
||||
"normalize-wheel": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "http://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnormalize-wheel%2Fdownload%2Fnormalize-wheel-1.0.1.tgz",
|
||||
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
|
||||
},
|
||||
"nth-check": {
|
||||
@@ -6032,7 +6037,7 @@
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "http://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
|
||||
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
|
||||
},
|
||||
"resolve": {
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
<span slot="title">系统管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/data/datasourceManage"><i class="el-icon-coin"></i>数据源管理</el-menu-item>
|
||||
<el-menu-item index="/data/export"><i class="el-icon-finished"></i>数据库表导出</el-menu-item>
|
||||
<el-menu-item index="/data/executor"><i class="el-icon-video-play"></i>SQL执行器</el-menu-item>
|
||||
<el-menu-item index="/data/export"><i class="el-icon-finished"></i>数据库表导出</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
<el-tree :props="defaultProps" :data="databaseList" @node-click="handleNodeClick"
|
||||
|
||||
@@ -16,6 +16,9 @@ var URL = {
|
||||
|
||||
executeSql: '/zyplayer-doc-db/executor/execute',
|
||||
executeSqlCancel: '/zyplayer-doc-db/executor/cancel',
|
||||
updateFavorite: '/zyplayer-doc-db/executor/favorite/add',
|
||||
favoriteList: '/zyplayer-doc-db/executor/favorite/list',
|
||||
historyList: '/zyplayer-doc-db/executor/history/list',
|
||||
|
||||
systemUpgradeInfo: '/system/info/upgrade',
|
||||
};
|
||||
|
||||
@@ -12,10 +12,11 @@
|
||||
</div>
|
||||
<pre id="sqlExecutorEditor" style="width: 100%;height: 500px;"></pre>
|
||||
<div>
|
||||
<el-button v-on:click="doExecutorSql" type="primary" plain size="small" icon="el-icon-video-play">执行</el-button>
|
||||
<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="small" icon="el-icon-video-pause">取消执行</el-button>
|
||||
<el-button v-else v-on:click="doExecutorSql" type="primary" plain size="small" icon="el-icon-video-play">执行</el-button>
|
||||
<div style="float: right;">
|
||||
<el-button v-on:click="" plain size="small" icon="el-icon-star-off">收藏</el-button>
|
||||
<el-button v-on:click="" plain size="small" icon="el-icon-tickets">历史记录</el-button>
|
||||
<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>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -24,15 +25,43 @@
|
||||
{{executeError}}
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-table :data="executeResultList" stripe border style="width: 100%; margin-bottom: 5px;">
|
||||
<el-table :data="executeResultList" stripe border style="width: 100%; margin-bottom: 5px;" v-loading="sqlExecuting">
|
||||
<el-table-column width="60px" v-if="executeResultCols.length > 0">
|
||||
<template slot-scope="scope">{{scope.row._index}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in executeResultCols" :prop="item.prop" :label="item.prop"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-drawer title="我是外面的 Drawer" :visible.sync="historyDrawerVisible" size="50%">
|
||||
<div>
|
||||
<el-button @click="">打开里面的!</el-button>
|
||||
<el-drawer title="收藏及历史" :visible.sync="historyDrawerVisible" size="50%" class="data-executor-vue-out">
|
||||
<div style="padding: 10px;">
|
||||
<el-tabs value="favorite">
|
||||
<el-tab-pane label="我的收藏" name="favorite">
|
||||
<el-table :data="myFavoriteList" stripe border style="width: 100%; margin-bottom: 5px;">
|
||||
<!-- <el-table-column prop="name" label="标题"></el-table-column>-->
|
||||
<el-table-column prop="content" label="SQL"></el-table-column>
|
||||
<!-- <el-table-column prop="createTime" label="收藏时间" width="160px"></el-table-column>-->
|
||||
<el-table-column label="操作" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" v-on:click="inputFavoriteSql(scope.row.content)">输入</el-button>
|
||||
<el-button size="mini" type="danger" v-on:click="delFavorite(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="历史记录" name="history">
|
||||
<el-table :data="myHistoryListList" stripe border style="width: 100%; margin-bottom: 5px;">
|
||||
<el-table-column prop="content" label="SQL"></el-table-column>
|
||||
<el-table-column label="操作" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" v-on:click="inputFavoriteSql(scope.row.content)">输入</el-button>
|
||||
<el-button size="mini" type="success" v-on:click="addFavorite(scope.row.content)">收藏</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
@@ -53,18 +82,21 @@
|
||||
databaseList: [],
|
||||
choiceDatabase: "",
|
||||
|
||||
sqlExecuting: false,
|
||||
executeResultList: [],
|
||||
executeResultCols: [],
|
||||
sqlExecutorEditor: {},
|
||||
nowExecutorId: 1,
|
||||
executeError: "",
|
||||
|
||||
// 收藏及历史
|
||||
historyDrawerVisible: false,
|
||||
myFavoriteList: [],
|
||||
myHistoryListList: [],
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
app = this;
|
||||
window.tableMetaInfo = "helloWorld";
|
||||
window.tableMetaInfo = "";
|
||||
app.sqlExecutorEditor = app.initAceEditor("sqlExecutorEditor", 20);
|
||||
this.loadDatasourceList();
|
||||
},
|
||||
@@ -87,6 +119,45 @@
|
||||
app.$message.success("取消成功");
|
||||
});
|
||||
},
|
||||
loadHistoryAndFavoriteList() {
|
||||
this.historyDrawerVisible = true;
|
||||
this.loadHistoryList();
|
||||
this.loadFavoriteList();
|
||||
},
|
||||
loadFavoriteList() {
|
||||
this.common.post(this.apilist1.favoriteList, {}, function (json) {
|
||||
app.myFavoriteList = json.data || [];
|
||||
});
|
||||
},
|
||||
loadHistoryList() {
|
||||
this.common.post(this.apilist1.historyList, {}, function (json) {
|
||||
app.myHistoryListList = json.data || [];
|
||||
});
|
||||
},
|
||||
addFavorite(sqlValue) {
|
||||
if (!sqlValue) {
|
||||
sqlValue = this.sqlExecutorEditor.getSelectedText();
|
||||
if (!sqlValue) {
|
||||
sqlValue = this.sqlExecutorEditor.getValue();
|
||||
}
|
||||
}
|
||||
var param = {name: '我的收藏', content: sqlValue};
|
||||
this.common.post(this.apilist1.updateFavorite, param, function (json) {
|
||||
app.$message.success("收藏成功");
|
||||
app.loadFavoriteList();
|
||||
});
|
||||
},
|
||||
delFavorite(row) {
|
||||
var param = {id: row.id, yn: 0};
|
||||
this.common.post(this.apilist1.updateFavorite, param, function (json) {
|
||||
app.$message.success("删除成功");
|
||||
app.loadFavoriteList();
|
||||
});
|
||||
},
|
||||
inputFavoriteSql(content) {
|
||||
this.sqlExecutorEditor.setValue(content);
|
||||
this.historyDrawerVisible = false;
|
||||
},
|
||||
doExecutorSql() {
|
||||
if (!this.choiceDatasourceId) {
|
||||
app.$message.error("请先选择数据源");
|
||||
@@ -97,32 +168,43 @@
|
||||
app.executeResultCols = [];
|
||||
|
||||
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
|
||||
var sql = this.sqlExecutorEditor.getValue();
|
||||
var sqlValue = this.sqlExecutorEditor.getSelectedText();
|
||||
if (!sqlValue) {
|
||||
sqlValue = this.sqlExecutorEditor.getValue();
|
||||
}
|
||||
this.sqlExecuting = true;
|
||||
this.common.postNonCheck(this.apilist1.executeSql, {
|
||||
sourceId: this.choiceDatasourceId,
|
||||
executeId: this.nowExecutorId,
|
||||
sql: sql,
|
||||
sql: sqlValue,
|
||||
params: '',
|
||||
}, function (json) {
|
||||
app.sqlExecuting = false;
|
||||
if (json.errCode != 200) {
|
||||
app.executeError = json.errMsg;
|
||||
return;
|
||||
}
|
||||
var resultData = JSON.parse(json.data) || {};
|
||||
var dataList = resultData.result || [];
|
||||
app.executeResultList = dataList;
|
||||
var executeResultCols = [];
|
||||
if (dataList.length > 0) {
|
||||
for (var key in dataList[0]) {
|
||||
executeResultCols.push({prop: key});
|
||||
}
|
||||
for (var i = 0; i < dataList.length; i++) {
|
||||
dataList[i]._index = i + 1;
|
||||
}
|
||||
}
|
||||
app.executeResultList = dataList;
|
||||
app.executeResultCols = executeResultCols;
|
||||
});
|
||||
},
|
||||
loadDatasourceList() {
|
||||
this.common.post(this.apilist1.datasourceList, {}, function (json) {
|
||||
app.datasourceList = json.data || [];
|
||||
if (app.datasourceList.length > 0) {
|
||||
app.choiceDatasourceId = app.datasourceList[0].id;
|
||||
}
|
||||
});
|
||||
},
|
||||
datasourceChangeEvents() {
|
||||
@@ -144,4 +226,17 @@
|
||||
.data-executor-vue .el-card__body{
|
||||
padding: 10px;
|
||||
}
|
||||
.data-executor-vue .el-table td, .el-table th{
|
||||
padding: 6px 0;
|
||||
}
|
||||
.data-executor-vue-out .el-tabs__nav-scroll{
|
||||
padding-left: 20px;
|
||||
}
|
||||
.data-executor-vue-out .el-button+.el-button{
|
||||
margin-left: 0px;
|
||||
}
|
||||
.data-executor-vue-out .el-table__body-wrapper{
|
||||
height: calc(100vh - 180px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user