feat: 应收款管理优化 - 需求和客户改为下拉选择

功能优化:
- 将需求ID输入框改为需求工单下拉选择
- 将客户ID输入框改为客户下拉选择
- 添加需求和客户数据加载逻辑

前端改进:
1. 表单优化:
   - 需求工单:下拉选择,显示需求名称
   - 客户:下拉选择,显示客户名称
   - 添加 clearable 支持清空

2. 表格优化:
   - 新增需求工单列,显示需求名称
   - 新增客户列,显示客户名称
   - 调整列宽和顺序

3. 数据加载:
   - loadRequirements(): 加载需求列表
   - loadCustomers(): 加载客户列表
   - getRequirementName(): 根据ID获取需求名称
   - getCustomerName(): 根据ID获取客户名称

4. 表单验证:
   - 更新验证提示:'请选择需求工单' / '请选择客户'
   - 触发方式改为 'change'

用户体验提升:
- 更直观的下拉选择替代手动输入ID
- 表格显示名称而不是ID,更易读
- 支持搜索和清空选择

表格列顺序(优化后):
应收款编号 > 需求工单 > 客户 > 项目 > 应收款金额 > 已收款金额 > 未收款金额 > 应收款日期 > 付款截止日期 > 状态 > 逾期天数 > 创建时间 > 操作
This commit is contained in:
zhangjf 2026-02-15 20:22:51 +08:00
parent db7a34f4f3
commit a119826173
2 changed files with 73 additions and 7 deletions

View File

@ -38,6 +38,16 @@
<!-- 表格 -->
<el-table :data="tableData" border v-loading="loading">
<el-table-column prop="receivableCode" label="应收款编号" width="150" />
<el-table-column prop="requirementId" label="需求工单" width="150">
<template #default="{ row }">
{{ getRequirementName(row.requirementId) }}
</template>
</el-table-column>
<el-table-column prop="customerId" label="客户" width="120">
<template #default="{ row }">
{{ getCustomerName(row.customerId) }}
</template>
</el-table-column>
<el-table-column prop="projectId" label="项目" width="150">
<template #default="{ row }">
{{ getProjectName(row.projectId) }}
@ -113,8 +123,15 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="需求ID" prop="requirementId">
<el-input-number v-model="form.requirementId" :min="1" style="width: 100%;" />
<el-form-item label="需求工单" prop="requirementId">
<el-select v-model="form.requirementId" placeholder="请选择需求工单" style="width: 100%;" clearable>
<el-option
v-for="req in requirementOptions"
:key="req.requirementId"
:label="req.requirementName"
:value="req.requirementId"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
@ -133,8 +150,15 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户ID" prop="customerId">
<el-input-number v-model="form.customerId" :min="1" style="width: 100%;" />
<el-form-item label="客户" prop="customerId">
<el-select v-model="form.customerId" placeholder="请选择客户" style="width: 100%;" clearable>
<el-option
v-for="customer in customerOptions"
:key="customer.customerId"
:label="customer.customerName"
:value="customer.customerId"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
@ -226,6 +250,8 @@ import {
recordPayment
} from '../../api/receivable'
import { getProjectList } from '../../api/project'
import { getRequirementList } from '../../api/requirement'
import { getCustomerList } from '../../api/customer'
//
const searchForm = reactive({
@ -248,6 +274,12 @@ const page = reactive({
//
const projectOptions = ref([])
//
const requirementOptions = ref([])
//
const customerOptions = ref([])
//
const dialogVisible = ref(false)
const formRef = ref(null)
@ -273,13 +305,13 @@ const rules = {
{ required: true, message: '请输入应收款编号', trigger: 'blur' }
],
requirementId: [
{ required: true, message: '请输入需求ID', trigger: 'blur' }
{ required: true, message: '请选择需求工单', trigger: 'change' }
],
projectId: [
{ required: true, message: '请选择项目', trigger: 'change' }
],
customerId: [
{ required: true, message: '请输入客户ID', trigger: 'blur' }
{ required: true, message: '请选择客户', trigger: 'change' }
],
receivableAmount: [
{ required: true, message: '请输入应收款金额', trigger: 'blur' }
@ -303,12 +335,44 @@ const loadProjects = async () => {
}
}
//
const loadRequirements = async () => {
try {
const res = await getRequirementList({ current: 1, size: 1000 })
requirementOptions.value = res.records || []
} catch (error) {
console.error('加载需求列表失败:', error)
}
}
//
const loadCustomers = async () => {
try {
const res = await getCustomerList({ current: 1, size: 1000 })
customerOptions.value = res.records || []
} catch (error) {
console.error('加载客户列表失败:', error)
}
}
//
const getProjectName = (projectId) => {
const project = projectOptions.value.find(p => p.projectId === projectId)
return project ? project.projectName : '-'
}
//
const getRequirementName = (requirementId) => {
const requirement = requirementOptions.value.find(r => r.requirementId === requirementId)
return requirement ? requirement.requirementName : '-'
}
//
const getCustomerName = (customerId) => {
const customer = customerOptions.value.find(c => c.customerId === customerId)
return customer ? customer.customerName : '-'
}
//
const fetchData = async () => {
loading.value = true
@ -463,6 +527,8 @@ const handleDelete = async (row) => {
//
onMounted(() => {
loadProjects()
loadRequirements()
loadCustomers()
fetchData()
})
</script>

@ -1 +1 @@
Subproject commit eacd3ec0a70dbaa1b21377cbbd4c7204ef6efe2d
Subproject commit c4dcf332ba4422a31de94bef9ecd7b72168df888