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

引入虚拟表格组件,极大改善大数据量情况下的表格性能

Browse Source
This commit is contained in:
diantu
2023-02-07 15:35:34 +08:00
parent 06cac2b034
commit 679eca9196
4 changed files with 1022 additions and 927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
zyplayer-doc-ui/db-ui/package.json
View File

@@ -19,6 +19,7 @@
"js-cookie": "^2.2.1",
"pouchdb": "^7.1.1",
"sql-formatter": "^2.3.3",
"umy-ui": "^1.1.6",
"vue": "^2.6.10",
"vue-axios": "^2.1.5",
"vue-clipboard2": "^0.3.1",

3
zyplayer-doc-ui/db-ui/src/main.js
View File

@@ -1,6 +1,8 @@
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import UmyUi from 'umy-ui';
import 'umy-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import VueRouter from 'vue-router';
@@ -16,6 +18,7 @@ import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
Vue.use(ElementUI);
Vue.use(UmyUi);
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
Vue.use(vueHljs);

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

@@ -2,14 +2,21 @@
<div class="data-executor-vue">
<div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin-bottom: 10px;">
<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>
<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-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">
<el-button v-on:click="doExecutorClick" type="primary" plain size="small" icon="el-icon-video-play">筛选</el-button>
<el-button v-on:click="doExecutorClick" type="primary" plain size="small" icon="el-icon-video-play">筛选
</el-button>
</el-tooltip>
<el-button icon="el-icon-refresh-left" size="small" @click="refreshData">重置</el-button>
<el-button @click="downloadTableData" type="success" size="small" icon="el-icon-download" plain style="margin-left: 30px;">导出</el-button>
<el-button @click="downloadTableData" type="success" size="small" icon="el-icon-download" plain
style="margin-left: 30px;">导出
</el-button>
</div>
</el-card>
<el-card>
@@ -19,7 +26,8 @@
<div v-else style="position: relative;">
<div style="position: absolute;right: 0;z-index: 1;" v-show="executeShowTable !== 'table0'">
<span v-show="choiceResultObj[executeShowTable] && choiceResultObj[executeShowTable].length > 0">
<el-button icon="el-icon-delete" size="small" @click="deleteCheckLine" type="danger" plain style="margin-right: 10px;">删除</el-button>
<el-button icon="el-icon-delete" size="small" @click="deleteCheckLine" type="danger" plain
style="margin-right: 10px;">删除</el-button>
<!-- 复制选中行 -->
<el-dropdown @command="handleCopyCheckLineCommand">
<el-button type="primary" size="small" icon="el-icon-document-copy">
@@ -33,24 +41,34 @@
</el-dropdown>
</span>
<el-tooltip effect="dark" content="选择展示列" placement="top">
<el-button icon="el-icon-setting" size="small" style="margin-left: 10px;" @click="choiceShowColumnDrawerShow"></el-button>
<el-button icon="el-icon-setting" size="small" style="margin-left: 10px;"
@click="choiceShowColumnDrawerShow"></el-button>
</el-tooltip>
</div>
<el-tabs v-model="executeShowTable">
<el-tab-pane label="信息" name="table0">
<pre>{{ executeResultInfo }}</pre>
</el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" v-for="resultItem in executeResultList" v-if="!!resultItem.index">
<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>
<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"
<ux-grid
:data="resultItem.dataList"
stripe
border
:height="height"
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">
<ux-table-column type="checkbox" width="55"></ux-table-column>
<ux-table-column type="index" width="50" title=" "></ux-table-column>
<ux-table-column sortable v-for="item in resultItem.dataCols" :prop="item.prop" :title="item.prop"
:width="item.width">
<template slot="header" slot-scope="scope">
<el-tooltip effect="dark" :content="item.desc" placement="top">
<span>{{ item.prop }}</span>
@@ -59,8 +77,8 @@
<template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea>
</template>
</el-table-column>
</el-table>
</ux-table-column>
</ux-grid>
<el-pagination
style="margin-top: 10px;"
@size-change="handlePageSizeChange"
@@ -82,7 +100,8 @@
<div>
更新条件列：
<el-select v-model="conditionDataColsChoice" multiple placeholder="请选择" style="width: 370px;">
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop" :value="item.prop"></el-option>
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop"
:value="item.prop"></el-option>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
@@ -94,7 +113,8 @@
<el-dialog :visible.sync="downloadDataVisible" width="600px" title="表数据导出">
<el-form label-width="120px">
<el-form-item label="导出类型：">
<el-select v-model="downloadDataParam.downloadType" filterable placeholder="请选择导出类型" style="width: 370px;">
<el-select v-model="downloadDataParam.downloadType" filterable placeholder="请选择导出类型"
style="width: 370px;">
<el-option label="SQL Inserts" value="insert"></el-option>
<el-option label="SQL Updates" value="update"></el-option>
<el-option label="JSON" value="json"></el-option>
@@ -102,12 +122,18 @@
</el-select>
</el-form-item>
<el-form-item label="数据表：" v-if="downloadDataParam.downloadType === 'insert'">
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.dropTableFlag" @change="dropTableFlagChange">删除表{{downloadDataParam.dropTableFlag==1?'!!':''}}</el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.createTableFlag" @change="createTableFlagChange">创建表</el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.dropTableFlag"
@change="dropTableFlagChange">删除表{{ downloadDataParam.dropTableFlag == 1 ? '!!' : '' }}
</el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.createTableFlag"
@change="createTableFlagChange">创建表
</el-checkbox>
</el-form-item>
<el-form-item label="更新条件列：" v-if="downloadDataParam.downloadType === 'update'">
<el-select v-model="downloadDataParam.conditionColumnArr" multiple placeholder="不选则是没有条件的更新" style="width: 370px;">
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop" :value="item.prop"></el-option>
<el-select v-model="downloadDataParam.conditionColumnArr" multiple placeholder="不选则是没有条件的更新"
style="width: 370px;">
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop"
:value="item.prop"></el-option>
</el-select>
</el-form-item>
</el-form>
@@ -127,12 +153,14 @@
<el-col :span="12">选择展示列</el-col>
<el-col :span="12" style="text-align: right;">
<el-checkbox v-model="choiceShowColumnAll" @change="choiceShowColumnAllChange">全选</el-checkbox>
<el-button type="primary" size="mini" @click="choiceShowColumnOk" style="margin-left: 10px;">确定</el-button>
<el-button type="primary" size="mini" @click="choiceShowColumnOk" style="margin-left: 10px;">确定
</el-button>
</el-col>
</el-row>
</div>
<div style="overflow: auto; height: calc(100vh - 50px);">
<el-tree ref="showColumnTree" node-key="name" :props="showColumnProps" :data="tableDataColumns" check-on-click-node show-checkbox
<el-tree ref="showColumnTree" node-key="name" :props="showColumnProps" :data="tableDataColumns"
check-on-click-node show-checkbox
@check-change="tableDataColumnsCheckChange">
</el-tree>
</div>
@@ -155,6 +183,7 @@
name: 'dataPreview',
data() {
return {
height: 0,
sqlExecuting: false,
executeResultList: [],
executeResultInfo: "",
@@ -217,6 +246,7 @@
'ace-editor': aceEditor
},
mounted: function () {
this.height = 500;
// 延迟设置展开的目录，edit比app先初始化
// setTimeout(() => {
// this.doExecutorSqlCommon();
@@ -451,7 +481,8 @@
this.$message.success("删除成功！");
this.refreshData();
});
}).catch(()=>{});
}).catch(() => {
});
}
},
handleCopyCheckLineCommand(type) {
@@ -564,17 +595,21 @@
.data-executor-vue .ace-monokai .ace_print-margin {
display: none;
}
.data-executor-vue .el-card__body {
padding: 10px;
}
.data-executor-vue .el-table td, .el-table th {
padding: 6px 0;
}
.data-executor-vue .execute-result-table .el-input__inner {
height: 25px;
line-height: 25px;
padding: 0 5px;
}
.data-executor-vue .execute-result-table .el-textarea__inner {
height: 27px;
min-height: 27px;
@@ -582,15 +617,20 @@
padding: 0 5px;
resize: none;
}
.data-executor-vue .execute-use-time {
font-size: 12px;margin-right: 10px;
font-size: 12px;
margin-right: 10px;
}
.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;

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

@@ -2,20 +2,29 @@
<div class="data-executor-vue">
<div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin-bottom: 10px;">
<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>
<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-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">
<el-button v-on:click="doExecutorSql" type="primary" plain size="small" icon="el-icon-video-play">执行</el-button>
<el-button v-on:click="doExecutorSql" type="primary" plain size="small" icon="el-icon-video-play">执行
</el-button>
</el-tooltip>
<el-button icon="el-icon-brush" size="small" @click="formatterSql">SQL美化</el-button>
<el-button v-on:click="addFavorite('')" plain size="small" icon="el-icon-star-off">收藏</el-button>
<div style="float: right;">
<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 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 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>
@@ -29,7 +38,8 @@
<div style="position: relative;">
<div style="position: absolute;right: 0;z-index: 1;">
<!-- 复制选中行 -->
<el-dropdown @command="handleCopyCheckLineCommand" v-show="this.choiceResultObj[this.executeShowTable] && this.choiceResultObj[this.executeShowTable].length > 0">
<el-dropdown @command="handleCopyCheckLineCommand"
v-show="this.choiceResultObj[this.executeShowTable] && this.choiceResultObj[this.executeShowTable].length > 0">
<el-button type="primary" size="small" icon="el-icon-document-copy">
复制选中行<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
@@ -46,13 +56,16 @@
<el-table-column prop="createTime" label="执行时间" width="160px"></el-table-column>
<el-table-column prop="content" label="SQL">
<template slot-scope="scope">
<pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)" :title="scope.row.content">{{scope.row.content}}</pre>
<pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)"
:title="scope.row.content">{{ scope.row.content }}</pre>
</template>
</el-table-column>
<el-table-column label="操作" width="160px">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="inputFavoriteSql(scope.row)">输入</el-button>
<el-button size="mini" type="success" @click="addFavorite(scope.row.content)" style="margin-left: 10px;">收藏</el-button>
<el-button size="mini" type="success" @click="addFavorite(scope.row.content)"
style="margin-left: 10px;">收藏
</el-button>
</template>
</el-table-column>
</el-table>
@@ -62,13 +75,16 @@
<el-table-column prop="createTime" label="执行时间" width="160px"></el-table-column>
<el-table-column prop="content" label="SQL">
<template slot-scope="scope">
<pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)" :title="scope.row.content">{{scope.row.content}}</pre>
<pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)"
:title="scope.row.content">{{ scope.row.content }}</pre>
</template>
</el-table-column>
<el-table-column label="操作" width="160px">
<template slot-scope="scope">
<el-button size="mini" type="primary" v-on:click="inputFavoriteSql(scope.row)">输入</el-button>
<el-button size="mini" type="danger" v-on:click="delFavorite(scope.row)" style="margin-left: 10px;">删除</el-button>
<el-button size="mini" type="danger" v-on:click="delFavorite(scope.row)" style="margin-left: 10px;">
删除
</el-button>
</template>
</el-table-column>
</el-table>
@@ -80,19 +96,30 @@
<div style="color: #f00;">{{ executeError }}</div>
</el-tab-pane>
<template v-else>
<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" v-for="resultItem in executeResultList" v-if="!!resultItem.index">
<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"
<div v-else-if="resultItem.dataList.length <= 0"
style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据
</div>
<ux-grid v-else
:data="resultItem.dataList"
stripe
border
:height="height"
:checkboxConfig="{checkMethod: selectable, highlight: true}"
@table-body-scroll="scroll"
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>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column v-for="item in resultItem.dataCols" :prop="item.prop" :label="item.prop" :width="item.width">
<ux-table-column type="checkbox" width="55"></ux-table-column>
<ux-table-column type="index" width="50" title=" "></ux-table-column>
<ux-table-column v-for="item in resultItem.dataCols" :prop="item.prop" :title="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>
</ux-table-column>
</ux-grid>
</el-tab-pane>
</template>
</el-tabs>
@@ -104,7 +131,8 @@
<div>
更新条件列：
<el-select v-model="conditionDataColsChoice" multiple placeholder="请选择" style="width: 370px;">
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop" :value="item.prop"></el-option>
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop"
:value="item.prop"></el-option>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
@@ -126,6 +154,8 @@
export default {
data() {
return {
height: 0,
scrollTop: 0,
datasourceList: [],
choiceDatasourceId: "",
datasourceOptions: [],
@@ -177,6 +207,7 @@
'ace-editor': aceEditor
},
mounted: function () {
this.height = 500;
this.loadDatasourceList();
},
methods: {
@@ -208,6 +239,12 @@
}
});
},
scroll ({scrollTop, scrollLeft}) {
this.scrollTop = scrollTop
},
selectable ({row}) {
return row.id !== 2
},
cancelExecutorSql() {
datasourceApi.executeSqlCancel({executeId: this.nowExecutorId}).then(() => {
this.$message.success("取消成功");
@@ -470,25 +507,33 @@
.data-executor-vue .ace-monokai .ace_print-margin {
display: none;
}
.data-executor-vue .el-card__body {
padding: 10px;
}
.data-executor-vue .sql-params {
}
.data-executor-vue .sql-params .el-input-group {
width: auto;margin: 10px 10px 0 0;
width: auto;
margin: 10px 10px 0 0;
}
.data-executor-vue .sql-params .el-input__inner {
width: 200px;
}
.data-executor-vue .el-table td, .el-table th {
padding: 6px 0;
}
.data-executor-vue .execute-result-table .el-input__inner {
height: 25px;
line-height: 25px;
padding: 0 5px;
}
.data-executor-vue .execute-result-table .el-textarea__inner {
height: 27px;
min-height: 27px;
@@ -496,6 +541,7 @@
padding: 0 5px;
resize: none;
}
.data-executor-vue .sql-content-line {
margin: 0;
overflow: hidden;
@@ -504,15 +550,20 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.data-executor-vue .execute-use-time {
font-size: 12px;margin-right: 10px;
font-size: 12px;
margin-right: 10px;
}
.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;