O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?
本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计，O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置，不需要过多的代码编写，业务人员可以直接进行修改操作。
在流程表单设计界面，可以在左边的工具栏找到ElementUI组件。
将对应的组件拖动到表单设计区域就可以创建组件了。下面我们逐个介绍一下对应的组件。
布局容器
创建布局容器
选择常用布局，或在“布局代码”中输入相应的HTML内容，即可创建布局。
可参考ELementUI组件文档：
https://element.eleme.cn/#/zh-CN/component/container
字段类型组件
字段类型的组件是指可存储数据的组件，包括了：输入框、自动完成框、计数器、单选框、多选框、选择器、级联选择器、开关和滑块。
字段类型的默认值、校验、校验脚本、区段等基本属性，都和基础的字段类组件是一样的，下面主要介绍每个组件的特有属性。
类似基础组件的文本字段和多行文本。
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/input
属性：
属性
对应ElementUI参数
类型
说明
类型
type
string
text，textarea 和其他 原生 input 的 type 值
最大长度
maxlength
number
字数统计
show-word-limit
boolean
是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效
可清空
clearable
boolean
显示切换密码图标
show-password
boolean
是否显示切换密码图标
尺寸
size
string
输入框尺寸
多行文本行数
rows
number
输入框行数，只对 type="textarea" 有效
适应高度
autosize
boolean/object
自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }
改变大小
resize
string
控制是否能被用户缩放
头部图标
prefix-icon
string
输入框头部图标
尾部图标
suffix-icon
string
输入框尾部图标
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
Vue Slots
html
组件可用的slot的内容
样例
下面设计一个样例，来说明一下Vue Data、Vue Methods、Vue Css和Vue Slots用法。
我们实现一个复合输入框，在输入框之前有一个下拉框，后面一个搜索按钮，如下效果：
首先我们设计好其他容器、表格、操作条等组件，在单元格中拖入Elinput组件。如下图：
１、在输入框组件的Vue Slots属性中添加以下代码：
其中
２、然后在Vue Data中创建需要的对象。输入以下代码：
return {
options: [{
value: '选项1',
label: '用户'
}, {
value: '选项2',
label: '部门'
}, {
value: '选项3',
label: '公司'
}]
}
options用于选择框的可选项。
3、在Vue Methods中创建需要的方法，输入代码如下：
return {
doSearch: function(){
console.log(this.data.elinput); //// 输出输入框中的值
}.bind(this)
}
此处返回一个方法，在点击按钮时调用。
4、为了调整选择框的宽恕，可以在Vue Css中输入以下内容：
.el-select .el-input {
width: 130px;
}
这样，我们就实现了一个前有选择框，后有按钮的复合输入框。数据都绑定到了this.data中。
自动完成框和输入框类似，只是多了一个提供输入建议的功能。
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/input
属性
属性
对应ElementUI参数
类型
说明
可选值
fetch-suggestions
输入建议的可选项，可提供列表和脚本
弹出位置
placement
string
菜单弹出位置
尺寸
size
string
输入框尺寸
列表类名
popper-class
string
Autocomplete 下拉列表的类名
激活即列出输入建议
trigger-on-focus
boolean
是否在输入框 focus 时显示建议列表
头部图标
prefix-icon
string
输入框头部图标
尾部图标
suffix-icon
string
输入框尾部图标
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
Vue Slots
html
组件可用的slot的内容
主要说明一下通过脚本提供可选建议列表。脚本返回一个方法，此方法接收两个参数querystring和callback，querystring接收当前输入的数据，当输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回。如：
return function(queryString, callback){
var list = [{"value": "流程"},{"value": "内容管理"},{"value": "服务管理"}];
var returnList = list.filter(function(o){
return (o.value.indexOf(queryString)!==-1)
});
callback(returnList);
}
注意：这里function内的this指向为表单组件的module，而不是Vue组件，你可以在脚本中使用this.vm访问Vue组件对现象。
仅允许输入标准的数字值。
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/input-number
属性
属性
对应ElementUI参数
类型
说明
最大值
max
number
设置计数器允许的最大值
最小值
min
number
设置计数器允许的最小值
步长
step
number
计数器步长
只允许输入步长的倍数
step-strictly
boolean
是否只能输入 step 的倍数
数值精度
trigger-on-focus
boolean
是否在输入框 focus 时显示建议列表
尺寸
size
string
输入框尺寸
按钮位置
controls-position
string
控制按钮位置
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/radio
https://element.eleme.cn/#/zh-CN/component/checkbox
属性
对应ElementUI参数
类型
说明
可选值
单选框和多选框的可选项，可提供列表和脚本
可选项设置和基础组件的单选框和多选框一样。
按钮模式
boolean
是传统单选模式还是按钮模式
字体颜色
text-color
string
按钮形式的 Radio 激活时的文本颜色
背景颜色
fill
string
按钮形式的 Radio 激活时的填充色和边框色
尺寸
size
string
输入框尺寸
显示边框
border
boolean
是否显示边框
样式和属性
object
附加在
组样式和组属性
object
附加在
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
就是下拉列表选择框。
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/select
属性
对应ElementUI参数
类型
说明
可选项分组
boolean
是否对可选项进行分组，当选择“否”时，可通过配置列表或脚本两种方式提供可选项；当选择“是”时，只能通过脚本提供可选项。
可选项
提供选择框的可选项。
尺寸
size
string
输入框尺寸
可清空
clearable
boolean
是否可以清空选项
列表类名
popper-class
string
Select 下拉框的类名
是否多选
multiple
boolean
是否多选
合并Tags
collapse-tags
boolean
多选时是否将选中值按文字的形式展示
最多可选数
multiple-limit
number
多选时用户最多可以选择的项目数，为 0 则不限制
允许搜索
filterable
boolean
是否可搜索
创建新条目
allow-create
boolean
是否允许用户创建新条目，需配合 filterable 使用
无匹配文本
no-match-text
string
搜索条件无匹配时显示的文字，也可以使用slot="empty"设置
无数据文本
no-data-text
string
选项为空时显示的文字，也可以使用slot="empty"设置
自定义搜索方法
filter-method
function
自定义搜索方法，返回一个function(querystring){} ；querystring为当前输入值，在此方法中修改options的值。
远程搜索
remote
boolean
是否为远程搜索
加载中文本
loading-text
string
远程加载时显示的文字
远程搜索方法
remote-method
function
远程搜索方法，返回一个function(querystring){} ；querystring为当前输入值，在此方法中修改options的值。
Select 样式和属性
object
附加在
Option 样式和属性
object
附加在
Group 样式和属性
object
附加在
组样式和组属性
object
附加在
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
Vue Slots
html
组件可用的slot的内容
自定义选项模板
html
自定义选项样式的html
可选项脚本和分组可选项脚本
可选项脚本返回一个数组或者一个resolve了可选值数组的Promise对象，用于列示可选项。下面是示例代码：
//直接返回数组,如需要禁用选择项，在元素中增加disabled: true
return [
{
"label": "公司",
"value": "company"
},
{
"label": "部门",
"value": "department"
},
{
"label": "用户",
"value": "person"
}
]
//返回一个Promise
return new Promise(function (resolve) {
var options = [
{
"label": "公司",
"value": "company"
},
{
"label": "部门",
"value": "department"
},
{
"label": "用户",
"value": "person"
}
];
window.setTimeout(function () {
resolve(options);
}, 1000)
});
当可选项分组选择“是”时，可选择脚本返回一个数组或者一个resolve了可选值数组的Promise对象，用于列示可选项，在返回的可选择组数中要增加分组信息，下面是示例代码：
return [{
label: '热门城市',
options: [{
value: 'Shanghai',
label: '上海'
}, {
value: 'Beijing',
label: '北京'
}]
}, {
label: '城市名',
options: [{
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}, {
value: 'Dalian',
label: '大连'
}]
}];
自定义搜索和远程搜索方法
自定义搜索和远程搜索方法，都是返回一个function(querystring){} ；querystring为当前输入值，在此方法中修改options的值。
自定义搜索方法只在“允许搜索”为“是”时生效，它会在输入值发生变化时被调用。如下面的示例：
//返回一个方法，其中this.json.$options存储的是配置的可选项
return function (querystring) {
this.json.options = this.json.$options.filter(function (item) {
return (item.label.indexOf(querystring) != -1);
});
}
远程搜索方法和自定义搜索方法类似，“远程搜索”属性必须选择“是”才会生效。它会在输入值发生变化时被调用，下面是示例代码：
//返回一个方法，其中this.json.$options存储的是配置的可选项
return function (querystring) {
this.json.loading = true; //设置组件为加载状态
window.setTimeout(function () {
this.json.loading = false; //取消组件的加载状态
this.json.options = this.json.$options.filter(function (item) {
return (item.label.indexOf(querystring) != -1);
});
}.bind(this), 2000);
}
注意：这里function内的this指向为表单组件的module，而不是Vue组件，你可以在脚本中使用this.vm访问Vue组件对现象。
自定义选择模板
可以通过“自定义选项模板”来改变选择项的样式。下面是示例，在“自定义选项模板”中输入以下HTML内容
{{ item.label }}
{{ item.value }}
展现下过如下：
有层级关系的数据，需要进行选择时，可使用级联选择器。
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/cascader
属性
对应ElementUI参数
类型
说明
可选值
提供选择框的可选项。返回一个可选值数组列表；或者一个resolve了可选值数组的Promise对象
尺寸
size
string
输入框尺寸
可清空
clearable
boolean
是否可以清空选项
列表类名
popper-class
string
Select 下拉框的类名
完整路径:
show-all-levels
boolean
输入框中是否显示选中值的完整路径
分隔符:
separator
string
选项分隔符
允许搜索
filterable
boolean
是否可搜索选项
自定义搜索方法
filter-method
function
返回一个Function。自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中
筛选之前
before-filter
function
返回一个Function。筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选
展开方式
props.expandTrigger
boolean
次级菜单的展开方式
是否多选
props.multiple
boolean
是否多选
父子节点不关联
props.checkStrictly
boolean
是否严格的遵守父子节点不互相关联
返回完整数组
props.emitPath
boolean
在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
动态加载
props.lazy
boolean
是否动态加载子节点，需与 lazyLoad 方法结合使用
动态加载方法
props.lazyLoad
function
加载动态数据的方法，仅在 lazy 为 true 时有效; 返回一个function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
选项值属性
props.value
指定选项的值为选项对象的某个属性值
选项标签属性
props.label
指定选项标签为选项对象的某个属性值
子选项属性
props.children
指定选项的子选项为选项对象的某个属性值
选项禁用属性:
props.disabled
指定选项的禁用为选项对象的某个属性值
叶子节点标志属性:
props.leaf
指定选项的叶子节点的标志位为选项对象的某个属性值
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
Vue Slots
html
组件可用的slot的内容
可选值
可选值是一个脚本，需要返回一个可选值数组列表；或者一个resolve了可选值数组的Promise对象。下面是代码示例：
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: '组件交互文档'
}]
}]
动态加载
首先设置“动态加载”属性为“是”。在可选值脚本中输入代码如下：
return [{
"label": "层级一",
"value": "level1"
}, {
"label": "层级二",
"value": "level2"
}, {
"label": "层级三",
"value": "level3",
"leaf": true //表示层级三是叶子节点，不再有下一层级了
}]
在“动态加载方法”属性中，输入如下代码：
return function (node, resolve) {
window.setTimeout(function () { //用setTimeout模拟异步
var subNodes = [];
for (var i = 0; i < 3; i++) {
subNodes.push({
"value": node.value + "-" + i,
"label": node.label + "-" + i,
"leaf": node.level > 2
});
}
resolve(subNodes); //加载数据完成后回调
}, 1000)
}
注意：这里function内的this指向为表单组件的module，而不是Vue组件，你可以在脚本中使用this.vm访问Vue组件对现象。
表示两种相互对立的状态间的切换，多用于触发「开/关」。
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/switch
属性
对应ElementUI参数
类型
说明
宽度
width
number
switch 的宽度（像素）
打开文本
active-text
string
switch 打开时的文字描述
关闭文本
inactive-text
string
switch 关闭时的文字描述
打开颜色
active-color
string
switch 打开时的背景色
关闭颜色
inactive-color
string
switch 关闭时的背景色
值类型
string
switch 取值类型
打开的值
active-value
boolean / string / number
switch 打开时的值
关闭的值
inactive-value
boolean / string / number
switch 关闭时的值
打开图标
active-icon-class
string
switch 打开时所显示图标的类名，设置此项会忽略 active-text
关闭图标
inactive-icon-class
string
switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
通过拖动滑块在一个固定区间内进行选择。
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/slider
属性
对应ElementUI参数
类型
说明
最大值
max
number
最大值
最小值
min
number
最小值
步长
step
number
步长
是否显示间断点
show-stops
boolean
是否显示间断点
是否范围选择
range
boolean
是否范围选择
竖向模式
vertical
boolean
是否竖向模式
高度
height
string
Slider 高度，竖向模式时必填，竖向模式时默认为100px。
显示输入框
show-input
boolean
是否显示输入框，仅在非范围选择时有效
显示输入框按钮
show-input-controls
boolean
在显示输入框的情况下，是否显示输入框的控制按钮
输入框大小
input-size
string
输入框的尺寸
显示提示
show-tooltip
boolean
是否显示 tooltip
提示类名
tooltip-class
string
tooltip 的自定义类名
格式化提示
format-tooltip
function
格式化 tooltip message
Marks 标记
marks
object
标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
ElementUI参考文档：https://element.eleme.cn/#/zh-CN/component/button
属性
对应ElementUI参数
类型
说明
尺寸
size
string
按钮尺寸
类型:
type
string
类型：primary / success / warning / danger / info / text
图标
icon
string
图标类名
朴素按钮
plain
boolean
是否朴素按钮
圆角按钮
round
boolean
是否圆角按钮
圆型按钮
circle
boolean
是否圆形按钮
是否禁用
disabled
boolean
是否禁用状态
加载中
loading
boolean
是否加载中状态
默认焦点
autofocus
boolean
是否默认聚焦
显示文字
boolean
是否显示文本
Vue Data
object/
function
Vue组件的数据对象
Vue Methods
object
{ [key: string]: Function }
被混入到 Vue 实例中方法定义
Vue Css
css
css样式
控制按钮状态
我们可以在脚本中控制按钮的状态，只需要通过改变当前按钮组件的json配置数据即可。如以下代码：
//获取按钮的module对象
var module = this.form.get("elbutton");
//获取组件的数据
var json = module.json;
//设置按钮为禁用
json.disabled = true;
//设置按钮为loading状态
json.loading = true;
//或----------------------------------------
//也可以通过vue组件获取数据，如以下代码
var vm = module.vm; //获取到vue对象
var json = vm.$data;
//设置按钮为禁用
json.disabled = true;
//设置按钮为loading状态
json.loading = true;
这样的用法，在脚本中对每个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”中的
然后在“Vue App”中添加代码如下：
return {
data: function() {
return {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
}
};
}
};
然后可以再设置一下样式，在“Vue Css”中输入以下css:
.el-range-separator {
padding: 0;
color: #FF0000;
}
保存表单后就可以看到效果了。
一个通用组件创建了一个Vue应用，它同时可以包含多个ElementUI组件的。如在“Vue Template”中的输入以下代码：
在“Vue Css”中输入以下css:
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
#fff;
}
其中我们用到了
所有的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流程设计的内容，请继续阅读下面的章节。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章