feat: 项目管理列表搜索、新增/编辑

src/views/business/project/index.vue

@@ -8,8 +8,10 @@
           <div class="flex_center_between">
             <a-space>
               <a-input-search
+                v-model="queryParams.keyword"
                 :style="{ width: '320px' }"
                 :placeholder="t('please.enter', { placeholder: t('content') })"
+                @search="handleSearch"
               />
               <a-button>
                 <template #icon>
@@ -23,7 +25,7 @@
                 </template>
                 {{ t('table.export') }}
               </a-button>
-              <a-button type="primary">
+              <a-button type="primary" @click="handleAddProject">
                 <template #icon>
                   <icon-plus />
                 </template>
@@ -44,23 +46,37 @@
         @page-change="onPageChange"
         @page-size-change="onPageSizeChange"
       >
-        <!-- <template #type="{ record }">
-          <a-tag checkable :color="getTypeColor(record.type)">{{
-            getTypeText(record.type)
-            }}</a-tag>
+        <template #type="{ record }">
+          <a-tag checkable :color="getProjectTypeColor(record.type)">
+            {{ record.typeName }}
+          </a-tag>
         </template>
         <template #rate="{ record }">
-          <a-progress :percent="record.rate" color="green" :style="{ width: '100px' }" />
-        </template> -->
-        <template #operate>
+          <a-progress
+            :percent="Number(record.rentRate)"
+            color="green"
+            :style="{ width: '100px' }"
+          />
+        </template>
+        <template #operate="{ record }">
           <a-space>
             <a-button>查看</a-button>
-            <a-button type="primary">编辑</a-button>
+            <a-button
+              :loading="isLoadingEdit"
+              type="primary"
+              @click="handleEditProject(record.id)"
+              >编辑</a-button
+            >
             <a-button>更多</a-button>
           </a-space>
         </template>
       </DataTable>
     </a-card>
+    <projectFormDrawer
+      v-model:visible="showDrawer"
+      :is-edit="isEdit"
+      :record="currentProjectInfo"
+    />
   </div>
 </template>
 
@@ -70,14 +86,18 @@
   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';
+  import { ProjectItem, ProjectInfo } from '@/types/business';
+  import { getProjectList, getProjectDetail } from '@/api/business';
+  import { ProjectPaginationParams, ProjectType } from '@/types/comm';
+  import projectFormDrawer from './drawer/project-form-drawer.vue';
 
   const { t } = useI18n();
   const { loading } = useLoading(false);
-
+  const showDrawer = ref<boolean>(false);
+  const isLoadingEdit = ref<boolean>(false);
+  const isEdit = ref<boolean>(false);
+  const currentProjectInfo = ref<ProjectInfo | null>(null);
   const projectList = ref<ProjectItem[]>([]);
-
   const {
     data: renderData,
     columns: projectColumn,
@@ -100,28 +120,46 @@
   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: '管理面积', dataIndex: 'RentAreaStr', key: 'RentAreaStr' },
+    { title: '可租面积', dataIndex: 'RoomAreaStr', key: 'RoomAreaStr' },
+    {
+      title: '出租率',
+      dataIndex: 'RentRateStr',
+      key: 'RentRateStr',
+      slotName: 'rate',
+    },
+    { title: '房源数量', dataIndex: 'roomNum', key: 'roomNum' },
+    { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
     { title: '操作', key: 'operate', slotName: 'operate', width: 200 },
   ];
-
+  const queryParams = ref<ProjectPaginationParams>({
+    page: current.value,
+    page_size: pageSize.value,
+    keyword: '',
+    type: null,
+    province_ids: null,
+    rent_rate_min: null,
+    rent_rate_max: null,
+  });
   const getProjectListData = async () => {
-    const params = {
-      page: current.value,
-      page_size: pageSize.value,
-    };
     setLoading(true);
-    const { code, data } = await getProjectList(params);
+    const { code, data } = await getProjectList(queryParams.value);
     if (code === 200 && data) {
       const { projectsList, page } = data;
       projectList.value = Array.isArray(projectsList) ? projectsList : [];
+      setData(projectList.value);
       setTotal(page?.total ? page.total : 0);
     }
     setLoading(false);
   };
+  const getProjectDetailData = async (id: number) => {
+    isLoadingEdit.value = true;
+    const { code, data } = await getProjectDetail(id);
+    if (code === 200 && data) {
+      currentProjectInfo.value = data.project;
+    }
+    isLoadingEdit.value = false;
+  };
 
   // 分页事件处理
   const onPageChange = (page: number) => {
@@ -132,6 +170,23 @@
     setPageSize(size);
     pageSize.value = size;
   };
+  const handleAddProject = () => {
+    isEdit.value = false;
+    currentProjectInfo.value = null;
+    showDrawer.value = true;
+  };
+  const handleEditProject = async (id: number) => {
+    isEdit.value = true;
+    await getProjectDetailData(id);
+    showDrawer.value = true;
+  };
+  const handleSearch = () => {
+    getProjectListData();
+  };
+  const getProjectTypeColor = (type: ProjectType) => {
+    const typeMap = { 1: 'green', 2: 'red', 3: 'orange' };
+    return typeMap[type];
+  };
   onMounted(() => {
     setColumns(columns);
     getProjectListData();