如何实现从页面右侧滑动弹窗

如何实现从页面右侧滑动弹窗原创

页面开发

插件开发

闫方亮

9人赞赏了该文章 1,061次浏览编辑于2023年02月15日 15:14:02

关键词：右侧，滑动弹窗

一、需求

需要弹出页面是从系统右侧滑动弹窗，类似登录页面点击头像弹出页面的效果。

二、思路与方案

在单据列表界面或者单据界面，点击某个按钮，从系统右侧滑动弹窗动态表单或者其他类型的页面，需要在单据界面或者单据列表界面afterBindData方法中提前将需要弹出的页面绑定，在点击事件中进行展示。

三、实现过程

3.1首先通过开发平台创建一个单据页面(kdec_230210)，如下图3.1所示

图3.1

3.2切换列表设计界面，添加一个测试按钮如图3.2所示

图3.2

3.3通过开发平台创建一个需要弹出的页面，示例创建了一个动态表单页面(kdec_dynamic1109)如图3.2所示

图3.3

3.4编写插件类，将插件类注册到单据列表界面的插件如图3.4

public class TestRightPluging extends AbstractListPlugin {

    @Override
    public void registerListener(EventObject e) {
        super.registerListener(e);
        this.addItemClickListeners("kdec_baritemap");
    }

    @Override
    public void afterBindData(EventObject e) {
        super.afterBindData(e);
        Map<String, Object> map = new HashMap<>();
        map.put("direction", "right"); // 弹出方向为右边
        map.put("formId", "kdec_dynamic1109");
        IClientViewProxy proxy = (IClientViewProxy) this.getView().getService(IClientViewProxy.class);
        proxy.addAction(ClientActions.setSlideBillFormId, map);
    }

    @Override
    public void itemClick(ItemClickEvent evt) {
        super.itemClick(evt);
        if("kdec_baritemap".equals(evt.getItemKey())){
            Map<String, String> o = new HashMap<>(1);
            o.put("formId", "kdec_dynamic1109");
            IClientViewProxy proxy = (IClientViewProxy) this.getView().getService(IClientViewProxy.class);
            proxy.addAction(ClientActions.showSlideBill, o);
        }
    }
}