From 16743cfc7f885acdff70e08f20ddb7795d638a83 Mon Sep 17 00:00:00 2001
From: Maple <869445424@qq.com>
Date: Fri, 8 Aug 2025 17:59:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=94=AF=E5=87=BA=E5=90=88=E5=90=8C?=
 =?UTF-8?q?=E7=9A=84=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auto-imports.d.ts                   |   2 +-
 .../expense-contract/ContractDetail.vue       | 155 ++++++
 .../expense-contract/ContractEdit.vue         | 122 +++++
 .../contract/expense-contract/index.vue       | 456 ++++++++++++------
 4 files changed, 578 insertions(+), 157 deletions(-)
 create mode 100644 src/views/project-management/contract/expense-contract/ContractDetail.vue
 create mode 100644 src/views/project-management/contract/expense-contract/ContractEdit.vue

diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 369aad4..eab6be6 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -70,6 +70,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')
 }
diff --git a/src/views/project-management/contract/expense-contract/ContractDetail.vue b/src/views/project-management/contract/expense-contract/ContractDetail.vue
new file mode 100644
index 0000000..dbba383
--- /dev/null
+++ b/src/views/project-management/contract/expense-contract/ContractDetail.vue
@@ -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>
diff --git a/src/views/project-management/contract/expense-contract/ContractEdit.vue b/src/views/project-management/contract/expense-contract/ContractEdit.vue
new file mode 100644
index 0000000..4ced636
--- /dev/null
+++ b/src/views/project-management/contract/expense-contract/ContractEdit.vue
@@ -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>
diff --git a/src/views/project-management/contract/expense-contract/index.vue b/src/views/project-management/contract/expense-contract/index.vue
index 871f4c1..a0c3eaf 100644
--- a/src/views/project-management/contract/expense-contract/index.vue
+++ b/src/views/project-management/contract/expense-contract/index.vue
@@ -1,28 +1,28 @@
 <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"
+        <GiForm
+            v-model="searchForm"
+            search
+            :columns="queryFormColumns"
+            size="medium"
+            @search="search"
+            @reset="reset"
         />
       </template>
-      
+
       <template #toolbar-left>
         <a-space>
           <a-button type="primary" @click="openAddModal">
@@ -35,51 +35,113 @@
           </a-button>
         </a-space>
       </template>
-      
+
       <!-- 合同状态 -->
       <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-red-600">￥{{ record.contractAmount.toLocaleString() }}万</span>
+        <span class="font-medium text-green-600">￥{{ (record.amount || 0).toLocaleString() }}</span>
       </template>
-      
-      <!-- 已付款金额 -->
-      <template #paidAmount="{ record }">
-        <span class="font-medium text-orange-600">￥{{ record.paidAmount.toLocaleString() }}万</span>
+
+      <!-- 已收款金额 -->
+      <template #receivedAmount="{ record }">
+        <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 @click="viewPayment(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"
+        :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 { Message } from '@arco-design/web-vue'
+import { onMounted, reactive, ref } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
+import ContractEdit from './ContractEdit.vue'
+
+import ContractDetail from './ContractDetail.vue'
+import http from '@/utils/http'
+
+// 接口数据类型定义
+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: '',
-  supplier: '',
+  client: '',
   status: '',
   signDate: '',
   page: 1,
-  size: 10
+  size: 10,
 })
 
 // 查询条件配置
@@ -89,16 +151,16 @@ const queryFormColumns = [
     label: '合同名称',
     type: 'input' as const,
     props: {
-      placeholder: '请输入合同名称'
-    }
+      placeholder: '请输入合同名称',
+    },
   },
   {
-    field: 'supplier',
-    label: '供应商',
+    field: 'client',
+    label: '客户',
     type: 'input' as const,
     props: {
-      placeholder: '请输入供应商名称'
-    }
+      placeholder: '请输入客户名称',
+    },
   },
   {
     field: 'status',
@@ -107,147 +169,121 @@ 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: 'supplier', width: 200, ellipsis: true, tooltip: true },
-  { title: '合同类型', dataIndex: 'contractType', width: 120 },
-  { title: '合同金额', dataIndex: 'contractAmount', slotName: 'contractAmount', width: 120 },
-  { title: '已付款金额', dataIndex: 'paidAmount', slotName: 'paidAmount', width: 120 },
-  { title: '未付款金额', dataIndex: 'unpaidAmount', 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: 'relatedProject', width: 200, ellipsis: true, tooltip: true },
-  { title: '采购负责人', dataIndex: 'purchaseManager', width: 100 },
-  { title: '付款方式', dataIndex: 'paymentMethod', 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: 'EC2024001',
-    contractName: '风电检测设备采购合同',
-    supplier: '深圳市智能检测设备有限公司',
-    contractType: '设备采购',
-    contractAmount: 120,
-    paidAmount: 60,
-    unpaidAmount: 60,
-    signDate: '2024-02-25',
-    startDate: '2024-03-01',
-    endDate: '2024-03-31',
-    status: 'executing',
-    relatedProject: '华能新能源风电场叶片检测服务项目',
-    purchaseManager: '李采购经理',
-    paymentMethod: '银行转账',
-    remark: '按合同约定分期付款'
-  },
-  {
-    id: 2,
-    contractCode: 'EC2024002',
-    contractName: '无人机检测服务外包合同',
-    supplier: '北京航天无人机技术有限公司',
-    contractType: '服务外包',
-    contractAmount: 85,
-    paidAmount: 25.5,
-    unpaidAmount: 59.5,
-    signDate: '2024-03-02',
-    startDate: '2024-03-05',
-    endDate: '2024-04-05',
-    status: 'executing',
-    relatedProject: '大唐风电场防雷检测项目',
-    purchaseManager: '王采购经理',
-    paymentMethod: '分期付款',
-    remark: '服务外包，按进度付款'
-  },
-  {
-    id: 3,
-    contractCode: 'EC2024003',
-    contractName: '检测车辆租赁合同',
-    supplier: '上海专业车辆租赁有限公司',
-    contractType: '车辆租赁',
-    contractAmount: 15,
-    paidAmount: 15,
-    unpaidAmount: 0,
-    signDate: '2024-01-20',
-    startDate: '2024-01-25',
-    endDate: '2024-02-25',
-    status: 'completed',
-    relatedProject: '中广核风电场设备维护服务项目',
-    purchaseManager: '刘采购经理',
-    paymentMethod: '月付',
-    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 = () => {
   Object.assign(searchForm, {
     contractName: '',
     contractCode: '',
-    supplier: '',
+    client: '',
     status: '',
     signDate: '',
     page: 1,
-    size: 10
+    size: 10,
   })
   pagination.current = 1
   search()
@@ -277,23 +313,131 @@ const exportContract = () => {
   Message.info('导出合同功能开发中...')
 }
 
-const viewDetail = (record: any) => {
-  Message.info(`查看合同详情: ${record.contractName}`)
+// 显示合同编辑弹窗
+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 editRecord = (record: any) => {
-  Message.info(`编辑合同: ${record.contractName}`)
+const closeEditModal = () => {
+  showEditModal.value = false
+  selectedContractData.value = null
+  editedContractData.value = null
 }
 
-const approveContract = (record: any) => {
-  Message.info(`审批合同: ${record.contractName}`)
+const handleContractDataUpdate = (data: ContractItem) => {
+  editedContractData.value = data
 }
 
-const viewPayment = (record: any) => {
-  Message.info(`查看付款记录: ${record.contractName}`)
+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)
+
+const viewDetail = (record: ContractItem) => {
+  selectedContractId.value = record.contractId
+  showDetailModal.value = true
+}
+
+const closeDetailModal = () => {
+  showDetailModal.value = false
+  selectedContractId.value = null
+}
+
+const approveContract = (record: ContractItem) => {
+  Message.info(`审批合同: ${record.projectName}`)
+}
+
+const viewPayment = (record: ContractItem) => {
+  Message.info(`查看收款记录: ${record.projectName}`)
 }
 
 onMounted(() => {
-  search()
+  fetchContractList()
 })
-</script> 
\ No newline at end of file
+</script>