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

增加DDL建表语句展示，优化数据预览，优化卡顿问题

Browse Source
This commit is contained in:
暮光：城中城
2020-05-08 22:32:54 +08:00
parent 0cf04e8466
commit 713582bebf
13 changed files with 125 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
zyplayer-doc-ui/db-ui/src/common/api/datasource.js
View File

@@ -5,3 +5,7 @@ export function queryExecuteSql(data) {
return request({url: '/zyplayer-doc-db/executor/execute', method: 'post', data: Qs.stringify(data)});
}
export function queryTableDdl(data) {
return request({url: '/zyplayer-doc-db/doc-db/getTableDdl', method: 'post', data: Qs.stringify(data)});
}

8
zyplayer-doc-ui/db-ui/src/common/config/apimix.js
View File

@@ -5,14 +5,14 @@ var href = window.location.href;
var _fn = {
href: href,
// 本地启动时使用本地接口调试
HOST: 'http://local.zyplayer.com:8083/zyplayer-doc-manage',
HOST1: 'http://local.zyplayer.com:8083/zyplayer-doc-manage',
// HOST: 'http://local.zyplayer.com:8083/zyplayer-doc-manage',
// HOST1: 'http://local.zyplayer.com:8083/zyplayer-doc-manage',
// 也可以直接使用线上的服务调试
// HOST: 'http://doc.zyplayer.com/zyplayer-doc-manage',
// HOST1: 'http://doc.zyplayer.com/zyplayer-doc-manage',
// 打包时使用下面这两行，文件就放在根目录下，所以当前路劲就好
// HOST: './',
// HOST1: './',
HOST: './',
HOST1: './',
mixUrl: function (host, url) {
var p;

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

@@ -3,7 +3,8 @@
<div style="padding: 0 10px;height: 100%;box-sizing: border-box;">
<el-card>
<div v-if="!!executeError" style="color: #f00;">{{executeError}}</div>
<div v-else-if="sqlExecuting" v-loading="sqlExecuting" style="padding: 20px 0;">暂无数据</div>
<div v-else-if="sqlExecuting" v-loading="sqlExecuting" style="padding: 20px 0;">数据加载中...</div>
<div v-else-if="executeResultList.length <= 0" v-loading="sqlExecuting" style="padding: 20px 0;">暂无数据</div>
<div v-else>
<el-button size="small" @click="refreshData" style="position: absolute;right: 30px;z-index: 1;">刷新</el-button>
<el-tabs :value="executeShowTable">
@@ -12,9 +13,24 @@
</el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="'table'+resultItem.index" v-for="resultItem in executeResultList" v-if="!!resultItem.index">
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{resultItem.errMsg}}</div>
<!-- <pl-table v-else-->
<!-- :datas="resultItem.dataList"-->
<!-- :height="tableMaxHeight"-->
<!-- header-drag-style-->
<!-- :row-height="40">-->
<!-- <template slot="empty">暂无数据</template>-->
<!-- <pl-table-column width="60px" v-if="resultItem.dataCols.length > 0">-->
<!-- <template slot-scope="scope">{{scope.row._index}}</template>-->
<!-- </pl-table-column>-->
<!-- <pl-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>-->
<!-- </pl-table-column>-->
<!-- </pl-table>-->
<el-table v-else :data="resultItem.dataList" stripe border
style="width: 100%; margin-bottom: 5px;"
class="execute-result-table" :max-height="tableMaxHeight"
class="execute-result-table" :height="tableMaxHeight"
@sort-change="tableSortChange"
:default-sort="tableSort">
<el-table-column width="60px" v-if="resultItem.dataCols.length > 0">
@@ -22,11 +38,12 @@
</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">
<el-input type="textarea" :rows="1" :value="scope.row[item.prop]" :readonly="true" resize="none"></el-input>
<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"
@@ -138,9 +155,9 @@
}
param.sql = this.getExecuteSql();
this.common.postNonCheck(this.apilist1.executeSql, param, function (json) {
that.sqlExecuting = false;
if (json.errCode != 200) {
that.executeError = json.errMsg;
that.sqlExecuting = false;
return;
}
var resultList = json.data || [];
@@ -159,6 +176,7 @@
that.executeShowTable = (itemIndex === 1) ? "table0" : "table1";
that.executeResultInfo = executeResultInfo;
that.executeResultList = executeResultList;
that.sqlExecuting = false;
});
},
getExecuteSql() {
@@ -238,9 +256,11 @@
padding: 0 5px;
}
.data-executor-vue .execute-result-table .el-textarea__inner{
height: 25px;
height: 27px;
min-height: 27px;
line-height: 25px;
padding: 0 5px;
resize: none;
}
.data-executor-vue .execute-use-time{
font-size: 12px;margin-right: 10px;

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

@@ -34,7 +34,7 @@
</el-table-column>
<el-table-column v-for="item in resultItem.dataCols" :prop="item.prop" :label="item.prop" :width="item.width">
<template slot-scope="scope">
<el-input type="textarea" :rows="1" :value="scope.row[item.prop]" :readonly="true" resize="none"></el-input>
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea>
</template>
</el-table-column>
</el-table>
@@ -403,9 +403,11 @@
padding: 0 5px;
}
.data-executor-vue .execute-result-table .el-textarea__inner{
height: 25px;
height: 27px;
min-height: 27px;
line-height: 25px;
padding: 0 5px;
resize: none;
}
.data-executor-vue .execute-use-time{
font-size: 12px;margin-right: 10px;

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

@@ -87,7 +87,7 @@
<script>
import global from '../../common/config/global'
import {queryExecuteSql} from '../../common/api/datasource'
import {queryTableDdl} from '../../common/api/datasource'
export default {
data() {
@@ -139,31 +139,15 @@
showCreateTableDdl() {
this.tableDDLInfo = '';
this.tableDDLInfoDialogVisible = true;
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
let param = {
sourceId: this.vueQueryParam.sourceId,
executeId: this.nowExecutorId,
sql: this.getSelectTableInfoSql(),
params: '',
dbName: this.vueQueryParam.dbName,
tableName: this.vueQueryParam.tableName,
};
queryExecuteSql(param).then(res => {
if (res.errCode != 200 || !res.data || res.data.length <= 0) return;
let objItem = JSON.parse(res.data[0]);
if(!objItem.result || objItem.result.length <= 0) return;
let firstItem = objItem.result[0] || {};
this.tableDDLInfo = this.getSelectTableDDLInfo(firstItem);
queryTableDdl(param).then(res => {
this.tableDDLInfo = res.data || '获取失败';
});
},
getSelectTableInfoSql() {
if (this.tableStatusInfo.dbType === 'mysql') {
return 'show create table ' + this.vueQueryParam.dbName + '.' + this.vueQueryParam.tableName;
}
},
getSelectTableDDLInfo(dataItem) {
if (this.tableStatusInfo.dbType === 'mysql') {
return dataItem['Create Table'] || '';
}
},
descBoxClick(row) {
// row.newDesc = row.description;
row.inEdit = 1;