leaser_front/src/views/business/project/index.vue

<template>
  <div class="business_project_wrap">
    <Breadcrumb :items="['menu.business', 'menu.business.project']" />
    <a-card class="general-card">
      <template #title>
        <div class="card-title_between">
          <p class="title">{{ $t('menu.business.project') }}</p>
          <div class="flex_center_between">
            <a-space>
              <a-input-search
                :style="{ width: '320px' }"
                :placeholder="$t('search.placeholder')"
              />
              <a-button>
                <template #icon>
                  <icon-filter />
                </template>
                {{ $t('table.filter') }}
              </a-button>
              <a-button>
                <template #icon>
                  <icon-download />
                </template>
                {{ $t('table.export') }}
              </a-button>
              <a-button type="primary">
                <template #icon>
                  <icon-plus />
                </template>
                {{ $t('add-project') }}
              </a-button>
            </a-space>
          </div>
        </div>
      </template>
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :columns="projectColumn"
        :data="renderData"
        :bordered="false"
        @page-change="onPageChange"
      >
        <template #type="{ record }">
          <a-tag checkable :color="getTypeColor(record.type)">{{
            getTypeText(record.type)
          }}</a-tag>
        </template>
        <template #rate="{ record }">
          <a-progress
            :percent="record.rate"
            color="green"
            :style="{ width: '100px' }"
          />
        </template>
        <template #operate>
          <a-space>
            <a-button>查看</a-button>
            <a-button type="primary">编辑</a-button>
            <a-button>更多</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import useLoading from '@/hooks/loading';
  import { Pagination } from '@/types/global';
  import {
    ProjectRecord,
    ProjectType,
    PROJECT_TYPE,
    PROJECT_TYPE_COLORS,
    PROJECT_TYPE_LABELS,
  } from '@/types/business';

  const { loading, setLoading } = useLoading(false);
  const renderData = ref<ProjectRecord[]>([
    {
      name: '星河商务中心',
      type: PROJECT_TYPE.COMMERCIAL_COMPLEX,
      size: '1200m²',
      kezu: '1000m²',
      rate: 0.2,
      count: '90',
      create_time: '2025-06-24 00:51',
    },
    {
      name: '南山科学科学院',
      type: PROJECT_TYPE.OFFICE_BUILDING,
      size: '120m²',
      kezu: '100m²',
      rate: 0.6,
      count: '10',
      create_time: '2025-06-24 00:58',
    },
    {
      name: '前海科学科学院',
      type: PROJECT_TYPE.INDUSTRIAL_PARK,
      size: '1520m²',
      kezu: '1500m²',
      rate: 0.91,
      count: '120',
      create_time: '2025-06-24 01:16',
    },
  ]);
  const basePagination: Pagination = {
    current: 1,
    pageSize: 20,
    total: 3,
  };
  const projectColumn = [
    { title: '项目信息', dataIndex: 'name' },
    { title: '项目类型', dataIndex: 'type', slotName: 'type' },
    { title: '管理面积', dataIndex: 'size' },
    { title: '可租面积', dataIndex: 'kezu' },
    { title: '出租率', dataIndex: 'rate', slotName: 'rate' },
    { title: '房源数量', dataIndex: 'count' },
    { title: '创建时间', dataIndex: 'create_time' },
    { title: '操作', dataIndex: 'operate', slotName: 'operate' },
  ];
  const pagination = reactive({
    ...basePagination,
  });

  const getTypeColor = (type: ProjectType): string => {
    return PROJECT_TYPE_COLORS[type] || 'default';
  };

  const getTypeText = (type: ProjectType): string => {
    return PROJECT_TYPE_LABELS[type] || '未知';
  };
  const onPageChange = (current: number) => {
    pagination.current = current;
    // TODO: 这里应该调用API获取对应页码的数据
  };
</script>