步骤四：绘制流程页面

进入UI编辑器

使用UI编辑器，编辑流程节点页面，您可以使用系统中预置的模板、组件进行编辑。

1. 在左侧导航栏中，选择“流程管理 > 流程申请单”，进入申请单列表界面。
2. 选择已创建的流程申请单，单击“编辑”，进入编辑页面。
3. 选择“UI编辑”页签。

使用表格组件

1. 在UI编辑页面，单击左侧插件栏的图标，选择“组件”页签。

   选择表格或表单组件，将其拖拽至中心画布。也可以先拖入一个折叠面板，将表格或表单拖入折叠面板组件中。

   折叠面板组件可以折叠、隐藏高度受限的内容，优化页面结构。

   图1 添加表格组件
   

2. 选择画布中的表格组件，在右侧属性面板中，单击“选择模型”，添加步骤三中创建的数据实体模型（文档模板）。
   图2 添加数据实体模型
   

3. 在属性面板“表格列配置”中，设置表字段是否可编辑、是否必填、控件类型和是否只读等，也可以显示或隐藏字段，如图3所示。

   若字段“控件类型”中选择“选择框”类型，需要在“选项数据”中填写相关代码，如图4所示。

   图3 设置表字段
   
   图4 设置控件选项
   

4. 单击“保存”。

使用部件组件

1. 选择部件组件，将其拖拽至中心画布。
   图5 添加部件
   

2. 选择画布中的部件组件，在右侧属性面板中，单击“选择模型”，添加步骤三中创建的数据实体模型（自制件部件模板）。
   图6 添加数据实体模型
   

3. 在属性面板“基础属性 > 更多选项类型 > 表单项”中选择需要保留查询的字段。
   图7 查询字段
   

4. 在属性面板“表格属性 > 表格列”中选择搜索结果展示哪些字段。
   图8 搜索结果设置
   

5. 在“基础信息 > 显示”中设置显示或隐藏当前“添加部件”窗口。
   图9 显示/隐藏弹窗
   

在部件中绑定服务定义

选择画布中的部件组件，打开右侧的属性面板。

1. 绑定服务定义。
   1. 选择“基础信息 > 查询接口”，在“查询接口”中绑定已配置好的“组合自制件部件查询”服务定义，用于按条件查询部件，如图10所示。
   2. 在自制件查询部件服务定义中，搜索字段为提前设置的字段（可以更改，格式仿照图中的格式来写，即字段 = ${字段}），如图11所示。

      服务定义的返回参数要和页面表格中的“列字段”一一对应。

   图10 绑定服务定义
   
   图11 设置查询字段
   

2. 绑定JS函数。
   • 选择“基础属性 > 选择数据方法”，“选择数据方法”一栏可以绑定一个用于添加部件的JS函数。
     图12是校验JS示例，详见“自制件BOM审核发布流程”中的addPartClick()函数。

     图12 绑定JS函数
     
   • 选择“多选校验”中的“API表格多选校验方法”或“API校验失败提示信息”，可以绑定一个JS校验函数，用于校验。如图13所示。
     图13 绑定校验JS函数
     

     在“自制件BOM审核发布流程”中，绑定的是图14中checkPart()函数，用于校验选中的部件是否满足要求。

     校验失败提示信息绑定一个变量，表示的当校验失败时提示对应信息。

     图14 JS校验函数示例
     

提交按钮绑定JS代码

如果对提交按钮不做任何修改，默认是正常的提交流程。当对其绑定JS代码后，可以实现对页面的数据进行一定的校验，提交流程，然后再做一些后置处理。

1. 选择画布中的提交按钮，打开右侧的属性面板，开启“自定义操作区”按钮。
   图15 提交按钮
   

2. 选择左侧插件栏的JS，进入JS页面，单击“展示使用帮助”。如图16所示。

   模板中预置了常用的JS脚本模板，可以直接复制编辑使用。

   • 提交节点可以粘贴提交模版事件，审批节点粘贴审批模版事件。before()中添加校验逻辑，例如在“自制件BOM审核发布流程”中添加校验是否所有部件的评审意见都为通过。
   • 在after()中可以绑定一个服务定义用于后置处理，调用definitionRequest()方法。在“自制件BOM审核发布流程”该服务定义用于修改部件状态。如图17所示。
   图16 JS使用帮助
   
   图17 示例代码
   

3. 通过单击按钮展示弹框（“自制件BOM审核发布流程”中用于展示“查看不满足发布条件子项信息”按钮）。
   • 将表单中的字段输入类型改成“按钮”，或者直接拖入一个按钮组件，将按钮名称改为自己需要的。如图18所示。
   • 拖入一个弹窗组件，在展示弹窗处绑定一个变量，该变量为true可以展示弹窗，为false可以隐藏弹窗。该变量值可由JS代码控制。如图19所示。
   图18 添加按钮
   
   图19 添加变量
   

将变量配置为超链接格式

在“自制件BOM审核发布流程”中将部件编码制成超链接形式，可以跳转到对应的部件详情页。

图20 超链接展示

打开启用超链接开关，超链接地址绑定一个变量，打开超链接新开页面开关，如有需要可以配置一个链接变量名。

图21 添加超链接

其中超链接地址绑定的变量的值为：

https://“实际域名”/pdmcore/pdmcoreui/part/info/?partNumber={partNumber}&partView=PSView&partVersion=A

其中{}内容为链接变量名，表示把该部件编码传入url中。