remuneration/src/views/humanResources/panorama/panoramaDetails.vue

<template>
  <div class="white pa-3 content">
    <el-menu :default-active="activeIndex" unique-opened class="el-menu-demo" mode="horizontal" @select="onSelect">
      <template  v-for="_menu in menuList">
        <PanoramaDetailsMenu :key="_menu.id" :item="_menu"></PanoramaDetailsMenu>
      </template>
    </el-menu>
    <div class="py-5">
      <el-breadcrumb>
        <el-breadcrumb-item
          v-for="(_path, i) in breadcrumbs"
          :key="_path.value"
          :to="i < breadcrumbs.length - 1 ? $route.path + '?organizationNo=' + _path.value : undefined"
        >
          {{ _path.label }}
        </el-breadcrumb-item>
        <el-breadcrumb-item v-for="MP in menuPath" :key="MP.value">{{ MP.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-body">
      <component :is="componentsPath" :key="$route.fullPath" ref="panorama" @hook:mounted="onMounted"></component>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanoramaDetailsMenu from './panoramaDetailsMenu.vue'

import { getOrganizationTree } from '@/utils/dict'
import {
  findPath
} from '@/utils/panorama'

export default {
  name: 'panorama-details',
  components: { PanoramaDetailsMenu },
  data () {
    return {
      activeIndex: 'humanResources/payroll',
      breadcrumbs: [],
      componentsPath: null
    }
  },
  computed: {
    ...mapGetters(['routes']),
    menuList () {
      return this.filterRoute(JSON.parse(JSON.stringify(this.routes)))
    },
    menuPath () {
      return findPath(this.menuList, this.activeIndex, [], {
        children: 'children',
        value: 'component',
        label: 'label'
      })
    }
  },
  watch: {
    '$route.fullPath': function () {
      this.getDept()
    }
  },
  created () {
    this.getDept()
    this.runPanorama()
  },
  methods: {
    async getDept () {
      const data = await getOrganizationTree()
      if (!data) {
        return
      }
      this.breadcrumbs = findPath(data, this.$route.query.organizationNo)
      if (this.$route.query.employeeName && this.$route.query.employeeNo) {
        this.breadcrumbs.push({ value: this.$route.query.employeeNo, label: this.$route.query.employeeName })
      }
    },
    // 使用原菜单页面，通过ref调用开启页面内部的onInitPanorama方法开启全景页面
    runPanorama () {
      this.componentsPath = () => import(`@/views/${this.activeIndex}`)
    },
    onMounted () {
      if (!this.$refs.panorama.onInitPanorama) {
        this.$message.error('当前页面不支持全景功能')
        return
      }
      this.$refs.panorama.onInitPanorama(this.$route.query.organizationNo, this.$route.query.employeeNo)
    },
    filterRoute (items) {
      return items.filter(item => {
        if (item.children && item.children.length) {
          item.children = this.filterRoute(item.children)
        }
        return item.meta.panorama
      })
    },
    onSelect (v) {
      this.activeIndex = v
      this.runPanorama()
    },
    onRun (path) {
      window.open(this.$route.path + '?organizationNo=' + path)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  &-body {
    height: 0;
    flex: 1;
  }
}
</style>