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

278 lines
15 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>
<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!}"/>
<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="请输入工号"
type="text" id="userName" value="${account.userName!}" minlength="1"
maxlength="20"
required <#if userId!=-1>readonly</#if>
placeholder="请输入工号"/>
</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"
data-validate-async data-validation-message="请输入正确格式手机号码!"
onkeyup="value=value.replace(/[^\d]/g,'')"
type="text" id="telephone" value="${account.telephone!}" minlength="11"
maxlength="11"
required
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-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" <#if userId!=-1>readonly</#if>
required 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="workLocation" class="js-ajax-validate"
data-validate-async data-validation-message="请输入常驻地"
type="text" id="workLocation" value="${account.workLocation!}" minlength="1"
maxlength="20"
required placeholder="请输入常驻地"/>
</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="deptId" name="deptId"
data-am-selected="{btnSize: 'sm',maxHeight: 200,searchBox: 1}">
<#if deptList?exists>
<#list deptList as node>
<option value="${node.id!}" <#if account.deptId! == 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">
<input name="directManager" class="js-ajax-validate"
data-validate-async data-validation-message="请输入直接主管"
type="text" id="directManager" value="${account.directManager!}"
minlength="1" maxlength="10" <#if userId!=-1>readonly</#if>
required placeholder="请输入直接主管"/>
</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="positionId" name="positionId"
data-am-selected="{btnSize: 'sm',maxHeight: 200,searchBox: 1}">
<#if positionList?exists>
<#list positionList as node>
<option value="${node.id!}" <#if account.positionId! == node.id >
selected </#if>>${node.positionName}</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-8 am-u-md-10">
<select id="roleId" name="roleId"
data-am-selected="{btnSize: 'sm',maxHeight: 200,searchBox: 1}">
<#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">
<input name="companyEmail" class="js-ajax-validate"
data-validate-async data-validation-message="请输入公司邮件地址"
type="text" id="companyEmail" value="${account.companyEmail!}" minlength="1"
maxlength="30"
required placeholder="请输入公司邮件地址"/>
</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">
初始密码为手机号后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>
<script type="text/javascript">
var urlBase = "${base}";
var url;
$(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 submit_function = function () {
$("#tmpForm").submit();
}
</script>