✨ feat: 收付款操作
This commit is contained in:
砂糖
293
klp-ui/src/views/finance/document/components/Voucher.vue
Normal file
293
klp-ui/src/views/finance/document/components/Voucher.vue
Normal file
@@ -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>
|
||||
@@ -114,42 +114,23 @@
|
||||
/>
|
||||
|
||||
<!-- 添加或修改财务单据对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<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 :title="title" :visible.sync="open" width="90%" append-to-body>
|
||||
<create-document ref="createDocument" />
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user