ShibeiWorkPlatform_Frontend/src/views/main-shuju/main.vue

<template>
  <div
    v-loading.fullscreen.lock="loading"
    :element-loading-text="$t('loading')"
    :class="[
      'g-bd',
      { 'z-sidebar--fold': $store.state.sidebarFold },
      {
        'z-sidebar--noside':true
      }
    ]"
  >
    <template v-if="!loading">
      <main-navbar ref="ref_navbar" />
      <div class="g-cnt">
        <main-content
          v-if="!$store.state.contentIsNeedRefresh"
          @changeCustomerName="changeCustomerName"
        />
      </div>
    </template>
  </div>
</template>

<script>
import MainNavbar from './main-navbar'
import MainContent from './main-content'
import debounce from 'lodash/debounce'
import { mapGetters } from 'vuex'
import nextTick from 'dai-js/tools/nextTick'

export default {
  provide() {
    return {
      // 刷新
      refresh() {
        this.$store.state.contentIsNeedRefresh = true
        this.$nextTick(() => {
          this.$store.state.contentIsNeedRefresh = false
        })
      }
    }
  },
  data() {
    return {
      loading: true,
      userType: localStorage.getItem('userType')
    }
  },
  components: {
    MainNavbar,
    MainContent,
  },

  watch: {
    $route: 'routeHandle'
  },
  async created() {
    this.windowResizeHandle()
    this.routeHandle(this.$route)
    Promise.all([this.getWorkUserInfo()]).then(() => {
        this.loading = false
      })
  },
  computed: {},
  methods: {
    changeCustomerName(customerName) {
      this.$refs['ref_navbar'].changeCustomerName(customerName)
    },
    // 窗口改变大小
    windowResizeHandle() {
      this.$store.state.sidebarFold =
        document.documentElement['clientWidth'] <= 992 || false
      window.addEventListener(
        'resize',
        debounce(() => {
          this.$store.state.sidebarFold =
            document.documentElement['clientWidth'] <= 992 || false
        }, 150)
      )
    },
    // 路由, 监听
    routeHandle(route) {
      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.mainShuju.activeName = tab.menuId
      this.$store.state.mainShuju.contentTabsActiveName = tab.name
    },
    // 获取当前管理员信息
    getUserInfo() {
      const url = '/epmetuser/operuser/queryOperUserDto'

      return this.$http
        .get(url)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }

          this.$store.state.user.id = res.data.id
          this.$store.state.user.realName = res.data.realName
          this.$store.state.user.superAdmin = res.data.superAdmin
          this.$store.state.user.gender = data.gender
          localStorage.setItem('customerId', '')
        })
        .catch(() => {})
    },
    // 获取当前管理员信息
    getWorkUserInfo() {
      const url = '/epmetuser/customerstaff/staffbasicinfo'
      let params = {}
      window.app.ajax.post(
        url,
        params,
        (data, rspMsg) => {
          this.$store.state.user = { ...data }
          // this.$store.state.user.id = data.id
          // this.$store.state.user.realName = data.realName
          // this.$store.state.user.superAdmin = data.superAdmin
          // this.$store.state.user.gender = data.gender
          localStorage.setItem('roleList', data.roleList)
          localStorage.setItem('customerId', data.customerId)
          // this.$store.state.user.roleList = data.roleList
          // this.$store.state.user.customerId = data.customerId
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        }
      )
      // return this.$http.get(url).then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   }

      // }).catch(() => { })
    }
  }
}
</script>

<style lang="scss" src="@/assets/scss/main-shuju.scss"></style>