如何使用苍穹PC端单据页面中图片展示控件

如何使用苍穹PC端单据页面中图片展示控件原创

插件开发

前端&控件

闫方亮

5人赞赏了该文章 2363次浏览编辑于2022年04月15日 14:00:09

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

一、需求背景

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

1.2 在图片上显示徽标

二、实现方案

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

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

三、实现过程

需求1:上传图片

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

设计期

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

图1

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

图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();
        }
    }
}

图3

运行期

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

图4

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

图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);
    }