更新时间:2023-03-30 GMT+08:00
分享

组装“派单”对话框

“派单”对话框负责指定下一环节的工单状态和处理责任人,用标准页面功能实现。

派单界面的大致构想如图1所示,其中“工单ID”是为了传递维修工单信息。

图1 派单员派单对话框

页面模型负责与页面组件交互,传递派单需要的工单ID、工单状态、下一环节处理人等信息。结合页面需求,可知需要创建如下模型:

表1 模型分析

模型名称

作用

详细定义

transInfo

保存派单的参数。

自定义模型,包含的计算节点如下,这些节点与派单接口的输入参数名称一一对应。

  • HW__workOrderId__CST:工单ID
  • HW__assignedFme__CST:下一环节处理人
    说明:

    加粗斜体内容请替换为实际命名空间前缀。

workerOptions

查询系统中的工程师信息,下一环节处理的可选项。

服务模型,与公共接口queryWorker关联。

操作步骤

  1. 在“我的应用”中,单击“设备维修管理系统”,进入应用。
  2. 在“WorkOrder”中,鼠标放在“Page”上,单击界面上出现的“+”,在弹出菜单中选择“标准页面”。
  3. 在“标签”和“名称”文本框中输入“workOrderDispatch”,单击“添加”。

    当编辑已有标准页面时,为防止编辑时多人篡改,编辑前请单击进行锁定。

  4. 定义模型“transInfo”。

    1. 在“模型视图”中,单击“新增模型”。
    2. 添加自定义模型,模型名称“transInfo”,单击“下一步”。
    3. 为模型添加节点“HW__workOrderId__CST”(字段类型Text)、“HW__assignedFme__CST”(字段类型Any),单击“下一步”,再单击“确定”,加粗斜体内容请替换为实际命名空间前缀。
    4. 单击页面上方的,保存模型。

  5. 定义模型“workerOptions”。

    1. 在“模型视图”中,单击“新增模型”。
    2. 添加服务模型,模型名称“workerOptions”,单击“下一步”。
    3. “项目”选择“设备维修管理系统”,并为模型关联API“queryWorker”,单击“下一步”,再单击“确定”。
    4. 单击页面上方的,保存模型。

  6. 拖拽页面组件。

    1. 单击“设计视图”,返回页面设计。
    2. 将左侧基本组件区的“表单”拖拽到右侧页面中。

      因为当前还没有定义数据源,单击“取消”,创建一个空的表单控件。

    3. 拖拽一个“分栏”到表单中。
    4. 选中“分栏”,在右侧单击PC下的单行图标,修改分栏为1栏,再单击“新增行”的,修改为2个分栏,每个分栏中有1栏。
      图2 设置分栏为1栏
    5. 在第1个分栏中拖入一个“输入框”,在第2个分栏中拖入一个“下拉框”。
      图3 拖入输入框、下拉框到分栏
    6. 选中“输入框”,在右侧属性面板中,单击,在选择模型弹窗中,选择“transInfo”下的“HW__workOrderId__CST”字段,并修改其“标签”为“工单ID”。
    7. 选择下拉框进行以下设置。
      1. 在右侧属性面板中,单击,在选择模型弹窗中,选择“transInfo”下的“HW__assignedFme__CST”字段,修改“标题”为“选择工程师”。
      2. 单击“属性值绑定”后的“+”,设置“属性”为“选项”,“模型字段”为“workerOptions.outputParam.userList”,即绑定属性值为服务对象的返回值。
        图4 绑定服务对象的返回值
      3. 开启“弹层独立”。
        图5 启用弹层独立
    8. 单击页面上方的,保存设置。

  7. 定义页面事件代码。

    1. 在“设计视图”中选中最外层的“页面”,在右侧“事件”页签中,单击“加载”后的“+”,进入编辑动作页面。
    2. 在“自定义动作”中,输入如下脚本代码。

      红色内容请替换为实际命名空间前缀。

      let workOrderId = Page.params.workOrderId;
      $model.ref("transInfo").setData({ "HW__workOrderId__CST": workOrderId });
      //查询维修人员列表,作为维修人员下拉框的可选值
      $model.ref('workerOptions').setData({ inputParam: {} });
      $model.ref('workerOptions').run();
    3. 单击页面上方的,并退出事件编排。

验证

单击界面上方的,进入预览页面,查看页面的展示效果。

因为这个页面需要从上一个页面获取工单信息,所以当前的预览效果只能看到空白“工单ID”以及“选择工程师”下拉框。

分享:

    相关文档

    相关产品