489 lines
15 KiB
HTML
489 lines
15 KiB
HTML
|
{extend name="../../base/view/common/base" /}
|
||
|
|
{block name="style"}
|
||
|
|
<style>
|
||
|
|
.layui-unselect dl {max-height:188px;}
|
||
|
|
</style>
|
||
|
|
{/block}
|
||
|
|
<!-- 主体 -->
|
||
|
|
{block name="body"}
|
||
|
|
<div class="p-3">
|
||
|
|
<form class="layui-form gg-form-bar border-x border-t" lay-filter="barsearchform">
|
||
|
|
<div class="layui-input-inline" style="width:300px;">
|
||
|
|
<input type="text" class="layui-input" id="diff_time" placeholder="日程时间范围" readonly name="diff_time">
|
||
|
|
</div>
|
||
|
|
<div class="layui-input-inline" style="width:110px;">
|
||
|
|
<input type="text" name="username" placeholder="请选择员工" class="layui-input picker-one" readonly />
|
||
|
|
<input type="text" name="uid" value="" style="display:none" />
|
||
|
|
</div>
|
||
|
|
<div class="layui-input-inline" style="width:220px;">
|
||
|
|
<input type="text" name="keywords" placeholder="输入工作内容" class="layui-input"/>
|
||
|
|
</div>
|
||
|
|
<div class="layui-input-inline" style="width:150px;">
|
||
|
|
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
|
||
|
|
<button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<div>
|
||
|
|
<table class="layui-hide" id="test" lay-filter="test"></table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/html" id="toolbarDemo">
|
||
|
|
<div class="layui-btn-container">
|
||
|
|
<button class="layui-btn layui-btn-sm addLoan" type="button">+ 新增日程安排</button>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
{/block}
|
||
|
|
<!-- /主体 -->
|
||
|
|
|
||
|
|
<!-- 脚本 -->
|
||
|
|
{block name="script"}
|
||
|
|
<script>
|
||
|
|
const moduleInit = ['tool','employeepicker','laydatePlus'];
|
||
|
|
function gouguInit() {
|
||
|
|
var form = layui.form,table = layui.table,tool=layui.tool,laydatePlus = layui.laydatePlus,laydate = layui.laydate,dropdown = layui.dropdown;
|
||
|
|
|
||
|
|
//日期范围
|
||
|
|
var diff_time = new laydatePlus({'target':'diff_time'});
|
||
|
|
|
||
|
|
//监听搜索提交
|
||
|
|
form.on('submit(webform)', function(data) {
|
||
|
|
layui.pageTable.reload({
|
||
|
|
where: data.field,
|
||
|
|
page: {curr: 1}
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
$('[lay-filter="clear"]').on('click',function(){
|
||
|
|
setTimeout(function(){
|
||
|
|
$('[lay-filter="webform"]').click();
|
||
|
|
},10)
|
||
|
|
});
|
||
|
|
|
||
|
|
layui.pageTable = table.render({
|
||
|
|
elem: '#test'
|
||
|
|
,toolbar: '#toolbarDemo'
|
||
|
|
,defaultToolbar:['filter', {title:'导出EXCEL',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-export'}]
|
||
|
|
,title:'日程安排列表'
|
||
|
|
,url: "/oa/plan/index"
|
||
|
|
,page: true //开启分页
|
||
|
|
,limit: 20
|
||
|
|
,cellMinWidth: 80
|
||
|
|
,cols: [[ //表头
|
||
|
|
{field: 'id', title: '序号',fixed: 'left', width:80, align:'center'}
|
||
|
|
,{field: 'type', title: '优先级', align:'center',width:80,templet:function(d){
|
||
|
|
var html='';
|
||
|
|
if(d.type==1){
|
||
|
|
html = '<span style="color:#FF5722">紧急</span>';
|
||
|
|
}
|
||
|
|
else if(d.type==2){
|
||
|
|
html = '<span style="color:#FFB800">重要</span>';
|
||
|
|
}
|
||
|
|
else if(d.type==3){
|
||
|
|
html = '<span style="color:#1E9FFF">次要</span>';
|
||
|
|
}
|
||
|
|
else if(d.type==4){
|
||
|
|
html = '<span style="color:#009688">不重要</span>';
|
||
|
|
}
|
||
|
|
else if(d.type==5){
|
||
|
|
html = '<span style="color:#393D49">无优先级</span>';
|
||
|
|
}
|
||
|
|
return html;
|
||
|
|
}}
|
||
|
|
,{field: 'start_time', title: '日程时间范围', align:'center',width:260,templet:function(d){
|
||
|
|
var html=d.start_time+'至'+d.end_time;
|
||
|
|
return html;
|
||
|
|
}}
|
||
|
|
,{field: 'title', title: '日程安排内容'}
|
||
|
|
,{field: 'remind_time', title: '提醒时间', align:'center',width:136}
|
||
|
|
,{field: 'right', title: '操作',fixed:'right', width:150, align:'center',templet:function(d){
|
||
|
|
var html='<div class="layui-btn-group">';
|
||
|
|
html+='<button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">查看</button>';
|
||
|
|
if(d.admin_id==login_admin){
|
||
|
|
html+='<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>';
|
||
|
|
html+='<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>';
|
||
|
|
}
|
||
|
|
html+='</div>';
|
||
|
|
return html;
|
||
|
|
}}
|
||
|
|
]]
|
||
|
|
});
|
||
|
|
|
||
|
|
//表头工具栏事件
|
||
|
|
table.on('toolbar(test)', function(obj){
|
||
|
|
if(obj.event === 'LAYTABLE_EXCEL'){
|
||
|
|
var formSelect = form.val('barsearchform');
|
||
|
|
formSelect.limit=99999;
|
||
|
|
$.ajax({
|
||
|
|
url: '/oa/plan/index',
|
||
|
|
data: formSelect,
|
||
|
|
success:function(res){
|
||
|
|
table.exportFile('test', res.data,'xls');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
//操作
|
||
|
|
table.on('tool(test)', function(obj){
|
||
|
|
var data = obj.data;
|
||
|
|
if(obj.event === 'edit'){
|
||
|
|
$.ajax({
|
||
|
|
url: "/oa/plan/detail",
|
||
|
|
type:'get',
|
||
|
|
data:{id:data.id},
|
||
|
|
success:function(e){
|
||
|
|
if(e.code==0){
|
||
|
|
var detail={};
|
||
|
|
detail['id']=e.data.id;
|
||
|
|
detail['title']=e.data.title;
|
||
|
|
detail['start_time_a']=e.data.start_time_a;
|
||
|
|
detail['end_time_a']=e.data.end_time_a;
|
||
|
|
detail['start_time_b']=e.data.start_time_b;
|
||
|
|
detail['end_time_b']=e.data.end_time_b;
|
||
|
|
detail['remark']=e.data.remark;
|
||
|
|
detail['type']=e.data.type;
|
||
|
|
detail['remind_type']=e.data.remind_type;
|
||
|
|
addEvent(detail);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else if(obj.event === 'view'){
|
||
|
|
$.ajax({
|
||
|
|
url: "/oa/plan/detail",
|
||
|
|
type:'get',
|
||
|
|
data:{id:data.id},
|
||
|
|
success:function(e){
|
||
|
|
if(e.code==0){
|
||
|
|
viewEvent(e.data);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else if(obj.event === 'del'){
|
||
|
|
layer.confirm('您确定要删除该日程', {
|
||
|
|
icon: 3,
|
||
|
|
title: '提示'
|
||
|
|
}, function (index) {
|
||
|
|
let callback = function (e) {
|
||
|
|
layer.msg(e.msg);
|
||
|
|
if (e.code == 0) {
|
||
|
|
layui.pageTable.reload();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
tool.delete("/oa/plan/delete", { id: obj.data.id }, callback);
|
||
|
|
layer.close(index);
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//查看日程记录
|
||
|
|
function viewEvent(detail){
|
||
|
|
var work_type='<span style="color:#393D49">无优先级</span>';
|
||
|
|
if(detail.type==1){
|
||
|
|
work_type = '<span style="color:#FF5722">紧急</span>';
|
||
|
|
}
|
||
|
|
else if(detail.type==2){
|
||
|
|
work_type = '<span style="color:#FFB800">重要</span>';
|
||
|
|
}
|
||
|
|
else if(detail.type==3){
|
||
|
|
work_type = '<span style="color:#1E9FFF">次要</span>';
|
||
|
|
}
|
||
|
|
else if(detail.type==4){
|
||
|
|
work_type = '<span style="color:#009688">不重要</span>';
|
||
|
|
}
|
||
|
|
var content='<div style="width:770px">\
|
||
|
|
<table class="layui-table" style="margin:12px 15px 0;">\
|
||
|
|
<tr>\
|
||
|
|
<td class="layui-td-gray-2">日程时间范围</td>\
|
||
|
|
<td>'+detail.start_time+' 至 '+detail.end_time+'</td>\
|
||
|
|
<td class="layui-td-gray">提醒时间</td>\
|
||
|
|
<td>'+detail.remind_time+'</td>\
|
||
|
|
</tr>\
|
||
|
|
<tr>\
|
||
|
|
<td class="layui-td-gray-2">日程安排内容</td>\
|
||
|
|
<td>'+detail.title+'</td>\
|
||
|
|
<td class="layui-td-gray">优先级</td>\
|
||
|
|
<td>'+work_type+'</td>\
|
||
|
|
</tr>\
|
||
|
|
<tr>\
|
||
|
|
<td class="layui-td-gray-2">日程内容描述</td>\
|
||
|
|
<td colspan="3">'+detail.remark+'</td>\
|
||
|
|
</tr>\
|
||
|
|
</table>\
|
||
|
|
</div>';
|
||
|
|
layer.open({
|
||
|
|
type:1,
|
||
|
|
title:'日程安排',
|
||
|
|
area:['800px','336px'],
|
||
|
|
content:content,
|
||
|
|
success:function(){
|
||
|
|
|
||
|
|
},
|
||
|
|
btn: ['关闭'],
|
||
|
|
btnAlign: 'c',
|
||
|
|
yes: function(idx){
|
||
|
|
layer.close(idx);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
$('body').on('click','.addLoan',function(){
|
||
|
|
var detail={};
|
||
|
|
detail['id']=0;
|
||
|
|
detail['title']='';
|
||
|
|
detail['start_time_a']='';
|
||
|
|
detail['end_time_a']='';
|
||
|
|
detail['start_time_b']='09:00';
|
||
|
|
detail['end_time_b']='18:00';
|
||
|
|
detail['remark']='';
|
||
|
|
detail['type']=0;
|
||
|
|
detail['remind_type']=0;
|
||
|
|
addEvent(detail);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function addEvent(detail){
|
||
|
|
var type='<span style="color:#aaa">请选择</span>';
|
||
|
|
if(detail.type==1){
|
||
|
|
type = '<span class="layui-badge-dot"></span> 紧急';
|
||
|
|
}
|
||
|
|
else if(detail.type==2){
|
||
|
|
type = '<span class="layui-badge-dot layui-bg-orange"></span> 重要';
|
||
|
|
}
|
||
|
|
else if(detail.type==3){
|
||
|
|
type = '<span class="layui-badge-dot layui-bg-blue"></span> 次要';
|
||
|
|
}
|
||
|
|
else if(detail.type==4){
|
||
|
|
type = '<span class="layui-badge-dot layui-bg-green"></span> 不重要';
|
||
|
|
}
|
||
|
|
else if(detail.type==5){
|
||
|
|
type = '<span class="layui-badge-dot layui-bg-black"></span> 无优先级';
|
||
|
|
}
|
||
|
|
|
||
|
|
var remind_type='不提醒';
|
||
|
|
if(detail.remind_type==1){
|
||
|
|
remind_type = '提前5分钟';
|
||
|
|
}
|
||
|
|
else if(detail.remind_type==2){
|
||
|
|
remind_type = '提前15分钟';
|
||
|
|
}
|
||
|
|
else if(detail.remind_type==3){
|
||
|
|
remind_type = '提前30分钟';
|
||
|
|
}
|
||
|
|
else if(detail.remind_type==4){
|
||
|
|
remind_type = '提前1小时';
|
||
|
|
}
|
||
|
|
else if(detail.remind_type==5){
|
||
|
|
remind_type = '提前2小时';
|
||
|
|
}else if(detail.remind_type==6){
|
||
|
|
remind_type = '提前1天';
|
||
|
|
}
|
||
|
|
|
||
|
|
var content='<form class="layui-form" style="width:828px">\
|
||
|
|
<table class="layui-table" style="margin:15px 15px 0;">\
|
||
|
|
<tr>\
|
||
|
|
<td class="layui-td-gray-2">日程时间范围<font>*</font></td>\
|
||
|
|
<td>\
|
||
|
|
<input id="start_time_a" name="start_time_a" style="width:120px; display:inline-block;" autocomplete="off" class="layui-input" value="'+detail.start_time_a+'" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间"><div style="display: inline-block; margin-left:3px; width: 86px;"><select lay-filter="start_time_b" id="start_time_b"></select></div> 至 <input id="end_time_a" name="end_time_a" style="width:120px; display:inline-block;" autocomplete="off" class="layui-input" value="'+detail.end_time_a+'" readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间"><div style="display: inline-block; margin-left:3px; width: 86px;"><select lay-filter="end_time_b" id="end_time_b"></select></div>\
|
||
|
|
</td>\
|
||
|
|
<td class="layui-td-gray">优先级<font>*</font></td>\
|
||
|
|
<td>\
|
||
|
|
<div class="layui-input" id="type" style="width:120px; line-height:35px;">'+type+'</div>\
|
||
|
|
</td>\
|
||
|
|
</tr>\
|
||
|
|
<tr>\
|
||
|
|
<td class="layui-td-gray">日程内容<font>*</font></td>\
|
||
|
|
<td><input name="title" class="layui-input" value="'+detail.title+'" lay-verify="required" placeholder="请完成日程内容" lay-reqText="请完成日程内容"></td>\
|
||
|
|
<td class="layui-td-gray">提醒<font>*</font></td>\
|
||
|
|
<td>\
|
||
|
|
<div class="layui-input" id="remind_type" style="width:120px; line-height:35px;">'+remind_type+'</div>\
|
||
|
|
</td>\
|
||
|
|
</tr>\
|
||
|
|
<tr>\
|
||
|
|
<td class="layui-td-gray-2">日程详细描述</td>\
|
||
|
|
<td colspan="3">\
|
||
|
|
<textarea name="remark" form-input="remark" class="layui-textarea" style="min-height:120px;">'+detail.remark+'</textarea>\
|
||
|
|
</td>\
|
||
|
|
</tr>\
|
||
|
|
</table>\
|
||
|
|
</form>';
|
||
|
|
layer.open({
|
||
|
|
type:1,
|
||
|
|
title:'日程安排',
|
||
|
|
area:['860px','390px'],
|
||
|
|
content:content,
|
||
|
|
success:function(){
|
||
|
|
//日期时间范围
|
||
|
|
laydate.render({
|
||
|
|
elem: '#start_time_a',
|
||
|
|
type: 'date',
|
||
|
|
min: 0,
|
||
|
|
format: 'yyyy-MM-dd',
|
||
|
|
showBottom: false,
|
||
|
|
done:function(a,b,c){
|
||
|
|
detail.start_time_a=a;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//日期时间范围
|
||
|
|
laydate.render({
|
||
|
|
elem: '#end_time_a',
|
||
|
|
type: 'date',
|
||
|
|
min: 0,
|
||
|
|
format: 'yyyy-MM-dd',
|
||
|
|
showBottom: false,
|
||
|
|
done:function(a,b,c){
|
||
|
|
detail.end_time_a=a;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#start_time_a,#end_time_a').empty();
|
||
|
|
|
||
|
|
var hourArray=[];
|
||
|
|
for(var h=0;h<24;h++){
|
||
|
|
var t=h<10?'0'+h:h
|
||
|
|
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;
|
||
|
|
for(var s=0;s<hourArray.length;s++){
|
||
|
|
var check_1='',check_2='';
|
||
|
|
if(hourArray[s]==def_h1){
|
||
|
|
check_1='selected';
|
||
|
|
}
|
||
|
|
if(hourArray[s]==def_h2){
|
||
|
|
check_2='selected';
|
||
|
|
}
|
||
|
|
html_1 += '<option value="'+hourArray[s]+'" '+check_1+'>'+hourArray[s]+'</option>';
|
||
|
|
html_2 += '<option value="'+hourArray[s]+'" '+check_2+'>'+hourArray[s]+'</option>';
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#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_b)', function(data){
|
||
|
|
detail.start_time_b=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();
|
||
|
|
detail.remark=_val;
|
||
|
|
});
|
||
|
|
|
||
|
|
dropdown.render({
|
||
|
|
elem: '#type'
|
||
|
|
,data: [{
|
||
|
|
title: '紧急',
|
||
|
|
templet: function(d){
|
||
|
|
return '<span class="layui-badge-dot"></span> ' + d.title;
|
||
|
|
},
|
||
|
|
id: 1
|
||
|
|
},{
|
||
|
|
title: '重要',
|
||
|
|
templet: function(d){
|
||
|
|
return '<span class="layui-badge-dot layui-bg-orange"></span> ' + d.title;
|
||
|
|
},
|
||
|
|
id: 2
|
||
|
|
},{
|
||
|
|
title: '次要',
|
||
|
|
templet: function(d){
|
||
|
|
return '<span class="layui-badge-dot layui-bg-blue"></span> ' + d.title;
|
||
|
|
},
|
||
|
|
id: 3
|
||
|
|
},{
|
||
|
|
title: '不重要',
|
||
|
|
templet: function(d){
|
||
|
|
return '<span class="layui-badge-dot layui-bg-green"></span> ' + d.title;
|
||
|
|
},
|
||
|
|
id: 4
|
||
|
|
},{
|
||
|
|
title: '无优先级',
|
||
|
|
templet: function(d){
|
||
|
|
return '<span class="layui-badge-dot layui-bg-black"></span> ' + d.title;
|
||
|
|
},
|
||
|
|
id: 5
|
||
|
|
}]
|
||
|
|
,click: function(obj){
|
||
|
|
this.elem.html(obj.title);
|
||
|
|
detail.type = obj.id;
|
||
|
|
}
|
||
|
|
,style: 'width: 120px;'
|
||
|
|
});
|
||
|
|
|
||
|
|
dropdown.render({
|
||
|
|
elem: '#remind_type'
|
||
|
|
,data: [{
|
||
|
|
title: '不提醒',
|
||
|
|
id: 0
|
||
|
|
},{
|
||
|
|
title: '提前5分钟',
|
||
|
|
id: 1
|
||
|
|
},{
|
||
|
|
title: '提前15分钟',
|
||
|
|
id: 2
|
||
|
|
},{
|
||
|
|
title: '提前30分钟',
|
||
|
|
id: 3
|
||
|
|
},{
|
||
|
|
title: '提前1小时',
|
||
|
|
id: 4
|
||
|
|
},{
|
||
|
|
title: '提前2小时',
|
||
|
|
id: 5
|
||
|
|
},{
|
||
|
|
title: '提前1天',
|
||
|
|
id:6
|
||
|
|
}]
|
||
|
|
,click: function(obj){
|
||
|
|
this.elem.html(obj.title);
|
||
|
|
detail.remind_type = obj.id;
|
||
|
|
}
|
||
|
|
,style: 'width: 120px;'
|
||
|
|
});
|
||
|
|
},
|
||
|
|
btn: ['确定提交'],
|
||
|
|
btnAlign:'c',
|
||
|
|
yes: function(idx){
|
||
|
|
if(detail.start_time_a=='' || detail.end_time_a==''){
|
||
|
|
layer.msg('请完善日程时间范围');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if(detail.type==0){
|
||
|
|
layer.msg('请选择日程优先级');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if(detail.title==''){
|
||
|
|
layer.msg('请填写日程内容');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
console.log(detail);
|
||
|
|
$.ajax({
|
||
|
|
url: "/oa/plan/add",
|
||
|
|
type:'post',
|
||
|
|
data:detail,
|
||
|
|
success:function(e){
|
||
|
|
layer.msg(e.msg);
|
||
|
|
if(e.code==0){
|
||
|
|
layer.close(idx);
|
||
|
|
layui.pageTable.reload();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{/block}
|
||
|
|
<!-- /脚本 -->
|