You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
4.8 KiB
107 lines
4.8 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||
|
|
<head>
|
||
|
|
<th:block th:include="include :: header('新增请假申请')" />
|
||
|
|
<th:block th:include="include :: datetimepicker-css" />
|
||
|
|
<th:block th:include="include :: select2-css" />
|
||
|
|
</head>
|
||
|
|
<body class="white-bg">
|
||
|
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||
|
|
<div style="text-align: center; color: red;">请假表单 (会签版)</div>
|
||
|
|
<form class="form-horizontal m" id="form-leave-add">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-sm-3 control-label">请假类型：</label>
|
||
|
|
<div class="col-sm-8">
|
||
|
|
<select name="type" class="form-control m-b" th:with="type=${@dict.getType('biz_leave_type')}">
|
||
|
|
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-sm-3 control-label"><span style="color: red; ">*</span>标题：</label>
|
||
|
|
<div class="col-sm-8">
|
||
|
|
<input name="title" class="form-control" type="text" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-sm-3 control-label"><span style="color: red; ">*</span>原因：</label>
|
||
|
|
<div class="col-sm-8">
|
||
|
|
<textarea name="reason" class="form-control" required></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-sm-3 control-label"><span style="color: red; ">*</span>开始时间：</label>
|
||
|
|
<div class="col-sm-8">
|
||
|
|
<div class="input-group date">
|
||
|
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||
|
|
<input name="startTime" class="form-control calcTotalSecondInput" placeholder="yyyy-MM-dd HH:mm" type="text" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-sm-3 control-label"><span style="color: red; ">*</span>结束时间：</label>
|
||
|
|
<div class="col-sm-8">
|
||
|
|
<div class="input-group date">
|
||
|
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||
|
|
<input name="endTime" class="form-control calcTotalSecondInput" placeholder="yyyy-MM-dd HH:mm" type="text" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="col-sm-3 control-label">请假时长：</label>
|
||
|
|
<div class="col-sm-8">
|
||
|
|
<input name="totalTime" class="form-control" type="text" style="display: none;">
|
||
|
|
<input name="totalTimeText" class="form-control" type="text" readonly>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<th:block th:include="include :: footer" />
|
||
|
|
<th:block th:include="include :: datetimepicker-js" />
|
||
|
|
<th:block th:include="include :: select2-js" />
|
||
|
|
<script th:inline="javascript">
|
||
|
|
var prefix = ctx + "process/leaveCounterSign"
|
||
|
|
$("#form-leave-add").validate({
|
||
|
|
focusCleanup: true
|
||
|
|
});
|
||
|
|
|
||
|
|
function submitHandler() {
|
||
|
|
if ($.validate.form() && validateStartTimeAndEndTime()) {
|
||
|
|
$.operate.save(prefix + "/add", $('#form-leave-add').serialize());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$("input[name='startTime']").datetimepicker({
|
||
|
|
autoclose: true,
|
||
|
|
startDate: new Date()
|
||
|
|
});
|
||
|
|
|
||
|
|
$("input[name='endTime']").datetimepicker({
|
||
|
|
autoclose: true,
|
||
|
|
startDate: new Date()
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听开始和结束日期填写，动态生成请假时长
|
||
|
|
$('.calcTotalSecondInput').change(function () {
|
||
|
|
if (!$('input[name="startTime"]').val() || !$('input[name="endTime"]').val()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (validateStartTimeAndEndTime()) {
|
||
|
|
var totalSecond = $.common.calcTotalSecond($('input[name="startTime"]').val(), $('input[name="endTime"]').val());
|
||
|
|
$('input[name="totalTime"]').val(totalSecond);
|
||
|
|
var dateSub = $.common.formatTotalDateSub(totalSecond);
|
||
|
|
$('input[name="totalTimeText"]').val(dateSub);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function validateStartTimeAndEndTime() {
|
||
|
|
if ($('input[name="startTime"]').val() >= $('input[name="endTime"]').val()) {
|
||
|
|
$.modal.alertWarning("结束时间必须大于开始时间");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|