feat: 项目管理列表筛选

src/views/business/project/index.vue

@@ -13,7 +13,7 @@
                 :placeholder="t('please.enter', { placeholder: t('content') })"
                 @search="handleSearch"
               />
-              <a-button>
+              <a-button @click="handleFilter">
                 <template #icon>
                   <icon-filter />
                 </template>
@@ -60,14 +60,30 @@
         </template>
         <template #operate="{ record }">
           <a-space>
-            <a-button>查看</a-button>
+            <a-button
+              :loading="isLoadingDetail"
+              @click="handleDetail(record.id)"
+              >查看</a-button
+            >
             <a-button
               :loading="isLoadingEdit"
               type="primary"
               @click="handleEditProject(record.id)"
               >编辑</a-button
             >
-            <a-button>更多</a-button>
+            <a-popover trigger="click" position="bottom">
+              <a-button>{{ $t('more') }}</a-button>
+              <template #content>
+                <a-space direction="vertical">
+                  <a-button @click="handleWatchHouse(record.id)">
+                    查看房源
+                  </a-button>
+                  <a-button status="danger" @click="handleDel(record.id)">
+                    删除项目
+                  </a-button>
+                </a-space>
+              </template>
+            </a-popover>
           </a-space>
         </template>
       </DataTable>
@@ -76,6 +92,16 @@
       v-model:visible="showDrawer"
       :is-edit="isEdit"
       :record="currentProjectInfo"
+      @submitted="getProjectListData"
+    />
+    <projectInfoDrawer
+      v-model:visible="showProjectInfoDrawer"
+      :project-id="currentProjectId"
+      :detail-info="currentProjectInfo"
+    />
+    <projectListFilterDrawer
+      v-model:visible="showListFilterDrawer"
+      @confirm="handleFilterConfirm"
     />
   </div>
 </template>
@@ -86,17 +112,23 @@
   import { useI18n } from 'vue-i18n';
   import type { TableColumnData } from '@arco-design/web-vue';
   import useDataTable from '@/composables/useDataTable';
-  import { ProjectItem, ProjectInfo } from '@/types/business';
+  import { ProjectItem } from '@/types/business';
   import { getProjectList, getProjectDetail } from '@/api/business';
   import { ProjectPaginationParams, ProjectType } 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';
 
   const { t } = useI18n();
   const { loading } = useLoading(false);
   const showDrawer = ref<boolean>(false);
+  const showProjectInfoDrawer = ref<boolean>(false);
+  const showListFilterDrawer = ref<boolean>(false);
+  const currentProjectId = ref<number | null>(null);
   const isLoadingEdit = ref<boolean>(false);
+  const isLoadingDetail = ref<boolean>(false);
   const isEdit = ref<boolean>(false);
-  const currentProjectInfo = ref<ProjectInfo | null>(null);
+  const currentProjectInfo = ref<ProjectItem | null>(null);
   const projectList = ref<ProjectItem[]>([]);
   const {
     data: renderData,
@@ -152,15 +184,33 @@
     }
     setLoading(false);
   };
-  const getProjectDetailData = async (id: number) => {
-    isLoadingEdit.value = true;
+  const getProjectDetailData = async (id: number, edit: boolean) => {
+    if (currentProjectInfo.value && currentProjectInfo.value?.id === id) return;
+    edit ? (isLoadingEdit.value = true) : (isLoadingDetail.value = true);
     const { code, data } = await getProjectDetail(id);
     if (code === 200 && data) {
       currentProjectInfo.value = data.project;
     }
     isLoadingEdit.value = false;
+    isLoadingDetail.value = false;
+  };
+  const handleWatchHouse = async (id: number) => {
+    try {
+      console.log(id, 'is id');
+    } catch (error) {
+      // 处理错误
+    }
+  };
+  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 handleDel = (id: number) => {
+    console.log(id, 'iiii');
   };
-
   // 分页事件处理
   const onPageChange = (page: number) => {
     setCurrent(page);
@@ -177,12 +227,19 @@
   };
   const handleEditProject = async (id: number) => {
     isEdit.value = true;
-    await getProjectDetailData(id);
+    await getProjectDetailData(id, true);
     showDrawer.value = true;
   };
+  const handleDetail = async (id: number) => {
+    await getProjectDetailData(id, false);
+    showProjectInfoDrawer.value = true;
+  };
   const handleSearch = () => {
     getProjectListData();
   };
+  const handleFilter = () => {
+    showListFilterDrawer.value = true;
+  };
   const getProjectTypeColor = (type: ProjectType) => {
     const typeMap = { 1: 'green', 2: 'red', 3: 'orange' };
     return typeMap[type];