meixiappmain

项目结构

 |-- lib  ---------------------------------------------打包目录
    |   |-- MeixiOaWebSocket.d.ts
    |   |-- MeixiOaWebSocket.d.ts.map
    |   |-- MessageDispatch.d.ts
    |   |-- MessageDispatch.d.ts.map
    |   |-- MsgModule.d.ts
    |   |-- MsgModule.d.ts.map
    |   |-- RemoveMessageDispatch.d.ts
    |   |-- RemoveMessageDispatch.d.ts.map
    |   |-- appMain.d.ts
    |   |-- appMain.d.ts.map
    |   |-- config.d.ts
    |   |-- config.d.ts.map
    |   |-- demo.html
    |   |-- index.d.ts
    |   |-- index.d.ts.map
    |   |-- meixiappmain.common.js
    |   |-- meixiappmain.umd.js
    |   |-- meixiappmain.umd.min.js
    |   |-- registerWsMs.d.ts
    |   |-- registerWsMs.d.ts.map
    |-- packages   -------------------------包主要目录
    |   |-- MeixiOaWebSocket.js  -----------websock类
    |   |-- MeixiOaWebSocket.ts
    |   |-- MessageDispatch.js  ------------全局消息分发类
    |   |-- MessageDispatch.ts
    |   |-- MsgModule.js -------------------模块消息类
    |   |-- MsgModule.ts
    |   |-- RemoveMessageDispatch.js
    |   |-- RemoveMessageDispatch.ts
    |   |-- appMain.js
    |   |-- appMain.ts
    |   |-- config.js
    |   |-- config.ts
    |   |-- index.js
    |   |-- index.ts
    |   |-- registerWsMs.js
    |   |-- registerWsMs.ts
    |   |-- type.d.ts
    |   |-- component----------------------组件文件夹
    |   |   |-- complaintForm.vue
    |   |   |-- applicationList
    |   |       |-- applicationItem.vue
    |   |       |-- applicationListLeft.vue
    |   |       |-- applicationListWrap.vue
    |   |-- typings
    |       |-- .d.ts
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src

Project setup

npm install

在子系统中注册插件

///在通过接口获取动态路由后需初始化 该插件
// 判断是否是开发还是生产环境
if (process.env.NODE_ENV === 'development') {
    appMain.initDev(process.env.VUE_APP_PRODUCTNAME, process.env.VUE_APP_SYSTEMID, null);
} else {
    appMain.initProduction(process.env.VUE_APP_PRODUCTNAME, process.env.VUE_APP_SYSTEMID, null);
}
//   //通过appMain 注册 meixilayout navBarPlugin 列表
appMain.registerLayout([]).then(res => {
    //如果需要向公告组件注册子组件则调用注册组件
    appMain.registerBulletinComponent([]);
});

///向meixilayout 的navBarPlugin 中注册按钮及点击事件
///具体效果见下面图片
///参数为数组对象 对象属性{
// element组件的icon名字
// icon:'', 
//点击方法
// click:()=>{}}
appMain.registerLayout([])

appMain API

    //注册公告组件
    registerBulletinComponent(bulletinComponent: BulletinComponent[]): void;
    //返回websock实例
    getWebSocket(): MeixiOaWebSocketInterface;
    //设置文档标题
    setDocumentTitle(systemName: string): void;
    //打开选择引用窗口
    openApplicationList(): void;
    //跳转其它引用，参数为url
    jumpApplication(url: any): void;
    // 返回首页
    backHome(): void;
    // 设置系统主题
    setSystemTheme(): void;

如需见下图加载子系统自定义的公告组件

//   //通过appMain 注册 meixilayout navBarPlugin 列表
appMain.registerLayout([]).then(res => {
    //  通过promise 确保消息组件实例化后再注册自定义组件
    //  如果需要向公告组件注册子组件则调用注册组件
    //  参数   [{
    // id:''//对应后段websock 返回的消息类型
    // component:xxxx  //通过import 引入的vue工程文件
    //  }]
    appMain.registerBulletinComponent([]);
});

如需扩展websocket通知类型，参考以下代码

import {MsgModule, messageDispatcher} from 'meiximessage';

class SystemNotifyModule extends MsgModule {
    constructor(params) {
        super(params);
        this.eventList = [
            {
                //后段定义的消息类型
                eventName: 'CHANGE_PERMISSION',
                //  注册回调方法，当收到'CHANGE_PERMISSION'时，执行该方法
                callBack: () => {
                    store.dispatch('user/getInfo');
                },
            },
        ];
    }

    readyNotifyMessage(data) {
        switch (data.exSignalEventEnum) {
            //这里可以对数据做处理
            case 'CHANGE_PERMISSION':
                break;
        }
        //通过事件监听的方法，调用回调方法
        MessageDispatcher.notify(data.exSignalEventEnum, data);
    }

    // 子类构造方法
    registerEventList() {
        this.eventList.forEach((item) => {
            MessageDispatcher.on(`${item.eventName}`, item.callBack);
        });
    }
}

const systemNotifyModule = new SystemNotifyModule({
    //后段定义的消息字段
    eventType: 'PERMISSION',
});

export default systemNotifyModule;