fix:收入合同的编辑功能实现
This commit is contained in:
parent
ae29bb661f
commit
f870f50be0
|
@ -225,7 +225,3 @@ export default {
|
|||
requestRaw,
|
||||
download,
|
||||
}
|
||||
|
||||
export const updateContract = (contractId, contractData) => {
|
||||
return http.put(`/contract/${contractId}`, contractData)
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -1,25 +1,25 @@
|
|||
<template>
|
||||
<GiPageLayout>
|
||||
<GiTable
|
||||
row-key="id"
|
||||
title="收入合同管理"
|
||||
:data="dataList"
|
||||
:columns="tableColumns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
|
||||
:pagination="pagination"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
@refresh="search"
|
||||
row-key="id"
|
||||
title="收入合同管理"
|
||||
:data="dataList"
|
||||
:columns="tableColumns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
|
||||
:pagination="pagination"
|
||||
@page-change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #top>
|
||||
<GiForm
|
||||
v-model="searchForm"
|
||||
search
|
||||
:columns="queryFormColumns"
|
||||
size="medium"
|
||||
@search="search"
|
||||
@reset="reset"
|
||||
v-model="searchForm"
|
||||
search
|
||||
:columns="queryFormColumns"
|
||||
size="medium"
|
||||
@search="search"
|
||||
@reset="reset"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
@ -53,36 +53,53 @@
|
|||
<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 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-link v-if="record.contractStatus !== '已签署' && record.contractStatus !== '已完成'" @click="deleteContract(record)">删除</a-link>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<!-- 合同详情弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="showDetailModal"
|
||||
title="合同详情"
|
||||
:width="800"
|
||||
@cancel="closeDetailModal"
|
||||
:footer="false"
|
||||
v-model:visible="showDetailModal"
|
||||
title="合同详情"
|
||||
:width="800"
|
||||
:footer="false"
|
||||
@cancel="closeDetailModal"
|
||||
>
|
||||
<ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<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 type { TableColumnData } from '@arco-design/web-vue'
|
||||
import http from '@/utils/http'
|
||||
import ContractEdit from './ContractEdit.vue'
|
||||
|
||||
import ContractDetail from './ContractDetail.vue'
|
||||
import http from '@/utils/http'
|
||||
|
||||
// 接口数据类型定义
|
||||
interface ContractItem {
|
||||
|
@ -181,7 +198,6 @@ const tableColumns: TableColumnData[] = [
|
|||
{ title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
|
||||
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' },
|
||||
]
|
||||
|
||||
// 数据状态
|
||||
const loading = ref(false)
|
||||
const dataList = ref<ContractItem[]>([])
|
||||
|
@ -297,6 +313,108 @@ const exportContract = () => {
|
|||
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 selectedContractId = ref<string | null>(null)
|
||||
|
@ -311,10 +429,6 @@ const closeDetailModal = () => {
|
|||
selectedContractId.value = null
|
||||
}
|
||||
|
||||
const editRecord = (record: ContractItem) => {
|
||||
Message.info(`编辑合同: ${record.projectName}`)
|
||||
}
|
||||
|
||||
const approveContract = (record: ContractItem) => {
|
||||
Message.info(`审批合同: ${record.projectName}`)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue