标签页以tab形式展示

2020-05-03 09:21:28 +08:00
parent 211eafaeed
commit 5300348552
12 changed files with 212 additions and 17 deletions
--- a/zyplayer-doc-ui/db-ui/src/common/config/apimix.js
+++ b/zyplayer-doc-ui/db-ui/src/common/config/apimix.js
@@ -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;
--- a/zyplayer-doc-ui/db-ui/src/components/layouts/PageTableView.vue
+++ b/zyplayer-doc-ui/db-ui/src/components/layouts/PageTableView.vue
@@ -0,0 +1,141 @@
+<template>
+    <div>
+        <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-tabs>
+        <keep-alive>
+            <router-view/>
+        </keep-alive>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'MenuView',
+        components: {},
+        data() {
+            return {
+                pageList: [],
+                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: {
+            pageTabNameMap () {
+                return this.$store.state.global.pageTabNameMap;
+            }
+        },
+        created() {
+            this.pageList.push(this.$route);
+            this.linkList.push(this.$route.fullPath);
+            this.activePage = this.$route.fullPath;
+        },
+        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) {
+                    this.linkList.push(newRoute.fullPath);
+                    this.pageList.push(newRoute);
+                }
+            },
+            'activePage': function (key) {
+                this.$router.push(key)
+            },
+        },
+        methods: {
+            changePage(key) {
+                this.activePage = key.name;
+            },
+            editPage(key, action) {
+                this[action](key);
+            },
+            removePageTab(key) {
+                if (this.pageList.length === 1) {
+                    this.$message.warning('这是最后一页，不能再关闭了啦');
+                    return
+                }
+                this.pageList = this.pageList.filter(item => item.fullPath !== key);
+                let index = this.linkList.indexOf(key);
+                this.linkList = this.linkList.filter(item => item !== key);
+                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>
+
+<style scoped>
+
+</style>
--- a/zyplayer-doc-ui/db-ui/src/main.js
+++ b/zyplayer-doc-ui/db-ui/src/main.js
@@ -10,6 +10,7 @@ import toast from './common/lib/common/toast'

 import VueRouter from 'vue-router'
 import routes from './routes'
+import store from './store/index'
 import axios from 'axios'
 import VueAxios from 'vue-axios'

@@ -25,6 +26,7 @@ Vue.prototype.apilist2 = apimix.apilist1;
 // 公用方法
 Vue.prototype.common = common;
 Vue.prototype.toast = toast;
+Vue.prototype.$store = store;

 const router = new VueRouter({routes});
 // 路由跳转时判断处理
--- a/zyplayer-doc-ui/db-ui/src/routes.js
+++ b/zyplayer-doc-ui/db-ui/src/routes.js
@@ -4,6 +4,8 @@ import UserLogin from './views/user/Login.vue'
 import UserMyInfo from './views/user/MyInfo.vue'
 import UserRouterView from './views/user/RouterView.vue'

+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'
@@ -18,14 +20,29 @@ import CommonNoAuth from './views/common/NoAuth.vue'

 let routes = [
    {
-        path: '/home',
+        path: '/home1',
        component: Home,
        name: '主页',
        meta: {
            requireAuth: true,
        }
    }, {
-        path: '/user',
+        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: '/user1',
        name: '用户管理',
        component: UserRouterView,
        children: [
@@ -33,7 +50,7 @@ let routes = [
            {path: 'myInfo', name: '我的信息',component: UserMyInfo},
        ]
    }, {
-        path: '/table',
+        path: '/table1',
        name: '表信息',
        component: TableRouterView,
        children: [
@@ -41,7 +58,7 @@ let routes = [
            {path: 'database', name: '库信息',component: TableDatabase},
        ]
    }, {
-        path: '/data',
+        path: '/data1',
        name: '数据信息',
        component: DataRouterView,
        children: [
--- a/zyplayer-doc-ui/db-ui/src/store/index.js
+++ b/zyplayer-doc-ui/db-ui/src/store/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import global from './modules/global'
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    modules: {
+        global,
+    }
+});
--- a/zyplayer-doc-ui/db-ui/src/store/modules/global.js
+++ b/zyplayer-doc-ui/db-ui/src/store/modules/global.js
@@ -0,0 +1,18 @@
+export default {
+    namespaced: true,
+    state: {
+        pageTabNameMap: {},
+    },
+    getters: {
+        getPageTabNameMap(state) {
+            return state.pageTabNameMap;
+        }
+    },
+    mutations: {
+        addTableName(state, item) {
+            let sameObj = Object.assign({}, state.pageTabNameMap);
+            sameObj[item.key] = item.val;
+            state.pageTabNameMap = sameObj;
+        },
+    }
+}
--- a/zyplayer-doc-ui/db-ui/src/views/data/Executor.vue
+++ b/zyplayer-doc-ui/db-ui/src/views/data/Executor.vue
@@ -1,13 +1,8 @@
 <template>
    <div class="data-executor-vue">
-        <div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
+        <div style="padding: 0 10px;height: 100%;box-sizing: border-box;">
            <el-card style="margin-bottom: 10px;">
-                <div>
-<!--                    <el-select v-model="choiceDatabase" @change="databaseChangeEvents" filterable placeholder="请选择数据库">-->
-<!--                        <el-option v-for="item in databaseList" :key="item.dbName" :label="item.dbName" :value="item.dbName"></el-option>-->
-<!--                    </el-select>-->
-                </div>
-                <pre id="sqlExecutorEditor" style="width: 100%;height: 500px;"></pre>
+                <pre id="sqlExecutorEditor" style="width: 100%;height: 500px;margin-top: 0;"></pre>
                <div>
                    <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">
--- a/zyplayer-doc-ui/db-ui/src/views/data/Export.vue
+++ b/zyplayer-doc-ui/db-ui/src/views/data/Export.vue
@@ -1,6 +1,6 @@
 <template>
    <div id="app">
-        <div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
+        <div style="padding: 10px;height: 100%;box-sizing: border-box;">
            <el-card style="margin: 10px;">
                <div slot="header" class="clearfix">
                    <span>数据库表导出</span>
--- a/zyplayer-doc-ui/db-ui/src/views/data/TransferData.vue
+++ b/zyplayer-doc-ui/db-ui/src/views/data/TransferData.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="data-transfer-vue">
-        <div style="padding: 10px;height: 100%;box-sizing: border-box;background: #fafafa;">
+        <div style="padding: 0 10px;height: 100%;box-sizing: border-box;">
            <el-card style="margin: 10px;">
                <div slot="header" class="clearfix">
                    <span>数据互导工具</span>
--- a/zyplayer-doc-ui/db-ui/src/views/table/Info.vue
+++ b/zyplayer-doc-ui/db-ui/src/views/table/Info.vue
@@ -115,6 +115,11 @@
                    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
                });
                this.common.post(this.apilist1.tableStatus, this.vueQueryParam, function (json) {
                    app.tableStatusInfo = json.data || {};