✨ feat: 收付款操作

klp-ui/src/views/finance/pay/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="handlePay(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="payOpen" width="500px" append-to-body>
+      <el-form ref="payForm" :model="payForm" :rules="rules" label-width="80px">
+        <el-form-item label="付款金额" prop="amount">
+          <el-input-number v-model="payForm.amount" :step="1.00" :precision="2" placeholder="请输入付款金额" :min="0" :max="payForm.balanceAmount" style="width: 100%;"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitPayForm">确 定</el-button>
+        <el-button @click="cancelPay">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listPayable, getPayable, delPayable, addPayable, updatePayable } from "@/api/finance/payable";
+import { listPayable, getPayable, delPayable, addPayable, updatePayable, updatePaidAmount } from "@/api/finance/payable";
 import VendorSelect from '@/components/KLPService/VendorSelect/index.vue';
 
 export default {
@@ -194,7 +212,11 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      // 付款表单参数
+      payForm: {},
+      // 是否显示付款弹出层
+      payOpen: 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.payableId != null) {
-            updatePayable(this.form).then(response => {
+            const {balanceAmount, ...payload} = this.form;
+            updatePayable(payload).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
@@ -314,6 +337,29 @@ export default {
       this.download('klp/payable/export', {
         ...this.queryParams
       }, `payable_${new Date().getTime()}.xlsx`)
+    },
+    // 付款按钮操作
+    handlePay(row) {
+      this.payForm = {
+        payableId: row.payableId,
+        amount: row.balanceAmount,
+        balanceAmount: row.balanceAmount
+      };
+      this.payOpen = true;
+    },
+    // 取消付款按钮操作
+    cancelPay() {
+      this.payOpen = false;
+      this.payForm = {};
+    },
+    submitPayForm() {
+      const payload = {
+        payableId: this.payForm.payableId,
+        paidAmount: this.payForm.amount
+      }
+      updatePaidAmount(payload).then(response => {
+        this.$modal.msgSuccess("付款成功");
+      })
     }
   }
 };