③ UI 设计

模块 UI设计 采用可视化拖拽的方式，通过 配置 和 拖选 组件元素，即可轻易的搭建出 人机交互 所需的以下元素:

• 输入表单： 提供数据的录入、编辑等功能。
• 数据查询器：对展示的数据进行过滤的条件。
• 命令栏：
  • 普通操作模式： 设计支持的功能按钮，比如：创建按钮、Excel导入、Excel导出、查询器开关、表字段配置 等。
  • 批量操作模式： 设计支持的功能按钮，比如：批量删除、批量编辑 等。
• 数据表格： 用于显示数据的细节内容，及提供对数据的操作按钮。

设计视图概览

段落标题 设计视图概览

• 区域1： 设计中可以使用的资源组件。
• 区域2： 可以放置 区域1 中拖拉过来组件的区域。
• 区域3： 点击选择区域2 中的对象，在 区域3 面板里可以进行组件属性的配置。

输入表单

段落标题 输入表单

拖拉区域1中的组件至区域2中提示 + 拖放区域 的位置，即可为输入表单添加字段。

字段设置

段落标题 字段设置

点击表单输入对话框中的组件 可以在最右侧 属性设置 窗口对该组件进行属性的设置。

• 标识：一个有意义的英文字符名称，如图中所示 material。

• 名称：一个有意义的英文字符名称，如图中所示 材质。

• 校验规则：勾选开启，则会在输入时候进行对应字段输入值的规则校验。

• 参见 单选分组框 页面，了解更多关于 该字段的设置 的信息。

字段位置

段落标题 字段位置

鼠标移至于下图所示指示图标， 待出现一小手并且按住鼠标左键拖动进行位置的变换。

图层资源

段落标题 图层资源

点击 图层资源 在左侧窗口，可以对不需要的 字段组件进行删除操作。

设计预览

段落标题 设计预览

点击 右上角 预览按钮 可以对设计的效果进行预览。

Web端效果

H5端效果