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 full_height">
      <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 { ref, onMounted } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useI18n } from 'vue-i18n';
  import type { TableColumnData } from '@arco-design/web-vue';
  import useDataTable from '@/composables/useDataTable';
  import { ProjectItem } from '@/types/business';
  import { getProjectList } from '@/api/business';

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

  const projectList = ref<ProjectItem[]>([]);

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

  // 列配置
  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 },
  ];

  const getProjectListData = async () => {
    const params = {
      page: current.value,
      page_size: pageSize.value,
    };
    setLoading(true);
    const { code, data } = await getProjectList(params);
    if (code === 200 && data) {
      const { projectsList, page } = data;
      projectList.value = Array.isArray(projectsList) ? projectsList : [];
      setTotal(page?.total ? page.total : 0);
    }
    setLoading(false);
  };

  // 分页事件处理
  const onPageChange = (page: number) => {
    setCurrent(page);
    current.value = page;
  };
  const onPageSizeChange = (size: number) => {
    setPageSize(size);
    pageSize.value = size;
  };
  onMounted(() => {
    setColumns(columns);
    getProjectListData();
  });
</script>