|
@@ -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>
|