✨ feat: 收付款操作

klp-ui/src/views/finance/receive/index.vue

@@ -97,6 +97,12 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-money"
+            @click="handleReceive(scope.row)"
+          >收款</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -130,7 +136,7 @@
           <el-input v-model="form.amount" placeholder="请输入应收金额" />
         </el-form-item>
         <el-form-item label="已收金额" prop="paidAmount">
-          <el-input v-model="form.paidAmount" placeholder="请输入已收金额" />
+          <el-input v-model="form.paidAmount" disabled placeholder="请输入已收金额" />
         </el-form-item>
         <!-- <el-form-item label="未收金额" prop="balanceAmount">
           <el-input v-model="form.balanceAmount" placeholder="请输入未收金额" />
@@ -144,11 +150,23 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="收款" :visible.sync="receiveOpen" width="500px" append-to-body>
+      <el-form ref="receiveForm" :model="receiveForm" :rules="rules" label-width="80px">
+        <el-form-item label="收款金额" prop="amount">
+          <el-input-number v-model="receiveForm.amount" :step="1.00" :precision="2" placeholder="请输入收款金额" :min="0" :max="receiveForm.balanceAmount" style="width: 100%;"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitReceiveForm">确 定</el-button>
+        <el-button @click="cancelReceive">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listReceivable, getReceivable, delReceivable, addReceivable, updateReceivable } from "@/api/finance/receivable";
+import { listReceivable, getReceivable, delReceivable, addReceivable, updateReceivable, updatePaidAmount } from "@/api/finance/receivable";
 import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
 
 export default {
@@ -194,7 +212,11 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      // 收款表单参数
+      receiveForm: {},
+      // 是否显示收款弹出层
+      receiveOpen: false
     };
   },
   created() {
@@ -223,7 +245,7 @@ export default {
         orderId: undefined,
         dueDate: undefined,
         amount: undefined,
-        paidAmount: undefined,
+        paidAmount: 0,
         balanceAmount: undefined,
         status: undefined,
         delFlag: undefined,
@@ -275,7 +297,8 @@ export default {
         if (valid) {
           this.buttonLoading = true;
           if (this.form.receivableId != null) {
-            updateReceivable(this.form).then(response => {
+            const {balanceAmount, ...payload} = this.form;
+            updateReceivable(payload).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
@@ -314,6 +337,33 @@ export default {
       this.download('klp/receivable/export', {
         ...this.queryParams
       }, `receivable_${new Date().getTime()}.xlsx`)
+    },
+    // 收款按钮操作
+    handleReceive(row) {
+      this.receiveForm = {
+        receivableId: row.receivableId,
+        amount: row.balanceAmount,
+        balanceAmount: row.balanceAmount
+      };
+      this.receiveOpen = true;
+    },
+    // 取消收款按钮操作
+    cancelReceive() {
+      this.receiveOpen = false;
+      this.receiveForm = {};
+    },
+    submitReceiveForm() {
+      const payload = {
+        receivableId: this.receiveForm.receivableId,
+        paidAmount: this.receiveForm.amount
+      }
+      updatePaidAmount(payload).then(response => {
+        this.$modal.msgSuccess("收款成功");
+        this.receiveOpen = false;
+        this.getList();
+      }).finally(() => {
+        this.buttonLoading = false;
+      });
     }
   }
 };