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('please.enter', { placeholder: t('content') })"
              />
              <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>

      <!-- 使用新的 DataTable 组件 -->
      <DataTable
        :data="renderData"
        :columns="projectColumn"
        :loading="loading"
        :total="total"
        :current="current"
        :page-size="pageSize"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <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>
      </DataTable>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useI18n } from 'vue-i18n';
  import type { TableColumnData } from '@arco-design/web-vue';
  import {
    ProjectRecord,
    ProjectType,
    PROJECT_TYPE,
    PROJECT_TYPE_COLORS,
    PROJECT_TYPE_LABELS,
  } from '@/types/business';
  // import { getAllProjectList } from '@/api/business';
  import useDataTable from '@/composables/useDataTable';

  const { t } = useI18n();
  const { loading } = useLoading(false);
  // setLoading

  // 使用 DataTable composable
  const {
    data: renderData,
    columns: projectColumn,
    total,
    current,
    pageSize,
    setData,
    setColumns,
    setTotal,
    setCurrent,
    setPageSize,
  } = useDataTable({
    initialPage: 1,
    initialPageSize: 10,
    pageSizeOptions: [10, 20, 50, 100],
  });

  // 模拟数据
  const mockData: ProjectRecord[] = [
    {
      id: '1',
      name: '星河商务中心',
      type: PROJECT_TYPE.COMMERCIAL_COMPLEX,
      size: '1200m²',
      kezu: '1000m²',
      rate: 0.2,
      count: '90',
      create_time: '2025-06-24 00:51',
    },
    {
      id: '2',
      name: '南山科学科学院',
      type: PROJECT_TYPE.OFFICE_BUILDING,
      size: '120m²',
      kezu: '100m²',
      rate: 0.6,
      count: '10',
      create_time: '2025-06-24 00:58',
    },
    {
      id: '3',
      name: '前海科学科学院',
      type: PROJECT_TYPE.INDUSTRIAL_PARK,
      size: '1520m²',
      kezu: '1500m²',
      rate: 0.91,
      count: '120',
      create_time: '2025-06-24 01:16',
    },
  ];

  // 列配置
  const columns: TableColumnData[] = [
    { title: '项目信息', dataIndex: 'name', key: 'name' },
    { title: '项目类型', dataIndex: 'type', key: 'type', slotName: 'type' },
    { title: '管理面积', dataIndex: 'size', key: 'size' },
    { title: '可租面积', dataIndex: 'kezu', key: 'kezu' },
    { title: '出租率', dataIndex: 'rate', key: 'rate', slotName: 'rate' },
    { title: '房源数量', dataIndex: 'count', key: 'count' },
    { title: '创建时间', dataIndex: 'create_time', key: 'create_time' },
    { title: '操作', key: 'operate', slotName: 'operate', width: 200 },
  ];

  // 初始化数据
  onMounted(() => {
    setColumns(columns);
    setData(mockData);
    setTotal(mockData.length);
  });

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

  const getTypeText = (type: ProjectType): string => {
    return PROJECT_TYPE_LABELS[type] || '未知';
  };

  // 分页事件处理
  const onPageChange = (page: number) => {
    setCurrent(page);
    // TODO: 这里应该调用API获取对应页码的数据
  };

  const onPageSizeChange = (newPageSize: number) => {
    setPageSize(newPageSize);
    // TODO: 这里应该调用API获取对应页码的数据
  };

  // const getAllProjectListData = async () => {
  //   setLoading(true);
  //   try {
  //     await getAllProjectList();
  //     // 处理数据
  //   } catch (err) {
  //     // you can report use errorHandler or other
  //   } finally {
  //     setLoading(false);
  //   }
  // };
  // getAllProjectListData()
</script>