H5主从表填报

思路

首次填报：通过缓存进行主表明细表一起提交到数据库

非首次填报，比如：从列表点进去进行修改(如审核后拒绝，重新提交) 拆分成两次单表操作：一次是明细表增删改；一次是主表增删改

示例：kemeiji.huiding-cloud.com 数据库:10.6.6.65:3306

select * from lato_template_table_map where m_tableName != '' and m_template_name like '%销售%' 销售订单：主表：t10001_C3004 子表：t10001_C3004_d01

主表列表页

点击查看 tab切换查看不同订单类型 已提交tab可以筛选订单 加号按钮 跳转到新增订单主从表填报页面

主表：t10001_C3004
通过HOS kemeiji.huiding-cloud.com:1088/10001/表单定义/100 得到表字段含义：

新建tab

列表组件 SELECT formId,orderDate,orderNo,customerName,status from t10001_C3004 where status = '新建' order by orderDate desc 查formId是带给下一页，用它查子表的 注意：点击跳转下一页主表填报有很多字段，所以改成 select * 新建tab不用筛选开始结束日期 配置跳转事件，点击列表项跳到 编辑页面 删除按钮事件：(子表也要删除) delete from t10001_C3004 where formId = #{formId} delete from t10001_C3004_d01 where formId = #

已提交tab

列表组件 开始日期、结束日期 列表组件: SELECT formId,orderDate,orderNo,customerName,status from t10001_C3004 where status != '新建' ${sdate} ${edate} order by orderDate desc 注意：点击跳转下一页主表填报有很多字段，所以改成 select * 配置跳转事件, 点击列表项跳到 查看页面 筛选条件

2个tab列表组件 都 启用新增、启用修改，且新增链接都改成：/phonePreview/205/33436 配置 启用新增 加号按钮跳转链接

主从表新增页

结合示例是，订单新增、编辑、详情页，同时操作订单表和其子表 页面上一半填报主表，下一半填报子表

上一半填报主表 如何同时存客户id和客户姓名，参见：下拉框存label val

下一半填报子表 用列表组件，展示多条子表数据

生成子表列表页UI

列表组件，配置数据源，构建子表的页面UI: 注意：子表的数据是缓存在页面里的，不从数据库取，所以生成UI后，需要把之前构建子表UI的数据源清空

子表列表页配置

在页面上多次新增一条条子表数据，不直接存到数据库，只缓存在页面上； 最后点保存，把主表和从表多条记录一起提交数据库

列表定义缓存文件名，用于在页面里保存子表数据 注意：多个主从表填报业务的缓存文件名，不能重名 运行后，列表数据就会从缓存文件里面取，预览效果： 列表显示空，因为还没有这个缓存文件，需要新增缓存文件， 拖一个按钮组件，改名为新增

新增按钮配置

校验事件 跳转事件，跳转到 明细缓存填报页，（如没有该页面，需要先新增页面，并发布） 说明，选择页面下拉框选项很多时，可以直接输入关键字查询

子表新增记录页

新增子表明细表填报页面，起名： 子表新增 销售明细页，页面类型选择：输入表单 销售明细页对应数据库字段： select * from lato_template_table_map where m_tableName != '' and m_template_name like '%销售%' t10001_c3004_d01 HOS: kemeiji.huiding-cloud.com:1088/10001/表单定义/100

构建页面UI

在新建页面时构建页面UI；或复制页面后，在页面设置里 构建页面UI UI效果：

按钮事件配置

页面底部的按钮的事件配置

校验事件

用于校验子表必填字段

临时缓存事件

用于提交写入缓存文件，注意：配置的缓存文件名，需要和上面的配置同名

返回上一页事件

存入缓存后，返回上一页

提示事件

写入缓存失败时提醒

子表新增记录效果

主从表新增 删除子表记录

删除按钮配置 临时缓存 删除事件 注意，这个删除，只删除一条子表记录，演示：

主从表新增 修改子表缓存

把新建子表缓存页复制一份，改名为 明细缓存修改 页面底部的按钮的事件 临时缓存事件 从新增事件 变成 修改事件 点击 主从表新增页 的子表列表项，跳转到子表详情页去修改，配置如下： 主从表填报页的子表 列表组件，启用修改 添加固定跳转事件： 修改效果：

主从表新增 子表缓存统计

在主表填报页的列表组件上方，拖一个容器组件，里面拖一个文字组件 容器组件配置 相同的缓存文件名：powl_xsdd 所需字段：total,orderQuantity total表示缓存记录的总数，其他需要合计的字段用逗号隔开即可自动合计，示例 orderQuantity 容器内的文字组件，绑定total，数据来源为 组件传入 容器内再拖一个文字组件，绑定orderQuantity，数据来源为 组件传入，表示总订单数量 或者复制上一个文字组件，保留数据源设置，只改绑定字段即可 2个文字组件默认值改成0 效果：

主从表新增 底部按钮事件

主从表填报页 尾部拖1-2个按钮

保存提交主表数据

保存按钮，配置 事务处理事件

SQL：INSERT INTO t10001_c3004(latoId,formId,orderNo,...,status) VALUES(#{hosAutoIdName},#{hosAutoIdName},#{orderNo},...,'新建') latoId,formId 赋值为hosAutoIdName是关联主从表记录的; 记得配置计算参数； 如果有需要自动生成的字段，如订单号，需要修改SQL，详见：生成编号

提交按钮，同上，把 新建 改成 已提交

主表 SQL语句只执行一次； 子表，则缓存文件有几条就执行几次，本案例有2条缓存，执行2次

保存提交子表缓存数据 新建一个事务，把之前的缓存的子表数据提交到数据库 注意选择 子表，并输入缓存文件名 SQL：INSERT INTO t10001_c3004_d01(formId,materialId,...,remark) VALUES(#{hosAutoIdName},#{materialId},...,#{remark}) formId 赋值为hosAutoIdName是关联主从表记录的; 记得配置计算参数 提交按钮，同上

事务成功失败提醒事件

成功提醒 效果： 失败提醒

返回上一页事件

保存，提交按钮 都需要配置 返回上一页事件 主从表新增页，事件配置成跳转上一页，在里面选择清楚缓存数据， 否则，第2次点击加号会读取到上一次的缓存记录 主从表编辑、详情页，一般返回上一页事件即可

主从表编辑页

复制主从表新增页，改名为编辑页， 新增按钮跳转不变、列表项跳转不变 新增一个单行文本框，设置隐藏，绑定字段 formId，用于接收从列表页传过来的formId

子表统计容器修改

容器去掉缓存文件名，去掉 所需字段配置； 配置SQL数据源，写SQL查统计数据 select count(1) as total,sum(orderQuantity) as orderQuantity from t10001_c3004_d01 where formId='#{formId}' 1.0 SQL数据源 #参数需要包在单引号里，2.0不需要 1.0需要配置计算参数formId，2.0可省略配置 配置非空校验，避免页面空白闪烁

列表配置修改

去掉缓存文件名，配置SQL数据源: select * from t10001_c3004_d01 where formId='#{formId}' 1.0 SQL数据源 #参数需要包在单引号里，2.0不需要 1.0需要配置计算参数formId，2.0可省略配置 配置非空校验，避免页面空白闪烁

底部按钮事件修改

保存提交按钮 去除子表insert语句，因为不需要把缓存上传数据库了 事务类型从 新增 改成 修改 主表insert语句改成update 新增逻辑中 自动生成的字段，参见：生成编号，修改时不需要，可以去掉

UPDATE t10001_c3004  SET 
  `orderNo` = #{orderNo},
  `orderDate` = #{orderDate},
  `customerId` = #{customerId},
  `customerName` = #{customerName},
  `opname` = #{opname},
  `payment` = #{payment},
  `currency` = #{currency},
  `rate` = #{rate},
  `billType` = #{billType},
  `remark` = #{remark},
  `CustomerOrderNo` = #{CustomerOrderNo}
WHERE
  formId = #{formId}

1.0 事务处理事件 #参数不需要需要包在单引号里，只有查询SQL数据源才需要 别忘了，计算参数formId 配置一下，否则取不到它： 提交按钮 SQL 加 status = '已提交'

子表SQL新增

子表缓存新增页，复制得来 放一个单行文本框，绑定formId，用于接收子表formId 缓存事件，改成insert SQL；返回上一页事件 执行条件改成 手写SQL INSERT INTO t10001_c3004_d01(formId,materialId,materialName,spec,...,remark) VALUES(#{formId},#{materialId},#{materialName},#{spec},...,#{remark}) 记得配置 formId 计算参数

子表SQL修改

子表缓存修改页，复制得来 放一个单行文本框，绑定latoId，用于接收子表latoId 缓存事件，改成update SQL；返回上一页事件 执行条件改成 手写SQL UPDATE t10001_c3004_d01 SET materialId = #{materialId}, ... remark = #{remark} WHERE latoId= #{latoId}; 记得配置 latoId、materialId等 计算参数 注意：不要用formId，不然一次修改，把主表的所有子表全修改了 1.0 手写SQL事件 #参数不需要需要包在单引号里，只有查询SQL数据源才需要

主从表编辑页跳转配置

主从表编辑页，新增按钮跳转事件、列表项跳转事件指过去, 把主表formId带到子表录入页 1.0页面传参功能有BUG，需要用这种方式：打开 是否缓存当前数据

子表删除事件

列表项删除按钮修改，由 临时缓存事件删除，改成数据库删除事件

用主键删

它要求必须用主键，列表组件必须用select latoId ,*** 实测，记录删除后，可以更新子表列表

1.0 用 手写SQL事件、事务处理事件里 写SQL删除子表 delete from t10001_c3004_d01 where latoId=#{latoId} 删除后，都无法更新子表列表，需要配置跳转到本页面实现刷新 2.0 可以配置 刷新事件，实现 删除页，本页面刷新

主从表查看页面

复制编辑页面，这样子表统计信息还是用SQL获取的

查看页修改 改页面标题， 去掉 新增、删除、保存、提交按钮，及保存提交按钮外部容器 去掉子表列表的各个事件

主表列表页，已提交tab 列表跳转事件指向 查看页面