网站快速优化排名软件,做外文H网站,企业oa系统价格,电子商务网站建设目标及利益分析本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计#xff0c;O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置#xff0c;不需要过多的代码编写#xff0c;业务人员可以直接进行修改操作。 在流程表单设计界面#xff0c;可以在左边的工具栏找到Ele…本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置不需要过多的代码编写业务人员可以直接进行修改操作。 在流程表单设计界面可以在左边的工具栏找到ElementUI组件。 将对应的组件拖动到表单设计区域就可以创建组件了。下面我们逐个介绍一下对应的组件。 布局容器 创建布局容器 选择常用布局或在“布局代码”中输入相应的HTML内容即可创建布局。 可参考ELementUI组件文档 Element - The worlds most popular Vue UI framework 字段类型组件 字段类型的组件是指可存储数据的组件包括了输入框、自动完成框、计数器、单选框、多选框、选择器、级联选择器、开关和滑块。 字段类型的默认值、校验、校验脚本、区段等基本属性都和基础的字段类组件是一样的下面主要介绍每个组件的特有属性。 输入框 类似基础组件的文本字段和多行文本。 ElementUI参考文档Element - The worlds most popular Vue UI framework 属性 属性 对应ElementUI参数 类型 说明 类型 type string texttextarea 和其他 原生 input 的 type 值 最大长度 maxlength number 字数统计 show-word-limit boolean 是否显示输入字数统计只在 type text 或 type textarea 时有效 可清空 clearable boolean 显示切换密码图标 show-password boolean 是否显示切换密码图标 尺寸 size string 输入框尺寸 多行文本行数 rows number 输入框行数只对 typetextarea 有效 适应高度 autosize boolean/object 自适应内容高度只对 typetextarea 有效可传入对象如{ 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属性中添加以下代码 el-select v-modelselect slotprepend placeholder请选择el-option v-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option /el-select el-button slotappend iconel-icon-search clickdoSearch/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 worlds most popular Vue UI framework 属性 属性 对应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和callbackquerystring接收当前输入的数据当输入建议数据 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 worlds most popular Vue UI framework 属性 属性 对应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参考文档Element - The worlds most popular Vue UI framework Element - The worlds most popular Vue UI framework 属性 对应ElementUI参数 类型 说明 可选值 单选框和多选框的可选项可提供列表和脚本 可选项设置和基础组件的单选框和多选框一样。 按钮模式 boolean 是传统单选模式还是按钮模式 字体颜色 text-color string 按钮形式的 Radio 激活时的文本颜色 背景颜色 fill string 按钮形式的 Radio 激活时的填充色和边框色 尺寸 size string 输入框尺寸 显示边框 border boolean 是否显示边框 样式和属性 object 附加在el-radio-group或el-checkbox-group上的样式和属性 组样式和组属性 object 附加在el-radio-group或el-checkbox-group上的样式和属性 Vue Data object/ function Vue组件的数据对象 Vue Methods object { [key: string]: Function } 被混入到 Vue 实例中方法定义 Vue Css css css样式 选择器 就是下拉列表选择框。 ElementUI参考文档Element - The worlds most popular Vue UI framework 属性 对应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 搜索条件无匹配时显示的文字也可以使用slotempty设置 无数据文本 no-data-text string 选项为空时显示的文字也可以使用slotempty设置 自定义搜索方法 filter-method function 自定义搜索方法返回一个function(querystring){} querystring为当前输入值在此方法中修改options的值。 远程搜索 remote boolean 是否为远程搜索 加载中文本 loading-text string 远程加载时显示的文字 远程搜索方法 remote-method function 远程搜索方法返回一个function(querystring){} querystring为当前输入值在此方法中修改options的值。 Select 样式和属性 object 附加在el-select上的样式和属性 Option 样式和属性 object 附加在el-option上的样式和属性 Group 样式和属性 object 附加在el-option-group上的样式和属性 组样式和组属性 object 附加在el-radio-group或el-checkbox-group上的样式和属性 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内容 span stylefloat: left{{ item.label }}/span span stylefloat: right; color: #8492a6; font-size: 13px{{ item.value }}/span 展现下过如下 级联选择器 有层级关系的数据需要进行选择时可使用级联选择器。 ElementUI参考文档Element - The worlds most popular Vue UI framework 属性 对应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参考文档Element - The worlds most popular Vue UI framework 属性 对应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参考文档Element - The worlds most popular Vue UI framework 属性 对应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参考文档Element - The worlds most popular Vue UI framework 属性 对应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 Csscss样式内容。 样例 我们以创建一个日期范围选择器为例来创建一个通用组件。 在“Vue Template”中的输入以下代码 el-date-pickerv-modelvalue1typedaterangerange-separator至start-placeholder开始日期end-placeholder结束日期 /el-date-picker 保存表单就创建了一个用与选择日期范围的组件组件的值会自动绑定到“v-model”属性指向的key本例中选择框的值被绑定到了this.data.value1中。 我们在给日期选择框添加一些快捷选项。 在“Vue Template”中的el-date-picker中增加一个属性:picker-optionspickerOptions el-date-pickerv-modelvalue2typedaterangealignrightunlink-panelsrange-separator至start-placeholder开始日期end-placeholder结束日期:picker-optionspickerOptions /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 classbox-carddiv slotheader classclearfixspan卡片名称/spanel-button stylefloat: right; padding: 3px 0 typetext操作按钮/el-button/divdivel-input placeholder请输入内容 v-modelinput1template slotprependHttp:///template/el-input/divdiv stylemargin-top: 15px;el-input placeholder请输入内容 v-modelinput2template slotappend.com/template/el-input/divdiv stylemargin-top: 15px;el-input placeholder请输入内容 v-modelinput3 classinput-with-selectel-select v-modelselect slotprepend placeholder请选择el-option label餐厅名 value1/el-optionel-option label订单号 value2/el-optionel-option label用户电话 value3/el-option/el-selectel-button slotappend iconel-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-cardel-input和el-select等ELementUI组件创建了一个复合组件。保存后预览表单会看到如下效果 所有的v-model会自动绑定到业务数据可以在脚本中使用this.data.xxx来访问到。注意v-model请不要重名。