{extend name="base" /}
{block name="title"}工作计划{/block}
{block name="body"}
<style>
.toolbar .layui-inline {
height: 38px;
width: 260px;
float: left;
}
.toolbar .layui-inline .layui-input-inline {
width: 150px;
}
</style>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body">
<!-- 表格工具栏 -->
<form class="layui-form toolbar">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">部门:</label>
<div class="layui-input-inline">
<select name="part_id" id="part_id" lay-filter="part_id" lay-search>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">员工:</label>
<div class="layui-input-inline">
<select name="worker_id" id="worker_id" lay-filter="worker_id" lay-search>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">计划标题:</label>
<div class="layui-input-inline">
<input class="layui-input" name="plan_title" autocomplete="off" placeholder="请输入标题关键词">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">工作类型:</label>
<div class="layui-input-inline">
<select name="plan_type" id="selectedOption" lay-filter="college">
<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>
</select>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">计划日期:</label>
<div class="layui-input-inline" id="planlable" style="width: 175px;">
<input id="planId" name="plan_date" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">
<i id="icon_conference_date" class="layui-icon layui-icon-date mouse-hand"></i>
</div>
</div>
<!-- <div class="layui-inline">-->
<!-- <label class="layui-form-label">计划日期:</label>-->
<!-- <div class="layui-input-inline" style="width: 175px;">-->
<!-- <input name="planId" id="plan_date" class="layui-input" data-type="date" autocomplete="off" placeholder="选择时间" />-->
<!-- </div>-->
<!-- </div>-->
<div class="layui-inline">
<label class="layui-form-label">计划内容:</label>
<div class="layui-input-inline">
<input class="layui-input" name="plan_item" autocomplete="off" placeholder="请输入内容关键词">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">备注:</label>
<div class="layui-input-inline">
<input class="layui-input" name="plan_memo" autocomplete="off" placeholder="请输入备注关键词">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">创建时间:</label>
<div class="layui-input-inline" style="width: 175px;">
<input name="cdate" id="cdate" class="layui-input" autocomplete="off" placeholder="选择时间" />
<i id="icon_request_date" class="layui-icon layui-icon-date mouse-hand"></i>
</div>
</div>
<div class="layui-inline"> 
<button class="layui-btn icon-btn" lay-filter="mxTbSearch" lay-submit>
<i class="layui-icon"></i>搜索
</button>
<button class="layui-btn icon-btn" lay-filter="mxRefresh" lay-submit>
<i class="layui-icon"></i>重置
</button>
</div>
</div>
</form>
<!-- 数据表格 -->
<table id="roleTable" lay-filter="roleTable"></table>
</div>
</div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="roleTbBar">
<input name="id" id="id" type="hidden" value="{{d.id}}" />
<input name="part_id" id="part_id" type="hidden" value="{{d.part_id}}" />
<input name="worker_id" id="worker_id" type="hidden" value="{{d.worker_id}}" />
<input name="attendance_ym" id="attendance_ym" type="hidden" value="{{d.attendance_ym}}" />
<a class="layui-btn layui-btn-xs" lay-event="edit" data-type="edit"><i class="layui-icon"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="subTbBar">
<input name="id" id="id" type="hidden" value="{{d.id}}" />
<input name="part_id" id="part_id" type="hidden" value="{{d.part_id}}" />
<input name="worker_id" id="worker_id" type="hidden" value="{{d.worker_id}}" />
<input name="attendance_date" id="attendance_date" type="hidden" value="{{d.attendance_date}}" />
<!-- <a class="layui-btn layui-btn-xs" lay-event="days" data-type="days"><i class="layui-icon"></i>日考勤列表</a>-->
</script>
{/block}
{block name="script"}
<script>
var insTb;
//当前排序字段
var orderField='';
//当前排序方向
var orderBy='';
var exportExcelUrl;
//Layui主配置
layui.config({
version: '1.0', // 更新组件缓存,设为true不缓存,也可以设一个固定值
base: '/static/assets/module/'
}).extend({ // 模块别名
admin:'admin',
tableEdit: 'tableEdit',
soulTable: 'soulTable',
tableChild: 'tableChild'
});
layui.use(['layer', 'form', 'table', 'admin', 'xmSelect', 'zTree', 'laydate', 'element', 'upload','soulTable','tableChild'], function() {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var admin = layui.admin;
var xmSelect = layui.xmSelect;
var laydate = layui.laydate;
var element = layui.element;
var upload = layui.upload;
var soulTable = layui.soulTable;
var tableChild = layui.tableChild;
//表格列配置
//字段:序号、部门、员工、计划类型、计划标题、创建时间、计划日期、完成情况(已完成、部分完成、未完成)计划内容、备注、附件
var cols = [
{field:'id', title: '序号' , align:'center',type:'numbers'},
{field: 'part_name',title: '部门名称',align: 'center',width:120},
{field: 'worker_name',title: '员工姓名',align: 'center',width:120},
{field: 'plan_title', title: '计划标题',align:'center'},
{field: 'plan_type',title: '计划类型',align: 'center',width: 110,templet:function(d){
if (d.plan_type == 1) {
return '<p class="layui-font-red">日</p>';
}else if(d.plan_type == 2) {
return '<p class="layui-font-green">周</p>';
}else if(d.plan_type == 3){
return '<p class="layui-font-black">月</p>';
}else if (d.plan_type == 4) {
return '<p class="layui-font-cyan">季</p>';
}else if (d.plan_type == 5) {
return '<p class="layui-font-orange">半年</p>';
}else {
return '<p class="layui-font-blue">年</p>';
}
}
},
// {field: 'summary_type',title: '完成情况',align: 'center',width: 110,templet:function(d){
// if (d.summary_type == 0) {
// return '<p class="layui-font-red">未完成</p>';
// }else if(d.summary_type == 1) {
// return '<p class="layui-font-green">已完成</p>';
// }else if(d.summary_type == 3){
// return '<p class="layui-font-orange">部分完成</p>';
// }
// }
// },
{field: 'plan_date',title: '计划日期',align: 'center'},
// {field: 'complete_info',title: '完成情況',align: 'center',},
{field: 'plan_item',title: '计划内容',align: 'center',},
{field: 'plan_memo',title: '备注',align: 'center',},
{field: 'cdate',title: '创建时间',align: 'center',sort: true},
{title: '操作',toolbar: '#roleTbBar',align: 'center',width: 200}
// {fixed: 'right', title:'操作', toolbar: '#mytable-toolbar-btns', width:220,align:'center'}
// {field: 'reward_title', title: '标题',align:'center', totalRowText: '合计'},
];
// 定义事件侦听器函数
function watchWindowSize() {
// 获取窗口的宽度和高度,不包括滚动条
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// 打印结果
table.reload('roleTable',{height:h - $('#roleTable').offset().top - 25});
}
// 将事件侦听器函数附加到窗口的resize事件
window.addEventListener("resize", watchWindowSize);
// 第一次调用该函数
watchWindowSize();
/* 渲染表格 */
insTb = table.render({
elem: '#roleTable',
url: "{:url('oa/workplan/datalist')}",
page: {
limit: 20
},
limits: [20,50,100,200,500],
//表头 文字
toolbar: ['<p>',
'<button lay-event="data" class="layui-btn layui-btn-sm icon-btn" data-type="add"><i class="layui-icon"></i>新增工作计划</button> ',
'</p>'
].join(''),
cellMinWidth: 100,
size: 'sm', //小尺寸的表格
height: $(document).height() - $('#roleTable').offset().top - 25,//设置页数固定
cols: [cols],
parseData: function(res) { //res 即为原始返回的数据
// console.log('后台列表返回的数据')
// console.log(res)
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.data //解析数据列表
};
},
done: function () { //表格创建完毕后的回调方法
soulTable.render(this);//设置工具栏表头高度
//解决操作栏因为内容过多换行问题
$(".layui-table-main tr").each(function (index, val) {
$($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
$($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
});
//解决fixed固定,而导致的th高度不一致
$(".layui-table-main tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
});
});
$(".layui-table-main tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-body tbody th")[index]).height($(val).height());
});
});
}
});
//表头 请求链接
var active = {
add: function() {
layer.open({
type: 2,
title: '新增计划',
area: ['900px', '700px'],
fixed: false,
content: "{:url('oa/workplan/add')}"
});
},
edit: function() {
layer.open({
type: 2,
title: '编辑',
area: ['900px', '700px'],
fixed: false,
content: "{:url('oa/workplan/edit')}?id=" + $(this).parent().find('#id').val()
});
},
request: function() {
/* layer.open({
type: 2,
title: '补卡申请列表',
area: [$(window).width() + 'px', $(window).height() + 'px'],
fixed: false,
content: "{:url('oa/workplan/request')}"
});*/
},
leave: function() {
/* layer.open({
type: 2,
title: '请假申请列表',
area: [$(window).width() + 'px', $(window).height() + 'px'],
fixed: false,
content: "{:url('oa/workplan/leave')}"
});*/
},
data: function() {
/* layer.open({
type: 2,
title: '考勤原始数据列表',
area: [$(window).width() + 'px', $(window).height() + 'px'],
fixed: false,
content: "{:url('oa/workplan/data')}"
});*/
},
}
//点击请创建日期图标
$("#icon_cdate").click(function() {
$("#cdate").click();
});
//日期时间范围
laydate.render({
elem: '#cdate',
type: 'date',
// value : getRecentDay(-30)+' ~ '+getRecentDay(0),
range: '~'
});
//日期时间范围
laydate.render({
elem: '#attendance_ym'
,type: 'month'
// ,range: true
});
//点击计划日期图标
$("#icon_cdate").click(function() {
$("#plandate").click();
});
//日期时间范围
laydate.render({
elem: '#plandate',
type: 'date',
range: '~'
// range: true
});
//点击请创建日期图标
$("#icon_cdate").click(function() {
$("#planId").click();
});
//------
//计划日选择器
laydate.render({
elem: '#planId',
// max: genTime('d'),
// value: genTime('d'),
type: 'date'
});
function genTime(opt) {
var now = new Date();
var year = now.getFullYear();
var mth = now.getMonth();
var day = now.getDate();
var month = mth + 1;
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
var str;
if (opt == 'd') {
str = year + '-' + month + '-' + day;
} else if (opt == 'm') {
str = year + '-' + month;
}
return str;
}
form.on('select(college)', function (data) {
let opt = $("#selectedOption").val();
let ele = $("#selectedOption");
console.log(opt)
$("#planId").remove();
// $("#worldlable").html('<input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">');
$("#planlable").html('<input id="planId" name="plan_date" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">');
// 月
if (opt == 3) {
laydate.render({
elem: '#planId',
type: 'month',
// max: genTime('month'),
value: genTime('month'),
btns: ['clear', 'confirm']
});
// 日
} else if (opt == 1) {
laydate.render({
elem: '#planId',
type: 'date',
// max: genTime('day'),
value: genTime('day'),
btns: ['clear', 'confirm']
});
// 周
} else if (opt == 2) {
renderWeekDate('#planId', '');
// 季度
} else if (opt == 4) {
renderSeasonDate('#planId', '');
}else if (opt == 5) {
renderHalfYearDate('#planId', '');
// 年
} else if (opt == 6) {
laydate.render({
elem: '#planId',
type: 'year',
// max: genTime('day'),
value: genTime('year'),
btns: ['clear', 'confirm']
});
}
toSearch();
});
// 周
function renderWeekDate(ohd, sgl) {
let ele = $(ohd);
laydate.render({
elem: ohd,
type: 'date',
// max: genTime('day'),
format: "yyyy-MM-dd至yyyy-MM-dd",
btns: ['clear', 'confirm'],
done: function (value, date, endDate) {
if (value != "" && value.length > 0) {
let today = new Date(value.substring(0, 10));
let weekday = today.getDay();
let monday;
let sunday;
if (weekday == 0) {
monday = new Date(1000 * 60 * 60 * 24 * (weekday - 6) + today.getTime());
} else {
monday = new Date(1000 * 60 * 60 * 24 * (1 - weekday) + today.getTime());
}
if (weekday == 0) {
sunday = today;
} else {
sunday = new Date(1000 * 60 * 60 * 24 * (7 - weekday) + today.getTime());
}
let month = monday.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
let day1 = monday.getDate();
if (day1 < 10) {
day1 = "0" + day1;
}
let start = "" + monday.getFullYear() + "-" + month + "-" + day1;
let month2 = sunday.getMonth() + 1;
if (month2 < 10) {
month2 = "0" + month2;
}
let day2 = sunday.getDate();
if (day2 < 10) {
day2 = "0" + day2;
}
let end = "" + sunday.getFullYear() + "-" + month2 + "-" + day2;
ele.val(start + "至" + end);
} else {
ele.val('');
}
}
});
}
// 季度
function renderSeasonDate(ohd, sgl) {
let ele = $(ohd);
laydate.render({
elem: ohd,
type: 'month',
format: 'yyyy 第M季度',
btns: ['clear', 'confirm'],
ready: function (value, date, endDate) {
let hd = $("#layui-laydate" + ele.attr("lay-key"));
if (hd.length > 0) {
hd.click(function () {
quarter($(this));
});
}
quarter(hd);
},
done: function (value, date, endDate) {
if (!isNull(date) && date.month > 0 && date.month < 5) {
ele.attr("startDate", date.year + " " + date.month);
} else {
ele.attr("startDate", "");
}
if (!isNull(endDate) && endDate.month > 0 && endDate.month < 5) {
ele.attr("endDate", endDate.year + " " + endDate.month)
} else {
ele.attr("endDate", "");
}
}
});
}
//半年
function renderHalfYearDate(ohd, sgl) {
console.log(1212)
let ele = $(ohd);
laydate.render({
elem: ohd,
type: 'month',
format: "yyyy",
value: genTime('half'),
btns: ['clear', 'confirm'],
ready: function(value, date) {
// console.log(value, date, endDate)
let hd = $("#layui-laydate" + ele.attr("lay-key"));
if (hd.length > 0) {
hd.click(function() {
half($(this));
});
}
half(hd);
},
done: function(value, date) {
// console.log(value, date.month)
var finaltime = ''
if (!isNull(date) && date.month > 0 && date.month == 1) {
finaltime = date.year + " " + '上半年'
} else {
finaltime = date.year + " " + '下半年'
}
ele.val(finaltime);
}
});
}
//半年
function half(thiz) {
var mls = thiz.find(".laydate-month-list");
mls.each(function(i, e) {
$(this).find("li").each(function(inx, ele) {
var cx = ele.innerHTML;
if (inx < 2) {
cx = cx.replace(/月/g, "半年");
ele.innerHTML = cx.replace(/一/g, "上").replace(/二/g, "下");
} else {
ele.style.display = "none";
}
});
});
}
function quarter(thiz) {
let mls = thiz.find(".laydate-month-list");
mls.each(function (i, e) {
$(this).find("li").each(function (inx, ele) {
let cx = ele.innerHTML;
if (inx < 4) {
ele.innerHTML = cx.replace(/月/g, "季度");
} else {
ele.style.display = "none";
}
});
});
}
function isNull(quarter) {
if (quarter == null || typeof (quarter) == "undefined" || quarter == "") return true;
return false;
}
//---
//获取部门数据
getPartList();
function getPartList() {
$.ajax({
"url": "{:url('oa/workplan/getPartList')}", //访问路径
"data": "", // 需要传输的数据
"type": "post", // 请求方式
"dataType": "json", // 返回值类型
"success": function(obj) { // 响应成功时的回调函数
// console.log(obj);
var tmp = '<option value="" >请选择</option>';
$.each(obj.data, function(index, item) {
tmp += '<option value="' + item.id + '">' + item.part_name + '</option>';
});
$("#part_id").html(tmp);
form.render();
},
"error": function(obj) {} // 响应失败时的回调函数
});
toSearch()
}
// 下拉列表联动 部门人员
form.on('select(part_id)', function(data) {
var html = $("#worker_id");
html.empty(); //清空下拉框的值
html.append(new Option('请选择', '')); // 下拉菜单里添加元素
if (data.value !== '') {
$.get("{:url('/oa/workplan/getWorkerList/id/" + data.value + "')}", function(res) {
// console.log(res);
$.each(res.data, function(index, item) {
html.append(new Option(item.real_name, item.id)); // 下拉菜单里添加元素
});
layui.form.render("select"); //重新渲染 固定写法
}, 'json');
} else {
layui.form.render("select"); //重新渲染 固定写法
}
toSearch();
});
/* 表格搜索 */
form.on('submit(mxTbSearch)', function(data) {
data.field.field = orderField;
data.field.type = orderBy;
console.log('搜索')
console.log(data.field)
insTb.reload({
where: data.field,
page: {
curr: 1
},
url: "{:url('oa/workplan/serach')}"
});
return false;
});
$("#reset").on('click',function(){
location.reload();
});
//表格排序事件
table.on('sort(roleTable)', function(obj) {
// console.log(obj.field); //当前排序的字段名
// console.log(obj.type); //当前排序类型:desc(降序)、asc(升序)、null(空对象,默认排序)
// console.log(this); //当前排序的 th 对象
//获取排序后的表格数据
// console.log($('input[name=bill_no]').val());
//当前排序字段
orderField=obj.field;
//当前排序方向
orderBy=obj.type;
//表格排序
insTb.reload({
where: {
part_id:$('select[name=part_id]').val(),
worker_id:$('select[name=worker_id]').val(),
plan_type:$('select[name=plan_type]').val(),
plan_title:$('input[name=plan_title]').val(),
plan_date:$('input[name=plan_date]').val(),
plan_item:$('input[name=plan_item]').val(),
plan_memo:$('input[name=plan_memo]').val(),
cdate:$('input[name=cdate]').val(),
field:orderField,
type:orderBy
},
// page: {
// curr: 1
// },
url: "{:url('oa/workplan/serach')}"
});
return false;
});
//选择中搜索
function toSearch(){
insTb.reload({
where: {
part_id:$('select[name=part_id]').val(),
worker_id:$('select[name=worker_id]').val(),
plan_type:$('select[name=plan_type]').val(),
field:orderField,
type:orderBy
},
page: {
curr: 1
},
url: "{:url('oa/workplan/serach')}"
});
return false;
}
/* 表格工具条点击事件 */
table.on('tool(roleTable)', function(obj) {
if (obj.event === 'edit') { // 编辑
var type = $(this).data('type');
active[type] && active[type].call(this);
} else if (obj.event === 'del') { // 删除
// console.log('删除')
// console.log(obj)
doDel(obj);
}
});
/* 表格头工具栏点击事件 */
table.on('toolbar(roleTable)', function(obj) {
if (obj.event === 'request') { // 补卡
var type = $(this).data('type');
active[type] && active[type].call(this);
} else if (obj.event === 'leave') { // 请假
var type = $(this).data('type');
active[type] && active[type].call(this);
} else if (obj.event === 'data') { // 原始数据
var type = $(this).data('type');
active[type] && active[type].call(this);
} else if(obj.event === 'LAYTABLE_EXPORT'){ // 导出
var loadIndex = layer.load();
exportExcelUrl = "{:url('oa/workplan/export')}?part_id="+$('select[name=part_id]').val()+"&worker_id="+$('select[name=worker_id]').val()+"&attendance_ym="+$('input[name=attendance_ym]').val()+"&cdate="+$('input[name=cdate]').val()+"&field="+orderField+"&type="+orderBy;
layer.close(loadIndex);
}
});
/* 删除 */
function doDel(obj) {
layer.confirm('确定要删除选中的数据吗?', {
title: '删除数据',
skin: 'layui-layer-admin',
btn: ['<i class="layui-icon"></i>确定', '<i class="layui-icon">ဆ</i>取消'],
shade: 0.5,
shadeClose: true,
}, function(i) {
layer.close(i);
var loadIndex = layer.load();
$.post("{:url('oa/workplan/del')}", {
id: obj.data ? obj.data.id : '',
ids: obj.ids ? obj.ids.join(',') : ''
}, function(res) {
layer.close(loadIndex);
if (res.code === 1) {
layer.msg(res.msg, {
icon: 1
});
insTb.reload();
} else {
layer.msg(res.msg, {
icon: 5,
anim: 6
});
}
}, 'json');
});
}
/* 修改状态 */
form.on('switch(userTbStateCk)', function(obj) {
var loadIndex = layer.load();
$.post("{:url('oa/workplan/edit_state_same')}", {
id: obj.elem.value,
status: obj.elem.checked ? 1 : 0
}, function(res) {
layer.close(loadIndex);
if (res.code === 1) {
layer.msg(res.msg);
insTb.reload();
} else {
layer.msg(res.msg, {
icon: 5,
anim: 6
});
$(obj.elem).prop('checked', !obj.elem.checked);
form.render('checkbox');
}
}, 'json');
});
});
</script>
{/block}