fix:收入合同的编辑功能实现

This commit is contained in:
Maple 2025-08-08 15:51:17 +08:00
parent ae29bb661f
commit f870f50be0
3 changed files with 265 additions and 33 deletions

View File

@ -225,7 +225,3 @@ export default {
requestRaw, requestRaw,
download, download,
} }
export const updateContract = (contractId, contractData) => {
return http.put(`/contract/${contractId}`, contractData)
}

View File

@ -0,0 +1,122 @@
<template>
<a-form :model="contractData" layout="vertical">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item field="code" label="合同编号">
<a-input v-model="contractData.code" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="projectName" label="项目名称">
<a-input v-model="contractData.projectName" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item field="customer" label="客户名称">
<a-input v-model="contractData.customer" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="amount" label="合同金额">
<a-input-number v-model="contractData.amount" style="width: 100%" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item field="accountNumber" label="收款账号">
<a-input v-model="contractData.accountNumber" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="contractStatus" label="合同状态">
<a-select v-model="contractData.contractStatus">
<a-option value="未确认">未确认</a-option>
<a-option value="待审批">待审批</a-option>
<a-option value="已签署">已签署</a-option>
<a-option value="执行中">执行中</a-option>
<a-option value="已完成">已完成</a-option>
<a-option value="已终止">已终止</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item field="signDate" label="签订日期">
<a-date-picker v-model="contractData.signDate" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="performanceDeadline" label="履约期限">
<a-date-picker v-model="contractData.performanceDeadline" style="width: 100%" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item field="paymentDate" label="付款日期">
<a-date-picker v-model="contractData.paymentDate" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="productService" label="产品或服务">
<a-input v-model="contractData.productService" />
</a-form-item>
</a-col>
</a-row>
<a-form-item field="paymentAddress" label="付款地址">
<a-input v-model="contractData.paymentAddress" />
</a-form-item>
<a-form-item field="notes" label="备注">
<a-textarea v-model="contractData.notes" />
</a-form-item>
<a-form-item field="contractText" label="合同内容">
<a-textarea v-model="contractData.contractText" />
</a-form-item>
</a-form>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import type { ContractItem } from './index.vue'
const props = defineProps<{
contractData: ContractItem
}>()
const emit = defineEmits<{
(e: 'update:contractData', data: ContractItem): void
}>()
const contractData = ref({ ...props.contractData })
// props
watch(
() => props.contractData,
(newVal) => {
if (newVal) {
contractData.value = { ...newVal }
}
},
{ immediate: true },
)
//
watch(
contractData,
(newVal) => {
emit('update:contractData', newVal)
},
{ deep: true },
)
</script>

View File

@ -53,13 +53,13 @@
<span class="font-medium text-blue-600">{{ (record.receivedAmount || 0).toLocaleString() }}</span> <span class="font-medium text-blue-600">{{ (record.receivedAmount || 0).toLocaleString() }}</span>
</template> </template>
<!-- 操作列 -->
<template #action="{ record }"> <template #action="{ record }">
<a-space> <a-space>
<a-link @click="viewDetail(record)">详情</a-link> <a-link @click="viewDetail(record)">详情</a-link>
<a-link v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</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 v-if="record.contractStatus === '待审批'" @click="approveContract(record)">审批</a-link>
<a-link @click="viewPayment(record)">收款记录</a-link> <a-link @click="viewPayment(record)">收款记录</a-link>
<a-link v-if="record.contractStatus !== '已签署' && record.contractStatus !== '已完成'" @click="deleteContract(record)">删除</a-link>
</a-space> </a-space>
</template> </template>
</GiTable> </GiTable>
@ -69,20 +69,37 @@
v-model:visible="showDetailModal" v-model:visible="showDetailModal"
title="合同详情" title="合同详情"
:width="800" :width="800"
@cancel="closeDetailModal"
:footer="false" :footer="false"
@cancel="closeDetailModal"
> >
<ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" /> <ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
</a-modal> </a-modal>
<!-- 合同编辑弹窗 -->
<a-modal
v-model:visible="showEditModal"
title="编辑合同"
:width="800"
@cancel="closeEditModal"
@before-ok="handleEditSubmit"
>
<ContractEdit
v-if="showEditModal"
:contract-data="selectedContractData"
@update:contract-data="handleContractDataUpdate"
/>
</a-modal>
</GiPageLayout> </GiPageLayout>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from 'vue' import { onMounted, reactive, ref } from 'vue'
import { Message, Modal } from '@arco-design/web-vue' import { Message, Modal } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue' import type { TableColumnData } from '@arco-design/web-vue'
import http from '@/utils/http' import ContractEdit from './ContractEdit.vue'
import ContractDetail from './ContractDetail.vue' import ContractDetail from './ContractDetail.vue'
import http from '@/utils/http'
// //
interface ContractItem { interface ContractItem {
@ -181,7 +198,6 @@ const tableColumns: TableColumnData[] = [
{ title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true }, { title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' }, { title: '操作', slotName: 'action', width: 200, fixed: 'right' },
] ]
// //
const loading = ref(false) const loading = ref(false)
const dataList = ref<ContractItem[]>([]) const dataList = ref<ContractItem[]>([])
@ -297,6 +313,108 @@ const exportContract = () => {
Message.info('导出合同功能开发中...') Message.info('导出合同功能开发中...')
} }
//
const showEditModal = ref(false)
const selectedContractData = ref<ContractItem | null>(null)
const editedContractData = ref<ContractItem | null>(null)
const editRecord = (record: ContractItem) => {
//
const completeRecord = {
...record,
amount: record.amount || 0,
projectId: record.projectId || '',
type: record.type || '收入合同',
contractStatus: record.contractStatus || '未确认',
}
selectedContractData.value = completeRecord
showEditModal.value = true
}
const closeEditModal = () => {
showEditModal.value = false
selectedContractData.value = null
editedContractData.value = null
}
const handleContractDataUpdate = (data: ContractItem) => {
editedContractData.value = data
}
const handleEditSubmit = async () => {
if (!editedContractData.value) return false;
try {
const requestData = {
...editedContractData.value,
accountNumber: editedContractData.value.accountNumber || '',
amount: editedContractData.value.amount || 0,
code: editedContractData.value.code || '',
contractId: editedContractData.value.contractId,
contractStatus: editedContractData.value.contractStatus || '',
contractText: editedContractData.value.contractText || '',
customer: editedContractData.value.customer || '',
departmentId: editedContractData.value.departmentId || '',
duration: editedContractData.value.duration || '',
notes: editedContractData.value.notes || '',
paymentAddress: editedContractData.value.paymentAddress || '',
paymentDate: editedContractData.value.paymentDate || null,
performanceDeadline: editedContractData.value.performanceDeadline || null,
productService: editedContractData.value.productService || '',
projectId: editedContractData.value.projectId || '',
salespersonId: editedContractData.value.salespersonId || '',
signDate: editedContractData.value.signDate || null,
type: editedContractData.value.type || '',
};
console.log('Edited Contract Data:', requestData); // 便
// /contract PUT
const response = await http.put('/contract', requestData);
//
if (response.status === 200 && response.code === 200) {
Message.success('合同编辑成功');
closeEditModal();
search(); //
return true;
} else {
Message.error(response.msg || '合同编辑失败');
return false;
}
} catch (error) {
console.error('合同编辑失败:', error);
Message.error('合同编辑失败: ' + (error.message || '请稍后再试'));
return false;
}
}
//
const deleteContract = async (record: ContractItem) => {
try {
await Modal.confirm({
title: '确认删除',
content: `确定要删除合同 "${record.projectName}" 吗?`,
})
const response = await http.delete(`/contract/${record.contractId}`)
if (response.code === 200) {
Message.success('合同删除成功')
search() //
} else {
Message.error(response.msg || '合同删除失败')
}
} catch (error) {
//
if (error !== 'cancel') {
console.error('合同删除失败:', error)
Message.error('合同删除失败')
}
}
}
// //
const showDetailModal = ref(false) const showDetailModal = ref(false)
const selectedContractId = ref<string | null>(null) const selectedContractId = ref<string | null>(null)
@ -311,10 +429,6 @@ const closeDetailModal = () => {
selectedContractId.value = null selectedContractId.value = null
} }
const editRecord = (record: ContractItem) => {
Message.info(`编辑合同: ${record.projectName}`)
}
const approveContract = (record: ContractItem) => { const approveContract = (record: ContractItem) => {
Message.info(`审批合同: ${record.projectName}`) Message.info(`审批合同: ${record.projectName}`)
} }