Industrial-image-management-system---web/src/views/project-management/contract/revenue-contract/ContractEdit.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>