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

db模块tab页面增加右键菜单

Browse Source
This commit is contained in:
diant
2023-05-24 16:44:29 +08:00
parent 960eccd165
commit e456d4e95e
10 changed files with 671 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
zyplayer-doc-db/src/main/resources/dist/css/index.108f40b4.css vendored
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/css/index.acbccf83.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
zyplayer-doc-db/src/main/resources/dist/doc-db.html vendored
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon-db.png"><title>数据库文档管理</title><link href="css/chunk-vendors.2fa4c9b3.css" rel="preload" as="style"><link href="css/index.108f40b4.css" rel="preload" as="style"><link href="js/chunk-vendors.6270548d.js" rel="preload" as="script"><link href="js/index.ddad9e6e.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.108f40b4.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.6270548d.js"></script><script src="js/index.ddad9e6e.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon-db.png"><title>数据库文档管理</title><link href="css/chunk-vendors.2fa4c9b3.css" rel="preload" as="style"><link href="css/index.acbccf83.css" rel="preload" as="style"><link href="js/chunk-vendors.6270548d.js" rel="preload" as="script"><link href="js/index.790e04cd.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.acbccf83.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.6270548d.js"></script><script src="js/index.790e04cd.js"></script></body></html>

1
zyplayer-doc-db/src/main/resources/dist/js/index.790e04cd.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/js/index.ddad9e6e.js vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -1,200 +1,350 @@
<template> <template>
<div> <div>
<el-tabs v-model="activePage" type="card" closable @tab-click="changePage" @tab-remove="removePageTab" style="padding: 5px 10px 0;"> <el-tabs v-model="activePage" type="card" closable @tab-click="changePage" @tab-remove="removePageTab"
<el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" :fullPath="item.fullPath" :key="item.fullPath" v-for="item in pageList"/> @contextmenu.prevent.native="openContextMenu($event)" style="padding: 5px 10px 0;">
</el-tabs> <el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)"
<keep-alive> :fullPath="item.fullPath" :key="item.fullPath" v-for="item in pageList"/>
<router-view v-on:listenToChildEvent = "getDatafromChild" :key="$route.fullPath" @initLoadDataList="initLoadDataList" @loadDatasourceList="loadDatasourceList"/> </el-tabs>
</keep-alive> <keep-alive>
</div> <router-view v-on:listenToChildEvent="getDatafromChild" :key="$route.fullPath"
@initLoadDataList="initLoadDataList" @loadDatasourceList="loadDatasourceList"/>
</keep-alive>
<ul v-show="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<!--<li @click="curTabReload()"><el-button type="text" size="mini">重新加载</el-button></li>-->
<li @click="closeAllTabs()">
<el-button type="text" size="mini">关闭所有</el-button>
</li>
<li @click="closeOtherTabs('left')">
<el-button type="text" size="mini">关闭左边</el-button>
</li>
<li @click="closeOtherTabs('right')">
<el-button type="text" size="mini">关闭右边</el-button>
</li>
<li @click="closeOtherTabs('other')">
<el-button type="text" size="mini">关闭其他</el-button>
</li>
</ul>
</div>
</template> </template>
<script> <script>
import datasourceApi from "@/common/api/datasource"; import datasourceApi from "@/common/api/datasource";
export default { export default {
name: 'PageTableView', name: 'PageTableView',
components: {}, components: {},
data() { data() {
return { return {
pageList: [], pageList: [],
linkList: [], linkList: [],
activePage: '', activePage: '',
datasourceList: [], datasourceList: [],
multiPage: true, multiPage: true,
ignoreParamPath: [ ignoreParamPath: [
"/data/export", "/data/export",
], ],
} contextMenuVisible: false,
}, left: 0,
computed: { top: 0,
pageTabNameMap () { }
return this.$store.state.global.pageTabNameMap; },
} computed: {
}, pageTabNameMap() {
created() { return this.$store.state.global.pageTabNameMap;
let {name, path, fullPath} = this.$route; }
//sql执行器tab页名称动态变化 },
if(path === '/data/executor'){ created() {
let database = this.$route.query.database; let {name, path, fullPath} = this.$route;
let datasourceId = this.$route.query.datasourceId; //sql执行器tab页名称动态变化
if(datasourceId){ if (path === '/data/executor') {
datasourceApi.datasource({sourceId: datasourceId}).then(json => { let database = this.$route.query.database;
let dataname = json.data.name; let datasourceId = this.$route.query.datasourceId;
let groupName = json.data.name; if (datasourceId) {
if(dataname){ datasourceApi.datasource({sourceId: datasourceId}).then(json => {
name = name+"( "+dataname+"["+database+"] )" let dataname = json.data.name;
} let groupName = json.data.name;
this.pageList.push({name, path, fullPath}); if (dataname) {
let activePage = this.getRouteRealPath(this.$route); name = name + "( " + dataname + "[" + database + "] )"
this.linkList.push(activePage); }
this.activePage = activePage; this.pageList.push({name, path, fullPath});
this.$router.push(this.$route.fullPath); let activePage = this.getRouteRealPath(this.$route);
})
return false;
}else{
datasourceApi.datasourceList({}).then(json => {
this.datasourceList = json.data || [];
if (this.datasourceList.length > 0) {
let dataname = this.datasourceList[0].name;
if(this.datasourceList[0].id){
datasourceApi.databaseList({sourceId: this.datasourceList[0].id}).then(json => {
if (json.data.length > 0) {
// 排除系统库
let sysDbName = ["information_schema", "master", "model", "msdb", "tempdb"];
let notSysDbItem = json.data.find(item => sysDbName.indexOf(item.dbName) < 0);
let choiceDatabase = (!!notSysDbItem) ? notSysDbItem.dbName : json.data[0].dbName;
if(dataname&&choiceDatabase){
name = name+"( "+dataname+"["+choiceDatabase+"] )"
}
this.$router.replace({ query: { datasourceId: this.datasourceList[0].id,database:choiceDatabase } })
}
})
}
}
})
return false;
}
}
this.pageList.push({name, path, fullPath});
let activePage = this.getRouteRealPath(this.$route);
this.linkList.push(activePage);
this.activePage = activePage;
this.$router.push(this.$route.fullPath);
},
watch: {
'$route': function (newRoute, oldRoute) {
let activePage = this.getRouteRealPath(newRoute);
this.activePage = activePage;
if (this.linkList.indexOf(activePage) < 0) {
this.linkList.push(activePage); this.linkList.push(activePage);
let {name, path, fullPath} = newRoute; this.activePage = activePage;
this.pageList.push({name, path, fullPath}); this.$router.push(this.$route.fullPath);
//sql执行器tab页名称动态变化 })
if(path === '/data/executor'){ return false;
let database = newRoute.query.database; } else {
let datasourceId = newRoute.query.datasourceId; datasourceApi.datasourceList({}).then(json => {
if(datasourceId) { this.datasourceList = json.data || [];
datasourceApi.datasource({sourceId: datasourceId}).then(json => { if (this.datasourceList.length > 0) {
let dataname = this.datasourceList[0].name;
if (this.datasourceList[0].id) {
datasourceApi.databaseList({sourceId: this.datasourceList[0].id}).then(json => {
if (json.data.length > 0) {
// 排除系统库
let sysDbName = ["information_schema", "master", "model", "msdb", "tempdb"];
let notSysDbItem = json.data.find(item => sysDbName.indexOf(item.dbName) < 0);
let choiceDatabase = (!!notSysDbItem) ? notSysDbItem.dbName : json.data[0].dbName;
if (dataname && choiceDatabase) {
name = name + "( " + dataname + "[" + choiceDatabase + "] )"
}
this.$router.replace({
query: {
datasourceId: this.datasourceList[0].id,
database: choiceDatabase
}
})
}
})
}
}
})
return false;
}
}
this.pageList.push({name, path, fullPath});
let activePage = this.getRouteRealPath(this.$route);
this.linkList.push(activePage);
this.activePage = activePage;
this.$router.push(this.$route.fullPath);
},
watch: {
'$route': function (newRoute, oldRoute) {
let activePage = this.getRouteRealPath(newRoute);
this.activePage = activePage;
if (this.linkList.indexOf(activePage) < 0) {
this.linkList.push(activePage);
let {name, path, fullPath} = newRoute;
this.pageList.push({name, path, fullPath});
//sql执行器tab页名称动态变化
if (path === '/data/executor') {
let database = newRoute.query.database;
let datasourceId = newRoute.query.datasourceId;
if (datasourceId) {
datasourceApi.datasource({sourceId: datasourceId}).then(json => {
let dataname = json.data.name; let dataname = json.data.name;
let groupName = json.data.groupName; let groupName = json.data.groupName;
if (dataname) { if (dataname) {
name = name+"( "+dataname+"["+database+"] )" name = name + "( " + dataname + "[" + database + "] )"
} }
//this.pageList.push({name, path, fullPath}); //this.pageList.push({name, path, fullPath});
let pageRoute = this.pageList.find(item => this.getRouteRealPath(item) === activePage); let pageRoute = this.pageList.find(item => this.getRouteRealPath(item) === activePage);
pageRoute.name = name; pageRoute.name = name;
}) })
}else{ } else {
datasourceApi.datasourceList({}).then(json => { datasourceApi.datasourceList({}).then(json => {
this.datasourceList = json.data || []; this.datasourceList = json.data || [];
if (this.datasourceList.length > 0) { if (this.datasourceList.length > 0) {
let dataname = this.datasourceList[0].name; let dataname = this.datasourceList[0].name;
if(this.datasourceList[0].id){ if (this.datasourceList[0].id) {
datasourceApi.databaseList({sourceId: this.datasourceList[0].id}).then(json => { datasourceApi.databaseList({sourceId: this.datasourceList[0].id}).then(json => {
if (json.data.length > 0) { if (json.data.length > 0) {
// 排除系统库 // 排除系统库
let sysDbName = ["information_schema", "master", "model", "msdb", "tempdb"]; let sysDbName = ["information_schema", "master", "model", "msdb", "tempdb"];
let notSysDbItem = json.data.find(item => sysDbName.indexOf(item.dbName) < 0); let notSysDbItem = json.data.find(item => sysDbName.indexOf(item.dbName) < 0);
let choiceDatabase = (!!notSysDbItem) ? notSysDbItem.dbName : json.data[0].dbName; let choiceDatabase = (!!notSysDbItem) ? notSysDbItem.dbName : json.data[0].dbName;
if(dataname&&choiceDatabase){ if (dataname && choiceDatabase) {
name = name+"( "+dataname+"["+choiceDatabase+"] )" name = name + "( " + dataname + "[" + choiceDatabase + "] )"
} }
console.log("this.pageList+++++++++"+JSON.stringify(this.pageList)) this.pageList.splice(this.pageList.findIndex(item => item.fullPath === path), 1);
this.pageList.splice(this.pageList.findIndex(item => item.fullPath === path),1); this.linkList.splice(this.linkList.findIndex(item => item === path), 1);
this.linkList.splice(this.linkList.findIndex(item => item === path),1); this.$router.replace({
console.log("this.pageList+++++++++"+JSON.stringify(this.pageList)) query: {
this.$router.replace({ query: { datasourceId: this.datasourceList[0].id,database:choiceDatabase } }) datasourceId: this.datasourceList[0].id,
database: choiceDatabase
}
})
} }
}) })
}
} }
}) }
} })
} }
}
//let pageRoute = this.pageList.find(item => this.getRouteRealPath(item) === activePage);
//pageRoute.fullPath = newRoute.fullPath;
},
},
methods: {
getDatafromChild(data){
this.datasourceList = data;
},
initLoadDataList(param) {
this.$emit('initLoadDataList', param);
},
loadDatasourceList() {
this.$emit('loadDatasourceList');
},
isIgnoreParamPath(path) {
return this.ignoreParamPath.indexOf(path) >= 0;
},
getRouteRealPath(route) {
return this.isIgnoreParamPath(route.path) ? route.path : route.fullPath;
},
changePage(tab) {
this.activePage = tab.name;
this.$router.push(tab.$attrs.fullPath);
},
editPage(key, action) {
this[action](key);
},
removePageTab(key) {
if (this.pageList.length === 1) {
this.$message.warning('这是最后一页，不能再关闭了啦');
return;
} }
this.pageList = this.pageList.filter(item => this.getRouteRealPath(item) !== key);
this.linkList = this.linkList.filter(item => item !== key); }
let index = this.linkList.indexOf(this.activePage); //let pageRoute = this.pageList.find(item => this.getRouteRealPath(item) === activePage);
if (index < 0) { //pageRoute.fullPath = newRoute.fullPath;
index = this.linkList.length - 1; },
this.activePage = this.linkList[index]; contextMenuVisible(value) {
if (value) {
document.body.addEventListener('click', this.closeContextMenu)
} else {
document.body.removeEventListener('click', this.closeContextMenu)
}
}
},
methods: {
getDatafromChild(data) {
this.datasourceList = data;
},
initLoadDataList(param) {
this.$emit('initLoadDataList', param);
},
loadDatasourceList() {
this.$emit('loadDatasourceList');
},
isIgnoreParamPath(path) {
return this.ignoreParamPath.indexOf(path) >= 0;
},
getRouteRealPath(route) {
return this.isIgnoreParamPath(route.path) ? route.path : route.fullPath;
},
changePage(tab) {
this.activePage = tab.name;
this.$router.push(tab.$attrs.fullPath);
},
editPage(key, action) {
this[action](key);
},
removePageTab(key) {
if (this.pageList.length === 1) {
this.$message.warning('这是最后一页，不能再关闭了啦');
return;
}
this.pageList = this.pageList.filter(item => this.getRouteRealPath(item) !== key);
this.linkList = this.linkList.filter(item => item !== key);
let index = this.linkList.indexOf(this.activePage);
if (index < 0) {
index = this.linkList.length - 1;
this.activePage = this.linkList[index];
this.$router.push(this.activePage);
}
},
//tab栏右键菜单
openContextMenu(e) {
let obj = e.srcElement ? e.srcElement : e.target;
if (obj.id) {
let currentContextTabId = obj.id.split("-")[1];
this.contextMenuVisible = true;
this.$store.commit("saveCurContextTabId", currentContextTabId);
this.left = e.clientX;
this.top = e.clientY + 10;
}
},
//刷新当前页
curTabReload() {
let currTabIndex = 0;
let curContextTabId = this.$store.state.tagsView.curContextTabId;
for (let i = 0; i < this.pageList.length; i++) {
if (curContextTabId === this.pageList[i].fullPath) {
currTabIndex = i;
break;
}
}
this.activePage = this.linkList[currTabIndex];
this.$router.push(this.activePage);
this.closeContextMenu()
},
// 关闭所有标签页
closeAllTabs() {
//删除所有tab标签
this.linkList.splice(0, this.linkList.length)
this.pageList.splice(0, this.pageList.length)
this.$router.replace({query: {}})
this.closeContextMenu()
},
// 关闭其它标签页
closeOtherTabs(par) {
let currTabIndex = 0;
let curContextTabId = this.$store.state.tagsView.curContextTabId;
for (let i = 0; i < this.pageList.length; i++) {
if (curContextTabId === this.pageList[i].fullPath) {
currTabIndex = i;
break;
}
}
switch (par) {
case "left": {
//删除左侧tab标签
this.pageList.splice(0, currTabIndex);
this.linkList.splice(0, currTabIndex);
this.activePage = this.linkList[0];
this.$router.push(this.activePage); this.$router.push(this.activePage);
break;
} }
}, case "right": {
} //删除右侧tab标签
} this.pageList.splice(currTabIndex + 1, this.pageList.length);
this.linkList.splice(currTabIndex + 1, this.linkList.length);
this.activePage = this.linkList[currTabIndex];
this.$router.push(this.activePage);
break;
}
case "other": {
//删除其他所有tab标签
this.pageList.splice(0, currTabIndex);
this.linkList.splice(0, currTabIndex);
this.pageList.splice(currTabIndex + 1, this.pageList.length);
this.linkList.splice(currTabIndex + 1, this.linkList.length);
this.activePage = this.linkList[0];
this.$router.push(this.activePage);
break;
}
}
this.closeContextMenu()
},
// 关闭contextMenu
closeContextMenu() {
this.contextMenuVisible = false;
},
}
}
</script> </script>
<style scoped> <style scoped>
/deep/ .el-tabs--card>.el-tabs__header{ /deep/ .el-tabs--card > .el-tabs__header {
margin: 0 0 5px; margin: 0 0 5px;
} }
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item{
height: 30px; /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
line-height: 30px; height: 30px;
line-height: 30px;
} }
/deep/ .el-tabs__nav-next{
line-height: 33px; /deep/ .el-tabs__nav-next {
font-size: 20px; line-height: 33px;
font-size: 20px;
} }
/deep/ .el-tabs__nav-prev{
line-height: 33px; /deep/ .el-tabs__nav-prev {
font-size: 20px; line-height: 33px;
font-size: 20px;
} }
.contextmenu {
width: 100px;
margin: 0;
border: 1px solid #ccc;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 14px;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.contextmenu li {
margin: 0;
padding: 0px 22px;
}
.contextmenu li:hover {
background: #f2f2f2;
cursor: pointer;
}
.contextmenu li button {
color: #2c3e50;
}
</style> </style>

2
zyplayer-doc-ui/db-ui/src/store/index.js
View File

@@ -1,11 +1,13 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import global from './modules/global' import global from './modules/global'
import tagsView from './modules/tagsView'
Vue.use(Vuex); Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
global, global,
tagsView
} }
}); });

15
zyplayer-doc-ui/db-ui/src/store/modules/tagsView.js Normal file
View File

@@ -0,0 +1,15 @@
const state = {
}
const mutations = {
// <20><><EFBFBD><EFBFBD><EFBFBD>Ҽ<EFBFBD><D2BC><EFBFBD><EFBFBD><EFBFBD>tab<61><62>id
saveCurContextTabId(state, curContextTabId) {
state.curContextTabId = curContextTabId
},
}
export default {
state,
mutations
}

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

@@ -4,43 +4,47 @@
<el-card style="margin-bottom: 10px;"> <el-card style="margin-bottom: 10px;">
<div v-show="aceEditorShow"> <div v-show="aceEditorShow">
<el-alert <el-alert
title="筛选示例 (支持 and , or 等连接符)" title="筛选示例 (支持 and , or 等连接符)"
type="info" type="info"
:description="executorDesc" :description="executorDesc"
show-icon> show-icon>
</el-alert> </el-alert>
<ace-editor v-model="sqlExecutorContent" @init="sqlExecutorInit" lang="sql" theme="monokai" width="100%" <ace-editor v-model="sqlExecutorContent" @init="sqlExecutorInit" lang="sql" theme="monokai"
height="60" :options="sqlEditorConfig" :source="executorSource" width="100%"
style="margin-bottom: 10px;"> height="60" :options="sqlEditorConfig" :source="executorSource"
style="margin-bottom: 10px;">
</ace-editor> </ace-editor>
</div> </div>
<div> <div>
<el-button v-on:click="doAceEditorShow" type="primary" plain size="small" icon="el-icon-search">筛选 <el-button v-on:click="doAceEditorShow" type="primary" plain size="small" icon="el-icon-search">筛选
</el-button> </el-button>
<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="small" <el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="small"
icon="el-icon-video-pause">取消执行 icon="el-icon-video-pause">取消执行
</el-button> </el-button>
<el-tooltip v-show="aceEditorShow" v-else effect="dark" content="Ctrl+R、Ctrl+Enter" placement="top"> <el-tooltip v-show="aceEditorShow" v-else effect="dark" content="Ctrl+R、Ctrl+Enter" placement="top">
<el-button v-on:click="doExecutorClick" type="primary" plain size="small" <el-button v-on:click="doExecutorClick" type="primary" plain size="small"
icon="el-icon-video-play">执行 icon="el-icon-video-play">执行
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-button icon="el-icon-refresh-left" size="small" @click="refreshData">重置</el-button> <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 <el-button @click="downloadTableData" type="success" size="small" icon="el-icon-download" plain
style="margin-left: 30px;">导出 style="margin-left: 30px;">导出
</el-button> </el-button>
</div> </div>
</el-card> </el-card>
<el-card> <el-card>
<div v-if="!!executeError" style="color: #f00;">{{ executeError }}</div> <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-if="executeResultList.length <= 0" v-loading="sqlExecuting" style="padding: 20px 0;">
暂无数据
</div>
<div v-else style="position: relative;"> <div v-else style="position: relative;">
<div style="position: absolute;right: 0;z-index: 1;" v-show="executeShowTable !== 'table0'"> <div style="position: absolute;right: 0;z-index: 1;" v-show="executeShowTable !== 'table0'">
<span v-show="choiceResultObj[executeShowTable] && choiceResultObj[executeShowTable].length > 0"> <span
v-show="choiceResultObj[executeShowTable] && choiceResultObj[executeShowTable].length > 0">
<el-button icon="el-icon-delete" size="small" @click="deleteCheckLine" type="danger" plain <el-button icon="el-icon-delete" size="small" @click="deleteCheckLine" type="danger" plain
style="margin-right: 10px;">删除</el-button> style="margin-right: 10px;">删除</el-button>
<!-- 复制选中行 --> <!-- 复制选中行 -->
<el-dropdown @command="handleCopyCheckLineCommand"> <el-dropdown @command="handleCopyCheckLineCommand">
<el-button type="primary" size="small" icon="el-icon-document-copy"> <el-button type="primary" size="small" icon="el-icon-document-copy">
@@ -55,7 +59,7 @@
</span> </span>
<el-tooltip effect="dark" content="选择展示列" placement="top"> <el-tooltip effect="dark" content="选择展示列" placement="top">
<el-button icon="el-icon-setting" size="small" style="margin-left: 10px;" <el-button icon="el-icon-setting" size="small" style="margin-left: 10px;"
@click="choiceShowColumnDrawerShow"></el-button> @click="choiceShowColumnDrawerShow"></el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<el-tabs v-model="executeShowTable"> <el-tabs v-model="executeShowTable">
@@ -63,47 +67,51 @@
<pre class="xxpre">{{ executeResultInfo }}</pre> <pre class="xxpre">{{ executeResultInfo }}</pre>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" <el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name"
v-for="(resultItem,index) in executeResultList" :key="index" v-if="!!resultItem.index"> v-for="(resultItem,index) in executeResultList" :key="index"
v-if="!!resultItem.index">
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div> <div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div>
<div v-else-if="resultItem.dataList.length <= 0" <div v-else-if="resultItem.dataList.length <= 0"
style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据 style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据
</div> </div>
<template v-else> <template v-else>
<ux-grid <ux-grid
v-clickoutside="handleClickOutside" v-clickoutside="handleClickOutside"
:data="resultItem.dataList" :data="resultItem.dataList"
stripe stripe
border border
:height="height" :height="height"
style="width: 100%; margin-bottom: 5px;" class="execute-result-table" :max-height="tableMaxHeight" style="width: 100%; margin-bottom: 5px;" class="execute-result-table"
@selection-change="handleSelectionChange" :max-height="tableMaxHeight"
@cell-click="mouseOnFocus" @selection-change="handleSelectionChange"
@cell-mouse-leave="mouseLeave" @cell-click="mouseOnFocus"
@sort-change="tableSortChange" @cell-mouse-leave="mouseLeave"
:default-sort="tableSort"> @sort-change="tableSortChange"
:default-sort="tableSort">
<ux-table-column type="checkbox" width="55"></ux-table-column> <ux-table-column type="checkbox" width="55"></ux-table-column>
<ux-table-column type="index" width="50" title=" "></ux-table-column> <ux-table-column type="index" width="50" title=" "></ux-table-column>
<ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index" :prop="item.prop" :title="item.prop" <ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index"
:width="item.width" sortable> :prop="item.prop" :title="item.prop"
:width="item.width" sortable>
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<el-tooltip effect="dark" :content="item.desc" placement="top"> <el-tooltip effect="dark" :content="item.desc" placement="top">
<span>{{ item.prop }}</span> <span>{{ item.prop }}</span>
</el-tooltip> </el-tooltip>
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea> <textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner"
rows="1"></textarea>
</template> </template>
</ux-table-column> </ux-table-column>
</ux-grid> </ux-grid>
<el-pagination <el-pagination
style="margin-top: 10px;" style="margin-top: 10px;"
@size-change="handlePageSizeChange" @size-change="handlePageSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="currentPage" :current-page="currentPage"
:page-sizes="[50, 100, 300, 500]" :page-sizes="[50, 100, 300, 500]"
:page-size="pageSize" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="tableTotalCount"> :total="tableTotalCount">
</el-pagination> </el-pagination>
</template> </template>
</el-tab-pane> </el-tab-pane>
@@ -117,7 +125,7 @@
更新条件列： 更新条件列：
<el-select v-model="conditionDataColsChoice" multiple placeholder="请选择" style="width: 370px;"> <el-select v-model="conditionDataColsChoice" multiple placeholder="请选择" style="width: 370px;">
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop" <el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop"
:value="item.prop"></el-option> :value="item.prop"></el-option>
</el-select> </el-select>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@@ -130,7 +138,7 @@
<el-form label-width="120px"> <el-form label-width="120px">
<el-form-item label="导出类型："> <el-form-item label="导出类型：">
<el-select v-model="downloadDataParam.downloadType" filterable placeholder="请选择导出类型" <el-select v-model="downloadDataParam.downloadType" filterable placeholder="请选择导出类型"
style="width: 370px;"> style="width: 370px;">
<el-option label="SQL Inserts" value="insert"></el-option> <el-option label="SQL Inserts" value="insert"></el-option>
<el-option label="SQL Updates" value="update"></el-option> <el-option label="SQL Updates" value="update"></el-option>
<el-option label="JSON" value="json"></el-option> <el-option label="JSON" value="json"></el-option>
@@ -139,17 +147,20 @@
</el-form-item> </el-form-item>
<el-form-item label="数据表：" v-if="downloadDataParam.downloadType === 'insert'"> <el-form-item label="数据表：" v-if="downloadDataParam.downloadType === 'insert'">
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.dropTableFlag" <el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.dropTableFlag"
@change="dropTableFlagChange">删除表{{ downloadDataParam.dropTableFlag == 1 ? '!!' : '' }} @change="dropTableFlagChange">删除表{{
downloadDataParam.dropTableFlag == 1 ? '!!' : ''
}}
</el-checkbox> </el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.createTableFlag" <el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.createTableFlag"
@change="createTableFlagChange">创建表 @change="createTableFlagChange">创建表
</el-checkbox> </el-checkbox>
</el-form-item> </el-form-item>
<el-form-item label="更新条件列：" v-if="downloadDataParam.downloadType === 'update'"> <el-form-item label="更新条件列：" v-if="downloadDataParam.downloadType === 'update'">
<el-select v-model="downloadDataParam.conditionColumnArr" multiple placeholder="不选则是没有条件的更新" <el-select v-model="downloadDataParam.conditionColumnArr" multiple
style="width: 370px;"> placeholder="不选则是没有条件的更新"
style="width: 370px;">
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop" <el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.prop"
:value="item.prop"></el-option> :value="item.prop"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -159,16 +170,17 @@
</span> </span>
</el-dialog> </el-dialog>
<el-drawer <el-drawer
size="350px" size="350px"
:with-header="false" :with-header="false"
:visible.sync="choiceShowColumnDrawer" :visible.sync="choiceShowColumnDrawer"
:before-close="choiceShowColumnDrawerClose" :before-close="choiceShowColumnDrawerClose"
direction="rtl"> direction="rtl">
<div style="padding: 10px;"> <div style="padding: 10px;">
<el-row> <el-row>
<el-col :span="12">选择展示列</el-col> <el-col :span="12">选择展示列</el-col>
<el-col :span="12" style="text-align: right;"> <el-col :span="12" style="text-align: right;">
<el-checkbox v-model="choiceShowColumnAll" @change="choiceShowColumnAllChange">全选</el-checkbox> <el-checkbox v-model="choiceShowColumnAll" @change="choiceShowColumnAllChange">全选
</el-checkbox>
<el-button type="primary" size="mini" @click="choiceShowColumnOk" style="margin-left: 10px;">确定 <el-button type="primary" size="mini" @click="choiceShowColumnOk" style="margin-left: 10px;">确定
</el-button> </el-button>
</el-col> </el-col>
@@ -176,8 +188,8 @@
</div> </div>
<div style="overflow: auto; height: calc(100vh - 50px);"> <div style="overflow: auto; height: calc(100vh - 50px);">
<el-tree ref="showColumnTree" node-key="name" :props="showColumnProps" :data="tableDataColumns" <el-tree ref="showColumnTree" node-key="name" :props="showColumnProps" :data="tableDataColumns"
check-on-click-node show-checkbox check-on-click-node show-checkbox
@check-change="tableDataColumnsCheckChange"> @check-change="tableDataColumnsCheckChange">
</el-tree> </el-tree>
</div> </div>
</el-drawer> </el-drawer>
@@ -198,7 +210,7 @@ import Clickoutside from 'element-ui/src/utils/clickoutside'
export default { export default {
name: 'dataPreview', name: 'dataPreview',
directives: { Clickoutside }, directives: {Clickoutside},
data() { data() {
return { return {
executorDesc: "", executorDesc: "",
@@ -463,24 +475,24 @@ export default {
this.$set(this.choiceResultObj, this.executeShowTable, val); this.$set(this.choiceResultObj, this.executeShowTable, val);
}, },
//表格单元格鼠标焦点事件 //表格单元格鼠标焦点事件
mouseOnFocus(row, column, cell, event){ mouseOnFocus(row, column, cell, event) {
if(this.uxGridCell){ if (this.uxGridCell) {
this.uxGridCell.style.border = 'none' this.uxGridCell.style.border = 'none'
} }
cell.style.border = '2px solid #0078d7' cell.style.border = '2px solid #0078d7'
this.uxGridCell = cell; this.uxGridCell = cell;
}, },
//表格单元格 hover 退出 //表格单元格 hover 退出
mouseLeave(row, column, cell, event){ mouseLeave(row, column, cell, event) {
// if(this.uxGridCell){ // if(this.uxGridCell){
// this.uxGridCell.style.border = 'none' // this.uxGridCell.style.border = 'none'
// } // }
}, },
// 点击区域外 // 点击区域外
handleClickOutside() { handleClickOutside() {
if(this.uxGridCell){ if (this.uxGridCell) {
this.uxGridCell.style.border = 'none' this.uxGridCell.style.border = 'none'
} }
}, },
doCopyCheckLineUpdate() { doCopyCheckLineUpdate() {
let choiceData = this.choiceResultObj[this.executeShowTable] || []; let choiceData = this.choiceResultObj[this.executeShowTable] || [];
@@ -490,8 +502,8 @@ export default {
this.conditionDataColsChoice = []; this.conditionDataColsChoice = [];
this.exportConditionVisible = false; this.exportConditionVisible = false;
this.$copyText(copyData).then( this.$copyText(copyData).then(
res => this.$message.success("内容已复制到剪切板！"), res => this.$message.success("内容已复制到剪切板！"),
err => this.$message.error("抱歉，复制失败！") err => this.$message.error("抱歉，复制失败！")
); );
} }
}, },
@@ -546,8 +558,8 @@ export default {
} }
let copyData = copyFormatter.format(type, this.pageParam.dbType, dataCols, choiceData, this.conditionDataColsChoice, this.pageParam.dbName, this.pageParam.tableName); let copyData = copyFormatter.format(type, this.pageParam.dbType, dataCols, choiceData, this.conditionDataColsChoice, this.pageParam.dbName, this.pageParam.tableName);
this.$copyText(copyData).then( this.$copyText(copyData).then(
res => this.$message.success("内容已复制到剪切板！"), res => this.$message.success("内容已复制到剪切板！"),
err => this.$message.error("抱歉，复制失败！") err => this.$message.error("抱歉，复制失败！")
); );
} }
}, },
@@ -686,17 +698,19 @@ export default {
/deep/ .elx-table .elx-header--column.col--ellipsis { /deep/ .elx-table .elx-header--column.col--ellipsis {
height: 30px; height: 30px;
//padding-left: 5px; //padding-left: 5px;
} }
.xxpre{ .xxpre {
overflow: auto; overflow: auto;
} }
.el-textarea__inner{
border: none; .el-textarea__inner {
background-color: #f0f8ff00; border: none;
background-color: #f0f8ff00;
} }
.el-textarea__inner::-webkit-scrollbar { .el-textarea__inner::-webkit-scrollbar {
display: none; display: none;
} }
</style> </style>

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

@@ -2,34 +2,37 @@
<div class="data-executor-vue"> <div class="data-executor-vue">
<div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;"> <div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin-bottom: 5px;"> <el-card style="margin-bottom: 5px;">
<ace-editor v-model="sqlExecutorContent" ref="sqlEditor" @init="sqlExecutorInit" lang="sql" theme="monokai" <ace-editor v-model="sqlExecutorContent" ref="sqlEditor" @init="sqlExecutorInit" lang="sql"
width="100%" height="20" :options="sqlEditorConfig" :source="executorSource" theme="monokai"
@cursorSelection="cursorSelection" style="margin-bottom: 5px;"></ace-editor> width="100%" height="20" :options="sqlEditorConfig" :source="executorSource"
@cursorSelection="cursorSelection" style="margin-bottom: 5px;"></ace-editor>
<div> <div>
<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="mini" <el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="mini"
icon="el-icon-video-pause">取消执行 icon="el-icon-video-pause">取消执行
</el-button> </el-button>
<el-tooltip v-else effect="dark" content="Ctrl+R、Ctrl+Enter" placement="top"> <el-tooltip v-else effect="dark" content="Ctrl+R、Ctrl+Enter" placement="top">
<el-button v-on:click="doExecutorSql" type="primary" plain size="mini" icon="el-icon-video-play">{{executeButtonText}} <el-button v-on:click="doExecutorSql" type="primary" plain size="mini"
icon="el-icon-video-play">{{ executeButtonText }}
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-button icon="el-icon-brush" size="mini" @click="formatterSql">SQL美化</el-button> <el-button icon="el-icon-brush" size="mini" @click="formatterSql">SQL美化</el-button>
<el-button v-on:click="addFavorite('')" plain size="mini" icon="el-icon-star-off">收藏</el-button> <el-button v-on:click="addFavorite('')" plain size="mini" icon="el-icon-star-off">收藏</el-button>
<div style="float: right;"> <div style="float: right;">
<el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" size="mini" filterable <el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" size="mini" filterable
placeholder="请选择数据源" style="width: 300px;margin-left: 10px;"> placeholder="请选择数据源" style="width: 300px;margin-left: 10px;">
<el-option v-for="item in datasourceOptions" :key="item.id" :label="item.name" <el-option v-for="item in datasourceOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option> :value="item.id"></el-option>
</el-select> </el-select>
<el-select v-model="choiceDatabase" @change="databaseChangeEvents" size="mini" filterable <el-select v-model="choiceDatabase" @change="databaseChangeEvents" size="mini" filterable
placeholder="请选择数据库" style="width: 200px;margin-left: 10px;"> placeholder="请选择数据库" style="width: 200px;margin-left: 10px;">
<el-option v-for="item in databaseList" :key="item.dbName" :label="item.dbName" <el-option v-for="item in databaseList" :key="item.dbName" :label="item.dbName"
:value="item.dbName"></el-option> :value="item.dbName"></el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div v-if="sqlParams.length > 0" class="sql-params"> <div v-if="sqlParams.length > 0" class="sql-params">
<el-input :placeholder="'请输入'+param.key+'的值'" v-model="param.value" v-for="(param,index) in sqlParams" :key="index"> <el-input :placeholder="'请输入'+param.key+'的值'" v-model="param.value"
v-for="(param,index) in sqlParams" :key="index">
<template slot="prepend">{{ param.key }}</template> <template slot="prepend">{{ param.key }}</template>
</el-input> </el-input>
</div> </div>
@@ -39,7 +42,7 @@
<div style="position: absolute;right: 0;z-index: 1;"> <div style="position: absolute;right: 0;z-index: 1;">
<!-- 复制选中行 --> <!-- 复制选中行 -->
<el-dropdown @command="handleCopyCheckLineCommand" <el-dropdown @command="handleCopyCheckLineCommand"
v-show="this.choiceResultObj[this.executeShowTable] && this.choiceResultObj[this.executeShowTable].length > 0"> v-show="this.choiceResultObj[this.executeShowTable] && this.choiceResultObj[this.executeShowTable].length > 0">
<el-button type="primary" size="small" icon="el-icon-document-copy"> <el-button type="primary" size="small" icon="el-icon-document-copy">
复制选中行<i class="el-icon-arrow-down el-icon--right"></i> 复制选中行<i class="el-icon-arrow-down el-icon--right"></i>
</el-button> </el-button>
@@ -57,32 +60,38 @@
<el-table-column prop="content" label="SQL"> <el-table-column prop="content" label="SQL">
<template slot-scope="scope"> <template slot-scope="scope">
<pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)" <pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)"
:title="scope.row.content">{{ scope.row.content }}</pre> :title="scope.row.content">{{ scope.row.content }}</pre>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="160px"> <el-table-column label="操作" width="160px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="primary" @click="inputFavoriteSql(scope.row)">输入</el-button> <el-button size="mini" type="primary" @click="inputFavoriteSql(scope.row)">
输入
</el-button>
<el-button size="mini" type="success" @click="addFavorite(scope.row.content)" <el-button size="mini" type="success" @click="addFavorite(scope.row.content)"
style="margin-left: 10px;">收藏 style="margin-left: 10px;">收藏
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="我的收藏" name="tabFavorite"> <el-tab-pane label="我的收藏" name="tabFavorite">
<el-table :data="myFavoriteList" stripe border style="width: 100%; margin-bottom: 5px;" v-infinite-scroll> <el-table :data="myFavoriteList" stripe border style="width: 100%; margin-bottom: 5px;"
v-infinite-scroll>
<el-table-column prop="createTime" label="执行时间" width="160px"></el-table-column> <el-table-column prop="createTime" label="执行时间" width="160px"></el-table-column>
<el-table-column prop="content" label="SQL"> <el-table-column prop="content" label="SQL">
<template slot-scope="scope"> <template slot-scope="scope">
<pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)" <pre class="sql-content-line" @dblclick="inputFavoriteSql(scope.row)"
:title="scope.row.content">{{ scope.row.content }}</pre> :title="scope.row.content">{{ scope.row.content }}</pre>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="160px"> <el-table-column label="操作" width="160px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="primary" v-on:click="inputFavoriteSql(scope.row)">输入</el-button> <el-button size="mini" type="primary" v-on:click="inputFavoriteSql(scope.row)">
<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> </el-button>
</template> </template>
@@ -96,50 +105,59 @@
<div style="color: #f00;">{{ executeError }}</div> <div style="color: #f00;">{{ executeError }}</div>
</el-tab-pane> </el-tab-pane>
<template v-else> <template v-else>
<el-tab-pane :label="resultItem.label" :name="resultItem.name" v-for="(resultItem,index) in executeResultList" :key="index" <el-tab-pane :label="resultItem.label" :name="resultItem.name"
lazy> v-for="(resultItem,index) in executeResultList" :key="index"
lazy>
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div> <div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div>
<ux-grid v-else <ux-grid v-else
v-clickoutside="handleClickOutside" v-clickoutside="handleClickOutside"
:data="resultItem.dataList" :data="resultItem.dataList"
@table-body-scroll="scroll" @table-body-scroll="scroll"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
@cell-click="mouseOnFocus" @cell-click="mouseOnFocus"
@cell-mouse-leave="mouseLeave" @cell-mouse-leave="mouseLeave"
:checkboxConfig="{checkMethod: selectable, highlight: true}" :checkboxConfig="{checkMethod: selectable, highlight: true}"
stripe border :height="height" max-height="600" stripe border :height="height" max-height="600"
style="width: 100%; margin-bottom: 5px;" class="execute-result-table"> style="width: 100%; margin-bottom: 5px;" class="execute-result-table">
<ux-table-column type="checkbox" width="55"></ux-table-column> <ux-table-column type="checkbox" width="55"></ux-table-column>
<ux-table-column type="index" width="55" title=" "></ux-table-column> <ux-table-column type="index" width="55" title=" "></ux-table-column>
<ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index" :prop="item.prop" :title="item.label" <ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index"
:width="item.width"> :prop="item.prop" :title="item.label"
:width="item.width">
<template slot="header" slot-scope="scope">
<el-tooltip effect="dark" :content="item.desc" placement="top">
<span>{{ item.label }}</span>
</el-tooltip>
</template>
<template slot-scope="scope"> <template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea> <textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner"
rows="1"></textarea>
</template> </template>
</ux-table-column> </ux-table-column>
</ux-grid> </ux-grid>
<el-pagination <el-pagination
v-if="resultItem.selectCount" v-if="resultItem.selectCount"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="currentPage" :current-page="currentPage"
:page-size="pageSize" :page-size="pageSize"
:page-sizes="[1000]" :page-sizes="[1000]"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="resultItem.selectCount"> :total="resultItem.selectCount">
</el-pagination> </el-pagination>
<div v-if="resultItem.selectCount" style="position: absolute;right: 5px;bottom: 5px;"> <div v-if="resultItem.selectCount" style="position: absolute;right: 5px;bottom: 5px;">
<el-button type="primary" plain v-on:click="viewAllData()">查看所有</el-button> <el-button type="primary" plain v-on:click="viewAllData()">查看所有</el-button>
</div> </div>
<div v-if="!resultItem.selectCount" style="height: 20px;font-size: 13px;font-weight: 400;color: #606266;padding-left: 5px;"> <div v-if="!resultItem.selectCount"
共 {{resultItem.totalCount}} 条 style="height: 20px;font-size: 13px;font-weight: 400;color: #606266;padding-left: 5px;">
共 {{ resultItem.totalCount }} 条
</div> </div>
</el-tab-pane> </el-tab-pane>
</template> </template>
<el-main v-loading="loadingAll" <el-main v-loading="loadingAll"
v-show="loadingAll" v-show="loadingAll"
element-loading-text="正在加载中" element-loading-text="正在加载中"
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
style="height: 175px;"> style="height: 175px;">
</el-main> </el-main>
</el-tabs> </el-tabs>
</div> </div>
@@ -151,7 +169,7 @@
更新条件列： 更新条件列：
<el-select v-model="conditionDataColsChoice" multiple placeholder="请选择" style="width: 370px;"> <el-select v-model="conditionDataColsChoice" multiple placeholder="请选择" style="width: 370px;">
<el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.label" <el-option v-for="item in conditionDataCols" :key="item.prop" :label="item.label"
:value="item.prop"></el-option> :value="item.prop"></el-option>
</el-select> </el-select>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@@ -173,11 +191,11 @@ import Clickoutside from 'element-ui/src/utils/clickoutside';
import merge from 'webpack-merge'; import merge from 'webpack-merge';
export default { export default {
directives: { Clickoutside }, directives: {Clickoutside},
data() { data() {
return { return {
//遮罩层 //遮罩层
loadingAll: false, loadingAll: false,
height: 0, height: 0,
scrollTop: 0, scrollTop: 0,
@@ -195,10 +213,10 @@ export default {
editorColumnInfo: {}, editorColumnInfo: {},
//选中的单元格 //选中的单元格
uxGridCell: "", uxGridCell: "",
pageSize: 1000, pageSize: 1000,
currentPage: 1, currentPage: 1,
sqlExecuting: false, sqlExecuting: false,
executeResultList: [], executeResultList: [],
@@ -217,7 +235,7 @@ export default {
conditionDataCols: [], conditionDataCols: [],
conditionDataColsChoice: [], conditionDataColsChoice: [],
//执行按钮文本 //执行按钮文本
executeButtonText: '执行', executeButtonText: '执行',
// 编辑器 // 编辑器
sqlExecutorContent: '', sqlExecutorContent: '',
sqlEditorConfig: { sqlEditorConfig: {
@@ -243,9 +261,9 @@ export default {
this.height = 190; this.height = 190;
this.loadDatasourceList(); this.loadDatasourceList();
}, },
activated(){ activated() {
this.loadDatasourceList(); this.loadDatasourceList();
}, },
methods: { methods: {
sqlExecutorInit(editor) { sqlExecutorInit(editor) {
this.sqlExecutorEditor = editor; this.sqlExecutorEditor = editor;
@@ -275,12 +293,12 @@ export default {
} }
}); });
}, },
cursorSelection(sqlValue){ cursorSelection(sqlValue) {
if(sqlValue){ if (sqlValue) {
this.executeButtonText = '执行已选择的' this.executeButtonText = '执行已选择的'
}else{ } else {
this.executeButtonText = '执行' this.executeButtonText = '执行'
} }
}, },
scroll({scrollTop, scrollLeft}) { scroll({scrollTop, scrollLeft}) {
this.scrollTop = scrollTop this.scrollTop = scrollTop
@@ -365,7 +383,7 @@ export default {
this.$message.error("请先选择数据源"); this.$message.error("请先选择数据源");
return; return;
} }
if(!this.choiceDatabase){ if (!this.choiceDatabase) {
this.$message.error("请先选择数据库"); this.$message.error("请先选择数据库");
return; return;
} }
@@ -389,17 +407,124 @@ export default {
sourceId: this.choiceDatasourceId, sourceId: this.choiceDatasourceId,
dbName: this.choiceDatabase, dbName: this.choiceDatabase,
executeId: this.nowExecutorId, executeId: this.nowExecutorId,
pageNum: this.currentPage, pageNum: this.currentPage,
pageSize: this.pageSize, pageSize: this.pageSize,
sql: sqlValue, sql: sqlValue,
params: JSON.stringify(sqlParamObj), params: JSON.stringify(sqlParamObj),
}).then(response => { }).then(response => {
this.sqlExecuting = false; this.sqlExecuting = false;
if (response.errCode != 200) { if (response.errCode != 200) {
this.executeShowTable = 'tabError'; this.executeShowTable = 'tabError';
this.executeError = response.errMsg; this.executeError = response.errMsg;
return; return;
} }
let resIndex = 1;
let executeResultList = [];
let resData = response.data || [];
let executeResultInfo = "";
resData.forEach(result => {
let dataListRes = [];
let previewColumns = [];
executeResultInfo += this.getExecuteInfoStr(result);
if (result.errCode === 0) {
let dataListTemp = result.data || [];
let headerList = result.header || [];
// 组装表头
let columnSet = {};
if (headerList.length > 0) {
let headerIndex = 0;
headerList.forEach(item => {
let key = 'value_' + (headerIndex++);
columnSet[key] = item;
previewColumns.push({prop: key, label: item, desc: item});
});
dataListTemp.forEach(item => {
let dataItem = {}, dataIndex = 0;
previewColumns.forEach(column => {
let key = column.prop;
dataItem[key] = item[dataIndex++];
if ((dataItem[key] + '').length > columnSet[key].length) {
columnSet[key] = dataItem[key] + '';
}
});
dataListRes.push(dataItem);
});
previewColumns.forEach(item => {
// 动态计算宽度~自己想的一个方法，666
document.getElementById("widthCalculate").innerText = columnSet[item.prop];
let width = document.getElementById("widthCalculate").offsetWidth;
width = width + (columnSet[item.prop] === item.label ? 35 : 55);
width = (width < 50) ? 50 : width;
item.width = (width > 200) ? 200 : width;
});
}
}
executeResultList.push({
label: '结果' + resIndex,
name: 'result_' + resIndex,
errMsg: result.errMsg,
errCode: result.errCode,
queryTime: result.queryTime,
selectCount: result.selectCount,
totalCount: dataListRes.length,
dataCols: previewColumns,
dataList: dataListRes
});
resIndex++;
//动态设置表格高度,尽量避免出现滚动条
if (result.selectCount) {
this.height = 170;
}
});
//多个结果情况下,且点击分页
if (init != 1) {
this.executeShowTable = (resIndex === 1) ? "tabInfo" : "result_1";
}
this.executeResultInfo = executeResultInfo;
this.executeResultList = executeResultList;
this.loadHistoryList();
});
},
//查看所有数据
viewAllData(init) {
this.loadingAll = true;
if (!this.choiceDatasourceId) {
this.$message.error("请先选择数据源");
return;
}
this.executeError = "";
this.executeUseTime = "";
this.executeResultList = [];
let sqlParamObj = {};
this.sqlParams.forEach(item => {
if (!!item.value) {
sqlParamObj[item.key] = item.value;
this.sqlParamHistory[item.key] = item.value;
}
});
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
let sqlValue = this.sqlExecutorEditor.getSelectedText();
if (!sqlValue) {
sqlValue = this.sqlExecutorEditor.getValue();
}
this.sqlExecuting = true;
datasourceApi.queryExecuteSql({
sourceId: this.choiceDatasourceId,
dbName: this.choiceDatabase,
executeId: this.nowExecutorId,
pageNum: this.currentPage,
pageSize: this.pageSize,
sql: sqlValue,
type: 'noPage',
params: JSON.stringify(sqlParamObj),
}).then(response => {
this.sqlExecuting = false;
this.loadingAll = false;
if (response.errCode != 200) {
this.executeShowTable = 'tabError';
this.executeError = response.errMsg;
return;
}
let resIndex = 1; let resIndex = 1;
let executeResultList = []; let executeResultList = [];
let resData = response.data || []; let resData = response.data || [];
@@ -454,12 +579,12 @@ export default {
}); });
resIndex++; resIndex++;
//动态设置表格高度,尽量避免出现滚动条 //动态设置表格高度,尽量避免出现滚动条
if(result.selectCount){ if (result.selectCount) {
this.height = 170; this.height = 170;
} }
}); });
//多个结果情况下,且点击分页 //多个结果情况下,且点击分页
if(init!=1){ if (init != 1) {
this.executeShowTable = (resIndex === 1) ? "tabInfo" : "result_1"; this.executeShowTable = (resIndex === 1) ? "tabInfo" : "result_1";
} }
this.executeResultInfo = executeResultInfo; this.executeResultInfo = executeResultInfo;
@@ -467,118 +592,11 @@ export default {
this.loadHistoryList(); this.loadHistoryList();
}); });
}, },
//查看所有数据 handleCurrentChange(to) {
viewAllData(init){ this.currentPage = to;
this.loadingAll = true; let init = 1;
if (!this.choiceDatasourceId) { this.doExecutorSql(init);
this.$message.error("请先选择数据源");
return;
}
this.executeError = "";
this.executeUseTime = "";
this.executeResultList = [];
let sqlParamObj = {};
this.sqlParams.forEach(item => {
if (!!item.value) {
sqlParamObj[item.key] = item.value;
this.sqlParamHistory[item.key] = item.value;
}
});
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
let sqlValue = this.sqlExecutorEditor.getSelectedText();
if (!sqlValue) {
sqlValue = this.sqlExecutorEditor.getValue();
}
this.sqlExecuting = true;
datasourceApi.queryExecuteSql({
sourceId: this.choiceDatasourceId,
dbName: this.choiceDatabase,
executeId: this.nowExecutorId,
pageNum: this.currentPage,
pageSize: this.pageSize,
sql: sqlValue,
type: 'noPage',
params: JSON.stringify(sqlParamObj),
}).then(response => {
this.sqlExecuting = false;
this.loadingAll = false;
if (response.errCode != 200) {
this.executeShowTable = 'tabError';
this.executeError = response.errMsg;
return;
}
let resIndex = 1;
let executeResultList = [];
let resData = response.data || [];
let executeResultInfo = "";
resData.forEach(result => {
let dataListRes = [];
let previewColumns = [];
executeResultInfo += this.getExecuteInfoStr(result);
if (result.errCode === 0) {
let dataListTemp = result.data || [];
let headerList = result.header || [];
// 组装表头
let columnSet = {};
if (headerList.length > 0) {
let headerIndex = 0;
headerList.forEach(item => {
let key = 'value_' + (headerIndex++);
columnSet[key] = item;
previewColumns.push({prop: key, label: item});
});
dataListTemp.forEach(item => {
let dataItem = {}, dataIndex = 0;
previewColumns.forEach(column => {
let key = column.prop;
dataItem[key] = item[dataIndex++];
if ((dataItem[key] + '').length > columnSet[key].length) {
columnSet[key] = dataItem[key] + '';
}
});
dataListRes.push(dataItem);
});
previewColumns.forEach(item => {
// 动态计算宽度~自己想的一个方法，666
document.getElementById("widthCalculate").innerText = columnSet[item.prop];
let width = document.getElementById("widthCalculate").offsetWidth;
width = width + (columnSet[item.prop] === item.label ? 35 : 55);
width = (width < 50) ? 50 : width;
item.width = (width > 200) ? 200 : width;
});
}
}
executeResultList.push({
label: '结果' + resIndex,
name: 'result_' + resIndex,
errMsg: result.errMsg,
errCode: result.errCode,
queryTime: result.queryTime,
selectCount: result.selectCount,
totalCount: dataListRes.length,
dataCols: previewColumns,
dataList: dataListRes
});
resIndex++;
//动态设置表格高度,尽量避免出现滚动条
if(result.selectCount){
this.height = 170;
}
});
//多个结果情况下,且点击分页
if(init!=1){
this.executeShowTable = (resIndex === 1) ? "tabInfo" : "result_1";
}
this.executeResultInfo = executeResultInfo;
this.executeResultList = executeResultList;
this.loadHistoryList();
});
}, },
handleCurrentChange(to) {
this.currentPage = to;
let init = 1;
this.doExecutorSql(init);
},
loadDatasourceList() { loadDatasourceList() {
datasourceApi.datasourceList({}).then(json => { datasourceApi.datasourceList({}).then(json => {
this.datasourceList = json.data || []; this.datasourceList = json.data || [];
@@ -594,11 +612,11 @@ export default {
if (this.datasourceList.length > 0) { if (this.datasourceList.length > 0) {
this.choiceDatasourceId = this.datasourceList[0].id; this.choiceDatasourceId = this.datasourceList[0].id;
//初次加载根据query值设置对应数据源 //初次加载根据query值设置对应数据源
if(this.$route.query.datasourceId){ if (this.$route.query.datasourceId) {
this.choiceDatasourceId = parseInt(this.$route.query.datasourceId); this.choiceDatasourceId = parseInt(this.$route.query.datasourceId);
} }
//初次加载根据query值设置对应数据库 //初次加载根据query值设置对应数据库
if(this.$route.query.database){ if (this.$route.query.database) {
this.choiceDatabase = this.$route.query.database; this.choiceDatabase = this.$route.query.database;
} }
this.executorSource = {sourceId: this.choiceDatasourceId}; this.executorSource = {sourceId: this.choiceDatasourceId};
@@ -617,9 +635,14 @@ export default {
let sysDbName = ["information_schema", "master", "model", "msdb", "tempdb"]; let sysDbName = ["information_schema", "master", "model", "msdb", "tempdb"];
let notSysDbItem = this.databaseList.find(item => sysDbName.indexOf(item.dbName) < 0); let notSysDbItem = this.databaseList.find(item => sysDbName.indexOf(item.dbName) < 0);
// 非初次加载，动态改变url参数 // 非初次加载，动态改变url参数
if(!initFlag){ if (!initFlag) {
this.choiceDatabase = (!!notSysDbItem) ? notSysDbItem.dbName : this.databaseList[0].dbName; this.choiceDatabase = (!!notSysDbItem) ? notSysDbItem.dbName : this.databaseList[0].dbName;
this.$router.replace({ query: { datasourceId: this.choiceDatasourceId,database:this.choiceDatabase } }) this.$router.replace({
query: {
datasourceId: this.choiceDatasourceId,
database: this.choiceDatabase
}
})
} }
this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase}; this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase};
} }
@@ -650,15 +673,15 @@ export default {
}, },
datasourceChangeEvents() { datasourceChangeEvents() {
this.executorSource = {sourceId: this.choiceDatasourceId}; this.executorSource = {sourceId: this.choiceDatasourceId};
this.currentPage = 1; this.currentPage = 1;
this.loadDatabaseList(); this.loadDatabaseList();
this.loadSourceBaseInfo(); this.loadSourceBaseInfo();
this.loadHistoryAndFavoriteList(); this.loadHistoryAndFavoriteList();
}, },
databaseChangeEvents() { databaseChangeEvents() {
this.$router.replace({ query: { datasourceId: this.choiceDatasourceId,database:this.choiceDatabase } }) this.$router.replace({query: {datasourceId: this.choiceDatasourceId, database: this.choiceDatabase}})
this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase}; this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase};
this.currentPage = 1; this.currentPage = 1;
}, },
getExecuteInfoStr(resultData) { getExecuteInfoStr(resultData) {
var resultStr = resultData.executeSql; var resultStr = resultData.executeSql;
@@ -698,7 +721,7 @@ export default {
handleSelectionChange(val) { handleSelectionChange(val) {
this.$set(this.choiceResultObj, this.executeShowTable, val); this.$set(this.choiceResultObj, this.executeShowTable, val);
}, },
tabHandleClick(t){ tabHandleClick(t) {
}, },
doCopyCheckLineUpdate() { doCopyCheckLineUpdate() {
@@ -709,8 +732,8 @@ export default {
this.conditionDataColsChoice = []; this.conditionDataColsChoice = [];
this.exportConditionVisible = false; this.exportConditionVisible = false;
this.$copyText(copyData).then( this.$copyText(copyData).then(
res => this.$message.success("内容已复制到剪切板！"), res => this.$message.success("内容已复制到剪切板！"),
err => this.$message.error("抱歉，复制失败！") err => this.$message.error("抱歉，复制失败！")
); );
} }
}, },
@@ -726,30 +749,30 @@ export default {
} }
let copyData = copyFormatter.format(type, this.editorDbProduct, dataCols, choiceData, ''); let copyData = copyFormatter.format(type, this.editorDbProduct, dataCols, choiceData, '');
this.$copyText(copyData).then( this.$copyText(copyData).then(
res => this.$message.success("内容已复制到剪切板！"), res => this.$message.success("内容已复制到剪切板！"),
err => this.$message.error("抱歉，复制失败！") err => this.$message.error("抱歉，复制失败！")
); );
} }
}, },
//表格单元格鼠标焦点事件 //表格单元格鼠标焦点事件
mouseOnFocus(row, column, cell, event){ mouseOnFocus(row, column, cell, event) {
if(this.uxGridCell){ if (this.uxGridCell) {
this.uxGridCell.style.border = 'none' this.uxGridCell.style.border = 'none'
} }
cell.style.border = '2px solid #0078d7' cell.style.border = '2px solid #0078d7'
this.uxGridCell = cell; this.uxGridCell = cell;
}, },
//表格单元格 hover 退出 //表格单元格 hover 退出
mouseLeave(row, column, cell, event){ mouseLeave(row, column, cell, event) {
// if(this.uxGridCell){ // if(this.uxGridCell){
// this.uxGridCell.style.border = 'none' // this.uxGridCell.style.border = 'none'
// } // }
}, },
// 点击区域外 // 点击区域外
handleClickOutside() { handleClickOutside() {
if(this.uxGridCell){ if (this.uxGridCell) {
this.uxGridCell.style.border = 'none' this.uxGridCell.style.border = 'none'
} }
}, },
} }
} }
@@ -837,25 +860,30 @@ export default {
/deep/ .elx-table .elx-header--column.col--ellipsis { /deep/ .elx-table .elx-header--column.col--ellipsis {
height: 30px; height: 30px;
//padding-left: 5px; //padding-left: 5px;
} }
.el-textarea__inner{
border: none; .el-textarea__inner {
background-color: #f0f8ff00; border: none;
background-color: #f0f8ff00;
} }
.el-textarea__inner::-webkit-scrollbar { .el-textarea__inner::-webkit-scrollbar {
display: none; display: none;
} }
/deep/ .el-tabs--border-card>.el-tabs__content {
padding: 5px; /deep/ .el-tabs--border-card > .el-tabs__content {
padding: 5px;
} }
/deep/ .elx-table .elx-body--column.col--ellipsis>.elx-cell,
.elx-table .elx-footer--column.col--ellipsis>.elx-cell, /deep/ .elx-table .elx-body--column.col--ellipsis > .elx-cell,
.elx-table .elx-header--column.col--ellipsis>.elx-cell{ .elx-table .elx-footer--column.col--ellipsis > .elx-cell,
overflow: auto; .elx-table .elx-header--column.col--ellipsis > .elx-cell {
text-overflow: unset; overflow: auto;
text-overflow: unset;
} }
/deep/ .elx-table .elx-body--column.col--ellipsis>.elx-cell::-webkit-scrollbar {
display: none; /deep/ .elx-table .elx-body--column.col--ellipsis > .elx-cell::-webkit-scrollbar {
display: none;
} }
</style> </style>