普元EOS-低开页面下拉选择控件加载列表数据

1 前言

普元EOS进行低代码开发页面可以高效提高开发效率，并且减少代码的出错机会。

在低代码开发页面的时候，表单页面中可以使用大量的常用控件。

本文将讲解下拉选择组件的使用。

2 下拉选择使用EOS内置字典作为数据源

下拉选择可从字典作为数据源，如下

该表单页面有一个下拉选择组件，名称为性别

在右侧的操作区域，选择数据来源为：字典

在下方字典类型选择：性别

预览该页面的，可以看到该组件可以选择性别。

3 下拉选择使用数据实体作为数据源

这个更简单，点中下拉选择组件，然后选择数据源为数据实体，然后选择一个数据实体即可。

比如下面的例子选择数据实体 项目 TProject

可以看到，表单页面有一个下拉选择组件，命名为项目

在右侧选择数据来源为：数据实体。

选择绑定实体： TProject 。 这里要注意，TProject需要先创建出来，无论是高开创建的数据实体还是低开创建的数据实体都可以。关于数据实体的概念可以看《普元EOS-数据实体、SDO接口和实现类、DataObject都是什么？》

这里有两个需要手动指定的：值字段和显示字段。

值字段绑定TProject的字段projectCode，这个字段是项目编号，最终表单提交的时候是提交值字段。

显示字段绑定TProject的字段projectName，这个字段是项目名称，下拉选择的时候看到的项目名称就是这个字段的内容。

过滤条件：这里不赘述，以后再补充。

4 自定义下拉选择的数据源

选择自定义后，可以更加灵活的方式加载下拉选择的选项。

低开页面其实是一个vue2页面，因此，这里其实是选择绑定Vue页面中的数据。

本文将重点讲解动态加载API的数据作为数据源

4.1 自定义变量作为数据源

我先讲解一步简单的，这个例子里面直接定义一个静态的变量。下一节我再讲解如何动态加载RestFul的API获取数据，并显示在下拉选择中。

在页面中自定义一个变量，变量是一个数组类型，存储茶叶类型的数据，然后加载在下拉选择中。

最终效果如下：

这个例子的下拉选择组件我设置为自定义的，绑定了变量 v_teaType 

这个变量 v_teaType，我在表单设置 - 高级设置 ，添加了一个变量 v_teaType 

点击新增按钮后，新增一个变量 v_teaType

这个变量默认值为一个JSON格式的字符串，JSON是一个数组，每个元素有两个属性 code 和 name 。 code 将作为值字段，name将作为显示字段。

在低开表单编辑页面中，可以点击编码模式，查看一下页面的源代码。

可以看到，脚本部分其实就是vue2的script部分内容，v_teaType变量在data中被创建出来。

4.2 动态加载API的数据作为数据源

本节讲解如何从API获取茶叶的JSON数据，作为下拉选择的数据源。

临时有事，后期完善。

4.3 存在的问题

使用自定义变量作为数据源加载下拉菜单，新增功能没问题，但编辑回显和列表回显的时候会有问题。EOS在这方面处理还是比较麻烦，需要自己写脚本处理回显。