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

287 lines
14 KiB
Plaintext
Raw Normal View History

2021-10-28 08:09:50 +00:00
<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
<link rel="stylesheet" href="../assets/css/amazeui.switch.css"/>
<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><#if userId!=-1>编辑<#else>新增</#if>后端账号</small>
</div>
</div>
<form method="post" class="am-form" id="tmpForm" action="${base}/account/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"><#if userId!=-1>编辑<#else>新增</#if>用户信息</a>
</li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-fade am-in am-active" id="tab1">
<input name="userId" id="userId" type="hidden" value="${userId!}"/>
<#--<input name="userId" id="userId" type="hidden" value="${userId!}"/>
<input name="level" id="level" type="hidden" value="${roleLevel!}"/>
<#if userId!=-1><input name="roleId" id="roleId" type="hidden" value="${roleId!}"/></#if>-->
<#--<div class="am-g am-form-group am-margin-top" <#if userId!=-1> style="display:none;" </#if>>
<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">
<select data-am-selected onchange="roleChange(this)" name="roleId" id="roleId"/>
<option value="-1" tag="-1" <#if roleId == "-1" > selected </#if>>请选择</option>
<#list roleList as roleNode >
<option value="${roleNode.id}"
tag="${roleNode.type}"
level="${roleNode.level}" <#if roleId==roleNode.id?string>
selected </#if>>
${roleNode.name}</option>
</#list>
</select>
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg"></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="userName" class="js-ajax-validate"
data-validate-async data-validation-message="请输入登录名称20字符以内"
type="text" id="userName" value="${account.userName!}" minlength="1" maxlength="20"
required <#if userId!=-1>readonly</#if>
placeholder="请输入登录名称20字符以内"/>
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg"></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="realName" class="js-ajax-validate"
data-validate-async data-validation-message="请输入账户名称20字符以内"
type="text" id="realName" value="${account.realName!}" minlength="1" maxlength="20"
required
placeholder="请输入账户名称20字符以内" onKeyUp="clearValidInfo()"/>
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg"></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="telephone" class="am-form-field am-input-sm"
data-validate-async data-validation-message="请输入正确格式手机号码!"
onkeyup="value=value.replace(/[^\d]/g,'')"
type="text" id="telephone" value="${account.telephone!}" minlength="11"
maxlength="11"
required <#if userId!=-1>readonly</#if>
placeholder="请输入正确格式手机号码!"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/>
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg"></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-8 am-u-md-10">
<select id="roleId" name="roleId"
data-am-selected="{btnSize: 'sm',maxHeight: 200,searchBox: 1}">
<option value="-1">请选择</option>
<#if roleList?exists>
<#list roleList as node>
<option value="${node.id!}" <#if account.roleId! == node.id >
selected </#if>>${node.name}</option>
</#list>
</#if>
</select>
</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">
初始密码为手机号后6位
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
</div>
</div>
</div>
</div>
<!--选项卡tabsend-->
<div class="am-margin">
<button type="button" class="am-btn am-btn-primary am-btn-xs" onclick="submit_function()">提交保存
</button>
<button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">
返回上一级
</button>
</div>
</form>
</div>
<footer class="admin-content-footer">
<hr>
</footer>
</div>
</@defaultLayout.layout>
<#macro bpTree nodes>
<#list nodes as node>
<tr level="${node.level}" class="level-${node.level}"
<#if node.hasLeafNode >
type="file"
<#else>
type="folder"
</#if>
>
<td align="center">
</td>
</tr>
<#if (!node.hasLeafNode) && node.subNodes?? && node.subNodes?size gt 0>
<@bpTree nodes=node.subNodes />
</#if>
</#list>
</#macro>
<script type="text/javascript">
var urlBase = "${base}";
var url;
function showDialog(msgTitle, message, msgType, msgTimer) {
sendMessage({
title: msgTitle,
text: message,
type: msgType,
timer: msgTimer,
confirmButtonText: false
});
}
function roleChange() {
var child = $("#roleId").find("option:selected").attr("tag");
var level = $("#roleId").find("option:selected").attr("level");
$("#level").val(level);
console.info(child);
if (child == 2) {
document.getElementById('capitalAccount').style.display = 'block';
} else {
document.getElementById('capitalAccount').style.display = 'none';
}
if (level == 2) {
document.getElementById('regionIdInput').style.display = 'block';
document.getElementById('areaInput').style.display = 'none';
} else if (level == 3) {
document.getElementById('regionIdInput').style.display = 'block';
document.getElementById('areaInput').style.display = 'block';
} else {
document.getElementById('regionIdInput').style.display = 'none';
document.getElementById('areaInput').style.display = 'none';
}
}
$(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*/
})
/*var selectArea = function () {
var regionSelectedVal = $("#regionId").val();
$.ajax({
url: "${base}/gov/areas",
data: {regionId: regionSelectedVal},
type: "post",
dataType: "json",
async: false,
success: function (data) {
var areas = data.data;
//清空下拉项
$("#areaCode option").remove();
$.each(areas, function () {
//为Select追加一个Option(下拉项)
jQuery("#areaCode").append("<option value='" + this.id + "'>" + this.areaName + "</option>");
});
}
});
};*/
var submit_function = function () {
var level = $("#level").val();
var regionId = $("#regionId").val();
var areaCode = $("#areaCode").val();
if (level == 2 && regionId <= 0) {
parent.layer.msg('请选择正确的地市');
} else if (level == 3 && (regionId <= 0 || areaCode <= 0)) {
parent.layer.msg('请选择正确的地市和区县');
} else {
$("#tmpForm").submit();
}
}
</script>