如何在O2OA中使用ElementUI组件进行审批流程工作表单设计

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

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

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

布局容器

创建布局容器

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

可参考ELementUI组件文档：

Element - The world's most popular Vue UI framework

字段类型组件

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

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

输入框

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

ElementUI参考文档：Element - The world's most popular Vue UI framework

属性：

样例

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

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

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

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

<el-select v-model="select" slot="prepend" placeholder="请选择">
	<el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>

其中<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中创建需要的对象。输入以下代码：

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参考文档：Element - The world's most popular Vue UI framework

属性

主要说明一下通过脚本提供可选建议列表。脚本返回一个方法，此方法接收两个参数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参考文档：Element - The world's most popular Vue UI framework

属性

单选框和多选框

ElementUI参考文档：Element - The world's most popular Vue UI framework

                                 Element - The world's most popular Vue UI framework

选择器

就是下拉列表选择框。

ElementUI参考文档：Element - The world's most popular Vue UI framework

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

可选项脚本返回一个数组或者一个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内容

<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>

展现下过如下：

级联选择器

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

ElementUI参考文档：Element - The world's most popular Vue UI framework

可选值

可选值是一个脚本，需要返回一个可选值数组列表；或者一个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参考文档：Element - The world's most popular Vue UI framework

滑块

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

ElementUI参考文档：Element - The world's most popular Vue UI framework

按钮

ElementUI参考文档：Element - The world's most popular Vue UI framework

控制按钮状态

我们可以在脚本中控制按钮的状态，只需要通过改变当前按钮组件的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”中的输入以下代码：

<el-date-picker
    v-model="value1"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
</el-date-picker>

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

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

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

<el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
</el-date-picker>

然后在“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”中的输入以下代码：

<el-card class="box-card">
	<div slot="header" class="clearfix">
		<span>卡片名称</span>
		<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
	</div>
	<div>
		<el-input placeholder="请输入内容" v-model="input1">
			<template slot="prepend">Http://</template>
		</el-input>
	</div>
	<div style="margin-top: 15px;">
		<el-input placeholder="请输入内容" v-model="input2">
			<template slot="append">.com</template>
		</el-input>
	</div>
	<div style="margin-top: 15px;">
		<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
			<el-select v-model="select" slot="prepend" placeholder="请选择">
				<el-option label="餐厅名" value="1"></el-option>
				<el-option label="订单号" value="2"></el-option>
				<el-option label="用户电话" value="3"></el-option>
			</el-select>
			<el-button slot="append" icon="el-icon-search"></el-button>
		</el-input>
	</div>
</el-card>
在“Vue Css”中输入以下css:

  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

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

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