{extend name="../../base/view/common/base" /}
|
<!-- 主体 -->
|
{block name="body"}
|
<style>
|
#showNecessaryTimeBox,
|
#showUnNecessaryTimeBox {
|
display: flex;
|
}
|
#showNecessaryTimeBox p,
|
#showUnNecessaryTimeBox p {
|
line-height: 26px;
|
display: none;
|
}
|
#showNecessaryTimeList,
|
#showUnNecessaryTimeList {
|
display: flex;
|
gap: 20px;
|
}
|
.timeItem {
|
border: 1px solid #ccc;
|
padding: 2px 8px;
|
border-radius: 4px;
|
position: relative;
|
}
|
.closeBtn {
|
background: #ff5722;
|
color: #fff;
|
border-radius: 50%;
|
font-size: 12px;
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
line-height: 18px;
|
text-align: center;
|
position: absolute;
|
right: -6px;
|
top: -6px;
|
cursor: pointer;
|
}
|
</style>
|
<form class="layui-form p-4">
|
<h3 class="pb-3">考勤组</h3>
|
{if condition="$id eq 0"}
|
<table class="layui-table">
|
<tr>
|
<td class="layui-td-gray-3">考勤组名称<font>*</font></td>
|
<td>
|
<input
|
type="text"
|
name="name"
|
lay-verify="required"
|
autocomplete="off"
|
placeholder="请输入考勤组名称"
|
lay-reqText="请输入岗位名称"
|
class="layui-input"
|
/>
|
</td>
|
<td class="layui-td-gray-3">考勤类型<font>*</font></td>
|
<td>
|
<select name="type" lay-verify="required" lay-reqText="请选择">
|
<option value="">请选择</option>
|
<option value="1">固定班制</option>
|
<option value="2">自由工时</option>
|
</select>
|
</td>
|
</tr>
|
<tr>
|
<td class="layui-td-gray-3">参与考勤人员<font>*</font></td>
|
<td>
|
<input
|
type="text"
|
name="attendance_participants"
|
autocomplete="off"
|
readonly
|
lay-verify="required"
|
lay-reqText="请选择参与考勤人员"
|
placeholder="请选择参与考勤人员"
|
class="layui-input picker-diy"
|
/>
|
<input type="hidden" name="attendance_participants_id" />
|
</td>
|
<td class="layui-td-gray-3">无需考勤人员</td>
|
<td>
|
<input
|
type="text"
|
name="attendance_not_participants"
|
autocomplete="off"
|
readonly
|
lay-reqText="请选择无需考勤人员"
|
placeholder="请选择无需考勤人员"
|
class="layui-input picker-diy"
|
/>
|
<input type="hidden" name="attendance_not_participants_id" />
|
</td>
|
</tr>
|
<tr>
|
<td class="layui-td-gray">工作日设置<font>*</font></td>
|
<td colspan="5">
|
<table
|
id="timeBox"
|
class="layui-table layui-table-min"
|
style="margin: 0"
|
>
|
<tr>
|
<th width="50"></th>
|
<th width="100">工作日</th>
|
<th>班次时间段</th>
|
<th width="60">操作</th>
|
</tr>
|
<tr>
|
<td>
|
<input type="checkbox" name="work1" lay-skin="primary" title="" />
|
</td>
|
<td>周一</td>
|
<td style="text-align: left"></td>
|
<td>
|
<a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
|
>设置班次</a
|
>
|
<input type="hidden" name="work_plan_id1" value="" />
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<input type="checkbox" name="work2" lay-skin="primary" title="" />
|
</td>
|
<td>周二</td>
|
<td style="text-align: left"></td>
|
<td>
|
<a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
|
>设置班次</a
|
>
|
<input type="hidden" name="work_plan_id2" value="" />
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<input type="checkbox" name="work3" lay-skin="primary" title="" />
|
</td>
|
<td>周三</td>
|
<td style="text-align: left"></td>
|
<td>
|
<a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
|
>设置班次</a
|
>
|
<input type="hidden" name="work_plan_id3" value="" />
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<input type="checkbox" name="work4" lay-skin="primary" title="" />
|
</td>
|
<td>周四</td>
|
<td style="text-align: left"></td>
|
<td>
|
<a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
|
>设置班次</a
|
>
|
<input type="hidden" name="work_plan_id4" value="" />
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<input type="checkbox" name="work5" lay-skin="primary" title="" />
|
</td>
|
<td>周五</td>
|
<td style="text-align: left"></td>
|
<td>
|
<a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
|
>设置班次</a
|
>
|
<input type="hidden" name="work_plan_id5" value="" />
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<input type="checkbox" name="work6" lay-skin="primary" title="" />
|
</td>
|
<td>周六</td>
|
<td style="text-align: left"></td>
|
<td>
|
<a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
|
>设置班次</a
|
>
|
<input type="hidden" name="work_plan_id6" value="" />
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<input type="checkbox" name="work7" lay-skin="primary" title="" />
|
</td>
|
<td>周日</td>
|
<td style="text-align: left"></td>
|
<td>
|
<a class="layui-btn layui-btn-xs picker-oa" data-types="workPlan"
|
>设置班次</a
|
>
|
<input type="hidden" name="work_plan_id7" value="" />
|
</td>
|
</tr>
|
</table>
|
</td>
|
</tr>
|
<tr>
|
<td class="layui-td-gray-3">特殊日期</td>
|
<td colspan="5">
|
<div style="margin-bottom: 10px">
|
<div id="showNecessaryTimeBox">
|
<p>必须打卡日期：</p>
|
<div id="showNecessaryTimeList"></div>
|
</div>
|
</div>
|
<div style="margin-bottom: 10px">
|
<button
|
class="layui-btn layui-btn-sm"
|
type="button"
|
id="addNecessaryTimeBtn"
|
>
|
+ 新增必须打卡的日期
|
</button>
|
</div>
|
<div style="margin-bottom: 10px">
|
<div id="showUnNecessaryTimeBox">
|
<p>无需打卡日期：</p>
|
<div id="showUnNecessaryTimeList"></div>
|
</div>
|
</div>
|
<div style="margin-bottom: 10px">
|
<button
|
class="layui-btn layui-btn-sm"
|
type="button"
|
id="addUnNecessaryTimeBtn"
|
>
|
+ 新增无需打卡的日期
|
</button>
|
</div>
|
</td>
|
</tr>
|
</table>
|
{else/}
|
<table class="layui-table layui-table-form">
|
<tr>
|
<td class="layui-td-gray">考勤组名称<font>*</font></td>
|
<td>
|
<input
|
type="text"
|
name="name"
|
value="{$detail.name}"
|
lay-verify="required"
|
autocomplete="off"
|
placeholder="请输入考勤组名称"
|
lay-reqText="请输入岗位名称"
|
class="layui-input"
|
/>
|
</td>
|
</tr>
|
</table>
|
{/if}
|
<div class="pt-4">
|
<input type="hidden" name="id" value="{$id}" />
|
<button
|
class="layui-btn layui-btn-normal"
|
lay-submit=""
|
lay-filter="webform"
|
>
|
立即提交
|
</button>
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
</div>
|
</form>
|
{/block}
|
<!-- /主体 -->
|
|
<!-- 脚本 -->
|
{block name="script"}
|
<script>
|
const moduleInit = ["tool", "oaPicker"];
|
function gouguInit() {
|
var oaPicker = layui.oaPicker,
|
laydate = layui.laydate,
|
form = layui.form,
|
tool = layui.tool;
|
//选择员工弹窗
|
$("body").on("click", ".picker-diy", function () {
|
let that = $(this);
|
let ids = that.next().val() + "",
|
names = that.val() + "";
|
oaPicker.employeeInit({
|
ids: ids,
|
names: names,
|
type: 2, //1是单选，2是多选
|
callback: function (data) {
|
//这里是选择后的回调方法，可以根据具体需求自定义写哦
|
let select_id = [],
|
select_name = [];
|
for (var a = 0; a < data.length; a++) {
|
select_id.push(data[a].id);
|
select_name.push(data[a].name);
|
}
|
that.val(select_name.join(","));
|
that.next().val(select_id.join(","));
|
}
|
});
|
});
|
|
laydate.render({
|
elem: "#addNecessaryTimeBtn",
|
done: function (value, date) {
|
$("#addNecessaryTimeBtn").html("+ 新增必须打卡的日期");
|
var oldValues = $(".timeValue");
|
var isE = false;
|
for (let i = 0; i < oldValues.length; i++) {
|
const oldValue = oldValues[i];
|
if (oldValue.innerHTML == value) {
|
isE = true;
|
}
|
}
|
if (!isE) {
|
$("#showNecessaryTimeBox p").show();
|
$("#showNecessaryTimeList").append(
|
"<div class='timeItem'><span class='timeValue'>" +
|
value +
|
"</span><input type='hidden' name='necessaryTime[]' value=" +
|
value +
|
" /><span class='closeBtn layui-icon'>ဆ</span></div>"
|
);
|
bindCloseBtn();
|
} else {
|
layer.msg("已有相同日期");
|
}
|
}
|
});
|
|
laydate.render({
|
elem: "#addUnNecessaryTimeBtn",
|
done: function (value, date) {
|
$("#addUnNecessaryTimeBtn").html("+ 新增无需打卡的日期");
|
var oldValues = $(".timeValue");
|
var isE = false;
|
for (let i = 0; i < oldValues.length; i++) {
|
const oldValue = oldValues[i];
|
if (oldValue.innerHTML == value) {
|
isE = true;
|
}
|
}
|
if (!isE) {
|
$("#showUnNecessaryTimeBox p").show();
|
$("#showUnNecessaryTimeList").append(
|
"<div class='timeItem'><span class='timeValue'>" +
|
value +
|
"</span><input type='hidden' name='unNecessaryTime[]' value=" +
|
value +
|
" /><span class='closeBtn layui-icon'>ဆ</span></div>"
|
);
|
bindCloseBtn();
|
} else {
|
layer.msg("已有相同日期");
|
}
|
}
|
});
|
|
//监听提交
|
form.on("submit(webform)", function (data) {
|
let callback = function (e) {
|
layer.msg(e.msg);
|
if (e.code == 0) {
|
tool.sideClose(1000);
|
}
|
};
|
tool.post("/user/attendance/add", data.field, callback);
|
return false;
|
});
|
}
|
|
function bindCloseBtn() {
|
$(".closeBtn").off("click");
|
$(".closeBtn").on("click", function () {
|
let that = $(this);
|
that.parent().remove();
|
if ($("#showNecessaryTimeList .timeItem").length == 0) {
|
$("#showNecessaryTimeBox p").hide();
|
}
|
if ($("#showUnNecessaryTimeList .timeItem").length == 0) {
|
$("#showUnNecessaryTimeBox p").hide();
|
}
|
});
|
}
|
</script>
|
{/block}
|
<!-- /脚本 -->
|
