考勤组的增加已经表单逻辑

YM

2025-03-10 f2a13e01e8843302dfb2e80fe18edec3a4ba137f

 app/user/view/attendance/add.html

@@ -1,82 +1,272 @@
{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">岗位名称<font>*</font></td>
         <td>
            <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入岗位名称" lay-reqText="请输入岗位名称" class="layui-input">
         </td>
         <td class="layui-td-gray-3">岗位工时单价(元)<font>*</font></td>
         <td>
            <input type="text" name="work_price" lay-verify="required|number" placeholder="请输入岗位工时单价" lay-reqText="请输入岗位工时单价" autocomplete="off" class="layui-input">
         </td>
      </tr>
      <tr>
         <td class="layui-td-gray">状态<font>*</font></td>
         <td colspan="3">
            <input type="radio" name="status" value="1" title="正常" checked>
            <input type="radio" name="status" value="0" title="禁用">
         </td>
      </tr>
      <tr>
         <td class="layui-td-gray">权限角色<font>*</font></td>
         <td colspan="3">
            {volist name="$group" id="v"}
            <input type="checkbox" name="group_id[]" title="{$v.title}" value="{$v.id}" lay-skin="primary">
            {/volist}
         </td>
      </tr>
      <tr>
         <td class="layui-td-gray">岗位备注</td>
         <td colspan="3">
            <textarea name="remark" placeholder="请输入岗位备注" class="layui-textarea"></textarea>
         </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="title" value="{$detail.title}" lay-verify="required" autocomplete="off" placeholder="请输入岗位名称" lay-reqText="请输入岗位名称" class="layui-input">
         </td>
         <td class="layui-td-gray-3">岗位工时单价(元)<font>*</font></td>
         <td>
            <input type="text" name="work_price" value="{$detail.work_price}" lay-verify="required|number" placeholder="请输入岗位工时单价" lay-reqText="请输入岗位工时单价" autocomplete="off" class="layui-input">
         </td>
      </tr>
      <tr>
         <td class="layui-td-gray">状态<font>*</font></td>
         <td colspan="3">
            <input type="radio" name="status" value="1" title="正常" {eq name="$detail.status" value="1"}checked{/eq}>
            <input type="radio" name="status" value="0" title="禁止" {eq name="$detail.status" value="0"}checked{/eq}>
         </td>
      </tr>
      <tr>
         <td class="layui-td-gray">权限角色<font>*</font></td>
         <td colspan="3">
         {volist name="$group" id="v"}
            <input type="checkbox" name="group_id[]" title="{$v.title}" value="{$v.id}" {eq name="$v.checked" value="1" }checked{/eq} lay-skin="primary">
         {/volist}
         </td>
      </tr>
      <tr>
         <td class="layui-td-gray">岗位备注</td>
         <td colspan="3">
            <textarea name="remark" placeholder="请输入岗位备注" class="layui-textarea">{$detail.remark}</textarea>
         </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>
  <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}
<!-- /主体 -->
@@ -84,34 +274,117 @@
<!-- 脚本 -->
{block name="script"}
<script>
   const moduleInit = ['tool'];
   function gouguInit() {
      var form = layui.form,tool=layui.tool;
      form.on('submit(webform)', function(data){
         let callback = function (e) {
            layer.msg(e.msg);
            if (e.code == 0) {
               setTimeout(function () {
                  parent.location.reload();
               }, 1000);					
            }
         }
         tool.post("/user/position/add", data.field, callback);
         return false;
      });
      //监听提交
      form.on('submit(webform)', function(data){
         let callback = function (e) {
            layer.msg(e.msg);
            if (e.code == 0) {
               tool.sideClose(1000);
            }
         }
         tool.post("/user/position/add", data.field, callback);
         return false;
      });
   }
  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'>&#x1006;</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'>&#x1006;</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}
<!-- /脚本 -->
<!-- /脚本 -->