lihai-oa/app/oa/view/approve/add_qingjia.html

237 lines
7.9 KiB
HTML
Raw Normal View History

2023-10-24 15:17:16 +08:00
{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;
2023-11-24 15:03:51 +08:00
//定义周末
const WEEKEND_DAYS = [0];
2023-10-24 15:17:16 +08:00
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}
<!-- /脚本 -->