236 lines
7.9 KiB
HTML
236 lines
7.9 KiB
HTML
{extend name="../../base/view/common/base" /}
|
|
{block name="style"}
|
|
{include file="/approve/add_style" /}
|
|
{/block}
|
|
<!-- 主体 -->
|
|
{block name="body"}
|
|
<form class="layui-form p-4">
|
|
<h3 class="pb-3">请假申请</h3>
|
|
{eq name="$id" value="0"}
|
|
<table class="layui-table layui-table-form">
|
|
<tr>
|
|
<td class="layui-td-gray-2">请假类型<font>*</font></td>
|
|
<td colspan="3">
|
|
<select name="detail_type" lay-verify="required" lay-reqText="请选择请假类型">
|
|
<option value="">--请选择--</option>
|
|
<option value="1">事假</option>
|
|
<option value="2">年假</option>
|
|
<option value="3">调休假</option>
|
|
<option value="4">病假</option>
|
|
<option value="5">婚假</option>
|
|
<option value="6">丧假</option>
|
|
<option value="7">产假</option>
|
|
<option value="8">陪产假</option>
|
|
<option value="9">其他</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray">开始时间<font>*</font></td>
|
|
<td>
|
|
<input id="start_time" name="start_time" autocomplete="off" class="layui-input select-time" value="" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间">
|
|
</td>
|
|
<td class="layui-td-gray">结束时间<font>*</font></td>
|
|
<td>
|
|
<input id="end_time" name="end_time" autocomplete="off" class="layui-input select-time" value="" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray">请假工时</td>
|
|
<td><input name="duration" value="" class="layui-input" lay-verify="required|number" placeholder="请完善请假工时" lay-reqText="请完善请假工时"></td>
|
|
<td class="layui-td-gray">请假天数</td>
|
|
<td id="days">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray">请假事由<font>*</font></td>
|
|
<td colspan="3">
|
|
<textarea name="content" placeholder="请输入请假事由" class="layui-textarea" lay-verify="required" lay-reqText="请输入请假事由"></textarea>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray"><div class="layui-input-inline">附件</div> <div class="layui-input-inline"><button type="button" class="layui-btn layui-btn-xs" id="upFile"><i class="layui-icon"></i></button></div></td>
|
|
<td colspan="3" style="line-height:inherit">
|
|
<div class="layui-row" id="fileList">
|
|
<input data-type="file" type="hidden" name="file_ids" value="">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
{else/}
|
|
<table class="layui-table layui-table-form">
|
|
<tr>
|
|
<td class="layui-td-gray">请假类型<font>*</font></td>
|
|
<td colspan="3">
|
|
<select name="detail_type" lay-verify="required" lay-reqText="请选择请假类型">
|
|
<option value="">--请选择--</option>
|
|
<option value="1" {eq name="$detail.detail_type" value="1"}selected=""{/eq}>事假</option>
|
|
<option value="2" {eq name="$detail.detail_type" value="2"}selected=""{/eq}>年假</option>
|
|
<option value="3" {eq name="$detail.detail_type" value="3"}selected=""{/eq}>调休假</option>
|
|
<option value="4" {eq name="$detail.detail_type" value="4"}selected=""{/eq}>病假</option>
|
|
<option value="5" {eq name="$detail.detail_type" value="5"}selected=""{/eq}>婚假</option>
|
|
<option value="6" {eq name="$detail.detail_type" value="6"}selected=""{/eq}>丧假</option>
|
|
<option value="7" {eq name="$detail.detail_type" value="7"}selected=""{/eq}>产假</option>
|
|
<option value="8" {eq name="$detail.detail_type" value="8"}selected=""{/eq}>陪产假</option>
|
|
<option value="9" {eq name="$detail.detail_type" value="9"}selected=""{/eq}>其他</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray">开始时间<font>*</font></td>
|
|
<td>
|
|
<input id="start_time" name="start_time" autocomplete="off" class="layui-input select-time" value="{$detail.start_time|date='Y-m-d H:i:s'}" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间">
|
|
</td>
|
|
<td class="layui-td-gray">结束时间<font>*</font></td>
|
|
<td>
|
|
<input id="end_time" name="end_time" autocomplete="off" class="layui-input select-time" value="{$detail.end_time|date='Y-m-d H:i:s'}" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray">请假工时</td>
|
|
<td><input name="duration" value="{$detail.duration}" class="layui-input" lay-verify="required|number" placeholder="请完善请假工时" lay-reqText="请完善请假工时"></td>
|
|
<td class="layui-td-gray">请假天数</td>
|
|
<td id="days">共{$detail.days}天,{$detail.hours}小时</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray">请假事由<font>*</font></td>
|
|
<td colspan="3">
|
|
<textarea name="content" placeholder="请输入请假事由" class="layui-textarea" lay-verify="required" lay-reqText="请输入请假事由">{$detail.content}</textarea>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="layui-td-gray"><div class="layui-input-inline">附件</div> <div class="layui-input-inline"><button type="button" class="layui-btn layui-btn-xs" id="upFile"><i class="layui-icon"></i></button></div></td>
|
|
<td colspan="3" style="line-height:inherit">
|
|
<div class="layui-row" id="fileList">
|
|
<input data-type="file" type="hidden" name="file_ids" value="{$detail.file_ids}">
|
|
{notempty name="$detail.file_ids"}
|
|
{volist name="$detail.fileArray" id="vo"}
|
|
<div class="layui-col-md4" id="uploadImg{$vo.id}">{:file_card($vo)}</div>
|
|
{/volist}
|
|
{/notempty}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
{/eq}
|
|
{include file="/approve/add_flow" /}
|
|
</form>
|
|
{/block}
|
|
<!-- /主体 -->
|
|
|
|
<!-- 脚本 -->
|
|
{block name="script"}
|
|
<script>
|
|
/**
|
|
* 工时计算
|
|
*/
|
|
const WORKDAY_HOURS = 8;
|
|
const START_HOUR = 9;
|
|
const END_HOUR = 18;
|
|
const START_BREAK_HOUR = 12;
|
|
const END_BREAK_HOUR = 13;
|
|
const WEEKEND_DAYS = [0, 6];
|
|
|
|
function isWeekend(day) {
|
|
return WEEKEND_DAYS.includes(day);
|
|
}
|
|
|
|
function calculateWorkHours() {
|
|
var startDate = new Date($('#start_time').val());
|
|
var endDate = new Date($('#end_time').val());
|
|
|
|
const start = startDate.getTime();
|
|
const end = endDate.getTime();
|
|
const startDay = startDate.getDay();
|
|
const endDay = endDate.getDay();
|
|
|
|
let totalHours = 0;
|
|
|
|
for (let time = start; time < end; time += 3600000 /* 1 hour in milliseconds */) {
|
|
const date = new Date(time);
|
|
const dayOfWeek = date.getDay();
|
|
const hour = date.getHours();
|
|
|
|
if (!isWeekend(dayOfWeek)) {
|
|
if (hour >= START_HOUR && hour < END_HOUR) {
|
|
if (hour < START_BREAK_HOUR || hour >= END_BREAK_HOUR) {
|
|
console.log(totalHours);
|
|
totalHours += 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return totalHours;
|
|
}
|
|
|
|
function isNumber(str, type) {
|
|
var t = type || 0;
|
|
var patn = /^[0-9]+$/;
|
|
if (t > 0) {
|
|
patn = /^\d+(\.\d+)?$/;
|
|
}
|
|
if (!patn.test(str)){
|
|
return false;
|
|
}
|
|
else{
|
|
return true;
|
|
}
|
|
}
|
|
|
|
|
|
const moduleInit = ['tool','employeepicker','oaTool'];
|
|
function gouguInit() {
|
|
var form = layui.form,
|
|
tool=layui.tool,
|
|
oaTool=layui.oaTool,
|
|
laydate = layui.laydate;
|
|
|
|
oaTool.addFile({
|
|
btn: 'upFile',
|
|
box: 'fileList'
|
|
});
|
|
|
|
if (typeof (flowStep) == "function") {
|
|
flowStep();
|
|
}
|
|
//日期时间范围
|
|
lay('.select-time').each(function () {
|
|
laydate.render({
|
|
elem: this,
|
|
trigger: 'click',
|
|
fullPanel:true,
|
|
type:'datetime',
|
|
done:function(){
|
|
var hours = calculateWorkHours();
|
|
if(hours == 0){
|
|
$('[name="duration"]').val('');
|
|
$('#days').html('-');
|
|
}
|
|
else{
|
|
$('[name="duration"]').val(hours);
|
|
var days = 0;
|
|
if(hours>=8){
|
|
days = parseInt(hours/8);
|
|
}
|
|
$('#days').html('共'+days+'天，'+(hours%8).toFixed(1)+'小时');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
$('[name="duration"]').on('input',function(){
|
|
let hours = $(this).val();
|
|
if(isNumber(hours,1) && hours>0){
|
|
var days = 0;
|
|
if(hours>=8){
|
|
days = parseInt(hours/8);
|
|
}
|
|
$('#days').html('共'+days+'天，'+((hours%8).toFixed(1))+'小时');
|
|
}
|
|
else{
|
|
$('#days').html('-');
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
{/block}
|
|
<!-- /脚本 --> |