Industrial-image-management-system---web/src/views/project-management/contract/expense-contract/index.vue

<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"
    >
      <template #top>
        <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">
            <template #icon><icon-plus /></template>
            <template #default>新建合同</template>
          </a-button>
          <a-button @click="exportContract">
            <template #icon><icon-download /></template>
            <template #default>导出合同</template>
          </a-button>
        </a-space>
      </template>

      <!-- 合同状态 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>

      <!-- 合同金额 -->
      <template #contractAmount="{ record }">
        <span class="font-medium text-red-600">￥{{ record.contractAmount.toLocaleString() }}万</span>
      </template>

      <!-- 已付款金额 -->
      <template #paidAmount="{ record }">
        <span class="font-medium text-orange-600">￥{{ record.paidAmount.toLocaleString() }}万</span>
      </template>

      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link v-if="record.status === 'draft'" @click="editRecord(record)">编辑</a-link>
          <a-link v-if="record.status === 'pending'" @click="approveContract(record)">审批</a-link>
          <a-link @click="viewPayment(record)">付款记录</a-link>
        </a-space>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 搜索表单
const searchForm = reactive({
  contractName: '',
  contractCode: '',
  supplier: '',
  status: '',
  signDate: '',
  page: 1,
  size: 10,
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'contractName',
    label: '合同名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入合同名称',
    },
  },
  {
    field: 'supplier',
    label: '供应商',
    type: 'input' as const,
    props: {
      placeholder: '请输入供应商名称',
    },
  },
  {
    field: 'status',
    label: '合同状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择合同状态',
      options: [
        { label: '草稿', value: 'draft' },
        { label: '待审批', value: 'pending' },
        { label: '已签署', value: 'signed' },
        { label: '执行中', value: 'executing' },
        { label: '已完成', value: 'completed' },
        { label: '已终止', value: 'terminated' },
      ],
    },
  },
]

// 表格列配置
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: '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' },
]

// 数据状态
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 pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showTotal: true,
  showPageSize: true,
})

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    draft: 'gray',
    pending: 'orange',
    signed: 'blue',
    executing: 'cyan',
    completed: 'green',
    terminated: 'red',
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    draft: '草稿',
    pending: '待审批',
    signed: '已签署',
    executing: '执行中',
    completed: '已完成',
    terminated: '已终止',
  }
  return textMap[status] || status
}

// 搜索和重置
const search = async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    contractName: '',
    contractCode: '',
    supplier: '',
    status: '',
    signDate: '',
    page: 1,
    size: 10,
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const openAddModal = () => {
  Message.info('新建合同功能开发中...')
}

const exportContract = () => {
  Message.info('导出合同功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看合同详情: ${record.contractName}`)
}

const editRecord = (record: any) => {
  Message.info(`编辑合同: ${record.contractName}`)
}

const approveContract = (record: any) => {
  Message.info(`审批合同: ${record.contractName}`)
}

const viewPayment = (record: any) => {
  Message.info(`查看付款记录: ${record.contractName}`)
}

onMounted(() => {
  search()
})
</script>