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

增加表数据查看功能，tab标签页优化

Browse Source
This commit is contained in:
暮光：城中城
2020-05-04 12:18:57 +08:00
parent 5300348552
commit 7712c52f1b
17 changed files with 376 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
{
"name": "console-ui",
"description": "console-ui",
"author": "yi.shyang@ele.me",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --hot --env.dev",

7
zyplayer-doc-ui/db-ui/src/common/api/datasource.js Normal file
View File

@@ -0,0 +1,7 @@
import Qs from 'qs'
import request from '../lib/common/request'
export function queryExecuteSql(data) {
return request({url: '/zyplayer-doc-db/executor/execute', method: 'post', data: Qs.stringify(data)});
}

10
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;
@@ -47,6 +47,6 @@ var apilist1 = _fn.mixUrl(_fn.HOST, apilist.URL);
var apilist2 = _fn.mixUrl(_fn.HOST1, apilist.URL1);
export default {
apilist1, apilist2
apilist1, apilist2, host: _fn.HOST
};

56
zyplayer-doc-ui/db-ui/src/common/lib/common/request.js Normal file
View File

@@ -0,0 +1,56 @@
import axios from 'axios'
import global from '../../config/global'
import apimix from '../../config/apimix'
const service = axios.create({
baseURL: apimix.host, // url = base url + request url process.env.APP_BASE_API
timeout: 10000,
headers: {'Content-type': 'application/x-www-form-urlencoded'},
withCredentials: true
});
// 增加不需要验证结果的标记
const noValidate = {
"/zyplayer-doc-db/executor/execute": true,
};
service.interceptors.request.use(
config => {
config.needValidateResult = true;
// 增加不需要验证结果的标记
if (noValidate[config.url]) {
config.needValidateResult = false;
}
return config
},
error => {
console.log(error);
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
if (!!response.message) {
global.vue.$message('请求错误：' + response.message);
}else {
if (!response.config.needValidateResult || response.data.errCode == 200) {
return response.data;
} else if (response.data.errCode == 400) {
global.vue.$message('请先登录');
var href = encodeURIComponent(window.location.href);
window.location = apimix.apilist1.HOST + "#/user/login?redirect=" + href;
} else if (response.data.errCode == 402) {
global.vue.$router.push("/common/noAuth");
} else if (response.data.errCode !== 200) {
global.vue.$message(response.data.errMsg || "未知错误");
}
}
return Promise.reject('请求错误');
},
error => {
console.log('err' + error);
global.vue.$message.info('请求错误：' + error.message);
return Promise.reject(error)
}
);
export default service;

77
zyplayer-doc-ui/db-ui/src/components/layouts/PageTableView.vue
View File

@@ -4,14 +4,14 @@
<el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="item.fullPath" v-for="item in pageList"/>
</el-tabs>
<keep-alive>
<router-view/>
<router-view :key="$route.fullPath"/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'MenuView',
name: 'PageTableView',
components: {},
data() {
return {
@@ -19,12 +19,6 @@
linkList: [],
activePage: '',
multiPage: true,
menuVisible: false,
menuItemList: [
{key: '1', icon: 'arrow-left', text: '关闭左侧'},
{key: '2', icon: 'arrow-right', text: '关闭右侧'},
{key: '3', icon: 'close', text: '关闭其它'}
],
}
},
computed: {
@@ -40,10 +34,7 @@
watch: {
'$route': function (newRoute, oldRoute) {
this.activePage = newRoute.fullPath;
if (!this.multiPage) {
this.linkList = [newRoute.fullPath];
this.pageList = [newRoute];
} else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
if (this.linkList.indexOf(newRoute.fullPath) < 0) {
this.linkList.push(newRoute.fullPath);
this.pageList.push(newRoute);
}
@@ -70,68 +61,6 @@
index = index >= this.linkList.length ? this.linkList.length - 1 : index;
this.activePage = this.linkList[index];
},
onContextmenu(e) {
const pagekey = this.getPageKey(e.target)
if (pagekey !== null) {
e.preventDefault()
this.menuVisible = true
}
},
/**
* 由于ant-design-vue组件库的TabPane组件暂不支持自定义监听器，无法直接获取到右键target所在标签页的 pagekey 。故增加此方法用于
* 查询右键target所在标签页的标识 pagekey ，以用于自定义右键菜单的事件处理。
* 注：TabPane组件支持自定义监听器后可去除该方法并重构 ‘自定义右键菜单的事件处理’
* @param target 查询开始目标
* @param count 查询层级深度 （查找层级最多不超过3层，超过3层深度直接返回 null）
* @returns {String}
*/
getPageKey(target, depth) {
depth = depth || 0
if (depth > 2) {
return null
}
let pageKey = target.getAttribute('pagekey')
pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
},
onMenuSelect(key, target) {
let pageKey = this.getPageKey(target)
switch (key) {
case '1':
this.closeLeft(pageKey)
break
case '2':
this.closeRight(pageKey)
break
case '3':
this.closeOthers(pageKey)
break
default:
break
}
},
closeOthers(pageKey) {
let index = this.linkList.indexOf(pageKey)
this.linkList = this.linkList.slice(index, index + 1)
this.pageList = this.pageList.slice(index, index + 1)
this.activePage = this.linkList[0]
},
closeLeft(pageKey) {
let index = this.linkList.indexOf(pageKey)
this.linkList = this.linkList.slice(index)
this.pageList = this.pageList.slice(index)
if (this.linkList.indexOf(this.activePage) < 0) {
this.activePage = this.linkList[0]
}
},
closeRight(pageKey) {
let index = this.linkList.indexOf(pageKey)
this.linkList = this.linkList.slice(0, index + 1)
this.pageList = this.pageList.slice(0, index + 1)
if (this.linkList.indexOf(this.activePage < 0)) {
this.activePage = this.linkList[this.linkList.length - 1]
}
}
}
}
</script>

35
zyplayer-doc-ui/db-ui/src/routes.js
View File

@@ -8,65 +8,47 @@ import PageTableView from './components/layouts/PageTableView'
import TableInfo from './views/table/Info.vue'
import TableDatabase from './views/table/Database.vue'
import TableRouterView from './views/table/RouterView.vue'
import DataDatasourceManage from './views/data/DatasourceManage.vue'
import DataExport from './views/data/Export.vue'
import DataExecutor from './views/data/Executor.vue'
import DataTransferData from './views/data/TransferData.vue'
import DataRouterView from './views/data/RouterView.vue'
import DataPreview from './views/data/DataPreview.vue'
import CommonNoAuth from './views/common/NoAuth.vue'
let routes = [
{
path: '/home1',
path: '/home',
component: Home,
name: '主页',
meta: {
requireAuth: true,
}
}, {
path: '/',
redirect: '/home'
}, {
path: '/',
name: 'Tab标签页',
component: PageTableView,
children: [
{path: '/home', name: '主页',component: Home},
{path: '/user/login', name: '系统登录',component: UserLogin, meta: {fullscreen: true}},
{path: '/user/myInfo', name: '我的信息',component: UserMyInfo},
{path: '/table/info', name: '表信息',component: TableInfo},
{path: '/table/database', name: '库信息',component: TableDatabase},
{path: '/data/datasourceManage', name: '数据源管理',component: DataDatasourceManage},
{path: '/data/export', name: '数据库导出',component: DataExport},
{path: '/data/executor', name: 'SQL执行器',component: DataExecutor},
{path: '/data/transferData', name: '数据互导工具',component: DataTransferData},
{path: '/data/dataPreview', name: '表数据预览',component: DataPreview},
]
}, {
path: '/user1',
path: '/user',
name: '用户管理',
component: UserRouterView,
children: [
{path: 'login', name: '系统登录',component: UserLogin, meta: {fullscreen: true}},
{path: 'myInfo', name: '我的信息',component: UserMyInfo},
]
}, {
path: '/table1',
name: '表信息',
component: TableRouterView,
children: [
{path: 'info', name: '表信息',component: TableInfo},
{path: 'database', name: '库信息',component: TableDatabase},
]
}, {
path: '/data1',
name: '数据信息',
component: DataRouterView,
children: [
{path: 'datasourceManage', name: '数据源管理',component: DataDatasourceManage},
{path: 'export', name: '数据库导出',component: DataExport},
{path: 'executor', name: 'SQL执行器',component: DataExecutor},
{path: 'transferData', name: '数据互导工具',component: DataTransferData},
]
}, {
path: '/common',
name: '',
@@ -74,9 +56,6 @@ let routes = [
children: [
{path: 'noAuth', name: '没有权限',component: CommonNoAuth},
]
}, {
path: '/',
redirect: '/home'
}
];

239
zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<div class="data-executor-vue">
<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="executeResultList.length <= 0" v-loading="sqlExecuting">暂无数据</div>
<div v-else>
<el-tabs :value="executeShowTable">
<el-tab-pane label="信息" name="table0">
<pre>{{executeResultInfo}}</pre>
</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>
<el-table v-else :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" max-height="600">
<el-table-column width="60px" v-if="resultItem.dataCols.length > 0">
<template slot-scope="scope">{{scope.row._index}}</template>
</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>
</template>
</el-table-column>
</el-table>
<el-pagination
@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>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
<span id="widthCalculate" style="visibility: hidden; white-space: nowrap;"></span>
</div>
</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 global from '../../common/config/global'
import {queryExecuteSql} from '../../common/api/datasource'
export default {
data() {
return {
sqlExecuting: false,
executeResultList: [],
executeResultInfo: "",
executeShowTable: "table1",
sqlExecutorEditor: {},
nowExecutorId: 1,
executeError: "",
vueQueryParam: {},
pageSize: 50,
currentPage: 1,
tableTotalCount: 0,
}
},
beforeRouteUpdate(to, from, next) {
this.initQueryParam(to);
next();
},
mounted: function () {
this.initQueryParam(this.$route);
this.doExecutorSql();
// 延迟设置展开的目录，edit比app先初始化
setTimeout(()=> {
global.vue.$app.initLoadDataList(this.vueQueryParam.sourceId, this.vueQueryParam.host, this.vueQueryParam.dbName);
}, 500);
},
methods: {
initQueryParam(to) {
this.vueQueryParam = to.query;
let newName = {key: this.$route.fullPath, val: this.vueQueryParam.tableName + '-数据'};
this.$store.commit('global/addTableName', newName);
},
handleCurrentChange(to) {
this.currentPage = to;
this.doExecutorSql();
},
handlePageSizeChange(to) {
this.pageSize = to;
this.doExecutorSql();
},
cancelExecutorSql() {
let that = this;
this.common.post(this.apilist1.executeSqlCancel, {executeId: this.nowExecutorId}, function (json) {
that.$message.success("取消成功");
});
},
doExecutorSql() {
let that = this;
if (!this.vueQueryParam.sourceId) {
this.$message.error("请先选择数据源");
return;
}
this.executeError = "";
this.executeUseTime = "";
this.executeResultList = [];
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
this.sqlExecuting = true;
let param = {
sourceId: this.vueQueryParam.sourceId,
executeId: this.nowExecutorId,
sql: this.getExecuteCountSql(),
params: '',
};
// 第一页才查询总条数
if (this.currentPage == 1) {
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;
this.tableTotalCount = objItem.result[0].counts || 0;
});
}
param.sql = this.getExecuteSql();
this.common.postNonCheck(this.apilist1.executeSql, param, function (json) {
that.sqlExecuting = false;
if (json.errCode != 200) {
that.executeError = json.errMsg;
return;
}
var resultList = json.data || [];
var executeResultList = [];
var executeResultInfo = "", itemIndex = 1;
for (var i = 0; i < resultList.length; i++) {
var objItem = JSON.parse(resultList[i]);
executeResultInfo += that.getExecuteInfoStr(objItem);
var resultItem = that.dealExecuteResult(objItem);
if (resultItem.updateCount < 0) {
resultItem.index = itemIndex;
itemIndex++;
}
executeResultList.push(resultItem);
}
that.executeShowTable = (itemIndex === 1) ? "table0" : "table1";
that.executeResultInfo = executeResultInfo;
that.executeResultList = executeResultList;
});
},
getExecuteSql() {
if (this.vueQueryParam.dbType == 'mysql') {
return 'select * from ' + this.vueQueryParam.dbName + '.' + this.vueQueryParam.tableName
+ ' limit ' + this.pageSize + ' offset ' + ((this.currentPage - 1) * this.pageSize);
}
this.$message.error("暂未支持的数据库类型表数据预览");
return '';
},
getExecuteCountSql() {
if (this.vueQueryParam.dbType == 'mysql') {
return 'select count(1) as counts from ' + this.vueQueryParam.dbName + '.' + this.vueQueryParam.tableName;
}
return '';
},
getExecuteInfoStr(resultData) {
var resultStr = resultData.sql;
resultStr += "\n> 状态：" + ((!!resultData.errMsg) ? "ERROR" : "OK");
if (resultData.updateCount >= 0) {
resultStr += "\n> 影响行数：" + resultData.updateCount;
}
resultStr += "\n> 耗时：" + (resultData.useTime || 0) / 1000 + "s";
resultStr += "\n\n";
return resultStr;
},
dealExecuteResult(resultData) {
var dataList = resultData.result || [];
var executeResultCols = [];
if (dataList.length > 0) {
var propData = dataList[0];
for (var key in propData) {
// 动态计算宽度~自己想的一个方法，666
document.getElementById("widthCalculate").innerText = key;
var width1 = document.getElementById("widthCalculate").offsetWidth;
document.getElementById("widthCalculate").innerText = propData[key];
var width2 = document.getElementById("widthCalculate").offsetWidth;
var width = (width1 > width2) ? width1 : width2;
width = (width < 50) ? 50 : width;
width = (width > 200) ? 200 : width;
executeResultCols.push({prop: key, width: width + 25});
}
for (var i = 0; i < dataList.length; i++) {
dataList[i]._index = i + 1;
}
}
var resultObj = {};
resultObj.dataList = dataList;
resultObj.dataCols = executeResultCols;
resultObj.useTime = resultData.useTime || 0;
resultObj.errMsg = resultData.errMsg || "";
resultObj.updateCount = resultData.updateCount;
return resultObj;
},
}
}
</script>
<style>
.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: 25px;
line-height: 25px;
padding: 0 5px;
}
.data-executor-vue .execute-use-time{
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;
}
</style>

4
zyplayer-doc-ui/db-ui/src/views/data/RouterView.vue
View File

@@ -1,4 +0,0 @@
<template>
<router-view></router-view>
</template>

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

@@ -1,7 +1,12 @@
<template>
<div class="table-info-vue">
<el-card style="margin: 10px;">
<div slot="header" class="clearfix">表信息</div>
<div slot="header" class="clearfix">
表信息
<span style="float: right;margin-top: -5px;">
<el-button class="search-submit" size="small" type="primary" icon="el-icon-search" @click="previewTableData">表数据预览</el-button>
</span>
</div>
<el-row class="status-info-row">
<el-col :span="24"><span class="label">数据源：</span>{{vueQueryParam.host}}</el-col>
</el-row>
@@ -75,7 +80,6 @@
<script>
import global from '../../common/config/global'
var app;
export default {
data() {
@@ -92,15 +96,15 @@
next();
},
mounted: function () {
app = this;
this.initQueryParam(this.$route);
// 延迟设置展开的目录，edit比app先初始化
setTimeout(function () {
global.vue.$app.initLoadDataList(app.vueQueryParam.sourceId, app.vueQueryParam.host, app.vueQueryParam.dbName);
setTimeout(()=> {
global.vue.$app.initLoadDataList(this.vueQueryParam.sourceId, this.vueQueryParam.host, this.vueQueryParam.dbName);
}, 500);
},
methods: {
initQueryParam(to) {
let that = this;
this.columnListLoading = true;
this.vueQueryParam = to.query;
this.common.post(this.apilist1.tableColumnList, this.vueQueryParam, function (json) {
@@ -109,26 +113,33 @@
columnList[i].inEdit = 0;
columnList[i].newDesc = columnList[i].description;
}
app.columnList = columnList;
that.columnList = columnList;
var tableInfo = json.data.tableInfo || {};
tableInfo.inEdit = 0;
tableInfo.newDesc = tableInfo.description;
app.tableInfo = tableInfo;
app.columnListLoading = false;
var newName = {key: app.$route.fullPath, val: tableInfo.tableName};
app.$store.commit('global/addTableName', newName);
app.$forceUpdate();
console.log(newName)
// app.$store.state.global.pageTabNameMap
that.tableInfo = tableInfo;
that.columnListLoading = false;
var newName = {key: that.$route.fullPath, val: tableInfo.tableName};
that.$store.commit('global/addTableName', newName);
});
this.common.post(this.apilist1.tableStatus, this.vueQueryParam, function (json) {
app.tableStatusInfo = json.data || {};
that.tableStatusInfo = json.data || {};
});
},
descBoxClick(row) {
// row.newDesc = row.description;
row.inEdit = 1;
},
previewTableData() {
let previewParam = {
sourceId: this.vueQueryParam.sourceId,
dbName: this.vueQueryParam.dbName,
tableName: this.vueQueryParam.tableName,
host: this.vueQueryParam.host,
dbType: this.tableStatusInfo.dbType,
};
this.$router.push({path: '/data/dataPreview', query: previewParam});
},
getBytesSize(size) {
if (!size) return "0 bytes";
var num = 1024.00;
@@ -146,9 +157,10 @@
row.inEdit = 0;
this.vueQueryParam.columnName = row.name;
this.vueQueryParam.newDesc = row.newDesc;
let that = this;
this.common.post(this.apilist1.updateTableColumnDesc, this.vueQueryParam, function (json) {
row.description = row.newDesc;
app.$message.success("修改成功");
that.$message.success("修改成功");
});
},
saveTableDescription() {
@@ -158,9 +170,10 @@
}
this.tableInfo.inEdit = 0;
this.vueQueryParam.newDesc = this.tableInfo.newDesc;
let that = this;
this.common.post(this.apilist1.updateTableDesc, this.vueQueryParam, function (json) {
app.tableInfo.description = app.tableInfo.newDesc;
app.$message.success("修改成功");
that.tableInfo.description = that.tableInfo.newDesc;
that.$message.success("修改成功");
});
},
}

4
zyplayer-doc-ui/db-ui/src/views/table/RouterView.vue
View File

@@ -1,4 +0,0 @@
<template>
<router-view></router-view>
</template>

1
zyplayer-doc-ui/db-ui/webpack.config.js
View File

@@ -1,6 +1,7 @@
const resolve = require('path').resolve;
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const url = require('url');
const publicPath = '';