feat：组件共享研究

resources/assets/js/microapp.js

@@ -1,4 +1,5 @@
 import microApp from '@micro-zoe/micro-app'
+import DialogWrapper from "./pages/manage/components/DialogWrapper.vue";
 
 export default function() {
     let urls  = "";
@@ -28,6 +29,7 @@ export default function() {
     // 微应用
     microApp.start({
         plugins: {
+            global: [DialogWrapper],
             modules: modules
         }
     })

resources/assets/js/pages/manage.vue

@@ -565,11 +565,15 @@ export default {
 
                     {path: 'team', name: '团队管理', divided: true},
                     {path: 'approve', name: '审批中心'},
+                    {path: 'okrManage', name: 'OkR管理'},
+                    {path: 'okrAnalyze', name: 'OkR结果分析'},
                 ])
             } else {
                 array.push(...[
                     {path: 'personal', name: '个人设置', divided: true},
                     {path: 'approve', name: '审批中心'},
+                    {path: 'okrManage', name: 'OkR管理'},
+                    {path: 'okrAnalyze', name: 'OkR结果分析'},
                     {path: 'version', name: '更新版本', divided: true, visible: !!this.clientNewVersion},
 
                     {path: 'workReport', name: '工作报告', divided: true},
@@ -771,11 +775,17 @@ export default {
                         this.goForward('index');
                     }
                     return;
-               case 'approve':
+                case 'approve':
                     if (this.menu.findIndex((m) => m.path == path) > -1) {
                         this.goForward({name: 'manage-approve'});
                     }
                     return;
+                case 'okrManage':
+                case 'okrAnalyze':
+                    if (this.menu.findIndex((m) => m.path == path) > -1) {
+                        this.goForward({path: '/manage/microapp/'});
+                    }
+                    return;
                 case 'logout':
                     $A.modalConfirm({
                         title: '退出登录',

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

@@ -540,7 +540,7 @@ export default {
     props: {
         dialogId: {
             type: Number,
-            default: 0
+            default: 1
         },
         msgId: {
             type: Number,
@@ -559,6 +559,9 @@ export default {
 
     data() {
         return {
+
+            dialogId:1,
+
             msgItem: DialogItem,
             msgText: '',
             msgNew: 0,
@@ -651,6 +654,7 @@ export default {
     },
 
     beforeDestroy() {
+        console.log(21123123123123123123)
         this.$store.dispatch('forgetInDialog', this._uid)
         this.$store.dispatch('closeDialog', this.dialogId)
     },

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

@@ -0,0 +1,90 @@
+<template>
+    <div class="page-microapp">
+        <transition name="microapp-load">
+            <div class="microapp-load">
+                <Loading/>
+            </div>
+        </transition>
+        <!-- <div class="messenger-msg" style="width: 500px;position: relative;height: 100%;">
+           <DialogWrapper :dialogId="1"  is-messenger/>
+        </div> -->
+        <micro-app name='micro-app' v-if="microAppUrl && !loading"
+            :url='microAppUrl' 
+            baseRoute="/" 
+            inline 
+            disableSandbox 
+            :data='microAppData'
+            @created='handleCreate'
+            @beforemount='handleBeforeMount'
+            @mounted='handleMount'
+            @unmount='handleUnmount'
+            @error='handleError'
+            @datachange='handleDataChange'
+        ></micro-app>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
+import ProjectDialog from "./components/ProjectDialog.vue";
+import DialogWrapper from "./components/DialogWrapper.vue";
+
+window.DialogWrapper = DialogWrapper;
+// Vue.component('MyComponent', {
+//   // 组件的配置和代码...
+// })
+window.Vue = Vue;
+
+export default {
+    components: { ProjectDialog, DialogWrapper },
+    data() {
+        return {
+            loading: false,
+            microAppUrl: 'http://localhost:5567/',
+            microAppData: { }
+        }
+    },
+
+    deactivated() {
+        this.loading = true;
+    },
+
+    watch: {
+        '$route': {
+            handler(to) {
+                if( to.name == 'manage-microapp' ){
+                    this.loading = false;
+                    window.eventCenterForAppNameVite = new EventCenterForMicroApp("micro-app")
+                }
+            },
+            immediate: true,
+        },
+    },
+
+    methods: {
+        handleCreate(e) {
+            console.log("子应用创建了",e)
+        },
+        handleBeforeMount(e) {
+            console.log("子应用即将被渲染",e)
+        },
+        handleMount(e) {
+            console.log("子应用已经渲染完成",e)
+            this.microAppData =  { 
+                msg: '来自基座的数据' 
+            }
+        },
+        handleUnmount(e) {
+            this.loading = true;
+            console.log("子应用卸载了",e)
+        },
+        handleError(e) {
+            console.log("子应用加载出错了",e.detail.error)
+        },
+        handleDataChange(e) {
+            console.log('来自子应用 child-vite 的数据:', e.detail.data)
+        }
+    }
+}
+</script>

resources/assets/js/pages/manage/test/gggg.js

@@ -0,0 +1,311 @@
+import Vue from 'vue';
+import Modal from './modal.vue';
+import Button from '../button/button.vue';
+import Locale from '../../mixins/locale';
+
+const prefixCls = 'ivu-modal-confirm';
+
+Modal.newInstance = properties => {
+    const _props = properties || {};
+
+    const Instance = new Vue({
+        mixins: [ Locale ],
+        data: Object.assign({}, _props, {
+            visible: false,
+            width: 416,
+            title: '',
+            body: '',
+            iconType: '',
+            iconName: '',
+            okText: undefined,
+            cancelText: undefined,
+            showCancel: false,
+            loading: false,
+            buttonLoading: false,
+            scrollable: false,
+            closable: false,
+            closing: false, // 关闭有动画，期间使用此属性避免重复点击
+            okIng: false,
+            enterOk: false,
+        }),
+        render (h) {
+            let footerVNodes = [];
+            if (this.showCancel) {
+                footerVNodes.push(h(Button, {
+                    props: {
+                        type: 'text'
+                    },
+                    on: {
+                        click: this.cancel
+                    }
+                }, this.localeCancelText));
+            }
+            footerVNodes.push(h(Button, {
+                props: {
+                    type: 'primary',
+                    loading: this.buttonLoading
+                },
+                on: {
+                    click: this.ok
+                }
+            }, this.localeOkText));
+
+            // render content
+            let body_render;
+            if (this.render) {
+                body_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-body ${prefixCls}-body-render`
+                    }
+                }, [this.render(h)]);
+            } else {
+                body_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-body`
+                    }
+                }, [
+                    h('div', {
+                        domProps: {
+                            innerHTML: this.body
+                        }
+                    })
+                ]);
+            }
+
+            // when render with no title, hide head
+            let head_render;
+            if (this.title) {
+                head_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-head`
+                    }
+                }, [
+                    h('div', {
+                        class: this.iconTypeCls
+                    }, [
+                        h('i', {
+                            class: this.iconNameCls
+                        })
+                    ]),
+                    h('div', {
+                        attrs: {
+                            class: `${prefixCls}-head-title`
+                        },
+                        domProps: {
+                            innerHTML: this.title
+                        }
+                    })
+                ]);
+            }
+
+            return h(Modal, {
+                props: Object.assign({}, _props, {
+                    width: this.width,
+                    scrollable: this.scrollable,
+                    closable: this.closable,
+                    enterOk: this.enterOk
+                }),
+                domProps: {
+                    value: this.visible
+                },
+                on: {
+                    input: (status) => {
+                        this.visible = status;
+                    },
+                    'on-cancel': this.cancel
+                }
+            }, [
+                h('div', {
+                    attrs: {
+                        class: prefixCls
+                    }
+                }, [
+                    head_render,
+                    body_render,
+                    h('div', {
+                        attrs: {
+                            class: `${prefixCls}-footer`
+                        }
+                    }, footerVNodes)
+                ])
+            ]);
+        },
+        computed: {
+            iconTypeCls () {
+                return [
+                    `${prefixCls}-head-icon`,
+                    `${prefixCls}-head-icon-${this.iconType}`
+                ];
+            },
+            iconNameCls () {
+                return [
+                    'ivu-icon',
+                    `ivu-icon-${this.iconName}`
+                ];
+            },
+            localeOkText () {
+                if (this.okText) {
+                    return this.okText;
+                } else {
+                    return this.t('i.modal.okText');
+                }
+            },
+            localeCancelText () {
+                if (this.cancelText) {
+                    return this.cancelText;
+                } else {
+                    return this.t('i.modal.cancelText');
+                }
+            }
+        },
+        methods: {
+            cancel () {
+                if (this.closing) return;
+                this.$children[0].visible = false;
+                this.buttonLoading = false;
+                this.onCancel();
+                this.remove();
+            },
+            ok () {
+                if (this.closing) return;
+                if (this.loading) {
+                    this.buttonLoading = true;
+                } else {
+                    this.$children[0].visible = false;
+                    this.remove();
+                }
+
+                this.okIng = true;
+                const call = this.onOk();
+                if (call && call.then) {
+                    call.then(() => {
+                        this.$children[0].visible = false;
+                        this.remove();
+                    }).catch(() => {
+                        this.buttonLoading = false;
+                    }).finally(_ => {
+                        this.okIng = false;
+                    });
+                } else {
+                    this.okIng = false;
+                }
+            },
+            remove () {
+                this.closing = true;
+                setTimeout(() => {
+                    this.closing = false;
+                    this.destroy();
+                }, 300);
+            },
+            destroy () {
+                this.$destroy();
+                if (this.$el) {
+                    try {
+                        if (this.append && typeof this.append === 'object') {
+                            this.append.removeChild(this.$el);
+                        } else {
+                            document.body.removeChild(this.$el);
+                        }
+                    } catch (e) {
+
+                    }
+                }
+                this.onRemove();
+            },
+            onOk () {},
+            onCancel () {},
+            onRemove () {}
+        }
+    });
+
+    const component = Instance.$mount();
+    if (_props.append && typeof _props.append === 'object') {
+        _props.append.appendChild(component.$el);
+    } else {
+        document.body.appendChild(component.$el);
+    }
+    const modal = Instance.$children[0];
+
+    return {
+        show (props) {
+            modal.$parent.showCancel = props.showCancel;
+            modal.$parent.iconType = props.icon;
+
+            switch (props.icon) {
+                case 'info':
+                    modal.$parent.iconName = 'ios-information-circle';
+                    break;
+                case 'success':
+                    modal.$parent.iconName = 'ios-checkmark-circle';
+                    break;
+                case 'warning':
+                    modal.$parent.iconName = 'ios-alert';
+                    break;
+                case 'error':
+                    modal.$parent.iconName = 'ios-close-circle';
+                    break;
+                case 'confirm':
+                    modal.$parent.iconName = 'ios-help-circle';
+                    break;
+            }
+
+            if ('width' in props) {
+                modal.$parent.width = props.width;
+            }
+
+            if ('closable' in props) {
+                modal.$parent.closable = props.closable;
+            }
+
+            if ('title' in props) {
+                modal.$parent.title = props.title;
+            }
+
+            if ('content' in props) {
+                modal.$parent.body = props.content;
+            }
+
+            if ('okText' in props) {
+                modal.$parent.okText = props.okText;
+            }
+
+            if ('cancelText' in props) {
+                modal.$parent.cancelText = props.cancelText;
+            }
+
+            if ('onCancel' in props) {
+                modal.$parent.onCancel = props.onCancel;
+            }
+
+            if ('onOk' in props) {
+                modal.$parent.onOk = props.onOk;
+            }
+
+            // async for ok
+            if ('loading' in props) {
+                modal.$parent.loading = props.loading;
+            }
+
+            if ('scrollable' in props) {
+                modal.$parent.scrollable = props.scrollable;
+            }
+
+            if ('enterOk' in props) {
+                modal.$parent.enterOk = props.enterOk;
+            }
+
+            // notice when component destroy
+            modal.$parent.onRemove = props.onRemove;
+
+            modal.visible = true;
+        },
+        remove () {
+            modal.visible = false;
+            modal.$parent.buttonLoading = false;
+            modal.$parent.remove();
+        },
+        component: modal
+    };
+};
+
+export default Modal;

resources/assets/js/pages/microapp.vue

@@ -1,7 +0,0 @@
-<template>
-    <div>
-        <div>
-            <micro-app name='micro-app' url='http://127.0.0.1:5567/' baseroute='/'></micro-app>
-        </div>
-    </div>
-</template>

resources/assets/js/routes.js

@@ -39,6 +39,11 @@ export default [
                 path: 'approve/details',
                 component: () => import('./pages/manage/approve/details.vue'),
             },
+            {
+                name: 'manage-microapp',
+                path: 'microapp/*',
+                component: () => import('./pages/manage/microapp.vue')
+            },
             {
                 name: 'manage-setting',
                 path: 'setting',
@@ -167,10 +172,5 @@ export default [
         name: '404',
         path: '*',
         component: () => import('./pages/404.vue')
-    },
+    }
-    {
-        path: '/microapp/*',
-        name: 'microapp',
-        component: () => import('./pages/microapp.vue')
-    },
 ]

resources/assets/sass/pages/_.scss

@@ -9,4 +9,5 @@
 @import "page-setting";
 @import "page-index";
 @import "page-approve";
+@import "page-microapp";
 @import "components/_";

resources/assets/sass/pages/page-microapp.scss

@@ -0,0 +1,9 @@
+.page-microapp {
+    .microapp-load{
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        height: 90%;
+    }
+}
+