1、主线业务流程
1.1、采购业务流程
采购业务流程图
1.2、类图设计
1.3、表结构分析
(1)订单与明细
(2)商品库存与变更记录
2、采购申请
2.1、需求分析
选中供应商,可添加多个采购的商品,自动计算每种商品的金额,显示和计算总计金额。选择商品后自动显示采购价格,录入数量后,金额自动计算,合计数自动统计。删除商品后,合计数自动更新。
提交数据成功后清空供应商和采购的商品列表
2.2、难点分析
-
如何实现可编辑的数据表格?
-
如何在数据表格中嵌入一个下拉的列表?
-
如何实现数据表格的自动计算?
-
怎么在下拉选择后自动读出数据,修改其它单元格?
-
如何实现数据表格合计数统计?
-
怎么移除一行?
-
如何实现表单与表格数据的提交?
-
怎么实现订单主表与从表(明细表)的同时保存?
-
如何实现下拉的数据表格?
2.3、代码实现
(1)页面搭建
创建orders_add.html
创建orders_add.js
由于我们的数据不来自于后台,而是用户前端录入的,因此我们不需要url属性:
页面效果如下
动态增加行
可以使用datagrid的appendRow方法,动态级表格添加行,详细见API文档。添加行后给数量和总额设置默认值0
给增加的handler加入方法体内容:
可编辑的datagrid
查看easyui datagrid api文档,需要给column列加上editor属性
修改datagrid下的columns列定义,加上editor:
这时刷新页面,点击“添加”新增一行后还是无法编辑。
这是为什么呢?原来还需要开启编辑状态
开启编辑。查看easyui API 文档,datagrid的方法中:
如果我们只要在新增的行开启编辑状态,而其它行进入关闭编辑状态呢,怎么做?
首先,需要定义一个全局变量existEditIndex,用来保存当前进入编辑状态的行的索引,初始值为-1,表示当前没有行进入编辑状态。
当其它行进入编辑状态的时候,把原有的行置为关闭编辑状态,这时就用existEditIndex;新的行进入编辑状态的时候就把existEditIndex设为最新编辑行的索引。
效果如下
如何实现在点击某一行的时候就行进入编辑状态?
查看文档datagrid有onClickRow事件,有2个参数,其中一个是rowIndex为单击行的索引。我们来添加onClickRow事件
运行结构如下
表格中的下拉列表
给“商品名称”列加上editor,类型为combobox
运行结果如下
给表格中的单元格赋值
当选择某个商品时,如何自动显示“商品编号”跟“价格”呢?
查看API文档,我们可以看到combobox有个onSelect的事件
参数record就是我们选中的商品数据信息,那我们就可以获取“商品编号”跟“价格”了。
我们再查看API文档,找到datagrid里有个getEditor的方法:
取得编辑器后还可以给编辑器赋值。因此我们的代码实现代码如下:
封装我们自定义的获取当前编辑行编辑器方法getEditor如下:
给“商品编号”添加编辑器,并设置为不可编辑状态
添加onSelect事件:
运行结果如下
计算金额
我们先来添加一个按钮,测试一下计算总额,单击事件调用calculate方法来计算总额,把计算后的值赋给“总额”列:
orders_add.html添加按钮:
orders_add.js添加cal方法,我们来测试一下,提取出“数量”:
测试结果
修改cal方法:
运行结果
小数处理:
如果我们设置editor为numberbox,默认为整数。如果我们要进行小数运算,需要修改 价格和金额的编辑器如下:
编辑框绑定事件
我们来实现当输入数量的时候自动计算金额,我们可以给输入框绑定keyup事件,触发时调用,代码如下:
选中商品的时候,调用绑定方法:
删除orders_add.html里的测试按钮
运行结果
删除行
给orders_add.js添加删除行的方法:
给datarid的columns增加一列,显示“操作”,给“操作”列添加删除超链接
合计数统计
添加合计页脚
如何给datagrid表格加上行脚用于显示“合计”呢?
查看API文件,datagrid中有个showFooter的属性
那我们就给datagrid加上showFooter:true。
刷新之后并没有显示行脚,怎么办呢?
我们继续查看API文档,找到datagrid的方法中有个叫reloadFooter的方法,方法的参数是一个数组,跟datagrid的loadData方法类似,数组里元素的定义跟datagrid的columns是一样的,那我们就来构造合计的数据,并调用reloadFooter方法来加载合计的内容。
我们在表格初始化下方加入代码:
运行结果如下
去掉页脚的“删除”,修改“操作”的formatter方法代码如下
运行结果
自动计算合计
实现思路:循环读取每个单元格里的价格和数量,再把它们相乘,最扣累加直来
首先我们来写一个计算所有商品合计金额的方法sum
在选中商品的事件中,加上合计方法
接着我们在绑定事件的方法里也绑上这个sum方法,修改bindGridEditor方法:
我们会发现,当金额单元格处理编辑状态时无法获取到值,如何解决这个问题呢??? 我们可以修改cal方法,最好加上一句:
删除行的时候,也需要更新合计
运行结果
(2)供应商实现下拉表格
查看API文档,找到combogrid控件,我们可以看到有个应用的例子,看起来它的使用方式跟datagrid很相似。
那我们使用这个例子来做吧
Orders_add.html添加:
我们就在初始化方法里添加这个combogrid的加载,把supplier.html里的columns复制过来,修改代码如下:
运行效果
(3)提交数据到后端
我们可以将表格中的数据转换成JSON格式的字符串,再提交给后台。提交前要对表格中的内容做一个简单的校验,以确认数据的有效性。我们在“提交”菜单按钮的事件中来实现:
前端实现
校验
后端实现
修改OrdersAction添加json属性,用来接收商品明细的JSON字符串
在OrdersAction中重写交类BaseAction的add方法,如下:
控制台输入一下提交过来的JSON字符串,检查商品明细内容是否完整
添加订单与订单明细的关联关系
修改Orders实体类,增加订单状态和订单类型的常量定义
修改Orders实体类,增加订单明细
修改orders.hbm.xml,配置级联更新:
修改Orderdetail实体类,把ordersuuid替换成Orders,增加明细状态的常量定义:
修改Orderdetail.hbm.xml,删除ordersuuid配置跟Orders的关系:
修改OrdersAction中的add方法,改成如下代码:
(4)保存订单的业务逻辑
修改OrdersBiz,重写add方法:
3、双向关联引发问题解决
在建立订单和订单明细的双向关联后,订单列表无法正常显示,通过调试控制台信息可以看到,输出json的action报错
原因分析:这是因为fastJson在转换成字符串时反复的循环调用其属性造成的死循环。
解决方案:在Orderdetail实体里给orders属性加上注解
4、总结
4.1、easyUI
(1)Datagrid
(2)Combogrid
(3)combobox
(4)numberbox
4.2、Jquery
4.3、JS
4.4、fastJson
4.5、Hibernate
级联保存与inverse的应用
<!-- 级联保存及inverse应用 -->
<bag name="orderDetails" order-by="uuid" cascade="save-update" inverse="true">
<key column="ordersuuid"></key>
<one-to-many class="cn.itcast.erp.entity.Orderdetail"/>
</bag>