DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加财务状态页面 客户管理财务状态优化

Browse Source
This commit is contained in:
jhd
2026-05-23 16:20:52 +08:00
parent 74c7618e9a
commit 09535d884c
3 changed files with 527 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
klp-ui/src/views/crm/customer/index.vue
View File

@@ -70,7 +70,23 @@
</div>
</el-tab-pane>
<el-tab-pane label="财务状态" name="third">
<KLPTable v-loading="loading" :data="financeList">
<!-- 操作按钮 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleFinanceAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="financeSingle" @click="handleFinanceUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="financeMultiple" @click="handleFinanceDelete">删除</el-button>
</el-col>
</el-row>
<!-- 表格 -->
<KLPTable v-loading="loading" :data="financeList" @selection-change="handleFinanceSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="客户" align="center" prop="customerName" />
<el-table-column label="合同编号" align="center" prop="contractCode" />
<el-table-column label="收款日期" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
@@ -78,6 +94,12 @@
</el-table-column>
<el-table-column label="收款金额" align="center" prop="amount" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleFinanceUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleFinanceDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</KLPTable>
</el-tab-pane>
<el-tab-pane label="订单异议" name="fourth">
@@ -157,6 +179,34 @@
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 财务状态操作对话框 -->
<el-dialog :title="financeTitle" :visible.sync="financeOpen" width="500px" append-to-body>
<el-form ref="financeForm" :model="financeForm" label-width="80px">
<el-form-item label="客户" prop="customerName">
<el-input v-model="financeForm.customerName" disabled />
</el-form-item>
<el-form-item label="合同编号" prop="contractCode">
<el-input v-model="financeForm.contractCode" placeholder="请输入合同编号" />
</el-form-item>
<el-form-item label="收款日期" prop="dueDate">
<el-date-picker clearable v-model="financeForm.dueDate" 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-number :controls=false v-model="financeForm.amount" :step="1.00"
:precision="2" placeholder="请输入收款金额" :min="0" style="width: 100%;"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="financeForm.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="financeSubmitForm">确 定</el-button>
<el-button @click="financeCancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -171,6 +221,7 @@ import CoilTable from '../components/CoilTable.vue'
import DeliveryTable from '../components/DeliveryTable.vue'
import { listCustomer, addCustomer, updateCustomer, delCustomer, listCoilByCustomerId, listFinanceByCustomerId } from '@/api/crm/customer'
import { getReceivable, delReceivable, addReceivable, updateReceivable } from '@/api/finance/receivable'
export default {
name: 'CustomerPage',
@@ -209,6 +260,13 @@ export default {
buttonLoading: false,
updateLoading: false,
debounceTimer: null,
// 财务状态相关
financeIds: [],
financeSingle: true,
financeMultiple: true,
financeOpen: false,
financeTitle: "",
financeForm: {},
rules: {
customerCode: [{ required: true, message: '请输入客户编码', trigger: 'blur' }],
companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
@@ -380,6 +438,57 @@ export default {
}).catch(() => {
this.$message.info('已取消删除');
});
},
// 财务状态操作
handleFinanceSelectionChange(selection) {
this.financeIds = selection.map(item => item.receivableId);
this.financeSingle = selection.length !== 1;
this.financeMultiple = !selection.length;
},
handleFinanceAdd() {
this.financeForm = {
customerId: this.currentCustomerId,
customerName: this.currentCustomer.companyName
};
this.financeTitle = "添加收款记录";
this.financeOpen = true;
},
handleFinanceUpdate(row) {
const receivableId = row.receivableId || this.financeIds;
getReceivable(receivableId).then(response => {
this.financeForm = response.data;
this.financeTitle = "修改收款记录";
this.financeOpen = true;
});
},
handleFinanceDelete(row) {
const receivableIds = row.receivableId || this.financeIds;
this.$modal.confirm('是否确认删除收款记录？').then(() => {
return delReceivable(receivableIds);
}).then(() => {
this.getFinanceList();
this.$modal.msgSuccess("删除成功");
});
},
financeSubmitForm() {
if (this.financeForm.receivableId != null) {
updateReceivable(this.financeForm).then(response => {
this.$modal.msgSuccess("修改成功");
this.financeOpen = false;
this.getFinanceList();
});
} else {
addReceivable(this.financeForm).then(response => {
this.$modal.msgSuccess("新增成功");
this.financeOpen = false;
this.getFinanceList();
});
}
},
financeCancel() {
this.financeOpen = false;
this.financeForm = {};
}
},
}
@@ -395,4 +504,4 @@ export default {
.dialog-footer {
text-align: center;
}
</style>
</style>