feat: 设置模块用户列表功能90%

src/views/business/project/index.vue

@@ -4,43 +4,46 @@
     <a-card class="general-card">
       <template #title>
         <div class="card-title_between">
-          <p class="title">{{ $t('menu.business.project') }}</p>
+          <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')"
+                :placeholder="t('please.enter', { placeholder: t('content') })"
               />
               <a-button>
                 <template #icon>
                   <icon-filter />
                 </template>
-                {{ $t('table.filter') }}
+                {{ t('table.filter') }}
               </a-button>
               <a-button>
                 <template #icon>
                   <icon-download />
                 </template>
-                {{ $t('table.export') }}
+                {{ t('table.export') }}
               </a-button>
               <a-button type="primary">
                 <template #icon>
                   <icon-plus />
                 </template>
-                {{ $t('add-project') }}
+                {{ t('add-project') }}
               </a-button>
             </a-space>
           </div>
         </div>
       </template>
-      <a-table
-        row-key="id"
-        :loading="loading"
-        :pagination="pagination"
-        :columns="projectColumn"
+
+      <!-- 使用新的 DataTable 组件 -->
+      <DataTable
         :data="renderData"
-        :bordered="false"
+        :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)">{{
@@ -61,15 +64,16 @@
             <a-button>更多</a-button>
           </a-space>
         </template>
-      </a-table>
+      </DataTable>
     </a-card>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref, reactive, watch, nextTick } from 'vue';
+  import { onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
-  import { Pagination } from '@/types/global';
+  import { useI18n } from 'vue-i18n';
+  import type { TableColumnData } from '@arco-design/web-vue';
   import {
     ProjectRecord,
     ProjectType,
@@ -77,11 +81,35 @@
     PROJECT_TYPE_COLORS,
     PROJECT_TYPE_LABELS,
   } from '@/types/business';
-  import { ProjectParams, getAllProjectList } from '@/api/business';
+  // import { getAllProjectList } from '@/api/business';
+  import useDataTable from '@/composables/useDataTable';
 
-  const { loading, setLoading } = useLoading(false);
-  const renderData = ref<ProjectRecord[]>([
+  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²',
@@ -91,6 +119,7 @@
       create_time: '2025-06-24 00:51',
     },
     {
+      id: '2',
       name: '南山科学科学院',
       type: PROJECT_TYPE.OFFICE_BUILDING,
       size: '120m²',
@@ -100,6 +129,7 @@
       create_time: '2025-06-24 00:58',
     },
     {
+      id: '3',
       name: '前海科学科学院',
       type: PROJECT_TYPE.INDUSTRIAL_PARK,
       size: '1520m²',
@@ -108,24 +138,25 @@
       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 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 => {
@@ -135,21 +166,28 @@
   const getTypeText = (type: ProjectType): string => {
     return PROJECT_TYPE_LABELS[type] || '未知';
   };
-  const onPageChange = (current: number) => {
-    pagination.current = current;
+
+  // 分页事件处理
+  const onPageChange = (page: number) => {
+    setCurrent(page);
     // TODO: 这里应该调用API获取对应页码的数据
   };
 
-  const getAllProjectListData = async () => {
-    setLoading(true);
-    try {
-      const { data } = await getAllProjectList();
-      console.log(data, 'getAllProjectList');
-    } catch (err) {
-      // you can report use errorHandler or other
-    } finally {
-      setLoading(false);
-    }
+  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>