Преглед изворни кода

feat:修改人情明细列表和添加页面

liuchuanwei пре 3 месеци
родитељ
комит
413c010b00

+ 2 - 2
src/main/webapp/WEB-INF/pages/favor/add.jsp

@@ -314,8 +314,8 @@
                         layer.msg(res.msg, {icon: 2, time: 2000});
                     } else {
                         //先给成功提示,然后关闭弹窗
-                        layer.msg('保存成功', {icon: 1, time: 1000}, function() {
-                            window.close();
+                        layer.msg('保存成功,返回列表', {icon: 1, time: 1500}, function() {
+                            window.location.href = "${pageContext.request.contextPath}/favor/toList";
                         });
                     }
                 }

+ 226 - 37
src/main/webapp/WEB-INF/pages/favor/item/list.jsp

@@ -3,44 +3,233 @@
 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
 <html>
 <head>
-    <title>人情明细</title>
+    <title>人情往来记录</title>
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/layui/css/layui.css">
 </head>
 <body>
-<h2>人情明细</h2>
-<table border="1" cellspacing="1" cellpadding="5" style="margin: 0 auto; width: 80%;">
-    <a href="/favorItem/toAdd">添加人情明细</a>
-    <thead>
-        <tr>
-            <th>ID</th>
-            <th>事件</th>
-            <th>日期</th>
-            <th>收礼人</th>
-            <th>送礼人</th>
-            <th>金额</th>
-            <th>回礼</th>
-            <th>备注</th>
-            <th>创建日期</th>
-            <th>操作</th>
-        </tr>
-    </thead>
-    <tbody>
-    <c:forEach items="${favorItemList}" var="p" varStatus="c">
-        <tr>
-            <td>${p.id}</td>
-            <td><b>${p.favor.title}</b></td>
-            <td><fmt:formatDate value='${p.favor.occurDate}' pattern='yyyy-MM-dd'/></td>
-            <td><a href="/favorItem/toList?personId=${p.personId}">${p.person.name}(${p.person.callName})</a></td>
-            <td><a href="/favorItem/toList?personId=${p.sourcePersonId}">${p.sourcePerson.name}(${p.sourcePerson.callName})</a></td>
-            <td>${p.amount}</td>
-            <td>${p.returnGift}</td>
-            <td>${p.remark}</td>
-            <td><fmt:formatDate value='${p.createTime}' pattern='yyyy-MM-dd'/></td>
-            <td>
-                <a href="/favorItem/edit/${p.id}">编辑</a>
-            </td>
-        </tr>
-    </c:forEach>
-    </tbody>
-</table>
+
+<%-- 人员列表 --%>
+<div style="margin: 0 auto; width: 90%;">
+    <form class="layui-form" action="">
+        <div class="layui-inline">
+            <label class="layui-form-label">事件标题</label>
+            <div class="layui-input-inline">
+                <input type="text" id="title" name="title" autocomplete="off" class="layui-input">
+            </div>
+        </div>
+        <div class="layui-inline">
+            <label class="layui-form-label">送礼人</label>
+            <div class="layui-input-inline">
+                <select id="sourcePersonId" name="sourcePersonId" lay-verify="" lay-search>
+                    <option value="">请选择</option>
+                    <c:forEach items="${personList}" var="p">
+                        <option value="${p.id}">${p.callName}(${p.name})</option>
+                    </c:forEach>
+                </select>
+            </div>
+        </div>
+        <div class="layui-inline">
+            <label class="layui-form-label">收礼人</label>
+            <div class="layui-input-inline">
+                <select id="personId" name="personId" lay-verify="" lay-search>
+                    <option value="">请选择</option>
+                    <c:forEach items="${personList}" var="p">
+                        <option value="${p.id}">${p.callName}(${p.name})</option>
+                    </c:forEach>
+                </select>
+            </div>
+        </div>
+        <div class="layui-inline">
+            <label class="layui-form-label">相关人员</label>
+            <div class="layui-input-inline">
+                <select id="relatedPersonId" name="relatedPersonId" lay-verify="" lay-search>
+                    <option value="">请选择</option>
+                    <c:forEach items="${personList}" var="p">
+                        <option value="${p.id}">${p.callName}(${p.name})</option>
+                    </c:forEach>
+                </select>
+            </div>
+        </div>
+        <div class="layui-inline">
+            <label class="layui-form-label">日期范围:</label>
+            <div class="layui-input-inline">
+                <input type="text" name="occurDate" id="occurDate" autocomplete="off" value="" placeholder="请选择日期范围" style="width: 180px;" class="layui-input">
+            </div>
+        </div>
+
+        <div class="layui-inline">
+            <div class="layui-input-inline">
+                <button class="layui-btn" id="searchBtn" data-type="reload" style="margin-left: 15px">
+                    <i class="layui-icon layui-icon-search"></i> 查询
+                </button>
+                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+            </div>
+        </div>
+    </form>
+
+    <table id="favorItemTab" class="layui-hide" lay-filter="favor"></table>
+</div>
+
+<%-- 表格上方按钮 --%>
+<script type="text/html" id="toolbarDemo">
+    <div class="layui-btn-container">
+        <button class="layui-btn layui-btn-sm" lay-event="addFavor">添加记录</button>
+    </div>
+</script>
+
+<%-- 表格行操作栏 --%>
+<script type="text/html" id="barDemo">
+    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
+</script>
+
+<script type="text/javascript" src="${pageContext.request.contextPath}/asserts/js/jquery-3.7.1.min.js"></script>
+<script type="text/javascript" src="${pageContext.request.contextPath}/asserts/layui/layui.js" charset="utf-8"></script>
+<script>
+    let headUrl = "${pageContext.request.contextPath}";
+    layui.use(['laydate', 'table',], function () {
+        let $ = layui.$,//jquery
+            table = layui.table,//表格
+            layer = layui.layer,//基础
+            laydate = layui.laydate;//日期
+
+        //region 初始化选择时间控件
+        let myDate = new Date();//获取当前时间设置选择时间的范围
+        let maxTime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());//拼接当前是时间
+        laydate.render({
+            elem: '#occurDate'
+            , type: 'date'
+            , range: '~'
+            , max: maxTime//设置选择最大时间为当前
+            , calendar: true
+            , btns: ['clear', 'confirm', 'now']
+            , done: function (value, date) {
+                //这里时选中后触发事件
+                //value是选中的值
+                console.log("日期范围的值:" + value)
+            }
+        });
+        //endregion
+        //数据表格渲染
+        table.render({
+            id: 'favorItemTab',
+            elem: '#favorItemTab',
+            toolbar: '#toolbarDemo', //开启头部工具栏,并为其绑定左侧模板
+            url: '${pageContext.request.contextPath}/favorItem/listPage',
+            method: 'post',
+            contentType: "application/json;charset=UTF-8",
+            dataType: "json",
+            request: {
+                pageName: 'pageNo', //页码的参数名称,默认:page
+                limitName: 'pageSize' //每页数据量的参数名,默认:limit
+            },
+            where: {
+                terms: {},
+                sortName: "occur_date",
+                sortOrder: "asc"
+            },
+            //开启分页并解析数据
+            parseData: function(res) {
+                res.count = res.page.total;
+                return res;
+            },
+            page: true,
+            limit: 10,
+            cellMinWidth: 50, //全局定义常规单元格的最小宽度,layui 2.2.1 新增
+            cols: [[
+                { field: 'occurDate', title: '日期', sort: true },
+                { field: 'title', title: '事件'},
+                { field: 'personName', title: '对象', event: 'clickPerson',style:'cursor: pointer;' },
+                { field: 'incomeAmount', title: '收入金额'},
+                { field: 'payAmount', title: '支出金额' },
+                { field: 'remark', title: '备注'},
+                { fixed: 'right', align:'center', width: 240, toolbar: '#barDemo'}
+            ]]
+        });
+        //点击查询按钮
+        $('#searchBtn').on('click', function () {
+            let terms = {
+                title: $("#title").val(),
+                personId: $("#personId").val()
+            };
+            let occurDate = $("#occurDate").val();
+            let arr = occurDate.split(" ~ ");
+            if(arr.length > 0) {
+                terms.startOccurDate = arr[0];
+                if(arr.length>1) {
+                    terms.endOccurDate = arr[1];
+                }
+            }
+
+            table.reload('favorItemTab', {
+                url: '${pageContext.request.contextPath}/favor/listPage',
+                method: 'post',
+                contentType: "application/json;charset=UTF-8",
+                dataType: "json",
+                request: {
+                    pageName: 'pageNo', //页码的参数名称,默认:page
+                    limitName: 'pageSize' //每页数据量的参数名,默认:limit
+                },
+                page: {
+                    pageNo: 1 //重新从第 1 页开始
+                },
+                where : {
+                    terms: terms,
+                    sortName: "occur_date",
+                    sortOrder: "asc"
+                }
+            });
+            return false;
+        });
+
+        //头工具栏事件
+        table.on('toolbar(favor)', function (obj) {
+            switch (obj.event) {
+                case 'addFavor':
+                    window.location.href = "${pageContext.request.contextPath}/favor/toAdd";
+                    break;
+            }
+        });
+
+        //监听行工具事件
+        table.on('tool(favor)', function (obj) {
+            let data = obj.data;
+            if (obj.event === 'clickPerson') {
+                $("#personId").val(data.personId);
+                layui.form.render();
+                $("#searchBtn").click();
+            } else if (obj.event === 'del') {
+                //eg1
+                layer.confirm('确定要删除?<br/><i>会删掉关联的明细等</i>', {icon: 3, title:'提示'}, function(index){
+                    let url = "${pageContext.request.contextPath}/favor/delete/" + data.id;
+                    $.ajax({
+                        url:url,
+                        type:"POST",
+                        contentType:"application/json; charset=utf-8",
+                        dataType:"json",
+                        success: function(res){
+                            console.log(res);
+                            if (res.code === 1) {
+                                layer.msg(res.msg, {icon: 2});
+                            } else {
+                                //先给成功提示,然后刷新列表
+                                layer.msg('删除成功', {icon: 1, time: 1000}, function() {
+                                    layui.table.reload("favorItemTab");
+                                });
+                            }
+                        }
+                    })
+                    layer.close(index);
+                });
+
+            } else if (obj.event === 'edit') {
+                window.location.href = "${pageContext.request.contextPath}/favor/edit/" + data.id;
+            }
+        });
+
+    });
+</script>
 </body>
 </html>