蓝云ERP系统项目笔记——采购申请（5）

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的应用

 4.6、项目经验

1)    http提交数据到后台，提交的都是字符串。对数组数据的提交，先转成字符串，后台接收后再把它们转换成对象数组。
2)    修改js或css文件后，浏览器可能没有及时更新，可以通过删除浏览器的缓存解决问题。运行的时候可以打到开发者工具，查看相应的js/css文件是否是最新的。
3)    涉及到金额时，要用double类型来接收数据，不能用整型，否则会丢失数据的真度，小数点后的数字将被自动忽略掉