fourcal/src/main/resources/templates/admin/act_model_input.ftl

233 lines
7.5 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
<div class="admin-content">
<div class="admin-content-body">
<div class="am-cf am-padding">
<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">系统管理</strong> / <small>工作流程管理</small></div>
</div>
<form method="post" class="am-form" id="tmpForm" action="${base}/actModel/save">
<!--选项卡tabsbegin-->
<div class="am-tabs am-margin" data-am-tabs>
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active">
<a href="#tab1">模型信息</a>
</li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-fade am-in am-active" id="tab1">
<input name="modelId" id="modelId" type="hidden" value="${modelId!}"/>
<!--验证表单元素validate) begin-->
<!--input begin-->
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
<span style="color: red;">*</span>
模型(流程)名称
</div>
<div class="am-u-sm-6 am-u-md-6">
<input name="modelName" class="js-ajax-validate"
data-validate-async data-validation-message="请输入模型名称100字符以内"
type="text" id="modelName" value="${modelName!}" minlength="1" maxlength="100"
placeholder="请输入模型名称100字符以内" required <#--onblur="checkmodelName($(this));"--> onKeyUp="clearValidInfo()" />
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg" id="role_name_valid"></div>
</div>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
<span style="color: red;">*</span>
流程标识
</div>
<div class="am-u-sm-6 am-u-md-6">
<input name="procDefKey" class="js-ajax-validate"
data-validate-async data-validation-message="请输入流程标识20字符以内"
type="text" id="procDefKey" value="${procDefKey!}" minlength="1" maxlength="20"
placeholder="请输入流程标识20字符以内" required <#--onblur="checkprocDefKey($(this));"--> onKeyUp="clearValidInfo()" />
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg" id="role_procDefKey_valid"></div>
</div>
<#--<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
描述
</div>
<div class="am-u-sm-6 am-u-md-6">
<input name="discription" class="js-ajax-validate"
data-validate-async data-validation-message="请输入描述1000字符以内"
type="text" id="discription" value="${description!}" minlength="1" maxlength="100"
placeholder="请输入描述1000字符以内" &lt;#&ndash;onblur="checkprocDefKey($(this));"&ndash;&gt; onKeyUp="clearValidInfo()" />
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg" id="role_description_valid"></div>
</div>-->
</div>
</div>
</div>
<!--选项卡tabsend-->
<div class="am-margin">
<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
<button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">返回上一级</button>
</div>
</form>
</div>
</div>
</@defaultLayout.layout>
<script type="text/javascript">
/*名称检验 start*/
var urlBase = "${base}";
var url;
function checkRoleName(obj){
var roleName = obj.val();
var roleID = $("#roleID").val();
if(roleName.length == 0){
showRoleNameAlert($("#roleName").date("data-validation-message"));
return;
}
$.ajax({
url : urlBase + "/role/check",
type : 'POST',
dataType : 'json',
data : {
role_id : roleID, role_name : roleName
},
cache : false
}).done(function (result) {
if (result.status==0) {
showRoleNameAlert(result.msg);
obj.focus();
}else{
showRoleNameAlert(result.msg);
}
}).fail(function (){
});
}
function clearValidInfo(){
showRoleNameAlert("");
}
function showRoleNameAlert(message){
var $alert = $("#role_name_valid").find('.am-alert');
if (!$alert.length) {
$alert = $('<div class="am-alert am-alert-danger"></div>').hide()
$alert.appendTo($("#role_name_valid"));
}
if(message.length==0){
$alert.hide();
}else{
$alert.text(message).show();
}
}
/*角色名称检验 end*/
/*复选框 全选start*/
$(".role-authority-checkall").click(function(){
var $parentNode = $(this).parent().parent();
var level = Number($parentNode.attr("level"));
var $allParentNextNode = $parentNode.nextUntil(".level-"+level);
var isChecked = $(this).is(":checked");
$allParentNextNode.each(function(){
var myLevel = Number($(this).attr("level"));
var $checks = $(this).children().find("input[type='checkbox']");
if(myLevel > level){
return changeCheckedStatus($checks,isChecked);
}else{
return;
}
});
var $checks = $(this).parent().prev().find("input[type='checkbox']");
changeCheckedStatus($checks,isChecked);
});
function changeCheckedStatus(checksObj,isChecked){
checksObj.each(function(){
if(isChecked){
$(this).prop("checked",true);
}else{
$(this).prop("checked",false);
}
});
}
/*复选框 全选end*/
$(function() {
/*表单验证begin*/
//自定义规则用法验证元素上加class="js-pattern-sort"
if ($.AMUI && $.AMUI.validator) {
$.AMUI.validator.patterns.sort = /^([0-9]+)$/;
}
$("#tmpForm").validator({
// 域通过验证时回调
onValid: function(validity) {
$(validity.field).closest('.am-form-group').find('.am-alert').hide();
},
// 域验证通过时添加的操作,通过该接口可定义各种验证提示
markValid: function(validity) {
// this is Validator instance
var $field = $(validity.field);
//add by zxl只对有required属性的字段进行验证
if(typeof($field.attr("required"))!="undefined"){
var options = this.options;
var $parent = $field.closest('.am-form-group');
$field.addClass(options.validClass).
removeClass(options.inValidClass);
$parent.addClass('am-form-success').removeClass('am-form-error');
options.onValid.call(this, validity);
}
},
// 验证出错时的回调, validity 对象包含相关信息,格式通 H5 表单元素的 validity 属性
onInValid: function(validity) {
var $field = $(validity.field);
var $group = $field.closest('.am-form-group');
var $alert = $group.find('.am-alert');
// 使用自定义的提示信息 或 插件内置的提示信息
var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
if (!$alert.length) {
$alert = $("<div class='am-alert am-alert-danger'></div>").hide().
appendTo($group.find(".input-msg"));
}
console.log("onInValid : "+$field.val());
$alert.html(msg).show();
}
});
/*表单验证end*/
});
</script>
<style type="text/css">
/*验证:提示信息样式 begin*/
.am-alert-danger {
background-color: transparent;
border-color: transparent;
color: red;
}
.am-alert {
margin-bottom: 1em;
padding: .625em;
background: transparent;
border: none;
border-radius: 0;
}
/*验证:提示信息样式 end*/
</style>