Code First 开发教程

以下教程演示了代码优先（Code First）方法。 有关使用数据库优先（DB First）方法的教程，请参阅 DB First 开发教程。

创建天气预报系统（快速入门）

本教程旨在让用户迅速上手，了解 SnapDevelop 的可视化设计器的基本功能和界面。因此本教程只介绍 SnapDevelop 的可视化设计器的核心功能，进行简单的操作演示，帮助您完成基本任务。如需更多帮助，请参考 SnapDevelop 的其他用户文档。

本教程将引导用户使用 SnapDevelop 的可视化设计器快速创建一个天气预报的数据维护场景（前端为 Vue Web 页面，后端为 C# Web API）。

在演示过程中，将选择 Vue Web 应用程序（无示例） 项目类型从零开始创建应用程序。

创建设计器项目

步骤 1：创建一个 Vue Web 应用程序设计器项目。

1. 从 IDE 中选择菜单 文件 > 新建 > 新建项目，选择 设计器开发 选项卡； 然后选择 Vue Web 应用程序（无示例） 并单击 下一步。

   

2. 将 名称 设置为 WeatherForecastDemo，然后单击 创建。

   该项目显示在解决方案资源管理器中。

   

创建枚举和实体

步骤 1：创建一个枚举文件

用于表示天气状况：晴天、雨天、雪天、多云、大风。

1. 从 IDE 中选择菜单 项目 > 新建项，选择 枚举设计，指定名称为 WeatherState，点击 创建。

   

2. 在 WeatherState 枚举中，添加以下字段：

   

步骤 2：创建一个实体文件

用于表示天气预报所需的基本信息：城市(地点)、时间、天气状况、温度等，并生成 Web API 后端所需的增删改查服务 。

第 1 步：从 IDE 中选择菜单 项目 > 新建项，选择 实体设计（从零开始），指定名称为 WeatherForecast，点击 创建。

第 2 步：在 WeatherForecast 实体中，添加以下字段：

1. 将 Id 字段设置为 主键，在右边 属性设置 选项卡中设置其 默认值 为表达式：NewGuid() 。（①）
2. 设置 City 为 必要 字段（②），在右边 属性设置 选项卡中指定其 长度 最大值为 20。
3. 设置 ForecastDate 为 必要 字段。（③）
4. 设置 StartTime 和 EndTime 为 可空 字段。（④）
5. 设置 WeatherState 字段类型为刚添加的枚举类型 WeatherState，并选中 可空。（⑤）
6. 设置 Temperature 为 必要 字段。（⑥）
7. 设置 Summary 为 可空 字段（⑦），在右边 属性设置 选项卡中指定其 长度 最大值为 300。
8. 其他字段类型请参考图片。

第 3 步：在 WeatherForecast 实体中，添加一个过滤器，用于通过城市和/或天气状况过滤数据。

1. 在 过滤器设计 选项卡，点击 添加过滤器。（①）

2. 设置 过滤器名称 为 CityFilter。（②）

3. 点击 新增参数，增加两个参数：City 和 WeatherForecast。（③）

4. 设置 WeatherForecast参数值为枚举 WeatherState，并选中 集合。（④）

5. 点击 新增过滤项（⑤），添加两个字段：WeatherForecast.City 和 WeatherForecast.WeatherState。

6. 设置 WeatherForecast.City 字段值为刚新增的参数 City，设置 WeatherForecast.WeatherState 字段值为刚新增的参数 WeatherForecast 。（⑥）

   

第 4 步：在 WeatherForecast 实体设计器中，添加 API 服务。

1. 在 服务与API设计 选项卡，点击 添加基础服务 自动生成基础服务。

   

2. 点击 添加服务 > 获取分页数据 > CityFilter，生成查询服务 GetPageByCityFilter。

   

至此，天气预报程序的后端服务设计完成，你可以生成项目，通过 Swagger UI 测试后端的增删改查服务。

创建视图

步骤 1：创建四个视图文件

用于数据增删改查的前端页面展示。

1. 首先在解决方案资源管理器的项目中新增一个目录，用于存放这些视图文件。（注意：文件夹名字必须为英文，否则运行时会报错）

   

2. 然后，从 IDE 中选择菜单 项目 > 新建项，选择 视图设计（基于模板），指定名称为 CreatePage，点击 下一步。

3. 选择 WeatherForecast 实体，选择 表单页面，点击 创建。第一个视图文件 CreatePage 创建成功。

   

4. 重复以上步骤创建第二个视图文件：UpdatePage。

5. 创建第三个视图文件：DetailPage。不同于前面两个文件，这个文件需要选择 详情页面 视图模板。

   

6. 创建第四个视图文件：ListPage。这个文件需要选择 表格页面 视图模板。

   

步骤 2：配置视图文件

CreatePage 和 DetailPage 视图

使用默认设置即可。

UpdatePage 视图

1. 打开 UpdatePage 视图，在左边大纲树中选择 页面，然后在右侧 属性 选项卡的 页面/组件参数 中添加名称为 Forecastid 的参数。设置 标题 为 天气。

   

2. 在左边大纲树中选择 表单容器，然后在右侧 属性 选项卡中，修改 加载数据 为 WeatherForecast 实体的 Get 接口，将参数 Id 的值指定为刚创建的页面参数 Forecastid，修改 提交数据 为 WeatherForecast 实体的 Update 接口（默认为 Add）。（弹出“是否更新表单项”，选“否”。）

   

ListPage 视图

1. 在 ListPage 视图 UI 中，选中 添加 按钮，然后在右侧的 事件 选项卡中，选择 操作类型 为 新页面，选择 页面 为 CreatePage 视图。

   

2. 在 ListPage 视图 UI 中，选中 编辑 按钮，然后在右侧的 事件 选项卡中，选择 操作类型 为 新页面，选择 页面 为 UpdatePage 视图。设置 Forecastid 参数值为 成员变量 模式：表格容器 > 当前行数据 > Id。

   

3. 在 ListPage 视图 UI 中，选中 详情 按钮，然后在右侧的 事件 选项卡中，选择 操作类型 为 新页面，选择 页面 为 DetailPage 视图。设置 Id 参数值为 成员变量 模式：表格容器 > 当前行数据 > Id。

   

4. 在 ListPage 视图左边的 大纲树 中选中 表格容器，在右边 属性 选项卡的 加载数据 中，将 City 过滤参数的值设置为 成员变量 模式：文本输入框 > 绑定值，将 WeatherForecast 过滤参数的值设置为 成员变量 模式：下拉框 > 绑定值。

   

步骤 3：关联视图文件到导航页面

1. 双击 Layout.sdv 文件打开导航视图。

2. 在 菜单布局 的 属性 选项卡的 菜单 中，点击 添加项，新增菜单项：天气，值为 ListPage 视图。

   

至此，天气预报程序的前后端功能设计完成，你可以生成和运行项目查看前后端交互效果。

生成及运行项目

第 1 步：从设计项目生成代码和项目。

在解决方案资源管理器中，右键单击项目节点，然后选择 生成项目 > Profile。

生成以下项目：

第 2 步：运行项目。

运行 WeatherForecastDemo.WebApi 项目以启动 Web API。

Web API 启动成功：

当 Web API 启动时，将自动生成数据库文件（data.db）。

当 Web API 成功运行后，您将看到 Swagger UI 并且能够在 Swagger UI 上测试基本 API 和过滤器 API（注意：如果https访问受限，可以尝试使用http，如下图）。

启动 Web API 后，可以运行 WeatherForecastDemo.Vue 项目启动 Vue Web 应用程序。

应用运行后，点击导航栏中的 天气 菜单， 在右边页面中体验增删改查数据功能。

优化视图 UI

接下来，我们对每个视图 UI 做一些初步的优化（主要是界面布局和视觉效果），以提升用户的使用体验。你可以根据需要和喜好进一步进行调整和优化，以达到最佳效果。

CreatePage 视图

CreatePage 视图的默认 UI 如下。我们接下来做三处优化：

1. 将 ForecastDate、StartTime、EndTime 三个数据项合并成一个项。
2. 将 WeatherState 的下拉框组件，改为单选框组。
3. 在 Temperature 的数字框后显示温度后缀℃。

1. 将 ForecastDate、StartTime、EndTime 三个数据项合并成一个项。

   1. 删除 StartTime 和 EndTime 表单项。注意选中 表单项 后，选择最后一个图标删除表单项。

      

   2. 删除 ForecastDate 字段的 日期选择器。

      

   3. 从物料库中选中 组合，并拖拽到 ForecastDate 字段指示处。

      

      拖拽完成后，将看到 组合 组件。

      

   4. 依次将 日期选择器、时间范围 组件拖拽到 组合 中。

      

   5. 在左边大纲树中选中 组合，在右边 属性 选项卡中选中 自适应。使得组合中的组件根据组合宽度自动调整最佳大小。

      

   6. 为新增的组件绑定数据列：日期选择器 与 ForecastDate 字段进行数据绑定，值格式 设置为 YYYY-MM-DD，时间范围 中的 开始时间 与 StartTime 字段绑定，结束时间 与 EndTime 字段绑定。

      

2. 将 WeatherState 的下拉框组件，改为单选框组。

   1. 删除 WeatherState 的下拉框组件。

      

   2. 从左边物料库中选中 单选框组，并拖拽到 WeatherState 字段指示处，然后在右边 属性 选项卡中点击 点击编辑JSON。

      

   3. 在 JSON 对话框中选择 WeatherState 枚举。

      

   4. 在 数据绑定 中选择 WeatherState，初始值 选择 Sunny。

      

3. 在 Temperature 的数字输入框后显示温度单位 ℃。

   选中 Temperature 的数字输入框，在 属性 选项卡中的 后置标签 中输入 ℃。

   

UpdatePage 视图

UpdatePage 视图和 CreatePage 视图类似，可以先参照 CreatePage 视图进行优化，然后再做以下优化：

1. 去掉 WeatherState 的初始值设置，因为 UpdatePage 视图会从数据库中取值。

   

2. 将 City 设置为禁止编辑。

   

DetailPage 视图

DetailPage 视图的默认 UI 如下。我们接下来做三处优化：

1. 将 ForecastDate、StartTime、EndTime 三个数据项合并成一个项。
2. 调整 Summary 的占列。
3. 设置 WeatherState 不同枚举值的标签显示不同的颜色。

1. 将 ForecastDate、StartTime、EndTime 三个数据项合并成一个项。

   1. 在左边大纲树或者 UI 设计器中选中 详情，在右边 属性 选项卡的 详情项 下删除 StartTime 和 EndTime。

      

   2. 在 UI 设计器中删除 ForecastDate 字段的 文本，然后增加 组合，在 组合 中增加三个 文本。

   3. 分别设置三个文本。第一个文本的 数据绑定 为 ForecastDate，第二个文本的 数据绑定 为 StartTime，前缀 为“(”，后缀 为“ - ”，第三个文本的 数据绑定 为 EndTime，后缀 为“)”。

2. 调整 Summary 的占列。

   每行两个字段，但是最后一行只有一个 Summary 字段，为了 UI 更美观，我们可以调整 Summary 字段的宽度，让它占据两列。

   在左边大纲树或者 UI 设计器中选中 详情，在右边 属性 选项卡的 详情项 下点击 Summary 旁的设置图标，然后将 包含列数 设置为 2。

   

3. 设置 WeatherState 不同枚举值的标签显示不同的颜色。

   1. 选中 WeatherState 字段的 标签，在右边 规则 选项卡中点击 添加，然后选择 显示控制。

      

   2. 设置 值类型 为 WeatherState 枚举，点击 添加项 将每个枚举值逐一添加进来，并为每个枚举值设置不同的颜色。

      

ListPage 视图

我们接下来对 ListPage 视图做以下优化：

1. 重新定制搜索功能。

   1. 将原来的搜索区域隐藏掉：选中 表格容器，在 属性 选项卡中选择 表单隐藏 和 操作区隐藏。

      

   2. 删除 标题 和 文本。我们将在此处定义新的搜索区。

      

      

   3. 从物料库中拖拽以下组件：先添加 组合，然后在 组合 中添加 复选框组 和 搜索输入框。

   4. 选中 组合，在 属性 选项卡中选中 自适应。

      

   5. 选中 复选框组，在 属性 选项卡中点击 点击编辑JSON，选择 WeatherState 枚举，在 初始值 下拉框中，逐一点击添加每个枚举值，表示所有值默认选中。

      

   6. 选中 搜索输入框，在 属性 选项卡的 占位提示 中输入 城市。

      

   7. 选中 表格容器，在 属性 选项卡中，将 City 参数值设置为 成员变量：搜索输入框 > 绑定值，将 WeatherState 参数值设置为 成员变量：复选框组 > 绑定值。将过滤参数绑定到新增的组件上。

      

2. 设置 WeatherState 不同枚举值的标签显示不同的颜色。请参考 DetailPage 视图中的方法。

创建企业员工统计系统

应用下载地址

本教程旨在通过一个演示应用程序来帮助用户深入理解 SnapDevelop 的可视化设计器的功能和应用场景。

请首先从此链接获取演示应用示例：https://github.com/Aipuyang/LowCode-WorkForceManager-CNExample，然后再阅读教程。

如您想快速从零开始创建应用程序，请参考上一小节：创建天气预报系统（快速入门）。

设计思路

项目类型

此应用示例的设计项目类型是 Vue Web 应用程序，以便同时生成前端 Vue Web 应用程序及后端 Web API。

实体

应用示例包含以下实体文件：

• Employee：员工实体
• Department：部门实体
• Company：公司实体
• Education：员工教育经历
• EmployeeJob：员工工作经历
• CompanyContact：公司联系人

它们的映射关系如下：

枚举

应用示例包含以下枚举文件：

查询模型

应用示例包含以下查询模型文件：

查询模型主要用于图表数据展示。下面将逐一介绍及展示效果图：

CompanyCities -- 获取所有公司所在城市，主要用于需要根据城市作为参数过滤数据。

显示在统计页面，运行效果如下：

CompanyDegreeStatic -- 过滤展示所选城市的所有员工学历统计。

显示在统计页面，运行效果如下（折线图）：

CompanyEmployee -- 获取公司所有的所有员工，返回员工信息（公司与员工并无关联关系，通过Department实体关联查询）。

CompanyGenderStatic -- 过滤展示所选城市的所有员工性别统计。

显示在统计页面，运行效果如下（饼图）：

CompanySizeStatic -- 过滤展示所有公司的规模数量统计。

显示在公司页面，运行效果如下（统计数值）：

CompanyStatic -- 过滤展示所选城市的公司规模统计。

显示在统计页面，运行效果如下（饼图）：

EmployeeDegreeStatic -- 根据公司过滤出该公司所有员工的学历统计。

显示在统计页面，运行效果如下（柱状图）：

EmployeeResignStatic -- 根据年份过滤该年份每月的离职人数统计。

未作用到图表组件展示。

EmployeeStatic -- 根据部门过滤选择该部门员工的状态统计。

显示在统计页面，运行效果如下（饼图）：

EmployeeWorkExperienceStatics -- 根据公司过滤选择该公司所有员工的工作年限统计。

显示在统计页面，运行效果如下（饼图）：

视图

Layout（布局）

布局页面设计了三个子菜单，分别对应如下页面：

1. 统计页面 -- 关联 Home 视图，主要用于统计图表展示。
2. 公司页面 – 关联 CompanyList 视图，主要用于公司列表展示及公司增加、删除、更新、详情。
3. 员工页面 -- 关联 Department_Employee_TreeList 视图，主要用于员工列表展示及员工增加、删除、详情。

运行效果如下：

Home（统计）

统计页面使用图表组件展示查询模型接口数据。其中包含以下过滤条件：

1、城市（下拉框）

2、是否包含-离职人员（开关）

3、公司（下拉框）

4、部门（下拉框）

以上作用于所选接口过滤参数，返回相应过滤数据。

例如：员工性别统计图表设计如下：

统计页面运行效果如下：

公司相关视图

公司页面引用以下相关视图：

• CompanyAdd：新增公司视图。当点击CompanyList中的“添加公司”按钮时，以对话框形式打开CompanyAdd视图。
• CompanyContractAdd：新增公司联系人视图
• CompanyDetail：公司详情视图。当点击CompanyList中的“详情”按钮时，以抽屉形式打开CompanyDetail视图，并将当前所选行的公司id作为页面参数传递给CompanyDetail页面，作为Get接口参数，获取Company详情。
• CompanyList：公司列表视图
• CompanyUpdate：更新公司信息视图。当点击CompanyList中的“编辑”按钮时，以对话框形式打开CompanyUpdate视图，并将所选当前行的公司id作为页面参数传递给CompanyUpdate页面，并作为Get接口参数，获取Company详情，对应字段到表单可修改，通过Update接口更新数据。

下面将介绍视图之间的关系和设置：

CompanyList 视图

使用表格容器加载数据：

添加公司按钮，选择事件 > 操作反馈，以对话框形式打开新增公司的视图：

增加对话框，在对话框中的视图容器中选择CompanyAdd视图，实现点击新增按钮打开一个对话框：

详情按钮，选择 事件 > 操作反馈，以抽屉形式打开公司详情的视图：

将当前所选行的公司id作为页面参数传递给公司详情视图：

CompanyDetail 视图

CompanyList中点击详情按钮时，以抽屉形式打开CompanyDetail视图，将所选当前行的公司id作为页面参数传递给CompanyDetail页面。

CompanyDetail页面中接收页面参数，并将其作为访问Get接口参数，获取Company详情：

CompanyUpdate 视图

CompanyList中点击编辑按钮时，以对话框形式打开CompanyUpdate视图，将所选当前行的公司id作为页面参数传递给CompanyUpdate页面。CompanyUpdate页面接收页面参数，并将其作为Get接口参数，获取Company详情，对应字段到表单可修改，编辑完成后通过Update接口更新数据。

部门相关视图

部门页面引用以下相关视图：

• Department_Employee_TreeList：树形展示所有部门（根据所选公司过滤）
• DepartmentAdd：新增部门
• DepartmentUpdate：编辑部门

下面将逐一介绍视图的关系和设置：

Department_Employee_TreeList 视图

作为组件被布局页面左侧树形图引用。

使用Department.GetListByRootFilter接口加载数据，参数Campany绑定其上方下拉框所选；选项名称为显示的树节点名称，选项值为该节点绑定值，选项子项为子节点的绑定字段。

布局页面右侧根据树形组件中点击所选部门，获取部门id筛选该部门的员工，并在表格中显示：

表格字段对员工性别-学历-状态的枚举数据做显示控制：

DepartmentAdd 视图和 DepartmentDetail 视图

编辑部门视图和新增部门视图都设置为按钮事件打开的对话框。编辑部门视图传递树形组件中选中的部门id；新增部门视图传递下拉框中所选公司，用于在DepartmentAdd页面中作为默认值指定所属公司。

添加部门员工的按钮事件，打开新页面EmployeeAdd，并传递两个页面参数companyid和departmentid，用于在新增员工页面中作为默认值指定所属公司和部门。

员工相关视图

员工页面引用以下相关视图：

• EducationAdd：新增员工教育经历
• EmployeeAdd：新增员工
• EmployeeDetail：员工详情
• EmployeeResign：办理离职，编辑员工状态为离职
• EmployeeUpdate：编辑员工信息
• JobAdd：新增员工工作经历

下面将介绍视图的关系和设置：

EmployeeAdd 视图

获取传递的页面参数companyid和departmentid作为所属公司和所属部门的默认值。

Employee的各个字段绑定到各个表单项，分别使用合适的组件。

有一点需要注意，新增和编辑表单中没有设计员工一对多工作经历和教育经历的集合表单，这是因为这个版本暂时有问题，会携带空json{}导致添加编辑失败。

EmployeeDetail 视图

布局左和上展示员工基本信息，绑定页面数据集字段。

表格容器的请求使用页面参数employeeid过滤获取属于该员工的教育经历和工作经历，并显示到表格。

教育经历和工作经历的新增，打开对话框，对话框的视图容器中加载对应EducationAdd视图和JobAdd视图。

自定义数据

项目自定义代码中自定义插入几条数据，便于第一次运行项目能看到图表效果。

开发流程

以下是开发演示应用程序的详细分步指南。

创建设计器项目

在 SnapDevelop 中，选择 文件 > 新建 > 新建项目 > Vue Web 应用程序。（注意：如要创建一个既生成前端 Vue Web 应用程序又生成后端 Web API 的设计项目，请选择 Vue Web 应用程序，而不是 Web API）。

如果您已经下载了演示应用程序，则可以直接在 SnapDevelop 中打开它。

创建和设计枚举类型

右键单击项目并选择 添加 > 新建项 > 枚举设计，以添加以下枚举：CompanySize、DegreeType、EmployeeStatus、Gender、PositionType、和 Province。

在演示应用程序中，您可以展开 Enums 目录，查看各个枚举的具体设置。

创建和设计基类实体

右键单击项目并选择 添加 > 新建项 > 基类实体设计 以添加以下基类实体：BaseEntity 。

在演示应用程序中，您可以打开 Entities > Bases > BaseEntity.sde 查看它的设计方式。

BaseEntity 实体是此项目中所有其他实体的基类。 它包含其他实体常用的字段，例如 Id（主键）、CreateTime、UpdateTime。

下面概述了设计 BaseEntity 实体的关键步骤：

1. 设置 Id 字段为主键，值为 NewGuid() 表达式。

2. 设置 CreateTime 的值为 Now() 表达式，表示当前时间。

3. 设置 UpdateTime 的值为 Now() 表达式，表示当前时间。

创建和设计实体

右键单击项目并选择 添加 > 新建项 > 实体设计（从零开始） 以添加以下实体：Company、CompanyContact、Department、Education、Employee、EmployeeJob。

Company.sde 将包含以下字段：CompanyName、Logo、Contactor、CompanySize、Province、City（以及从 BaseEntity 继承的 Id 等字段）。

CompanyContact.sde 将包含以下字段：Company、Contact、ContactPosition（以及从 BaseEntity 继承的 Id 等字段）。

Department.sde 将包含以下字段：DepartmentName、Company、SuperiorDepartment、ChildDepartments（以及从 BaseEntity 继承的 Id 等字段）。

Education 将包含以下字段：Id、School、StartDate、EndDate、Major、Degree、BelongEmployee。

Employee.sde 将包含以下字段：FirstName、LastName、FullName、Gender、PhoneNumber、Email、Avatar、HireDate、ResignDate、Degree、EducateSchool、EducateDate、Department、Manager、Educations、Jobs、Status、ResignReason、BirthDay、IdCard、Position（以及从 BaseEntity 继承的 Id 等字段）。

EmployeeJob.sde 将包含以下字段：Id、Company、Title、StartDate、EndDate、ResignReason、Contact、ContactPhone、BelongEmployee。

字段设置将在以下部分中进行设置和解释。 如果您已下载演示应用程序，则可以在 Entities 目录中打开这些文件来查看字段设置。

Company 实体

Company 实体包含如下所示的字段。

下面概述了设计 Company 实体的关键步骤：

字段设计

步骤 1：设置 Company 实体继承自 BaseEntity。（点击 展开 显示继承相关选项）。

如果选中 显示继承字段 选项，则 BaseEntity 的字段将以只读方式显示在 Company 实体中。

步骤 2：将 CompanyName 字段设置为必填字段，并根据需要指定最小和最大长度。

步骤 3：将 Logo 字段设置为 集合 和 可空。

步骤 4：配置 Contactor 字段：

1. 将 Contactor 字段设置为引用 CompanyContact 实体，并选中 集合 和 可空。
2. 在右侧面板上，从 关系 列表中选择 一对多，从 映射到 列表中选择 CompanyContact.Company，从 删除规则 列表中选择 级联删除。

步骤 5：将 CompanySize 的字段类型设置为 CompanySize 枚举类型。

步骤 6：将 Province 和 City 字段设置为 可空。

过滤器设计

步骤 1：选择 过滤器设计 选项卡，然后创建一个名为 FilterByAddressAndCompanySize 的过滤器。

服务与 API 设计

步骤 1：选择 添加服务 > 获取单条数据 > PrimaryKeyFilter 创建服务，并将服务名称更改为 Get。

在 服务设置 选项卡上，在 返回设置 中为 Contactor 选择 级联查询 选项。

步骤 2：选择 添加服务 > 获取列表数据 > 无过滤器 创建服务并将服务名称更改为 GetList。

在 服务设置 选项卡上，在 排序设置 中单击 选择要排序的数据源 并选择 Company。

步骤 3：选择 添加服务 > 获取分页数据 > FilterByAddressAndCompanySize 创建服务并将服务名称更改为 GetPage。

在 服务设置 选项卡上，在 排序设置 中单击 选择要排序的数据源 并选择 Company。

步骤 4：选择 添加服务 > 添加单条数据，创建 Add 服务。

步骤 5：选择 添加服务 > 更新单条数据，创建 Update 服务。

步骤 6：选择 添加服务 > 删除单条数据，创建 Delete 服务。

步骤 7：选择 添加服务 > 获取分页数据 > AddressSizeName 创建 GetPageByAddressSizeName 服务。

步骤 8：选择 生成所有 API 以自动生成所有这些服务的 API。

CompanayContact 实体

CompanayContact 实体包含如下所示的字段。

下面概述了设计 CompanayContact 实体的关键步骤：

字段设计

步骤 1：设置 CompanayContact 实体继承自 BaseEntity。（点击 展开 显示继承相关选项）。

步骤 2：配置 Company 字段：

1. 将 Company 字段设置为引用 Company 实体。

2. 在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Company.Contactor，从 删除规则 选择 级联删除，然后选择 生成外键字段 选项。

步骤 3：配置 Contact 字段：

1. 将 Contact 字段设置为引用 Employee 实体。

2. 在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Employee，从 删除规则 选择 级联删除，然后选择 生成外键字段 选项。

步骤 4：设置 ContactPostion 字段为 PositionType 枚举类型，可空。

过滤器设计

步骤 1：选择 过滤器设计 选项卡，然后创建一个名为 CompanyFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加基础服务 以自动生成服务。

步骤 2：选中 Get 服务，在右边的 服务设置 选项卡的 返回设置 中将 Company 和 Contact 字段设置为 级联查询。

步骤 3：选中 Update 服务，在右边的 服务设置 选项卡的 赋值设置 中将 UpdateTime 字段设置为表达式：UtcNow()。

步骤 4：选择 添加服务 > 获取分页数据 > CompanyFilter 创建 GetPageByCompanyFilter 服务；在右边的 服务设置 选项卡的 返回设置 中将 Company 和 Contact 字段设置为 级联查询。

步骤 5：选择 生成所有 API 以自动生成所有服务的 API。

Department 实体

Department 实体包含如下所示的字段。

下面概述了设计 Department 实体的关键步骤：

字段设计

步骤 1：设置 Department 实体继承自 BaseEntity（点击 展开 显示继承相关选项）。

如果选中 显示继承字段 选项，则 BaseEntity 的字段将以只读形式显示在 Department 实体中。

步骤 2：将 DepartmentName 字段设置为必填字段，并根据需要指定最小和最大长度。

步骤 3：配置 Company 字段：

1. 将 Company 字段设置为引用 Company 实体，并选中 集合 和 可空。

2. 在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Company，从 删除规则 选择 级联删除，并选中 生成外键字段。

步骤 4：配置 SuperiorDepartment 字段：

1. 将 SuperiorDepartment 字段设置为引用 Department 实体。

2. 选择 可空 选项，以便添加新部门时无需指定上级部门。

3. 然后在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Department.ChildDepartments，然后从 删除规则 列表中选择 设置为空 （以便当删除上级部门时，子部门中的 SuperiorDepartment 字段将设置为空），然后选择 生成外键字段 选项。

   注意：对于 SQL Server 数据库，如果某个字段与该字段所属的实体关联，则删除策略只能设置为 没有行为，否则会出现数据库错误。

步骤 5：配置 ChildDepartments 字段：

1. 将 ChildDepartments 字段设置为引用 Department 实体。

2. 选择 集合 和 可空 选项。

3. 然后在右侧面板上，从 关系 列表中选择 一对多，从 映射到 列表中选择 Department.SuperiorDepartment，然后从 删除规则 列表中选择 设置为空 。

过滤器设计

步骤 1：选择 过滤器设计 选项卡，然后创建名为 CompanyFilter、RootFilter、FilterByParentDepartmentId 的过滤器。

服务和 API 设计

步骤 1：选择 添加基础服务 以自动生成服务。

步骤 2：选择 添加服务 > 获取分页数据 > CompanyFilter 创建 GetPageByCompanyFilter 服务。

步骤 3：选择 添加服务 > 获取列表数据 > RootFilter 创建 GetListByRootFilter 服务。

步骤 4：选择 添加服务 > 获取分页数据 > FilterByParentDepartmentId 创建 GetPageByFilterByParentDepartmentId 服务。

步骤 5：选择 添加服务 > 获取列表数据 > CompanyFilter 创建 GetListByCompanyFilter 服务。

步骤 6：选择 生成所有 API 以自动生成所有服务的 API。

Education 实体

Education 实体包含如下所示的字段。

下面概述了设计 Education 实体的关键步骤。

字段设计

步骤 1：将 Id 设置为 主键。

步骤 2：将 School、StartDate 、EndDate 和 Major 设置为 可空。

步骤 3：将 Degree 字段类型设置为 DegreeType 枚举类型，并选中 可空。

步骤 4：配置 BelongEmployee 字段：

1. 将 BelongEmployee 字段设置为引用 Employee 实体，并选中 可空。

2. 在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Employee.Education，从 删除规则 选择 级联删除，并选中 生成外键字段。

步骤 2：将 FirstName、LastName 和 PhoneNum 设置为必填字段，并在右侧面板上根据需要设置最小和最大长度，将以下正则验证表达式添加到 PhoneNum 字段。

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 EmployeeFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加基础服务 以自动生成服务。

步骤 2：选择 添加服务 > 获取分页数据 > EmployeeFilter 创建 GetPageByEmployeeFilter 服务。

步骤 3：选择 生成所有 API 以自动生成所有服务的 API。

Employee 实体

Employee 实体包含如下所示的字段。

下面概述了设计 Employee 实体的关键步骤。 在演示应用程序中，您可以打开 Entity > Employee.sde 文件来查看所有设置。

字段设计

步骤 1：将 Employee 实体设置为从 BaseEntity 继承。

步骤 2：将 FullName 字段设置为 Compute 类型，并在右侧面板上选择 String 数据类型并添加以下计算表达式。

(Employee.FirstName + ' ') + Employee.LastName

步骤 3：将 Gender 的字段类型设置为 Gender 枚举类型。

步骤 4：将以下正则验证表达式添加到 PhoneNumber 字段。

^((\+?86)|(\(\+86\)))?((((13[^4]{1})|(14[5-9]{1})|147|(15[^4]{1})|166|(17\d{1})|(18\d{1})|(19[12589]{1}))\d{8})|((134[^9]{1}|1410|1440)\d{7}))$

步骤 5：将以下正则验证表达式添加到 Email 字段，并选中 可空。

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

步骤 6：将 Avatar 字段设置为 集合 和 可空。

步骤 7：将 HireDate 的字段类型设置为 DateTime，并使用 Now() 表达式将默认值设置为当前时间。

步骤 8：将 Degree 字段类型设置为 DegreeType 枚举类型，并选中 可空。

步骤 9：将 ResignDate、EducateSchool、EducateDate、ResignReason、BirthDay、IdCard、Postion 字段设置为 可空。

步骤 10：配置 Department 字段：

1. 将 Department 字段设置为引用 Department 实体。
2. 在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Department，从 删除规则 列表中选择 默认，然后选择 生成外键字段 选项。

步骤 11：配置 Manager 字段：

1. 将 Manager 字段设置为引用 Employee 实体，并选择 可空 选项。
2. 在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Employee，从 删除规则 列表中选择 设置为空，然后选择 生成外键字段 选项。

注意：对于 SQL Server 数据库，如果某个字段与该字段所属的实体关联，则删除策略只能设置为 没有行为，否则会出现数据库错误。

步骤 12：配置 Educations 字段：

1. 将 Educations 字段设置为引用 Education 实体，并选择 集合 和 可空 选项。
2. 在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Employee，从 删除规则 列表中选择 设置为空，然后选择 生成外键字段 选项。

步骤 13：配置 Jobs 字段：

1. 将 Jobs 字段设置为引用 EmployeeJob 实体，并选择 集合 和 可空 选项。
2. 在右侧面板上，从 关系 列表中选择 一对多，从 映射到 列表中选择 EmployeeJob.BelongEmployee，从 删除规则 列表中选择 设置为空。

步骤 14：将 Status 字段类型设置为 EmployeeStatus 枚举类型。

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 DepartmentFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加基础服务 以自动生成服务。

步骤 2：选择 Get 服务，在页面右侧的 服务设置 选项卡的 返回设置 中将 Department、Manager、Educations、Jobs 字段的 级联查询 选中。

步骤 3：选择 Add 服务，在页面右侧的 服务设置 选项卡的 赋值设置 中将 Department、Educations、Jobs 字段的 级联查询 选中。

步骤 4：选择 Update 服务，在页面右侧的 服务设置 选项卡的 赋值设置 中将 Educations、Jobs 字段的 级联查询 选中，将 UpdateTime 字段的值设置为表达式：UtcNow()。

步骤 5：选择 添加服务 > 获取分页数据 > DepartmentFilter 创建 GetPageByDepartmentFilter 服务。

步骤 6：选择 添加服务 > 获取列表数据 > DepartmentFilter 创建 GetListByDepartmentFilter 服务。

步骤 7：选择 添加服务 > 更新单条数据 创建服务，并将服务名称更改为 UpdateResign。并且在页面右侧的 服务设置 选项卡的 赋值设置 中将 Educations、Jobs 字段的 级联更新 选中。

步骤 8：选择 生成所有 API 以自动生成所有这些服务的 API。

EmployeeJob 实体

EmployeeJob 实体包含如下所示的字段。

字段设计

步骤 1：将 Id 字段设置为 主键。

步骤 2：将 Company 字段设置为 必要。

步骤 3：将 Title、EndDate、ResignReason、Contact、ContactPhone 字段设置为 可空。

步骤 4：将以下正则验证表达式添加到 ContactPhone 字段。

^(\+\s?)?((?<!\+.*)\(\+?\d+([\s\-\.]?\d+)?\)|\d+)([\s\-\.]?(\(\d+([\s\-\.]?\d+)?\)|\d+))*(\s?(x|ext\.?)\s?\d+)?$

步骤 5：配置 BelongEmployee 字段：

1. 将 BelongEmployee 字段设置为引用 Employee 实体，并选中 可空。

2. 在右侧面板上，从 关系 列表中选择 多对一，从 映射到 列表中选择 Employee.Jobs，从 删除规则 选择 设置为空，并选中 生成外键字段。

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 EmployeeFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加基础服务 以自动生成服务。

步骤 2：选择 添加服务 > 获取分页数据 > EmployeeFilter 创建 GetPageByEmployeeFilter 服务。

步骤 3：选择 生成所有 API 以自动生成所有这些服务的 API。

创建和设计复合查询

右键单击项目并选择 添加 > 新建项 > 复合查询设计 以添加以下查询模型：CompanyCities、CompanyDegreeStatic、CompanyEmployees、CompanyGenderStatic、CompanySizeStatic、CompanyStatic、CompanyStatistics、EmployeeDegreeStatic、EmployeeResignStatic、EmployeeStatic、和 EmployeeWorkExperienceStatics。

CompanyCities

字段设计

步骤 1：在 关系 选项卡中，添加 Company 实体为数据源。

步骤 2：在 结果集字段 选项卡中，添加 City 字段，选择 Company.City 为值(映射)。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > 无过滤器 创建 GetListByNoFilter 服务。

步骤 2：选择 生成 API 以自动生成服务的 API。

CompanyDegreeStatic

字段设计

步骤 1：在 关系 选项卡中，添加 Employee、Department、Company 实体为数据源。

步骤 2：在 关系设置 选项卡中，添加以下关系：

1. 以 Inner Join 方式连接 Department 实体的 CompanyId 字段和 Company 实体的 Id 字段；
2. 以 Inner Join 方式连接 Employee 实体的 DepartmentId 字段和 Department 实体的 Id 字段。

步骤 3：在 分组设置 选项卡中，添加 Employee.Degree 字段分组。

步骤 4：在 结果集字段 选项卡中，添加以下字段：

1. 添加 EmployeeDegree 字段，选择 Key 下的 EmployeeDegree 为值(映射)；

2. 添加 Employees 字段，输入以下表达式为值(映射)：

   Select(CompanyDegreeStatic.Group.Employee)
   

3. 添加 EmployeeCount 字段，输入以下表达式为值(映射)：

   Count(DistinctBy(CompanyDegreeStatic.Employees.PhoneNumber))
   

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CitiesFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CitiesFilter 创建 GetListByCitiesFilter 服务。

步骤 3：选择 生成 API 以自动生成服务的 API。

CompanyEmployees

字段设计

步骤 1：在 关系 选项卡中，添加 Employee、Department、Company 实体为数据源。

步骤 2：在 关系设置 选项卡中，添加以下关系：

1. 以 Inner Join 方式连接 Department 实体的 CompanyId 字段和 Company 实体的 Id 字段；
2. 以 Inner Join 方式连接 Employee 实体的 DepartmentId 字段和 Department 实体的 Id 字段。

步骤 3：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建名为 CompanyFilter 和 RootFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CompanyFilter 创建 GetListByCompanyFilter 服务，选择 生成 API 以自动生成服务的 API。

步骤 2：选择 添加服务 > 获取列表数据 > RootFilter 创建服务并修改服务名为 GetComanyManager，选择 生成 API 以自动生成服务的 API。

CompanyGenderStatic

字段设计

步骤 1：在 关系 选项卡中，添加 Employee、Department、Company 实体为数据源。

步骤 2：在 关系设置 选项卡中，添加以下关系：

1. 以 Inner Join 方式连接 Department 实体的 CompanyId 字段和 Company 实体的 Id 字段；
2. 以 Inner Join 方式连接 Employee 实体的 DepartmentId 字段和 Department 实体的 Id 字段。

步骤 3：在 分组设置 选项卡中，添加 Employee.Gender 字段分组。

步骤 3：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CityFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CityFilter 创建 GetListByCityFilter 服务。

步骤 2：选择 生成 API 以自动生成服务的 API。

CompanySizeStatic

字段设计

步骤 1：在 关系 选项卡中，添加 Company 实体为数据源。

步骤 2：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CityFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取单条数据 > CityFilter 创建 GetByCityFilter 服务。

步骤 3：选择 生成 API 以自动生成服务的 API。

CompanyStatic

字段设计

步骤 1：在 关系 选项卡中，添加 Company 实体为数据源。

步骤 2：在 分组设置 选项卡中，添加 Company 实体的 CompanySize 为分组字段。

步骤 3：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CityFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CityFilter 创建 GetListByCityFilter 服务。

步骤 3：选择 生成 API 以自动生成服务的 API。

CompanyStatistics

字段设计

步骤 1：在 关系 选项卡中，添加 Company 实体为数据源。

步骤 2：在 分组设置 选项卡中，添加 Company 实体的 CompanySize 为分组字段。

步骤 3：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CityFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CityFilter 创建 GetListByCityFilter 服务。

步骤 3：选择 生成 API 以自动生成服务的 API。

EmployeeDegreeStatic

字段设计

步骤 1：在 关系 选项卡中，添加 Employee、Department、Company 实体为数据源。

步骤 2：在 关系设置 选项卡中，添加以下关系：

1. 以 Inner Join 方式连接 Department 实体的 CompanyId 字段和 Company 实体的 Id 字段；
2. 以 Inner Join 方式连接 Employee 实体的 DepartmentId 字段和 Department 实体的 Id 字段。

步骤 3：在 分组设置 选项卡中，添加 Employee.Degree 字段分组。

步骤 4：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CompanyFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CompanyFilter 创建 GetListByCompanyFilter 服务。

步骤 3：选择 生成 API 以自动生成服务的 API。

EmployeeResignStatic

字段设计

步骤 1：在 关系 选项卡中，添加 Employee、Department、Company 实体为数据源。

步骤 2：在 关系设置 选项卡中，添加以下关系：

1. 以 Inner Join 方式连接 Department 实体的 CompanyId 字段和 Company 实体的 Id 字段；
2. 以 Inner Join 方式连接 Employee 实体的 DepartmentId 字段和 Department 实体的 Id 字段。

步骤 3：在 分组设置 选项卡中，添加以下字段分组：

1. 添加以下分组字段及表达式：Year(Employee.ResignDate)
2. 添加以下分组字段及表达式：Month(Employee.ResignDate)

步骤 4：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CompanyFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CompanyFilter 创建 GetListByCompanyFilter 服务。

步骤 3：选择 生成 API 以自动生成服务的 API。

EmployeeStatic

字段设计

步骤 1：在 关系 选项卡中，添加 Employee、Department、Company 实体为数据源。

步骤 2：在 关系设置 选项卡中，添加以下关系：

1. 以 Inner Join 方式连接 Department 实体的 CompanyId 字段和 Company 实体的 Id 字段；
2. 以 Inner Join 方式连接 Employee 实体的 DepartmentId 字段和 Department 实体的 Id 字段。

步骤 3：在 分组设置 选项卡中，添加以下字段分组及表达式：

If(Employee.Status == EmployeeStatus.IS,"实习", If(Employee.Status == EmployeeStatus.TR,"试用", If(Employee.Status == EmployeeStatus.FL,"正式",""))) 

步骤 4：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CompanyFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CompanyFilter 创建 GetListByCompanyFilter 服务。

步骤 3：选择 生成 API 以自动生成服务的 API。

EmployeeWorkExperienceStatics

字段设计

步骤 1：在 关系 选项卡中，添加 Employee、Department、Company 实体为数据源。

步骤 2：在 关系设置 选项卡中，添加以下关系：

1. 以 Inner Join 方式连接 Department 实体的 CompanyId 字段和 Company 实体的 Id 字段；
2. 以 Inner Join 方式连接 Employee 实体的 DepartmentId 字段和 Department 实体的 Id 字段。

步骤 3：在 分组设置 选项卡中，添加以下字段分组及表达式：

If(DateDif(Employee.EducateDate, Now(),"Y") < 3,"3年以下",If(DateDif(Employee.EducateDate, Now(),"Y") >=3 && DateDif(Employee.EducateDate, Now(),"Y")<5,"3-5年",If(DateDif(Employee.EducateDate, Now(),"Y")>=5 && DateDif(Employee.EducateDate, Now(),"Y")<10,"5-10年","10年以上")))

步骤 4：在 结果集字段 选项卡中，添加以下字段：

过滤器设计

第 1 步：选择 过滤器设计 选项卡，然后创建一个名为 CompanyFilter 的过滤器。

服务和 API 设计

步骤 1：选择 添加服务 > 获取列表数据 > CompanyFilter 创建 GetListByCompanyFilter 服务。

步骤 3：选择 生成 API 以自动生成服务的 API。

创建和设计 Vue 视图

根据实体分别生成 Add 新增、Detail 详情、Edit 编辑、List 列表的视图。

下面主要以 Company 实体为例进行介绍。其他的实体操作雷同。

CompanyAdd 视图

CompanyAdd 视图将显示一个可录入公司数据的表单，然后通过 Add 接口提交新增的数据。

第一步：创建 CompanyAdd 视图。

右键单击项目并选择 添加 > 新建项 > 视图设计（基于模板）。名称设为 CompanyAdd。点击 下一步。

选择 Company 实体，选择 表单页面。点击 创建。

第二步：设计 CompanyAdd 视图。

注意：提交数据 默认为 Company 实体的 Add 接口，无需修改。

你可以根据需要调整 UI，以及新增删除组件。

CompanyUpdate 视图

CompanyUpdate 视图将通过 Get 接口获取公司数据，以可编辑数据表单显示，然后通过 Update 接口提交修改的数据。

第一步：创建 CompanyUpdate 视图。

右键单击项目并选择 添加 > 新建项 > 视图设计（基于模板）。名称设为 CompanyUpdate。点击 下一步。

选择 Company 实体，选择 表单页面。点击 创建。

第二步：设计 CompanyUpdate 视图。

注意：选择 加载数据 为 Company 实体的 Get 接口，提交数据 为 Company 实体的 Update 接口。

CompanyContactAdd 视图

CompanyContactAdd 视图将显示一个可录入公司联系人的表单，然后通过 Add 接口提交新增的数据。

第一步：创建 CompanyContactAdd 视图。

右键单击项目并选择 添加 > 新建项 > 视图设计（基于模板）。名称设为 **CompanyContactAdd **。点击 下一步。

选择 CompanyContact 实体，选择 表单页面。点击 创建。

第二步：设计 CompanyContact 视图。

注意：提交数据 默认为 CompanyContact 实体的 Add 接口，无需修改。你可以根据需要调整 UI，以及新增删除组件。

CompanyDetail 视图

CompanyDetail 视图将通过 Get 接口获取一个公司的明细数据，以只读表单显示。

第一步：创建 CompanyDetail 视图。

右键单击项目并选择 添加 > 新建项 > 视图设计。名称设为 CompanyDetail。点击 下一步。

选择 Company 实体，选择 详情页面。点击 创建。

第二步：设计 CompanyDetail 视图。

注意：加载数据 默认为 Company 实体的 Get 接口，无需修改。

在 CompanyDetail 视图中添加一个 “对话框” 组件。具体步骤为：

1. 从左边 物料库 中拖拽 “对话框” 到 CompanyDetail 视图中，记录下 引用标识 的值，例如：modal_805d813177e798。
2. 在对话框中间点击选择 CompanyContactAdd 页面（或者选中对话框中的 视图容器，然后在右边选择 页面 为 CompanyContactAdd ）。

在 CompanyDetail 视图设计器中选中 新增联系人 按钮，在右边设置 应用组件 为刚新增的对话框，例如：modal_805d813177e798。

CompanyList 视图

CompanyList 视图将根据所选择的 API 接口（GetPage 或 GetList） 获取并以只读列表形式显示公司的数据，同时，它提供了查询、添加、编辑、删除等操作按钮。

第一步：创建 CompanyList 视图。

右键单击项目并选择 添加 > 新建项 > 视图设计。名称设为 CompanyList。点击 下一步。

选择 Company 实体，选择 表格页面。点击 创建。

第二步：设计 CompanyList 视图。

选择 页面加载 为 GetPageByAddressSizeName 接口。

在 CompanyList 视图中添加一个 “对话框” 组件。具体步骤为：

1. 从左边 物料库 中拖拽 “对话框” 到 CompanyList 视图中，修改 引用标识 为 modal_companyadd。
2. 在对话框中间点击选择 CompanyAdd 页面（或者选中对话框中的 视图容器，然后在右边选择 页面 为 CompanyAdd ）。

重复以上步骤，添加第二个对话框到 CompanyList 视图中，修改 引用标识 为 modal_companyupdate，然后选择 CompanyUpdate 页面。

在 CompanyList 视图中添加一个 “抽屉” 组件。具体步骤为：

1. 从左边 物料库 中拖拽 “抽屉” 到 CompanyList 视图中，修改 引用标识 为 drawer_detail。
2. 在抽屉中间点击选择 CompanyDetail 页面（或者选中抽屉中的 视图容器，然后在右边选择 页面 为 CompanyDetail ）。

在 CompanyList 视图设计器中选中 添加公司 按钮，在右边设置 应用组件 为刚新增的对话框 modal_companyadd。

在 CompanyList 视图设计器中选中 编辑 按钮，在右边设置 应用组件 为刚新增的对话框 modal_companyupdate。

在 CompanyList 设计器中选中 详情 按钮，在右边设置 应用组件 为 drawer_detail 抽屉。

DepartmentAdd 视图

DepartmentAdd 视图将显示一个可录入部门的表单，然后通过 Add 接口提交新增的数据。

该视图基于 Department 实体和 表单页面 创建。具体操作方式请参考 CompanyAdd 视图。

DepartmentUpdate 视图

DepartmentUpdate 视图将通过 Get 接口获取部门数据，以可编辑数据表单显示，然后通过 Update 接口提交修改的数据。

该视图基于 Department 实体和 表单页面 创建。选择 加载数据 为 Department 实体的 Get 接口，提交数据 为 Department 实体的 Update 接口。具体操作方式请参考 CompanyUpdate 视图。

Department_Employee_TreeList 视图

创建一个空白视图，命名为 Department_Employee_TreeList，在页面中添加网格布局、行容器、列容器等实现页面左右布局。

在左侧添加一个下拉框和树形控件，设置下拉框的 加载数据 为 Department 实体的 GetList 接口，设置树形控件的 加载数据 为 Department 实体的 GetListByRootFilter 接口，设置参数 Company 的值为下拉框选择的公司；设置选项名称 为显示的树节点名称，选项值 为该节点绑定值，选项子项 为子节点的绑定字段。

在右侧添加一个表格容器，设置 加载数据 为 Employee 实体的 GetPageByDepartmentFilter 接口，设置参数 Department 的值为 树形控件 / 选中项 / id (通过左侧树形控件中选择的部门的 id 筛选该部门的员工并在表格中显示）。

在 Department_Employee_TreeList 视图中添加两个 “对话框” 组件，并设置如下：

1. 对话框引用标识为 modal_departmentadd，关联页面 DepartmentAdd。
2. 对话框引用标识为 modal_departmentupdate，关联页面 DepartmentUpdate。

在 Department_Employee_TreeList 视图设计器中选中 添加部门 按钮，在右边设置 应用组件 为刚新增的对话框 modal_departmentadd。

在 Department_Employee_TreeList 视图设计器中选中 编辑部门 按钮，在右边设置 应用组件 为刚新增的对话框 modal_departmentupdate。

在 Department_Employee_TreeList 视图设计器中选中 添加部门员工 按钮，在右边设置 页面 为 EmployeeAdd。设置参数 companyid 为 下拉框 / 绑定值，departmentid 为 树形控件 / 选中项。

在 Department_Employee_TreeList 视图设计器中选中 详情 按钮，在右边设置 页面 为 EmployeeDetail。设置参数 id 为 表格容器 / 当前行数据 / id，companyid 为 下拉框 / 绑定值。

EducationAdd 视图

EducationAdd 视图将显示一个可录入教育经历的表单，然后通过 Add 接口提交新增的数据。

该视图基于 Education 实体和 表单页面 创建。具体操作方式请参考 CompanyAdd 视图。

JobAdd 视图

JobAdd 视图将显示一个可录入工作经历的表单，然后通过 Add 接口提交新增的数据。

该视图基于 Job 实体和 表单页面 创建。具体操作方式请参考 CompanyAdd 视图。

EmployeeAdd 视图

EmployeeAdd 视图将显示一个可录入员工的表单，然后通过 Add 接口提交新增的数据。

该视图基于 Employee 实体和 表单页面 创建。具体操作方式请参考 CompanyAdd 视图。

EmployeeUpdate 视图

EmployeeUpdate 视图将通过 Get 接口获取员工数据，以可编辑数据表单显示，然后通过 Update 接口提交修改的数据。

该视图基于 Employee 实体和 表单页面 创建。选择 加载数据 为 Employee 实体的 Get 接口，提交数据 为 Employee 实体的 Update 接口。具体操作方式请参考 CompanyUpdate 视图。

EmployeeResign 视图

EmployeeResign 视图将通过 Get 接口获取员工的离职日期和离职原因，以可编辑数据表单显示，然后通过 Update 接口提交修改的数据。

该视图基于 Employee 实体和 表单页面 创建，隐藏除离职日期和离职原因以外的所有表单项。选择 加载数据 为 Employee 实体的 Get 接口，提交数据 为 Employee 实体的 UpdateResign 接口。

EmployeeDetail 视图

EmployeeDetail 视图将通过 Get 接口获取某个员工的明细数据，包括基本信息、教育经历、工作经历。

第一步：创建 EmployeeDetail 视图。该视图基于 Employee 实体和 详情页面 创建。

第二步：设计 EmployeeDetail 视图。

在 页面 > 事件 中，选择 页面加载 为 Employee 实体的 Get 接口。绑定页面数据集字段。

在 EmployeeDetail 视图中添加四个 “对话框” 组件，并设置如下：

1. 对话框引用标识为 modal_educationadd，关联页面 EducationAdd。
2. 对话框引用标识为 modal_jobadd，关联页面 JobAdd。
3. 对话框引用标识为 modal_edit，关联页面 EmployeeUpdate。
4. 对话框引用标识为 modal_resign，关联页面 EmployeeResign。

在 EmployeeDetail 视图中添加一个 “表格容器”，设置 标题 为 教育经历，设置 加载数据 为 Education 实体的 GetPageByEmployeeFilter 接口，设置 EmployeeId 参数值为页面参数 id。添加 新增 按钮，并设置其 应用组件 为刚新增的对话框 modal_educationadd。

在 EmployeeDetail 视图中添加第二个 “表格容器”，设置 标题 为 工作经历，设置 加载数据 为 EmployeeJob 实体的 GetPageByEmployeeFilter 接口，设置 EmployeeId 参数值为页面参数 id。添加 新增 按钮，并设置其 应用组件 为刚新增的对话框 modal_jobadd。

在 EmployeeDetail 视图中添加 编辑 按钮，设置其 应用组件 为刚新增的对话框 modal_edit。

在 EmployeeDetail 视图中添加 办理离职 按钮，设置其 应用组件 为刚新增的对话框 modal_resign。

Home 视图

通过布局组件（行容器、网格布局、列容器等）和图表组件（统计数值、折线图、柱状图、饼图）展示相关统计数值。

例如：

设置 城市 下拉框的 加载数据 为 CompanyCities 查询模型的 GetListByNoFilter 接口。

设置 员工性别统计 饼图的 加载数据 为 CompanyGenderStatic 查询模型的 GetListByCityFilter 接口，设置参数 Cities 的值为成员变量 下拉框 > 绑定值。

Layout 视图

通过 Layout 视图页面设计应用页面的层级及导航。

添加三个一级菜单：

• 统计 菜单，值为 Home 视图
• 公司 菜单，值为 CompanyList 视图
• 员工 菜单，值为 Department_Employee_TreeList 视图

生成并运行项目

从 IDE 工具栏中选择 生成项目，或右键单击项目节点，然后选择 生成项目 > Profile；在 Profile 窗口的右上角单击 生成项目。

项目生成成功后，运行 [project].WebApi 项目即可启动 Web API。

启动 Web API 后，可以运行 [project].Vue 项目启动 Vue Web 应用程序。