✨ feat: 收付款操作

klp-ui/src/api/finance/payable.js

@@ -42,3 +42,12 @@ export function delPayable(payableId) {
     method: 'delete'
   })
 }
+
+// 付款
+export function updatePaidAmount(data) {
+  return request({
+    url: '/klp/payable/updatePaidAmount',
+    method: 'post',
+    data: data
+  })
+}

klp-ui/src/api/finance/receivable.js

@@ -42,3 +42,12 @@ export function delReceivable(receivableId) {
     method: 'delete'
   })
 }
+
+// 收款
+export function updatePaidAmount(data) {
+  return request({
+    url: '/klp/receivable/updatePaidAmount',
+    method: 'post',
+    data: data
+  })
+}

klp-ui/src/views/finance/document/components/Voucher.vue

@@ -0,0 +1,293 @@
+<template>
+  <div>
+    <el-row>
+      <el-form :model="form" label-width="120px" inline>
+        <el-form-item label="凭证编号">
+          <el-input v-model="form.docNo" placeholder="请输入凭证编号" />
+        </el-form-item>
+        <el-form-item label="单据日期" prop="docDate">
+          <el-date-picker clearable
+            v-model="form.docDate"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择单据日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="关联订单ID" prop="relatedOrderId">
+          <el-input v-model="form.relatedOrderId" placeholder="请输入关联订单ID" />
+        </el-form-item>
+      </el-form>
+    </el-row>
+
+    <el-row>
+      <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
+        <el-table-column label="序号" type="index" width="50" align="center" />
+        <el-table-column prop="summary" label="摘要">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.summary" placeholder="请输入摘要" @change="handleRowChange(scope.row)" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="accountingId" label="会计科目">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.accountingId" placeholder="请输入会计科目" @change="handleRowChange(scope.row)" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="debitAmount" label="借方金额">
+          <template slot-scope="scope">
+            <el-input 
+              v-model.number="scope.row.debitAmount" 
+              type="number" 
+              placeholder="0.00" 
+              @input="handleDebitInput(scope.row)"
+              @change="handleRowChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="creditAmount" label="贷方金额">
+          <template slot-scope="scope">
+            <el-input 
+              v-model.number="scope.row.creditAmount" 
+              type="number" 
+              placeholder="0.00" 
+              @input="handleCreditInput(scope.row)"
+              @change="handleRowChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button 
+              type="text" 
+              icon="el-icon-delete" 
+              @click="handleDelete(scope.$index)"
+              :disabled="tableData.length <= 1"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+
+    <!-- 合计部分 -->
+    <el-row>
+      <el-descriptions>
+        <el-descriptions-item label="大写金额">
+          <span>{{ amountInWords }}</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="借方合计">
+          <span>{{ debitAmount.toFixed(2) }}</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="贷方合计">
+          <span>{{ creditAmount.toFixed(2) }}</span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-row>
+
+    <el-row>
+      <el-button type="primary" @click="handleCreate">创建凭证</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        form: {
+          docNo: undefined,
+          docDate: undefined,
+          relatedOrderId: undefined
+        },
+        tableData: [{
+          summary: '',
+          accountingId: '',
+          debitAmount: 0,
+          creditAmount: 0,
+          remark: ''
+        }]
+      }
+    },
+    computed: {
+      // 借方总额和贷方总额（过滤空行）
+      debitAmount() {
+        return this.tableData.reduce((total, item) => {
+          // 只计算有内容的行
+          if (this.isRowNotEmpty(item)) {
+            return total + (Number(item.debitAmount) || 0);
+          }
+          return total;
+        }, 0);
+      },
+      creditAmount() {
+        return this.tableData.reduce((total, item) => {
+          if (this.isRowNotEmpty(item)) {
+            return total + (Number(item.creditAmount) || 0);
+          }
+          return total;
+        }, 0);
+      },
+      // 大写金额
+      amountInWords() {
+        // 如果借贷相等则正常显示，不相等则显示借贷不相等
+        if (Math.abs(this.debitAmount - this.creditAmount) < 0.01) {
+          return this.numberToChinese(this.debitAmount);
+        } else {
+          return '借贷不相等';
+        }
+      }
+    },
+    methods: {
+      // 判断行是否有内容
+      isRowNotEmpty(row) {
+        return row.summary || row.accountingId || 
+               (row.debitAmount && row.debitAmount > 0) || 
+               (row.creditAmount && row.creditAmount > 0) || 
+               row.remark;
+      },
+      
+      // 处理借方金额输入
+      handleDebitInput(row) {
+        // 如果借方金额有值，则清空贷方金额
+        if (row.debitAmount && row.debitAmount > 0) {
+          if (row.creditAmount && row.creditAmount > 0) {
+            this.$message.warning('借方和贷方金额不能同时填写，已自动清空贷方金额');
+            row.creditAmount = 0;
+          }
+        }
+      },
+      
+      // 处理贷方金额输入
+      handleCreditInput(row) {
+        // 如果贷方金额有值，则清空借方金额
+        if (row.creditAmount && row.creditAmount > 0) {
+          if (row.debitAmount && row.debitAmount > 0) {
+            this.$message.warning('借方和贷方金额不能同时填写，已自动清空借方金额');
+            row.debitAmount = 0;
+          }
+        }
+      },
+      
+      // 处理行数据变化
+      handleRowChange(row) {
+        // 检查最后一行是否有内容，如果有则添加新的空行
+        const lastRow = this.tableData[this.tableData.length - 1];
+        if (this.isRowNotEmpty(lastRow)) {
+          this.addEmptyRow();
+        }
+      },
+      
+      // 添加空行
+      addEmptyRow() {
+        this.tableData.push({
+          summary: '',
+          accountingId: '',
+          debitAmount: 0,
+          creditAmount: 0,
+          remark: ''
+        });
+      },
+      
+      // 删除行
+      handleDelete(index) {
+        this.tableData.splice(index, 1);
+        
+        // 确保至少保留一个空行
+        if (this.tableData.length === 0) {
+          this.addEmptyRow();
+        } else {
+          // 检查最后一行是否为空，如果不为空则添加新的空行
+          const lastRow = this.tableData[this.tableData.length - 1];
+          if (this.isRowNotEmpty(lastRow)) {
+            this.addEmptyRow();
+          }
+        }
+      },
+      
+      // 数字转中文大写金额
+      numberToChinese(num) {
+        if (num === 0) return '零元整';
+        
+        const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
+        const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟'];
+        const decimals = ['角', '分'];
+        
+        // 处理整数和小数部分
+        const parts = num.toFixed(2).split('.');
+        const integerPart = parts[0];
+        const decimalPart = parts[1];
+        
+        let result = '';
+        
+        // 处理整数部分
+        for (let i = 0; i < integerPart.length; i++) {
+          const digit = parseInt(integerPart[i]);
+          const position = integerPart.length - i - 1;
+          
+          if (digit !== 0) {
+            result += digits[digit] + units[position];
+          } else {
+            // 处理零的情况
+            if (position % 4 === 0) { // 万或亿的位置
+              result += units[position];
+            }
+            // 避免连续多个零
+            if (!result.endsWith('零')) {
+              result += digits[digit];
+            }
+          }
+        }
+        
+        result += '元';
+        
+        // 处理小数部分
+        if (decimalPart === '00') {
+          result += '整';
+        } else {
+          if (decimalPart[0] !== '0') {
+            result += digits[parseInt(decimalPart[0])] + decimals[0];
+          }
+          if (decimalPart[1] !== '0') {
+            result += digits[parseInt(decimalPart[1])] + decimals[1];
+          }
+        }
+        
+        // 处理以零开头的情况
+        return result.replace(/^零+/, '');
+      },
+      
+      handleCreate() {
+        // 验证所有行的借贷金额是否符合规则
+        const invalidRows = this.tableData.findIndex(row => {
+          return this.isRowNotEmpty(row) && 
+                 row.debitAmount > 0 && 
+                 row.creditAmount > 0;
+        });
+        
+        if (invalidRows !== -1) {
+          this.$message.error('存在同时填写借方和贷方金额的行，请检查');
+          return;
+        }
+        
+        // 过滤掉空行后提交
+        const validData = this.tableData.filter(row => this.isRowNotEmpty(row));
+        
+        if (validData.length === 0) {
+          this.$message.warning('请至少填写一行凭证数据');
+          return;
+        }
+        
+        console.log('表单数据:', this.form);
+        console.log('表格数据:', validData);
+        
+        // 这里可以添加提交逻辑
+        this.$message.success('凭证创建成功');
+      }
+    }
+  }
+</script>

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

@@ -114,42 +114,23 @@
     />
 
     <!-- 添加或修改财务单据对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <create-document ref="createDocument" />
-        <el-form-item label="单据编号" prop="docNo">
-          <el-input v-model="form.docNo" placeholder="请输入单据编号" />
-        </el-form-item>
-        <el-form-item label="单据日期" prop="docDate">
-          <el-date-picker clearable
-            v-model="form.docDate"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择单据日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="单据金额" prop="amount">
-          <el-input v-model="form.amount" placeholder="请输入单据金额" />
-        </el-form-item>
-        <el-form-item label="关联订单ID" prop="relatedOrderId">
-          <el-input v-model="form.relatedOrderId" placeholder="请输入关联订单ID" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
     </el-dialog>
+
+    
   </div>
 </template>
 
 <script>
 import { listFinancialDocument, getFinancialDocument, delFinancialDocument, addFinancialDocument, updateFinancialDocument } from "@/api/finance/financialDocument";
+import CreateDocument from "./components/Voucher.vue";
 
 export default {
   name: "FinancialDocument",
+  components: {
+    CreateDocument
+  },
   data() {
     return {
       // 按钮loading

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

@@ -46,7 +46,7 @@
             <order-detail-list :orderId="currentOrder.orderId" />
           </el-tab-pane>
           <el-tab-pane label="应收明细" name="receivable">
-            <el-table v-loading="rightLoading" :data="currentOrder.receivables">
+            <el-table v-loading="rightLoading" :data="currentOrder.receivables" empty-text="暂无数据">
               <el-table-column label="应收ID" align="center" prop="receivableId" v-if="false" />
               <el-table-column label="客户" align="center" prop="customerName" />
               <el-table-column label="订单ID" align="center" prop="orderId" />
@@ -63,7 +63,7 @@
             </el-table>
           </el-tab-pane>
           <el-tab-pane label="应付明细" name="payable">
-            <el-table v-loading="rightLoading" :data="currentOrder.payables">
+            <el-table v-loading="rightLoading" :data="currentOrder.payables" empty-text="暂无数据">
               <el-table-column label="应付ID" align="center" prop="payableId" v-if="false" />
               <el-table-column label="供应商" align="center" prop="supplierName" />
               <el-table-column label="订单ID" align="center" prop="orderId" />
@@ -80,7 +80,7 @@
             </el-table>
           </el-tab-pane>
           <el-tab-pane label="凭证管理" name="document">
-            <el-table :data="currentOrder.documents" style="width: 100%">
+            <el-table :data="currentOrder.documents" style="width: 100%" empty-text="暂无数据">
               <el-table-column prop="documentCode" label="凭证编号" />
               <el-table-column prop="documentDate" label="凭证日期" />
               <el-table-column prop="documentAmount" label="凭证金额" />

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("付款成功");
+      })
     }
   }
 };

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;
+      });
     }
   }
 };