no message

resources/assets/js/components/MicroApps.vue

@@ -1,9 +1,9 @@
 <template>
     <micro-app
-        v-if="appMode=='page'"
+        v-if="details.mode=='page'"
-        v-show="appShow"
+        v-show="details.show"
-        :name="appName"
+        :name="details.name"
-        :url="appUrl"
+        :url="details.url"
         :data="appData"
         @created="created"
         @beforemount="beforemount"
@@ -11,17 +11,17 @@
         @unmount="unmount"
         @error="error"/>
     <DrawerOverlay
-        v-else-if="appMode=='drawer'"
+        v-else-if="details.mode=='drawer'"
-        v-model="appShow"
+        v-model="details.show"
         ref="drawer"
         placement="right"
         modal-class="micro-apps-modal"
         drawer-class="micro-apps-drawer"
         :size="1200">
-        <div v-if="appShow" class="page-microapp">
+        <div v-if="details.show" class="page-microapp">
             <micro-app
-                :name="appName"
+                :name="details.name"
-                :url="appUrl"
+                :url="details.url"
                 :data="appData"
                 @created="created"
                 @beforemount="beforemount"
@@ -60,6 +60,8 @@ import {DatePicker} from 'view-design-hi';
 import DrawerOverlay from "./DrawerOverlay/index.vue";
 import emitter from "../store/events";
 
+const mountApps = new Map();
+
 export default {
     name: "MicroApps",
     components: {DrawerOverlay},
@@ -67,13 +69,7 @@ export default {
     data() {
         return {
             loadIng: 0,
-
+            details: {},
-            appMode: '',
-            appShow: false,
-
-            appName: "micro-app",
-            appUrl: "",
-            appParams: {},
         }
     },
 
@@ -110,16 +106,27 @@ export default {
                         DatePicker
                     }
                 },
-                theme: this.themeName,
+
-                languages: {
+                datas: {
-                    languageList,
+                    ...this.details.params,
-                    languageName,
+
-                    languageType: languageName,
+                    // theme: this.themeName,
+                    themeName: this.themeName,
+                    languages: {
+                        languageList,
+                        languageName,
+                        // languageType: languageName,
+                    },
+
+                    userInfo: this.userInfo,
+                    userToken: this.userToken,
+
+                    electron: this.$Electron,
+                },
+
+                onClose: () => {
+                    this.$refs.drawer?.onClose();
                 },
-                userInfo: this.userInfo,
-                userToken: this.userToken,
-                electron: this.$Electron,
-                params: this.appParams,
 
                 nextZIndex: () => {
                     if (typeof window.modalTransferIndex === 'number') {
@@ -128,10 +135,6 @@ export default {
                     return 1000;
                 },
 
-                onClose: () => {
-                    this.$refs.drawer?.onClose();
-                },
-
                 openAppChildPage: (objects) => {
                     this.$store.dispatch('openAppChildPage', objects);
                 },
@@ -147,31 +150,45 @@ export default {
         }
     },
     methods: {
-        created() {
+        // 元素被创建
-            console.log('元素被创建')
+        created(e) {
-            this.loadIng++
+            if (!mountApps.has(e.detail.name)) {
+                this.loadIng++
+            }
         },
-        beforemount() {
+
-            console.log('即将渲染')
+        // 即将渲染
-            this.loadIng--
+        beforemount(e) {
+            if (!mountApps.has(e.detail.name)) {
+                mountApps.set(e.detail.name, e.detail.name);
+                this.loadIng--
+            }
         },
+
+        // 已经渲染完成
         mounted() {
-            console.log('已经渲染完成')
         },
+
+        // 已经卸载
         unmount() {
-            console.log('已经卸载')
         },
+
+        // 加载出错
         error() {
-            console.log('加载出错')
         },
 
+        /**
+         * 打开微应用
+         * @param data
+         */
         openMicroApp(data) {
-            this.appName    = data.name ?? 'micro-app';
+            this.details = Object.assign({
-            this.appUrl     = data.url ?? null;
+                mode: 'drawer',     // page, drawer
-            this.appParams  = data.params ?? {};
+                name: 'drawer-app', // 微应用名称
-
+                show: true,         // 是否显示
-            this.appShow    = data.show ?? true;
+                url: null,          // 微应用地址
-            this.appMode    = data.mode ?? 'drawer';
+                params: {},         // 传递给微应用的数据
+            }, data)
         }
     }
 }

resources/assets/js/store/actions.js

@@ -4675,14 +4675,16 @@ export default {
                 name: 'app-okr-details',
 
                 url: $A.mainUrl(`apps/okr/okrDetails?data=${path}`),
-                params: {},
+                params: {
+                    model: 'details',
+                },
             });
         } else {
             // 打开列表、统计
             emitter.emit('openMicroApp', {
                 mode: 'drawer',
                 show: true,
-                name: `app-okr`,
+                name: `app-okr-${path}`,
 
                 url: $A.mainUrl(`apps/okr/${path}`),
                 params: {},