自定义控件-监听浏览器切换页签

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

场景

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

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

实现步骤

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

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

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

实现步骤详情

1 编写自定控件

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

代码如下：

(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 新建单据列表模板页面

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

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

2.2新增控件方案：

2.3点击返回数据

2.4复制标识

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

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

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("刷新完成");
        }
    }
}

效果