app表单

智慧审批开发文档

1.0 介绍

流程表单与 Web 小组件一样，都是一个被编译成 JS 文件的异步 Vue 组件。

智慧审批前端工程中，已经实现了流程表单的 发起、办理、转办、查看流程 等功能，开发表单时，只需要开发具体的业务即可。

2.0 新建

2.1 新建套件

创建 前端工程，需要用到 套件标识，所以需要先新建一个套件，或者使用已有套件。

2.2 新建工程

然后使用 套件标识 创建前端工程

开发者后台 > 开发中心 > 我的套件 > 添加套件

pai 命令新建前端模板工程 pai-form-ui （-s： 为套件标识）

pai create front -n pai-form-ui -s com.demo.form

2.3 工程介绍

使用VsCode 打开 pai-form-ui 工程，然后加载前端工程所关联的库

npm install

动态格式化，不然开发过程中代码检查会报错

xy-format

文件介绍根目录 /static/form/form-test 下：

form-test： 文件夹为表单编译后名称；

app > index.vue : 文件为 app 端表单，开发移动端使用的表单;

web > index.vue : 文件为 web 端表单，开发 pc 端使用的表单;

form-test.js： 文件是 index.vue 文件编译后生成的表单文件；

meta.json : 文件是表单配置文件，发布上架时需要进行配置。

├─pages
├─plugins
├─server
├─static
│  ├─form
│  │  └─form-test //表单编译后名称：form-test.js
│  │      ├─app   //app端表单文件夹
│  │      └─web   //web端表单文件夹
│  ├─lottie
│  └─widget
├─store
├─style
└─util

3.0 开发

3.1 运行工程

在 VsCode 的终端中运行 npm 命令

npm run dev

3.2 调试预览

在 preview 中预览已创建的表单 http://localhost:81/form/preview

表单小组件默认预览 web 表单，预览 app 表单时，点击表单切换按钮，同时 F12 调试，设备仿真修改为手机模式。

3.3 开发表单

3.3.1 表单前端页面开发

• web 端表单开发

  web 表单是使用 element 组件库开发的，表单校验和控件使用上，与 APP 表单存在差异。

  element 官方文档

• app 端表单开发

  app 表单是使用 vant 组件库开发的，表单校验和控件使用上，与 web 表单存在差异。

  vant 官方文档

• 初始化表单

  在 created() 中初始化表单

  1. this.data.id 为表单 ID ，可根据表单 ID 获取表单已填写数据；
  2. this.state 为表单状态，add ：填写状态，view ：查看状态；

• 提交表单

  1. 在点击提交时，父组件会调用 index.vue 中的 methods下的 submit() 函数；

  2. 在 submit() 函数中校验表单；

  3. 校验成功后，调用 this.$emit("next", true, this.form) 将表单数据发送到父组件；

  4. 父组件会自动调用已配置流程，选择送办节点后确认提交表单。

3.3.2 表单后端业务开发

后端模板工程创建后，已经支持增、删、改、查等功能，具体表单开发，请根据具体业务开发即可。

4.0 发布上架

4.1 上传表单

4.1.1 创建表单

上传表单时必需填写表单 ID ，所以需要在表单建模中创建表单并生成表单 ID

开发中心 > 我的套件 > 前端工程 > 表单建模 > 添加页面>表单 ID

注意开发表单的前端工程名称

4.1.2 配置 meta.json 文件

根目录 /static/form/form-test/meta.json

formId: 表单 ID， 对应生成表单时的表单 ID

desc： 表单名称

{
  "info": {
    "desc": "审批文档",
    "formId": "1661613750199144448"
  }
}

4.1.3 编译表单

在 VsCode 的终端中使用 npm 命令编译表单，编译成功后，会分别在 web 和 app 文件夹下，生成 form-test.js 文件。

//项目根目录进行编译
npm run build:form

4.1.4 上传编译后表单

使用 pai 命令发布表单的 form-test.js 文件

form-test : 根目录 /static/form/form-test 文件夹名称，也是表单编译后的名称。

//项目根目录下发布
pai form deploy -n form-test

4.2 新建流程

流程建模中新建一条流程

开发者平台 > 开发中心 > 我的套件 > 流程建模 > 添加流程

4.3 配置流程

流程建模 > 编辑 > 审批配置 > 关联表单 > 添加图标 > 追加审批任务 > 结束

开放中心只是配置节点，还需要到控制台配置人员、岗位等权限，更新表单时，需要注意更新关联表单

1. 必填 > 应用图标；

2. 必填 > 关联上面已发布的表单；

3. 点击初始节点，追加审批任务（头像图标），可添加多个任务节点；

4. 添加结束节点，点击完成。

4.4 上架套件

测试阶段：可以直接发布沙箱，并在沙箱园区安装智慧审批和表单关联的套件。

4.4.1 推送工程到仓库

上架套件需要注意：如果工程中包含表单关联的业务，需使用 pai 命令将 pai-form-ui 工程推送到仓库。

//和表单没有关联关系可以不用上传前端工程
pai init
pai add *
pai commit 
pai push

4.4.2 提交审核

提交审核套件时，必须添加小组件或微应用

s="default">

开发中心>应用中心 > 套件 > 添加基本信息 > 添加版本 > 添加小组件、微应用 > 提交审核

4.4.3 发布套件

等待运营管理后台审核，审核通过后，在 应用中心 > 套件 选择对应的版本发布套件

自动发布版本：管理后台审核通过后，自动发布上架；

手动发布版本：管理后台审核通过后，手动上架条件。

5.0 发布流程

5.1 安装套件

控制台>应用 > 应用市场

1. 安装：智慧审批套件，可以查看已安装套件的表单；
2. 安装自定义包含表单流程的套件，列如：审批文档。

5.2 配置流程规则

控制台>应用 > 应用套件列表 > 自定义应用 > 配置 > 流程配置 > 自定义流程 > 编辑 > 点击审批任务

5.2.1 常规

任务名称，自定义任务名称

5.2.2 设置审批对象

三选一

从指定节点中获取：从前面的任务节点中选择办理人员；

从表单数据中获取：套件需要关联后端工程，办理人员将从表单填写的字段中获取，如： 人员、岗位、部门 等；

从组织架构中获取：从组织架构中选择任务节点的办理人员，还可设置配送范围和默认的审批对象。

5.2.3 设置审批规则

1. 审批模式：

   单签模式：一个任务节点只能选择一个人或岗位；

   会签模式：一个任务节点可以选多人和多岗位，需要所有人和所有岗位都通过，才能进入下一个任务节点；

   或签模式：一个任务节点可以选多人和多岗位，有一个人或一个岗位通过，就可以进入下一个任务节点。

2. 连续审批是否跳过：

   连续任务节点都是同一个人，并且都开启连续审批跳过，将跳过多个连续相同的任务节点，进入到下一个任务节点。

5.3 发布流程

每次修改流程后，必须重新发布流程，流程配置中发布按钮无法点击时，切换一下配置 tab或刷新界面。

控制台 > 应用 > 应用套件列表 > 已安装应用 > 配置

配置 > 流程配置 > 自定义流程 > 发布

5.4 查看表单

5.4.1 web 端查看表单

工作台 > 应用 > 所有应用 > 智慧审批 > 流程中心 > 自定义套件 > 表单

5.4.2 移动端查看表单

注意配置可视化楼层：地址

工作台 > 应用 > 智慧审批 > 流程中心 > 自定义套件 > 表单

6.0 表单更新

如果重新更新表单需要注意更新：

1. 开发中心：流程服务中，更新关联表单；
2. 开发中心：重新发布沙箱或者重新上架应用；
3. 控制台：流程配置中，编辑一下，重新发布流程。

6.1 更新关联表单

6.2 重新发布沙箱

6.3 重新发布流程