shuili_manager/jwtech-admin-page/src/layout/index.vue

<template>
  <!--  <div :class="classObj" class="app-wrapper">-->
  <!--    <div-->
  <!--      v-if="device === 'mobile' && sidebar.opened"-->
  <!--      class="drawer-bg"-->
  <!--      @click="handleClickOutside"-->
  <!--    />-->
  <!--    <sidebar class="sidebar-container" />-->
  <!--    <div :class="{ hasTagsView: needTagsView }" class="main-container">-->
  <!--      <div :class="{ 'fixed-header': fixedHeader }">-->
  <!--        <navbar />-->
  <!--        <tags-view v-if="needTagsView" />-->
  <!--      </div>-->
  <!--      <app-main ref="appmain" />-->
  <!--      <right-panel v-if="showSettings">-->
  <!--        <settings />-->
  <!--      </right-panel>-->
  <!--    </div>-->
  <!--  </div>-->
  <div :class="classObj" class="app-wrapper">
    <div :class="{ 'fixed-header': true }">
      <navbar />
      <tags-view v-if="needTagsView" />
    </div>
    <div class="unfoldClose" v-if="this.$route.path === '/material/startLabel'">
      <div class="mergeMax" v-if="isCollapse" @click="goOpening(isCollapse)">
        <span>收起</span>
        <img src="../assets/image/mergeMax.png" alt="" />
      </div>
      <div class="mergeMin" v-else @click="goOpening(isCollapse)">
        <span>展开</span>
        <img src="../assets/image/mergeMin.png" alt="" />
      </div>
    </div>
    <div class="wp">
      <sidebar ref="sidebarContainer" class="sidebar-container" />
      <div :class="{ hasTagsView: needTagsView }" class="main-container">
        <app-main ref="appmain" />
        <right-panel v-if="showSettings">
          <settings />
        </right-panel>
      </div>
    </div>
  </div>
</template>

<script>
import RightPanel from "@/components/RightPanel";
import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import { mapState } from "vuex";

export default {
  name: "Layout",
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView,
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      sidebar: (state) => state.app.sidebar,
      device: (state) => state.app.device,
      showSettings: (state) => state.settings.showSettings,
      needTagsView: (state) => state.settings.tagsView,
      fixedHeader: (state) => state.settings.fixedHeader,
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile",
      };
    },
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isCollapse: true,
    };
  },
  watch: {
    $route: {
      handler(val, oldVal) {
        this.isCollapse = true;
        this.$refs.sidebarContainer.$el.style.display = "block";
        $(".main-container").css("marginLeft", "256px");
        $(".unfoldClose").css("left", "200px");
      },
    },
  },
  methods: {
    goOpening(e) {
      if (e) {
        this.isCollapse = false;
        this.$refs.sidebarContainer.$el.style.display = "none";
        $(".main-container").css("marginLeft", "0px");
        $(".unfoldClose").css("left", "0px");
      } else {
        this.isCollapse = true;
        this.$refs.sidebarContainer.$el.style.display = "block";
        $(".main-container").css("marginLeft", "200px");
        $(".unfoldClose").css("left", "200px");
      }
      console.log(e);
    },
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    reload() {
      this.$refs.appmain.times++;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  // background: #eef3ff;
  background: #f4f9f7;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.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});
  width: 100%;
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}

.unfoldClose {
  position: absolute;
  left: 200px;
  top: 50%;
  z-index: 999;
  .mergeMax {
    background: url("../assets/image/unfoldMax.png");
  }
  .mergeMin {
    background: url("../assets/image/unfoldMin.png");
  }
  div {
    width: 24px;
    height: 88px;
    text-align: center;
    cursor: pointer;
    span {
      margin: 12px 0 4px 0;
      font-size: 16px;
      font-weight: bold;
      color: rgba(42, 43, 47, 0.8);
      /*padding: 0 5px;*/
      display: -webkit-inline-box;
      display: inline-block;
      line-height: 22px;
    }
    img {
      width: 12px;
      height: 12px;
    }
  }
}
</style>