潘钊 / bsth_control · Files

<div class="modal fade" id="add_modal" tabindex="-1" role="basic"
	aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true"></button>
				<h4 class="modal-title">新增功能模块</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" id="module_add_form"
					action="/module" method="post">
					<input type="hidden" name="groupType" value="3">
					<div class="alert alert-danger display-hide">
						<button class="close" data-close="alert"></button>
						您的输入有误，请检查下面的输入项
					</div>
					<div class="form-body">
						<div class="form-group">
							<label class="col-md-3 control-label">所属组</label>
							<div class="col-md-9">
								<select class="form-control input-medium " name="" id="groupSelect"></select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label">所属目录</label>
							<div class="col-md-9">
								<select class="form-control input-medium " name="pId" id="dirSelect"></select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label">模块名</label>
							<div class="col-md-9">
								<input type="text" class="form-control input-medium" name="name" > <span class="help-inline">
									不要超过10个汉字长度 </span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label">片段路径</label>
							<div class="col-md-9">
								<input type="text" class="form-control input-medium" name="path" autocomplete="off">
								<span class="help-inline"> 片段，如：permission/module/list.html </span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label">片段渲染容器</label>
							<div class="col-md-9">
								<select class="form-control input-medium" name="container">
									<option value="pjax-container">pjax-container</option>
									<option value="route-container">route-container</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label">映射地址</label>
							<div class="col-md-9">
								<input type="text" class="form-control input-medium"
									name="mappSymbol">
								<span class="help-inline"> Controller对应的映射地址，如： /module </span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label">是否可用</label>
							<div class="col-md-9">
								<select class="form-control input-medium" name="enable">
									<option value="1">可用</option>
									<option value="0">禁用</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-3 control-label">描述</label>
							<div class="col-md-9">
								<input type="text" class="form-control input-medium" name="descriptions">
							</div>
						</div>
						<hr>
						<div class="form-group">
							<label class="col-md-3 control-label">基础资源</label>
							<div class="col-md-9">
								<div class="icheck-list">
                                     <label >
                                         <input type="radio" class="icheck" name="baseRes" value=1 > 继承BaseController 的基础接口</label>
                                     <label>
                                         <input type="radio" class="icheck" name="baseRes" value=0 checked> 不需要 </label>
                                 </div>
							</div>
						</div>
						<div class="form-group defaultRes" style="display: none;" >
							<div class="portlet-body">
                                    <div class="table-scrollable">
                                        <table class="table table-bordered table-advance">
                                            <thead>
                                                <tr>
                                                    <th style="width: 13%;text-align: center;"> # </th>
                                                    <th style="width: 29%;"> 映射 </th>
                                                    <th style="width: 29%;"> 请求方式 </th>
                                                    <th style="width: 29%;"> 资源名 </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                              <tr class="">
                                                  <td style="text-align: center;"> <input type="checkbox" checked class="icheck"> </td>
                                                  <td> <span class="mappSymbol_sync"></span> </td>
                                                  <td> get </td>
                                                  <td> 分页查询 </td>
                                              </tr>
                                              <tr class="">
                                                  <td style="text-align: center;"> <input type="checkbox" checked class="icheck"> </td>
                                                  <td> <span class="mappSymbol_sync"></span> </td>
                                                  <td> post </td>
                                                  <td> 新增/编辑 </td>
                                              </tr>
                                              <tr class="">
                                                  <td style="text-align: center;"> <input type="checkbox" checked class="icheck"> </td>
                                                  <td> <span class="mappSymbol_sync"></span> </td>
                                                  <td> delete </td>
                                                  <td> 删除 </td>
                                              </tr>
                                              <tr class="">
                                                  <td style="text-align: center;"> <input type="checkbox" checked class="icheck"> </td>
                                                  <td> <span class="mappSymbol_sync"></span>/{id} </td>
                                                  <td> get </td>
                                                  <td> 主键查询 </td>
                                              </tr>
                                              <tr class="">
                                                  <td style="text-align: center;"> <input type="checkbox" checked class="icheck"> </td>
                                                  <td> <span class="mappSymbol_sync"></span>/all </td>
                                                  <td> get </td>
                                                  <td> 查询所有 </td>
                                              </tr>
                                            </tbody>
                                        </table>
                                    </div>
                            </div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" id="addModuleButton">提交数据</button>
			</div>
		</div>
	</div>
</div>
<script id="res_tbody_temp" type="text/html">

</script>
<script>
	$(function() {
		var groupData = []
		,dirGroupMapp = {};//目录到组的映射
		
		var form = $('#module_add_form');
		var error = $('.alert-danger', form);
		
		//icheck
 		$('.icheck').iCheck({
		    checkboxClass: 'icheckbox_flat-green',
		    radioClass: 'iradio_flat-green',
		    increaseArea: '20%' // optional
		  });
		
		//modal 显示事件
		$('#add_modal').on('show.bs.modal', function(){
			refreshFormData(function(){
				var sel = getCurrSelNode();
				if(sel.length > 0){
					var orig = sel[0].original;
					//选中的是目录（二级）
					if(orig.groupType == '2'){
						$('#groupSelect').val(orig.pId).change();
						$('select[name=pId]').val(orig.id).change();
					}
					else if(orig.groupType == '1'){
						$('#groupSelect').val(orig.id).change();
					}
				}
			});
		})
		.modal('show');
		
		$('input[name=mappSymbol]').on('keyup change', function(){
			$('.mappSymbol_sync').text($(this).val());
		});
		
 		$('input[name=baseRes]').on('ifChanged', function(){
			var v = $(this).val();
			if(v == 1 && this.checked){
				if($.trim($('input[name=mappSymbol]').val()) == ''){
					layer.msg('请先输入Controler映射地址');
					
					var wrap = $(this).iCheck('uncheck').parent();
					setTimeout(function(){
						wrap.removeClass('checked');
						$('input[name=baseRes]:eq(1)').iCheck('check');
					}, 100);
					return false;
				}
				else{
					$('.defaultRes').slideDown(500, function(){
						$('#add_modal').animate({
							scrollTop: $('#add_modal')[0].scrollHeight
						}, 1100);
						
					});
				}
			}
			else
				$('.defaultRes').slideUp();
		});
		
/* 		$('select[name=pId]').on('change', function() {
			var objs = $('input[name=path],input[name=mappSymbol]')
				,dr = $('.defaultRes');
			if (this.value == '-2') {
				objs.attr('readonly', 'readonly');
				dr.hide();
			} else {
				objs.removeAttr('readonly');
				dr.show();
			}
		}); */
		
		$('#groupSelect').on('change', function(){
			var id = $(this).val();
			$.each(groupData, function(i, obj){
				if(obj.id == id){
					var option = '';
					$.each(obj.dirs, function(i, dir){
						option += '<option value="'+dir.id+'">'+dir.name+'</option>';
					});
					$('#dirSelect').html(option);
					return false;
				}
			});
		});

		//提交
		$('#addModuleButton').on('click', function() {
			form.submit();
		});
		//form validate
		form.validate({
			errorElement : 'span', 
			errorClass : 'help-block help-block-error', 
			focusInvalid : false, 
			rules : {
				name : {
					minlength : 2,
					required : true,
					maxlength : 10
				},
				path : {
					required : true
				}/* ,
				mappSymbol: {
					required : true
				} */
			},
			invalidHandler : function(event, validator) {         
				error.show();
				App.scrollTo(error, -200);
			},

			highlight : function(element) { 
				$(element).closest('.form-group').addClass('has-error'); 
			},

			unhighlight : function(element) { 
				$(element).closest('.form-group').removeClass('has-error'); 
			},

			success : function(label) {
				label.closest('.form-group').removeClass('has-error'); 
			},

			submitHandler : function(f) {
				var params = form.serializeJSON();
				error.hide();
				$post('/module', params, function(res){
					layer.msg('新增模块成功.');
					
					//添加资源
					if($('input[name=baseRes]:checked').val() == 1){
						submitBaseResource(res.t.id);
					}
					else{
						refreshJsTree();
						$('#add_modal').modal('hide');
					}
				});
			}
		});
		
		
		//提交默认资源
		function submitBaseResource(moduleId){
			var rows = $('.defaultRes table tbody')[0].rows
				,rsArray = [];
			$.each(rows, function(i, r){
				var cells = r.cells
					,c = $(cells[0]).find(':checkbox')
					,resObj = {name: $.trim($(cells[3]).text()), url: $.trim($(cells[1]).text())
							,method: $.trim($(cells[2]).text()),enable: c[0].checked,module: {id: moduleId}, descriptions: 'extends base' };
				
				rsArray.push(resObj);
			});
			
			if(rsArray.length > 0){
				$post('/resource/batch', {array: JSON.stringify(rsArray)}, function(){
					layer.msg('添加资源成功.');
					
					setTimeout(function(){
						refreshJsTree();
						$('#add_modal').modal('hide');
					}, 500);
				});
			}
		}
		
		//默认的BaseController接口
		/* function saveDefaultResource(t, rs){
			if(rs){
				var rsArray = [];
				for(var n in rs)
					rsArray = rsArray.concat(getDefaultRes(n, t.mappSymbol, t.id));
				
				if(rsArray.length == 0)
					return;
				
				$post('/resource/batch', {array: JSON.stringify(rsArray)}, function(){
					layer.msg('添加资源成功.');
				});
			}
		} */
		
		
		function refreshFormData(cb){
			groupData = [];
			$get('/module/findByGroupType',{group: '1,2'}, function(array){
				for(var i = 0,item; item=array[i++];){
					if(item.groupType == '1'){
						groupData.push(item);
					}
					
					for(var j = 0,item2;item2=array[j++];){
						if(item2.pId == item.id){
							if(!item.dirs)
								item.dirs = [];
							item.dirs.push(item2);
							
							dirGroupMapp[item2.id] = item.id;
						}
					}
				}
				
				var options = '';
				$.each(groupData, function(i, obj){
					options += '<option value="'+obj.id+'">'+obj.name+'</option>';
				});
				$('#groupSelect').html(options).change();
				
				cb && cb();
			});
		}
		
	});
</script>