layui前端页面的增删改查

最新推荐文章于 2023-07-23 14:00:00 发布

小阿瑾

最新推荐文章于 2023-07-23 14:00:00 发布

阅读量1.1k

点赞数

文章标签：前端 layui javascript java

本文链接：https://blog.csdn.net/weixin_61585849/article/details/125872901

版权

1.删除方法的详解

1.先设置表格

<div class="checkWorkAttendanceDetail-table">
    <table class="layui-table" id="checkWorkAttendanceDetailTable" lay-filter="checkWorkAttendanceDetailTable"></table>
</div>

2.设置按钮

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

3.table.render中要加上toor设置

{title: '操作', width: '8%', toolbar: '#tool'}

4.加载table.on

table.on('tool(checkWorkAttendanceDetailTable)', function (obj) {
    var data = obj.data;
    switch (obj.event) {
        case 'del':
            deletedAttendance(data.id);
            break;
    }
});

5.在外部创建方法

//删除单条数据
var deletedAttendance = function (id) {
    layer.open({
        content: "确定要删除该条考勤信息吗?",
        yes: function (index) {
            layer.close(index); //如果设定了yes回调，需进行手工关闭
            CoreUtil.sendDelete("/checkWorkAttendanceDetail/deleteAttendance/" + id, null, function (res) {
                layer.msg(res.msg);
                search();
            });
        }
    });
};

6.Controller层

@DeleteMapping("/deleteAttendance/{id}")
@ApiOperation("根据id删除考勤信息的接口")
@LogAnnotation(title = "考勤统计",action = "根据id删除考勤信息")
public DataResult deleteAttendance(HttpServletRequest request,@PathVariable("id") Integer id){
    return checkWorkAttendanceDetailService.deleteAttendance(request,id);
}

7.service层

/**
 *根据id删除考勤信息
 */
DataResult deleteAttendance(HttpServletRequest request, Integer id);

8.Impl层

/**
 * 根据id删除考勤信息
 */
@Override
public DataResult deleteAttendance(HttpServletRequest request, Integer id) {
    DataResult dataResult = new DataResult();
    SysUser sysUser = (SysUser) request.getSession().getAttribute("sysUser");
    if (sysUser == null) {
        return DataResult.fail("请先登录");
    }
    int iCount = checkWorkAttendanceDetailMapper.deleteById(id);
    if (iCount == 1) {
        dataResult.setCode(0);
        dataResult.setMsg("删除成功");
    } else {
        dataResult.setCode(1);
        dataResult.setMsg("删除失败");
    }
    return dataResult;
}

2.修改方法的详解

1.先设置表格

<div class="checkWorkAttendanceDetail-table">
    <table class="layui-table" id="checkWorkAttendanceDetailTable" lay-filter="checkWorkAttendanceDetailTable"></table>
</div>

2.设置按钮

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

3.table.render中要加上toor设置

{title: '操作', width: '8%', toolbar: '#tool'}

4.加载table.on

table.on('tool(checkWorkAttendanceDetailTable)', function (obj) {
    var data = obj.data;
    switch (obj.event) {
        case 'edit':
            $(".checkWorkAttendanceDetail-table").hide();
            $(".operation_attendance").show();
            $(".title").html("编辑考勤明细");
            $("#id").val(data.id);
            $("#org").val(data.orgId);
            $("#userId").val(data.userId);
            $("#jobNumber").val(data.jobNumber);
            $("#realName").val(data.realName);
            $("#attendanceMonth").val(data.attendanceMonth);
            $("#day26").val(data.day26);
            $("#day27").val(data.day27);
			.....
            $("#day24").val(data.day24);
            $("#day25").val(data.day25);
            $("#deleted").val(data.deleted);
            $("#createId").val(data.createId);
            $("#updateId").val(data.updateId);
            $("#createTime").val(data.createTime);
            $("#updateTime").val(data.updateTime);
            $("#searchParam").hide();
            form.render(); //更新全部
            break;
    }
});

5.点击保存按钮才会执行第六步

<div class="panel panel-default operation_attendance" hidden>
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane" action="" lay-filter="companyManagement"
              style="width:100%; margin-top:1px; ">

            <input id="id" name="id" hidden/>
            <input id="org" name="org" hidden/>
            <input id="userId" name="userId" hidden/>
            <input id="deleted" name="deleted" hidden/>
            <input id="createId" name="createId" hidden/>
            <input id="updateId" name="updateId" hidden/>
            <input id="createTime" name="createTime" hidden/>
            <input id="updateTime" name="updateTime" hidden/>
            <table width="100%" style="border-collapse:separate; border-spacing:10px 10px;">

                <tr>
                    <td witdh="10%" align="right"><font color="red">*</font>工号:</td>
                    <td>
                        <input type="text" class="layui-input" style="background:#CCCCCC;" id='jobNumber' name='jobNumber' readonly>
                    </td>

                    <td witdh="10%" align="right"><font color="red">*</font>姓名:</td>
                    <td>
                        <input type="text" class="layui-input" style="background:#CCCCCC;" id='realName' name='realName' readonly>
                    </td>

                    <td witdh="10%" align="right"><font color="red">*</font>考勤月份:</td>
                    <td>
                        <input type="text" class="layui-input" style="background:#CCCCCC;" id='attendanceMonth' name='attendanceMonth' readonly>
                    </td>

                    <td witdh="10%" align="right">26号:</td>
                    <td>
                        <input type="text" class="layui-input" id='day26' name='day26'>
                    </td>

                    <td witdh="10%" align="right">27号:</td>
                    <td>
                        <input type="text" class="layui-input" id='day27' name='day27'>
                    </td>

                    <td witdh="10%" align="right">28号:</td>
                    <td>
                        <input type="text" class="layui-input" id='day28' name='day28'>
                    </td>

                </tr>
                
                ......

                <tr>
                    <td witdh="10%" align="right">22号:</td>
                    <td>
                        <input type="text" class="layui-input" id='day22' name='day22'>
                    </td>

                    <td witdh="10%" align="right">23号:</td>
                    <td>
                        <input type="text" class="layui-input" id='day23' name='day23'>
                    </td>

                    <td witdh="10%" align="right">24号:</td>
                    <td>
                        <input type="text" class="layui-input" id='day24' name='day24'>
                    </td>

                    <td witdh="10%" align="right">25号:</td>
                    <td>
                        <input type="text" class="layui-input" id='day25' name='day25'>
                    </td>
                </tr>

                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>

                <tr>
                    <td colspan="10" align="center">
                        <button type="submit" class="layui-btn" id="btn_submit" lay-submit="" lay-filter="submit">保存
                        </button>
                        <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

6.内部执行form.on

form.on('submit(submit)', function (data) {
    CoreUtil.sendPut("/checkWorkAttendanceDetail/updateAttendance", data.field, function (res) {
        $(".checkWorkAttendanceDetail-table").show();
        $(".operation_attendance").hide();
        $("#searchParam").show();
        layer.msg("修改成功", {icon: 6, time: 3000});
        search();
    });
    return false;
});

7.Controller层

@PutMapping("/updateAttendance")
@ApiOperation("修改考勤信息的接口")
@LogAnnotation(title = "考勤统计", action = "修改考勤信息")
public DataResult updateAttendance(HttpServletRequest request, @RequestBody CheckWorkAttendanceDetail checkWorkAttendanceDetail) {
    return checkWorkAttendanceDetailService.updateAttendance(request, checkWorkAttendanceDetail);
}

8.service层

/**
 *修改考勤明细
 */
DataResult updateAttendance(HttpServletRequest request, CheckWorkAttendanceDetail checkWorkAttendanceDetail);

9.Impl层

/**
 * 修改考勤明细
 */
@Override
public DataResult updateAttendance(HttpServletRequest request, CheckWorkAttendanceDetail checkWorkAttendanceDetail) {
    DataResult dataResult = new DataResult();
    SysUser sysUser = (SysUser) request.getSession().getAttribute("sysUser");

    if (sysUser == null) {
        return DataResult.fail("请登录");
    }
    int iCount = checkWorkAttendanceDetailMapper.updateById(checkWorkAttendanceDetail);
    if (iCount == 1) {
        dataResult.setCode(0);
        dataResult.setMsg("修改成功");
    } else {
        dataResult.setCode(1);
        dataResult.setMsg("修改失败");
    }

    return dataResult;
}

3.查询方法的详解

1.先设置表格

<div class="checkWorkAttendanceDetail-table">
    <table class="layui-table" id="checkWorkAttendanceDetailTable" lay-filter="checkWorkAttendanceDetailTable"></table>
</div>

2.加载table.render

//加载table
tableIns1 = table.render({
    elem: '#checkWorkAttendanceDetailTable'
    , contentType: 'application/json'
    , headers: {"authorization": token}
    , page: true //开启分页
    , url: '/checkWorkAttendanceDetail/attendanceList'             //数据接口
    , method: 'POST'
    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
            "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
    }
    , cols: [
        [
            {field: 'entName', title: '公司名称', width: '10%'},
            {field: 'jobNumber', title: '工号', width: '6%'},
            {field: 'realName', title: '姓名', width: '6%'},
            {field: 'attendanceMonth', title: '考勤年月', width: '6%'},
            {field: 'day26', title: '26', width: '7%'},
			.........
            {field: 'day25', title: '25', width: '7%'},
            {title: '操作', width: '8%', toolbar: '#tool'}
        ]
    ]
    , toolbar: '#toolbar'
});

3.Controller层

@PostMapping("/attendanceList")
@ApiOperation(value = "查询考勤明细的接口")
@LogAnnotation(title = "考勤统计", action = "查询考勤明细")
public DataResult attendanceList(HttpServletRequest request, @RequestBody CheckWorkAttendanceDetail checkWorkAttendanceDetail) {
    return checkWorkAttendanceDetailService.attendanceList(request, checkWorkAttendanceDetail);
}

4.service层

/**
 *查询考勤明细
 */
DataResult attendanceList(HttpServletRequest request, CheckWorkAttendanceDetail checkWorkAttendanceDetail);

5.Impl层

/**
 * 查询考勤明细
 */
@Override
public DataResult attendanceList(HttpServletRequest request, CheckWorkAttendanceDetail checkWorkAttendanceDetail) {
    DataResult dataResult = new DataResult();
    //校验是否登录
    SysUser sysUser = (SysUser) request.getSession().getAttribute("sysUser");
    if (null == sysUser) {
        dataResult.setCode(1);
        dataResult.setMsg("请先登录！");
        return dataResult;
    }

    //设置分页信息,当前页:1,每页显示记录:10
    Page page = new Page(checkWorkAttendanceDetail.getPage(), checkWorkAttendanceDetail.getLimit());
    LambdaQueryWrapper<CheckWorkAttendanceDetail> queryWrapper = Wrappers.lambdaQuery();

    //设置查询条件
    if (checkWorkAttendanceDetail.getOrgId() != null && !(checkWorkAttendanceDetail.getOrgId() == -1)) {
        queryWrapper.eq(CheckWorkAttendanceDetail::getOrgId, checkWorkAttendanceDetail.getOrgId());
    }
    if (checkWorkAttendanceDetail.getJobNumber() != null && !"".equals(checkWorkAttendanceDetail.getJobNumber())) {
        queryWrapper.like(CheckWorkAttendanceDetail::getJobNumber, checkWorkAttendanceDetail.getJobNumber());
    }
    if (checkWorkAttendanceDetail.getRealName() != null && !"".equals(checkWorkAttendanceDetail.getRealName())) {
        queryWrapper.like(CheckWorkAttendanceDetail::getRealName, checkWorkAttendanceDetail.getRealName());
    }
    if (checkWorkAttendanceDetail.getAttendanceMonth() != null && !"".equals(checkWorkAttendanceDetail.getAttendanceMonth())) {
        queryWrapper.eq(CheckWorkAttendanceDetail::getAttendanceMonth, checkWorkAttendanceDetail.getAttendanceMonth());
    }

    //排序--倒序
    queryWrapper.orderByDesc(CheckWorkAttendanceDetail::getId);

    IPage<CheckWorkAttendanceDetail> checkWorkAttendanceDetailIPage = checkWorkAttendanceDetailMapper.selectPage(page, queryWrapper);
    if (checkWorkAttendanceDetailIPage != null && checkWorkAttendanceDetailIPage.getRecords().size() > 0) {
        for (CheckWorkAttendanceDetail attendanceDetail : checkWorkAttendanceDetailIPage.getRecords()) {
            if (attendanceDetail.getOrgId() != null && !"".equals(attendanceDetail.getOrgId())) {
                //根据公司id查出公司名称
                SysOrg sysOrg = sysOrgMapper.selectById(attendanceDetail.getOrgId());
                attendanceDetail.setEntName(sysOrg.getEntName());
            }
        }
    }

    return DataResult.success(checkWorkAttendanceDetailIPage);
}

4.新增方法的详解

1.先设置表格

<div class="deptManagement-table">
    <table class="layui-table" id="departmentManagementTable" lay-filter="departmentManagementTable"></table>
</div>

2.设置按钮

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addCustomer">添加</button>
    </div>
</script>

3.table.render中要加上toorbar设置

, toolbar: '#toolbar'

4.加载table.on

//操作项事件
table.on('toolbar(departmentManagementTable)', function (obj) {
    switch (obj.event) {
        case 'addCustomer':
            $(".deptManagement-table").hide();
            $(".operation_deptManagement").show();
            $(".title").html("新增部门信息");
            $("#id").val("");	//为了使所有的选项为空,id设置为空
            $("#orgId").val("");
            $("#name").val("");
            $("#clockInStartTime").val("");
            $("#clockInEndTime").val("");
            $("#managerName").val("");
            $("#phone").val("");
            $("#email").val("");
            $("#searchParam").hide();
            form.render(); //更新全部
            break;
    }
});

5.点击保存按钮才会执行第六步

<div class="panel panel-default operation_deptManagement" hidden>
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane" action="" lay-filter="companyManagement"
              style="width:100%; margin-top:1px; ">

            <input id="id" name="id" hidden/>

            <input type="hidden" id='deptManagerId' name='deptManagerId'>
            <input type="hidden" id='deleted' name='deleted'>
            <input type="hidden" id='companyId' name='companyId'>
            <input type="hidden" id='createUser' name='createUser'>
            <input type="hidden" id='createTime' name='createTime' placeholder="yyyy-MM-dd">
            <input type="hidden" id='updateUser' name='updateUser'>
            <input type="hidden" id='updateTime' name='updateTime' placeholder="yyyy-MM-dd">

            <table width="100%" style="border-collapse:separate; border-spacing:10px 10px;">

                <tr>

                    <td witdh="10%" align="right"><font color="red">*</font>公司名称:</td>
                    <td>
                        <select id="orgId" name="orgId" lay-filter="orgId"></select>
                    </td>

                    <td witdh="10%" align="right"><font color="red">*</font>部门名称:</td>
                    <td>
                        <input type="text" class="layui-input" id='name' name='name'>
                    </td>

                </tr>
                <tr>
                    <td witdh="10%" align="right"><font color="red">*</font>考勤打卡开始时间:</td>
                    <td>
                        <input type="text" class="layui-input" id='clockInStartTime' name='clockInStartTime'>
                    </td>

                    <td witdh="10%" align="right"><font color="red">*</font>考勤打卡结束时间:</td>
                    <td>
                        <input type="text" class="layui-input" id='clockInEndTime' name='clockInEndTime'>
                    </td>

                   <!-- <td witdh="15%" align="right">负责人手机号:</td>
                    <td>
                        <input class="layui-input" id='phone' name='phone'>
                    </td>

                    <td witdh="15%" align="right">负责人邮箱:</td>
                    <td>
                        <input class="layui-input" id='email' name='email'>
                    </td>-->
                </tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr>
                    <td colspan="8" align="center">
                        <button type="submit" class="layui-btn" id="btn_submit" lay-submit="" lay-filter="submit">保存
                        </button>
                        <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

6.内部执行form.on

form.on('submit(submit)', function (data) {
    //alert(data.field.id);
    if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
        CoreUtil.sendPost("/sys/deptManagementInput", data.field, function (res) {
            $(".deptManagement-table").show();
            $(".operation_deptManagement").hide();
            $("#searchParam").show();
            layer.msg("添加成功", {icon: 6, time: 3000});
            search();
        });
    } else {
        CoreUtil.sendPut("/sys/deptManagementUpdate", data.field, function (res) {
            $(".deptManagement-table").show();
            $(".operation_deptManagement").hide();
            $("#searchParam").show();
            layer.msg("修改成功", {icon: 6, time: 3000});
            search();
        });
    }
    return false;
});

7.controller层

@PostMapping("/deptManagementInput")
@ApiOperation(value = "新增部门接口")
@LogAnnotation(title = "部门管理", action = "新增部门")
public DataResult deptManagementInput(HttpServletRequest request, @RequestBody SysDept sysDept) {
    return deptService.deptManagementInput(request, sysDept);
}

8.service层

/**
 *新增部门
 */
DataResult deptManagementInput(HttpServletRequest request, SysDept sysDept);

9.Impl层

/**
 * 新增部门
 */
@Override
public DataResult deptManagementInput(HttpServletRequest request, SysDept sysDept) {
    DataResult dataResult = new DataResult();
    SysUser sysUser = (SysUser) request.getSession().getAttribute("sysUser");
    if (null == sysUser) {
        dataResult.setCode(1);
        dataResult.setMsg("没有获得到用户信息,请重新登录");
        return dataResult;
    }

    //判断该公司部门名称是否已存在
    LambdaQueryWrapper<SysDept> queryWrapperDept = Wrappers.lambdaQuery();
    queryWrapperDept.eq(SysDept::getOrgId,sysDept.getOrgId());
    List<SysDept> selectList = sysDeptMapper.selectList(queryWrapperDept);
    if (selectList != null && selectList.size() > 0) {
        for (SysDept dept : selectList) {
            if(dept!=null){
                if(dept.getName()!=null && dept.getName().equals(sysDept.getName())){
                    dataResult.setCode(1);
                    dataResult.setMsg("部门名称已存在,请重新输入");
                    return dataResult;
                }
            }
        }
    }

    sysDept.setPid("0");
    sysDept.setStatus(1);
    sysDept.setDeleted((byte) 1);
    //创建时间
    sysDept.setCreateTime(new Date());

    int iCount = sysDeptMapper.insert(sysDept);
    if (iCount == 0) {
        dataResult.setCode(1);
        dataResult.setMsg("新增部门失败");
    } else {
        dataResult.setCode(0);
        dataResult.setMsg("新增部门成功");
    }

    return dataResult;
}