feat:调试人情往来新增编辑页面

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

@@ -67,7 +67,7 @@
         </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">
+                <input id="incomeAmount" 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>
@@ -149,6 +149,7 @@
         });
         form.on('select(person)', function (data) {
             setValue(data);
+            console.log("选中收礼人", table.cache['favorItemTab']);
         });
 
         function setValue(data) {
@@ -157,7 +158,6 @@
             let tableData = table.cache['favorItemTab']; // grid为table id
             // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
             tableData[trElem.data('index')][elem.attr('class')] = data.value;
-            console.log("列表数据：", tableData);
         }
 
         //送礼人列表
@@ -192,19 +192,20 @@
                 remark:""
             })
         }
-        console.log(dataa);
-        table.render({
+        console.log("初始化表格数据：", dataa);
+        //region 渲染往来明细表格数据
+        let tables = table.render({
             elem: '#favorItemTab',
             data:dataa,
             toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
             title: '人情明细',
             cols: [[
-                {field:'sourcePersonId', title:'送礼人', width:200, templet: '#sourcePersonTpl'},
-                {field:'address', title:'地址', width:150},
+                {field:'sourcePersonId', title:'送礼人', width:150, templet: '#sourcePersonTpl'},
+                {field:'address', title:'地址', width:100},
                 {field:'amount', title:'金额', width:100, edit: 'number'},
-                {field:'returnGift', title:'还礼', width:150, edit: 'textarea'},
-                {field:'personId', title:'收礼人', width:200, templet: '#personTpl'},
-                {field:'remark', title:'备注', edit: 'text'},
+                {field:'returnGift', title:'还礼', width:100, edit: 'textarea'},
+                {field:'personId', title:'收礼人', width:150, templet: '#personTpl'},
+                {field:'remark', title:'备注', width:150, edit: 'textarea'},
                 {fixed:'right', align:'center', toolbar: '#barDemo'}
             ]],
             page: false,
@@ -223,29 +224,33 @@
                 form.render();
             }
         });
+        //endregion
+
         //监听行工具事件
         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"])
+                //删除对应行（tr）的DOM结构，并更新缓存
+                let tableData = table.cache["favorItemTab"];
+                tableData.splice(obj.tr.data('index'), 1)//根据索引删除当前行
+                tables.reload({
+                    data: tableData
+                });
+                console.log("删除一条明细后：", table.cache["favorItemTab"]);
+                calcAmount();
             }
         });
         // 单元格普通编辑事件
         table.on('edit(favorItem)', function(obj){
-            console.log("编辑了：" + JSON.stringify(obj));
-            let value = obj.value // 得到修改后的值
-            let data = obj.data // 得到所在行所有键值
-            let field = obj.field; // 得到字段
             // 更新数据中对应的字段
             let update = {};
-            update[field] = value;
+            update[obj.field] = obj.value;
             obj.update(update);
-
+            console.log("编辑一条明细后：", table.cache["favorItemTab"]);
+            if (obj.field === 'amount') {
+                calcAmount();
+            }
         });
 
-
         //头工具栏事件
         table.on('toolbar(favorItem)', function (obj) {
             switch (obj.event) {
@@ -260,13 +265,23 @@
                         remark:""
                     }
                     oldData.push(newRow);
-                    console.log("新增一条明细", oldData);
                     table.reload('favorItemTab', {
                         data: oldData
                     });
+                    console.log("新增一条明细后：", table.cache["favorItemTab"]);
                     break;
             }
         });
+        //计算收入总金额
+        function calcAmount() {
+            let arr = table.cache["favorItemTab"];
+            let totalAmount = 0;
+            for(let i=0; i<arr.length; i++) {
+                totalAmount = totalAmount + parseFloat(arr[i].amount);
+            }
+            console.log("计算收礼总金额", totalAmount);
+            $("#incomeAmount").val(totalAmount);
+        }
 
         //监听提交
         form.on('submit(submit)', function(data){
@@ -275,8 +290,6 @@
             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++) {
@@ -287,8 +300,8 @@
                     formJson.favorItemList.push(arr[i]);
                 }
             }
-            console.log("提交地址：" + url);
-            console.log(formJson);
+            console.log("提交-地址：", url);
+            console.log("提交-请求报文：", formJson);
             $.ajax({
                 url:url,
                 type:"POST",
@@ -296,7 +309,7 @@
                 contentType:"application/json; charset=utf-8",
                 dataType:"json",
                 success: function(res){
-                    console.log(res);
+                    console.log("提交-返回报文：", res);
                     if (res.code === 1) {
                         layer.msg(res.msg, {icon: 2, time: 2000});
                     } else {