7.1 在線表單設(shè)計一

1、表信息定義

     如下圖所示，添加加/修改表，若數(shù)據(jù)庫中不存在目標(biāo)表，則需要點擊“生成數(shù)據(jù)庫表”執(zhí)行創(chuàng)建表結(jié)構(gòu)；該功能實際上是將數(shù)據(jù)庫中的表結(jié)構(gòu)再次映射到該頁面上，方便后面表單設(shè)計。

     以下示例是個主從表模式，主表員工信息表，從表收入表，僅作演示，有興趣的開發(fā)人員可以做得更漂亮些。

2、表單（在線）設(shè)計

       點擊添加按鈕，打開富文本ckeditor設(shè)計器，如下圖所示，完成設(shè)計工作。

2.1 自動創(chuàng)建表單

2.2 自動創(chuàng)建表格

2.3 任務(wù)處理歷史

    此處只是占位，在流程運行過程中會自動拉取當(dāng)前任務(wù)的審批歷史，并填充到該區(qū)域。

2.4 處理任務(wù)的表單

2.5 源碼

<table border="1" cellpadding="5" cellspacing="2" style="border-collapse:collapse; border:1px solid rgb(245, 245, 245); font-size:12px; width:100%">
	<tbody>
		<tr>
			<td style="text-align:right; width:90px">工號:</td>
			<td>
			<div bindingfield="user_id" class="uflotext" id="cke_407" style="width:100%" type="text">$F{user_id}</div>
			</td>
			<td style="text-align:right; width:90px">姓名:</td>
			<td>
			<div bindingfield="user_name" class="uflotext" id="cke_405" style="width:100%" type="text">$F{user_name}</div>
			</td>
		</tr>
	</tbody>
</table>

<div class="uflogrid" id="cke_403">
<p> </p>

<div class="uflogridtoolbar">添加刪除</div>

<div class="uflogridheader"><span bindingfield="position" class="uflogridcolumn" style="width:50%">崗位</span><span bindingfield="salary" class="uflogridcolumn" style="width:49%">收入</span></div>

<div class="uflogridcontent"><span class="uflogridcontentvalue" style="width:50%">......</span><span class="uflogridcontentvalue" style="width:49%">......</span></div>

<p> </p>
</div>

<table border="0" class="ufloapproveopinion" style="width:100%">
	<tbody>
		<tr>
			<td align="center" style="background-color:#fdfcc2">
			<div id="cke_8" style="margin:5px"><img src="http://localhost:8080/mis-web/dorado/res/ckeditor/plugins/uflo/images/component.png?t=D8HF" />任務(wù)處理歷史信息</div>
			</td>
		</tr>
	</tbody>
</table>

<table border="0" class="ufloapproveform" style="width:100%">
	<tbody>
		<tr>
			<td align="center" class="ufloapproveopinionbgcolor">
			<div id="cke_7" style="margin:5px"><img src="http://localhost:8080/mis-web/dorado/res/ckeditor/plugins/uflo/images/approvecomponent.png?t=D8HF" />處理任務(wù)的表單</div>
			</td>
		</tr>
	</tbody>
</table>

2.6 按鈕

2.7 保存設(shè)計

2.8 頁面預(yù)覽

3、流程圖在線設(shè)計

4、開始流程

     在大多數(shù)業(yè)務(wù)場景中，我們會將流程發(fā)起綁定在業(yè)務(wù)功能模塊中，不會像此示例一樣，有個集中發(fā)起流程的功能。

    點擊“開始流程”，如下所示：

    點擊“發(fā)起流程”按鈕，即可啟動新流程