本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计，O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置，不需要过多的代码编写，业务人员可以直接进行修改操作。

在流程表单设计界面，可以在左边的工具栏找到ElementUI组件。

将对应的组件拖动到表单设计区域就可以创建组件了。下面我们逐个介绍一下对应的组件。

布局容器介绍

创建布局容器

选择常用布局，或在“布局代码”中输入相应的HTML内容，即可创建布局。

可参考ELementUI组件文档：https://element.eleme.cn/#/zh-CN/component/container

字段类型组件

字段类型的组件是指可存储数据的组件，包括了：输入框、自动完成框、计数器、单选框、多选框、选择器、级联选择器、开关和滑块。

字段类型的默认值、校验、校验脚本、区段等基本属性，都和基础的字段类组件是一样的，下面主要介绍每个组件的特有属性。

输入框

类似基础组件的文本字段和多行文本。

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/input

INPUT组件属性：

样例

下面设计一个样例，来说明一下Vue Data、Vue Methods、Vue Css和Vue Slots用法。

我们实现一个复合输入框，在输入框之前有一个下拉框，后面一个搜索按钮，如下效果：

首先我们设计好其他容器、表格、操作条等组件，在单元格中拖入Elinput组件。如下图：

１、在输入框组件的Vue Slots属性中添加以下代码：

其中<el-select>的solt属性“prepend”表示这是一个输入框前置内容，v-model指定下拉框值要绑定的数据，此数据会自动与业务数据绑定。可以在脚本中通过this.data.select访问到。

注意：v-model指定的数据不能与表单上其他任何组件的id同名，也不能与当前组件配置的json数据中的属性key同名。（可以通过组件属性框的“JSON”选项页可以查看到当前组件配置的完整json）

<el-option>中循环options，创建下拉框可选项。（稍后options将在Vue Data中创建它）

<el-button>中的solt属性“append”表示这是一个输入框后置内容。

<el-button>中的＠click属性监听click事件，并执行doSearch方法。（稍后将在Vue Methods中创建doSearch方法）

２、然后在Vue Data中创建需要的对象。输入以下代码：

options用于选择框的可选项。

3、在Vue Methods中创建需要的方法，输入代码如下：

此处返回一个方法，在点击按钮时调用。

4、为了调整选择框的宽恕，可以在Vue Css中输入以下内容：

这样，我们就实现了一个前有选择框，后有按钮的复合输入框。数据都绑定到了this.data中。

自动完成框

自动完成框和输入框类似，只是多了一个提供输入建议的功能。

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/input

属性

主要说明一下通过脚本提供可选建议列表。脚本返回一个方法，此方法接收两个参数querystring和callback，querystring接收当前输入的数据，当输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回。如：

注意：这里function内的this指向为表单组件的module，而不是Vue组件，你可以在脚本中使用this.vm访问Vue组件对现象。

计数器

仅允许输入标准的数字值。

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/input-number

属性

单选框和多选框

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/radio

                                 https://element.eleme.cn/#/zh-CN/component/checkbox

选择器

就是下拉列表选择框。

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/select

可选项脚本和分组可选项脚本

可选项脚本返回一个数组或者一个resolve了可选值数组的Promise对象，用于列示可选项。下面是示例代码：

当可选项分组选择“是”时，可选择脚本返回一个数组或者一个resolve了可选值数组的Promise对象，用于列示可选项，在返回的可选择组数中要增加分组信息，下面是示例代码：

自定义搜索和远程搜索方法

自定义搜索和远程搜索方法，都是返回一个function(querystring){} ；querystring为当前输入值，在此方法中修改options的值。

自定义搜索方法只在“允许搜索”为“是”时生效，它会在输入值发生变化时被调用。如下面的示例：

远程搜索方法和自定义搜索方法类似，“远程搜索”属性必须选择“是”才会生效。它会在输入值发生变化时被调用，下面是示例代码：

注意：这里function内的this指向为表单组件的module，而不是Vue组件，你可以在脚本中使用this.vm访问Vue组件对现象。

自定义选择模板

可以通过“自定义选项模板”来改变选择项的样式。下面是示例，在“自定义选项模板”中输入以下HTML内容

展现下过如下：

级联选择器

有层级关系的数据，需要进行选择时，可使用级联选择器。

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/cascader

可选值

可选值是一个脚本，需要返回一个可选值数组列表；或者一个resolve了可选值数组的Promise对象。下面是代码示例（部分内容）：

出于篇幅考虑，我们对Json内容进行了压缩，全部内容如下：

return[{value:'zhinan',label:'指南',children:[{value:'shejiyuanze',label:'设计原则',children:[{value:'yizhi',label:'一致'},{value:'fankui',label:'反馈'},{value:'xiaolv',label:'效率'},{value:'kekong',label:'可控'}]},{value:'daohang',label:'导航',children:[{value:'cexiangdaohang',label:'侧向导航'},{value:'dingbudaohang',label:'顶部导航'}]}]},{value:'zujian',label:'组件',children:[{value:'basic',label:'Basic',children:[{value:'layout',label:'Layout 布局'},{value:'color',label:'Color 色彩'},{value:'typography',label:'Typography 字体'},{value:'icon',label:'Icon 图标'},{value:'button',label:'Button 按钮'}]},{value:'form',label:'Form',children:[{value:'radio',label:'Radio 单选框'},{value:'checkbox',label:'Checkbox 多选框'},{value:'input',label:'Input 输入框'},{value:'input-number',label:'InputNumber 计数器'},{value:'select',label:'Select 选择器'},{value:'cascader',label:'Cascader 级联选择器'},{value:'switch',label:'Switch 开关'},{value:'slider',label:'Slider 滑块'},{value:'time-picker',label:'TimePicker 时间选择器'},{value:'date-picker',label:'DatePicker 日期选择器'},{value:'datetime-picker',label:'DateTimePicker 日期时间选择器'},{value:'upload',label:'Upload 上传'},{value:'rate',label:'Rate 评分'},{value:'form',label:'Form 表单'}]},{value:'data',label:'Data',children:[{value:'table',label:'Table 表格'},{value:'tag',label:'Tag 标签'},{value:'progress',label:'Progress 进度条'},{value:'tree',label:'Tree 树形控件'},{value:'pagination',label:'Pagination 分页'},{value:'badge',label:'Badge 标记'}]},{value:'notice',label:'Notice',children:[{value:'alert',label:'Alert 警告'},{value:'loading',label:'Loading 加载'},{value:'message',label:'Message 消息提示'},{value:'message-box',label:'MessageBox 弹框'},{value:'notification',label:'Notification 通知'}]},{value:'navigation',label:'Navigation',children:[{value:'menu',label:'NavMenu 导航菜单'},{value:'tabs',label:'Tabs 标签页'},{value:'breadcrumb',label:'Breadcrumb 面包屑'},{value:'dropdown',label:'Dropdown 下拉菜单'},{value:'steps',label:'Steps 步骤条'}]},{value:'others',label:'Others',children:[{value:'dialog',label:'Dialog 对话框'},{value:'tooltip',label:'Tooltip 文字提示'},{value:'popover',label:'Popover 弹出框'},{value:'card',label:'Card 卡片'},{value:'carousel',label:'Carousel 走马灯'},{value:'collapse',label:'Collapse 折叠面板'}]}]},{value:'ziyuan',label:'资源',children:[{value:'axure',label:'Axure Components'},{value:'sketch',label:'Sketch Templates'},{value:'jiaohu',label:'组件交互文档'}]}]

动态加载

首先设置“动态加载”属性为“是”。在可选值脚本中输入代码如下：

在“动态加载方法”属性中，输入如下代码：

注意：这里function内的this指向为表单组件的module，而不是Vue组件，你可以在脚本中使用this.vm访问Vue组件对现象。

开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/switch

滑块

通过拖动滑块在一个固定区间内进行选择。

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/slider

按钮

ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/button

控制按钮状态

我们可以在脚本中控制按钮的状态，只需要通过改变当前按钮组件的json配置数据即可。如以下代码：

这样的用法，在脚本中对每个ElementUI组件都是有效的。

图标

略

通用组件

　　系统并没有包装所有的ElementUI组件，虽然包装后的组件更方便使用，但灵活度也有所降低，所以我们提供了通用ElemenmtUI组件，以供用户创建其他的组件。

　　通用组件提供了“Vue Template”、“Vue App”和“Vue Css”三个脚本区域，来创建通用的Vue组件。

Vue Template：提供组件需要的HTML内容。

Vue App：提供组件需要Script内容，返回用于创建Vue实例的options对象。

Vue Css：css样式内容。

样例

我们以创建一个日期范围选择器为例，来创建一个通用组件。

在“Vue Template”中的输入以下代码：

点击＂Preview＂按钮可预览组件样式。

保存表单就创建了一个用与选择日期范围的组件，组件的值会自动绑定到“v-model”属性指向的key，本例中，选择框的值被绑定到了this.data.value1中。

我们在给日期选择框添加一些快捷选项。

在“Vue Template”中的<el-date-picker>中增加一个属性:picker-options="pickerOptions"：

然后在“Vue App”中添加代码如下：

然后可以再设置一下样式，在“Vue Css”中输入以下css:

.el-range-separator {
    padding: 0;
    color: #FF0000;
}

保存表单后就可以看到效果了。

一个通用组件创建了一个Vue应用，它同时可以包含多个ElementUI组件的。如在“Vue Template”中的输入以下代码：

在“Vue Css”中输入以下css:

其中我们用到了<el-card>，<el-input>和<el-select>等ELementUI组件，创建了一个复合组件。保存后预览表单会看到如下效果：

所有的v-model会自动绑定到业务数据，可以在脚本中使用this.data.xxx来访问到。注意：v-model请不要重名。

基于Vue的ElementUI组件就介绍到这里，更多内容可访问：

O2OA开发者社区：https://www.o2oa.net/develop.html

Vue官网：https://vuejs.org/

ELementUI官网：https://element.eleme.cn/

以上是在流程表单中使用基于Vue的ElementUI组件相关说明，更多关于O2OA流程设计的内容，请继续阅读下面的章节。

以下文章可能对您有帮助：

《流程管理平台概述》

《流程设计入口与应用权限说明》

《表单的创建与设计》

《流程表单事件功能介绍》

《拆分流程相关配置介绍》

《自定义提交功能》

《数据区段的设置》

《平台应用配置》

《数据表格的配置》

《数据模板的配置》

《手写板组件配置》

《在流程表单中使用基于Vue的ElementUI组件》

《流程设计实例：费用报销审批流程》