收入明细保存完成，下一步回显到页面上

src/main/resources/static/assets/js/project_budget.js

@@ -36,10 +36,25 @@ function arr2Object(arr, mapArr) {
 INCOME_DETAIL_ARR=["type","name","unit","amount","price","taxRate"];
 INCOME_DETAIL_PROP_LENGTH=8;
 
+/**
+ * 收集收入明细的数据，因为动态添加的行modal无法识别，所以自己来收集
+ * @returns {Array}
+ */
+function collectIncomeData(className) {
+    var a= [];
+    $("." + className).each(function (t) {
+        a.push($(this).val());
+    });
+    return a;
+}
+
+/**
+ * 保存收入明细数据
+ */
 function saveIncome(url, data, projectId) {
     if(Array.isArray(data) && data.length != 0){
+        console.log(data);
         var arr = arrayToMatrix(data,INCOME_DETAIL_PROP_LENGTH);
-        console.log(arr);
         var incomeDetails = [];
         for (var i=0;i<arr.length;i++){
             incomeDetails.push(arr2Object(arr[i], INCOME_DETAIL_ARR));
@@ -63,3 +78,51 @@ function saveIncome(url, data, projectId) {
         });
     }
 }
+
+/**
+ * 绑定每一行的删除事件，删除当前的一行tr
+ */
+function bindDeleteBtn() {
+    $(".am-modal-line-delete").click(function () {
+        //删除自己对应的tr
+        $(this).parent().parent().remove();
+    });
+}
+
+/**
+ * 绑定每个可改变的输入框，修改后改变对应输入框的值
+ */
+function bindIncomeChangeableInput() {
+    //数量改变
+    $(".input-changeable-amount").change(function () {
+        var amount = parseFloat($(this).val());
+        //找到对应的单价和税率
+        var price = parseFloat($(this).parent().parent().find(".input-changeable-price").val());
+        var taxRate = parseFloat($(this).parent().parent().find(".input-changeable-tax-rate").val());
+        console.log(amount,price,taxRate);
+
+        $(this).parent().parent().find(".input-changeable-total-tax-include").val(amount*price);
+        $(this).parent().parent().find(".input-changeable-total-tax-exclude").val(amount*price/(1+taxRate/100));
+    });
+    //单价改变
+    $(".input-changeable-price").change(function () {
+        var price = parseFloat($(this).val());
+        //找到对应的数量和税率
+        var amount = parseFloat($(this).parent().parent().find(".input-changeable-amount").val());
+        var taxRate = parseFloat($(this).parent().parent().find(".input-changeable-tax-rate").val());
+        console.log(amount,price,taxRate);
+
+        $(this).parent().parent().find(".input-changeable-total-tax-include").val(amount*price);
+        $(this).parent().parent().find(".input-changeable-total-tax-exclude").val(amount*price/(1+taxRate/100));
+    });
+    //税率改变
+    $(".input-changeable-tax-rate").change(function () {
+        var taxRate = parseFloat($(this).val());
+        //找到对应的数量和单价
+        var amount = parseFloat($(this).parent().parent().find(".input-changeable-amount").val());
+        var price = parseFloat($(this).parent().parent().find(".input-changeable-price").val());
+        console.log(amount,price,taxRate);
+
+        $(this).parent().parent().find(".input-changeable-total-tax-exclude").val(amount*price/(1+taxRate/100));
+    });
+}

src/main/resources/templates/admin/project_budget_edit.ftl

@@ -406,13 +406,13 @@
     </div>
 
 
-    <div class="am-modal am-modal-prompt" style="width: 1000px;max-height:600px;overflow-y:auto;" tabindex="-1" id="my-prompt-income-detail">
+    <div class="am-modal am-modal-prompt" style="width: 1200px;max-height:600px;overflow-y:auto;" tabindex="-1" id="my-prompt-income-detail">
         <div class="am-modal-dialog">
             <div class="am-modal-hd">新增销售收入明细表——${project.name}</div>
             <div class="am-modal-bd">
-                <table class="am-table am-table-bordered am-table-radius table-main" style="padding:0;">
+                <table class="am-table am-table-bordered am-table-radius table-main" style="padding:0;" id="incomeTable">
                     <tbody>
-                    <tr class="am-text-xl">
+                    <tr>
                         <td>类别</td>
                         <td>名称</td>
                         <td>单位</td>
@@ -421,25 +421,27 @@
                         <td>税率（%）</td>
                         <td>含税总金额（元）</td>
                         <td>不含税金额（元）</td>
+                        <td>操作</td>
                     </tr>
 
                     <#if incomeDetails??>
                         <#list incomeDetails as incomeDetail>
                         <tr>
                             <td>
-                                <select data-am-selected class="am-modal-prompt-input">
+                                <select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-income">
                                     <option value="1" <#if incomeDetail.type == 1>selected</#if>>设备类</option>
                                     <option value="2" <#if incomeDetail.type == 2>selected</#if>>工程类</option>
                                     <option value="3" <#if incomeDetail.type == 3>selected</#if>>服务类</option>
                                 </select>
                             </td>
-                            <td><input type="text" class="am-modal-prompt-input" value="${incomeDetail.name!}"></td>
+                            <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income" value="${incomeDetail.name!}"></td>
-                            <td><input type="text" class="am-modal-prompt-input" value="${incomeDetail.unit!}"></td>
+                            <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income" value="${incomeDetail.unit!}"></td>
-                            <td><input type="text" class="am-modal-prompt-input" value="${incomeDetail.amount!}"></td>
+                            <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-amount" value="${incomeDetail.amount!}"></td>
-                            <td><input type="text" class="am-modal-prompt-input" value="${incomeDetail.price!}"></td>
+                            <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-price" value="${incomeDetail.price!}"></td>
-                            <td><input type="text" class="am-modal-prompt-input" value="${incomeDetail.taxRate!}"></td>
+                            <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-tax-rate" value="${incomeDetail.taxRate!}"></td>
-                            <td><input type="text" class="am-modal-prompt-input" value="${incomeDetail.totalTaxInclude!}" readonly></td>
+                            <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax-include" value="${incomeDetail.totalTaxInclude!}" readonly></td>
-                            <td><input type="text" class="am-modal-prompt-input" value="${incomeDetail.totalTaxExclude!}" readonly></td>
+                            <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax-exclude" value="${incomeDetail.totalTaxExclude!}" readonly></td>
+                            <td><button type="button" class="am-btn am-btn-warning am-btn-xs am-modal-line-delete">删除</button></td>
                         </tr>
                         </#list>
                     </#if>
@@ -463,6 +465,7 @@
                     </tr>-->
                     </tbody>
                 </table>
+                <button type="button" id="incomeAddBtn" class="am-btn am-btn-primary am-btn-xs">添加一行</button>
             </div>
             <div class="am-modal-footer">
                 <span class="am-modal-btn" data-am-modal-cancel>取消</span>
@@ -500,12 +503,39 @@
             $('#my-prompt-income-detail').modal({
                 relatedTarget: this,
                 onConfirm: function(e) {
-                    saveIncome("${base}/project/budgetEditSaveIncomeDetail", e.data, $("#id").val());
+                    //不能使用e.data，因为无法获取动态添加的
+                    var data = collectIncomeData("am-modal-prompt-input-income");
+                    saveIncome("${base}/project/budgetEditSaveIncomeDetail", data, $("#id").val());
                 },
                 onCancel: function(e) {
                 }
             });
         });
+        $("#incomeAddBtn").click(function () {
+            var template = '<tr>\n' +
+                    '                        <td>\n' +
+                    '                            <select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-income">\n' +
+                    '                                <option value="1">设备类</option>\n' +
+                    '                                <option value="2">工程类</option>\n' +
+                    '                                <option value="3">服务类</option>\n' +
+                    '                            </select>\n' +
+                    '                        </td>\n' +
+                    '                        <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income"></td>\n' +
+                    '                        <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income"></td>\n' +
+                    '                        <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-amount"></td>\n' +
+                    '                        <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-price"></td>\n' +
+                    '                        <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-tax-rate"></td>\n' +
+                    '                        <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax-include" readonly></td>\n' +
+                    '                        <td><input type="text" class="am-modal-prompt-input am-modal-prompt-input-income input-changeable-total-tax-exclude" readonly></td>\n' +
+                    '                        <td><button type="button" class="am-btn am-btn-warning am-btn-xs am-modal-line-delete">删除</button></td>\n' +
+                    '                    </tr>';
+            $("#incomeTable").append(template);
+            bindDeleteBtn();
+            bindIncomeChangeableInput();
+        });
+
+        bindDeleteBtn();
+        bindIncomeChangeableInput();
     });
 </script>
 </@defaultLayout.layout>