fix:收入合同的详情以及显示，以及完成和后端api的调用。
This commit is contained in:
Maple
parent
0d515ab87f
commit
348c0396eb
|
|
@ -69,6 +69,6 @@ declare global {
|
|||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -225,3 +225,7 @@ export default {
|
|||
requestRaw,
|
||||
download,
|
||||
}
|
||||
|
||||
export const updateContract = (contractId, contractData) => {
|
||||
return http.put(`/contract/${contractId}`, contractData)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<a-spin :loading="loading">
|
||||
<div v-if="contractDetail">
|
||||
<a-descriptions
|
||||
:column="1"
|
||||
size="medium"
|
||||
:label-style="{ width: '120px' }"
|
||||
>
|
||||
<a-descriptions-item label="合同编号">
|
||||
{{ contractDetail.code }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="项目名称">
|
||||
{{ contractDetail.projectName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="客户名称">
|
||||
{{ contractDetail.customer }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="合同金额">
|
||||
<span class="font-medium text-green-600">￥{{ (contractDetail.amount || 0).toLocaleString() }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="已收款金额">
|
||||
<span class="font-medium text-blue-600">￥{{ (contractDetail.receivedAmount || 0).toLocaleString() }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="未收款金额">
|
||||
<span class="font-medium text-orange-600">￥{{ (contractDetail.pendingAmount || 0).toLocaleString() }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="签署日期">
|
||||
{{ contractDetail.signDate }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="履约期限">
|
||||
{{ contractDetail.performanceDeadline }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="付款日期">
|
||||
{{ contractDetail.paymentDate }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="合同状态">
|
||||
<a-tag :color="getStatusColor(contractDetail.contractStatus)">
|
||||
{{ getStatusText(contractDetail.contractStatusLabel || contractDetail.contractStatus) }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="销售人员">
|
||||
{{ contractDetail.salespersonName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="销售部门">
|
||||
{{ contractDetail.salespersonDeptName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="产品服务">
|
||||
{{ contractDetail.productService }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="备注">
|
||||
{{ contractDetail.notes }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
<div v-else-if="!loading" class="empty-container">
|
||||
<a-empty description="暂无信息" />
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import http from '@/utils/http'
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
|
||||
interface ContractDetail {
|
||||
contractId: string
|
||||
customer: string
|
||||
code: string
|
||||
projectId: string
|
||||
type: string
|
||||
productService: string
|
||||
paymentDate: string | null
|
||||
performanceDeadline: string | null
|
||||
paymentAddress: string
|
||||
amount: number
|
||||
accountNumber: string
|
||||
notes: string
|
||||
contractStatus: string
|
||||
contractText: string | null
|
||||
projectName: string
|
||||
salespersonName: string | null
|
||||
salespersonDeptName: string
|
||||
settlementAmount: number | null
|
||||
receivedAmount: number | null
|
||||
contractStatusLabel: string | null
|
||||
createBy: string | null
|
||||
updateBy: string | null
|
||||
createTime: string
|
||||
updateTime: string
|
||||
page: number
|
||||
pageSize: number
|
||||
signDate: string
|
||||
duration: string
|
||||
pendingAmount?: number
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
contractId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const contractDetail = ref<ContractDetail | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
未确认: 'gray',
|
||||
待审批: 'orange',
|
||||
已签署: 'blue',
|
||||
执行中: 'cyan',
|
||||
已完成: 'green',
|
||||
已终止: 'red'
|
||||
}
|
||||
return colorMap[status] || 'gray'
|
||||
}
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
return status || '未知状态'
|
||||
}
|
||||
|
||||
const fetchContractDetail = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await http.get(`/contract/${props.contractId}`)
|
||||
if (response.code === 200) {
|
||||
contractDetail.value = response.data
|
||||
// 计算未收款金额
|
||||
if (contractDetail.value) {
|
||||
contractDetail.value.pendingAmount = (contractDetail.value.amount || 0) - (contractDetail.value.receivedAmount || 0)
|
||||
}
|
||||
} else {
|
||||
Message.error(response.msg || '获取合同详情失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取合同详情失败:', error)
|
||||
Message.error('获取合同详情失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchContractDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.empty-container {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,48 +38,93 @@
|
|||
|
||||
<!-- 合同状态 -->
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="getStatusColor(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
<a-tag :color="getStatusColor(record.contractStatus)">
|
||||
{{ getStatusText(record.contractStatusLabel || record.contractStatus) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<!-- 合同金额 -->
|
||||
<template #contractAmount="{ record }">
|
||||
<span class="font-medium text-green-600">￥{{ record.contractAmount.toLocaleString() }}万</span>
|
||||
<span class="font-medium text-green-600">￥{{ (record.amount || 0).toLocaleString() }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 已收款金额 -->
|
||||
<template #receivedAmount="{ record }">
|
||||
<span class="font-medium text-blue-600">￥{{ record.receivedAmount.toLocaleString() }}万</span>
|
||||
<span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link @click="viewDetail(record)">详情</a-link>
|
||||
<a-link @click="editRecord(record)" v-if="record.status === 'draft'">编辑</a-link>
|
||||
<a-link @click="approveContract(record)" v-if="record.status === 'pending'">审批</a-link>
|
||||
<a-link v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</a-link>
|
||||
<a-link v-if="record.contractStatus === '待审批'" @click="approveContract(record)">审批</a-link>
|
||||
<a-link @click="viewPayment(record)">收款记录</a-link>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<!-- 合同详情弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="showDetailModal"
|
||||
title="合同详情"
|
||||
:width="800"
|
||||
@cancel="closeDetailModal"
|
||||
:footer="false"
|
||||
>
|
||||
<ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
|
||||
</a-modal>
|
||||
</GiPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { Message, Modal } from '@arco-design/web-vue'
|
||||
import type { TableColumnData } from '@arco-design/web-vue'
|
||||
import http from '@/utils/http'
|
||||
import ContractDetail from './ContractDetail.vue'
|
||||
|
||||
// 接口数据类型定义
|
||||
interface ContractItem {
|
||||
contractId: string
|
||||
customer: string
|
||||
code: string
|
||||
projectId: string
|
||||
type: string
|
||||
productService: string
|
||||
paymentDate: string | null
|
||||
performanceDeadline: string | null
|
||||
paymentAddress: string
|
||||
amount: number
|
||||
accountNumber: string
|
||||
notes: string
|
||||
contractStatus: string
|
||||
contractText: string | null
|
||||
projectName: string
|
||||
salespersonName: string | null
|
||||
salespersonDeptName: string
|
||||
settlementAmount: number | null
|
||||
receivedAmount: number | null
|
||||
contractStatusLabel: string | null
|
||||
createBy: string | null
|
||||
updateBy: string | null
|
||||
createTime: string
|
||||
updateTime: string
|
||||
page: number
|
||||
pageSize: number
|
||||
signDate: string
|
||||
duration: string
|
||||
}
|
||||
|
||||
// 搜索表单
|
||||
let searchForm = reactive({
|
||||
const searchForm = reactive({
|
||||
contractName: '',
|
||||
contractCode: '',
|
||||
client: '',
|
||||
status: '',
|
||||
signDate: '',
|
||||
page: 1,
|
||||
size: 10
|
||||
size: 10,
|
||||
})
|
||||
|
||||
// 查询条件配置
|
||||
|
|
@ -89,16 +134,16 @@ const queryFormColumns = [
|
|||
label: '合同名称',
|
||||
type: 'input' as const,
|
||||
props: {
|
||||
placeholder: '请输入合同名称'
|
||||
}
|
||||
placeholder: '请输入合同名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'client',
|
||||
label: '客户',
|
||||
type: 'input' as const,
|
||||
props: {
|
||||
placeholder: '请输入客户名称'
|
||||
}
|
||||
placeholder: '请输入客户名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
|
|
@ -107,132 +152,111 @@ const queryFormColumns = [
|
|||
props: {
|
||||
placeholder: '请选择合同状态',
|
||||
options: [
|
||||
{ label: '草稿', value: 'draft' },
|
||||
{ label: '待审批', value: 'pending' },
|
||||
{ label: '已签署', value: 'signed' },
|
||||
{ label: '执行中', value: 'executing' },
|
||||
{ label: '已完成', value: 'completed' },
|
||||
{ label: '已终止', value: 'terminated' }
|
||||
]
|
||||
}
|
||||
}
|
||||
{ label: '未确认', value: '未确认' },
|
||||
{ label: '待审批', value: '待审批' },
|
||||
{ label: '已签署', value: '已签署' },
|
||||
{ label: '执行中', value: '执行中' },
|
||||
{ label: '已完成', value: '已完成' },
|
||||
{ label: '已终止', value: '已终止' },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns: TableColumnData[] = [
|
||||
{ title: '合同编号', dataIndex: 'contractCode', width: 150 },
|
||||
{ title: '合同名称', dataIndex: 'contractName', width: 250, ellipsis: true, tooltip: true },
|
||||
{ title: '客户名称', dataIndex: 'client', width: 200, ellipsis: true, tooltip: true },
|
||||
{ title: '合同金额', dataIndex: 'contractAmount', slotName: 'contractAmount', width: 120 },
|
||||
{ title: '合同编号', dataIndex: 'code', width: 150 },
|
||||
{ title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
|
||||
{ title: '客户名称', dataIndex: 'customer', width: 200, ellipsis: true, tooltip: true },
|
||||
{ title: '合同金额', dataIndex: 'amount', slotName: 'contractAmount', width: 120 },
|
||||
{ title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
|
||||
{ title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
|
||||
{ title: '签署日期', dataIndex: 'signDate', width: 120 },
|
||||
{ title: '开始日期', dataIndex: 'startDate', width: 120 },
|
||||
{ title: '结束日期', dataIndex: 'endDate', width: 120 },
|
||||
{ title: '合同状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
||||
{ title: '项目经理', dataIndex: 'projectManager', width: 100 },
|
||||
{ title: '销售经理', dataIndex: 'salesManager', width: 100 },
|
||||
{ title: '完成进度', dataIndex: 'progress', width: 100 },
|
||||
{ title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
|
||||
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' }
|
||||
{ title: '履约期限', dataIndex: 'performanceDeadline', width: 120 },
|
||||
{ title: '付款日期', dataIndex: 'paymentDate', width: 120 },
|
||||
{ title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 100 },
|
||||
{ title: '销售人员', dataIndex: 'salespersonName', width: 100 },
|
||||
{ title: '销售部门', dataIndex: 'salespersonDeptName', width: 100 },
|
||||
{ title: '产品服务', dataIndex: 'productService', width: 120, ellipsis: true, tooltip: true },
|
||||
{ title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
|
||||
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' },
|
||||
]
|
||||
|
||||
// 数据状态
|
||||
const loading = ref(false)
|
||||
const dataList = ref([
|
||||
{
|
||||
id: 1,
|
||||
contractCode: 'RC2024001',
|
||||
contractName: '华能新能源风电场叶片检测服务合同',
|
||||
client: '华能新能源股份有限公司',
|
||||
contractAmount: 320,
|
||||
receivedAmount: 192,
|
||||
pendingAmount: 128,
|
||||
signDate: '2024-02-20',
|
||||
startDate: '2024-03-01',
|
||||
endDate: '2024-04-30',
|
||||
status: 'executing',
|
||||
projectManager: '张项目经理',
|
||||
salesManager: '李销售经理',
|
||||
progress: '60%',
|
||||
remark: '项目进展顺利，客户满意度高'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
contractCode: 'RC2024002',
|
||||
contractName: '大唐风电场防雷检测项目合同',
|
||||
client: '大唐新能源股份有限公司',
|
||||
contractAmount: 268,
|
||||
receivedAmount: 134,
|
||||
pendingAmount: 134,
|
||||
signDate: '2024-02-25',
|
||||
startDate: '2024-03-05',
|
||||
endDate: '2024-04-20',
|
||||
status: 'executing',
|
||||
projectManager: '王项目经理',
|
||||
salesManager: '赵销售经理',
|
||||
progress: '45%',
|
||||
remark: '按计划执行中'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
contractCode: 'RC2024003',
|
||||
contractName: '中广核风电场设备维护服务合同',
|
||||
client: '中广核新能源投资有限公司',
|
||||
contractAmount: 450,
|
||||
receivedAmount: 450,
|
||||
pendingAmount: 0,
|
||||
signDate: '2024-01-15',
|
||||
startDate: '2024-01-20',
|
||||
endDate: '2024-01-31',
|
||||
status: 'completed',
|
||||
projectManager: '刘项目经理',
|
||||
salesManager: '孙销售经理',
|
||||
progress: '100%',
|
||||
remark: '项目已完成，客户验收通过'
|
||||
const dataList = ref<ContractItem[]>([])
|
||||
|
||||
// API调用函数
|
||||
const fetchContractList = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
page: searchForm.page,
|
||||
pageSize: searchForm.size,
|
||||
contractName: searchForm.contractName,
|
||||
code: searchForm.contractCode,
|
||||
customer: searchForm.client,
|
||||
contractStatus: searchForm.status,
|
||||
signDate: searchForm.signDate,
|
||||
}
|
||||
])
|
||||
|
||||
const response = await http.get('/contract/list', params)
|
||||
|
||||
if (response.code === 200) {
|
||||
// 过滤出类型为"收入合同"的数据
|
||||
const allContracts = response.rows || []
|
||||
const revenueContracts = allContracts.filter((item: ContractItem) => item.type === '收入合同')
|
||||
|
||||
// 计算未收款金额
|
||||
dataList.value = revenueContracts.map((item: ContractItem) => ({
|
||||
...item,
|
||||
pendingAmount: (item.amount || 0) - (item.receivedAmount || 0),
|
||||
}))
|
||||
|
||||
pagination.total = Number.parseInt(response.total) || 0
|
||||
} else {
|
||||
Message.error(response.msg || '获取合同列表失败')
|
||||
dataList.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取合同列表失败:', error)
|
||||
Message.error('获取合同列表失败')
|
||||
dataList.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 3,
|
||||
total: 0,
|
||||
showTotal: true,
|
||||
showPageSize: true
|
||||
showPageSize: true,
|
||||
})
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
'draft': 'gray',
|
||||
'pending': 'orange',
|
||||
'signed': 'blue',
|
||||
'executing': 'cyan',
|
||||
'completed': 'green',
|
||||
'terminated': 'red'
|
||||
未确认: 'gray',
|
||||
待审批: 'orange',
|
||||
已签署: 'blue',
|
||||
执行中: 'cyan',
|
||||
已完成: 'green',
|
||||
已终止: 'red',
|
||||
}
|
||||
return colorMap[status] || 'gray'
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status: string) => {
|
||||
const textMap: Record<string, string> = {
|
||||
'draft': '草稿',
|
||||
'pending': '待审批',
|
||||
'signed': '已签署',
|
||||
'executing': '执行中',
|
||||
'completed': '已完成',
|
||||
'terminated': '已终止'
|
||||
}
|
||||
return textMap[status] || status
|
||||
// 直接返回后端返回的状态文本，如果有contractStatusLabel则使用，否则使用contractStatus
|
||||
return status || '未知状态'
|
||||
}
|
||||
|
||||
// 搜索和重置
|
||||
const search = async () => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
await fetchContractList()
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
|
|
@ -243,7 +267,7 @@ const reset = () => {
|
|||
status: '',
|
||||
signDate: '',
|
||||
page: 1,
|
||||
size: 10
|
||||
size: 10,
|
||||
})
|
||||
pagination.current = 1
|
||||
search()
|
||||
|
|
@ -273,23 +297,33 @@ const exportContract = () => {
|
|||
Message.info('导出合同功能开发中...')
|
||||
}
|
||||
|
||||
const viewDetail = (record: any) => {
|
||||
Message.info(`查看合同详情: ${record.contractName}`)
|
||||
// 显示合同详情弹窗
|
||||
const showDetailModal = ref(false)
|
||||
const selectedContractId = ref<string | null>(null)
|
||||
|
||||
const viewDetail = (record: ContractItem) => {
|
||||
selectedContractId.value = record.contractId
|
||||
showDetailModal.value = true
|
||||
}
|
||||
|
||||
const editRecord = (record: any) => {
|
||||
Message.info(`编辑合同: ${record.contractName}`)
|
||||
const closeDetailModal = () => {
|
||||
showDetailModal.value = false
|
||||
selectedContractId.value = null
|
||||
}
|
||||
|
||||
const approveContract = (record: any) => {
|
||||
Message.info(`审批合同: ${record.contractName}`)
|
||||
const editRecord = (record: ContractItem) => {
|
||||
Message.info(`编辑合同: ${record.projectName}`)
|
||||
}
|
||||
|
||||
const viewPayment = (record: any) => {
|
||||
Message.info(`查看收款记录: ${record.contractName}`)
|
||||
const approveContract = (record: ContractItem) => {
|
||||
Message.info(`审批合同: ${record.projectName}`)
|
||||
}
|
||||
|
||||
const viewPayment = (record: ContractItem) => {
|
||||
Message.info(`查看收款记录: ${record.projectName}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
search()
|
||||
fetchContractList()
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue