如何使用苍穹PC端单据页面中图片展示控件原创
金蝶云社区-闫方亮
闫方亮
5人赞赏了该文章 2,901次浏览 未经作者许可,禁止转载编辑于2022年04月15日 14:00:09
summary-icon摘要由AI智能服务提供

本文介绍了在苍穹平台上实现图片上传及在图片上显示徽标的功能。具体步骤包括在页面设计期添加图片展示控件,通过插件编写上传监听和点击监听接口实现图片上传,并重写afterUpload事件以在图片上添加徽标。实现过程中,需启动苍穹的文件服务,并注册插件到页面插件中。最后,展示了实现效果和开发环境版本等注意事项。

关键词: 图片展示控件、上传图片、显示徽标


一、需求背景

        1.1 需要在页面上包含上传图片的功能

        1.2 在图片上显示徽标

二、实现方案

        2.1苍穹平台单据页面内置了图片控件,可在设计页面的时候添加图片控件,再配合页面的插件实现点击监听、上传监听接口重写点击、上传事件实现上传图片功能。注意:一定要启动苍穹的文件服务

        2.2显示徽标重写afterUpload事件进行实现

三、实现过程  

需求1:上传图片

       先在页面设计期中添加图片展示控件,打开允许点击开关,设置界面显示的默认图片。然后通过注册插件调用后台的上传动作的代码为图片控件绑定对应的url进行页面上修改显示图片


设计期

  1. 界面添加图片展示控件如图1所示

image.png

图1

    2.设置图片展示控件的属性进行保存如图2所示

image.png

图2

    3.编写插件类并注册到页面插件中如图3所示

public class PictureControlPluginTest extends AbstractFormPlugin implements UploadListener, ClickListener {

    public static final String IMAGE_COTROL="kdec_imageap"; //图片展示控件的标识

    //通过upload方法显示上传的图片
    @Override
    public void upload(UploadEvent evt) {
        System.out.println(IMAGE_COTROL);
        UploadListener.super.upload(evt);
        Control control = (Control) evt.getSource();
        if(IMAGE_COTROL.equals(control.getKey())){
            Object[] urls=evt.getUrls();
            if(urls.length>0){
                String url= UrlService.getImageFullUrl((String)((Map<String,Object>) urls[0]).get("url"));
                Image image=this.getView().getControl(IMAGE_COTROL);
                image.setUrl(url);
            }
        }
    }


    //弹出选择上传图片框
    public void showPictureUpload(){
        UploadOption uploadOption=new UploadOption();
        uploadOption.setMultiple(false);
        uploadOption.setTitle(ResManager.loadKDString("上传照片jpg/png","ImageControlFormPlugin_1","kdec-demo-plugin"));
        uploadOption.setSuffix(".jpg,.png,.JPG,.PNG");
        uploadOption.setLimitCount(1);
        this.getView().showUpload(uploadOption,IMAGE_COTROL);
    }

    
    //注册监听事件,监听点击跟上传事件
    @Override
    public void registerListener(EventObject e) {
        super.registerListener(e);
        // 1.注册监听
        Image image = this.getView().getControl(IMAGE_COTROL);
        image.addClickListener(this);
        image.addUploadListener(this);
    }

    //点击图片展示控件
    @Override
    public void click(EventObject evt) {
        super.click(evt);
        Control control = (Control)evt.getSource();
        String key = control.getKey();
        if (IMAGE_COTROL.equals(key)) {
            // do some cool thing...
            showPictureUpload();
        }
    }
}

333.png

图3

运行期

  1. 通过预览界面点击图片展示控件会弹出一个图片上传的选择框如图4所示

image.png

图4

    2.点击上传图片效果如下图5所示

image.png

图5

需求2:图片上设置徽标

         在上传图片完成后,重写afterUpload()事件方法进行添加图片右上角徽标,在上面插件类代码中添加重写的方法,设置徽标显示的位置数量等属性

//实现显示徽标
    @Override
    public void afterUpload(UploadEvent evt) {
        UploadListener.super.afterUpload(evt);
        Image image=this.getView().getControl(IMAGE_COTROL);
        BadgeInfo info=new BadgeInfo();
        info.setOverflowCount(99);
        info.setCount(5);
        info.setOffset(new String[]{"-5px","-5px"});
        info.setDot(false);
        image.setBadgeInfo(info);
    }

四、效果图

        需求1实现效果图如图6所示

image.png

图6

        需求2实现效果图如图7所示

image.png

图7

五、开发环境版本

        不限,本样例采用的轻量级环境,版本是: 苍穹版本号 COSMICV4.0.014.0  星瀚版本号 CONSTELLATIONV4.0.014.0

六、注意事项

        本案例是图片展示控件的使用,不是图片字段在开发过程中一定要启动对应环境中苍穹的文件服务,windows环境中的是start-fileserver.bat

七、参考资料

开发平台

学习成长中心

参考附件中的代码补丁

  1. 元数据直接在开发平台导入

  2. 源代码直接在开发工具idea/eclipse中导入



                                    

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