|
@@ -0,0 +1,305 @@
|
|
|
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
|
|
|
+<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <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">
|
|
|
+ <style>
|
|
|
+ td .layui-form-select {
|
|
|
+ margin-top: -10px;
|
|
|
+ margin-left: -15px;
|
|
|
+ margin-right: -15px;
|
|
|
+ }
|
|
|
+ .layui-form-item {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ .layui-input-inline {
|
|
|
+ width: 30% !important;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div style="margin: 0 auto; width: 60%;">
|
|
|
+ <fieldset class="layui-elem-field layui-field-title">
|
|
|
+ <c:choose>
|
|
|
+ <c:when test="${favor == null}">
|
|
|
+ <legend>新增人情</legend>
|
|
|
+ </c:when>
|
|
|
+ <c:otherwise>
|
|
|
+ <legend>编辑人情</legend>
|
|
|
+ </c:otherwise>
|
|
|
+ </c:choose>
|
|
|
+ </fieldset>
|
|
|
+
|
|
|
+ <form class="layui-form layui-form-pane" action="${pageContext.request.contextPath}/favor/update">
|
|
|
+ <div class="layui-form-item"> <label class="layui-form-label">标题</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="hidden" name="id" value="${favor.id}" />
|
|
|
+ <input type="text" name="title" value="${favor.title}" lay-verify="required" lay-reqtext="标题不能为空" placeholder="请输入" autocomplete="off" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item"> <label class="layui-form-label">对象</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <select id="personId" name="personId" lay-filter="personId" lay-search="">
|
|
|
+ <c:forEach items="${personList}" var="p">
|
|
|
+ <c:choose>
|
|
|
+ <c:when test="${p.id != favor.personId}">
|
|
|
+ <option value="${p.id}" ${p.id eq person.id ? "selected" : ""} >${p.name}(${p.callName})</option>
|
|
|
+ </c:when>
|
|
|
+ <c:otherwise>
|
|
|
+ <option value="${p.id}" selected>${p.name}(${p.callName})</option>
|
|
|
+ </c:otherwise>
|
|
|
+ </c:choose>
|
|
|
+ </c:forEach>
|
|
|
+ </select>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item"> <label class="layui-form-label">日期</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="text" name="occurDate" id="occurDate" value="<fmt:formatDate value='${favor.occurDate}' pattern='yyyy-MM-dd'/>" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item"> <label class="layui-form-label">收入金额</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="number" name="incomeAmount" value="${favor.incomeAmount}" min="0" autocomplete="off" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item"> <label class="layui-form-label">支出金额</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="number" name="payAmount" value="${favor.payAmount}" min="0" autocomplete="off" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item"> <label class="layui-form-label">备注</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <input type="text" name="remark" value="${favor.remark}" placeholder="请输入内容" class="layui-input" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table id="favorItemTab" class="layui-hide" lay-filter="favorItem">
|
|
|
+
|
|
|
+
|
|
|
+ </table>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
|
|
|
+ <button type="reset" class="layui-btn layui-btn-primary">取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <%-- 表格上方按钮 --%>
|
|
|
+ <script type="text/html" id="toolbarDemo">
|
|
|
+ <div class="layui-btn-container">
|
|
|
+ <button class="layui-btn layui-btn-sm" lay-event="addFavorItem">添加明细</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/html" id="sourcePersonTpl">
|
|
|
+ <select class="sourcePersonId" lay-filter="sourcePerson" lay-search="" data-value="{{ d.sourcePersonId }}">
|
|
|
+ <option value="">请选择</option>
|
|
|
+ <c:forEach items="${personList}" var="p">
|
|
|
+ <option value="${p.id}" data-address="${p.address}">${p.name}(${p.callName})</option>
|
|
|
+ </c:forEach>
|
|
|
+ </select>
|
|
|
+ </script>
|
|
|
+ <%-- 收礼人下拉 --%>
|
|
|
+ <script type="text/html" id="personTpl">
|
|
|
+ <select class="personId" lay-filter="person" lay-search="" data-value="{{ d.personId }}">
|
|
|
+ <option value="">请选择</option>
|
|
|
+ <c:forEach items="${personList}" var="p">
|
|
|
+ <option value="${p.id}">${p.name}(${p.callName})</option>
|
|
|
+ </c:forEach>
|
|
|
+ </select>
|
|
|
+ </script>
|
|
|
+
|
|
|
+</div>
|
|
|
+<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 type="text/javascript" src="${pageContext.request.contextPath}/asserts/js/custom.js"></script>
|
|
|
+<script>
|
|
|
+ let headUrl = "${pageContext.request.contextPath}";
|
|
|
+ layui.use(['jquery', 'table', 'form', 'laydate'], function tab(){
|
|
|
+ let $ = layui.$, table = layui.table, laydate = layui.laydate, form = layui.form;
|
|
|
+ // 日期
|
|
|
+ laydate.render({
|
|
|
+ elem: '#occurDate'
|
|
|
+ });
|
|
|
+ // 监听修改update到表格中
|
|
|
+ form.on('select(sourcePerson)', function (data) {
|
|
|
+ let elem = $(data.elem);
|
|
|
+ let trElem = elem.parents('tr');
|
|
|
+ let tableData = table.cache['favorItemTab']; // grid为table id
|
|
|
+ // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
|
|
|
+ tableData[trElem.data('index')][elem.attr('class')] = data.value;
|
|
|
+ //设置地址
|
|
|
+ let address = elem.find("option:selected").data('address');
|
|
|
+ tableData[trElem.data('index')]['address'] = address;
|
|
|
+ $(trElem).find('td[data-field="address"] .layui-table-cell').html(address);
|
|
|
+ console.log("选中送礼人", tableData);
|
|
|
+ });
|
|
|
+ form.on('select(person)', function (data) {
|
|
|
+ setValue(data);
|
|
|
+ });
|
|
|
+
|
|
|
+ function setValue(data) {
|
|
|
+ let elem = $(data.elem);
|
|
|
+ let trElem = elem.parents('tr');
|
|
|
+ let tableData = table.cache['favorItemTab']; // grid为table id
|
|
|
+ // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
|
|
|
+ tableData[trElem.data('index')][elem.attr('class')] = data.value;
|
|
|
+ console.log("列表数据:", tableData);
|
|
|
+ }
|
|
|
+
|
|
|
+ //送礼人列表
|
|
|
+ let dataa = [];
|
|
|
+ <c:forEach items="${sourcePersonList}" var="p">
|
|
|
+ dataa.push({
|
|
|
+ sourcePersonId:"${p.id}",
|
|
|
+ address:"${p.address}",
|
|
|
+ amount:"",
|
|
|
+ returnGift:"",
|
|
|
+ personId: $("#personId").val(),
|
|
|
+ remark:""
|
|
|
+ });
|
|
|
+ </c:forEach>
|
|
|
+ <c:forEach items="${favor.favorItemList}" var="fi">
|
|
|
+ dataa.push({
|
|
|
+ sourcePersonId:"${fi.sourcePersonId}",
|
|
|
+ address:"${fi.sourcePerson.address}",
|
|
|
+ amount:"${fi.amount}",
|
|
|
+ returnGift:"${fi.returnGift}",
|
|
|
+ personId: ${fi.personId},
|
|
|
+ remark:"${fi.remark}"
|
|
|
+ });
|
|
|
+ </c:forEach>
|
|
|
+ if(dataa.length < 1) {
|
|
|
+ dataa.push({
|
|
|
+ sourcePersonId:"",
|
|
|
+ address:"",
|
|
|
+ amount:"",
|
|
|
+ returnGift:"",
|
|
|
+ personId: $("#personId").val(),
|
|
|
+ remark:""
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(dataa);
|
|
|
+ table.render({
|
|
|
+ elem: '#favorItemTab',
|
|
|
+ data:dataa,
|
|
|
+ toolbar: '#toolbarDemo', //开启头部工具栏,并为其绑定左侧模板
|
|
|
+ title: '人情明细',
|
|
|
+ cols: [[
|
|
|
+ {field:'sourcePersonId', title:'送礼人', width:200, templet: '#sourcePersonTpl'},
|
|
|
+ {field:'address', title:'地址', width:150},
|
|
|
+ {field:'amount', title:'金额', width:100, edit: 'number', event: 'clickInputNumber'},
|
|
|
+ {field:'returnGift', title:'还礼', width:150, edit: 'text'},
|
|
|
+ {field:'personId', title:'收礼人', width:200, templet: '#personTpl'},
|
|
|
+ {field:'remark', title:'备注', edit: 'text'},
|
|
|
+ {fixed:'right', align:'center', toolbar: '#barDemo'}
|
|
|
+ ]],
|
|
|
+ page: false,
|
|
|
+ limit: 10000,
|
|
|
+ done: function (res, curr, count) {
|
|
|
+ //数据渲染完的回调
|
|
|
+ $(".layui-table-body").css('overflow','visible');
|
|
|
+ $(".layui-table-box").css('overflow','visible');
|
|
|
+ $(".layui-table-view").css('overflow','visible');
|
|
|
+ let tableElem = this.elem.next('.layui-table-view');
|
|
|
+ count || tableElem.find('.layui-table-header').css('overflow', 'auto');
|
|
|
+ layui.each(tableElem.find('select'), function (index, item) {
|
|
|
+ let elem = $(item);
|
|
|
+ elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
|
|
|
+ });
|
|
|
+ form.render();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //监听行工具事件
|
|
|
+ table.on('tool(favorItem)', function(obj){
|
|
|
+ if(obj.event === 'del'){
|
|
|
+ obj.del();
|
|
|
+ let index = $(obj.tr).attr("data-index");
|
|
|
+ removeArrEle(table.cache["favorItemTab"], index);
|
|
|
+ console.log("删除一条明细", table.cache["favorItemTab"])
|
|
|
+ } else if (obj.event === 'clickInputNumber') {
|
|
|
+ $(obj).find("input").attr("type","number");
|
|
|
+ $(obj).find("input").attr("step","100");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //头工具栏事件
|
|
|
+ table.on('toolbar(favorItem)', function (obj) {
|
|
|
+ switch (obj.event) {
|
|
|
+ case 'addFavorItem':
|
|
|
+ let oldData = table.cache["favorItemTab"];
|
|
|
+ let newRow = {
|
|
|
+ sourcePersonId:"",
|
|
|
+ address:"",
|
|
|
+ amount:"",
|
|
|
+ returnGift:"",
|
|
|
+ personId: $("#personId").val(),
|
|
|
+ remark:""
|
|
|
+ }
|
|
|
+ oldData.push(newRow);
|
|
|
+ console.log("新增一条明细", oldData);
|
|
|
+ table.reload('favorItemTab', {
|
|
|
+ data: oldData
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //监听提交
|
|
|
+ form.on('submit(submit)', function(data){
|
|
|
+ let url = data.form.action;
|
|
|
+ let formJson = data.field;
|
|
|
+ if (formJson.id === undefined || formJson.id === '') {
|
|
|
+ url = "${pageContext.request.contextPath}/favor/add";
|
|
|
+ }
|
|
|
+ //删除不需要的属性
|
|
|
+ deleteObjKey(formJson, "sourcePersonId");
|
|
|
+ formJson.favorItemList = [];
|
|
|
+ let arr = table.cache['favorItemTab'];
|
|
|
+ for(let i=0; i<arr.length; i++) {
|
|
|
+ if(!!arr[i].sourcePersonId && !!arr[i].personId) {
|
|
|
+ //删除不需要的属性
|
|
|
+ deleteObjKey(arr[i], "LAY_TABLE_INDEX");
|
|
|
+ deleteObjKey(arr[i], "address");
|
|
|
+ formJson.favorItemList.push(arr[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log("提交地址:" + url);
|
|
|
+ console.log(formJson);
|
|
|
+ $.ajax({
|
|
|
+ url:url,
|
|
|
+ type:"POST",
|
|
|
+ data:JSON.stringify(formJson),
|
|
|
+ contentType:"application/json; charset=utf-8",
|
|
|
+ dataType:"json",
|
|
|
+ success: function(res){
|
|
|
+ console.log(res);
|
|
|
+ if (res.code === 1) {
|
|
|
+ layer.msg(res.msg, {icon: 2, time: 2000});
|
|
|
+ } else {
|
|
|
+ //先给成功提示,然后关闭弹窗
|
|
|
+ layer.msg('保存成功', {icon: 1, time: 1000}, function() {
|
|
|
+ window.close();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|