本文主要介紹如何在O2OA中進(jìn)行審批流程表單或者工作流表單設(shè)計(jì)，O2OA主要采用拖拽可視化開(kāi)發(fā)的方式完成流程表單的設(shè)計(jì)和配置，不需要過(guò)多的代碼編寫，業(yè)務(wù)人員可以直接進(jìn)行修改操作。

　　在流程表單設(shè)計(jì)界面，可以在左邊的工具欄找到ElementUI組件。

將對(duì)應(yīng)的組件拖動(dòng)到表單設(shè)計(jì)區(qū)域就可以創(chuàng)建組件了。下面我們逐個(gè)介紹一下對(duì)應(yīng)的組件。

布局容器

創(chuàng)建布局容器

選擇常用布局，或在“布局代碼”中輸入相應(yīng)的HTML內(nèi)容，即可創(chuàng)建布局。

可參考ELementUI組件文檔：

Element - The world's most popular Vue UI framework

字段類型組件

　　字段類型的組件是指可存儲(chǔ)數(shù)據(jù)的組件，包括了：輸入框、自動(dòng)完成框、計(jì)數(shù)器、單選框、多選框、選擇器、級(jí)聯(lián)選擇器、開(kāi)關(guān)和滑塊。

　　字段類型的默認(rèn)值、校驗(yàn)、校驗(yàn)?zāi)_本、區(qū)段等基本屬性，都和基礎(chǔ)的字段類組件是一樣的，下面主要介紹每個(gè)組件的特有屬性。

輸入框

　　類似基礎(chǔ)組件的文本字段和多行文本。

ElementUI參考文檔：Element - The world's most popular Vue UI framework

屬性：

樣例

下面設(shè)計(jì)一個(gè)樣例，來(lái)說(shuō)明一下Vue Data、Vue Methods、Vue Css和Vue Slots用法。

我們實(shí)現(xiàn)一個(gè)復(fù)合輸入框，在輸入框之前有一個(gè)下拉框，后面一個(gè)搜索按鈕，如下效果：

首先我們?cè)O(shè)計(jì)好其他容器、表格、操作條等組件，在單元格中拖入Elinput組件。如下圖：

１、在輸入框組件的Vue Slots屬性中添加以下代碼：

<el-select?v-model="select"?slot="prepend"?placeholder="請(qǐng)選擇">
	<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”表示這是一個(gè)輸入框前置內(nèi)容，v-model指定下拉框值要綁定的數(shù)據(jù)，此數(shù)據(jù)會(huì)自動(dòng)與業(yè)務(wù)數(shù)據(jù)綁定?？梢栽谀_本中通過(guò)this.data.select訪問(wèn)到。注意：v-model指定的數(shù)據(jù)不能與表單上其他任何組件的id同名，也不能與當(dāng)前組件配置的json數(shù)據(jù)中的屬性key同名。（可以通過(guò)組件屬性框的“JSON”選項(xiàng)頁(yè)可以查看到當(dāng)前組件配置的完整json）

<el-option>中循環(huán)options，創(chuàng)建下拉框可選項(xiàng)。（稍后options將在Vue Data中創(chuàng)建它）

<el-button>中的solt屬性“append”表示這是一個(gè)輸入框后置內(nèi)容。

<el-button>中的＠click屬性監(jiān)聽(tīng)click事件，并執(zhí)行doSearch方法。（稍后將在Vue Methods中創(chuàng)建doSearch方法）

２、然后在Vue Data中創(chuàng)建需要的對(duì)象。輸入以下代碼：

return?{
????options:?[{
????????value:?'選項(xiàng)1',
????????label:?'用戶'
????},?{
????????value:?'選項(xiàng)2',
????????label:?'部門'
????},?{
????????value:?'選項(xiàng)3',
????????label:?'公司'
????}]
}

options用于選擇框的可選項(xiàng)。

3、在Vue Methods中創(chuàng)建需要的方法，輸入代碼如下：

return?{
????doSearch:?function(){
????????console.log(this.data.elinput);	?輸出輸入框中的值
????}.bind(this)
}

此處返回一個(gè)方法，在點(diǎn)擊按鈕時(shí)調(diào)用。

4、為了調(diào)整選擇框的寬恕，可以在Vue Css中輸入以下內(nèi)容：

??.el-select?.el-input?{
????width:?130px;
??}

這樣，我們就實(shí)現(xiàn)了一個(gè)前有選擇框，后有按鈕的復(fù)合輸入框。數(shù)據(jù)都綁定到了this.data中。

自動(dòng)完成框

自動(dòng)完成框和輸入框類似，只是多了一個(gè)提供輸入建議的功能。

ElementUI參考文檔：Element - The world's most popular Vue UI framework

屬性

主要說(shuō)明一下通過(guò)腳本提供可選建議列表。腳本返回一個(gè)方法，此方法接收兩個(gè)參數(shù)querystring和callback，querystring接收當(dāng)前輸入的數(shù)據(jù)，當(dāng)輸入建議數(shù)據(jù) resolve 時(shí)，通過(guò)調(diào)用 callback(data:[]) 來(lái)返回。如：

return?function(queryString,?callback){
??var?list?=?[{"value":?"流程"},{"value":?"內(nèi)容管理"},{"value":?"服務(wù)管理"}];
??var?returnList?=?list.filter(function(o){
??	return?(o.value.indexOf(queryString)!==-1)
??});
??callback(returnList);
}

注意：這里function內(nèi)的this指向?yàn)楸韱谓M件的module，而不是Vue組件，你可以在腳本中使用this.vm訪問(wèn)Vue組件對(duì)現(xiàn)象。

計(jì)數(shù)器

僅允許輸入標(biāo)準(zhǔn)的數(shù)字值。

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

可選項(xiàng)腳本和分組可選項(xiàng)腳本

可選項(xiàng)腳本返回一個(gè)數(shù)組或者一個(gè)resolve了可選值數(shù)組的Promise對(duì)象，用于列示可選項(xiàng)。下面是示例代碼：

//直接返回?cái)?shù)組,如需要禁用選擇項(xiàng)，在元素中增加disabled:?true

return?[
????{
????????"label":?"公司",
????????"value":?"company"
????},
????{
????????"label":?"部門",
????????"value":?"department"
????},
????{
????????"label":?"用戶",
????????"value":?"person"
????}
]

//返回一個(gè)Promise
return?new?Promise(function?(resolve)?{
????var?options?=?[
????????{
????????????"label":?"公司",
????????????"value":?"company"
????????},
????????{
????????????"label":?"部門",
????????????"value":?"department"
????????},
????????{
????????????"label":?"用戶",
????????????"value":?"person"
????????}
????];
????window.setTimeout(function?()?{
????????resolve(options);
????},?1000)
});

當(dāng)可選項(xiàng)分組選擇“是”時(shí)，可選擇腳本返回一個(gè)數(shù)組或者一個(gè)resolve了可選值數(shù)組的Promise對(duì)象，用于列示可選項(xiàng)，在返回的可選擇組數(shù)中要增加分組信息，下面是示例代碼：

return?[{
????label:?'熱門城市',
????options:?[{
????????value:?'Shanghai',
????????label:?'上海'
????},?{
????????value:?'Beijing',
????????label:?'北京'
????}]
},?{
????label:?'城市名',
????options:?[{
????????value:?'Chengdu',
????????label:?'成都'
????},?{
????????value:?'Shenzhen',
????????label:?'深圳'
????},?{
????????value:?'Guangzhou',
????????label:?'廣州'
????},?{
????????value:?'Dalian',
????????label:?'大連'
????}]
}];

自定義搜索和遠(yuǎn)程搜索方法

自定義搜索和遠(yuǎn)程搜索方法，都是返回一個(gè)function(querystring){} ；querystring為當(dāng)前輸入值，在此方法中修改options的值。

自定義搜索方法只在“允許搜索”為“是”時(shí)生效，它會(huì)在輸入值發(fā)生變化時(shí)被調(diào)用。如下面的示例：

//返回一個(gè)方法，其中this.json.$options存儲(chǔ)的是配置的可選項(xiàng)
return?function?(querystring)?{
????this.json.options?=?this.json.$options.filter(function?(item)?{
????????return?(item.label.indexOf(querystring)?!=?-1);
????});
}

遠(yuǎn)程搜索方法和自定義搜索方法類似，“遠(yuǎn)程搜索”屬性必須選擇“是”才會(huì)生效。它會(huì)在輸入值發(fā)生變化時(shí)被調(diào)用，下面是示例代碼：

//返回一個(gè)方法，其中this.json.$options存儲(chǔ)的是配置的可選項(xiàng)
return?function?(querystring)?{
????this.json.loading?=?true;	//設(shè)置組件為加載狀態(tài)
????window.setTimeout(function?()?{
????????this.json.loading?=?false;	//取消組件的加載狀態(tài)
????????this.json.options?=?this.json.$options.filter(function?(item)?{
????????????return?(item.label.indexOf(querystring)?!=?-1);
????????});
????}.bind(this),?2000);
}

注意：這里function內(nèi)的this指向?yàn)楸韱谓M件的module，而不是Vue組件，你可以在腳本中使用this.vm訪問(wèn)Vue組件對(duì)現(xiàn)象。

自定義選擇模板

可以通過(guò)“自定義選項(xiàng)模板”來(lái)改變選擇項(xiàng)的樣式。下面是示例，在“自定義選項(xiàng)模板”中輸入以下HTML內(nèi)容

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

展現(xiàn)下過(guò)如下：

級(jí)聯(lián)選擇器

有層級(jí)關(guān)系的數(shù)據(jù)，需要進(jìn)行選擇時(shí)，可使用級(jí)聯(lián)選擇器。

ElementUI參考文檔：Element - The world's most popular Vue UI framework

可選值

可選值是一個(gè)腳本，需要返回一個(gè)可選值數(shù)組列表；或者一個(gè)resolve了可選值數(shù)組的Promise對(duì)象。下面是代碼示例：

return?[{
????value:?'zhinan',
????label:?'指南',
????children:?[{
????????value:?'shejiyuanze',
????????label:?'設(shè)計(jì)原則',
????????children:?[{
????????????value:?'yizhi',
????????????label:?'一致'
????????},?{
????????????value:?'fankui',
????????????label:?'反饋'
????????},?{
????????????value:?'xiaolv',
????????????label:?'效率'
????????},?{
????????????value:?'kekong',
????????????label:?'可控'
????????}]
????},?{
????????value:?'daohang',
????????label:?'導(dǎo)航',
????????children:?[{
????????????value:?'cexiangdaohang',
????????????label:?'側(cè)向?qū)Ш?
????????},?{
????????????value:?'dingbudaohang',
????????????label:?'頂部導(dǎo)航'
????????}]
????}]
},?{
????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?圖標(biāo)'
????????},?{
????????????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?計(jì)數(shù)器'
????????},?{
????????????value:?'select',
????????????label:?'Select?選擇器'
????????},?{
????????????value:?'cascader',
????????????label:?'Cascader?級(jí)聯(lián)選擇器'
????????},?{
????????????value:?'switch',
????????????label:?'Switch?開(kāi)關(guān)'
????????},?{
????????????value:?'slider',
????????????label:?'Slider?滑塊'
????????},?{
????????????value:?'time-picker',
????????????label:?'TimePicker?時(shí)間選擇器'
????????},?{
????????????value:?'date-picker',
????????????label:?'DatePicker?日期選擇器'
????????},?{
????????????value:?'datetime-picker',
????????????label:?'DateTimePicker?日期時(shí)間選擇器'
????????},?{
????????????value:?'upload',
????????????label:?'Upload?上傳'
????????},?{
????????????value:?'rate',
????????????label:?'Rate?評(píng)分'
????????},?{
????????????value:?'form',
????????????label:?'Form?表單'
????????}]
????},?{
????????value:?'data',
????????label:?'Data',
????????children:?[{
????????????value:?'table',
????????????label:?'Table?表格'
????????},?{
????????????value:?'tag',
????????????label:?'Tag?標(biāo)簽'
????????},?{
????????????value:?'progress',
????????????label:?'Progress?進(jìn)度條'
????????},?{
????????????value:?'tree',
????????????label:?'Tree?樹形控件'
????????},?{
????????????value:?'pagination',
????????????label:?'Pagination?分頁(yè)'
????????},?{
????????????value:?'badge',
????????????label:?'Badge?標(biāo)記'
????????}]
????},?{
????????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?導(dǎo)航菜單'
????????},?{
????????????value:?'tabs',
????????????label:?'Tabs?標(biāo)簽頁(yè)'
????????},?{
????????????value:?'breadcrumb',
????????????label:?'Breadcrumb?面包屑'
????????},?{
????????????value:?'dropdown',
????????????label:?'Dropdown?下拉菜單'
????????},?{
????????????value:?'steps',
????????????label:?'Steps?步驟條'
????????}]
????},?{
????????value:?'others',
????????label:?'Others',
????????children:?[{
????????????value:?'dialog',
????????????label:?'Dialog?對(duì)話框'
????????},?{
????????????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:?'組件交互文檔'
????}]
}]

動(dòng)態(tài)加載

首先設(shè)置“動(dòng)態(tài)加載”屬性為“是”。在可選值腳本中輸入代碼如下：

return?[{
????"label":?"層級(jí)一",
????"value":?"level1"
},?{
????"label":?"層級(jí)二",
????"value":?"level2"
},?{
????"label":?"層級(jí)三",
????"value":?"level3",
????"leaf":?true			//表示層級(jí)三是葉子節(jié)點(diǎn)，不再有下一層級(jí)了
}]

在“動(dòng)態(tài)加載方法”屬性中，輸入如下代碼：

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);	//加載數(shù)據(jù)完成后回調(diào)
????},?1000)
}

注意：這里function內(nèi)的this指向?yàn)楸韱谓M件的module，而不是Vue組件，你可以在腳本中使用this.vm訪問(wèn)Vue組件對(duì)現(xiàn)象。

開(kāi)關(guān)

表示兩種相互對(duì)立的狀態(tài)間的切換，多用于觸發(fā)「開(kāi)/關(guān)」。

ElementUI參考文檔：Element - The world's most popular Vue UI framework

滑塊

通過(guò)拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇。

ElementUI參考文檔：Element - The world's most popular Vue UI framework

按鈕

ElementUI參考文檔：Element - The world's most popular Vue UI framework

控制按鈕狀態(tài)

我們可以在腳本中控制按鈕的狀態(tài)，只需要通過(guò)改變當(dāng)前按鈕組件的json配置數(shù)據(jù)即可。如以下代碼：

//獲取按鈕的module對(duì)象
var?module?=?this.form.get("elbutton");

//獲取組件的數(shù)據(jù)
var?json?=?module.json;
//設(shè)置按鈕為禁用
json.disabled?=?true;
//設(shè)置按鈕為loading狀態(tài)
json.loading?=?true;


//或----------------------------------------

//也可以通過(guò)vue組件獲取數(shù)據(jù)，如以下代碼
var?vm?=?module.vm;		//獲取到vue對(duì)象
var?json?=?vm.$data;
//設(shè)置按鈕為禁用
json.disabled?=?true;
//設(shè)置按鈕為loading狀態(tài)
json.loading?=?true;

這樣的用法，在腳本中對(duì)每個(gè)ElementUI組件都是有效的。

圖標(biāo)

略

通用組件

　　系統(tǒng)并沒(méi)有包裝所有的ElementUI組件，雖然包裝后的組件更方便使用，但靈活度也有所降低，所以我們提供了通用ElemenmtUI組件，以供用戶創(chuàng)建其他的組件。

　　通用組件提供了“Vue Template”、“Vue App”和“Vue Css”三個(gè)腳本區(qū)域，來(lái)創(chuàng)建通用的Vue組件。

Vue Template：提供組件需要的HTML內(nèi)容。

Vue App：提供組件需要Script內(nèi)容，返回用于創(chuàng)建Vue實(shí)例的options對(duì)象。

Vue Css：css樣式內(nèi)容。

樣例

我們以創(chuàng)建一個(gè)日期范圍選擇器為例，來(lái)創(chuàng)建一個(gè)通用組件。

在“Vue Template”中的輸入以下代碼：

<el-date-picker
????v-model="value1"
????type="daterange"
????range-separator="至"
????start-placeholder="開(kāi)始日期"
????end-placeholder="結(jié)束日期">
</el-date-picker>

點(diǎn)擊＂Preview＂按鈕可預(yù)覽組件樣式。

保存表單就創(chuàng)建了一個(gè)用與選擇日期范圍的組件，組件的值會(huì)自動(dòng)綁定到“v-model”屬性指向的key，本例中，選擇框的值被綁定到了this.data.value1中。

我們?cè)诮o日期選擇框添加一些快捷選項(xiàng)。

在“Vue Template”中的<el-date-picker>中增加一個(gè)屬性:picker-options="pickerOptions"：

<el-date-picker
??????v-model="value2"
??????type="daterange"
??????align="right"
??????unlink-panels
??????range-separator="至"
??????start-placeholder="開(kāi)始日期"
??????end-placeholder="結(jié)束日期"
??????: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:?'最近一個(gè)月',
????????????????????onClick(picker)?{
????????????????????????const?end?=?new?Date();
????????????????????????const?start?=?new?Date();
????????????????????????start.setTime(start.getTime()?-?3600?*?1000?*?24?*?30);
????????????????????????picker.$emit('pick',?[start,?end]);
????????????????????}
????????????????},?{
????????????????????text:?'最近三個(gè)月',
????????????????????onClick(picker)?{
????????????????????????const?end?=?new?Date();
????????????????????????const?start?=?new?Date();
????????????????????????start.setTime(start.getTime()?-?3600?*?1000?*?24?*?90);
????????????????????????picker.$emit('pick',?[start,?end]);
????????????????????}
????????????????}]
????????????}
????????};
????}
};

然后可以再設(shè)置一下樣式，在“Vue Css”中輸入以下css:

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

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

一個(gè)通用組件創(chuàng)建了一個(gè)Vue應(yīng)用，它同時(shí)可以包含多個(gè)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="請(qǐng)輸入內(nèi)容"?v-model="input1">
			<template?slot="prepend">Http://</template>
		</el-input>
	</div>
	<div?style="margin-top:?15px;">
		<el-input?placeholder="請(qǐng)輸入內(nèi)容"?v-model="input2">
			<template?slot="append">.com</template>
		</el-input>
	</div>
	<div?style="margin-top:?15px;">
		<el-input?placeholder="請(qǐng)輸入內(nèi)容"?v-model="input3"?class="input-with-select">
			<el-select?v-model="select"?slot="prepend"?placeholder="請(qǐng)選擇">
				<el-option?label="餐廳名"?value="1"></el-option>
				<el-option?label="訂單號(hào)"?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組件，創(chuàng)建了一個(gè)復(fù)合組件。保存后預(yù)覽表單會(huì)看到如下效果：

所有的v-model會(huì)自動(dòng)綁定到業(yè)務(wù)數(shù)據(jù)，可以在腳本中使用this.data.xxx來(lái)訪問(wèn)到。注意：v-model請(qǐng)不要重名。

以上是在流程表單中使用基于Vue的ElementUI組件相關(guān)說(shuō)明，更多關(guān)于O2OA流程設(shè)計(jì)的內(nèi)容，請(qǐng)繼續(xù)閱讀下面的章節(jié)。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-837498.html

到了這里，關(guān)于O2OA(翱途)開(kāi)發(fā)平臺(tái)如何在流程表單中使用基于Vue的ElementUI組件?的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！