如何使用向导控件实现电商订单的状态流转原创
范老师加油
15人赞赏了该文章
3,567次浏览
编辑于2022年04月14日 18:52:01
摘要由AI智能服务提供本文介绍了如何使用向导控件来实现电商订单的状态流转功能。订单状态包括下单、付款、发货、收货、完结五种，每个状态完成时需上传图片并点击完成按钮。实现步骤包括：在内容区新建高级面板存储数据，添加向导控件设置图片和完成按钮，编写插件代码以监听控件事件、处理状态变化和图片上传逻辑。插件中定义了状态映射关系，并在点击事件中检查图片上传情况，更新订单状态和记录完成时间。
关键词：向导控件
一、需求
通过向导控件来实现一个电商订单的功能，以状态流转为例,订单有五种状态,分别是下单,付款,发货,收货,完结,每当一个状态想要完成,必须上传一张图片,并点击完成按钮,状态就变化, 等待下一次完成。
二、思路与方案
这是一个典型的向导控件来展示的案例,但是控件只是封装好了前端展示的部件,具体的业务实现,还是需要后台代码配合向导控件来一起实现的。
三、实现过程
步骤1 :在内容区新建高级面板, 在高级面板子容器中加入单据体,在单据体加上记录向导控件要展示的几个字段,单据状态,向导状态,完成时间,图片等,这些数据都是跟控件相关的,设置好了把这个高级面板设为不可见，这个控件主要是用来存数据的,展示是用向导来展示的。
大致布局如下: （具体控件属性可以在附件中下载）
步骤2 : 在内容区添加向导控件, 向导风格设定为横向 ,添加图片和完成按钮,完成按钮上绑定save操作。
步骤3 : 源单上注册插件:编写插件代码。
import java.util.EventObject;
package kd.bos.demo.WizardPlugin;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.EventObject;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import kd.bos.dataentity.entity.DynamicObject;
import kd.bos.dataentity.entity.DynamicObjectCollection;
import kd.bos.dataentity.entity.LocaleString;
import kd.bos.form.container.Wizard;
import kd.bos.form.control.Button;
import kd.bos.form.control.Steps;
import kd.bos.form.control.StepsOption;
import kd.bos.form.control.events.BeforeClickEvent;
import kd.bos.form.control.events.StepEvent;
import kd.bos.form.control.events.WizardStepsListener;
import kd.bos.form.plugin.AbstractFormPlugin;
public class DemoWizardPlugin extends AbstractFormPlugin implements WizardStepsListener {
public void initialize()
{//初始化监听控件
addClickListeners("bidt_buttonap");
Wizard wizard = this.getControl("bidt_wizardap");
wizard.addWizardStepsListener(this);
}
private HashMap statusMap=new HashMap();
{ //初始化单据状态的映射关系
statusMap.put("1", "下单");
statusMap.put("2", "付款");
statusMap.put("3", "发货");
statusMap.put("4", "收货");
statusMap.put("5", "完结");
}
@Override
public void beforeClick(BeforeClickEvent evt) {
//把处理逻辑放在beforeClick上,因为点击上已经有保存操作了
super.beforeClick(evt);
Button button=(Button) evt.getSource();
if (button.getKey().equals("bidt_buttonap")) {
if( this.getModel().getValue("bidt_picturefield")==null||"".equals(this.getModel().getValue("bidt_picturefield"))) {
this.getView().showMessage("必须上传照片！");
evt.setCancel(true);
}else{
//获取当前单据体的内容
DynamicObjectCollection xxrecordentrycollection=this.getModel().getEntryEntity("bidt_entry_detail");
//是否是最后一步的变量
boolean ifEndFlag=true;
for(int k=0;k<xxrecordentrycollection.size();k++) {
DynamicObject entrydata=xxrecordentrycollection.get(k);
//进行中的步骤改成已完成
if("B".equals(entrydata.get("bidt_wizardstatus"))) {
entrydata.set("bidt_wizardstatus", "C");
entrydata.set("bidt_picturefield1", this.getModel().getValue("bidt_picturefield"));
entrydata.set("bidt_finishtime",new Date());
}
//未进行的改成进行中
if("A".equals(entrydata.get("bidt_wizardstatus"))&&ifEndFlag){
entrydata.set("bidt_wizardstatus", "B");
//如果有未进行的改成进行中,则说明不是最后一步
ifEndFlag=false;
//并且把单据状态改成对应的状态
this.getModel().setValue("billstatus", k);
//改完下一条就退出循环
break;
}
}
if(ifEndFlag) {
//所有步骤全部完成，则 都整单完成
this.getModel().setValue("billstatus", "5");
}
this.getView().updateView();
}
}
}
@Override
public void afterBindData(EventObject e) {
super.afterBindData(e);
//获取当前订单状态
String billstatus= (String) this.getModel().getValue("billstatus");
//如果是默认的下单状态就要初始化一下
if("1".equals(billstatus)) {
for (int i=0;i<5;i++) {
this.getModel().setValue("bidt_billstatusfield",i+1,i);
}
this.getModel().setValue("bidt_wizardstatus","B",0);
}
Wizard wizard = this.getControl("bidt_wizardap");
// 获取设计时的步骤条设置
List<StepsOption> stepsOptions = wizard.getStepsOptions();
//初始化步骤条
stepsOptions.clear();
DynamicObjectCollection xxrecordentrycollection=this.getModel().getEntryEntity("bidt_entry_detail");
int i=0;
//设置当前进行到哪步的变量---当前步数,
int currentindex=-1;
//每次进入的时候重置一下页面缓存的当前步数,currentstep这个会在update方法中使用的
if(this.getPageCache().get("currentstep")!=null) {
this.getPageCache().remove("currentstep");
}
for(DynamicObject entrydata:xxrecordentrycollection ) {
StepsOption stepsOption0 = new StepsOption();
String levelobject = entrydata.getString("bidt_billstatusfield");
stepsOption0.setTitle(new LocaleString((String) statusMap.get(levelobject)));
//设置完成时间
Date finishtime=(Date) entrydata.get("bidt_finishtime");
if(finishtime!=null) {
String pattern = "yyyy-MM-dd HH:mm:ss";
SimpleDateFormat simpleDateFormat = new SimpleDateFormat(pattern);
String timeStr=simpleDateFormat.format(finishtime);
stepsOption0.setDescription(new LocaleString(timeStr));
}else {
stepsOption0.setDescription(new LocaleString(" "));
}
//根据不同的单据体内的状态设定不一样步骤状态
if("C".equals(entrydata.get("bidt_wizardstatus"))) {
stepsOption0.setStatus(Steps.FINISH);
i++;
}
else if("A".equals(entrydata.get("bidt_wizardstatus"))){
stepsOption0.setStatus(Steps.PROCESS);
i++;
}else if("B".equals(entrydata.get("bidt_wizardstatus"))) {
currentindex=i;
this.getPageCache().put("currentstep",String.valueOf(currentindex));
i++;
}
stepsOptions.add(stepsOption0);
}
// 更新步骤条设置
wizard.setWizardStepsOptions(stepsOptions);
// 设置当前节点
Map<String, Object> currentStepMap = new HashMap<>();
if(currentindex>=0) {
currentStepMap.put("currentStep", currentindex);
currentStepMap.put("currentStatus", Steps.PROCESS);
this.getModel().setValue("bidt_picturefield", this.getModel().getValue("bidt_picturefield1", i-1));
}else {
currentStepMap.put("currentStep", i-1);
currentStepMap.put("currentStatus", Steps.FINISH);
this.getView().setVisible(false, "bidt_buttonap");
}
// 更新当前节点
wizard.setWizardCurrentStep(currentStepMap);
}
@Override
public void update(StepEvent paramStepEvent) {
// TODO Auto-generated method stub
int stepint = paramStepEvent.getValue();
this.getView().setVisible(true, "bidt_buttonap");
String currentstep = this.getPageCache().get("currentstep");
if(currentstep!=null) {
if(!currentstep.equals(String.valueOf(stepint))) {
this.getView().setVisible(false, "bidt__buttonap");
}else {
this.getView().setVisible(true, "bidt_buttonap");
}
}else {
this.getView().setVisible(false, "bidt_buttonap");
}
this.getModel().setValue("bidt_picturefield", this.getModel().getValue("bidt_picturefield1", stepint));
}
}四、效果图
进入页面后的：
点击完成按钮,自动进入下一步：
逐一完成后,页面的所有单据体完成了：
五、开发环境版本
COSMICV4.0.003.0
六、参考资料
bidt_order (1).zip(6.18KB)
赞 1515人点赞
还没有人点赞，快来当第一个点赞的人吧！
打赏0人打赏
还没有人打赏，快来当第一个打赏的人吧！
推荐阅读