mkm/dev_oa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

升级日程安排，工作记录的日历控件到最新新版，功能更强大，体验更舒适

Browse Source
This commit is contained in:
hdm 2021-12-01 00:57:33 +08:00
parent 3990d11f0d
commit a816e367d6
5 changed files with 134 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/home/controller/Schedule.php
View File

@ -197,12 +197,15 @@ class Schedule extends BaseController
$param = get_params();
$admin_id = $this->uid;
if ($param['id'] == 0) {
if (isset($param['start_time'])) {
$param['start_time'] = strtotime($param['start_time'] . '' . $param['start_time_1']);
if (isset($param['start_time_a'])) {
$param['start_time'] = strtotime($param['start_time_a'] . '' . $param['start_time_b']);
}
if (isset($param['end_time'])) {
$param['end_time'] = strtotime($param['end_time'] . '' . $param['end_time_1']);
if (isset($param['end_time_a'])) {
$param['end_time'] = strtotime($param['end_time_a'] . '' . $param['end_time_b']);
}
if($param['start_time']>time()){
return to_assign(1, "开始时间不能大于当前时间");
}
if ($param['end_time'] <= $param['start_time']) {
return to_assign(1, "结束时间需要大于开始时间");
}
@ -260,12 +263,15 @@ class Schedule extends BaseController
public function update_labor_time()
{
$param = get_params();
if (isset($param['start_time'])) {
$param['start_time'] = strtotime($param['start_time'] . '' . $param['start_time_1']);
if (isset($param['start_time_a'])) {
$param['start_time'] = strtotime($param['start_time_a'] . '' . $param['start_time_b']);
}
if (isset($param['end_time'])) {
$param['end_time'] = strtotime($param['end_time'] . '' . $param['end_time_1']);
if (isset($param['end_time_a'])) {
$param['end_time'] = strtotime($param['end_time_a'] . '' . $param['end_time_b']);
}
if($param['start_time']>time()){
return to_assign(1, "开始时间不能大于当前时间");
}
if ($param['end_time'] <= $param['start_time']) {
return to_assign(1, "结束时间需要大于开始时间");
}

65
app/home/view/plan/calendar.html
View File

@ -27,21 +27,17 @@ user-select: none;}
}
.fc .fc-button-primary:hover{color:#fff; background-color:#52B5FF; border-color:#52B5FF;}
.fc-daygrid-event-harness{cursor:pointer;}
.fc .fc-daygrid-week-number{background-color: #F3FFDF; font-size:12px;}
/*今天背景色和字体颜色chocolate */
.fc .fc-daygrid-week-number{font-size:12px;}
/*今天背景色和字体颜色 */
.fc .fc-daygrid-day.fc-day-today .fc-event-title,.fc .fc-daygrid-day.fc-day-today .fc-event-time,.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{
font-weight:800;
color:#FF5722;
}
/*星期六背景色和字体颜色 */
.fc-day-sat{
background-color: #F3FFDF;
/*星期六,星期天背景色和字体颜色
.fc-day-sat,.fc-day-sun{
background-color: #fafafa;
}
/*星期天背景色和字体颜色 */
.fc-day-sun{
background-color: #F3FFDF;
}
*/
.calendar-select{width:100px; height:38px; position:absolute; top:31px; right:255px; z-index:100;}
.calendar-select .layui-input{height: 36px; line-height: 1.2;}
.layui-tags-span {padding: 3px 6px;font-size: 12px; background-color:#fff; border-radius: 3px; margin:2px 0; margin-right: 5px; border: 1px solid #e6e6e6; display: inline-block;}
@ -199,7 +195,7 @@ user-select: none;}
var t_1=t+':00',t_2=t+':15',t_3=t+':30',t_4=t+':45';
hourArray.push(t_1,t_2,t_3,t_4);
}
var html_1='', html_2='',def_h1=detail.start_time_b,def_h2=detail.end_time_b;
var html_1='', html_2='',def_h1=detail.start_time_b=='00:00'?'09:00':detail.start_time_b,def_h2=detail.end_time_b=='00:00'?'18:00':detail.end_time_b;
for(var s=0;s<hourArray.length;s++){
var check_1='',check_2='';
if(hourArray[s]==def_h1){
@ -393,25 +389,31 @@ user-select: none;}
//日历
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
views: {
dayGrid: {
viewDidMount:function(arg){
calendar.setOption('height', window.innerHeight-30);
}
},
timeGrid: {
viewDidMount:function(arg){
calendar.setOption('height', 'auto');
}
},
week: {
viewDidMount:function(arg){
calendar.setOption('height', 'auto');
}
},
day: {
viewDidMount:function(arg){
calendar.setOption('height', 'auto');
}
}
},
//initialDate: '2020-09-12',//默认显示日期
initialView: 'dayGridMonth',//默认显示月视图
customButtons: {
//自定义按钮
add: {
text: '+ 新建日程', click: function () {
var detail={};
detail['id']=0;
detail['title']='';
detail['start_time_a']='';
detail['end_time_a']='';
detail['start_time_b']='08:30';
detail['end_time_b']='18:00';
detail['remark']='';
detail['type']=0;
detail['remind_type']=0;
addEvent(detail);
}
},
clear: {
text: '清空员工', click: function () {
uid = 0;
@ -423,11 +425,15 @@ user-select: none;}
}
},
headerToolbar: {
left: 'add prev,next',//prev,next today add
left: 'prev,next',//prev,next today add
center: 'title',
right: 'clear dayGridMonth,timeGridWeek,listWeek' //clear dayGridMonth,timeGridWeek,timeGridDay,listWeek
},
height: 'auto',//自动高度
viewRender:function(view,element){
console.log(view);
console.log(element);
},
navLinks: true, // can click day/week names to navigate views
editable: true,//确定是否可以拖拉调整日历事件的时间。
eventResize:function(ev) {
@ -487,10 +493,11 @@ user-select: none;}
detail['remark']='';
detail['type']=0;
detail['remind_type']=0;
//console.log(detail);
console.log(detail);
addEvent(detail);
},
nowIndicator: true,
firstDay: 1,
weekNumbers: true,// 是否开启周数
displayEventEnd: false, //所有视图显示结束时间
eventTimeFormat: { // 事件的时间格式，like '14:30:00'

2
app/home/view/plan/index.html
View File

@ -234,7 +234,7 @@
detail['title']='';
detail['start_time_a']='';
detail['end_time_a']='';
detail['start_time_b']='08:30';
detail['start_time_b']='09:00';
detail['end_time_b']='18:00';
detail['remark']='';
detail['type']=0;

107
app/home/view/schedule/calendar.html
View File

@ -27,20 +27,17 @@ user-select: none;}
}
.fc .fc-button-primary:hover{color:#fff; background-color:#52B5FF; border-color:#52B5FF;}
.fc-daygrid-event-harness{cursor:pointer;}
.fc .fc-daygrid-week-number{background-color: #F3FFDF; font-size:12px;}
/*今天背景色和字体颜色chocolate */
.fc .fc-daygrid-week-number{font-size:12px;}
/*今天背景色和字体颜色 */
.fc .fc-daygrid-day.fc-day-today .fc-event-title,.fc .fc-daygrid-day.fc-day-today .fc-event-time,.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{
font-weight:800;
color:#FF5722;
}
/*星期六背景色和字体颜色 */
.fc-day-sat{
background-color: #F3FFDF;
}
/*星期天背景色和字体颜色 */
.fc-day-sun{
background-color: #F3FFDF;
/*星期六,星期天背景色和字体颜色
.fc-day-sat,.fc-day-sun{
background-color: #fafafa;
}
*/
.fc-h-event .fc-event-main{color:#333}
.calendar-select{width:100px; height:38px; position:absolute; top:31px; right:255px; z-index:100;}
@ -97,22 +94,13 @@ user-select: none;}
})
});
function addEvent(){
var detail={};
detail['id']=0;
detail['title']='';
detail['start_time']='';
detail['end_time']='';
detail['start_time_1']='08:30';
detail['end_time_1']='09:00';
detail['remark']='';
detail['labor_type']=0;
function addEvent(detail){
var content='<form class="layui-form" style="width:868px">\
<table class="layui-table" style="margin:15px 15px 0;">\
<tr>\
<td class="layui-td-gray2">工作时间范围 <span style="color: red">*</span></td>\
<td>\
<input id="start_time_a" name="start_time_a" style="width:100px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:3px; width: 80px;"><select lay-filter="start_time_1" id="start_time_1"></select></div> 至 <input id="end_time_a" name="end_time_a" style="width:100px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:3px; width: 80px;"><select lay-filter="end_time_1" id="end_time_1"></select></div>\
<input id="start_time_a" name="start_time_a" value="'+detail.start_time_a+'" style="width:100px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:3px; width: 80px;"><select lay-filter="start_time_b" id="start_time_b"></select></div> 至 <input id="end_time_a" name="end_time_a" value="'+detail.end_time_a+'" style="width:100px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:3px; width: 80px;"><select lay-filter="end_time_b" id="end_time_b"></select></div>\
</td>\
<td class="layui-td-gray">工作类型 <span style="color: red">*</span></td>\
<td>\
@ -147,8 +135,8 @@ user-select: none;}
showBottom: false,
done:function(a,b,c){
$('#end_time_a').val(a);
detail.start_time=a;
detail.end_time=a;
detail.start_time_a=a;
detail.end_time_a=a;
}
});
@ -162,11 +150,11 @@ user-select: none;}
showBottom: false,
done:function(a,b,c){
$('#start_time_a').val(a);
detail.start_time=a;
detail.end_time=a;
detail.start_time_a=a;
detail.end_time_a=a;
}
});
$('#start_time_1,#end_time_1').empty();
$('#start_time_b,#end_time_b').empty();
var hourArray=[];
for(var h=0;h<24;h++){
@ -188,20 +176,20 @@ user-select: none;}
html_2 += '<option value="'+hourArray[s]+'" '+check_2+'>'+hourArray[s]+'</option>';
}
$('#start_time_1').append(html_1);
$('#end_time_1').append(html_2);
$('#start_time_b').append(html_1);
$('#end_time_b').append(html_2);
form.render();
$('[name="title"]').on('input',function(){
var _val=$(this).val();
detail.title=_val;
});
form.on('select(start_time_1)', function(data){
detail.start_time_1=data.value;
form.on('select(start_time_b)', function(data){
detail.start_time_b=data.value;
console.log(data);
});
form.on('select(end_time_1)', function(data){
detail.end_time_1=data.value;
form.on('select(end_time_b)', function(data){
detail.end_time_b=data.value;
});
$('[form-input="remark"]').on('input',function(){
var _val=$(this).val();
@ -304,32 +292,38 @@ user-select: none;}
detail=res.data;
viewEvent();
}
});
});
}
//日历
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
views: {
dayGrid: {
viewDidMount:function(arg){
calendar.setOption('height', window.innerHeight-30);
}
},
timeGrid: {
viewDidMount:function(arg){
calendar.setOption('height', 'auto');
}
},
week: {
viewDidMount:function(arg){
calendar.setOption('height', 'auto');
}
},
day: {
viewDidMount:function(arg){
calendar.setOption('height', 'auto');
}
}
},
//initialDate: '2020-09-12',//默认显示日期
initialView: 'dayGridMonth',//默认显示月视图
customButtons: {
//自定义按钮
add: {
text: '+ 新建工作记录', click: function () {
var detail={};
detail['id']=0;
detail['title']='';
detail['start_time_a']='';
detail['end_time_a']='';
detail['start_time_b']='08:30';
detail['end_time_b']='18:00';
detail['remark']='';
detail['type']=0;
detail['remind_type']=0;
addEvent(detail);
}
},
clear: {
text: '清空员工', click: function () {
uid = 0;
@ -341,7 +335,7 @@ user-select: none;}
}
},
headerToolbar: {
left: 'add prev,next',
left: 'prev,next',
center: 'title',
right: 'clear dayGridMonth,timeGridWeek,listWeek'
},
@ -350,24 +344,25 @@ user-select: none;}
editable: false,//确定是否可以拖拉调整日历事件的时间。
selectable: false,//拖拉选择日期
selectMirror: false,//是否在用户拖动时绘制"占位符"事件。
select: function(arg) {
//console.log(arg);
dateClick: function(arg) {
console.log(arg);
var dateStr = arg.date.getFullYear()+'-'+addZero(arg.date.getMonth()+1)+'-'+addZero(arg.date.getDate());
var detail={};
detail['id']=0;
detail['title']='';
detail['start_time_a']=arg.start.getFullYear()+'-'+(arg.start.getMonth()+1)+'-'+(arg.start.getDate());
detail['end_time_a']=arg.end.getFullYear()+'-'+(arg.end.getMonth()+1)+'-'+(arg.end.getDate());
detail['start_time_b']=addZero(arg.start.getHours())+':'+addZero(arg.start.getMinutes());
detail['end_time_b']=addZero(arg.end.getHours())+':'+addZero(arg.end.getMinutes());
detail['start_time_a']=dateStr;
detail['end_time_a']=dateStr;
detail['start_time_b']='08:30';
detail['end_time_b']='09:00';
detail['remark']='';
detail['type']=0;
detail['remind_type']=0;
//console.log(detail);
addEvent(detail);
calendar.unselect()
},
nowIndicator: true,
weekNumbers: true,// 是否开启周数
firstDay: 1,
displayEventEnd: false, //所有视图显示结束时间
eventTimeFormat: { // like '14:30:00'
hour: '2-digit',

64
app/home/view/schedule/index.html
View File

@ -139,7 +139,7 @@
<tr>\
<td class="layui-td-gray2">工作时间范围 <span style="color: red">*</span></td>\
<td>\
<input id="start_time_a" name="start_time_a" style="width:110px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:5px; width: 80px;"><select lay-filter="start_time_1" id="start_time_1"></select></div> 至 <input id="end_time_a" name="end_time_a" style="width:110px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:5px; width: 80px;"><select lay-filter="end_time_1" id="end_time_1"></select></div>\
<input id="start_time_a" name="start_time_a" style="width:110px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:5px; width: 80px;"><select lay-filter="start_time_b" id="start_time_b"></select></div> 至 <input id="end_time_a" name="end_time_a" style="width:110px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:5px; width: 80px;"><select lay-filter="end_time_b" id="end_time_b"></select></div>\
</td>\
</tr>\
</table>\
@ -173,7 +173,7 @@
$('#start_time_a').val(a);
}
});
$('#start_time_1,#end_time_1').empty();
$('#start_time_b,#end_time_b').empty();
var hourArray=[];
for(var h=0;h<24;h++){
@ -182,7 +182,7 @@
hourArray.push(t_1,t_2,t_3,t_4);
}
var html_1='', html_2='',def_h1='08:30',def_h2='09:00';
var html_1='', html_2='',def_h1='09:00',def_h2='09:30';
for(var s=0;s<hourArray.length;s++){
var check_1='',check_2='';
if(hourArray[s]==def_h1){
@ -195,32 +195,32 @@
html_2 += '<option value="'+hourArray[s]+'" '+check_2+'>'+hourArray[s]+'</option>';
}
$('#start_time_1').append(html_1);
$('#end_time_1').append(html_2);
$('#start_time_b').append(html_1);
$('#end_time_b').append(html_2);
form.render();
},
btn: ['确定提交'],
btnAlign: 'c',
yes: function(idx){
let start_time = $('#start_time_a').val();
let end_time = $('#end_time_a').val();
let start_time_1 = $('#start_time_1').val();
let end_time_1 = $('#end_time_1').val();
let start_time_a = $('#start_time_a').val();
let end_time_a = $('#end_time_a').val();
let start_time_b = $('#start_time_b').val();
let end_time_b = $('#end_time_b').val();
if(start_time=='' || end_time==''){
layer.msg('请选择工作时间范围');
return;
}
}
$.ajax({
url:"{:url('home/schedule/update_labor_time')}",
type:'post',
data:{
id:data.id,
admin_id:data.admin_id,
start_time:start_time,
end_time:end_time,
start_time_1:start_time_1,
end_time_1:end_time_1
start_time_a:start_time_a,
end_time_a:end_time_a,
start_time_b:start_time_b,
end_time_b:end_time_b
},
success:function(e){
layer.msg(e.msg);
@ -395,10 +395,10 @@
var detail={};
detail['id']=0;
detail['title']='';
detail['start_time']='';
detail['end_time']='';
detail['start_time_1']='08:30';
detail['end_time_1']='09:00';
detail['start_time_a']='';
detail['end_time_a']='';
detail['start_time_b']='09:00';
detail['end_time_b']='09:30';
detail['remark']='';
detail['labor_type']=0;
var content='<form class="layui-form" style="width:868px">\
@ -406,7 +406,7 @@
<tr>\
<td class="layui-td-gray2">工作时间范围 <span style="color: red">*</span></td>\
<td>\
<input id="start_time_a" name="start_time_a" style="width:100px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:3px; width: 80px;"><select lay-filter="start_time_1" id="start_time_1"></select></div> 至 <input id="end_time_a" name="end_time_a" style="width:100px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:3px; width: 80px;"><select lay-filter="end_time_1" id="end_time_1"></select></div>\
<input id="start_time_a" name="start_time_a" style="width:100px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:3px; width: 80px;"><select lay-filter="start_time_b" id="start_time_b"></select></div> 至 <input id="end_time_a" name="end_time_a" style="width:100px; display:inline-block;" autocomplete="off" class="layui-input" value="" readonly lay-verify="required" lay-reqText="请选择"><div style="display: inline-block; margin-left:3px; width: 80px;"><select lay-filter="end_time_b" id="end_time_b"></select></div>\
</td>\
<td class="layui-td-gray">工作类型 <span style="color: red">*</span></td>\
<td>\
@ -441,8 +441,8 @@
showBottom: false,
done:function(a,b,c){
$('#end_time_a').val(a);
detail.start_time=a;
detail.end_time=a;
detail.start_time_a=a;
detail.end_time_a=a;
}
});
@ -456,11 +456,11 @@
showBottom: false,
done:function(a,b,c){
$('#start_time_a').val(a);
detail.start_time=a;
detail.end_time=a;
detail.start_time_a=a;
detail.end_time_a=a;
}
});
$('#start_time_1,#end_time_1').empty();
$('#start_time_b,#end_time_b').empty();
var hourArray=[];
for(var h=0;h<24;h++){
@ -469,7 +469,7 @@
hourArray.push(t_1,t_2,t_3,t_4);
}
var html_1='', html_2='',def_h1='08:30',def_h2='09:00';
var html_1='', html_2='',def_h1='09:00',def_h2='09:30';
for(var s=0;s<hourArray.length;s++){
var check_1='',check_2='';
if(hourArray[s]==def_h1){
@ -482,20 +482,20 @@
html_2 += '<option value="'+hourArray[s]+'" '+check_2+'>'+hourArray[s]+'</option>';
}
$('#start_time_1').append(html_1);
$('#end_time_1').append(html_2);
$('#start_time_b').append(html_1);
$('#end_time_b').append(html_2);
form.render();
$('[name="title"]').on('input',function(){
var _val=$(this).val();
detail.title=_val;
});
form.on('select(start_time_1)', function(data){
detail.start_time_1=data.value;
form.on('select(start_time_b)', function(data){
detail.start_time_b=data.value;
console.log(data);
});
form.on('select(end_time_1)', function(data){
detail.end_time_1=data.value;
form.on('select(end_time_b)', function(data){
detail.end_time_b=data.value;
});
$('[form-input="remark"]').on('input',function(){
var _val=$(this).val();
@ -508,7 +508,7 @@
btn: ['确定提交'],
btnAlign:'c',
yes: function(idx){
if(detail.start_time=='' || detail.end_time==''){
if(detail.start_time_a=='' || detail.end_time_a==''){
layer.msg('请选择工作时间范围');
return;
}