shuzhan
/
ipcps-pc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!DOCTYPE html>
<html>
<head>
	<title>详情页</title>
	<!--#include file="common/_header.html"-->
	<style>
		.flex-list{
			display: flex;
			flex-direction:row;
			overflow: auto;
			flex-wrap: wrap;
		}

		.flex-list div{
			white-space: nowrap;
			min-width:150px;
			height:20px;
		}
	</style>
</head>
<body>
<article id="app" class="page-container">
	<form class="form form-horizontal" id="form1">
		<input type="hidden" class="input-text" id="parkId" name="parkId">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>园区名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" id="title" name="title">
			</div>
		</div>
		<!-- <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>园区介绍：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea type="text" class="textarea" id="details" name="details" style="height:300px"></textarea>
			</div>
		</div>-->
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>园区办公室：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal flex-list">
				<div v-for="item,index in adminList">
					<input name="checkedAdmins" type="checkbox" v-model="checkedAdmins" :value="item.id"/>
					{{item.realName}}
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>园区单位：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal flex-list">
				<div v-for="item,index in orgList">
					<input name="checkedOrgs" type="checkbox" v-model="checkedOrgs" :value="item.orgId"/>
					{{item.orgName}}
				</div>
			</div>
		</div>
		<div v-show="showTown" class="row cl">
			<label class="form-label col-xs-4 col-sm-3">相关乡镇场：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal flex-list">
				<div v-for="item,index in townList">
					<input name="checkedTowns" type="checkbox" v-model="checkedTowns" :value="item.townId"/>
					{{item.townName}}
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>顺序编号：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="number" class="input-text" id="orderId" name="orderId" value="0">
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" type="submit" value="提交">
			</div>
		</div>
	</form>
</article>
<!--_footer 作为公共模版分离出去-->
<!--#include file="common/_footer.html"-->
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>  
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="scripts/global.js"></script>

<!-- select2 start-->
<link rel="stylesheet" type="text/css" href="lib/select2/select2.min.css" />
<script src="lib/select2/select2.full.js"  type="text/javascript"></script>
<script src="lib/select2/select2.zh-CN.js"  type="text/javascript"></script>
<script src="lib/vue/vue.js"></script>
<!-- select2 end -->
<script type="text/javascript">
	var path = global_backend_url;
	var remoteUrl = "";

	$(document).ready(function(){			
		$("#form1").validate({
			rules:{
				title:{
					required:true
				},
				details:{
					required:true
				},
				orderId:{
					// required:true,
					checkedZZS:true
				}
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid",
			submitHandler:function(form){
				var loadingIndex = layer.load(1,{shade:[0.5,'#fff']});

				$(form).ajaxSubmit({
					type: 'post',
					url: remoteUrl,
					success: function(data){
						layer.close(loadingIndex);
						if(data.result){
							layer.msg('保存成功!',{icon:1,time:1000});
							
							var index = parent.layer.getFrameIndex(window.name);
							
							if(index>=0){		
								parent.reloadList();
								parent.layer.close(index);
							}
						}
						else{
							layer.msg(data.message + "",{icon:1,time:1000});
						}
					},
	                error: function(XmlHttpRequest, textStatus, errorThrown){
						layer.msg('error!',{icon:1,time:1000});
					}
				});
			}
		});

		$.validator.addMethod("checkedZZS",function(value,element,params){  
            var checkedZZS = /^[1-9]\d*$/;  
            return this.optional(element)||(checkedZZS.test(value));  
        },"请输入正整数");
	});
	
	var vm = new Vue({
		el: "#app",
		data : {
			adminList:[],
			orgList:[],
			townList:[],
			checkedAdmins:[],
			checkedOrgs:[],
			checkedTowns:[],
			showTown: false,
			townOrgId:''
		},
		watch : {
			checkedOrgs:function(newVal,oldVal){
				if(newVal.indexOf(this.townOrgId)>=0){
					this.showTown = true;
				}
				else{
					this.showTown = false;
				}
			}
		},
		mounted: function(){
			var self = this;

			//获取url中传参
			var id = getQueryString("id");
			var needLoad = false;
			
			remoteUrl = path + "/park/add";
			
			if(id!=null && id.length>0){
				remoteUrl = path + "/park/update";
				needLoad = true;
			}

			//读取所有园区办关联账户
			$.get(path + "/jpAdmin/findAdminListByRoleName",
			{
				roleDesc : "YQB"
			},function(jsonData){
				self.adminList = jsonData.data;
			},"json").then(function(){
				//读取所有单位
				return $.get(path + "/org/allList",null,function(jsonData){
					self.orgList=  jsonData.data;
				},"json");
			},"json").then(function(){
				var towns = self.orgList.filter(function(org){
					return org.orgName=='相关乡镇场';
				});

				if(towns.length>0){
					self.townOrgId = towns[0].orgId;
				}

				//读取乡镇场对应的具体单位
				return $.post(path + "/jpAdmin/findDepartmentByOrgId",{
					orgId: self.townOrgId
				},function(jsonData){
					self.townList = jsonData.data;
				},"json");
			}).then(function(){
				if(needLoad){
					var loadingIndex = layer.load(1, {shade: [0.1,'#fff']}); 
					
					$.get(path + "/park/detail/" + id,null, function(json){
						layer.close(loadingIndex);
						
						if(json.result){
							json2Form(json.data,"form1");

							self.checkedAdmins = json.data.parkAdminList.map(function(item){
								return item.adminId;
							});

							self.checkedOrgs = json.data.parkOrgList.map(function(item){
								return item.orgId;
							});
							
							self.checkedTowns = json.data.parkTownList.map(function(item){
								return item.orgId + "|" + item.name;
							});
						}
						else{
							layer.msg(json.message);					
						}				
					},"json");
				}
			});			
		}
	});
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>