qiubinghui
/
zhywpt-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							<template>
  <!-- :sources="[bgVideo]" -->
    <el-watermark :font="{color: 'rgba(0, 0, 0, .15)',fontSize: 14}" :content="[name,mobile]">
        <video-bg :sources="[]">
        <div class="as-layout-horizontal" style="width: 100%; height: 100%; opacity: 0.9">
      <!-- 此处先划出布局形式(按左右布局划分，左边菜单，右边内容) -->

      <!-- 菜单部分 -->
      <div class="bg-theme" style="height: 100%">
        <!-- 菜单头部部分 -->
        <div class="as-gravity-center-start" @click="barkHome"
          style="height: 70px; cursor: pointer; background-color: #304156">
          <img rel="icon" :src="logo" style="width: 40px; height: 40px;margin: 0 10px;" />
          <!-- D-UI框架模板 -->
          <div class="as-bold" style="color: #ffffff; user-select: none" v-show="menuStart.timeShow">
            <span style="color: #ffffff; font-size: 18px; color: #cfdae7">综合业务支撑平台</span>
          </div>
        </div>

        <!-- 菜单主体部分 height="100%" width: 240px; -->
        <div class="as-border-width" style="height: 100%; border: none;background-color:#304156">
          <el-scrollbar max-height="91%" wrap-class="scrollbar-wrapper">
            <el-menu :collapse-transition="false" unique-opened :default-active="ativeMenu" mode="vertical"
              :router="false" :collapse="!menuStart.menuIsExpansion" class="el-menu-vertical-demo"
              background-color="#304156" active-text-color="#cfdae7" text-color="#cfdae7">
              <!-- 菜单主体内容 -->
              <sidebar-item :list="itemMenuData" />
            </el-menu>
          </el-scrollbar>
        </div>
      </div>

      <div class="as-weight as-layout-vertical">
        <el-progress :style="{ 'visibility': store.show ? 'visible' : 'hidden' }" :percentage="store.progress"
          :show-text="false" :duration="0" :stroke-width="3" />
        <!-- 头部选项 -->
        <div style="height: 70px;border-bottom: 1px solid #dcdcdc;">

          <Head></Head>
        </div>
        <el-scrollbar>
          <div class="as-layout-vertical">
            <!-- 头部 height: 8%;-->
            <div style="background-color: #ffffff; padding: 16px 0px 16px 0px">
              <!-- 选项卡 -->
              <tab-container></tab-container>

              <!-- 主体内容页面 name="fade" -->
              <!-- <router-view name="key"></router-view> -->

              <!-- 路由缓存 https://blog.csdn.net/kDevelop/article/details/122036896 -->
              <!-- in-out：新元素先进入过渡，完成之后当前元素过渡离开； -->
              <!-- out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。 -->
              <!-- style="height:100vh" -->
              <!-- <transition> 为提供了几个 css 类，它们能够在动画周期中被动态添加或删除。
                    有 6。个不同的过渡类（3 个用于淡入，3 个用于淡出）。
                    v-enter-from / v-leave-from : 过渡的初始状态，过度开始后将其删除
                    v-enter-active / v-leave-active : 过渡的激活状态
                    v-enter-to / v-leave-to : 过渡的结束状态  -->
              <!-- <transition name="fade" mode="out-in"> -->
              <!--  加入keep-alive保证进入退出都有动画 -->
              <!--  exclude排除缓存的组件，让该detail组件不缓存数据 -->
              <!-- </transition> -->
              <router-view name="key" v-slot="{ Component, route }">
                <!-- <keep-alive>
                  <component :is="Component" />
                </keep-alive> -->
                <keep-alive>
                  <component :is="Component" :key="route.name" v-if="!route.meta.nokeepAlive" />
                </keep-alive>
                <component :is="Component" :key="route.name" v-if="route.meta.nokeepAlive" />
              </router-view>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
      </video-bg>
  </el-watermark>
</template>

<script setup lang="ts">
  // @ts-ignore 选项菜单
  import SidebarItem from "@/layout/components/SidebarItem.vue";
  // @ts-ignore 选项头部
  import Head from "@/layout/components/Head.vue";
  // @ts-ignore Tab选项
  import TabContainer from "@/layout/components/TabControl.vue";
  import VideoBg from "@/components/VideoBackround/VideoBackground.vue"; //视频背景组件
  import $store from "@/store/index"; // 引入vuex
  import $storeTab from "@/store/tabValue"; //引入tab vuex
  import $storeinitData from "@/store/initData"; //引入tab vuex
  import { ref, onMounted, watch, computed } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import logo from '@/assets/logo.png'
  import { getCache } from "@/utils/cache";
  import { treeDataHandle } from "@/utils/utils";
  import { IObject } from "@/types/interface";
  import BaseService from "@/utils/baseService";
  import { myMenu } from "@/api/system/menu";
  import { progressBarStore } from '@/store/progressBarStore'

  const store = progressBarStore()
  const router = useRouter();
  const route = useRoute();
  //默认菜单为打开状态
  let menuStart = ref($store.state.data);
  let itemMenuData = ref($storeinitData.state.menuList);
  const name = ref($storeinitData.getters.userName)
  const mobile = ref($storeinitData.getters.mobile)
  //处理刷新页面重置问题
  onMounted(() => {
    // console.log("===>",$storeinitData)
    sessionStorage.removeItem("newTab");
    OnSetNavLayout();
    if (itemMenuData.value.length === 0) {
      getMenuList();
    }
  });
  watch(
    () => route.path,
    (vl) => {
      //解决从浏览器输入url,tab数据无
      let data = `${route.meta.title},${route.name as string}`;
      let value = {
        type: 2,
        data: data,
      };
      $storeTab.dispatch("addTab", value);
    }
  );
  watch(
    () => $storeinitData.state.menuList,
    (val) => {
      itemMenuData.value = $storeinitData.state.menuList
    }
  )
  //页面初始化处理tab选中
  const OnSetNavLayout = () => {
    let data = `${route.meta.title},${route.name as string}`;
    let value = {
      type: 2,
      data: data,
    };
    $storeTab.dispatch("addTab", value);
  }
  // 菜单选中处理
  const ativeMenu = computed(() => {
    return route.path;
  });
  //返回首页
  const barkHome = () => {
    // router.replace({
    //   name: "home",
    // });
    //去首页并清空选中的code,清空tab
    router.push("/");
    $storeinitData.dispatch("backIndexClear", "");
    $storeTab.dispatch('closeTheOther', -1)
    sessionStorage.removeItem('newTab')
  };
  //获取菜单
  const getMenuList = () => {
    let codeSelected = getCache("selectedCodeCatch", { isSessionStorage: false }, {})['code'];
    let cacheAccessToken = getCache("cacheAccessToken", { isSessionStorage: false }, {});
    let openId = cacheAccessToken['openId'];
    let params = {
      systemType: codeSelected,
      openId: openId
    }
    //userw/rbac/menuListBySystemTypeAndOpenId
    BaseService.post('/userw/rbac/menuListBySystemTypeAndOpenId', params).then((res: any) => {
      if (res && res.statusCode === 0) {
        let bizContent = res.data
        const menuList = bizContent.menuList || [];

        let list = [] as IObject[];
        list = treeDataHandle(menuList);
        $storeinitData.dispatch('updateMenu', list);
      }
    })
  }

</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 页面样式 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  // width: 250px;
  min-width: 240px;
  border-width: 0px;
}

.bg-theme {
  background-color: $test-color;
}

/* 去除进度条圆角 */
::v-deep(.el-progress-bar__outer) {
  border-radius: 0;
}

::v-deep(.el-progress-bar__inner) {
  border-radius: 0;
}
</style>