自定义控件-监听浏览器切换页签原创
金蝶云社区-吴锐雄
吴锐雄
6人赞赏了该文章 1,331次浏览 未经作者许可,禁止转载编辑于2021年10月08日 17:43:23


创作不易,如果文章对您有帮助,请为我点击一个朴实无华的赞^_^


场景

用户在浏览器的多个tab中切换,其中的tab就有苍穹的单据列表页面。

当回到苍穹页面时,刷新单据列表。


实现步骤

1 编写自定义控件,监听tab切换,如果当前页面被激活,就回调到苍穹的插件事件上。

2 新建单据列表模板页面,添加自定义控件。

3 单据列表页面用上第2步的单据列表模板,并增加单据列表插件。


实现步骤详情

1 编写自定控件

只需要一个index.js文件即可

image.png

代码如下:

(function(KDApi) {
    function listen_page(model) {
        this._setModel(model)
    }

    listen_page.prototype = {
        _setModel: function(model) {
            this.model = model
        },
        init: function(props) {
            listenCurrentPageChange(this.model)
        },
        update: function(props) {
            // TO DO
        },
        destoryed: function() {
            // TO DO
        }
    }

    function listenCurrentPageChange(model) {
        var hiddenProperty = 'hidden' in document ? 'hidden' :
            'webkitHidden' in document ? 'webkitHidden' :
            'mozHidden' in document ? 'mozHidden' :
            null;
        var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
        var onVisibilityChange = function() {
            if (!document[hiddenProperty]) {
                console.log('页面激活')
                model.invoke('pageShow', '页面激活')
            } else {
                console.log('页面非激活')
            }
        }
        document.addEventListener(visibilityChangeEvent, onVisibilityChange);
    }

    // KDApi注册一个id号,这个id号要和控件方案的id号对应
    KDApi.register('listen_page', listen_page)
})(window.KDApi)


新建单据列表模板页面

2.1新建一个动态表单(动态表单的页面结构参考标准列表bos_list

如下,拖入控件:2个flex面板,分别包裹过滤面板和单据列表,再拖入一个自定义控件,页面结构类似于标准列表。

Image_20211008174153.png


2.2新增控件方案:

image.png

image.png


2.3点击返回数据

image.png


2.4复制标识

Image_20211008174218.png


3 单据列表页面用上第2步的单据列表模板

Image_20211008174234.png


注册插件,用来刷新单据列表

image.png

package kd.ecos.demo;

import kd.bos.form.events.AfterDoOperationEventArgs;
import kd.bos.form.events.CustomEventArgs;
import kd.bos.form.operate.formop.Refresh;
import kd.bos.list.plugin.AbstractListPlugin;

public class DemoListenListPlugIn extends AbstractListPlugin {
    @Override
    public void customEvent(CustomEventArgs e) {
        String eventName = e.getEventName();
        if ("pageShow".equals(eventName)) {
            getView().invokeOperation("refresh");
        }
    }

    @Override
    public void afterDoOperation(AfterDoOperationEventArgs afterDoOperationEventArgs) {
        super.afterDoOperation(afterDoOperationEventArgs);
        if (afterDoOperationEventArgs.getSource() instanceof Refresh) {
            System.out.println("刷新完成");
        }
    }
}


效果

image.png

图标赞 6
6人点赞
还没有人点赞,快来当第一个点赞的人吧!
图标打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!