feat：融合子应用调整

resources/assets/js/components/MicroApps.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="page-microapp">
+        <transition name="microapp-load">
+            <div class="microapp-load">
+                <Loading />
+            </div>
+        </transition>
+        <micro-app v-if="url && !loading" 
+            :name='name' 
+            :url='url' 
+            inline 
+            destroy 
+            disableSandbox 
+            :data='appData'
+            @created='handleCreate' 
+            @beforemount='handleBeforeMount' 
+            @mounted='handleMount' 
+            @unmount='handleUnmount'
+            @error='handleError' 
+            @datachange='handleDataChange'
+        ></micro-app>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import store from '../store/index'
+import { mapState } from "vuex";
+import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
+import DialogWrapper from '../pages/manage/components/DialogWrapper.vue'
+import UserSelect from "./UserSelect.vue";
+import { languageList, languageType } from "../language";
+
+export default {
+    name: "MicroApps",
+    props: {
+        name: {
+            type: String,
+            default: "micro-app"
+        },
+        url: {
+            type: String,
+            default: ""
+        },
+        path: {
+            type: String,
+            default: ""
+        },
+        data:{
+            type: Object,
+            default: () => {}
+        }
+    },
+    data() {
+        return {
+            loading: false,
+            appUrl: '',
+            appData: {}
+        }
+    },
+    deactivated() {
+    },
+    mounted() {
+    },
+    watch: {
+        url(val) {
+            this.loading = true;
+            this.$nextTick(() => {
+                this.loading = false;
+                this.appUrl = val
+            })
+        },
+        path(val) {
+            this.appData = { path: val }
+        },
+        data: {
+            handler(info) {
+                this.appData = info
+            },
+            deep: true,
+        },
+    },
+    computed: {
+        ...mapState([
+            'userInfo',
+            'themeMode',
+        ])
+    },
+    methods: {
+        handleCreate(e) {
+            window.eventCenterForAppNameVite = new EventCenterForMicroApp(this.name)
+        },
+        handleBeforeMount(e) {
+            this.appData = {
+                type: 'init',
+                vues: {
+                    Vue,
+                    store,
+                    components: {
+                        DialogWrapper,
+                        UserSelect
+                    }
+                },
+                theme: this.themeMode,
+                languages: {
+                    languageList,
+                    languageType,
+                },
+                userInfo: this.userInfo,
+                path: this.path
+            }
+        },
+        handleMount(e) {
+            this.appData = this.data;
+            if(this.path){
+                this.appData.path = this.path
+            }
+        },
+        handleUnmount(e) {
+            window.dispatchEvent(new Event('apps-unmount'));
+        },
+        handleError(e) {
+            console.error("子应用加载出错了",e.detail.error)
+        },
+        handleDataChange(e) {
+            // console.log('来自子应用 child-vite 的数据:', e.detail.data)
+        }
+    }
+}
+</script>

resources/assets/js/microapp.js

@@ -1,11 +1,9 @@
 import microApp from '@micro-zoe/micro-app'
-import DialogWrapper from "./pages/manage/components/DialogWrapper.vue";
 
 export default function() {
     let urls  = "";
-    let route  = "/microapp/";
+    let route  = "/";
     let modules = {};
-
     let obj = {
         loader(code,url) {
             if (process.env.NODE_ENV === 'development') {
@@ -25,11 +23,11 @@ export default function() {
     
     // 微应用名称
     modules["micro-app"] = [obj]
-
+    modules["okr-details"] = [obj]
+    
     // 微应用
     microApp.start({
         plugins: {
-            global: [DialogWrapper],
             modules: modules
         }
     })

resources/assets/js/pages/manage.vue

@@ -302,6 +302,9 @@
         </transition>
         <MobileBack :showTabbar="showMobileTabbar"/>
         <MobileNotification ref="mobileNotification"/>
+
+        <!-- okr明细 -->
+        <MicroApps v-show="false" v-if="$route.name != 'manage-apps'" name="okr-details" :url="okrUrl" :data="okrWindow"/>
     </div>
 </template>
 
@@ -325,6 +328,7 @@ import TaskExport from "./manage/components/TaskExport";
 import ApproveExport from "./manage/components/ApproveExport";
 import notificationKoro from "notification-koro1";
 import {Store} from "le5le-store";
+import MicroApps from "../components/MicroApps.vue";
 
 export default {
     components: {
@@ -342,7 +346,9 @@ export default {
         DrawerOverlay,
         ProjectManagement,
         TeamManagement,
-        ProjectArchived},
+        ProjectArchived,
+        MicroApps
+    },
     directives: {longpress},
     data() {
         return {
@@ -396,6 +402,8 @@ export default {
             operateItem: {},
 
             needStartHome: false,
+
+            okrUrl: import.meta.env.VITE_OKR_WEB_URL || "/apps/okr/"
         }
     },
 
@@ -459,6 +467,8 @@ export default {
 
             'reportUnreadNumber',
             'approveUnreadNumber',
+
+            'okrWindow'
         ]),
 
         ...mapGetters(['dashboardTask']),
@@ -781,12 +791,12 @@ export default {
                     return;
                 case 'okrManage':
                 case 'okrAnalyze':
-                    let query = { url: import.meta.env.VITE_OKR_WEB_URL || "/apps/okr/" } 
+                    this.goForward({ 
-                    if(path=='okrManage'){
+                        path:'/manage/apps/' + ( path == 'okrManage' ? '/#/list' : '/#/analysis') , 
-                        this.goForward({  path: '/manage/apps/', query });
+                        query: {
-                    }else{
+                            baseUrl: this.okrUrl
-                        this.goForward({ path: '/manage/apps/#/analysis', query });
+                        } 
-                    }
+                    });
                     return;
                 case 'logout':
                     $A.modalConfirm({

resources/assets/js/pages/manage/apps.vue

@@ -1,41 +1,17 @@
 <template>
-    <div class="page-microapp">
+    <MicroApps :url="appUrl" :path="path" v-if="!loading" />
-        <transition name="microapp-load">
-            <div class="microapp-load">
-                <Loading/>
-            </div>
-        </transition>
-        <micro-app name='micro-app' v-if="appUrl && !loading"
-            :url='appUrl' 
-            inline
-            destroy
-            disableSandbox
-            :data='appData'
-            @created='handleCreate'
-            @beforemount='handleBeforeMount'
-            @mounted='handleMount'
-            @unmount='handleUnmount'
-            @error='handleError'
-            @datachange='handleDataChange'
-        ></micro-app>
-    </div>
 </template>
 
 <script>
-import Vue from 'vue'
+import MicroApps from "../../components/MicroApps.vue";
-import store from '../../store/index'
-import {mapState} from "vuex";
-import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
-import DialogWrapper from './components/DialogWrapper'
-import UserSelect from "../../components/UserSelect.vue";
-import {languageList, languageType} from "../../language";
 
 export default {
+    components: { MicroApps },
     data() {
         return {
             loading: false,
             appUrl: '',
-            appData: {}
+            path: '',
         }
     },
 
@@ -46,66 +22,20 @@ export default {
     watch: {
         '$route': {
             handler(to) {
-                if( to.name == 'manage-apps' ){
+                if (to.name == 'manage-apps') {
                     this.loading = true;
-                    this.$nextTick(()=>{
+                    this.$nextTick(() => {
                         this.loading = false;
-                        let url = $A.apiUrl(this.$route.query.url)
+                        let url = $A.apiUrl(this.$route.query.baseUrl)
-                        if( url.indexOf('http') == -1 ){
+                        if (url.indexOf('http') == -1) {
                             url = window.location.origin + url
                         }
                         this.appUrl = url
-                        window.eventCenterForAppNameVite = new EventCenterForMicroApp("micro-app")
+                        this.path = this.$route.query.path || '';
                     })
                 }
             },
-            immediate: true,
+            immediate: true
-        },
-    },
-
-    computed: {
-        ...mapState([
-            'userInfo',
-            'themeMode',
-        ])
-    },
-
-    methods: {
-        handleCreate(e) {
-            // console.log("子应用创建了",e)
-        },
-        handleBeforeMount(e) {
-            this.appData = { 
-                type: 'init',
-                vues:{
-                    Vue,
-                    store,
-                    components:{
-                        DialogWrapper,
-                        UserSelect
-                    }
-                },
-                theme: this.themeMode,
-                languages: {
-                    languageList,
-                    languageType,
-                },
-                userInfo: this.userInfo,
-            }
-        },
-        handleMount(e) {
-           
-        },
-        handleUnmount(e) {
-            this.loading = true;
-            window.dispatchEvent(new Event('apps-unmount'));
-            // console.log("子应用卸载了",e)
-        },
-        handleError(e) {
-            // console.log("子应用加载出错了",e.detail.error)
-        },
-        handleDataChange(e) {
-            // console.log('来自子应用 child-vite 的数据:', e.detail.data)
         }
     }
 }

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -1801,11 +1801,7 @@ export default {
             if (!this.dialogData.link_id) {
                 return;
             }
-            if (this.taskId > 0) {
+            this.$store.dispatch("openOkr", this.dialogData.link_id);
-                // 如果当前打开着任务窗口则关闭对话窗口
-                this.$store.dispatch("openDialog", 0);
-            }
-            this.$store.dispatch("openTask", this.dialogData.link_id);
         },
 
         onPrevPage() {
@@ -2439,6 +2435,9 @@ export default {
                     if (target.classList.contains('mention') && target.classList.contains('task')) {
                         this.$store.dispatch("openTask", $A.runNum(target.getAttribute("data-id")));
                     }
+                    if (target.classList.contains('mention') && target.classList.contains('okr')) {
+                        this.$store.dispatch("openOkr", $A.runNum(target.getAttribute("data-id")));
+                    }
                     break;
 
             }

resources/assets/js/store/actions.js

@@ -3401,7 +3401,6 @@ export default {
         })
     },
 
-
     /** *****************************************************************************************/
     /** *************************************** meeting *********************************************/
     /** *****************************************************************************************/
@@ -3432,4 +3431,24 @@ export default {
             meetingid: meetingid
         };
     },
+
+    /** *****************************************************************************************/
+    /** *************************************** okr *********************************************/
+    /** *****************************************************************************************/
+
+    /**
+     * 打开Okr详情页
+     * @param state
+     * @param dispatch
+     * @param link_id
+     */
+    openOkr({state, dispatch}, link_id) {
+        if (link_id > 0) {
+            state.okrWindow = {
+                type: 'okrDetails',
+                show: true,
+                id: link_id
+            };
+        }
+    },
 }

resources/assets/js/store/state.js

@@ -200,5 +200,12 @@ export default {
         show: false,
         type: "",
         meetingid: 0
+    },
+
+    // okr窗口
+    okrWindow: {
+        type: 'okrDetails',
+        id: 0,
+        show: false
     }
 };