hjjc-workbench-web/src/layout/noLayout.vue

<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>