搭建应用

创建好上述员工信息管理项目后，进入项目开发中，开始搭建应用。

操作步骤

1、页面设计

路径：主页 》选择项目-项目开发 》页面设计

1.1应用框架设计

应用框架设计指的是设计应用的导航菜单，导航菜单可以设置为左侧导航、顶部导航或者左侧导航+顶部导航。
本应用在框架设计中需要：

• 添加两个菜单：员工信息管理、部门管理；

• 添加应用logo；

• 设置导航样式。

  

1.2给应用添加页面

• 在页面列表添加页面员工信息管理、部门管理、新增员工、编辑员工；

• 回到框架设计的菜单设置中给菜单配置跳转页面，实现通过菜单跳转到指定页面。

  

1.3为页面拖拽组件

在佰易开中拖拽页面和设计原型的过程一致，从左侧的组件库中往中间的画布中拖拽组件，可以将组件放置在画布的任意位置。
该应用包含部门管理和员工信息管理两个菜单，两个菜单均包含增删改查四个功能：

1. 部门管理

• 给部门页面拖拽一个form表单组件和一个表格组件，form表单组件用于放置查询条件，表格组件用于展示部门数据；

  

• 拖拽两个对话框，一个设置为新增部门，一个设置为编辑部门；

  

2. 员工信息管理

• 给员工信息管理页面拖拽一个form表单组件和一个表格组件，form表单组件用于放置查询条件，表格组件用于展示员工数据；表格中员工信息包含：姓名、员工号、手机号、身份证号码、性别、出生日期、年龄、入职日期、部门、岗位等字段：

• 给表格组件添加列字段，并给每列的字段设置类型，例如将“姓名”设置为“纯文本”类型，将“出生日期”设置为“日期”类型；

  

• 给新增员工页面拖拽一个form表单组件，往form表单里拖拽表单组件，并设置好属性：

字段	表单组件	属性设置
姓名	输入框	字段类型为纯文本，设置为必填
员工号	输入框	字段类型为纯文本，设置为必填
手机号码	手机输入框	默认国家编码为+86，不允许切换
身份证号码	输入框	字段类型为身份证号码，设置为必填
性别	单选框组	先在数据字典中维护字典项，然后在下拉框的属性面板中的选项中选择数据字典的【性别】
出生日期	日期选择框	日期格式设置为yyyy-mm-dd
年龄	输入框	字段类型为数字
入职日期	日期选择框	日期格式设置为yyyy-mm-dd，设置为必填
部门	下拉框	部门需要从部门表中取值，这里属性面板先不用设置选项，设置为必填
岗位	输入框	字段类型为纯文本

• 编辑员工页面和新增员工的页面元素相同，可以将新增员工页面中的组件复制到编辑员工页面，在编辑员工时，不允许修改【员工号】，将员工号输入框设置为【只读】；

1.4事件配置

静态页面拖拽好之后，还需要通过事件配置让页面动起来。以配置增删改查员工为例：

1. 查询员工：查询员工分为进入页面时就查询全量员工数据和根据查询条件查询员工两种情况：

• 给员工信息管理页面的表格组件配置onLoad事件，用于获取员工数据；

  

• 给查询按钮配置onClick事件，用于根据查询条件查询员工数据。给onClick事件配置执行组件已有动作，意思是点击查询按钮时，就触发一次指定表格的onLoad事件；

  

2. 新增员工：

• 首先给员工信息管理页面的【新增】按钮配置onClick事件，用于实现点击按钮跳转到新增员工页面；

  

• 然后给新增员工页面中的【保存】按钮配置onClick事件，用于实现点击按钮保存页面中录入的员工数据，且保存成功后回到列表页；

  

• 员工字段中的【部门】字段需要从部门表中获取数据。给部门下拉框配置onDropdownOpen事件，用于实现下拉框展开时加载部门数据；

  

3. 编辑员工：

• 首先给员工列表中的【编辑】按钮配置onClick事件，用于实现点击按钮跳转到编辑员工页面，并且需要将所选列表行的员工信息带入编辑页面；

  

• 进入编辑员工页面后，首先需要加载所需要编辑的员工信息。给form表单配置onLoad事件，用于进入页面时加载员工信息；

  

• 修改员工信息后，点击【更新】按钮更新员工信息。给【更新】按钮配置onClick事件，用于实现点击按钮修改保存员工信息，且修改成功后回到列表页；

  

4. 删除员工：

• 在员工信息管理页面的表格组件中给【删除】按钮配置onClick事件，用于实现点击删除选中行的员工；

  

2、业务建模

路径：主页 》选择项目-项目开发 》业务建模

• 根据以上业务，创建员工和部门两个模型。模型字段可通过UI元素添加。
• 创建两个模型的关联关系：员工和部门为多对1的关系，设置两个表的关联字段bumenid作为员工表的外键。
• 模型创建成功后，模型对应的增删改查四个服务也就自动生成了。

3、服务映射

路径：主页 》我的任务

页面、模型和服务都创建好之后，需要通过服务映射将前端页面和后台服务连接起来，实现真实的数据交互。

在页面的事件配置中，获取数据、提交数据、修改数据、删除数据这几个动作会生成对应的开发任务，当后端开发人员完成开发后，进入我的任务中，找到页面事件对应的开发任务，给任务配置服务及字段映射。还是以配置增删改查员工为例：

1. 查询员工：

• 员工信息管理页面中的表格组件配置了onLoad-获取数据。到任务列表中给该任务配置【查询员工】的服务，并配置输入输出参数，查询条件为输入，表格中的当前页数和每页条数为输入，表格中的字段为输出。选择好服务后，下面的字段映射会根据字段名称自动关联。

  
  

2. 新增员工：

• 新增员工页面中的【保存】按钮配置了onClick-提交数据。到任务列表中给该任务配置【新增员工】服务，并配置输入参数，form表单中的字段均为输入，这里不需要配置输出。

  
  

• 新增员工中的部门下拉框配置了onDropdownOpen-获取数据，用于从部门表中获取数据到下拉框的列表中。到任务列表中给该任务配置【查询部门】的服务，部门下拉选项中的标签和值为输出，分别映射到部门表中的部门名称和id。

  

3. 编辑员工：

• 编辑员工页面中的form表单配置了onLoad-获取数据，用于查询员工详细信息。到任务列表中给该任务配置【查询员工】服务，并配置输出参数，form表单中的字段均为输出，这里不需要配置输入。

  
  

• 编辑员工页面中的【更新】按钮配置了onClick-修改数据。到任务列表中给该任务配置【修改员工】服务，并配置输入参数，form表单中的字段均为输入，这里不需要配置输出。

  

• 编辑员工中的部门下拉框配置了onDropdownOpen-获取数据，用于从部门表中获取数据。服务映射配置方法同新增员工页面中的部门。

4. 删除员工：

• 在员工信息管理页面的表格操作列的【删除】按钮配置了onClick-删除数据。到任务列表中给该任务配置【删除员工】服务，因为在事件配置中已经配置了传参，这里就不需要配置输入了；

  
  

4、效果预览