小编推荐

客户在配送、出库等业务操作环节，对于移动端操作的便利性和效率要求越来越高，而目前移动端默认提供的卡片化的展示难以支撑客户批量、便捷操作多项物料的要求，那移动端如何快速实现一屏显示多条数据且便于操作的需求呢？

本期文章为大家带来解决以上问题的一线案例，满足开发人员仅需少量简单开发即可实现以上功能的要求，让我们一睹为快吧。

撰稿人：金蝶-夏天的花生

【温馨提示：因企业业务场景存在不同程度的差异，此案例仅供参考，请根据现场实际业务情况探讨最优解决方案，并在上线前进行充分验证。】

一、业务背景

业务现状 

L集团作为国内知名整车制造公司，其制造车间在日常作业过程中，车间人员均配备了手持移动终端，帮助车间人员快速进行如批量操作零部件的配送、出库、仓库仓位移动等作业；

客户痛点分析

由于配送、出库等操作频繁，移动端数据操作的便利性则成为车间工作人员一大诉求，车间人员在一次终端操作过程中往往需要操作数十项物料，而手持设备限于屏幕大小天然难以满足用户一屏显示多条数据的需求，且由于产品移动端默认UE提供的均是卡片化展示，也难以支撑车间人员便捷地挑选数据进行操作。

客户诉求与期望

那么是否有一种方法，可以在移动端手持终端中提供如PC端列表般便捷挑选、操作数据，提升移动端手持终端设备操作效率、便利性与满意度呢？

二、解决方案

整体实现思路

1、 创建移动版动态表单页面

2、 使用锁定的文本字段来当做每一列的标题

3、 使用单据体作为展示数据的列表，在单据体中增加不显示标题的对应列字段（此时即可达到类似PC端列表展示数据的形式，同时支持数据选中及后续如提交、审核和定制化的功能等开发）

4、 在插件中获取业务单据数据返回单据体完成数据展示（参考代码可见附件）。

关键操作步骤举例

如下以销售订单移动端如何实现类PC表格为例，说明实现步骤。展示效果如图，动态操作展示可见附件

图1 用户可操作的移动端表格

步骤1

路径：    开发服务云-开发平台

新增【销售订单移动列表】移动表单，如图，增加搜索区、过滤区、总计、标题区以及单据体数据展示区，以此构建一个完整的移动端列表。其中，关键要点是在构建单据体数据展示区时，每个字段均由卡片容器布局构成。

关于元数据的绘制详情可导入元数据查看（附件已提供元数据包，注意导入时需修改元数据xml文件的供应商标识）。

图2 销售订单移动列表开发界面

步骤2

路径：开发服务云-开发平台

通过开发表单插件，实现页面搜索、过滤、总计功能，并实现单据体数据绑定、展示功能。参考插件代码可用附件中MobSmSalOrderListPlugin，插件中实现了页面的搜索、过滤、总计以及查询销售订单数据并返回构建单据体展示数据的功能。

图3 插件注册

步骤3

路径：开发服务云-开发平台

如下介绍如何在表格中增加一列，以在移动端中展现表格式列表，实现一屏多显数据的需求：    

以增加【含税】字段为例，在单据体中增加展示字段，步骤如下：

    1）在标题区中增加【含税】的标题。

    2）在单据体中增加【含税】字段，注意字段类型和销售订单实体中的【含税】字段保持一致。

图4 增加【含税】的标题

图5 注意字段类型保持一致

    3）在插件代码销售订单的查询中，增加该字段（参考代码可见附件）。

    4）用查询销售订单返回的数据集构建单据体时，增加对该字段的赋值（参考代码见附件）。

至此即可完成在移动端以传统ERP表格式展示数据的需求，在小屏幕移动设备上也可以实现传统便捷的观感体验。

步骤4

路径：开发服务云-开发平台

接下来介绍如何在上面步骤绘制的表格中，实现用户便捷操作，包括数据选中，点击超链接跳转到表单编辑界面等。

在苍穹4.0.004 及以上版本中，开发平台提供了“移动表格”控件，但其目前只支持浏览数据，尚无法支持用户选择、编辑、超链接跳转，无法给开发人员后台返回数据等。

而本实践方案实际是对框架提供的卡片式展示的一种前端变形改造，天然就拥有卡片式数据的所有能力，包括支持用户选择、编辑、超链接跳转，以及给开发人员后台返回数据等。

因此本步骤无需进行后端代码特殊改造，天然支持现有的移动端能力，整个方案中开发人员聚焦于实现客户的功能诉求实现即可，对项目现场十分便捷、节省成本。

用户操作效果演示

图6 动图演示效果

图7 开始预览用户效果

图8 移动端表格式交互展示

图9 手持设备横屏展示

三、方案的可推广价值

1、该方案主要针对客户想在移动端既可保持传统ERP显示方式，便于数据浏览与数据操作，同时又满足开发人员仅需少量简单开发即可满足功能要求，节省开发成本。

2、文章以列表展示举例，实际如动态表单、单据表格，均可参考此方法，快速开发出能够支持用户操作的移动端表格式交互。

3、此方案不限行业客户，在有手持设备应用需求的客户（如制造业）中尤为居多，均可参考此方案。

四、相关资料

附件资料包：代码包.zip元数据包.zip

附：案例评论有奖活动

我们将每月挑选优质案例评论发放精美奖品，以下形式的评论中奖概率更高哟：

1、分享案例给您带来的启发：这个案例为您当前、进行中或即将开展的项目带来了哪些启发？若您成功将案例中的策略或方法应用到实际项目中，可在评论区分享您的具体应用情况，我们将为您准备额外的奖励。

2、提出案例优化的建议：您认为案例在哪些方面还有改进的空间？您有哪些更好的替代方案或建议？

期待您的案例留言，您的反馈是我们前进的动力~