介绍

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

用于Web端的智慧审批的流程里，进行发起/办理/查看流程。

完整的小组件从开发到使用的流程为两部分：

• 开发者：创建——编译——上传部署——绑定套件——配置流程——发版上线
• 用户：安装套件——配置流程节点——发布流程——发起/办理

简要步骤

1、pai发布流程表单
2、云端-开发中心 - 流程建模更新表单
3、云端-开发中心 -沙箱安装
4、云端-控制台 -编辑流程并发布
5、云端-工作台 -发起新流程
6、云端-开发中心 - 重新保存套件的预发行版本
7、边端-同步这个套件
8、边端-控制台更新套件
9、边端-控制台编辑流程并发布
10、边端-发起新流程(以前发起的不受影响)

表单组件结构

├─static
│  └─form
│      └─form-test              // 表单文件名，即文件夹名
│         ├─web                 // 存放WEB表单目录
│         │   ├─index.vue       // web 主入口
│         │   └─form-test.js    // 编译后文件，根据表单文件名生成 【用于上传】
│         ├─app
│         │   ├─index.vue       // app 主入口
│         │   └─form-test.js    // 编译后文件，根据表单文件名生成【用于上传】
│         └─meta.json           // 配置文件（desc 设置表单名称，formId 绑定表单建模的表单）【用于上传】
│

meta.json 配置文件说明

{
    "info": {
        "desc": "总部请假单", // 表单名称
        "formId": "1342361442912964xxx" // 绑定【开发者中心】表单建模的表单
    },
}

index.vue 文件说明

该文件是编译小组件的主入口，可引用其他vue模块

功能解析

接口请求方法（$REQUEST）

this.$REQUEST({
    url: `${this.$BASE_URL}/console-api/user/v1/me`,
    method: 'GET'
})

接口请求前缀（$BASE_URL）

this.$REQUEST({
    url: `${this.$BASE_URL}/console-api/user/v1/me`,
    method: 'GET'
})

当前用户令牌（$TOKEN）

console.log('userToken==>', this.$TOKEN)

引用图片

引用的图片将会编译成Base64编码到JS小组件文件里（会影响JS文件大小）

功能例子

获取角色或权限

this.$REQUEST({
    url: `${this.$BASE_URL}/auth-api/oauth2/user`,
    method: 'POST',
}).then((res) => {})

或

this.$REQUEST({
    url: `${this.$BASE_URL}/auth-api/oauth2/getSuiteInfo`,
    method: 'GET',
    params: {
        appCode: 'xxx-套件code',
    },
}).then((res) => {})

xxx.js 文件说明

该与文件夹名字相同的JS文件，是为编译后生成的JS文件，是流程里加载的表单内容。【例：form-test.js】

创建表单组件

操作示例

表单目录：

1. 手动编写

在/static/form/xxx/web/ 下编写web端表单

例：/static/form/form-test/web/ index.vue

在/static/form/xxx/app/ 下编写app端表单

例：/static/form/form-test/app/ index.vue

2. 表单工具生成

2.1 登录开发者中心

开发中心 > 我的套件 > 开发 > 表单工具

拖拽布局，预览生成 后，即可 复制 到 index.vue

编译说明（使用NPM编译）

编译前需要安装当前工程依赖

npm install

需安装 pai-build-widget 插件【脚手架里已有】

1、全部编译

将会对/static/form/ 里的每个文件夹进行编译
/static/form/xxx【表单名】

npm run build:form

2、编译WEB表单

只是编译所有web端表单

npm run build:form-web

2、编译APP表单

只是编译所有app端表单

npm run build:form-app

3、编译指定名称的表单

npm run build:form -n xxx(文件夹名)

• 编译名为form-test的web、app表单

npm run build:form -n form-test

• 编译名为form-test的web表单

npm run build:form-web -n form-test

• 编译名为form-test的app表单

npm run build:form-app -n form-test

预览表单

打开页面，输入以下路由即可查看（未编译预览/已编译预览）；xxx为当前工程二级路由：

http://localhost:80/xxxx/preview

可进行 切换【APP端/WEB端】 ，以及 切换【实时预览/编译预览】 ，以查看表单的显示效果。

上传发布WEB表单

上传发布所需文件：

• meta.json
• /web/xxx.js（xxx 为文件夹名）
• /app/xxx.js（xxx 为文件夹名）

PAI 工具发布部署

注：表单存在版本隔离，每次部署将会进行添加0.01个版本，即1.01 => 1.02。

pai form deploy -n xxx

发布表单(WEB+APP)

pai form deploy -n form_test_a

发布WEB表单

pai form deploy web -n form_test_a

发布APP表单

pai form deploy app -n form_test_a

绑定流程表单

操作示例

1. 登录开发者中心

开发中心 > 套件 > 流程服务 > 添加流程

添加后即可配置流程节点

2.切换到【应用中心】

将套件发布或更新版本

安装套件及配置流程

操作示例

1. 登录【控制台】，打开【应用市场】

安装【应用套件】

进入 应用管理 > 流程配置

2. 配置流程

进行流程节点配置

3. 提交与发布

提交后关闭，刷新列表，点击【发布】

发起/办理 流程

操作示例

打开 工作台 > 应用 > 流程中心

1. 选择表单

2. 填写表单及送办

3. 待办-表单处理【办理/驳回/转办…】

至此完成表单的所有步骤。