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">
      <!--
        全景视图相关页面
        根据菜单配置显示传入 panorama 参数为全景打开 (非必须，根据自己需要使用)
        onMounted默认允许子页面内onInitPanorama方法（必须配置）传入两个参数为机构id和员工id
      -->
      <component
        :is="componentsPath"
        :key="$route.fullPath"
        :panorama="true"
        ref="panorama"
        @hook:mounted="onMounted"
      ></component>
    </div>
  </div>
</template>

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

import {
  findPath
} from '@/utils/panorama'
import qs from 'qs'
const DEFAULT_COMPONENT = {
  基础信息: 'humanResources/panorama/dynamic/panoramaDetailsBaseInfo'
}
export default {
  name: 'panorama-details',
  components: { PanoramaDetailsMenu },
  data () {
    return {
      activeIndex: '',
      breadcrumbs: [],
      componentsPath: null,
      defaultItems: []
    }
  },
  computed: {
    ...mapGetters(['routes', 'organizationTree']),
    menuList () {
      return [
        ...this.defaultItems,
        ...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.defaultItems = Object.keys(DEFAULT_COMPONENT).map(key => {
      return {
        label: key,
        component: DEFAULT_COMPONENT[key]
      }
    })
    this.activeIndex = this.$route.query.path || this.defaultItems[0].component
    this.getDept()
    this.runPanorama()
  },
  methods: {
    async getDept () {
      this.breadcrumbs = findPath(this.organizationTree, 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
      const query = { ...this.$route.query }
      query.path = v
      this.$router.push(`${this.$route.path}?${qs.stringify(query)}`)
      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;
  }
}
::v-deep .el-menu-demo {
  &>.el-submenu {
    overflow: hidden;
  }
  &>.is-active {
    background-color: unset !important;
    color: #303133 !important;
  }
}
</style>