123 lines
3.6 KiB
Vue
123 lines
3.6 KiB
Vue
<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>
|