左侧菜单增加数据导出入口,窗口路由优化

This commit is contained in:
暮光:城中城
2021-08-15 18:03:53 +08:00
parent 3b2abbf19f
commit 04b4794f92
8 changed files with 61 additions and 29 deletions

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.8924efc6.css rel=preload as=style><link href=css/index.2a7107f3.css rel=preload as=style><link href=js/chunk-vendors.333ced1f.js rel=preload as=script><link href=js/index.d7e1d74e.js rel=preload as=script><link href=css/chunk-vendors.8924efc6.css rel=stylesheet><link href=css/index.2a7107f3.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.333ced1f.js></script><script src=js/index.d7e1d74e.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.8924efc6.css rel=preload as=style><link href=css/index.2a7107f3.css rel=preload as=style><link href=js/chunk-vendors.333ced1f.js rel=preload as=script><link href=js/index.067115cf.js rel=preload as=script><link href=css/chunk-vendors.8924efc6.css rel=stylesheet><link href=css/index.2a7107f3.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.333ced1f.js></script><script src=js/index.067115cf.js></script></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -2,8 +2,8 @@
ENV = 'development' ENV = 'development'
# base api # base api
VUE_APP_BASE_API = 'http://local.zyplayer.com:8083/zyplayer-doc-manage' # VUE_APP_BASE_API = 'http://local.zyplayer.com:8083/zyplayer-doc-manage'
# VUE_APP_BASE_API = 'http://doc.zyplayer.com/zyplayer-doc-manage' VUE_APP_BASE_API = 'http://doc.zyplayer.com/zyplayer-doc-manage'
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

@@ -46,8 +46,8 @@
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-coin" :command="{command: 'procedure', node: node}">函数管理</el-dropdown-item> <el-dropdown-item icon="el-icon-coin" :command="{command: 'procedure', node: node}">函数管理</el-dropdown-item>
<el-dropdown-item icon="el-icon-refresh" :command="{command: 'refresh', node: node}">刷新</el-dropdown-item> <el-dropdown-item icon="el-icon-refresh" :command="{command: 'refresh', node: node}">刷新</el-dropdown-item>
<!-- <el-dropdown-item icon="el-icon-upload2" :command="{command: 'upload', node: node}">导入</el-dropdown-item>--> <!--<el-dropdown-item icon="el-icon-upload2" :command="{command: 'upload', node: node}">导入</el-dropdown-item>-->
<!-- <el-dropdown-item icon="el-icon-download" :command="{command: 'download', node: node}">导出</el-dropdown-item>--> <el-dropdown-item icon="el-icon-download" :command="{command: 'download', node: node}">数据导出</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</span> </span>
@@ -192,6 +192,10 @@
let nodeData = param.node.data; let nodeData = param.node.data;
let procedureParam = {sourceId: this.choiceDatasourceId,dbName: nodeData.dbName, host: nodeData.host}; let procedureParam = {sourceId: this.choiceDatasourceId,dbName: nodeData.dbName, host: nodeData.host};
this.$router.push({path: '/procedure/list', query: procedureParam}); this.$router.push({path: '/procedure/list', query: procedureParam});
} else if (param.command == 'download') {
let nodeData = param.node.data;
let procedureParam = {sourceId: this.choiceDatasourceId, dbName: nodeData.dbName};
this.$router.push({path: '/data/export', query: procedureParam});
} else { } else {
this.$message.warning("暂未支持的选项"); this.$message.warning("暂未支持的选项");
} }

View File

@@ -1,7 +1,7 @@
<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" style="padding: 5px 10px 0;">
<el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="item.fullPath" v-for="item in pageList"/> <el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" v-for="item in pageList"/>
</el-tabs> </el-tabs>
<keep-alive> <keep-alive>
<router-view :key="$route.fullPath" @initLoadDataList="initLoadDataList" @loadDatasourceList="loadDatasourceList"/> <router-view :key="$route.fullPath" @initLoadDataList="initLoadDataList" @loadDatasourceList="loadDatasourceList"/>
@@ -18,7 +18,10 @@
pageList: [], pageList: [],
linkList: [], linkList: [],
activePage: '', activePage: '',
multiPage: true, multiPage: true,
ignoreParamPath: [
"/data/export",
],
} }
}, },
computed: { computed: {
@@ -27,20 +30,24 @@
} }
}, },
created() { created() {
this.pageList.push(this.$route); this.pageList.push(this.$route);
this.linkList.push(this.$route.fullPath); let activePage = this.getRouteRealPath(this.$route);
this.activePage = this.$route.fullPath; this.linkList.push(activePage);
}, this.activePage = activePage;
watch: { },
'$route': function (newRoute, oldRoute) { watch: {
this.activePage = newRoute.fullPath; '$route': function (newRoute, oldRoute) {
if (this.linkList.indexOf(newRoute.fullPath) < 0) { let activePage = this.getRouteRealPath(newRoute);
this.linkList.push(newRoute.fullPath); this.activePage = activePage;
this.pageList.push(newRoute); if (this.linkList.indexOf(activePage) < 0) {
this.linkList.push(activePage);
this.pageList.push(newRoute);
} }
}, },
'activePage': function (key) { 'activePage': function (key) {
this.$router.push(key) if (!this.isIgnoreParamPath(key)) {
this.$router.push(key);
}
}, },
}, },
methods: { methods: {
@@ -49,6 +56,12 @@
}, },
loadDatasourceList() { loadDatasourceList() {
this.$emit('loadDatasourceList'); this.$emit('loadDatasourceList');
},
isIgnoreParamPath(path) {
return this.ignoreParamPath.indexOf(path) >= 0;
},
getRouteRealPath(route) {
return this.isIgnoreParamPath(route.path) ? route.path : route.fullPath;
}, },
changePage(key) { changePage(key) {
this.activePage = key.name; this.activePage = key.name;
@@ -61,7 +74,7 @@
this.$message.warning('这是最后一页,不能再关闭了啦'); this.$message.warning('这是最后一页,不能再关闭了啦');
return return
} }
this.pageList = this.pageList.filter(item => item.fullPath !== key); this.pageList = this.pageList.filter(item => this.getRouteRealPath(item) !== key);
let index = this.linkList.indexOf(key); let index = this.linkList.indexOf(key);
this.linkList = this.linkList.filter(item => item !== key); this.linkList = this.linkList.filter(item => item !== key);
index = index >= this.linkList.length ? this.linkList.length - 1 : index; index = index >= this.linkList.length ? this.linkList.length - 1 : index;

View File

@@ -87,7 +87,6 @@
downloadFileType: 1, downloadFileType: 1,
exportTypeChoiceVisible: false, exportTypeChoiceVisible: false,
// 页面展示相关 // 页面展示相关
nowDatasourceShow: {},
databaseList: [], databaseList: [],
tableList: [], tableList: [],
selectTables: [], selectTables: [],
@@ -99,14 +98,30 @@
downloadType: 'insert', downloadType: 'insert',
dropTableFlag: 0, dropTableFlag: 0,
createTableFlag: 0, createTableFlag: 0,
} }
}, },
mounted: function () { activated() {
this.loadDatasourceList(); this.initQueryParam(this.$route);
}, },
mounted() {
this.loadDatasourceList();
},
methods: { methods: {
datasourceChangeEvents() { initQueryParam(to) {
this.nowDatasourceShow = this.choiceDatasourceId; let queryParam = to.query;
let sourceId = parseInt(queryParam.sourceId);
if (!sourceId || !queryParam.dbName) {
return;
}
if (this.choiceDatasourceId === sourceId && this.choiceDatabase === queryParam.dbName) {
return;
}
this.choiceDatasourceId = sourceId;
this.choiceDatabase = queryParam.dbName;
this.datasourceChangeEvents();
this.databaseChangeEvents();
},
datasourceChangeEvents() {
this.loadDatabaseList(this.choiceDatasourceId); this.loadDatabaseList(this.choiceDatasourceId);
}, },
databaseChangeEvents() { databaseChangeEvents() {

View File

@@ -162,7 +162,7 @@
}); });
}, 500); }, 500);
}, },
activated: function () { activated() {
this.initQueryParam(this.$route); this.initQueryParam(this.$route);
}, },
components: { components: {