|
@@ -17,10 +17,10 @@
|
|
|
<img :src="srcIndex == '0'
|
|
|
? icoUrl[0]['home1']
|
|
|
: icoUrl[0]['home2']
|
|
|
- " />
|
|
|
+ " />
|
|
|
</span>首页
|
|
|
<!-- <span class="nav1">
|
|
|
- <img :src="icoUrl[srcIndex]['home'+srcIndex]" />
|
|
|
+ <img :src="icoUrl[srcIndex]['home'+srcIndex]" />
|
|
|
</span>首页 -->
|
|
|
</el-menu-item>
|
|
|
<el-menu-item index="/home/retrieval">
|
|
@@ -35,13 +35,17 @@
|
|
|
<span class="nav1">
|
|
|
<img :src="srcIndex == '2' ? icoUrl[2]['doc1'] : icoUrl[2]['doc2']" /> </span>文档管理
|
|
|
</template>
|
|
|
- <el-menu-item index="/home/file/part">部门文档</el-menu-item>
|
|
|
- <el-menu-item index="/home/file/publi">公共文档</el-menu-item>
|
|
|
+ <template v-for="(item, index) in docMenus">
|
|
|
+ <el-menu-item :index="item.path">{{item.meta.title}}</el-menu-item>
|
|
|
+ </template>
|
|
|
+ <!-- <li v-for="(item, index) in arr" :key="index"> -->
|
|
|
+ <!-- <el-menu-item index="/home/file/part">部门文档</el-menu-item>
|
|
|
+ <el-menu-item index="/home/doc/public">公共文档</el-menu-item>
|
|
|
<el-menu-item index="/home/file/Storage">分组文档</el-menu-item>
|
|
|
- <el-menu-item index="/home/file/individual">个人文档</el-menu-item>
|
|
|
- <!-- <el-menu-item index="/home/file/set">文档设置</el-menu-item> -->
|
|
|
+ <el-menu-item index="/home/file/set">文档设置</el-menu-item>
|
|
|
<el-menu-item index="/home/file/level">文档级别</el-menu-item>
|
|
|
- <el-menu-item index="/home/file/demand">扩容申请</el-menu-item>
|
|
|
+ <el-menu-item index="/home/file/demand">扩容申请</el-menu-item> -->
|
|
|
+ <!-- <el-menu-item index="/home/file/individual">个人文档</el-menu-item> -->
|
|
|
</el-submenu>
|
|
|
<el-submenu index="3">
|
|
|
<template slot="title">
|
|
@@ -52,12 +56,15 @@
|
|
|
" />
|
|
|
<!-- <img src="../assets/img/nav-person1.png"> --> </span>个人设置
|
|
|
</template>
|
|
|
- <el-menu-item index="/home/personal/Partspace">部门存储空间</el-menu-item>
|
|
|
+ <template v-for="(item, index) in settingMenus">
|
|
|
+ <el-menu-item :index="item.path">{{item.meta.title}}</el-menu-item>
|
|
|
+ </template>
|
|
|
+ <!-- <el-menu-item index="/home/personal/Partspace">部门存储空间</el-menu-item>
|
|
|
<el-menu-item index="/home/personal/Publispace">公共存储空间</el-menu-item>
|
|
|
<el-menu-item index="/home/personal/Storagespace">分组存储空间</el-menu-item>
|
|
|
<el-menu-item index="/home/personal/space">个人存储空间</el-menu-item>
|
|
|
<el-menu-item index="/home/personal/modify">登录密码修改</el-menu-item>
|
|
|
- <el-menu-item index="/home/personal/identificat">文字识别</el-menu-item>
|
|
|
+ <el-menu-item index="/home/personal/identificat">文字识别</el-menu-item> -->
|
|
|
</el-submenu>
|
|
|
<!-- <el-submenu index="4">
|
|
|
<template slot="title">
|
|
@@ -110,252 +117,284 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// import page from "./Page/PageView";
|
|
|
-// import retrieval from "./Retrieval/RetrievalView";
|
|
|
-// import file from "./File/FileView";
|
|
|
-// import personal from "./Personal/PersonalView";
|
|
|
-// import system from "./System/SystemView";
|
|
|
+ // import page from "./Page/PageView";
|
|
|
+ // import retrieval from "./Retrieval/RetrievalView";
|
|
|
+ // import file from "./File/FileView";
|
|
|
+ // import personal from "./Personal/PersonalView";
|
|
|
+ // import system from "./System/SystemView";
|
|
|
+ import {
|
|
|
+ constantRoutes
|
|
|
+ } from "@/router";
|
|
|
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // activeIndex: '',
|
|
|
- srcIndex: "",
|
|
|
- // username:this.$store.username,
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // activeIndex: '',
|
|
|
+ srcIndex: "",
|
|
|
+ // username:this.$store.username,
|
|
|
|
|
|
- // 图片数组
|
|
|
- icoUrl: [
|
|
|
- {
|
|
|
- home1: require("../assets/img/nav-home1.png"),
|
|
|
- home2: require("../assets/img/nav-home.png"),
|
|
|
- },
|
|
|
- {
|
|
|
- search1: require("../assets/img/nav-search1.png"),
|
|
|
- search2: require("../assets/img/nav-search.png"),
|
|
|
- },
|
|
|
- {
|
|
|
- doc1: require("../assets/img/nav-doc1.png"),
|
|
|
- doc2: require("../assets/img/nav-doc.png"),
|
|
|
- },
|
|
|
- {
|
|
|
- person1: require("../assets/img/nav-person1.png"),
|
|
|
- person2: require("../assets/img/nav-person.png"),
|
|
|
- },
|
|
|
- {
|
|
|
- search1: require("../assets/img/nav-setting1.png"),
|
|
|
- search2: require("../assets/img/nav-setting.png"),
|
|
|
- },
|
|
|
- {
|
|
|
- group1: require("../assets/img/nav-group1.png"),
|
|
|
- group2: require("../assets/img/nav-group.png"),
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- // components: {
|
|
|
- // page,
|
|
|
- // retrieval,
|
|
|
- // file,
|
|
|
- // personal,
|
|
|
- // system
|
|
|
- // },
|
|
|
- created() {
|
|
|
- // console.log(this.$cache.local.get('USERNAME')) // 输出'local value'
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.srcIndex = localStorage.getItem('currentSrcIndex')
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleSelect(key,keyPath) {
|
|
|
- // console.log(keyPath);
|
|
|
- this.getSrcIndex(keyPath)
|
|
|
- //点击之后存到本地存储,便于刷新之后调用
|
|
|
- localStorage.setItem('currentSrcIndex', this.srcIndex)
|
|
|
- },
|
|
|
- getSrcIndex(keyPathArr) {
|
|
|
- // 如果是顶级目录,需要手动判断 srcIndex
|
|
|
- if (keyPathArr.length == 1) {
|
|
|
- if (keyPathArr[0] == '/home/page') {
|
|
|
- this.srcIndex = '0'
|
|
|
- } else if (keyPathArr[0] == '/home/retrieval') {
|
|
|
- this.srcIndex = '1'
|
|
|
- }
|
|
|
- } else {
|
|
|
- const currentSrcIndex = keyPathArr[0]
|
|
|
- this.srcIndex = currentSrcIndex
|
|
|
- }
|
|
|
+ // 图片数组
|
|
|
+ icoUrl: [{
|
|
|
+ home1: require("../assets/img/nav-home1.png"),
|
|
|
+ home2: require("../assets/img/nav-home.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ search1: require("../assets/img/nav-search1.png"),
|
|
|
+ search2: require("../assets/img/nav-search.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ doc1: require("../assets/img/nav-doc1.png"),
|
|
|
+ doc2: require("../assets/img/nav-doc.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ person1: require("../assets/img/nav-person1.png"),
|
|
|
+ person2: require("../assets/img/nav-person.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ search1: require("../assets/img/nav-setting1.png"),
|
|
|
+ search2: require("../assets/img/nav-setting.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ group1: require("../assets/img/nav-group1.png"),
|
|
|
+ group2: require("../assets/img/nav-group.png"),
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
},
|
|
|
- exit() {
|
|
|
- alert("你确定要注销界面吗?");
|
|
|
- this.$router.push("/login1");
|
|
|
+ // components: {
|
|
|
+ // page,
|
|
|
+ // retrieval,
|
|
|
+ // file,
|
|
|
+ // personal,
|
|
|
+ // system
|
|
|
+ // },
|
|
|
+ created() {
|
|
|
+ console.log(this.routers)
|
|
|
+
|
|
|
},
|
|
|
- },
|
|
|
- computed: {
|
|
|
- activeIndex() {
|
|
|
- const path = this.$route.path;
|
|
|
- return path;
|
|
|
+ mounted() {
|
|
|
+ this.srcIndex = localStorage.getItem('currentSrcIndex')
|
|
|
},
|
|
|
- names(){
|
|
|
- const paths = this.$store.state.user.uname;
|
|
|
- return paths;
|
|
|
+ methods: {
|
|
|
+ handleSelect(key, keyPath) {
|
|
|
+ // console.log(keyPath);
|
|
|
+ this.getSrcIndex(keyPath)
|
|
|
+ //点击之后存到本地存储,便于刷新之后调用
|
|
|
+ localStorage.setItem('currentSrcIndex', this.srcIndex)
|
|
|
+ },
|
|
|
+ getNavTable() {
|
|
|
+ // getNavTableApi().then
|
|
|
+ },
|
|
|
+ getSrcIndex(keyPathArr) {
|
|
|
+ // 如果是顶级目录,需要手动判断 srcIndex
|
|
|
+ if (keyPathArr.length == 1) {
|
|
|
+ if (keyPathArr[0] == '/home/page') {
|
|
|
+ this.srcIndex = '0'
|
|
|
+ } else if (keyPathArr[0] == '/home/retrieval') {
|
|
|
+ this.srcIndex = '1'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const currentSrcIndex = keyPathArr[0]
|
|
|
+ this.srcIndex = currentSrcIndex
|
|
|
+ }
|
|
|
+ },
|
|
|
+ exit() {
|
|
|
+ alert("你确定要注销界面吗?");
|
|
|
+ this.$router.push("/login1");
|
|
|
+ },
|
|
|
},
|
|
|
- }
|
|
|
-};
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ // 文档菜单
|
|
|
+ docMenus() {
|
|
|
+ let docMenus = [];
|
|
|
+ this.routers.map((menu) => {
|
|
|
+ if (menu.path === "/home-doc") {
|
|
|
+ docMenus = menu.children;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return docMenus;
|
|
|
+ },
|
|
|
+ // 设置菜单
|
|
|
+ settingMenus() {
|
|
|
+ let settingMenus = [];
|
|
|
+ this.routers.map((menu) => {
|
|
|
+ if (menu.path === "/home-setting") {
|
|
|
+ settingMenus = menu.children;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return settingMenus;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 所有的路由信息
|
|
|
+ routers() {
|
|
|
+ return this.$store.state.permission.topbarRouters;
|
|
|
+ },
|
|
|
+ activeIndex() {
|
|
|
+ const path = this.$route.path;
|
|
|
+ return path;
|
|
|
+ },
|
|
|
+ names() {
|
|
|
+ const paths = this.$store.state.user.uname;
|
|
|
+ return paths;
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.container {
|
|
|
- background: #0c0827ff;
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .header {
|
|
|
- height: calc(100vh * (70 / 1080));
|
|
|
+ .container {
|
|
|
+ background: #0c0827ff;
|
|
|
+ background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
- padding-top: calc(100vh * (10 / 1080));
|
|
|
+ height: 100%;
|
|
|
|
|
|
- // 顶部板块
|
|
|
- .top {
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
+ .header {
|
|
|
+ height: calc(100vh * (70 / 1080));
|
|
|
width: 100%;
|
|
|
- padding-right: calc(100vh * (17 / 1920));
|
|
|
- padding-left: calc(100vh * (55 / 1920));
|
|
|
- display: flex;
|
|
|
+ padding-top: calc(100vh * (10 / 1080));
|
|
|
|
|
|
- //顶部左边板块
|
|
|
- .left {
|
|
|
- width: calc(100vw * (369 / 1920));
|
|
|
+ // 顶部板块
|
|
|
+ .top {
|
|
|
height: calc(100vh * (40 / 1080));
|
|
|
+ width: 100%;
|
|
|
+ padding-right: calc(100vh * (17 / 1920));
|
|
|
+ padding-left: calc(100vh * (55 / 1920));
|
|
|
display: flex;
|
|
|
|
|
|
- .left1 {
|
|
|
- width: calc(100vw * (28 / 1920));
|
|
|
- height: calc(100vh * (30 / 1080));
|
|
|
- margin-top: calc(100vh * (8 / 1080));
|
|
|
+ //顶部左边板块
|
|
|
+ .left {
|
|
|
+ width: calc(100vw * (369 / 1920));
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
+ display: flex;
|
|
|
|
|
|
- img {
|
|
|
+ .left1 {
|
|
|
width: calc(100vw * (28 / 1920));
|
|
|
height: calc(100vh * (30 / 1080));
|
|
|
- }
|
|
|
- }
|
|
|
+ margin-top: calc(100vh * (8 / 1080));
|
|
|
|
|
|
- .left2 {
|
|
|
- width: calc(100vw * (295 / 1920));
|
|
|
- height: calc(100vh * (32 / 1080));
|
|
|
- margin-left: calc(100vw * (10 / 1920));
|
|
|
- margin-top: calc(100vw * (5 / 1080));
|
|
|
+ img {
|
|
|
+ width: calc(100vw * (28 / 1920));
|
|
|
+ height: calc(100vh * (30 / 1080));
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- img {
|
|
|
+ .left2 {
|
|
|
width: calc(100vw * (295 / 1920));
|
|
|
height: calc(100vh * (32 / 1080));
|
|
|
+ margin-left: calc(100vw * (10 / 1920));
|
|
|
+ margin-top: calc(100vw * (5 / 1080));
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: calc(100vw * (295 / 1920));
|
|
|
+ height: calc(100vh * (32 / 1080));
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- // 顶部中间板块
|
|
|
- .el-menu-demo {
|
|
|
- width: calc(100vw * (1000 / 1920));
|
|
|
- margin-left: calc(100vw * (280 / 1920));
|
|
|
- padding-bottom: calc(100vh * (8 / 1080));
|
|
|
- border: none;
|
|
|
- display: flex;
|
|
|
+ // 顶部中间板块
|
|
|
+ .el-menu-demo {
|
|
|
+ width: calc(100vw * (1000 / 1920));
|
|
|
+ margin-left: calc(100vw * (280 / 1920));
|
|
|
+ padding-bottom: calc(100vh * (8 / 1080));
|
|
|
+ border: none;
|
|
|
+ display: flex;
|
|
|
|
|
|
- li {
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
- line-height: calc(100vh * (40 / 1080));
|
|
|
- margin-right: calc(100vw * (60 / 1920));
|
|
|
+ li {
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
+ line-height: calc(100vh * (40 / 1080));
|
|
|
+ margin-right: calc(100vw * (60 / 1920));
|
|
|
|
|
|
- :hover {
|
|
|
- background: #1e497cff !important;
|
|
|
+ :hover {
|
|
|
+ background: #1e497cff !important;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .nav1>img {
|
|
|
- width: calc(100vw * (24 / 1920));
|
|
|
- height: calc(100vh * (24 / 1080));
|
|
|
- margin-bottom: calc(100vw * (5 / 1920));
|
|
|
- margin-right: calc(100vh * (5 / 1080));
|
|
|
+ .nav1>img {
|
|
|
+ width: calc(100vw * (24 / 1920));
|
|
|
+ height: calc(100vh * (24 / 1080));
|
|
|
+ margin-bottom: calc(100vw * (5 / 1920));
|
|
|
+ margin-right: calc(100vh * (5 / 1080));
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- // 顶部右边板块
|
|
|
- .right {
|
|
|
- width: calc(100vw * (220 / 1920));
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
- margin-left: calc(100vw * (80 / 1920));
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- // background: salmon;
|
|
|
- // .right_1>img {
|
|
|
- // width: calc(100vw * (20 / 1920));
|
|
|
- // height: calc(100vh * (20 / 1080));
|
|
|
- // margin-right: calc(100vw * (5 / 1920));
|
|
|
- // }
|
|
|
+ // 顶部右边板块
|
|
|
+ .right {
|
|
|
+ width: calc(100vw * (220 / 1920));
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
+ margin-left: calc(100vw * (80 / 1920));
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ // background: salmon;
|
|
|
+ // .right_1>img {
|
|
|
+ // width: calc(100vw * (20 / 1920));
|
|
|
+ // height: calc(100vh * (20 / 1080));
|
|
|
+ // margin-right: calc(100vw * (5 / 1920));
|
|
|
+ // }
|
|
|
|
|
|
- .right_2 {
|
|
|
- font-size: 12px;
|
|
|
- color: white;
|
|
|
- }
|
|
|
+ .right_2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
|
|
|
- .right_3 {
|
|
|
- width: 1px;
|
|
|
- height: 13px;
|
|
|
- background: #02aac0;
|
|
|
- border-radius: 0px 0px 0px 0px;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ .right_3 {
|
|
|
+ width: 1px;
|
|
|
+ height: 13px;
|
|
|
+ background: #02aac0;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
|
|
|
- .right_4>img {
|
|
|
- width: calc(100vw * (26 / 1920));
|
|
|
- height: calc(100vh * (26 / 1080));
|
|
|
+ .right_4>img {
|
|
|
+ width: calc(100vw * (26 / 1920));
|
|
|
+ height: calc(100vh * (26 / 1080));
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- //顶部下边图片板块
|
|
|
- .bottom {
|
|
|
- height: calc(100vh * (20 / 1080));
|
|
|
- width: 100%;
|
|
|
- background: url("../assets/img/nav-decorate.png");
|
|
|
- background-size: 100% calc(100vh * (20 / 1080));
|
|
|
+ //顶部下边图片板块
|
|
|
+ .bottom {
|
|
|
+ height: calc(100vh * (20 / 1080));
|
|
|
+ width: 100%;
|
|
|
+ background: url("../assets/img/nav-decorate.png");
|
|
|
+ background-size: 100% calc(100vh * (20 / 1080));
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-::v-deep .el-menu-item {
|
|
|
- padding: 0;
|
|
|
- padding-bottom: (100vh * (50 / 1080));
|
|
|
-}
|
|
|
+ ::v-deep .el-menu-item {
|
|
|
+ padding: 0;
|
|
|
+ padding-bottom: (100vh * (50 / 1080));
|
|
|
+ }
|
|
|
|
|
|
-::v-deep .el-submenu__title {
|
|
|
- padding: 0;
|
|
|
- padding-bottom: (100vh * (50 / 1080));
|
|
|
-}
|
|
|
+ ::v-deep .el-submenu__title {
|
|
|
+ padding: 0;
|
|
|
+ padding-bottom: (100vh * (50 / 1080));
|
|
|
+ }
|
|
|
|
|
|
-::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
- line-height: calc(100vh * (40 / 1080));
|
|
|
-}
|
|
|
+ ::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
+ line-height: calc(100vh * (40 / 1080));
|
|
|
+ }
|
|
|
|
|
|
-::v-deep li:hover {
|
|
|
- background: #1e497cff !important;
|
|
|
-}
|
|
|
+ ::v-deep li:hover {
|
|
|
+ background: #1e497cff !important;
|
|
|
+ }
|
|
|
|
|
|
-::v-deep .el-menu--horizontal .el-menu-item:not(.isdisabled):hover {
|
|
|
- background: #1e497cff !important;
|
|
|
-}
|
|
|
+ ::v-deep .el-menu--horizontal .el-menu-item:not(.isdisabled):hover {
|
|
|
+ background: #1e497cff !important;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
-/* 下拉框 */
|
|
|
-.el-menu--horizontal .el-menu .el-menu-item {
|
|
|
- background: #0f1540ff !important;
|
|
|
-}
|
|
|
+ /* 下拉框 */
|
|
|
+ .el-menu--horizontal .el-menu .el-menu-item {
|
|
|
+ background: #0f1540ff !important;
|
|
|
+ }
|
|
|
|
|
|
-.el-menu--horizontal .el-menu .el-menu-item:hover {
|
|
|
- background: #1e497cff !important;
|
|
|
- color: #ffffff !important;
|
|
|
-}
|
|
|
+ .el-menu--horizontal .el-menu .el-menu-item:hover {
|
|
|
+ background: #1e497cff !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
</style>
|