From 16678d3e0389f3e0a202c814a127813c8a4c182c Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Fri, 2 Jun 2023 10:32:06 +0800
Subject: [PATCH] 2023-6-2

---
 src/layout/components/Sidebar/index.vue |  20 +-
 src/layout/index.vue                    |  79 ++++--
 src/layout/noLayout.vue                 | 317 ++++++++++++++++++++++++
 src/store/getters.js                    |   3 +-
 src/store/modules/permission.js         |  45 ++--
 5 files changed, 410 insertions(+), 54 deletions(-)
 create mode 100644 src/layout/noLayout.vue

diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 24a04f0..7f375d5 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -33,16 +33,20 @@
       ...mapGetters([
         'sidebar',
         'permission_routes',
-        'system_routes'
+        'system_routes',
+        'sidebar_menu_map'
       ]),
       menuComputed(){
-        if(/^\/contract/.test(this.$route.path)){
-          return this.permission_routes
-        }
-        if(/^\/system/.test(this.$route.path)){
-          return this.system_routes
-        }
-        return []
+        let key = /\/(\w+)/g.exec(this.$route.path)[0]
+        console.log(key)
+        return this.sidebar_menu_map.get(key) || []
+        // if(/^\/contract/.test(this.$route.path)){
+        //   return this.permission_routes
+        // }
+        // if(/^\/system/.test(this.$route.path)){
+        //   return this.system_routes
+        // }
+        // return []
       },
       routes() {
         //return this.routers;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 93edf1f..221136e 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div :class="classObj" class="app-wrapper">
+<!--    最顶部导航栏-->
     <div class="top-head-bar">
       <div class="top-head-bar__logo">
         <img style="height: 20px" src="../assets/logo_test.png" alt="logo" />
@@ -11,8 +12,7 @@
           v-for="item in $store.state.permission.rootMenu"
           :class="{
             'li-active':
-              new RegExp(`^${item.path}`).test($route.path) &&
-              $route.path !== '/contract/system/menu',
+              new RegExp(`^${item.path}`).test($route.path)
           }"
           @click="menuClick(item)"
         >
@@ -48,24 +48,32 @@
         <worker></worker>
       </el-scrollbar>
     </template>
-    <template v-else-if="$route.path === '/bookmanage'">
-      <div
-        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
-      >
-        <iframe ref="bookIframe" :src="bookUrl"
-          >你的浏览器不支持该iframe</iframe
-        >
-      </div>
-    </template>
-    <template v-else-if="$route.path === '/gdzc'">
-      <div
-        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
-      >
-        <iframe ref="gdzcIframe" :src="gdzcUrl"
-          >你的浏览器不支持该iframe</iframe
+    <template v-else-if="/^\/asset/.test($route.path)">
+
+      <sidebar class="sidebar-container" />
+      <div class="main-container">
+        <iframe style="width: 100%;height: 100%;" ref="bookIframe" :src="iframeUrl"
+        >你的浏览器不支持该iframe</iframe
         >
       </div>
+<!--      <div class="main-container">-->
+<!--        <div :class="{ 'fixed-header': fixedHeader }" v-if="false">-->
+<!--          <navbar />-->
+<!--        </div>-->
+<!--        <el-scrollbar style="height: 100%">-->
+<!--          <app-main />-->
+<!--        </el-scrollbar>-->
+<!--      </div>-->
     </template>
+<!--    <template v-else-if="$route.path === '/gdzc'">-->
+<!--      <div-->
+<!--        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"-->
+<!--      >-->
+<!--        <iframe ref="gdzcIframe" :src="gdzcUrl"-->
+<!--          >你的浏览器不支持该iframe</iframe-->
+<!--        >-->
+<!--      </div>-->
+<!--    </template>-->
     <template v-else-if="$route.path === '/old'">
       <div
         style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
@@ -73,13 +81,13 @@
         <iframe ref="oldIframe" :src="oldUrl">你的浏览器不支持该iframe</iframe>
       </div>
     </template>
-    <template v-else-if="$route.path === '/goods'">
-      <div
-        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
-      >
-        <iframe ref="goodsIframe" :src="goodsUrl">你的浏览器不支持该iframe</iframe>
-      </div>
-    </template>
+<!--    <template v-else-if="$route.path === '/goods'">-->
+<!--      <div-->
+<!--        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"-->
+<!--      >-->
+<!--        <iframe ref="goodsIframe" :src="goodsUrl">你的浏览器不支持该iframe</iframe>-->
+<!--      </div>-->
+<!--    </template>-->
     <template v-else>
       <sidebar class="sidebar-container" />
       <div class="main-container">
@@ -136,6 +144,14 @@ export default {
         mobile: this.device === "mobile",
       };
     },
+    iframeUrl() {
+      let urlMap = new Map([
+        ['/bookmanage', this.bookUrl],
+        ['/gdzc', this.gdzcUrl],
+        ['/goods', this.goodsUrl]
+      ])
+      return urlMap.get(this.$route.path.substring(this.$route.path.lastIndexOf('/')))
+    }
   },
   methods: {
     async logout() {
@@ -157,7 +173,12 @@ export default {
   watch: {
     "$route.path": {
       handler: function (url) {
-        if (url === "/bookmanage") {
+        if(/^\/asset/.test(url)) {
+          if(this.$store.state.app.sidebar.opened) {
+            this.$store.commit('app/TOGGLE_SIDEBAR')
+          }
+        }
+        if (/\/bookmanage/.test(url)) {
           this.$nextTick(() => {
             this.$refs['bookIframe'].onload = () => {
               this.$refs["bookIframe"].contentWindow.postMessage(
@@ -213,7 +234,7 @@ export default {
   grid-template-rows: 50px;
   grid-template-areas: "logo . menu . user";
 
-  z-index: 1000;
+  z-index: 2000;
   position: fixed;
   top: 0;
   left: 0;
@@ -354,7 +375,11 @@ export default {
 }
 iframe {
   width: calc(100% + 12px);
-  height: 100%;
   border: none;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
 }
 </style>
diff --git a/src/layout/noLayout.vue b/src/layout/noLayout.vue
new file mode 100644
index 0000000..23c4dd9
--- /dev/null
+++ b/src/layout/noLayout.vue
@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <template v-if="$route.path === '/worker'">
+      <el-scrollbar style="padding-top: 50px; height: 100%">
+        <worker></worker>
+      </el-scrollbar>
+    </template>
+    <template v-else-if="$route.path === '/bookmanage'">
+      <div
+        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
+      >
+        <iframe ref="bookIframe" :src="bookUrl"
+        >你的浏览器不支持该iframe</iframe
+        >
+      </div>
+    </template>
+    <template v-else-if="$route.path === '/gdzc'">
+      <div
+        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
+      >
+        <iframe ref="gdzcIframe" :src="gdzcUrl"
+        >你的浏览器不支持该iframe</iframe
+        >
+      </div>
+    </template>
+    <template v-else-if="$route.path === '/old'">
+      <div
+        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
+      >
+        <iframe ref="oldIframe" :src="oldUrl">你的浏览器不支持该iframe</iframe>
+      </div>
+    </template>
+    <template v-else-if="$route.path === '/goods'">
+      <div
+        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
+      >
+        <iframe ref="goodsIframe" :src="goodsUrl">你的浏览器不支持该iframe</iframe>
+      </div>
+    </template>
+    <template v-else>
+      <div style="width: 100%;height: 100%">
+        <transition name="fade-transform" mode="out-in">
+          <router-view :key="$route.path" />
+        </transition>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { ossLogin } from "@/api/system/ossLogin";
+import { Navbar, Sidebar, AppMain } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
+import worker from "./components/worker/index.vue";
+import axios from "axios";
+export default {
+  name: "noLayout",
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    worker,
+  },
+  mixins: [ResizeMixin],
+  data() {
+    return {
+      active: 0,
+      bookUrl: process.env.VUE_APP_OUT_Book,
+      gdzcUrl: `${process.env.VUE_APP_OUT_GDZC}/member/oss_login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
+      oldUrl: `${process.env.VUE_APP_OUT_OLD}/login/oss_login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
+      goodsUrl: `${process.env.VUE_APP_OUT_GOODS}/admin/oss-login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
+    };
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar;
+    },
+    device() {
+      return this.$store.state.app.device;
+    },
+    fixedHeader() {
+      return this.$store.state.settings.fixedHeader;
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === "mobile",
+      };
+    },
+  },
+  methods: {
+    async logout() {
+      await this.$store.dispatch('app/clearLayout')
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    },
+    handleClickOutside() {
+      this.$store.dispatch("app/closeSideBar", {
+        withoutAnimation: false,
+      });
+    },
+
+    menuClick(item) {
+      this.$router.push(item.path);
+    },
+  },
+  mounted() {},
+  watch: {
+    "$route.path": {
+      handler: function (url) {
+        if (url === "/bookmanage") {
+          this.$nextTick(() => {
+            this.$refs['bookIframe'].onload = () => {
+              this.$refs["bookIframe"].contentWindow.postMessage(
+                {
+                  key: "login",
+                  data: {
+                    id: this.$store.state.user.userId,
+                    username: this.$store.state.user.username,
+                  },
+                },
+                "*"
+              );
+            }
+          })
+          return;
+        }
+
+      },
+      immediate: true,
+    },
+  },
+  beforeRouteEnter(to,from,next){
+    document.getElementsByTagName('iframe').forEach(dom => {
+      dom.onload = null;
+    })
+    next()
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
+
+.nolayout-container {
+  margin-top: 50px !important;
+  margin-left: 0 !important;
+}
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.top-head-bar {
+  background: #338de3ff;
+  height: 50px;
+  filter: drop-shadow(0 1px 1px #49a0f3);
+  display: grid;
+  grid-template-columns: auto 0.5fr 6fr 0.2fr 1fr;
+  grid-template-rows: 50px;
+  grid-template-areas: "logo . menu . user";
+
+  z-index: 2000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  &__logo {
+    height: 50px;
+    grid-area: logo;
+    display: flex;
+    align-items: center;
+
+    padding: 0 20px;
+  }
+  @media screen and (max-width: 1000px) {
+    &__logo {
+      display: none;
+    }
+  }
+
+  &__user {
+    grid-area: user;
+  }
+
+  ul {
+    grid-area: menu;
+    height: 100%;
+    display: flex;
+    justify-self: flex-end;
+    align-items: flex-end;
+
+    li {
+      color: #fff;
+      height: 40px;
+      line-height: 40px;
+      list-style: none;
+      transition: all 300ms ease-out;
+      border-top-right-radius: 6px;
+      border-top-left-radius: 6px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      padding: 0 20px;
+      position: relative;
+
+      &::after {
+        content: "";
+        background: #338de3ff;
+        height: 3px;
+        width: 0;
+        border-radius: 1px;
+        transition: all 300ms ease-out;
+
+        position: absolute;
+        left: 6px;
+        bottom: 2px;
+      }
+      & + li {
+        margin-left: 20px;
+      }
+      &:hover {
+        background: #fff;
+        color: rgb(100, 100, 100);
+
+        &::after {
+          width: calc(100% - 12px);
+        }
+      }
+    }
+    .li-active {
+      background: #fff;
+      color: rgb(100, 100, 100);
+
+      &::after {
+        width: calc(100% - 12px);
+      }
+    }
+  }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+
+.avatar-container {
+  height: 100%;
+  margin-right: 30px;
+
+  .avatar-wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    .user-avatar {
+      cursor: pointer;
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+    }
+    &__name {
+      color: #fff;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      padding: 0 6px;
+    }
+    .el-icon-caret-bottom {
+      cursor: pointer;
+      color: #fff;
+      position: absolute;
+      right: -20px;
+      font-size: 12px;
+    }
+  }
+}
+iframe {
+  width: calc(100% + 12px);
+  height: 100%;
+  border: none;
+}
+</style>
diff --git a/src/store/getters.js b/src/store/getters.js
index 3766754..4696b7b 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -6,6 +6,7 @@ const getters = {
   name: state => state.user.name,
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
-  system_routes:state => state.permission.systemMenu
+  system_routes:state => state.permission.systemMenu,
+  sidebar_menu_map:state => state.permission.sidebarMenuMap
 }
 export default getters
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index ad16aab..9254dfa 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -6,6 +6,16 @@ import Layout from '@/layout'
 import {
   getAuthMenu
 } from '@/api/user.js'
+const componentHandler = (path) => {
+  //return path === '#'|| path == ''  ? Layout : loadView(path)
+  if(path === '#' || path === ''){
+    return Layout
+  }
+  if(path.includes('#') && path !== '#'){
+    return ()=>import('@/layout/noLayout')
+  }
+  return loadView(path)
+}
 /**
  * Use meta.role to determine if the current user has permission
  * @param roles
@@ -55,7 +65,9 @@ const state = {
   routes: [],
   rootMenu:[],
   systemMenu:[],
-  addRoutes: []
+  addRoutes: [],
+
+  sidebarMenuMap: new Map()
 }
 
 /**
@@ -103,9 +115,9 @@ export function generaMenu(routes, data) {
        path = item.path
      }
      const menu = {
-       path: (path === '#' ? item.id + '_key' : path),
+       path: (path.includes('#') ? item.id + '_key' : path),
        redirect: item.redirect || '',
-       component: item.url === '#' ? Layout : loadView(item.url),
+       component: componentHandler(item.url),
        hidden: item.hidden ?? false,
        children: [],
        name: 'menu_' + item.id,
@@ -135,6 +147,9 @@ const mutations = {
   },
   SET_SYSTEMMENU:(state,menu) => {
     state.systemMenu = menu
+  },
+  SET_SIDEBARMENUMAP: (state,{ k,v }) => {
+    state.sidebarMenuMap.set(k,v)
   }
 }
 
@@ -152,22 +167,16 @@ const actions = {
 
         commit('SET_ROOTMENU',data)
 
-        let routes = data.filter(item => item.path === '/contract')[0]?.children
+        let routes = data.find(item => item.path === '/contract').children
         let root = data.map(item => {
-          switch (item.path){
-            case '/system':
-              let sys = []
-              generaMenu(sys,item.children)
-              commit('SET_SYSTEMMENU',sys)
-              item.redirect = item.children[0]?.path
-              break;
-            case '/contract':
-              item.redirect = '/contract/dashboard'
-              break;
-            default:
-              if(item.children.length > 0){
-                item.redirect = item.children[0]?.path
-              }
+          let menu = []
+          generaMenu(menu,item.children)
+          commit('SET_SIDEBARMENUMAP', { k: item.path, v: menu })
+          if(item.children.length > 0){
+            item.redirect = item.children[0]?.path
+          }
+          if(item.path === '/contract') {
+            item.redirect = '/contract/contract/contractList'
           }
           item.hidden = true
           return item