feat: 应收款管理优化 - 需求和客户改为下拉选择
功能优化: - 将需求ID输入框改为需求工单下拉选择 - 将客户ID输入框改为客户下拉选择 - 添加需求和客户数据加载逻辑 前端改进: 1. 表单优化: - 需求工单:下拉选择,显示需求名称 - 客户:下拉选择,显示客户名称 - 添加 clearable 支持清空 2. 表格优化: - 新增需求工单列,显示需求名称 - 新增客户列,显示客户名称 - 调整列宽和顺序 3. 数据加载: - loadRequirements(): 加载需求列表 - loadCustomers(): 加载客户列表 - getRequirementName(): 根据ID获取需求名称 - getCustomerName(): 根据ID获取客户名称 4. 表单验证: - 更新验证提示:'请选择需求工单' / '请选择客户' - 触发方式改为 'change' 用户体验提升: - 更直观的下拉选择替代手动输入ID - 表格显示名称而不是ID,更易读 - 支持搜索和清空选择 表格列顺序(优化后): 应收款编号 > 需求工单 > 客户 > 项目 > 应收款金额 > 已收款金额 > 未收款金额 > 应收款日期 > 付款截止日期 > 状态 > 逾期天数 > 创建时间 > 操作
This commit is contained in:
parent
db7a34f4f3
commit
a119826173
@ -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
|
||||
Loading…
x
Reference in New Issue
Block a user