赠品规则
一、背景
- 配置满足赠送规则的信息
- 页面布局要求特别,需要改变结果,效果如下图
- 请按照下面的步骤开始操作
二、枚举
三、实体
3.1、赠品规则
操作 | 描述 | |||||
---|---|---|---|---|---|---|
名称 | 赠品规则 | |||||
编码 | giftsrule | |||||
表名 | giftsrule | |||||
父实体 | ||||||
引用接口 | 自动编码 | 档案状态 | ||||
属性 | 编码 | 名称 | 类型 | 引用 | ||
name | 规则名称 | 文本 | ||||
giftstype | 规则类型 | 单选 | 赠品类型 | |||
begintime | 开始时间 | 日期时间 | ||||
endtime | 结束时间 | 日期时间 | ||||
fullgiving | 满 | 数值 |
3.2、商品
操作 | 描述 | |||||
---|---|---|---|---|---|---|
名称 | 商品 | |||||
编码 | goods | |||||
表名 | goods | |||||
父实体 | 赠品规则 | |||||
引用接口 | ||||||
属性 | 编码 | 名称 | 类型 | 引用 | ||
product | 商品 | 单选引用 | 物料 | |||
singleprice | 单价 | 数值 | ||||
num | 数量 | 整数 | ||||
totalsprice | 总价 | 数值 |
3.3、赠品
操作 | 描述 | |||||
---|---|---|---|---|---|---|
名称 | 赠品 | |||||
编码 | gifts | |||||
表名 | gifts | |||||
父实体 | 赠品规则 | |||||
引用接口 | ||||||
属性 | 编码 | 名称 | 类型 | 引用 | ||
gifts | 赠品 | 单选引用 | 赠品档案 | |||
num | 数量 | 整数 | ||||
gifts_name | 赠品名称 | 文本 |
3.4、客户
操作 | 描述 | |||||
---|---|---|---|---|---|---|
名称 | 客户 | |||||
编码 | customerdoc | |||||
表名 | customerdoc | |||||
父实体 | 赠品规则 | |||||
引用接口 | ||||||
属性 | 编码 | 名称 | 类型 | 引用 | ||
merchant | 客户档案 | 单选引用 | 客户档案 |
四、 页面建模
4.1、创建一主多子页面-【赠品规则】
勾选参照
效果
发布参照
4.2、调整卡片页面布局一
最终实现如下布局效果
进入【赠品规则】卡片页面设计器,可看到如下页面
点击层级,右键新增一个表格
点击新增的表格,右键添加两个文本框
选中表格,右键点击,打开编辑器如下图修改属性
- splitcontainer
- 左右布局
选中页面模板,右键点击,插入表格
选择新建表格右键点击编辑器,全选复制内容
选中文本框1,右键点击,打开编辑器全选删除,粘贴刚才复制的表格内容
按照下图再修改属性后点击确定
删除无用的表格
4.3、调整卡片页面布局-商品布局
基本布局已经做好了,然后我们开始填充内容
选中多页签-商品-表格商品,右键点击打开编辑器,如下图
全选复制
选中div块,右键打开编辑器,先增加下面内容,然后将内容填充至增加的数组内,如下图
"children":[
]
修改nid,(添加一个字符,确保当前单据唯一,避免删除时联动删除),然后点击确定
效果如下图
调整增行按钮,目标如下图指向
选中多页签-表格商品-工具栏如下图,右键打卡编辑器修改nid(添加一个字符,确保当前单据唯一,避免删除时联动删除)。然后点击确定
选中DIV块-表格商品-工具栏,没有调整至其他控件,说明已经取消和关联关系 选中多页签-表格商品-工具栏下增行按钮,右键点击打开编辑器,全选复制内容
选中div块-表格商品-工具栏,右键新增一个按钮,然后选中,右键打开编辑器,覆盖刚才复制的内容
修改nid(添加一个字符,确保当前单据唯一,避免删除时联动删除),然后点击确定
保存页面设计器,注意一定要保存,如果nid修改不正确,后面操作可能会联动删除。
删除多页签表格下-商品布局
最终效果如下图,建议再保存一次
4.4、调整卡片页面布局-赠品布局
如3.3同样的方式,增加表格赠品值DIV块,步骤会有简化,如果不清晰请再看一下3.3
选中多页签下表格赠品,右键打开编辑器,复制所有内容
选中DIV块,右键打开编辑器,将复制粘贴的内容拷贝朱children下,注意添加“,”,然后点击确定
这时由于复制粘贴的关系,两个表格间由于nid关联了,修改多页签下表格赠品的nid,点击确定
修改多页签下表格赠品工具栏的nid,点击确定
选择多页签下表格赠品,工具栏下增行按钮,右键点击打卡编辑器,全选复制内容
DIV块,表格赠品,工具栏下右键插入按钮,选中按钮,右键打开编辑器将上一步复制的内容覆盖粘贴,点击确定
保存页面设计器,注意一定要保存,如果nid修改不正确,后面操作可能会联动删除。
删除多页签下赠品
4.5、调整卡片页面布局-DIV块调整至左侧
选中左右布局-DIV块,右键打开编辑器,按照下图修改属性
实现效果如下图
4.6、调整卡片页面布局-客户布局
经过上面的布局调整,相信大家已经对这个操作熟悉了 选中多页签下表格客户,右键打开编辑器全选复制内容,选中左右布局文本框2,粘贴复制的内容。修改nid(注意一定要修改哦),点击确定
选中多页签下表格客户,工具栏,修改nid。取消关联 左右布局表格客户,工具栏下增加按钮,选中多页签表格客户增行按钮,右键打开编辑器,全选复制内容,覆盖新增的按钮,点击确定
保存页面设计器,注意一定要保存,如果nid修改不正确,后面操作可能会联动删除。
删除多页签
效果如下图
4.7、调整卡片页面布局-调整样式
调整赠品规则显示格式为一行4列
选中表格客户,增加几个文本框,并修改名称如下图
选中客户档案字段,右侧属性配置参照带入
五、函数扩展
选中编码规则,右侧动作,初始化函数,新增前端函数。点击保存页面设计器
点击配置,填写以下函数 内容可能会有差异,请根据具体请看调整
function (event) {
var viewModel = this;
//商品表格
var gridModelGoods = viewModel.get("goodsList");
//客户表格
var gridModelCustomer = viewModel.get("customerdocList");
//赠品表格
var gridModelGifts = viewModel.get("giftsList");
//设置样式
loadStyle(".split_left {width: 50% !important;min-height:100px !important; }");
loadStyle(".split_right {width: 50% !important;min-height:200px !important; border-left-style:solid;border-left-width:1px;border-left-color:#DCDCDC;}");
loadStyle(".lefttable {min-height: 40% !important;}");
function loadStyle(params){
var headobj=document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
headobj.appendChild(style);
style.sheet.insertRule(params, 0);
}
viewModel.on('afterLoadData',function(params){
//删除边界
var show = document.getElementsByClassName("move_button_left");
show[0].parentNode.removeChild(show[0])
var show = document.getElementsByClassName("show_oLine transverse");
show[0].parentNode.removeChild(show[0])
//给表格增加默认行数据
if(gridModelGoods.getRows().length==0)gridModelGoods.appendRow({});
if(gridModelCustomer.getRows().length==0)gridModelCustomer.appendRow({});
if(gridModelGifts.getRows().length==0)gridModelGifts.appendRow({});
})
//金额计算
gridModelGoods.on('afterCellValueChange',function(params){
var row = gridModelGoods.getRow(params.rowIndex);
if(row.num>0&&row.singleprice>0)gridModelGoods.setCellValue(params.rowIndex, "totalsprice", row.num*row.singleprice)
})
//点击保存会校验必填项,如果校验不过会出现表格空行丢失的现象,导致无法再新增数据
viewModel.on('afterValidate',function(){
if(gridModelGifts.getRows().length==0)gridModelGifts.appendRow({});
if(gridModelGoods.getRows().length==0)gridModelGoods.appendRow({});
if(gridModelCustomer.getRows().length==0)gridModelCustomer.appendRow({});
})
//删行后校验是否为最后一条记录,如果是则预制一条空数据
viewModel.get('btnDeleteRowgoods').on('click',function(params){
if(gridModelGoods.getRows().length==0)gridModelGoods.appendRow({});
})
viewModel.get('btnDeleteRowcustomerdoc').on('click',function(params){
if(gridModelCustomer.getRows().length==0)gridModelCustomer.appendRow({});
})
viewModel.get('btnDeleteRowgifts').on('click',function(params){
if(gridModelGifts.getRows().length==0)gridModelGifts.appendRow({});
})
//规则类型如果不是金额累计和客户,满则不能填写
viewModel.get("giftstype").on('afterValueChange',function(params){
if(params.value.value!=="2"){
viewModel.get("fullgiving").setVisible(false);
viewModel.get("fullgiving").clear();
}else{
viewModel.get("fullgiving").setVisible(true);
}
})
}