[update] 打包项目维护来款、开票修改

src/views/packManagement/modules/BatchInvoicingModule.vue

@@ -16,6 +16,7 @@
               <a-input placeholder="请输入开票金额"
                        v-decorator="['invoicingAmount',validatorRules.invoicingAmount]"
                        :maxLength='50'
+                       @blur="invoicingAmountBlur"
                        @change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.]/g,'')).trim()}"></a-input>
             </a-form-item>
           </a-col>
@@ -40,18 +41,6 @@
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
-          <a-col>
-            <a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
-              <a-textarea
-                placeholder="请输入备注"
-                v-decorator="['remarks']"
-                :auto-size="{ minRows: 3, maxRows: 6 }"
-                :maxLength='200'
-                @change="e => {e.target.value = (e.target.value + '').trim()}"/>
-            </a-form-item>
-          </a-col>
-        </a-row>
       </a-form>
 
       <a-table
@@ -61,13 +50,19 @@
         rowKey="id"
         :columns="columns"
         :dataSource="dataSource"
-        :loading="loading"
         class="j-table-force-nowrap">
-
         <template slot="text" slot-scope="text">
           <j-ellipsis :value="text" :length="18"></j-ellipsis>
         </template>
 
+        <!--          输入-->
+        <template slot="input-text">
+          <a-input placeholder="请输入备注"
+                   v-decorator="['remark']"
+                   :maxLength='50'
+                   @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+        </template>
+
       </a-table>
     </a-spin>
   </j-modal>
@@ -80,11 +75,31 @@ import { money } from '../../../utils/validate'
 export default {
   name: 'BatchInvoicingModule',
   components: { JDate },
+  props: {
+    // 选中的项目信息
+    selectedData: {
+      type: Array,
+      required: false,
+      default: []
+    },
+    visible: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  watch: {
+    visible(value) {
+      console.log(value)
+      if (value) {
+        this.open()
+      }
+    }
+  },
   data() {
     return {
       title: '批量开票',
       width: 1000,
-      visible: false,
       confirmLoading: false,
       form: this.$form.createForm(this),
       labelCol: {
@@ -118,10 +133,30 @@ export default {
           align: 'center',
           dataIndex: 'chargeProject',
           scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'receivableAmount'
+        }, {
+          title: '已开票金额',
+          align: 'center',
+          width: 100,
+          dataIndex: 'paidAmount'
+        }, {
+          title: '本次开票金额',
+          align: 'center',
+          width: 140,
+          dataIndex: 'thisInvoicingAmount'
+        }, {
+          title: '备注',
+          align: 'center',
+          width: 200,
+          dataIndex: 'remark',
+          scopedSlots: { customRender: 'input-text' }
         }
       ],
       dataSource: [],
-      loading: false,
       validatorRules: {
         invoicingAmount: {
           rules: [{ required: true, validator: this.checkMoney }],
@@ -134,11 +169,69 @@ export default {
         invoicingTime: {
           rules: [{ required: true, message: '请选择开票时间' }],
           validateTrigger: 'blur'
-        },
-      }
+        }
+      },
+      inputInvoicingAmount: null, // 输入的开票金额
     }
   },
   methods: {
+    loadData() {
+      // 计算项目欠款信息
+      this.dataSource.forEach(item => {
+        item.amountOwed = Number(item.receivableAmount) - Number(item.paidAmount)
+      })
+      this.$forceUpdate()
+    },
+    /**
+     * blur时分配金额
+     */
+    invoicingAmountBlur(e) {
+      e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()
+      this.inputInvoicingAmount = Number(e.target.value)
+      this.clearThisTimeAmount().then(() => {
+        this.calculateThisTimeAmount()
+        this.$forceUpdate()
+      })
+    },
+    /**
+     * 清空本次来款金额
+     * @returns {Promise<unknown>}
+     */
+    clearThisTimeAmount() {
+      return new Promise(resolve => {
+        this.dataSource.forEach(item => {
+          item.thisInvoicingAmount = null
+        })
+        resolve()
+      })
+    },
+    /**
+     * 计算此次来款信息
+     */
+    calculateThisTimeAmount() {
+      if (this.inputInvoicingAmount <= 0) {
+        this.$message.warn('请输入大于0的来款金额')
+        return
+      }
+      this.dataSource.forEach(item => {
+        // 当前项目欠款是否 >0
+        if (Number(item.amountOwed) > 0) {
+          // 输入的来款金额是否 >= 当前项目欠款
+          if (this.inputInvoicingAmount >= Number(item.amountOwed)) {
+            item.thisInvoicingAmount = Number(item.amountOwed)
+            this.inputInvoicingAmount -= Number(item.amountOwed)
+            // item.amountOwed = 0
+          } else {
+            // 输入的来款金额小于当前项目欠款且剩余的输入来款金额大于0，则将剩余全部来款算入当前项目的此次来款
+            if (this.inputInvoicingAmount > 0) {
+              item.thisInvoicingAmount = this.inputInvoicingAmount
+              // item.amountOwed = Number(item.amountOwed) - item.thisIncomingAmount
+              this.inputInvoicingAmount = 0
+            }
+          }
+        }
+      })
+    },
     handleOk() {
 
     },
@@ -146,10 +239,11 @@ export default {
       this.close()
     },
     open() {
-      this.visible = true
+      this.dataSource = this.selectedData
+      this.loadData()
     },
     close() {
-      this.visible = false
+      this.$emit('update:visible', false)
     },
     /**
      * 校验金额格式