czl-web/pages/real/personAttendanceList.html

211 lines
8.5 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>人员考勤列表</title>
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
</head>
<style>
.layui-table th {
font-weight: bold;
text-align: center
}
.layui-table td {
text-align: center
}
.layui-btn-sm {
height: 35px;
line-height: 35px;
padding: 0px 10px;
font-size: 16px;
}
</style>
<body style="margin-left: 15px">
<form class="layui-form" action="" onsubmit="return false">
<div class="layui-form-item" style="margin-bottom: 0px;">
<div class="layui-inline" style="margin-top: 10px;">
<div class="layui-input-inline">
<input type="text" id="keyWord" placeholder="请输入关键字" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline" style="width: 150px;margin-left: 18px;">
<select id="orgId" class="layui-select" lay-search=""></select>
</div>
<div class="layui-input-inline" style="border: 0px dashed dimgrey;width: 150px;">
<select id="jobStatus" name="jobStatus" class="form-control input-sm">
<option value="">在场/在职状态</option>
<option value="1">在场/在职</option>
<option value="2">离场/离职</option>
</select>
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="time" placeholder="选择考勤日期范围">
</div>
<div class="layui-input-inline" style="width: 70px;margin-top: 2px">
<button id="searchBt" class="layui-btn layui-btn-sm">查询</button>
</div>
<div class="layui-input-inline" style="width: 70px;margin-top: 2px">
<button id="resetBt" class="layui-btn layui-btn-sm">重置</button>
</div>
<div class="layui-input-inline" style="width: 70px;margin-top: 2px">
<button id="exportBt" class="layui-btn layui-btn-sm">导出</button>
</div>
</div>
</div>
</form>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="toolsBar">
<a lay-event="view" style="color: #009688;cursor: pointer;font-size: 15px">详情</a>
</script>
</body>
</html>
<script src="../../js/jquery/jquery-3.6.0.js"></script>
<script src="../../layui-v2.8.18/layui/layui.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script src="../../js/common_methon.js"></script>
<script src="../../js/aes.js"></script>
<script type="text/javascript" src="../../js/publicJs.js"></script>
<script type="text/javascript" src="../../js/select.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script>
let form;
var tree;
var table;
var laydate;
const token = localStorage.getItem("token");
$("#resetBt").click(function () {
$("#keyWord").val("");
$("#orgId").val("");
$("#jobStatus").val("");
$("#time").val(getNowTime() + " - " + getNowTime());
getOrgName(form, null);
table.reload('menuTable', {
url: ctxPath + '/realData/getPersonAttendanceList'
, method: 'post' //方式默认是get
, page: true
, where: {
keyWord: "",
orgId: "",
startTime: $("#time").val().substring(0,10),
endTime: $("#time").val().substring(13,23),
jobStatus: "",
} //设定异步数据接口的额外参数
});
})
$("#searchBt").click(function () {
table.reload('menuTable', {
url: ctxPath + '/realData/getPersonAttendanceList'
, method: 'post' //方式默认是get
, page: true
, where: {
keyWord: $("#keyWord").val(),
orgId: $("#orgId").val(),
jobStatus: $("#jobStatus").val(),
startTime: $("#time").val().substring(0,10),
endTime: $("#time").val().substring(13,23),
} //设定异步数据接口的额外参数
});
})
$("#exportBt").click(function(){
keyWord = $("#keyWord").val();
orgId = $("#orgId").val();
jobStatus = $("#jobStatus").val();
startTime = $("#time").val().substring(0,10);
endTime = $("#time").val().substring(13,23);
window.location.href = ctxPath + "/realData/exportPhysicalCheckResults?"
+"keyWord=" + keyWord
+ "&orgId=" + orgId
+ "&jobStatus=" + jobStatus
+ "&startTime=" + startTime
+ "&endTime=" + endTime
+ "&type=" + '1'
+ "&token=" + token; //下载文件
})
layui.use(['table', 'form', 'laydate'], function () {
table = layui.table;
form = layui.form;
laydate = layui.laydate;
// 日期时间范围
laydate.render({
elem: '#time',
range: true,
value: getNowTime() + " - " + getNowTime() // 设置默认值为当天
});
//渲染表格
table.render({
elem: '#demo'
, url: ctxPath + '/realData/getPersonAttendanceList' //数据接口
, method: 'post' //方式默认是get
, toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
, where: {
startTime: $("#time").val().substring(0,10),
endTime: $("#time").val().substring(13,23),
} //post请求必须加where post请求需要的参数
, cellMinWidth: 80
, cols: [[ //表头
{
field: 'number', width: 80, title: '序号', align: 'center', type: 'numbers'
}
, {field: 'personName', align: 'center', title: '姓名'}
, {field: 'idCard', align: 'center', title: '身份证',templet:d=>{
if(d.idCard){
if(d.idCard.length>18){
return decrypt(d.idCard)
}
}
return d.idCard;
}}
, {field: 'workType', align: 'center', title: '工种'}
, {
field: 'jobStatus', title: '在场/在职状态', align: 'center', templet: d => {
let text = "";
if (d.jobStatus === "在职" || d.jobStatus === "在场") {
text = "<span class='layui-badge-dot layui-bg-green'></span>在职";
} else if (d.jobStatus === "离场" || d.jobStatus === "离职") {
text = "<span class='layui-badge-dot'></span>离场";
}
return text;
}
}
, {field: 'kqNums', align: 'center', title: '考勤天数'}
, {field: 'qqNums', align: 'center', title: '缺勤天数'}
, {field: 'sunUnit', align: 'center', title: '所属单位/分包'}
, {field: 'proName', align: 'center', title: '所属工程'}
, {field: 'personType', align: 'center', title: '人员类型'}
]]
, id: 'menuTable'
, page: true //开启分页
, loading: true //数据加载中。。。
, limits: [5, 10, 20] //一页选择显示3,5或10条数据
, limit: 10 //一页显示5条数据
, response: {
statusCode: 200 //规定成功的状态码默认0
}, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据res为从url中get到的数据
let result;
if (res.data !== '' && res.data != null && res.data !== "null") {
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
} else {
result = res.data.slice(0, this.limit);
}
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result, //解析数据列表
};
},
toolbar: "#toolbar"
});
getOrgName(form, null);
});
</script>