fix:收入合同的详情以及显示，以及完成和后端api的调用。

src/types/auto-imports.d.ts

@@ -69,6 +69,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')
 }

src/utils/http.ts

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

src/views/project-management/contract/revenue-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>

src/views/project-management/contract/revenue-contract/index.vue

@@ -1,25 +1,25 @@
 <template>
   <GiPageLayout>
     <GiTable
-      row-key="id"
+        row-key="id"
-      title="收入合同管理"
+        title="收入合同管理"
-      :data="dataList"
+        :data="dataList"
-      :columns="tableColumns"
+        :columns="tableColumns"
-      :loading="loading"
+        :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
-      :pagination="pagination"
+        :pagination="pagination"
-      @page-change="onPageChange"
+        @page-change="onPageChange"
-      @page-size-change="onPageSizeChange"
+        @page-size-change="onPageSizeChange"
-      @refresh="search"
+        @refresh="search"
     >
       <template #top>
         <GiForm
-          v-model="searchForm" 
+            v-model="searchForm"
-          search 
+            search
-          :columns="queryFormColumns" 
+            :columns="queryFormColumns"
-          size="medium" 
+            size="medium"
-          @search="search" 
+            @search="search"
-          @reset="reset"
+            @reset="reset"
         />
       </template>
 
@@ -38,48 +38,93 @@
 
       <!-- 合同状态 -->
       <template #status="{ record }">
-        <a-tag :color="getStatusColor(record.status)">
+        <a-tag :color="getStatusColor(record.contractStatus)">
-          {{ getStatusText(record.status) }}
+          {{ getStatusText(record.contractStatusLabel || record.contractStatus) }}
         </a-tag>
       </template>
 
       <!-- 合同金额 -->
       <template #contractAmount="{ record }">
-        <span class="font-medium text-green-600">￥{{ record.contractAmount.toLocaleString() }}万</span>
+        <span class="font-medium text-green-600">￥{{ (record.amount || 0).toLocaleString() }}</span>
       </template>
 
       <!-- 已收款金额 -->
       <template #receivedAmount="{ record }">
-        <span class="font-medium text-blue-600">￥{{ record.receivedAmount.toLocaleString() }}万</span>
+        <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 v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</a-link>
-          <a-link @click="approveContract(record)" v-if="record.status === 'pending'">审批</a-link>
+          <a-link v-if="record.contractStatus === '待审批'" @click="approveContract(record)">审批</a-link>
           <a-link @click="viewPayment(record)">收款记录</a-link>
         </a-space>
       </template>
     </GiTable>
+
+    <!-- 合同详情弹窗 -->
+    <a-modal
+        v-model:visible="showDetailModal"
+        title="合同详情"
+        :width="800"
+        @cancel="closeDetailModal"
+        :footer="false"
+    >
+      <ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
+    </a-modal>
   </GiPageLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { Message } from '@arco-design/web-vue'
+import { Message, Modal } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
+import http from '@/utils/http'
+import ContractDetail from './ContractDetail.vue'
+
+// 接口数据类型定义
+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: '',
   client: '',
   status: '',
   signDate: '',
   page: 1,
-  size: 10
+  size: 10,
 })
 
 // 查询条件配置
@@ -89,16 +134,16 @@ const queryFormColumns = [
     label: '合同名称',
     type: 'input' as const,
     props: {
-      placeholder: '请输入合同名称'
+      placeholder: '请输入合同名称',
-    }
+    },
   },
   {
     field: 'client',
     label: '客户',
     type: 'input' as const,
     props: {
-      placeholder: '请输入客户名称'
+      placeholder: '请输入客户名称',
-    }
+    },
   },
   {
     field: 'status',
@@ -107,132 +152,111 @@ const queryFormColumns = [
     props: {
       placeholder: '请选择合同状态',
       options: [
-        { label: '草稿', value: 'draft' },
+        { label: '未确认', value: '未确认' },
-        { label: '待审批', value: 'pending' },
+        { label: '待审批', value: '待审批' },
-        { label: '已签署', value: 'signed' },
+        { label: '已签署', value: '已签署' },
-        { label: '执行中', value: 'executing' },
+        { label: '执行中', value: '执行中' },
-        { label: '已完成', value: 'completed' },
+        { label: '已完成', value: '已完成' },
-        { label: '已终止', value: 'terminated' }
+        { label: '已终止', value: '已终止' },
-      ]
+      ],
-    }
+    },
-  }
+  },
 ]
 
 // 表格列配置
 const tableColumns: TableColumnData[] = [
-  { title: '合同编号', dataIndex: 'contractCode', width: 150 },
+  { title: '合同编号', dataIndex: 'code', width: 150 },
-  { title: '合同名称', dataIndex: 'contractName', width: 250, ellipsis: true, tooltip: true },
+  { title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
-  { title: '客户名称', dataIndex: 'client', width: 200, ellipsis: true, tooltip: true },
+  { title: '客户名称', dataIndex: 'customer', width: 200, ellipsis: true, tooltip: true },
-  { title: '合同金额', dataIndex: 'contractAmount', slotName: 'contractAmount', width: 120 },
+  { 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: 'performanceDeadline', width: 120 },
-  { title: '结束日期', dataIndex: 'endDate', width: 120 },
+  { title: '付款日期', dataIndex: 'paymentDate', width: 120 },
-  { title: '合同状态', dataIndex: 'status', slotName: 'status', width: 100 },
+  { title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 100 },
-  { title: '项目经理', dataIndex: 'projectManager', width: 100 },
+  { title: '销售人员', dataIndex: 'salespersonName', width: 100 },
-  { title: '销售经理', dataIndex: 'salesManager', width: 100 },
+  { title: '销售部门', dataIndex: 'salespersonDeptName', width: 100 },
-  { title: '完成进度', dataIndex: 'progress', width: 100 },
+  { title: '产品服务', dataIndex: 'productService', width: 120, ellipsis: true, tooltip: true },
-  { title: '备注', dataIndex: 'remark', 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 dataList = ref([
+const dataList = ref<ContractItem[]>([])
-  {
+
-    id: 1,
+// API调用函数
-    contractCode: 'RC2024001',
+const fetchContractList = async () => {
-    contractName: '华能新能源风电场叶片检测服务合同',
+  try {
-    client: '华能新能源股份有限公司',
+    loading.value = true
-    contractAmount: 320,
+    const params = {
-    receivedAmount: 192,
+      page: searchForm.page,
-    pendingAmount: 128,
+      pageSize: searchForm.size,
-    signDate: '2024-02-20',
+      contractName: searchForm.contractName,
-    startDate: '2024-03-01',
+      code: searchForm.contractCode,
-    endDate: '2024-04-30',
+      customer: searchForm.client,
-    status: 'executing',
+      contractStatus: searchForm.status,
-    projectManager: '张项目经理',
+      signDate: searchForm.signDate,
-    salesManager: '李销售经理',
+    }
-    progress: '60%',
+
-    remark: '项目进展顺利，客户满意度高'
+    const response = await http.get('/contract/list', params)
-  },
+
-  {
+    if (response.code === 200) {
-    id: 2,
+      // 过滤出类型为"收入合同"的数据
-    contractCode: 'RC2024002',
+      const allContracts = response.rows || []
-    contractName: '大唐风电场防雷检测项目合同',
+      const revenueContracts = allContracts.filter((item: ContractItem) => item.type === '收入合同')
-    client: '大唐新能源股份有限公司',
+
-    contractAmount: 268,
+      // 计算未收款金额
-    receivedAmount: 134,
+      dataList.value = revenueContracts.map((item: ContractItem) => ({
-    pendingAmount: 134,
+        ...item,
-    signDate: '2024-02-25',
+        pendingAmount: (item.amount || 0) - (item.receivedAmount || 0),
-    startDate: '2024-03-05',
+      }))
-    endDate: '2024-04-20',
+
-    status: 'executing',
+      pagination.total = Number.parseInt(response.total) || 0
-    projectManager: '王项目经理',
+    } else {
-    salesManager: '赵销售经理',
+      Message.error(response.msg || '获取合同列表失败')
-    progress: '45%',
+      dataList.value = []
-    remark: '按计划执行中'
+    }
-  },
+  } catch (error) {
-  {
+    console.error('获取合同列表失败:', error)
-    id: 3,
+    Message.error('获取合同列表失败')
-    contractCode: 'RC2024003',
+    dataList.value = []
-    contractName: '中广核风电场设备维护服务合同',
+  } finally {
-    client: '中广核新能源投资有限公司',
+    loading.value = false
-    contractAmount: 450,
-    receivedAmount: 450,
-    pendingAmount: 0,
-    signDate: '2024-01-15',
-    startDate: '2024-01-20',
-    endDate: '2024-01-31',
-    status: 'completed',
-    projectManager: '刘项目经理',
-    salesManager: '孙销售经理',
-    progress: '100%',
-    remark: '项目已完成，客户验收通过'
   }
-])
+}
 
 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',
+    未确认: 'gray',
-    'pending': 'orange',
+    待审批: 'orange',
-    'signed': 'blue',
+    已签署: 'blue',
-    'executing': 'cyan',
+    执行中: 'cyan',
-    'completed': 'green',
+    已完成: 'green',
-    'terminated': 'red'
+    已终止: 'red',
   }
   return colorMap[status] || 'gray'
 }
 
 // 获取状态文本
 const getStatusText = (status: string) => {
-  const textMap: Record<string, string> = {
+  // 直接返回后端返回的状态文本，如果有contractStatusLabel则使用，否则使用contractStatus
-    'draft': '草稿',
+  return status || '未知状态'
-    'pending': '待审批',
-    'signed': '已签署',
-    'executing': '执行中',
-    'completed': '已完成',
-    'terminated': '已终止'
-  }
-  return textMap[status] || status
 }
 
 // 搜索和重置
 const search = async () => {
-  loading.value = true
+  await fetchContractList()
-  setTimeout(() => {
-    loading.value = false
-  }, 1000)
 }
 
 const reset = () => {
@@ -243,7 +267,7 @@ const reset = () => {
     status: '',
     signDate: '',
     page: 1,
-    size: 10
+    size: 10,
   })
   pagination.current = 1
   search()
@@ -273,23 +297,33 @@ const exportContract = () => {
   Message.info('导出合同功能开发中...')
 }
 
-const viewDetail = (record: any) => {
+// 显示合同详情弹窗
-  Message.info(`查看合同详情: ${record.contractName}`)
+const showDetailModal = ref(false)
+const selectedContractId = ref<string | null>(null)
+
+const viewDetail = (record: ContractItem) => {
+  selectedContractId.value = record.contractId
+  showDetailModal.value = true
 }
 
-const editRecord = (record: any) => {
+const closeDetailModal = () => {
-  Message.info(`编辑合同: ${record.contractName}`)
+  showDetailModal.value = false
+  selectedContractId.value = null
 }
 
-const approveContract = (record: any) => {
+const editRecord = (record: ContractItem) => {
-  Message.info(`审批合同: ${record.contractName}`)
+  Message.info(`编辑合同: ${record.projectName}`)
 }
 
-const viewPayment = (record: any) => {
+const approveContract = (record: ContractItem) => {
-  Message.info(`查看收款记录: ${record.contractName}`)
+  Message.info(`审批合同: ${record.projectName}`)
+}
+
+const viewPayment = (record: ContractItem) => {
+  Message.info(`查看收款记录: ${record.projectName}`)
 }
 
 onMounted(() => {
-  search()
+  fetchContractList()
 })
 </script>