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

<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="成本管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1700 }"
      :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="openCostModal">
            <template #icon><icon-plus /></template>
            <template #default>新增成本</template>
          </a-button>
          <a-button @click="analyseCost">
            <template #icon><icon-line-chart /></template>
            <template #default>成本分析</template>
          </a-button>
          <a-button @click="exportCost">
            <template #icon><icon-download /></template>
            <template #default>导出数据</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 成本类型 -->
      <template #costType="{ record }">
        <a-tag :color="getCostTypeColor(record.costType)">
          {{ record.costType }}
        </a-tag>
      </template>
      
      <!-- 实际成本 -->
      <template #actualCost="{ record }">
        <span class="font-medium text-red-600">￥{{ record.actualCost.toLocaleString() }}万</span>
      </template>
      
      <!-- 预算成本 -->
      <template #budgetCost="{ record }">
        <span class="font-medium text-blue-600">￥{{ record.budgetCost.toLocaleString() }}万</span>
      </template>
      
      <!-- 成本差异 -->
      <template #costVariance="{ record }">
        <span :class="getCostVarianceClass(record.costVariance)">
          {{ record.costVariance > 0 ? '+' : '' }}{{ record.costVariance.toLocaleString() }}万
        </span>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="editRecord(record)">编辑</a-link>
          <a-link @click="viewBill(record)">单据</a-link>
          <a-link @click="auditCost(record)">审核</a-link>
        </a-space>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

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

// 搜索表单
let searchForm = reactive({
  projectName: '',
  costType: '',
  costCategory: '',
  costPeriod: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'projectName',
    label: '项目名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入项目名称'
    }
  },
  {
    field: 'costType',
    label: '成本类型',
    type: 'select' as const,
    props: {
      placeholder: '请选择成本类型',
      options: [
        { label: '人工成本', value: '人工成本' },
        { label: '材料成本', value: '材料成本' },
        { label: '设备成本', value: '设备成本' },
        { label: '差旅成本', value: '差旅成本' },
        { label: '管理成本', value: '管理成本' },
        { label: '其他成本', value: '其他成本' }
      ]
    }
  },
  {
    field: 'costCategory',
    label: '费用类别',
    type: 'select' as const,
    props: {
      placeholder: '请选择费用类别',
      options: [
        { label: '直接成本', value: '直接成本' },
        { label: '间接成本', value: '间接成本' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
  { title: '成本类型', dataIndex: 'costType', slotName: 'costType', width: 100 },
  { title: '费用类别', dataIndex: 'costCategory', width: 100 },
  { title: '成本科目', dataIndex: 'costSubject', width: 150 },
  { title: '预算成本', dataIndex: 'budgetCost', slotName: 'budgetCost', width: 120 },
  { title: '实际成本', dataIndex: 'actualCost', slotName: 'actualCost', width: 120 },
  { title: '成本差异', dataIndex: 'costVariance', slotName: 'costVariance', width: 120 },
  { title: '完成进度', dataIndex: 'progress', width: 100 },
  { title: '成本期间', dataIndex: 'costPeriod', width: 120 },
  { title: '负责部门', dataIndex: 'department', width: 120 },
  { title: '项目经理', dataIndex: 'projectManager', width: 100 },
  { title: '财务审核', dataIndex: 'financeAudit', width: 100 },
  { title: '录入时间', dataIndex: 'createTime', width: 160 },
  { title: '更新时间', dataIndex: 'updateTime', width: 160 },
  { 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,
    projectName: '华能新能源风电场叶片检测服务项目',
    costType: '人工成本',
    costCategory: '直接成本',
    costSubject: '技术人员工资',
    budgetCost: 80,
    actualCost: 85,
    costVariance: 5,
    progress: '65%',
    costPeriod: '2024年3月',
    department: '技术部',
    projectManager: '张项目经理',
    financeAudit: '已审核',
    createTime: '2024-03-01 09:00:00',
    updateTime: '2024-03-15 16:30:00',
    remark: '包含项目经理和技术员工资'
  },
  {
    id: 2,
    projectName: '华能新能源风电场叶片检测服务项目',
    costType: '设备成本',
    costCategory: '直接成本',
    costSubject: '检测设备租赁',
    budgetCost: 40,
    actualCost: 35,
    costVariance: -5,
    progress: '65%',
    costPeriod: '2024年3月',
    department: '设备部',
    projectManager: '张项目经理',
    financeAudit: '已审核',
    createTime: '2024-03-01 10:30:00',
    updateTime: '2024-03-10 14:20:00',
    remark: '设备租赁费用节省'
  },
  {
    id: 3,
    projectName: '大唐风电场防雷检测项目',
    costType: '差旅成本',
    costCategory: '直接成本',
    costSubject: '出差交通住宿',
    budgetCost: 15,
    actualCost: 18,
    costVariance: 3,
    progress: '45%',
    costPeriod: '2024年3月',
    department: '行政部',
    projectManager: '王项目经理',
    financeAudit: '待审核',
    createTime: '2024-03-05 11:15:00',
    updateTime: '2024-03-12 09:45:00',
    remark: '差旅费用略超预算'
  },
  {
    id: 4,
    projectName: '大唐风电场防雷检测项目',
    costType: '材料成本',
    costCategory: '直接成本',
    costSubject: '检测耗材',
    budgetCost: 25,
    actualCost: 22,
    costVariance: -3,
    progress: '45%',
    costPeriod: '2024年3月',
    department: '采购部',
    projectManager: '王项目经理',
    financeAudit: '已审核',
    createTime: '2024-03-06 14:00:00',
    updateTime: '2024-03-08 17:30:00',
    remark: '材料采购成本控制良好'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 4,
  showTotal: true,
  showPageSize: true
})

// 获取成本类型颜色
const getCostTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '人工成本': 'blue',
    '材料成本': 'green',
    '设备成本': 'orange',
    '差旅成本': 'purple',
    '管理成本': 'cyan',
    '其他成本': 'gray'
  }
  return colorMap[type] || 'gray'
}

// 获取成本差异样式类
const getCostVarianceClass = (variance: number) => {
  if (variance > 0) return 'font-medium text-red-600'
  if (variance < 0) return 'font-medium text-green-600'
  return 'font-medium text-gray-600'
}

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

const reset = () => {
  Object.assign(searchForm, {
    projectName: '',
    costType: '',
    costCategory: '',
    costPeriod: '',
    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 openCostModal = () => {
  Message.info('新增成本功能开发中...')
}

const analyseCost = () => {
  Message.info('成本分析功能开发中...')
}

const exportCost = () => {
  Message.info('导出数据功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看成本详情: ${record.projectName} - ${record.costSubject}`)
}

const editRecord = (record: any) => {
  Message.info(`编辑成本记录: ${record.costSubject}`)
}

const viewBill = (record: any) => {
  Message.info(`查看相关单据: ${record.costSubject}`)
}

const auditCost = (record: any) => {
  Message.info(`审核成本: ${record.costSubject}`)
}

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