表单设计-九游会官网登录入口网页

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

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

创建布局容器

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

可参考elementui组件文档：

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

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

输入框

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

elementui参考文档：

属性：

样例

下面设计一个样例，来说明一下vue data、vue methods、vue css和vue slots用法。

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

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

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

其中的solt属性“prepend”表示这是一个输入框前置内容，v-model指定下拉框值要绑定的数据，此数据会自动与业务数据绑定。可以在脚本中通过this.data.select访问到。注意：v-model指定的数据不能与表单上其他任何组件的id同名，也不能与当前组件配置的json数据中的属性key同名。（可以通过组件属性框的“json”选项页可以查看到当前组件配置的完整json）

中循环options，创建下拉框可选项。（稍后options将在vue data中创建它）

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

中的＠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参考文档：

属性

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

属性

单选框和多选框

elementui参考文档：

选择器

就是下拉列表选择框。

elementui参考文档：

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

可选项脚本返回一个数组或者一个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参考文档：

可选值

可选值是一个脚本，需要返回一个可选值数组列表；或者一个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参考文档：

滑块

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

elementui参考文档：

按钮

elementui参考文档：

控制按钮状态

我们可以在脚本中控制按钮的状态，只需要通过改变当前按钮组件的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”中的中增加一个属性:picker-options="pickeroptions"：

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

	
		卡片名称
		操作按钮