集成表单设计器

WebContent/WEB-INF/conf/gaowj/bl/applicationContext-business.xml

@@ -22,7 +22,7 @@
       <!-- 增加数据源dataSource-system -->
       <bean id="dataSource-system"  class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
             <!-- 基本属性 url、user、password -->  
-			<property name="url" value="jdbc:mysql://192.168.1.116:3306/lcyq_system?useUnicode=true&amp;characterEncoding=utf8&amp;autoReconnect=true&amp;useSSL=false" />  
+			<property name="url" value="jdbc:mysql://192.168.1.249:3306/lcyq_system?useUnicode=true&amp;characterEncoding=utf8&amp;autoReconnect=true&amp;useSSL=false" />  
 			<property name="username" value="lcyq_system" />  
 			<property name="password" value="lcyq_system" /> 
 			<property name="driverClassName" value="com.mysql.jdbc.Driver" /> 
@@ -73,9 +73,9 @@
         <!-- 增加数据源dataSource-standard -->
       <bean id="dataSource-standard"  class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
           <!-- 基本属性 url、user、password -->  
-			<property name="url" value="jdbc:mysql://192.168.1.116:3306/jw_standard?useUnicode=true&amp;characterEncoding=utf8&amp;autoReconnect=true&amp;useSSL=false" />  
-			<property name="username" value="jw_standard" />  
-			<property name="password" value="jw_standard" /> 
+			<property name="url" value="jdbc:mysql://192.168.1.249:3306/jf_standard?useUnicode=true&amp;characterEncoding=utf8&amp;autoReconnect=true&amp;useSSL=false" />  
+			<property name="username" value="jf_standard" />  
+			<property name="password" value="jf_standard" /> 
 			<property name="driverClassName" value="com.mysql.jdbc.Driver" /> 
 			
 			<!-- 配置初始化大小、最小、最大 -->  
@@ -124,7 +124,7 @@
        <!-- 增加数据源dataSource-business -->
        <bean id="dataSource-business"  class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
           <!-- 基本属性 url、user、password -->  
-			<property name="url" value="jdbc:mysql://192.168.1.116:3306/lcyq_business?useUnicode=true&amp;characterEncoding=utf8&amp;autoReconnect=true&amp;useSSL=false" />  
+			<property name="url" value="jdbc:mysql://192.168.1.249:3306/lcyq_business?useUnicode=true&amp;characterEncoding=utf8&amp;autoReconnect=true&amp;useSSL=false" />  
 			<property name="username" value="lcyq_business" />  
 			<property name="password" value="lcyq_business" /> 
 			<property name="driverClassName" value="com.mysql.jdbc.Driver" /> 
@@ -175,7 +175,7 @@
        <!-- 增加数据源dataSource-activiti -->
        <bean id="dataSource-activiti"  class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
           <!-- 基本属性 url、user、password -->  
-			<property name="url" value="jdbc:mysql://192.168.1.116:3306/lcyq_activiti?useUnicode=true&amp;characterEncoding=utf8&amp;autoReconnect=true&amp;useSSL=false" />  
+			<property name="url" value="jdbc:mysql://192.168.1.249:3306/lcyq_activiti?useUnicode=true&amp;characterEncoding=utf8&amp;autoReconnect=true&amp;useSSL=false" />  
 			<property name="username" value="lcyq_activiti" />  
 			<property name="password" value="lcyq_activiti" /> 
 			<property name="driverClassName" value="com.mysql.jdbc.Driver" /> 

WebContent/gaowj/header-simple-1.0.jsp

@@ -63,6 +63,15 @@
 <link rel="stylesheet" type="text/css" href="<%=commonPath%>/ria/jquery/jquery-easyui-1.4.1/themes/icon.css" charset="utf-8"></link>
 <link rel="stylesheet" type="text/css" href="<%=commonPath%>/ria/jquery/zTree_v3/css/zTreeStyle/zTreeStyle.css" charset="utf-8"></link>
 
+<!-- 添加vue支持 -->
+<script type="text/javascript" src="<%=localPath %>/js/vue/vue.js"></script>
+<!-- 添加element UI支持 -->
+<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+<!-- 添加表单设计器支持 -->
+<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
+<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
+
 <script type="text/javascript">	
 // 	$.ajaxSetup ({
 //       cache: false //关闭AJAX相应的缓存

WebContent/process/pages/formmodel/formmodelTabDetail.jsp

 <%@page contentType="text/html; charset=UTF-8"%>
 <form id="inputForm" method="post" style="width: 100%;">
-	<input type="hidden" name="FIELD_OPETYPE" id="OPETYPE" value="${is_row.OPETYPE}" /> <input type="hidden" name="FIELD_UUID" id="UUID" value="${is_row.UUID}" />
+	<input type="hidden" name="FIELD_OPETYPE" id="OPETYPE" value="${is_row.OPETYPE}" /> 
+	<input type="hidden" name="FIELD_UUID" id="UUID" value="${is_row.UUID}" />
 	<table align="center" border="0" cellpadding="0" cellspacing="0" class="tableStyle" style="margin: 10px 15px; width: 95%; line-height: 30px;">
 		<tr>
 			<td style="width: 10%;" class="tableStyleLable">
@@ -18,7 +19,73 @@
 			</td> -->
 		</tr>
 	</table>
-	<div id="ueditId" name="FIELD_ueditValue" style="height:100%">
-	</div>
+	<fm-making-form ref="fmMakeForm" preview>
+		<template slot="action">
+			<button @click="makeJson" type="button" class="el-button el-button--text el-button--medium">
+				<i class="el-icon-tickets"></i>
+				<span>生成JSON</span>
+			</button>
+		</template>
+	</fm-making-form>
+	<textarea id="ueditId" v-model="jsonStr" name="FIELD_MODEL_CONTENT" style="height:200px;width:100%">
+	</textarea>
 	
 </form>
+
+<script>
+$(function(){
+	new Vue({
+		el:"#inputForm",
+		data:{
+			json:{"list":[],"config":{"labelWidth":100,"labelPosition":"top","size":"small"}}
+		},
+		computed:{
+			jsonStr:{
+				set:function(value){
+					try{
+						this.json=JSON.parse(value);
+					}catch(e){
+						
+					}
+				},
+				get:function(){
+					return JSON.stringify(this.json);
+				}
+			}
+		},
+		methods:{
+			makeJson:function(){
+				this.json=this.$refs['fmMakeForm'].getJSON();
+			}
+		},
+		mounted:function(){
+			if('${is_row.MODEL_CONTENT}'=='{}'){
+				return;
+			}
+			var modelContent=${is_row.MODEL_CONTENT};
+			console.log(modelContent);
+			if(modelContent){
+				this.json=modelContent;
+				this.$refs['fmMakeForm'].setJSON(modelContent);
+			}
+		}
+	});
+});
+</script>
+<style>
+.el-message-box__wrapper{
+	z-index:10001 !important
+}
+.el-dialog__wrapper{
+	z-index:9999 !important
+}
+.v-modal{
+	z-index:9998 !important
+}
+.el-picker-panel{
+	z-index:10001 !important
+}
+.el-select-dropdown{
+	z-index:10000 !important
+}
+</style>
\ No newline at end of file

WebContent/process/pages/formmodel/js/formmodelTab.js

@@ -141,10 +141,10 @@ function addUrlOnloadCallback(is_row){
 //保存
 function insertData(is_entity){
 	var tableId = $.getUrlParam("tableId");
-	var ue=UE.getEditor('ueditId');
+	//var ue=UE.getEditor('ueditId');
 	is_entity.FIELD_TABLE_ID=tableId;
 	is_entity.FIELD_FLAG=is_entity.FLAG;
-	is_entity.FIELD_MODEL_CONTENT=ue.getContent();
+	//is_entity.FIELD_MODEL_CONTENT=ue.getContent();
 	delete is_entity.FIELD_ueditValue;
 	var v_result = formmodelModule.act.insertFormModel(is_entity);
 	$('#list').datagrid('reload');
@@ -157,17 +157,28 @@ function editRow(index) {
 	var is_row = $('#list').datagrid('getSelections');
 	$('#list').datagrid('clearSelections');
 	is_row[0].OPETYPE = 'update';
-	openEditRow("formmodelView_formmodelTabDetail",is_row[0],"编辑",true,0.95,0.95,0,0);	
+	
+	var row={};
+	$.extend(true,row,is_row[0]);
+	//去掉大文本内容MODEL_CONTENT
+	delete  row.MODEL_CONTENT;
+	openEditRow("formmodelView_formmodelTabDetail",row,"编辑",true,0.95,0.95,0,0);	
 }
 
 //加载修改子页面成功后的回调
 function updateUrlOnloadCallback(is_row){
-
+	var rows=$('#list').datagrid('getRows');
+	for(var i=0;i<rows.length;i++){
+		if(rows[i].UUID==is_row.UUID){
+			is_row.MODEL_CONTENT=rows[i].MODEL_CONTENT;
+			break;
+		}
+	}
 	initUeditor(is_row);
 }
 
 function initUeditor(is_row){
-	console.log(is_row);
+	return
 	UE.delEditor('ueditId');
 	var ue=UE.getEditor('ueditId',{});
 	 ue.ready(function(){
@@ -180,8 +191,8 @@ function initUeditor(is_row){
 //保存
 function updateData(is_entity){
 	
-	var ue=UE.getEditor('ueditId');
-	is_entity.FIELD_MODEL_CONTENT=ue.getContent();
+	//var ue=UE.getEditor('ueditId');
+	//is_entity.FIELD_MODEL_CONTENT=ue.getContent();
 	delete is_entity.FIELD_ueditValue;
 	v_result = formmodelModule.act.updateFormModel(is_entity);
 	$('#list').datagrid('reload');

WebContent/process/pages/process/detail.jsp

@@ -3,55 +3,118 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
-<title>流程申请</title>
-<link rel="stylesheet" type="text/css" href="${ctx}/jwapp/common/css/content_body.css" charset="utf-8"></link>
-<link rel="stylesheet" type="text/css" href="${ctx}/jwapp/common/css/content_table.css" charset="utf-8"></link>
-<link rel="stylesheet" type="text/css" href="${ctx}/jwapp/common/css/content_input.css" charset="utf-8"></link>
-<script type="text/javascript" src="${ctx}/process/pages/procinstance/js/procinstanceModule.js" charset="utf-8"></script>
-<script type="text/javascript" src="${ctx}/process/pages/proctask/js/proctaskModule.js" charset="utf-8"></script>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
 </head>
+<body>
+	<div id="app">
+		<div class="opt_buttons" style="padding: 20px 40px;">
+			<el-button :size="size" type="primary" icon="el-icon-check" @click="proc_save">保存</el-button>
+			<el-button :size="size" type="primary" icon="el-icon-d-arrow-right" @click="proc_next">下一步</el-button>
+			<el-button v-if="businessId!=''" :size="size" type="primary" icon="el-icon-back" @click="proc_next">退回</el-button>
+			<el-button v-if="type=='lct'" :size="size" type="primary" icon="el-icon-date" @click="toggle">数据</el-button>
+			<el-button v-if="type=='sj'&&businessId!=''" :size="size" type="primary" icon="el-icon-sort" @click="toggle">流程图</el-button>
+		</div>
+		<input type="hidden" v-model="procId" /> 
+		<input type="hidden" v-model="modelId" /> 
+		<input type="hidden" v-model="businessId">
+		<div v-show="type=='sj'" style="text-align: center">
+			<h1>${tableChinaeseName}</h1>
+			<div style="border:1px solid rgb(219, 211, 211);padding:20px;">
+				<fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm"> </fm-generate-form>
+			</div>
+		</div>
+		<div v-show="type=='lct'" v-if="businessId!=''">
+			<div style="overflow: auto;text-align:center;">
+				<img id="procImg" :src="src" />
+			</div>
+			<div>
+				<el-table
+			      :data="tableData"
+			      style="width: 100%">
+			      <el-table-column
+			        prop="ACTIVITY_NAME"
+			        label="环节名称">
+			      </el-table-column>
+			      <el-table-column
+			        prop="ASSIGNEE"
+			        label="办理人">
+			      </el-table-column>
+			      <el-table-column
+			        prop="START_TIME"
+			        label="开始时间">
+			      </el-table-column>
+			      <el-table-column
+			        prop="END_TIME"
+			        label="结束时间">
+			      </el-table-column>
+			    </el-table>
+			</div>
+		</div>
+	</div>
+	<script src="https://unpkg.com/vue/dist/vue.js"></script>
+	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+	<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
 
-<script>
+	<script type="text/javascript" src="${ctx}/process/pages/procinstance/js/procinstanceModule.js" charset="utf-8"></script>
+	<script type="text/javascript" src="${ctx}/process/pages/proctask/js/proctaskModule.js" charset="utf-8"></script>
+	<script>
 	var businessData = '${businessData}';
-	$(function() {
 	if (businessData != '') {
 			businessData = eval('(' + businessData + ')');
 		}else{
 			businessData={};
 		}
 		businessData = commonutil.keyAddStr(businessData);
-		if(typeof dataProcessing=='function'){
-			dataProcessing(businessData);
-		}
-		$("#form").form('load', businessData);
-		//如果已经结束，则隐藏保存，下一步，回退按钮
-		if(businessData.FIELD_COMPLETE==1){
-			$(".opt_buttons .historyBtn").hide();
+		//过滤非业务字段
+		var vueBusinessData={};
+		for(var key in businessData){//遍历json对象的每个key/value对,p为key
+			if(key!='FIELD_BUSINESS_ID'&&
+				key!='FIELD_COMPLETE'&&
+				key!='FIELD_PROC_DEFINITION_ID'&&
+				key!='FIELD_PROC_NAME'&&
+				key!='FIELD_INSTANCE_ID'){
+				vueBusinessData[key]=businessData[key];
 			}
-		//如果没有业务数据，说明是第一次新建，隐藏回退按钮和流程图按钮
-		if (Object.keys(businessData).length==0) {
-			$(".opt_buttons .backBtn").hide();
 		}
-		//设置流程图片的url
-		if(businessData.FIELD_INSTANCE_ID){
-			$("#procImg").attr('src','${ctx}/procinstanceData_showProcinstanceImg?instanceId='+businessData.FIELD_INSTANCE_ID);
+		
+		new Vue({
+			el : '#app',
+			data : {
+				jsonData : ${modelContent},
+				editData : vueBusinessData,
+				remoteFuncs : {
+	
+				},
+				type:'sj',
+				size:'small',
+				procId:'${procId}',
+				modelId:'${modelId}',
+				businessId:'${businessId}',
+				src:'${ctx}/procinstanceData_showProcinstanceImg?instanceId='+businessData.FIELD_INSTANCE_ID,
+				tableData:[]
+			},
+			methods : {
+				toggle:function(){
+					if(this.type=='sj'){
+						this.type='lct';
+					}else{
+						this.type='sj';
 					}
-		if(typeof afterLoadSuccess=='function'){
-			afterLoadSuccess(businessData);
+				},
+				proc_save:function(){
+					this.$refs.generateForm.getData().then(data => {
+		              	var query = data;
+						if(this.businessId!=''){
+		              		query.FIELD_UUID = this.businessId;
 		              	}
-	});
-	function proc_save() {
-		var returnIsValid = $('#form').form('validate');
-		if (returnIsValid) {
-			var query = $("#form").getFormVal();
-			query.FIELD_PROCID = $('#procId').val();
-			query.FIELD_FORM_MODEL_ID = $("#modelId").val();
 						var v_result;
-			if (Object.keys(businessData).length>0) {
-				delete query.FIELD_PROCID;
-				delete query.FIELD_FORM_MODEL_ID;
+						if (query.FIELD_UUID) {
 							v_result = proctaskModule.act.updateInfo(query);
 						}else{
+							query.FIELD_PROCID = this.procId;
+							query.FIELD_FORM_MODEL_ID = this.modelId;
 							v_result = procinstanceModule.act.insertInfo(query);
 						}
 						if (v_result.NAME == '999') {
@@ -61,22 +124,22 @@
 						} else {
 							$.messager.alert('提示',v_result.VALUE,'warning');
 						}
+		            }).catch(e => {
+		              // 数据校验失败
+		            })
+				},
+				proc_next:function(){
+					this.$refs.generateForm.getData().then(data => {
+		              	var query = data;
+		              	if(this.businessId!=''){
+		              		query.FIELD_UUID = this.businessId;
 		              	}
-	}
-
-	function proc_next() {
-		var returnIsValid = $('#form').form('validate');
-		if (returnIsValid) {
-			var query = $("#form").getFormVal();
-			query.FIELD_PROCID = $('#procId').val();
-			query.FIELD_FORM_MODEL_ID = $("#modelId").val();
 						var v_result;
-			
-			if (Object.keys(businessData).length>0) {
-				delete query.FIELD_PROCID;
-				delete query.FIELD_FORM_MODEL_ID;
+						if (query.FIELD_UUID) {
 							v_result = proctaskModule.act.updateInfoToNext(query);
 						}else{
+							query.FIELD_PROCID = this.procId;
+							query.FIELD_FORM_MODEL_ID = this.modelId;
 							v_result = procinstanceModule.act.insertInfoToNext(query);
 						}
 						if (v_result.NAME == '999') {
@@ -86,103 +149,37 @@
 						} else {
 							$.messager.alert('提示',v_result.VALUE,'warning');
 						}
-		}
-	}
-
-	function proc_back() {
-		var returnIsValid = $('#form').form('validate');
-		if (returnIsValid) {
-			var query = $("#form").getFormVal();
-			query.FIELD_PROCID = $('#procId').val();
-			query.FIELD_FORM_MODEL_ID = $("#modelId").val();
-			var v_result;
-
-			delete query.FIELD_PROCID;
-			delete query.FIELD_FORM_MODEL_ID;
-			v_result = proctaskModule.act.back(query);
+		            }).catch(e => {
+		              // 数据校验失败
+		            })
+				},
+				proc_back:function(){
+					this.$refs.generateForm.getData().then(data => {
+		              	var query = data;
+						if(this.businessId!=''){
+		              		query.FIELD_UUID = this.businessId;
+		              	}
+						var v_result = proctaskModule.act.back(query);
 						
 						if (v_result.NAME == '999') {
-				$.messager.alert('提示', '保存成功！', 'info', function() {
+							$.messager.alert('提示','保存成功！','info',function(){
 								window.close();
 							});
 						} else {
-				$.messager.alert('提示', v_result.VALUE, 'warning');
-			}
-		}
+							$.messager.alert('提示',v_result.VALUE,'warning');
 						}
-
-	function toggle() {
-		$(".chengobj").toggle();
-		init_proc_logs();
-	}
-
-	function init_proc_logs() {
-		$('#proc_logs').datagrid({
-			iconCls : $.getJwWindowPic(),
-			url : gaowj.WEB_APP_NAME + "/procinstanceData_procinstanceHistory",
-			queryParams : {
-				processInstanceId : '${instanceId}'
-			}, //查询参数
-			rownumbers : true, //显示索引号
-			singleSelect : false, //是否多选
-			fitColumns : false, //是否撑满
-			autoRowHeight : false, //设定高度
-			striped : true, //是否隔行显示
-			columns : [ [ {
-				field : 'ACTIVITY_NAME',
-				title : '环节名称',
-				width : '25%',
-				align : 'center'
-			}, {
-				field : 'ASSIGNEE',
-				title : '办理人',
-				width : '25%',
-				align : 'center'
-			}, {
-				field : 'START_TIME',
-				title : '开始时间',
-				width : '25%',
-				align : 'center'
-			}, {
-				field : 'END_TIME',
-				title : '结束时间',
-				width : '25%',
-				align : 'center'
-			} ] ],
-			onLoadSuccess : function() {
+		            }).catch(e => {
+		              // 数据校验失败
+		            })
 				}
+			},
+			mounted:function(){
+				var vue=this;
+				$.get(gaowj.WEB_APP_NAME + "/procinstanceData_procinstanceHistory?processInstanceId=${instanceId}",{},function(res){
+					vue.tableData=res.rowSet;
 				});
 			}
-</script>
-
-<style>
-.opt_buttons {
-	margin: 10px 25px;
-}
-</style>
-
-<body style="overflow:auto;">
-	<div class="opt_buttons">
-		<a href="#" class="easyui-linkbutton historyBtn" data-options="iconCls:'icon-ok',plain:true" onclick="javascript:proc_save()">保存</a>
-		<a href="#" class="easyui-linkbutton historyBtn" data-options="iconCls:'icon-ext-44_08',plain:true" onclick="javascript:proc_next()">下一步</a>
-		<a href="#" class="easyui-linkbutton backBtn historyBtn" data-options="iconCls:'icon-ext-44_08',plain:true" onclick="javascript:proc_next()">退回</a>
-		<a href="#" class="easyui-linkbutton backBtn chengobj" data-options="iconCls:'icon-ext-22_05',plain:true" onclick="javascript:toggle()">流程图</a>
-		<a href="#" style="display:none;" class="easyui-linkbutton chengobj" data-options="iconCls:'icon-ext-23_06',plain:true" onclick="javascript:toggle()">数据</a>
-	</div>
-	<div class="chengobj">
-		<form id="form">
-			<input type="hidden" id="procId" value="${procId}" /> 
-			<input type="hidden" id="modelId" value="${modelId}" /> 
-			<input type="hidden" name="FIELD_UUID" id="UUID" value="${businessId}">
-			${modelContent}
-		</form>
-	</div>
-	<div class="chengobj" style="display:none;">
-		<div style="overflow: auto;text-align:center;">
-			<img id="loadingImg" style="width: 20px; height: 20px; display: none;" src="${ctx}/gaowj/ria/jquery/jquery-easyui-1.4.1/themes/black/images/loading.gif">
-			<img id="procImg" style="display:none;" onload="$('#loadingImg').hide();$(this).show();" />
-		</div>
-		<div id="proc_logs" ></div>
-	</div>
+		})
+	</script>
 </body>
 </html>

WebContent/process/pages/procinstance/js/procinstanceModule.js

@@ -18,6 +18,8 @@ procinstanceModule.prototype.updateInfo = function(){};
 procinstanceModule.prototype.updateInfoToNext = function(){};
 //删除流程实例
 procinstanceModule.prototype.deleteInfo = function(){};
+//回退流程实例
+procinstanceModule.prototype.back = function(){};
 
 //创建一个数据操作对象，然后再后续使用
 procinstanceModule.act = new procinstanceModule("json").delegate("procinstanceAct");

WebContent/process/pages/procinstance/js/procinstanceTab.js

+var procinstanceTab_vue=null;
 /**
  * 序号：1
  * 功能：定义分页(EasyUI)
@@ -176,6 +177,7 @@ function addRow(){
 }
 //加载增加子页面成功后的回调
 function addUrlOnloadCallback(is_row){
+	procinstanceTab_vue=null;
 	$('#detail #FIELD_PROCDEFINITION_UUID').combobox({
 		data : v_data_procdefinition2,
 		valueField : 'UUID',
@@ -190,19 +192,37 @@ function addUrlOnloadCallback(is_row){
 }
 //保存
 function insertData(is_entity){
+	procinstanceTab_vue.$refs.generateForm.getData().then(data => {
+		is_entity=data;
 		is_entity.FIELD_PROCID=$('#detail #FIELD_PROCDEFINITION_UUID').combobox("getValue");
 		is_entity.FIELD_FORM_MODEL_ID=$("#FIELD_FORM_MODEL_ID").val();
 		var v_result = procinstanceModule.act.insertInfo(is_entity);
 		$('#list').datagrid('reload');
-	return v_result;
+		if (v_result != null && v_result != undefined) {
+			closeBox('detail');
+			$.messager.alert('提示', v_result.VALUE);	
+		}
+      }).catch(e => {
+        // 数据校验失败
+    	console.log(e);
+      })
 }
 
 function insertDataToNext(is_entity){
+	procinstanceTab_vue.$refs.generateForm.getData().then(data => {
+		is_entity=data;
 		is_entity.FIELD_PROCID=$('#detail #FIELD_PROCDEFINITION_UUID').combobox("getValue");
 		is_entity.FIELD_FORM_MODEL_ID=$("#FIELD_FORM_MODEL_ID").val();
 		var v_result = procinstanceModule.act.insertInfoToNext(is_entity);
 		$('#list').datagrid('reload');
-	return v_result;
+		if (v_result != null && v_result != undefined) {
+			closeBox('detail');
+			$.messager.alert('提示', v_result.VALUE);	
+		}
+      }).catch(e => {
+        // 数据校验失败
+    	console.log(e);
+      })
 }
 
 //加载修改子页面
@@ -216,27 +236,62 @@ function editRow(index) {
 
 //加载修改子页面成功后的回调
 function updateUrlOnloadCallback(is_row){
+	procinstanceTab_vue=null;
 	fillTable2(is_row.BUSINESS_ID,is_row.TASK_ID);
 }
 //保存
-function updateData(is_entity){
+function updateData(is_entity) {
+	procinstanceTab_vue.$refs.generateForm.getData().then(data => {
+		is_entity = data;
 		var v_result = procinstanceModule.act.updateInfo(is_entity);
 		$('#list').datagrid('reload');
-	return v_result;
+		if (v_result != null && v_result != undefined) {
+			closeBox('detail');
+			$.messager.alert('提示', v_result.VALUE);
+		}
+	}).catch(e => {
+		// 数据校验失败
+		console.log(e);
+	})
 }
 
 function fillTable2(businessId,taskId){
 	var info=proctaskModule.data.getInfo({
 		FIELD_BUSINESS_ID:businessId
 	});
-	$("#table_content").html(info.FORM_MODEL.MODEL_CONTENT);
+	
 	for(key in info.BUSINESS_DATA){
+		//过滤非业务字段
+		if(key!='BUSINESS_ID'&&
+				key!='COMPLETE'&&
+				key!='PROC_DEFINITION_ID'&&
+				key!='PROC_NAME'){
 			info.BUSINESS_DATA['FIELD_'+key]=info.BUSINESS_DATA[key];
+		}
 		delete info.BUSINESS_DATA[key];
 	}
 	info.BUSINESS_DATA['FIELD_OPETYPE']='update';
 	
-	if(typeof dataProcessing=='function'){
+	if (procinstanceTab_vue == null) {
+		procinstanceTab_vue = new Vue({
+			el : '#inputForm',
+			data : {
+				jsonData : {"list":[],"config":{"labelWidth":100,"labelPosition":"top","size":"small"}},
+				editData : {},
+				remoteFuncs : {}
+			}
+		});
+	}
+	try{
+		procinstanceTab_vue.jsonData=JSON.parse(info.FORM_MODEL.MODEL_CONTENT);
+	}catch(e){
+		procinstanceTab_vue.jsonData={"list":[],"config":{"labelWidth":100,"labelPosition":"top","size":"small"}};
+	}
+	
+	procinstanceTab_vue.editData=info.BUSINESS_DATA;
+	console.log(info.BUSINESS_DATA);
+	
+	/*if(typeof dataProcessing=='function'){
 		dataProcessing(info);
 	}
 	
@@ -245,13 +300,7 @@ function fillTable2(businessId,taskId){
 	if(typeof afterLoadSuccess=='function'){
 		afterLoadSuccess(info);
 	}
-	$.parser.parse('#table_content');
-}
-//下一步按钮执行事件
-function updateDataToNext(is_entity){
-	var v_result = procinstanceModule.act.updateInfoToNext(is_entity);
-	$('#list').datagrid('reload');
-	return v_result;
+	$.parser.parse('#table_content');*/
 }
 
 /****/
@@ -524,15 +573,29 @@ function fillTable(){
 		FIELD_PROCDEFINITION_UUID:$('#detail #FIELD_PROCDEFINITION_UUID').combobox("getValue")
 	});
 	var table_content=table_model.MODEL;
-	$("#table_content").html('');
 	$("#FIELD_FORM_MODEL_ID").val('');
 	
 	if($('#detail #FIELD_PROCDEFINITION_UUID').combobox("getValue")==''){
 		//什么都不做
 	}else if(table_content.MODEL_CONTENT=='-1'){
 		$.messager.alert('提示','该流程对应的表没有设置有效的模板信息！');
-	}else{
-		$("#table_content").html(table_content.MODEL_CONTENT);
+	}else {
+		if (procinstanceTab_vue == null) {
+			procinstanceTab_vue = new Vue({
+				el : '#inputForm',
+				data : {
+					jsonData : {"list":[],"config":{"labelWidth":100,"labelPosition":"top","size":"small"}},
+					editData : {},
+					remoteFuncs : {},
+					length:10
+				}
+			});
+		}
+		try{
+			procinstanceTab_vue.jsonData=JSON.parse(table_content.MODEL_CONTENT);
+		}catch(e){
+			procinstanceTab_vue.jsonData={"list":[],"config":{"labelWidth":100,"labelPosition":"top","size":"small"}};
+		}
 		$("#FIELD_FORM_MODEL_ID").val(table_content.UUID);
 	}
 	if(typeof afterLoadSuccess=='function'){
@@ -555,8 +618,32 @@ function showProcinstanceImg(index) {
 }
 
 //流程退回
-function backProc(is_entity){
-	var v_result = proctaskModule.act.back(is_entity);
+function backProc(is_entity) {
+	procinstanceTab_vue.$refs.generateForm.getData().then(data => {
+		is_entity = data;
+		var v_result = procinstanceModule.act.back(is_entity);
 		$('#list').datagrid('reload');
-	return v_result;
+		if (v_result != null && v_result != undefined) {
+			closeBox('detail');
+			$.messager.alert('提示', v_result.VALUE);
+		}
+	}).catch(e => {
+		// 数据校验失败
+		console.log(e);
+	})
+}
+//下一步按钮执行事件
+function updateDataToNext(is_entity){
+	procinstanceTab_vue.$refs.generateForm.getData().then(data => {
+		is_entity=data;
+		var v_result = procinstanceModule.act.updateInfoToNext(is_entity);
+		$('#list').datagrid('reload');
+		if (v_result != null && v_result != undefined) {
+			closeBox('detail');
+			$.messager.alert('提示', v_result.VALUE);	
+		}
+      }).catch(e => {
+        // 数据校验失败
+    	console.log(e);
+      })
 }
\ No newline at end of file

WebContent/process/pages/procinstance/procinstanceTabDetail.jsp

@@ -6,5 +6,13 @@
 <form id="inputForm" method="post" style="width: 100%;">
 	<input type="hidden" name="FIELD_OPETYPE" id="OPETYPE" value="${is_row.OPETYPE}" /> 
 	<input type="hidden" name="FIELD_UUID" id="UUID" value="${is_row.UUID}" />
-	<div id="table_content"></div>
+	<fm-generate-form :data="jsonData" :remote="remoteFuncs" 
+		:value="editData" 
+		ref="generateForm"></fm-generate-form>
 </form>
+
+<style>
+.el-picker-panel {
+	z-index: 10001 !important
+}
+</style>
\ No newline at end of file

WebContent/process/pages/procinstance/procinstanceTabDetailEdit.jsp

@@ -2,5 +2,13 @@
 <form id="inputForm" method="post" style="width: 100%;">
 	<input type="hidden" name="FIELD_OPETYPE" id="OPETYPE" value="${is_row.OPETYPE}" /> 
 	<input type="hidden" name="FIELD_UUID" id="UUID" value="${is_row.UUID}" />
-	<div id="table_content"></div>
+	<fm-generate-form :data="jsonData" :remote="remoteFuncs" 
+		:value="editData" 
+		ref="generateForm"></fm-generate-form>
 </form>
+
+<style>
+.el-picker-panel {
+	z-index: 10001 !important
+}
+</style>
\ No newline at end of file

src_process/com/gaowj/business/ProcinstanceBusiness.java

@@ -45,6 +45,14 @@ public interface ProcinstanceBusiness {
 	Map<String, Object> update_proc_instance_next(Map<String, Object> entity) throws ActivitiException,BusinessException;
 	
 	/**
+	 * 回退
+	 * 
+	 * @param entity
+	 * @throws BusinessException
+	 */
+	Map<String, Object> back(Map<String, Object> entity) throws ActivitiException,BusinessException;
+
+	/**
 	 * 删除记录
 	 * 
 	 * @param entity

src_process/com/gaowj/business/procdefinition/ProcdefinitionBusinessImpl.java

@@ -197,7 +197,10 @@ public class ProcdefinitionBusinessImpl implements ProcdefinitionBusiness {
 		}
 		Map<String, Object> query=new HashMap<String, Object>();
 		query.put("UUID", procdefinitionUuid);
-		String tableId=procdefinitionDAO.list_procde_finition(query).get(0).get("TABLE_ID").toString();
+		Map<String, Object> procDefinition=procdefinitionDAO.list_procde_finition(query).get(0);
+		String tableId=procDefinition.get("TABLE_ID").toString();
+		String tableChinaeseName = procDefinition.get("CONTENT").toString();
+		
 		Map<String, Object> query2=new HashMap<String, Object>();
 		query2.put("FLAG", 1);
 		query2.put("TABLE_ID", tableId);
@@ -208,7 +211,9 @@ public class ProcdefinitionBusinessImpl implements ProcdefinitionBusiness {
 			}};
 		}
 		
-		return listFormmodels.get(0);
+		Map<String, Object> result=listFormmodels.get(0);
+		result.put("TABLE_CHINAESE_NAME", tableChinaeseName);
+		return result;
 	}
 
 	/**

src_process/com/gaowj/business/procinstance/ProcinstanceBusinessImpl.java

@@ -183,6 +183,18 @@ public class ProcinstanceBusinessImpl implements ProcinstanceBusiness {
 	}
 	
 	@Override
+	public Map<String, Object> back(Map<String, Object> entity) throws ActivitiException,BusinessException {
+		ActivitiResultEnum activitiResultEnum = ActivitiTools.save(entity, ActivitiOptEnum.RALLBACK);
+		switch (activitiResultEnum) {
+		case OK:
+			break;
+		default:
+			throw new ActivitiException(activitiResultEnum.getMsg());
+		}
+		return entity;
+	}
+
+	@Override
 	public void delete_proc_instance(List<String> list) throws BusinessException {
 		// 查询流程实例表
 		Map<String, Object> query = new HashMap<String, Object>();

src_process/com/gaowj/business/proctask/ProctaskBusinessImpl.java

@@ -201,13 +201,16 @@ public class ProctaskBusinessImpl implements ProctaskBusiness {
 			// 根据表单模板id获取模板
 			Map<String, Object> formModel = getFormModelById(formModelId);
 			// 根据流程定义id获取存储业务数据的表
-			String tableName = getBusinessTableNameByProcDefinitionId(procDefinitionId);
+			Map<String, Object> procDefinition=getProcDefinitionByProcDefinitionId(procDefinitionId);
+			String tableName = procDefinition.get("TABLE_NAME").toString();
+			String tableChinaeseName = procDefinition.get("CONTENT").toString();
 			// 根据业务数据的表名和业务id，查询业务数据
 			Map<String, Object> businessData = getBusinessDataByBusinessTableAndBusinessId(tableName, businessId);
 			// 填充返回数据
 			info.put("FORM_MODEL", formModel);
 			info.put("BUSINESS_DATA", businessData);
 			info.put("PROCINSTANCE", procinstance);
+			info.put("TABLE_CHINAESE_NAME", tableChinaeseName);
 		}
 		return info;
 	}
@@ -225,9 +228,29 @@ public class ProctaskBusinessImpl implements ProctaskBusiness {
 	 * @return
 	 */
 	private String getBusinessTableNameByProcDefinitionId(String procDefinitionId) {
+		return getProcDefinitionByProcDefinitionId(procDefinitionId).get("TABLE_NAME").toString();
+	}
+	
+	/**
+	 * 根据流程定义id获取业务数据表的中文表名
+	 * 
+	 * @param procDefinitionId
+	 * @return
+	 */
+	private String getBusinessTableContentByProcDefinitionId(String procDefinitionId) {
+		return getProcDefinitionByProcDefinitionId(procDefinitionId).get("CONTENT").toString();
+	}
+	
+	/**
+	 * 根据流程定义id获取流程定义对象
+	 * 
+	 * @param procDefinitionId
+	 * @return
+	 */
+	private Map<String, Object> getProcDefinitionByProcDefinitionId(String procDefinitionId) {
 		Map<String, Object> query = new HashMap<String, Object>();
 		query.put("UUID", procDefinitionId);
-		return procdefinitionDAO.list_procde_finition(query).get(0).get("TABLE_NAME").toString();
+		return procdefinitionDAO.list_procde_finition(query).get(0);
 	}
 
 	private Map<String, Object> getBusinessDataByBusinessTableAndBusinessId(String tableName, String uuid) {

src_process/com/gaowj/formmodel/action/viewAction.java

 package com.gaowj.formmodel.action;
 
+import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
+import com.gaowj.business.FormmodelsBusiness;
 import com.gaowj.business.action.BasicAction;
+import com.gaowj.business.comp.BusinessManager;
 import com.gaowj.business.exception.BusinessException;
+import com.gaowj.business.util.Page;
 import com.gaowj.business.util.RequestUtils;
 
 public class viewAction extends BasicAction{
@@ -12,9 +17,24 @@ public class viewAction extends BasicAction{
 		return "formmodelTab";
 	}
 	
-	public String formmodelTabDetail() throws BusinessException{
-		Map<String,Object> query = RequestUtils.getUpdateFieldMapUtf8(request, RequestUtils.UPDATEDATAFIELDPREFIX);
-	    request.setAttribute("is_row", query);
+	public String formmodelTabDetail() throws BusinessException {
+		FormmodelsBusiness business = BusinessManager.getBusiness(FormmodelsBusiness.class);
+
+		Map<String, Object> query2 = RequestUtils.getUpdateFieldMapUtf8(request, RequestUtils.UPDATEDATAFIELDPREFIX);
+		query2.put("MODEL_CONTENT", "{}");
+		Map<String, Object> query = new HashMap<String, Object>();
+		if (query2.get("UUID") != null) {
+			query.put("UUID", query2.get("UUID"));
+
+			Page<Map<String, Object>> pageRows = business.list_form_model(1, 1, query);
+			List<Map<String, Object>> list = pageRows.getItems();
+			if (list.size() > 0) {
+				query = list.get(0);
+				query2.put("MODEL_CONTENT", list.get(0).get("MODEL_CONTENT"));
+			}
+		}
+		
+		request.setAttribute("is_row", query2);
 		return "formmodelTabDetail";
 	}
 	

src_process/com/gaowj/process/action/viewAction.java

 package com.gaowj.process.action;
 
+import java.sql.SQLException;
 import java.util.Map;
 
+import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONObject;
 import com.gaowj.business.ProcdefinitionBusiness;
 import com.gaowj.business.ProctaskBusiness;
 import com.gaowj.business.action.BasicAction;
 import com.gaowj.business.comp.BusinessManager;
 import com.gaowj.business.exception.BusinessException;
+import com.gaowj.business.util.QueryParamUtil;
 import com.gaowj.business.util.RequestUtils;
 
 public class viewAction extends BasicAction {
@@ -22,12 +25,18 @@ public class viewAction extends BasicAction {
 			// 通过流程id，获取表单
 			ProcdefinitionBusiness business = BusinessManager.getBusiness(ProcdefinitionBusiness.class);
 			Map<String, Object> model = business.findFormModel(procId);
+			//获取表的中文名
+			request.setAttribute("tableChinaeseName", model.get("TABLE_CHINAESE_NAME"));
+			model.remove("TABLE_CHINAESE_NAME");
+			
 			request.setAttribute("modelContent", model.get("MODEL_CONTENT"));
 			request.setAttribute("modelId", model.get("UUID"));
 		} else {
 			// 如果有业务id，则显示空表单和表单数据
 			ProctaskBusiness business = BusinessManager.getBusiness(ProctaskBusiness.class);
 			Map<String, Object> info = business.data_info(businessId);
+			request.setAttribute("tableChinaeseName", info.get("TABLE_CHINAESE_NAME"));
+			
 			Map<String, Object> formModel = (Map<String, Object>) info.get("FORM_MODEL");
 			request.setAttribute("modelContent", formModel.get("MODEL_CONTENT"));
 			request.setAttribute("modelId", formModel.get("UUID"));
@@ -37,7 +46,12 @@ public class viewAction extends BasicAction {
 			request.setAttribute("instanceId", procinstance.get("INSTANCE_ID"));
 			// 获取表单数据
 			Map<String, Object> businessData = (Map<String, Object>) info.get("BUSINESS_DATA");
-			request.setAttribute("businessData", JSONObject.toJSON(businessData));
+			try {
+				request.setAttribute("businessData", JSON.parse(JSON.toJSONString(QueryParamUtil.DateTimeToString(businessData))));
+			} catch (SQLException e) {
+				// TODO Auto-generated catch block
+				e.printStackTrace();
+			}
 			// 将业务主键id传回去
 			request.setAttribute("businessId", businessId);
 		}

src_process/com/gaowj/procinstance/action/actAction.java

@@ -184,4 +184,38 @@ public class actAction extends BasicAction {
 		return "json";
 	}
 	
+	/**
+	 * 更新
+	 * 
+	 * @param entity
+	 * @throws BusinessException
+	 */
+	public String back() throws BusinessException {
+		ProcinstanceBusiness business = BusinessManager.getBusiness(ProcinstanceBusiness.class);
+		Map<String, Object> entity = RequestUtils.getUpdateFieldMap(request, RequestUtils.UPDATEDATAFIELDPREFIX);
+
+		jsonObject = new JSONObject();
+		try {
+			entity = QueryParamUtil.StringToDate(entity);
+			// 去除不要更新的字段
+			entity.remove("OPETYPE");
+			// 更新
+			Map<String, Object> procinstance = business.update_proc_instance_next(entity);
+			// 操作日志
+			// sysbusiness.insert_logBusiness(具体方法，操作内容，操作描述，操作记录ID，操作记录中文描述，分类)
+			SystemOpeBusiness sysbusiness = BusinessManager.getBusiness(SystemOpeBusiness.class);
+			sysbusiness.insert_logBusiness("back", "" + procinstance, "回退流程实例数据", (String) entity.get("UUID"), (String) entity.get("CONTENT"), "procinstance");
+			//
+			//
+			jsonObject.putAll(Status.getStatusSuccessMessage("保存成功"));
+		} catch (ActivitiException e) {
+			jsonObject.putAll(Status.getStatusErrorMessage(e.getMessage()));
+			e.printStackTrace();
+		} catch (Exception e) {
+			jsonObject.putAll(Status.getStatusErrorMessage(e.getMessage()));
+			e.printStackTrace();
+		}
+		return "json";
+	}
+
 }