feat: 完成空间管理模块

src/views/business/project/index.vue

@@ -47,7 +47,7 @@
         @page-size-change="onPageSizeChange"
       >
         <template #type="{ record }">
-          <a-tag checkable :color="record.color">
+          <a-tag checkable :color="getTypeColor(record.type)">
             {{ record.typeName }}
           </a-tag>
         </template>
@@ -71,9 +71,20 @@
                   <a-button @click="handleWatchHouse(record.id)">
                     查看房源
                   </a-button>
-                  <a-button status="danger" @click="handleDel(record.id)">
-                    删除项目
-                  </a-button>
+                  <a-popconfirm
+                    :ok-text="$t('cancel')"
+                    :cancel-text="$t('delete')"
+                    :ok-button-props="{ type: 'outline' }"
+                    :cancel-button-props="{
+                      type: 'primary',
+                      status: 'danger',
+                    }"
+                    content="确定删除该项目？"
+                    type="error"
+                    @cancel="handleDel(record?.id)"
+                  >
+                    <a-button status="danger">删除项目</a-button>
+                  </a-popconfirm>
                 </a-space>
               </template>
             </a-popover>
@@ -91,9 +102,11 @@
       v-model:visible="showProjectInfoDrawer"
       :project-id="currentProjectId"
       :detail-info="currentProjectInfo"
+      :project-type-list="projectTypeList"
     />
     <projectListFilterDrawer
       v-model:visible="showListFilterDrawer"
+      :project-list="projectList"
       @confirm="handleFilterConfirm"
     />
   </div>
@@ -106,12 +119,13 @@
   import type { TableColumnData } from '@arco-design/web-vue';
   import useDataTable from '@/composables/useDataTable';
   import { ProjectItem } from '@/types/business';
-  import { getProjectList, getProjectDetail } from '@/api/business';
+  import { getProjectList, getProjectDetail, delProject } from '@/api/business';
+  import { getAllProjectTypeList } from '@/api/setting';
   import { ProjectPaginationParams } from '@/types/comm';
   import projectFormDrawer from './drawer/project-form-drawer.vue';
   import projectInfoDrawer from './drawer/project-info-drawer.vue';
   import projectListFilterDrawer from './drawer/project-list-filter-drawer.vue';
-
+  import { Message } from '@arco-design/web-vue';
   const { t } = useI18n();
   const { loading } = useLoading(false);
   const showDrawer = ref<boolean>(false);
@@ -155,7 +169,13 @@
     },
     { title: '房源数量', dataIndex: 'roomNum', key: 'roomNum' },
     { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
-    { title: '操作', key: 'operate', slotName: 'operate', width: 200 },
+    {
+      title: '操作',
+      key: 'operate',
+      align: 'center',
+      slotName: 'operate',
+      width: 300,
+    },
   ];
   const queryParams = ref<ProjectPaginationParams>({
     page: current.value,
@@ -203,15 +223,36 @@
       // 处理错误
     }
   };
-  const handleFilterConfirm = ({ typeIds, cityIds, rentRate }) => {
-    queryParams.value.type = typeIds;
-    queryParams.value.province_ids = cityIds;
-    queryParams.value.rent_rate_min = rentRate[0];
-    queryParams.value.rent_rate_max = rentRate[1];
-    getProjectListData();
+  const handleFilterConfirm = (payload: {
+    typeIds: number[] | null;
+    cityIds: number[] | null;
+    rentRate: number | number[];
+    filteredList: any[]; // 筛选后的列表数据
+  }) => {
+    // 更新查询参数（用于后端筛选）
+    queryParams.value.type = payload.typeIds;
+    queryParams.value.province_ids = payload.cityIds;
+    const rentRateArray = Array.isArray(payload.rentRate)
+      ? payload.rentRate
+      : [0, 100];
+    queryParams.value.rent_rate_min = rentRateArray[0];
+    queryParams.value.rent_rate_max = rentRateArray[1];
+
+    // 使用筛选后的列表数据更新表格
+    if (payload.filteredList) {
+      setData(payload.filteredList);
+      setTotal(payload.filteredList.length);
+    } else {
+      // 如果没有筛选数据，重新加载列表数据
+      getProjectListData();
+    }
   };
-  const handleDel = (id: number) => {
-    // TODO: 实现删除功能
+  const handleDel = async (id: number) => {
+    const { code, message } = await delProject(id);
+    if (code === 200) {
+      Message.success(message);
+      getProjectListData();
+    }
   };
   // 分页事件处理
   const onPageChange = (page: number) => {
@@ -244,8 +285,20 @@
   const handleFilter = () => {
     showListFilterDrawer.value = true;
   };
-  onMounted(() => {
-    setColumns(columns);
-    getProjectListData();
+  const projectTypeList = ref<any[]>([]);
+  const getAllProjectTypeListData = async () => {
+    const { code, data } = await getAllProjectTypeList();
+    if (code === 200 && data) {
+      projectTypeList.value = data?.projectTypesList;
+    }
+  };
+  const getTypeColor = (type: number) => {
+    const color = projectTypeList.value.find((item) => item.id === type)?.color;
+    return color || '';
+  };
+  onMounted(async () => {
+    await setColumns(columns);
+    await getAllProjectTypeListData();
+    await getProjectListData();
   });
 </script>