thoth-frontend-test/src/components/newLayout/Main.vue

<template>
  <div
    class="zhihui-main"
    :class="{
      'open-sidebar': showNavTag && navTagType === 1 && !collapsed,
      'hide-sidebar': showNavTag && navTagType === 1 && collapsed,
      'top-sidebar': showNavTag && navTagType === 2 && collapsed,
      'no-sidebar': !showNavTag
    }"
  >
    <div v-if="showpage" class="main-wrapper" @click="listenClick">
      <router-view />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { needIdList } from '@/router/needIdList'
import { EncryptId, desDecryptId, analysisBizId_id } from '@/utils/crypto-js.js'
import { settingGetBizList, settingUserGetBiz } from '@/api/projectIndex'
export default {
  data() {
    return {
      bizIdList: [], // 业务线列表
      showpage: false
    }
  },
  computed: {
    ...mapGetters(['bizId', 'navTagType', 'showNavTag', 'collapsed'])
  },
  watch: {
    $route: {
      handler(to, from) {
        this.handlerRouter(to, from)
      },
      immediate: true
    }
  },
  // created() {
  // this.settingUserGetBiz()
  // },
  methods: {
    // async settingUserGetBiz() { // 刷新页面
    //   // const bizId_id = analysisBizId_id(this.$route.query.bizId_id)
    //   let decodeBizId = ''
    //   const { bizId = null, bizId_id = null } = this.$route.query
    //   if(this.$route.query.bizId) {
    //     decodeBizId = desDecryptId(bizId)
    //   } else if(this.$route.query.bizId_id){
    //     decodeBizId = analysisBizId_id(bizId_id)[0]
    //   } else {
    //     const res = await settingUserGetBiz()
    //     if (res.code === 200) {
    //       // this.showpage = true
    //       // this.$store.dispatch('global/setBizId', res.data.bizId)
    //       decodeBizId = res.data.bizId
    //     }
    //   }
    //   console.log(decodeBizId)
    //   this.showpage = true
    //   this.$store.dispatch('global/setBizId', decodeBizId)
    //   // console.log(this.$route.query, bizId_id)
    //   // if (this.$store.state.global.bizId === -1) {
    //   // } else {
    //   //   this.showpage = true
    //   // }
    // },
    // 获取业务线列表
    async settingGetBizList() {
      const res = await settingGetBizList({})
      this.bizIdList = res.data || []
    },
    // 路由处理
    async handlerRouter(to, from) {
      // 如果业务线列表不存在，请求获取路由业务线列表
      if (this.bizIdList.length < 1) await this.settingGetBizList()
      // 如果没有业务线，但是页面又是工作台
      if (this.bizId === -1 && to.name.search(/工作台/) > 0) this.getDefaultBizId(true)
      // 如果是业务线选择页面，不作处理
      if (to.name.search(/工作台|业务线/) >= 0) return
      // 如果与原路由相同，不作处理
      if (from && to.path === from.path) return
      // 如果已存在业务线ID（第一优先级）
      if (this.bizId !== -1) this.redirectPage()
      // 业务线不存在，但是url上面带bizId或者bizId_id的（第二优先级）
      if (this.$route.query.bizId || this.$route.query.bizId_id) await this.handlerPage()
      // 如果前往路由中参数中bizId和bizId_id都不存在，去获取默认bizId（第三优先级）
      if (!to.query.bizId && !to.query.bizId_id) await this.getDefaultBizId()
      this.showpage = true
    },
    // 页面路由替换（增加bizId参数，只替换非详情页）
    redirectPage() {
      // 是否是需要bizId_id的详情页
      const existBizId_id = needIdList.find(item => item === this.$route.name)
      // 非详情页处理，路由替换，增加加密后的bizId参数
      if (!existBizId_id) {
        this.$router.replace({
          path: this.$route.path,
          query: { ...this.$route.query, bizId: EncryptId(this.bizId) }
        })
      }
    },
    // 页面处理
    handlerPage() {
      // 是否是需要bizId_id的详情页
      const existBizId_id = needIdList.find(item => item === this.$route.name)
      let bizId = -1
      existBizId_id
        ? (bizId = analysisBizId_id(this.$route.query.bizId_id)[0]) // 详情页下
        : (bizId = Number(desDecryptId(this.$route.query.bizId))) // 非详情页下
      // 判断业务线id是否存在
      const isExistBizId = this.bizIdList.find(item => bizId === item.code)
      // 业务线存在，设置业务线，不存在，去获取默认业务线
      if (isExistBizId) {
        this.$store.dispatch('global/setBizId', bizId)
        this.$store.dispatch('global/setBizName', isExistBizId.name)
      } else {
        this.getDefaultBizId()
      }
    },
    // 获取用户默认业务线
    async getDefaultBizId(noQuery = false) {
      const res = await settingUserGetBiz()
      if (!res.data) this.$router.push({ name: '业务线选择' })
      const nowBiz = this.bizIdList.find(item => res.data.bizId === item.code)
      // 如果当前用户默认业务线存在，设置业务线，并页面路由重定向，否则进入业务线选择页面
      if (nowBiz) {
        this.$store.dispatch('global/setBizId', nowBiz.code)
        this.$store.dispatch('global/setBizName', nowBiz.name)
        localStorage.setItem('bizId', nowBiz.code)
        if (noQuery) return // 如果是不需要url参数的，直接返回
        this.redirectPage()
      } else {
        this.$router.push({ name: '业务线选择' })
      }
    },
    // 整个页面的点击次数
    listenClick(event) {
      this.$store.dispatch('app/addClickCount')
    },
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
}
</script>
<style lang="scss" scoped>
.zhihui-main {
  height: 100vh;
  background-color: #f2f3f6;
}
.hide-sidebar {
  width: calc(100% - 80px);
}
.open-sidebar {
  width: calc(100% - 215px);
}
.top-sidebar {
  width: calc(100% - 80px);
  padding-top: 60px;
}
.no-sidebar {
  width: calc(100% - 80px);
}
.main-wrapper {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  min-width: 890px;
  // padding-left: 10px;
  overflow-y: scroll;
  background-color: rgb(242, 243, 246);
}
</style>