no message

language/original-web.txt

@@ -2065,3 +2065,5 @@ AI开启新会话失败
 
 按工作流
 按状态
+
+应用加载失败

resources/assets/js/components/MicroApps.vue

@@ -21,18 +21,24 @@
         modal-class="micro-app-modal"
         drawer-class="micro-app-drawer"
         placement="right"
+        :beforeClose="onBeforeClose"
         :size="1200">
-        <micro-app
+        <template>
-            v-if="appConfig.isOpen"
+            <micro-app
-            :name="appConfig.appName"
+                v-if="appConfig.isOpen"
-            :url="appConfig.appUrl"
+                :name="appConfig.appName"
-            :keep-alive="appConfig.keepAlive"
+                :url="appConfig.appUrl"
-            :data="appData"
+                :keep-alive="appConfig.keepAlive"
-            @created="created"
+                :data="appData"
-            @beforemount="beforemount"
+                @created="created"
-            @mounted="mounted"
+                @beforemount="beforemount"
-            @unmount="unmount"
+                @mounted="mounted"
-            @error="error"/>
+                @unmount="unmount"
+                @error="error"/>
+            <div v-if="loadIng > 0" class="micro-app-loading">
+                <Loading/>
+            </div>
+        </template>
     </DrawerOverlay>
 </template>
 
@@ -48,6 +54,17 @@
         overflow: hidden;
     }
 }
+
+.micro-app-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
 </style>
 
 <script>
@@ -72,6 +89,7 @@ export default {
 
     data() {
         return {
+            loadIng: 0,
             appConfig: {},
         }
     },
@@ -90,10 +108,8 @@ export default {
     },
 
     watch: {
-        userToken(val) {
+        userToken(token) {
-            if (!val) {
+            !token && microApp.unmountAllApps({destroy: true})
-                microApp.unmountAllApps({destroy: true})
-            }
         },
     },
 
@@ -104,8 +120,6 @@ export default {
         ]),
 
         appData() {
-            const {initialData, appName} = this.appConfig;
-
             return {
                 instance: {
                     Vue,
@@ -121,7 +135,7 @@ export default {
                 },
 
                 initialData: {
-                    ...initialData,
+                    ...this.appConfig.initialData,
 
                     systemInfo: window.systemInfo,
                     baseUrl: $A.mainUrl(),
@@ -142,10 +156,7 @@ export default {
                 },
 
                 handleClose: (destroy = false) => {
-                    this.appConfig.appName === appName && (this.appConfig.isOpen = false);
+                    this.closeMicroApp(destroy)
-                    if (destroy) {
-                        microApp.unmountApp(appName, {destroy: true})
-                    }
                 },
 
                 nextModalIndex: () => {
@@ -172,22 +183,16 @@ export default {
     methods: {
         // 元素被创建
         created(e) {
-            const item = appMaps.get(e.detail.name)
+            this.stateChange(e)
-            if (item?.isLoading) {
-                this.$store.dispatch('showSpinner');
-            }
         },
 
         // 即将渲染
-        beforemount(e) {
+        beforemount() {
-            const item = appMaps.get(e.detail.name)
-            if (item?.isLoading) {
-                this.$store.dispatch('hiddenSpinner');
-            }
         },
 
         // 已经渲染完成
-        mounted() {
+        mounted(e) {
+            this.stateChange(e, true)
         },
 
         // 已经卸载
@@ -195,16 +200,45 @@ export default {
         },
 
         // 加载出错
-        error() {
+        error(e) {
+            this.stateChange(e, true)
+            $A.modalError({
+                language: false,
+                title: this.$L('应用加载失败'),
+                content: e.detail.error,
+                onOk: () => {
+                    this.closeMicroApp(true)
+                },
+            });
+        },
+
+        // 加载状态变化
+        stateChange(e, end = false) {
+            const appConfig = appMaps.get(e.detail.name)
+            if (appConfig?.isLoading) {
+                if (end) {
+                    if (appConfig.transparent) {
+                        this.$store.dispatch('hiddenSpinner');
+                    } else {
+                        this.loadIng--;
+                    }
+                } else {
+                    if (appConfig.transparent) {
+                        this.$store.dispatch('showSpinner');
+                    } else {
+                        this.loadIng++;
+                    }
+                }
+            }
         },
 
         /**
          * 打开微应用
-         * @param config
+         * @param appConfig
          */
-        openMicroApp(config) {
+        openMicroApp(appConfig) {
             // 处理数据
-            config = Object.assign({
+            appConfig = Object.assign({
                 appName: 'micro-app',       // 微应用唯一标识名称
                 appUrl: null,               // 微应用的入口URL地址
                 initialData: {},            // 初始化时传递给微应用的数据对象
@@ -214,26 +248,47 @@ export default {
 
                 isLoading: true,            // 私有参数，是否显示加载状态(true/false)
                 isOpen: false,              // 私有参数，是否打开微应用(true/false)
-            }, config);
+            }, appConfig);
 
-            // 判断卸载上次
+            // 判断处理
-            const lastApp = appMaps.get(config.appName)
+            const lastConfig = appMaps.get(appConfig.appName)
-            if (lastApp) {
+            if (lastConfig) {
-                if (lastApp.displayMode != config.displayMode || lastApp.appUrl != config.appUrl) {
+                if (lastConfig.displayMode != appConfig.displayMode || lastConfig.appUrl != appConfig.appUrl) {
-                    microApp.unmountApp(config.appName, {destroy: true})
+                    microApp.unmountApp(appConfig.appName, {destroy: true})
                 } else {
-                    config.isLoading = false;
+                    appConfig.isLoading = false;
                 }
             }
 
             // 更新数据
-            appMaps.set(config.appName, this.appConfig = config);
+            appMaps.set(appConfig.appName, this.appConfig = appConfig);
 
             // 打开微应用
             this.$nextTick(_ => {
                 this.appConfig.isOpen = true
             })
-        }
+        },
+
+        /**
+         * 关闭微应用
+         * @param destroy
+         */
+        closeMicroApp(destroy) {
+            this.appConfig.isOpen = false
+            if (destroy) {
+                microApp.unmountApp(this.appConfig.appName, {destroy: true})
+            }
+        },
+
+        /**
+         * 关闭之前判断
+         * @returns {Promise<unknown>}
+         */
+        onBeforeClose() {
+            return new Promise(resolve => {
+                resolve()
+            })
+        },
     }
 }
 </script>