全景视图

src/views/humanResources/panorama/panoramaDetails.vue

@@ -18,7 +18,7 @@
       </el-breadcrumb>
     </div>
     <div class="content-body">
-      <component :is="componentsPath" :key="$route.fullPath" ref="panorama"></component>
+      <component :is="componentsPath" :key="$route.fullPath" ref="panorama" @hook:mounted="onMounted"></component>
     </div>
   </div>
 </template>
@@ -62,7 +62,7 @@ export default {
   },
   created () {
     this.getDept()
-    this.componentsPath = () => import(`@/views/${this.activeIndex}`)
+    this.runPanorama()
   },
   methods: {
     async getDept () {
@@ -76,9 +76,16 @@ export default {
       }
     },
     // 使用原菜单页面，通过ref调用开启页面内部的onInitPanorama方法开启全景页面
-    // componentsPath () {
-    //   return import(`@/views/${this.activeIndex}`)
-    // },
+    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) {
@@ -89,7 +96,7 @@ export default {
     },
     onSelect (v) {
       this.activeIndex = v
-      this.componentsPath = () => import(`@/views/${this.activeIndex}`)
+      this.runPanorama()
     },
     onRun (path) {
       window.open(this.$route.path + '?organizationNo=' + path)

src/views/humanResources/payroll/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pa-3 white">
+  <div class="white" :class="{ 'pa-3': !panorama.organizationNo }">
     <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch">
       <template #button>
         <m-button type="primary" icon="el-icon-download" :loading="exportLoading" plain @click="onExport">导出报表</m-button>
@@ -31,6 +31,7 @@ export default {
   name: 'salary-payroll',
   data () {
     return {
+      panorama: {},
       exportLoading: false,
       searchValues: {
         month: null,
@@ -71,7 +72,9 @@ export default {
   },
   methods: {
     // 执行全景初始化操作
-    onInitPanorama () {},
+    onInitPanorama (organizationNo, employeeNo) {
+      this.panorama = { organizationNo, employeeNo }
+    },
     async init () {
       try {
         const { data } = await getPayrollPage({

src/views/humanResources/roster/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="white pa-3">
+  <div class="white" :class="{ 'pa-3': !panorama.organizationNo }">
     <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch">
       <template #button>
         <m-button type="primary" icon="el-icon-plus" plain @click="onAdd">新增</m-button>
@@ -45,6 +45,7 @@ export default {
   components: { rosterEdit },
   data () {
     return {
+      panorama: {},
       importLoading: false,
       exportLoading: false,
       downloadLoading: false,
@@ -101,6 +102,10 @@ export default {
     this.init()
   },
   methods: {
+    // 执行全景初始化操作
+    onInitPanorama (organizationNo, employeeNo) {
+      this.panorama = { organizationNo, employeeNo }
+    },
     async init () {
       this.loading = true
       try {