{extend name="../../base/view/common/base" /}
|
<!-- 主体 -->
|
{block name="body"}
|
<div class="p-page">
|
<table class="layui-hide" id="test" lay-filter="test"></table>
|
</div>
|
|
<script type="text/html" id="toolbarDemo">
|
<div class="layui-btn-container">
|
<button class="layui-btn layui-btn-sm" lay-event="add">+ 添加考勤组</button>
|
</div>
|
</script>
|
<script type="text/html" id="barDemo">
|
<div class="layui-btn-group">
|
<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button
|
><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
|
删除
|
</button>
|
</div>
|
</script>
|
|
{/block}
|
<!-- /主体 -->
|
|
<!-- 脚本 -->
|
{block name="script"}
|
<script>
|
const moduleInit = ["tool"];
|
function gouguInit() {
|
var table = layui.table,
|
tool = layui.tool;
|
layui.pageTable = table.render({
|
elem: "#test",
|
title: "考勤组列表",
|
toolbar: "#toolbarDemo",
|
defaultToolbar: false,
|
url: "/user/attendance/index", //数据接口
|
page: false, //开启分页
|
cols: [
|
[
|
{
|
field: "name",
|
title: "名称",
|
align: "center",
|
width: 300
|
},
|
{
|
field: "peopleNum",
|
title: "人数",
|
width: 120,
|
templet: function (d) {
|
var users = d.linkUserDate.filter((item) => item.type == "1");
|
return users.length;
|
}
|
},
|
{
|
field: "type",
|
title: "类型",
|
width: 120,
|
templet: function (d) {
|
if (d.type == "1") {
|
return "固定班制";
|
}
|
if (d.type == "2") {
|
return "自由工时";
|
}
|
}
|
},
|
{
|
field: "time",
|
title: "考勤时间",
|
templet: function (d) {
|
// 按照班次分组
|
var planMap = {};
|
Object.keys(d.work_plan).forEach((key) => {
|
var item = d.work_plan[key];
|
var showTxt = "";
|
var index = 0;
|
if (key.indexOf("mon_") > -1) {
|
showTxt = "周一";
|
index = 1;
|
}
|
if (key.indexOf("tue_") > -1) {
|
showTxt = "周二";
|
index = 2;
|
}
|
if (key.indexOf("wed_") > -1) {
|
showTxt = "周三";
|
index = 3;
|
}
|
if (key.indexOf("thur_") > -1) {
|
showTxt = "周四";
|
index = 4;
|
}
|
if (key.indexOf("fri_") > -1) {
|
showTxt = "周五";
|
index = 5;
|
}
|
if (key.indexOf("sat_") > -1) {
|
showTxt = "周六";
|
index = 6;
|
}
|
if (key.indexOf("sun_") > -1) {
|
showTxt = "周日";
|
index = 7;
|
}
|
if (item.id) {
|
if (!planMap[item.id])
|
planMap[item.id] = { showTxt: [], index: null };
|
planMap[item.id].times = item.times;
|
planMap[item.id].showTxt.push(showTxt);
|
if (planMap[item.id].index) {
|
if (planMap[item.id].index > index)
|
planMap[item.id].index = index;
|
} else {
|
planMap[item.id].index = index;
|
}
|
} else {
|
if (!planMap["null"]) planMap["null"] = { showTxt: [], index: 999 };
|
planMap.null.showTxt.push(showTxt);
|
}
|
});
|
|
// 根据班次分类显示时间，并且根据周一到周日排序，休息放在最后
|
var infoList = [];
|
Object.keys(planMap).forEach((key) => {
|
infoList.push(planMap[key])
|
});
|
infoList.sort((a, b) => a.index - b.index);
|
console.log(infoList, "infoList");
|
var html_ = "";
|
for (let i = 0; i < infoList.length; i++) {
|
const infoItem = infoList[i];
|
html_ +=
|
"<p>" +
|
infoItem.showTxt.join("、") +
|
"：" +
|
(infoItem.times && infoItem.times.length > 0
|
? infoItem.times.map(
|
(item) => item.begin_time + " - " + item.end_time
|
)
|
: "休息") +
|
"</p>";
|
}
|
|
console.log(html_);
|
|
return html_;
|
}
|
},
|
{
|
field: "right",
|
title: "操作",
|
toolbar: "#barDemo",
|
width: 120,
|
align: "center"
|
}
|
]
|
]
|
});
|
|
//表头工具栏事件
|
table.on("toolbar(test)", function (obj) {
|
if (obj.event === "add") {
|
tool.side("/user/attendance/add");
|
return;
|
}
|
});
|
//监听行工具事件
|
table.on("tool(test)", function (obj) {
|
var data = obj.data;
|
if (obj.event === "edit") {
|
tool.side("/user/attendance/add?id=" + data.id);
|
return;
|
}
|
if (obj.event === "del") {
|
layer.confirm(
|
"您确定要删除该考勤组",
|
{
|
icon: 3,
|
title: "提示"
|
},
|
function (index) {
|
let callback = function (e) {
|
layer.msg(e.msg);
|
if (e.code == 0) {
|
obj.del();
|
}
|
};
|
tool.delete(
|
"/user/attendance/delete",
|
{ id: obj.data.id },
|
callback
|
);
|
layer.close(index);
|
}
|
);
|
}
|
});
|
}
|
</script>
|
{/block}
|
<!-- /脚本 -->
|
