移动端设计快速入门

怎么快速创建一个移动端应用,有表单、流程,且待办能正常流转?

步骤: 1、创建应用系统(PC端已创建可跳过)->2、创建模块->3、创建模型(PC端已创建可跳过)->4、创建服务->5、创建页面->6、设计页面->7、设计流程(PC端已创建可跳过)->8、PC端验证(在PC端发起申请,流程流转下一步)->9、打包下载->10、部署->11、移动端验证(在手机上发起申请,流程流转)

 

以综合业务系统的印章管理为例,进行操作:

需求:

 一、综合业务系统含请假管理模块,表单数据如下

二、 印章借用流程图如下:

 

一般情况下,PC端已创建应用系统,需要再创建移动端应用,操作步骤:

1、创建模块,进入平台首页,定位到该应用系统,点击右边的应用模块的右上角【移动轻应用】,添加移动端应用模块;

2、创建服务

(1)添加完成后,点击app模块,进入到【项目】界面;

(2) 点击目录,按右键出现菜单,点击【模型创建服务】;

(3)打开模型创建服务界面后,点击【选择模型】,选择之前PC端模块对应的模型,如印章管理的模型;选择类型将【查询类服务】、【修改类服务】都勾选上,然后点击界面右下角的【保存】,这样创建了8个服务。

(4)接下来创建待办、已办、传阅的服务,点击【链接已有服务】创建这些服务;

服务地址可以直接拷备粘贴,如下:
待办服务地址:${config.runtime-api-contextPath}/engine-api/xFlowForm/pageQuerytoDoWorkItems
已办服务地址:${config.runtime-api-contextPath}/engine-api/xFlowForm/pageQueryDoneWorkItems
传阅服务地址:${config.runtime-api-contextPath}/engine-api/xFlowForm/pageQueryCirculatedItems

3、创建页面,目前【模型创建页面】待实现,先【直接创建页面】,在目录中鼠标右键展开菜单,点击【直接创建页面】;

(1)如首页,这个界面目前没有母版,创建时,模板时选择【移动端空页面】;

(2)如创建待办、已办、传阅界面,这些界面都是列表页面,模板时选择【移动端列表页面】;

(3)如印章流程表单,这个是平台带有母版,有表单、正文、附件、关联、意见这些标签页,,模板时选择【移动端流程表单页面】;

4、设计页面:

(1)首页设计:点击页面菜单展开页面列表,点击首页对应的【设计表单】按钮;

鼠标定位在移动端设计舞台的位置,然后在左边的【控件库】中,点击【流式12列布局】,该布局会显示在移动端设计舞台相应位置。

鼠标点击移动端设计舞台的布局位置,如下:

点击左边【移动端基础组件】里的【图标】,这样图标就显示在中间的移动端设计舞台相应位置,在右边的【属性】里,可以调整图标类、图标文字;

首页中的发起申请、待阅、已办按钮都类似这种操作,在右边的【属性】的外观设置,样式为流式4等列布局,如果需要其他列布局样式,可以在样式字段进行调整。

点击页面顶部的【保存数据】,进行【页面预览】;

右键展开浏览器菜单,点击【检查】

调整为手机模式预览,选择IPhone 6/7/8 Plus,刷新显示如下。

(2)待办列表设计:

进入待办的页面设计界面,在右边的【属性】里,点击自定义模板的编辑按钮,将以下代码复制粘贴到自定义模板中,注意将以下红框标识的位置替换成该关联模型的主键值;

<div class="bui-btn bui-box" procId="{{procId}}" taskId="{{taskId}}" sealid="{{businessDataId}}">
    <div class="span1">
      <div class="item-title">流程名称:{{procName}}</div>
      <div class="item-text">当前步骤:{{taskName}}    接收时间:{{receiveTime}}</div>
    </div>
    <div class="icon-listright"></div>
  </div>

定位该列表位置,点击右上角【属性】,数据源服务编码选择待办服务,拼接cwTenantCode、cwAppToken、sord、sidx参数

  {
    "cwTenantCode": "${currentApp.tenantCode}",
    "cwAppToken": "${currentApp.parentAppCode}",
    "sord": "desc",
    "sidx": "receiveTime"
}

工作流待办接口排序key为sidx,值为需要排序的字段,排序顺序key为sord,降序则值为“desc”,升序则值为“asce”

 

在右边的【属性】里,将【是否需要搜索】的开关开启,【搜索字段】填入“procName”;


进入交互界面,在默认场景下,新增链接操作;

操作名称选择“链接”,在“打开弹窗页面编码”,选择移动端流程表单界面;

选择后,配置“弹窗页面传递参数”,systemCode、wfAppCode、action、workItemType是必须要传的参数,配置参数值说明如下:

  • systemCode参数值对应流程所在的应用模块编码
  • wfAppCode参数值对应该流程的编码,可查对应PC端里模块对应的流程编码
  • 当发起流程环节时,action的参数值为add,编辑时action=edit,查看时action=view
  • 当流程表单查看的是流程任务项时,workItemType=0

除了这几个,还需要传几个变量 procId 、 taskId 、 sealid,这3个值是变量,参数值以{}表示

举例:{procid}、{taskid}、{sealid},参数值格式为英文小写

  • procId指流程实例ID
  • taskId指的流程环节ID
  • sealid指表单ID

点击页面顶部的【保存数据】,进行【页面预览】;

待阅、已办列表的页面设计类似待办的界面设计操作,已办参数稍有不同,action的参数值为view,如截图所示;

(5)印章流程表单页面设计:

  • 表单中“公文标题”,通过拖动左边控件库中的【单行文本】放置中间流程表单的位置,右边属性"组件id"修改为公文标题对应的id,“组件标签名”修改为“公文标题”;

         “单号”一栏也是类似操作。

         “借用事由”一栏拖动左边控件库中的【多行文本】放置流程表单的相应位置,类似以上操作。

组件id取新增服务中的字段信息,如下图,打开印章管理新增服务,拷备新增字段配置中的相应字段信息放到“组件id”里。

  • “印章类型”字段,拖动左边控件库中的【数据字典】放置中间流程表单的相应位置,右边属性"组件id"、“组件标签名”进行更新;

在右边属性里的“数据字典编码”输入印章类型对应的字典编码;

  • “借用人”拖动左边控件库中的【用户选择】放置中间流程表单的相应位置,右边属性"组件id"、“组件标签名”进行更新

默认显示当前发起人信息

“借用部门”拖动控件库里里的【组织选择】,进行以上类似操作,但在“默认选中节点数据”中,需要修改为对应的信息,才能默认显示当前发起人所在部门信息;

  • “使用开始日期”拖动左边控件库中的【用户选择】放置中间流程表单的相应位置,右边属性"组件id"、“组件标签名”进行更新;

“使用结束日期”也类似操作;

在右边属性里的“显示配置”选择“只显示日期”,这样时间会精确到日,不会将时分秒显示出来;

  • “单号”在发送下一步根据规则显示出来

    首先在新增服务里,配置多一个“定义参数”的步骤;

默认表达式:#buildNumber(YZ${now.yyyyMM}${monthNum.now.yyyy-xt(3)})#,并保存服务;

将单号设置为可读(由于移动端隐藏域没有页面初始化事件,暂时无法在隐藏域设置发起流程时,控制单号隐藏,后续该功能会增加)

 

  • 流程表单需要配置服务

表单初始化请求方式,选择获取单条记录服务;

表单新增请求方式,选择新增服务;

表单更新请求方式,选择新增或修改服务;

表单删除请求方式,选择删除服务;

(4)配置发起流程的参数设置:

在【页面】列表点击“首页”的【设计表单】按钮,进入首页的页面设计界面;

定位到“发起流程”位置,然后点击右上角的【交互】标签页,鼠标停在默认场景,右键展开交互菜单,点击【新增操作】

选择操作名称为“链接”;

显示链接的配置页面,“打开弹窗页面编码”的选择界面,选择发起流程对应的流程表单页面,如下;

选择后,配置“弹窗页面传递参数”,systemCode、wfAppCode、action、workItemType是必须要传的参数,配置参数值如下:

(5)配置待办的链接

定位到“待办”位置,然后点击右上角的【交互】标签页,鼠标停在默认场景,右键展开交互菜单,点击【新增操作】

选择操作名称为“链接”,显示链接的配置页面,“打开弹窗页面编码”的选择界面,选择待办页面


(6)配置待阅的链接:

定位到“待阅”位置,然后点击右上角的【交互】标签页,鼠标停在默认场景,右键展开交互菜单,点击【新增操作】

选择操作名称为“链接”,显示链接的配置页面,“打开弹窗页面编码”的选择界面,选择待阅页面

 

(7)配置已办的链接:

定位到“已办”位置,然后点击右上角的【交互】标签页,鼠标停在默认场景,右键展开交互菜单,点击【新增操作】

选择操作名称为“链接”,显示链接的配置页面,“打开弹窗页面编码”的选择界面,选择已办页面

5、验证:

打开首页的页面设计界面;

进入首页的页面预览界面;

点击首页的发起流程,打开发起流程界面模拟移动端发起流程操作;

编辑表单信息(附件在PC端上传操作),点击发送;

再从待办打开查看

可以作传阅操作,对待阅列表、已办列表都可以验证。

6、打包下载:

在PC端验证了相应功能后,可以打包下载操作;

点击下载按钮出现移动端下载打包界面;

下载后,出现压缩包

解压下,修改index文件中的路径文件名

找到离线打包入口地址,将index修改为首页名称,如sy

index文件修改后,全选文件夹文件,右键添加成压缩包,以这个压缩包进行部署

 

7、部署,如部署到聆客上

https://beta.bingolink.biz/webos/

操作步骤如link产品发布的步骤:

http://linkdoc.bingosoft.net:8088/sidebars/bingoTouch/src/lightApp/uploadapp.html#%E7%A8%8B%E5%BA%8F%E5%8C%85%E7%AE%A1%E7%90%86

8、验证:在手机端验证配置的所有功能。