add.html 4.22 KB
<div class="page-head">
	<div class="page-title">
		<h1>添加代码</h1>
	</div>
</div>

<ul class="page-breadcrumb breadcrumb">
	<li><a href="/pages/home.html" data-pjax>首页</a> <i class="fa fa-circle"></i></li>
	<li><span class="active">权限管理</span> <i class="fa fa-circle"></i></li>
	<li><a href="list.html" data-pjax>字典管理</a> <i class="fa fa-circle"></i></li>
	<li><span class="active">添加代码</span></li>
</ul>

<div class="portlet light bordered">
	<div class="portlet-title">
		<div class="caption">
			<i class="icon-equalizer font-red-sunglo"></i> <span
				class="caption-subject font-red-sunglo bold uppercase">表单</span>
		</div>
	</div>
	<div class="portlet-body form">
		<form action="/resource" class="form-horizontal" id="dict_add_form" >
		<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-4">
						<select name="dGroup" class="form-control" id="dGroupSelect"></select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">名称</label>
					<div class="col-md-4">
						<input type="text" class="form-control" name="dName" id="dNameInput">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">代码</label>
					<div class="col-md-4">
						<input type="text" class="form-control" name="dCode" id="dCodeInput" >
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">说明</label>
					<div class="col-md-4">
						<textarea class="form-control" rows="3" name="descriptions"></textarea>
					</div>
				</div>
			</div>
			<div class="form-actions">
				<div class="row">
					<div class="col-md-offset-3 col-md-4">
						<button type="submit" class="btn green" ><i class="fa fa-check"></i> 提交</button>
						<a type="button" class="btn default" href="list.html" data-pjax><i class="fa fa-times"></i> 取消</a>
					</div>
				</div>
			</div>
		</form>
		<!-- END FORM-->
	</div>
</div>

<script>
$(function(){
	$get('/dictionary/all', {dGroup_eq: 0}, function(array){
		var options = '<option value="0">新建分组</option>';
		
		$.each(array, function(i,d){
			options += '<option value="'+d.dCode+'">'+( d.dName + ' -' + d.dCode)+'</option>';
		});
		
		$('#dGroupSelect').html(options)
			.on('change', setPinYin);
	});
	
	//输入名称,自动生成代码
	$('#dNameInput').on('keyup', setPinYin);
	
	function setPinYin(){
		var val = $('#dNameInput').val();
		if($('#dGroupSelect').val() == 0)
			$('#dCodeInput').val(pinyin.getFullChars(val));
		else
			$('#dCodeInput').val(pinyin.getCamelChars(val));
	}
	
	var form = $('#dict_add_form');
	var error = $('.alert-danger', form);
	
	//form validate
	form.validate({
		errorElement : 'span', 
		errorClass : 'help-block help-block-error', 
		focusInvalid : false, 
		rules : {
			'dGroup' : {
				required : true
			},
			'dName' : {
				required : true
			},
			'dCode': {
				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();
			//查询代码的顺延号
			$get('/dictionary/all', {dCode_eq: params.dCode, dGroup_eq: params.dGroup},function(dicts){
				var suff = '', len = dicts.length;
				if(len > 0){
					alert('代码['+ params.dCode +']已存在');
				}
				else{
					submit();
				}
			});
			
			
				function submit(){
					$post('/dictionary', params, function() {
						layer.msg('添加成功...');
						//刷新页面
						loadPage('add.html');
					});
				}
			}
		});
	});
</script>