scocial-management-platform-frontend/src/views/main/main.vue

<template>
  <div :style="auiWrapper" v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" class="aui-wrapper all-main-wraper">
    <template v-if="!loading">
      <!-- <div @click="menuChangeCeshi">路径切换导航</div> -->
      <div class="smp_main-t">
        <main-navbar ref="mainNavbar" v-if="navbarFlag"/>
      </div>
      <div class="smp_main-b" v-if="isNormalSidebar">
        <div class="smp_main-l" v-show="isMainMenuHaveChild">
          <main-sidebar v-if="sidebarFlag" ref="sidebar"/>
        </div>
        <div class="smp_main-r" :class="{'onClose':$store.state.sidebarFold,'main-no-left':!isMainMenuHaveChild}">
          <content-crumb v-if="isMainMenuHaveChild"></content-crumb>
          <main-content />
        </div>
      </div>
      <div class="smp_main-b" v-else>
        <div class="smp_main-r" :class="{'onClose':$store.state.sidebarFold,'main-no-left':true}">
          <basicCom :isSidebar="true"></basicCom>
        </div>
      </div>
    </template>
    <noticePop ref="noticePop"></noticePop>
    <taskPop ref="taskPop"></taskPop>
    <!-- 北信源即时通讯应用入口 -->
    <openPcexeBtn ref="openPcexeBtn"></openPcexeBtn>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
import debounce from 'lodash/debounce'
import ContentCrumb from './main-content-crumb'
import noticePop from './notice-pop'
import taskPop from './task-pop'
import openPcexeBtn from './openPcexeBtn'
import basicCom from '@/views/modules/demo/basicComponent/basic-com'
import { clearLoginInfo } from '@/utils'
import shuiyin from '@/utils/shuiyin'
let allComponent = {
  index: ''
}
export default {
  provide () {
    allComponent.index = this
    return {
      allComponent: allComponent,
      // 刷新
      refresh () {
        this.$store.state.contentIsNeedRefresh = true
        this.$nextTick(() => {
          this.$store.state.contentIsNeedRefresh = false
        })
      }
    }
  },
  data () {
    return {
      loading: true,
      isNormalSidebar: true,
      navbarFlag: false,
      sidebarFlag: false,
      mainContent: 'aui-content__wrapper',
      auiWrapper: '',
      isMainMenuHaveChild: true,
      menuDataAll: [],
      areaCode: ''
    }
  },
  components: {
    MainNavbar,
    MainSidebar,
    MainContent,
    ContentCrumb,
    basicCom,
    noticePop,
    taskPop,
    openPcexeBtn
  },
  watch: {
    $route: 'routeHandle'
  },
  created () {
    // this.windowResizeHandle()
    // this.routeHandle(this.$route)
    Promise.all([
      this.getUserInfo(),
      this.getPermissions()
    ]).then(() => {
      this.getTitleLogo()
      this.loading = false
    })
    this.loading = false
    this.navbarFlag = window.SITE_CONFIG['isNavbar']
    this.sidebarFlag = window.SITE_CONFIG['isSidebar']
    if (!this.sidebarFlag) {
      this.mainContent = ''
    }
    if (!this.navbarFlag) {
      this.auiWrapper = 'padding-top:0px;'
    }
    if (this.$route.name === 'JCZJ') {
      this.gotoWaterfallSidebar()
    }
  },
  mounted () {
    this.getMenuList()
    this.monitorChild()
    this.setWaterMarker()
    if (Cookies.get('loginMsg')) {
      this.$alert('本系统所有操作均有日志记录，非因工作原因，不得使用系统查询获取信息，不得随意泄漏、传播或出售通过系统查询获取的信息。', '温馨提示', {
        confirmButtonText: '确定',
        showClose: false,
        callback: action => {
          Cookies.remove('loginMsg')
        },
        customClass: 'login-msg'
      });
    }
    window.addEventListener('message', (e) => {
      console.log('收到消息', e)
      if (e.data.code === 401 || e.data.code === 402 || e.data.code === 403 || e.data.code === 10001) {
        if(localStorage.getItem('pathCopy')) {
          localStorage.setItem('pathCopyshow',true)
        }
        this.$alert(e.data.msg, '提示',{
          showClose: false,
          showCancelButton: false,
          callback: () => {
            this.tokenInvalid()
          }
        })
      }
    })
  },
  methods: {
    setWaterMarker () {
      // /api-idaas
      this.$http.get('/idaas/sso/user/watermark/info').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        shuiyin([res.data.ip, res.data.username, res.data.currentTime])
      }).catch(() => {})
    },
    // 窗口改变大小
    // windowResizeHandle () {
    //   this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
    //   window.addEventListener('resize', debounce(() => {
    //     this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
    //   }, 150))
    // },
    getMenuList () {
      this.menuDataAll = window.SITE_CONFIG['menuList']
    },
    checkMenu (origin) {
      let arr = this.menuDataAll.filter((e) => {
        if (e.url) {
          return e.url.indexOf(origin) > -1
        } else {
          return false
        }
      })
      return arr.length
    },
    tokenInvalid (config) {
      console.log(config)
      clearLoginInfo()
      this.$router.push({ name: 'login' })
    },
    menuChangeCeshi () {
      let config = {
        path: 'https://www.baidu.com'
      }
      this.menuChange(config)
    },
    menuChange (config) {
      console.log(config)
      let path = config.path
      let menuObj = {}
      let parent = ''
      let item = this.menuDataAll.filter((e) => {
        return e.url === path
      })[0]
      if (item) {
        this.menuDataAll.forEach((e) => {
          menuObj[e.UUID] = e
        })

        parent = this.findParent(menuObj, item)
        console.log(menuObj, parent, item)
        this.$refs.mainNavbar.$refs.navbarmenu.gotoPageByUUID(parent.UUID)
        this.$router.push({ path: item.UUID })
      }

      // clearLoginInfo()
      // this.$router.push({ name: 'login' })
    },
    findParent (obj, item) {
      // console.log(item.id)
      let parent = obj[item.parentUUID]
      if (parent) {
        return this.findParent(obj, parent)
      } else {
        return item
      }
    },
    isMyEvent (name, obj) {
      let isHas = false
      Object.keys(obj).forEach((e) => {
        if (e === name) {
          isHas = true
        }
      })
      return isHas
    },
    // 跨域监听
    monitorChild () {
      let _this = this
      let eventObj = {
        tokenInvalid: _this.tokenInvalid.bind(this),
        menuChange: _this.menuChange.bind(this)
      }
      window.addEventListener('message', function (e) {
        if (!e.data.event || !_this.isMyEvent(e.data.event, eventObj)) {
          console.log('事件错误')
          return
        }
        if (_this.checkMenu(e.origin)) {
          eventObj[e.data.event] && eventObj[e.data.event](e.data.config)
        } else {
          console.log('源头错误')
        }
        console.log(e, window.location.origin)
      // e.data.cbk()
      })
    },
    // 显示通知弹窗
    showNotice () {
      this.$refs.noticePop.showPop()
    },
    // 显示通知弹窗
    showTask () {
      this.$refs.taskPop.showPop()
    },
    // 切换导航
    gotoNormalSidebar () {
      this.isNormalSidebar = true
      this.$nextTick(() => {
        this.$refs.sidebar.remedyMenuNoChange()
      })
    },
    gotoWaterfallSidebar () {
      this.isNormalSidebar = false
    },
    // 路由, 监听
    routeHandle (route) {
      if (route.name === 'JCZJ') {
        this.isNormalSidebar = true
        this.$nextTick(() => {
          this.gotoWaterfallSidebar()
        })
      } else {
        !this.isNormalSidebar && this.gotoNormalSidebar()
      }
      // !this.isNormalSidebar && this.gotoNormalSidebar()
      if (!route.meta.isTab) {
        return false
      }
      var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
      if (!tab) {
        tab = {
          ...window.SITE_CONFIG['contentTabDefault'],
          ...route.meta,
          'name': route.name,
          'params': { ...route.params },
          'query': { ...route.query }
        }
        this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
      }
      this.$store.state.sidebarMenuActiveName = tab.menuId
      this.$store.state.contentTabsActiveName = tab.name
    },
    // 获取当前管理员信息
    getUserInfo () {
      return this.$http.get('/idaas/sso/user/info').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        // console.log(res)
        this.$store.state.user.name = res.userInfo.displayName
        this.$store.state.user.organizations = res.userInfo.organizations[0].organizationName
        if (res.userInfo.extendField && res.userInfo.extendField.regionCode) {
          this.areaCode = res.userInfo.extendField.regionCode
        }
      }).catch(() => {})
    },
    // 获取权限
    getPermissions () {
      return this.$http.get('/idaas/ps/user/buttonList').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$store.dispatch('permission', res.buttonList)
        window.SITE_CONFIG['permissions'] = res.buttonList
      }).catch(() => {})
    },
    getTitleLogo () {
      if (!this.areaCode) {
        return
      }
      // 生产环境
      this.$http.get('http://10.110.34.19:30600/sysbase/area/admin/getCityAreaByCode?areaCode=' + this.areaCode).then(({ data: res }) => {
      // 测试环境
      // this.$http.get('http://10.110.37.15:30600/sysbase/area/admin/getCityAreaByCode?areaCode=' + this.areaCode).then(({ data: res }) => {
        if (res.code !== '0') {
          return this.$message.error(res.msg)
        }
        res.result.areaTitle && (document.title = res.result.areaTitle)
        if (res.result.areaLogo) {
          // window.$('link[rel="shortcut icon"]').attr('href', res.result.areaLogo)
          window.$('.navbar-logo img').attr('src', res.result.areaLogo)
        }
      }).catch(() => {})
    }
  }
}
</script>