lh_firm_former/src/layout/header-aside/layout.vue

<template>
  <div
    :style="styleLayoutMainGroup"
    :class="{grayMode: grayActive}"
    class="ibps-layout-header-aside-group hidden-print"
  >

   <!-- <iframe
       style="display: none;"
       id="iframeContain"
       name="iframeContain"
       seamless
       scrolling="yes"
       src="https://www.szjyxt.com/#/fileView?url=https%3A%2F%2Fwww.szjyxt.com%2Fibps%2Fplatform%2Fv3%2Ffile%2Fdownload%3FattachmentId%3D925044155762081792&isEdit=true&fileType=docx&title=GDYR-CX01-A0%20%E4%BF%9D%E8%AF%81%E5%85%AC%E6%AD%A3%E6%80%A7%E7%AE%A1%E7%90%86%E7%A8%8B%E5%BA%8F&user=%5Bobject%20Object%5D&mode=view&editUrl=https%3A%2F%2Fwww.szjyxt.com%2Fibps%2Fplatform%2Fv3%2Ffile%2FeditCallback%3FfileName%3DGDYR-CX01-A0%20%E4%BF%9D%E8%AF%81%E5%85%AC%E6%AD%A3%E6%80%A7%E7%AE%A1%E7%90%86%E7%A8%8B%E5%BA%8F%26fileType%3Ddocx&key="
     >
    </iframe> -->

    <!-- 半透明遮罩 -->
    <div class="ibps-layout-header-aside-mask" />
    <!-- websocket -->
    <!-- <ibps-notify-monitor /> -->
    <!-- 主体内容 -->
    <div class="ibps-layout-header-aside-content" flex="dir:top">

       <panle/>
      <!-- 顶栏 -->
      <div
        :style="{
          opacity: searchActive ? 0.5 : 1
        }"
        class="ibps-theme-header"
        style=" box-shadow: 1px 4px 6px rgba(0, 0, 0, .12), 0 0 5px rgba(155,155, 0, .04);margin-bottom: 5px;"
        flex-box="0"
        flex
      >
       <!-- <div
          :class="{'logo-group': true,
                   'logo-transition': asideTransition,
                   'ibps-pt-5':system.logoType ==='image',
                   'ibps-pl-0':system.logoType ==='image'
          }"
          :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}"
          flex-box="0"
        >
          <el-dropdown
            v-if="subsystemList && subsystemList.length >1"
            trigger="click"
            placement="bottom-start"
            @command="command => handleSubsystemClick(command)"
          >
            <ibps-logo
              :system="system"
              :aside-collapse="asideCollapse"
              :subsystem-list="subsystemList"
              :logo-icon-all="logoIconAll"
              :logo-icon-only="logoIconOnly"
            />
            <el-dropdown-menu slot="dropdown" style="width:180px;">
              <el-dropdown-item
                v-for="(item,index) in subsystemList"
                :key="index"
                :disabled="item.id===system.id"
                :command="item"
              >
                <ibps-icon :name="item.logo||'logo'" :title="item.name" />  {{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <ibps-logo
            v-else
            :system="system"
            :aside-collapse="asideCollapse"
            :subsystem-list="subsystemList"
            :logo-icon-all="logoIconAll"
            :logo-icon-only="logoIconOnly"
          />
        </div> -->
        <!-- <div class="toggle-aside-btn" flex-box="0" @click="handleToggleAside">
          <ibps-icon :name="asideCollapse ?'indent':'outdent'" />
        </div> -->
        <ibps-menu-header
         flex-box="1"
         @pageChange ="pageChange"
         />
        <!-- 顶栏右侧 -->
        <div class="ibps-header-right"  flex-box="0">
          <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$nodeEnv === 'development'" -->
         <!-- <ibps-header-search @click="handleSearchClick" /> --> <!-- 全局搜索放大镜 -->
        <!--  <ibps-header-error-log v-if="$nodeEnv === 'development'" />
          <ibps-header-base-url v-if="$nodeEnv === 'development'" /> --><!-- 日志与异常 -->

          <!-- <ibps-header-download /> -->
          <!-- <ibps-header-locking />
          <ibps-header-theme />
          <ibps-header-language />
          <ibps-header-size /> -->
         <!-- <ibps-header-fullscreen /> -->
          <!-- <ibps-header-tenant /> -->

          <span style="font-size: 12px; cursor: pointer;" @click="goToMain()">首页</span>
             <span style="margin: 0 10px; ">|</span>
          <ibps-header-message /><!-- 消息中心 -->
            <span style="margin: 0 10px; ">|</span>
          <ibps-header-user />
            <span style="margin-left: 10px;">|</span>
          <ibps-header-setting />
        </div>
      </div>
      <!-- 下面 主体 -->
      <div class="ibps-theme-container" flex-box="1" flex>
        <!-- 主体 侧边栏 -->
        <div
          v-if="sysName !='首页'"
          ref="aside"
          flex-box="0"
          :class="{'ibps-theme-container-aside': true, 'ibps-theme-container-transition': asideTransition}"
          :style="{
            width: asideCollapse ? asideWidthCollapse : asideWidth,
            opacity: searchActive ? 0.5 : 1
          }"
        >
        <!-- 侧部顶头栏-->
        <div class="layout-border-left">
            <div class="toggle-aside-btn" style="float: right; width: 25%;" @click="handleToggleAside">
              <ibps-icon  :name="asideCollapse ?'indent':'outdent'" />
            </div>
            <div style="width: 74%;" class="toggle-aside-btn layout-border-left-name">
             <span>{{getSystemName[0].name}}</span>
            </div>
        </div>

         <ibps-menu-side  style="margin-top: 52px;"/>
        </div>

        <!-- 主体 -->
        <div class="ibps-theme-container-main" flex-box="1" flex>
          <!-- 搜索 -->
          <transition name="fade-scale">
            <div v-show="searchActive" class="ibps-theme-container-main-layer" flex>
              <ibps-panel-search
                ref="panelSearch"
                @close="searchPanelClose"
              />
            </div>
          </transition>
          <!-- 内容 -->
          <transition name="fade-scale">
            <div v-show="!searchActive" class="ibps-theme-container-main-layer" flex="dir:top">
              <!-- tab -->
            <!-- <div class="ibps-theme-container-main-header" flex-box="0">
                <ibps-tabs />
              </div> -->
              <!-- 页面 -->
              <div class="ibps-theme-container-main-body" flex-box="1">
                <transition :name="transitionActive ? 'fade-transverse' : ''">
                 <!-- <keep-alive :include="keepAlive"> -->
                    <router-view :key="routerViewKey" />
                 <!-- </keep-alive> -->
                </transition>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <FloatBall></FloatBall>
  </div>
</template>

<script>
import IbpsLogo from './components/logo'
import IbpsMenuSide from './components/menu-side/index.js'
import IbpsMenuHeader from './components/menu-header/index.js'
import IbpsTabs from './components/tabs'
import IbpsHeaderSearch from './components/header-search'
import FloatBall from './components/components/float-ball';
import IbpsHeaderFullscreen from './components/header-fullscreen'
// import IbpsHeaderLocking from './components/header-locking'
// import IbpsHeaderLanguage from './components/header-language'
// import IbpsHeaderSize from './components/header-size'
// import IbpsHeaderTheme from './components/header-theme'
// import IbpsHeaderToolbar from './components/header-toolbar'

// import IbpsHeaderTenant from './components/header-tenant'
import IbpsHeaderSetting from './components/header-setting'
import IbpsHeaderMessage from './components/header-message'
import panle from '@/components/jbd-panel'
import IbpsHeaderUser from './components/header-user'
import IbpsHeaderErrorLog from './components/header-error-log'
import IbpsHeaderBaseUrl from './components/header-base-url'
// import IbpsHeaderDownload from './components/header-download'
// import IbpsNotifyMonitor from '@/business/platform/socket/notify-monitor'
import { mapState, mapGetters, mapActions } from 'vuex'
import mixinSearch from './mixins/search'
import mixinLock from './mixins/lock'

import setting from '@/setting.js'
export default {
  name: 'ibps-layout-header-aside',
  components: {
    IbpsLogo,
    IbpsMenuSide,
    IbpsMenuHeader,
    IbpsTabs,
    IbpsHeaderSearch,
    FloatBall,
    panle,
    IbpsHeaderFullscreen,
    // IbpsHeaderLocking,
    // IbpsHeaderLanguage,
    // IbpsHeaderSize,
    // IbpsHeaderTheme,
    // IbpsHeaderToolbar,
    // IbpsHeaderTenant,
    IbpsHeaderSetting,
    IbpsHeaderMessage,
    IbpsHeaderUser,
    IbpsHeaderErrorLog,
    IbpsHeaderBaseUrl
    // IbpsHeaderDownload,
    // IbpsNotifyMonitor
  },
  mixins: [
    mixinSearch,
    mixinLock
  ],
  data() {
    return {
      // [侧边栏宽度] 正常状态
      asideWidth: '200px',
      // [侧边栏宽度] 折叠状态
      asideWidthCollapse: '65px',
    }
  },
 /* watch:{
    getSystemName(value){
        this.sysName = ''
      },
  }, */
 mounted() {
   /* window.performance.navigation.type == 1 &&  */
    if (this.$route.name == 'dashboard') {
            this.sysName = '首页'
          }
  },
  computed: {

    ...mapState('ibps', {
      // sysName:state=>state.menu.sysName,
      keepAlive: state => state.page.keepAlive,
      grayActive: state => state.gray.active,
      transitionActive: state => state.transition.active,
      asideCollapse: state => state.menu.asideCollapse,
      asideTransition: state => state.menu.asideTransition,
      system: state => state.system.system,
      subsystemList: state => state.system.subsystemList
    }),
    ...mapGetters('ibps', {
      themeActiveSetting: 'theme/activeSetting'
    }),
    getSystemName() {
      let this_ = this
     return this.header().filter(function (name){ return name.id == this_.activeHeader()})
      },
    /**
     * @description 用来实现带参路由的缓存
     */
    sysName() {
      if (this.$route.name == 'dashboard') {
          return '首页'
      } else {
        return ''
      }
    },
    routerViewKey() {
      // 默认情况下 key 类似 __transition-n-/foo
      // 这里的字符串操作是为了最终 key 的格式和原来相同 类似 __transition-n-__stamp-time-/foo
      const stamp = this.$route.meta[`__stamp-${this.$route.path}`] || ''
      return `${stamp ? `__stamp-${stamp}-` : ''}${this.$route.path}`
    },
    /**
    /**
     * @description 最外层容器的背景图片样式
     */
    styleLayoutMainGroup() {
      return {
        ...this.themeActiveSetting.backgroundImage ? {
          backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
        } : {}
      }
    },
    logoIconAll() {
      return `${this.$baseUrl}images/theme/${this.themeActiveSetting.name}/all.png`
    },
    logoIconOnly() {
      return `${this.$baseUrl}images/theme/${this.themeActiveSetting.name}/only.png`
    }
  },
  methods: {
    ...mapActions('ibps/menu', [
      'asideCollapseToggle'
    ]),
    ...mapState('ibps/menu', [
      'activeHeader',
      'header',
      'activeName'
    ]),
    /* 跳转首页*/
    goToMain() {
      // this.sysName = "首页"
      this.$router.push({
        name: 'dashboard'
      })
    },
    pageChange() {
      this.sysName = ''
    },
    /**
     * 接收点击切换侧边栏的按钮
     */
    handleToggleAside() {
      this.asideCollapseToggle()
    },
    handleSubsystemClick(system) {
      this.$store.dispatch('ibps/system/set', system)
      window.location.href = this.$baseUrl
      // location.reload() // 为了重新实例化vue-router对象 避免bug
    }
  }
}
</script>

<style lang="scss">
// 注册主题
@import '~@/assets/styles/theme/register.scss';
.jbd-sys-title{
  background: linear-gradient(to top,rgb(51, 150, 209),#7dbfdf);
  // background: rgb(51, 150, 209);
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #FFF;
  text-align: center;
}
.jbd-sys-title-cont{
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  font-size: 14px;
}
.jbd-sys-title-contact{
  line-height: 20px;
  margin-right: 40px;
  font-size: 14px;
}
.layout-border-left{
  float: left;
  box-shadow: 0px 2px 4px #E78C45, 0 0 5px rgba(155,155, 0, .04);
  width: 100%;
  height: 50px;
  line-height: 50px;
  .layout-border-left-name{
    float: left;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>