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

.eslintrc.js

@@ -65,6 +65,7 @@ module.exports = {
       },
     ],
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
     'no-param-reassign': 0,
     'prefer-regex-literals': 0,
     'import/no-extraneous-dependencies': 0,

src/api/business.ts

@@ -5,7 +5,7 @@ import {
   CreateProjectParam,
   ProjectDetailRes,
 } from '@/types/business';
-import { PaginationParams } from '@/types/comm';
+import { ProjectPaginationParams } from '@/types/comm';
 import { HttpResponse } from './interceptor';
 // import type { RouteRecordNormalized } from 'vue-router';
 // import { UserState } from '@/store/modules/user/types';
@@ -22,7 +22,7 @@ export function getAllProjectList(): Promise<AllProjectListRes> {
 }
 // 项目列表（分页）
 export function getProjectList(
-  params: PaginationParams
+  params: ProjectPaginationParams
 ): Promise<ProjectListRes> {
   return axios.post('project/getProjectList', params);
 }

src/api/common.ts

@@ -0,0 +1,74 @@
+import axios from 'axios';
+import {
+  CommonProvinceRes,
+  CommonCityRes,
+  CommonDistrictRes,
+  AllProjectIdNameListRes,
+  AllBuildingIdNameListRes,
+  AllFloorIdNameListRes,
+  AllInvoiceTypeIdNameListRes,
+  AllFilingTypeIdNameListRes,
+  UploadParam,
+  BankListRes,
+} from '@/types/comm';
+import { HttpResponse } from './interceptor';
+
+export interface ProjectRecord {
+  id: string;
+  name: string;
+  type: string;
+}
+
+// 省份列表
+export function getProvinceList(): Promise<CommonProvinceRes> {
+  return axios.get(`common/getProvinceList`);
+}
+// 城市列表
+export function getCityListByProvinceId(id: number): Promise<CommonCityRes> {
+  return axios.get(`common/getCityList?province_id=${id}`);
+}
+// 区域列表
+export function getDistrictListByCityId(
+  id: number
+): Promise<CommonDistrictRes> {
+  return axios.get(`common/getDistrictList?city_id=${id}`);
+}
+
+// 全部项目（id，名称）列表
+export function getAllProjectIdNameList(): Promise<AllProjectIdNameListRes> {
+  return axios.get(`common/getAllProjectList`);
+}
+// 全部楼栋（id，名称）列表（根据项目id查询）
+export function getAllBuildingIdNameList(
+  id: number
+): Promise<AllBuildingIdNameListRes> {
+  return axios.get(`common/getAllBuildingList?project_id=${id}`);
+}
+// 全部楼层（id，名称）列表（根据楼栋id查询）
+export function getAllFloorIdNameList(
+  id: number
+): Promise<AllFloorIdNameListRes> {
+  return axios.get(`common/getAllFloorList?building_id=${id}`);
+}
+// 发票类型列表
+export function getInvoiceTypeList(): Promise<AllInvoiceTypeIdNameListRes> {
+  return axios.get(`common/getInvoiceTypeList`);
+}
+// 租客归档类型列表
+export function getFilingTypeList(): Promise<AllFilingTypeIdNameListRes> {
+  return axios.get(`common/getFilingTypeList`);
+}
+// 上传文档
+export function ossUpload(
+  params: UploadParam | FormData
+): Promise<HttpResponse> {
+  return axios.post('common/ossUpload', params);
+}
+// 下载文档
+export function ossDownload(key: string): Promise<HttpResponse> {
+  return axios.get(`common/ossDownload?key=${key}`);
+}
+// 银行列表
+export function getBanksList(keyword: string): Promise<BankListRes> {
+  return axios.post('common/getBanksList', { keyword });
+}

src/components/common/ImageUpload.md

@@ -0,0 +1,115 @@
+# ImageUpload 图片上传组件
+
+一个可复用的图片上传组件，支持自定义上传类型、文件大小限制等功能。
+
+## 功能特性
+
+- 支持图片格式：JPG、PNG、GIF、WEBP
+- 可自定义文件大小限制
+- 支持上传进度显示
+- 支持图片预览
+- 支持多文件上传
+- 上传成功后自动回传URL
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| modelValue | UploadFile[] | [] | 文件列表，支持v-model |
+| uploadType | UploadType | - | 上传类型：1合同模版，2图片 |
+| maxSize | number | 10 * 1024 * 1024 | 最大文件大小（字节） |
+| maxCount | number | - | 最大上传数量 |
+
+## Events
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| update:modelValue | (value: UploadFile[]) | 文件列表更新时触发 |
+| upload-success | (file: UploadFile, response: UploadResponse) | 上传成功时触发 |
+| upload-error | (error: Error) | 上传失败时触发 |
+
+## 类型定义
+
+```typescript
+interface UploadFile {
+  uid: string;
+  name: string;
+  url?: string;
+  status: 'done' | 'uploading' | 'error';
+  percent?: number;
+}
+
+interface UploadResponse {
+  filename: string;
+  size: number;
+  url: string;
+}
+
+type UploadType = 1 | 2; // 1合同模版，2图片
+```
+
+## 使用示例
+
+### 基础用法
+
+```vue
+<template>
+  <ImageUpload
+    v-model="images"
+    :upload-type="2"
+    @upload-success="handleUploadSuccess"
+    @upload-error="handleUploadError"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import ImageUpload from '@/components/common/ImageUpload.vue';
+
+const images = ref([]);
+
+const handleUploadSuccess = (file, response) => {
+  console.log('上传成功:', response.url);
+};
+
+const handleUploadError = (error) => {
+  console.error('上传失败:', error.message);
+};
+</script>
+```
+
+### 自定义文件大小限制
+
+```vue
+<template>
+  <ImageUpload
+    v-model="images"
+    :upload-type="2"
+    :max-size="5 * 1024 * 1024"
+    @upload-success="handleUploadSuccess"
+  />
+</template>
+```
+
+### 在表单中使用
+
+```vue
+<template>
+  <a-form-item label="项目图片" field="images">
+    <ImageUpload
+      v-model="form.images"
+      :upload-type="2"
+      :max-size="10 * 1024 * 1024"
+      @upload-success="handleUploadSuccess"
+      @upload-error="handleUploadError"
+    />
+  </a-form-item>
+</template>
+```
+
+## 注意事项
+
+1. 组件会自动处理文件验证，包括文件大小和格式检查
+2. 上传成功后，文件对象会自动更新URL和状态
+3. 支持v-model双向绑定，父组件可以直接操作文件列表
+4. 上传类型必须从父组件传入，用于区分不同的上传场景 

src/components/common/ImageUpload.vue

@@ -0,0 +1,165 @@
+<template>
+  <a-upload
+    :list-type="listType"
+    :accept="'image/*'"
+    :custom-request="customRequest"
+    :file-list="fileList"
+    :multiple="maxCount > 1"
+    :limit="maxCount"
+    image-preview
+    @change="handleChange"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { ossUpload } from '@/api/common';
+  import type { UploadType } from '@/types/comm';
+
+  interface UploadFile {
+    uid: string;
+    name: string;
+    url?: string;
+    status: 'done' | 'uploading' | 'error';
+    percent?: number;
+  }
+
+  interface UploadResponse {
+    filename: string;
+    size: number;
+    url: string;
+  }
+
+  const props = defineProps<{
+    modelValue: string[]; // 只暴露图片url数组
+    uploadType: UploadType;
+    maxSize?: number; // 默认10MB
+    maxCount?: number; // 最大上传数量，默认1（单图）
+    listType?: 'text' | 'picture' | 'picture-card'; // 上传样式
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: string[]): void;
+    (e: 'upload-success', url: string): void;
+    (e: 'upload-error', error: Error): void;
+  }>();
+
+  const fileList = ref<UploadFile[]>([]);
+
+  // 默认最大上传数：1（单图）
+  const maxCount = props.maxCount ?? 1;
+
+  // listType 默认值
+  const listType = props.listType ?? 'picture-card';
+
+  // 将外部 url[] 映射为 UploadFile[]
+  watch(
+    () => props.modelValue,
+    (newVal) => {
+      fileList.value = (newVal || []).map((url, index) => ({
+        uid: `${index}`,
+        name: `图片-${index + 1}`,
+        url,
+        status: 'done',
+      }));
+    },
+    { immediate: true }
+  );
+
+  // 自定义上传请求
+  const customRequest = async (option: any) => {
+    const { onProgress, onError, onSuccess, fileItem } = option;
+
+    try {
+      const file = fileItem.file;
+      const maxSize = props.maxSize || 10 * 1024 * 1024;
+      const allowedTypes = [
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+      ];
+
+      // 文件大小校验
+      if (file.size > maxSize) {
+        onError(
+          new Error(`文件大小不能超过${Math.round(maxSize / 1024 / 1024)}MB`)
+        );
+        return;
+      }
+
+      // 文件类型校验
+      if (!allowedTypes.includes(file.type)) {
+        onError(new Error('只支持 JPG、PNG、GIF、WEBP 格式的图片'));
+        return;
+      }
+
+      // 模拟上传进度
+      let progress = 0;
+      const progressInterval = setInterval(() => {
+        progress += Math.random() * 30;
+        if (progress >= 90) {
+          clearInterval(progressInterval);
+          progress = 90;
+        }
+        onProgress({ percent: Math.round(progress) });
+      }, 200);
+
+      // 上传到服务器
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('type', props.uploadType.toString());
+
+      const { code, data, message } = await ossUpload(formData);
+      clearInterval(progressInterval);
+
+      if (code === 200 && data) {
+        const response = data as UploadResponse;
+
+        fileItem.status = 'done';
+        fileItem.url = response.url;
+        onProgress({ percent: 100 });
+        onSuccess(response);
+
+        // 新的图片 url
+        let updatedUrls = [...props.modelValue];
+        if (maxCount === 1) {
+          updatedUrls = [response.url];
+        } else {
+          updatedUrls.push(response.url);
+          // 截取至 maxCount
+          updatedUrls = updatedUrls.slice(0, maxCount);
+        }
+
+        emit('update:modelValue', updatedUrls);
+        emit('upload-success', response.url);
+      } else {
+        const error = new Error(message || '上传失败');
+        onError(error);
+        emit('upload-error', error);
+      }
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error('上传失败');
+      onError(err);
+      emit('upload-error', err);
+    }
+  };
+
+  // 同步 fileList（删除时触发）
+  const handleChange = (newFileList: UploadFile[]) => {
+    const validUrls = newFileList
+      .filter((f) => f.status === 'done' && f.url)
+      .map((f) => f.url!);
+
+    emit('update:modelValue', validUrls);
+  };
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-upload-list-picture-card) {
+    .arco-upload-list-item {
+      width: 104px;
+      height: 104px;
+    }
+  }
+</style>

src/components/index.ts

@@ -12,6 +12,7 @@ import {
 import Chart from './chart/index.vue';
 import Breadcrumb from './breadcrumb/index.vue';
 import DataTable from './common/DataTable.vue';
+import ImageUpload from './common/ImageUpload.vue';
 
 // Manually introduce ECharts modules to reduce packing size
 
@@ -33,5 +34,6 @@ export default {
     Vue.component('Chart', Chart);
     Vue.component('Breadcrumb', Breadcrumb);
     Vue.component('DataTable', DataTable);
+    Vue.component('ImageUpload', ImageUpload);
   },
 };

src/types/business.ts

@@ -9,10 +9,11 @@ import {
 } from './comm';
 
 export interface BuildingItem {
+  customId?: string;
   id?: string; // 楼栋id
   name: string; // 楼栋名称
-  up_floor?: number; // 地上层数
+  up_floor?: number | null; // 地上层数
-  down_floor?: number; // 地下层数
+  down_floor?: number | null; // 地下层数
 }
 export interface AllProjectsItem {
   id: number; // 项目id
@@ -57,9 +58,9 @@ export interface CreateProjectParam {
   id?: number;
   type: ProjectType; // 项目类型：1写字楼，2商业综合体，3园区
   name: string; // 楼栋名称
-  province_id: number; // 省份id
+  province_id: number | null; // 省份id
-  city_id: number; // 城市id
+  city_id: number | null; // 城市id
-  district_id: number; // 区域id
+  district_id: number | null; // 区域id
   address: string; // 详细地址
   images: string[]; // 图片数组
   buildings: BuildingItem[]; // 楼栋数据
@@ -93,4 +94,6 @@ export interface ProjectInfo extends BaseEntity {
   buildings: BuildingInfo[]; // 楼栋数组
 }
 
-export type ProjectDetailRes = ProjectInfo;
+export type ProjectDetailRes = HttpResponse<{
+  project: ProjectInfo;
+}>;

src/types/comm.ts

@@ -1,3 +1,4 @@
+import { HttpResponse } from '@/api/interceptor';
 // ==================== 通用类型定义 ====================
 export interface BaseEntity {
   id: number;
@@ -30,3 +31,66 @@ export type CommStatus = 1 | 2; // 1:是 2否
 export type FeeManagementType = 1 | 2; // 费项属性：1收入费项，2支出费项
 export type FeeType = 1 | 2 | 3 | 4; // 费项类型：1租赁类，2物业类，3特殊类，4其他类
 export type ProjectType = 1 | 2 | 3; // 项目类型：1写字楼，2商业综合体，3园区
+export type UploadType = 1 | 2; // 1合同模版，2图片
+
+// ==================== 公共接口类型定义 ====================
+
+export interface CommonProvinceItem {
+  ID?: number;
+  id?: number;
+  name?: string; // 省份
+  Name?: string; // 省份
+  code: string; // 编码
+}
+export interface CommonCityItem extends CommonProvinceItem {
+  ProvinceId: number; // 所属省份id
+}
+export interface CommonDistrictItem extends CommonProvinceItem {
+  CityId: number; // 所属城市id
+}
+// 省份
+export type CommonProvinceRes = HttpResponse<{
+  provinceList?: CommonProvinceItem[];
+}>;
+// 城市
+export type CommonCityRes = HttpResponse<{
+  cityList?: CommonCityItem[];
+}>;
+// 区域
+export type CommonDistrictRes = HttpResponse<{
+  districtList?: CommonDistrictItem[];
+}>;
+// 全部项目（id、名称的列表）
+export interface AllIdNameItem {
+  id: number;
+  name: string;
+}
+export interface ProjectPaginationParams extends PaginationParams {
+  type?: ProjectType[] | null;
+  province_ids?: number[] | null;
+  rent_rate_min?: number | null;
+  rent_rate_max?: number | null;
+}
+export type AllProjectIdNameListRes = HttpResponse<{
+  projectsList?: AllIdNameItem[];
+}>;
+export type AllBuildingIdNameListRes = HttpResponse<{
+  buildingList?: AllIdNameItem[];
+}>;
+export type AllFloorIdNameListRes = HttpResponse<{
+  floorList?: AllIdNameItem[];
+}>;
+export type AllInvoiceTypeIdNameListRes = HttpResponse<{
+  invoiceTypeList?: AllIdNameItem[];
+}>;
+export type AllFilingTypeIdNameListRes = HttpResponse<{
+  filingTypeList?: AllIdNameItem[];
+}>;
+
+export interface UploadParam {
+  file: any;
+  type: UploadType;
+}
+export type BankListRes = HttpResponse<{
+  banksList?: AllIdNameItem[];
+}>;

src/utils/index.ts

@@ -34,5 +34,15 @@ export function debounce<T extends (...args: any[]) => any>(
     }, delay);
   };
 }
+export const generateRandomId = (length = 8) => {
+  const chars =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  const charsLength = chars.length;
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * charsLength));
+  }
+  return result;
+};
 
 export default null;

src/views/business/project/drawer/project-form-drawer.vue

@@ -14,10 +14,10 @@
       auto-label-width
       layout="vertical"
     >
-      <a-row>
+      <a-row :gutter="24">
         <a-col :span="12">
           <!-- 项目名称 -->
-          <a-form-item label="条款名称" field="name" required>
+          <a-form-item label="项目名称" field="name" required>
             <a-input
               v-model="form.name"
               :placeholder="$t('please.enter', { placeholder: '项目名称' })"
@@ -26,7 +26,7 @@
         </a-col>
         <a-col :span="12">
           <!-- 项目类型 -->
-          <a-form-item label="项目类型" field="name" required>
+          <a-form-item label="项目类型" field="type" required>
             <a-select v-model="form.type" placeholder="请选择项目类型">
               <a-option
                 v-for="item in projectTypeList"
@@ -40,16 +40,131 @@
         </a-col>
       </a-row>
       <!-- 项目地址 -->
-      <a-form-item label="项目地址" field="type" required>
+      <a-form-item label="项目地址" field="address" required>
-        <!-- <a-space>
+        <a-row :gutter="12" wrap :style="{ width: '100%' }">
-                    <a-select v-model="form.finance_fee_id" :style="{ width: '200px' }" placeholder="请选择省份...">
+          <a-col :span="12">
-                        <a-option v-for="item in financeFeeList" :key="item.id" :value="item.id">
+            <a-select
+              v-model="form.province_id"
+              :style="{ width: '100%' }"
+              placeholder="请选择省份..."
+              @change="handleChangeProvince"
+            >
+              <a-option
+                v-for="item in provinceList"
+                :key="item.id"
+                :value="item.id"
+              >
                 {{ item.name }}
               </a-option>
             </a-select>
-                    <a-select v-model="form.finance_fee_periodicity" :style="{ width: '200px' }"
+          </a-col>
-                        :options="financeFeeFeriodicityList" placeholder="请选择..." />
+          <a-col :span="12">
-                </a-space> -->
+            <a-row :gutter="12">
+              <a-col :span="12">
+                <a-select
+                  v-model="form.city_id"
+                  :disabled="cityList.length === 0"
+                  :style="{ width: '100%' }"
+                  placeholder="请选择城市..."
+                  @change="handleChangeCity"
+                >
+                  <a-option
+                    v-for="item in cityList"
+                    :key="item.id"
+                    :value="item.id"
+                  >
+                    {{ item.name }}
+                  </a-option>
+                </a-select>
+              </a-col>
+              <a-col :span="12">
+                <a-select
+                  v-model="form.district_id"
+                  :disabled="districtList.length === 0"
+                  :style="{ width: '100%' }"
+                  placeholder="请选择区域..."
+                >
+                  <a-option
+                    v-for="item in districtList"
+                    :key="item.id"
+                    :value="item.id"
+                  >
+                    {{ item.name }}
+                  </a-option>
+                </a-select>
+              </a-col>
+            </a-row>
+          </a-col>
+          <a-col :span="24" style="margin-top: 10px">
+            <a-input
+              v-model="form.address"
+              :disabled="!form.district_id"
+              placeholder="请输入详细地址..."
+            />
+          </a-col>
+        </a-row>
+      </a-form-item>
+      <a-form-item label="项目图片" field="images">
+        <ImageUpload
+          v-model="form.images"
+          :upload-type="2"
+          :max-count="5"
+          :list-type="'picture-card'"
+        />
+      </a-form-item>
+      <a-form-item>
+        <template #label>
+          <div class="flex_center_between">
+            <p class="left">楼栋管理</p>
+            <div class="right">
+              <a-button type="outline" @click="handleAddBuilding">
+                <icon-plus /> 新增楼栋
+              </a-button>
+            </div>
+          </div>
+        </template>
+        <draggable
+          v-model="form.buildings"
+          :animation="200"
+          :item-key="props.isEdit ? 'id' : 'customId'"
+          @end="handleDragEnd"
+        >
+          <template #item="{ element }">
+            <a-row align="center" :gutter="12" style="margin-top: 10px">
+              <a-col :span="2">
+                <icon-unordered-list :size="24" />
+              </a-col>
+              <a-col :span="8">
+                <a-input
+                  v-model="element.name"
+                  placeholder="输入楼栋号（如A座）"
+                />
+              </a-col>
+              <a-col :span="6">
+                <a-input-number
+                  v-model="element.up_floor"
+                  prepend="地面"
+                  append="层"
+                />
+              </a-col>
+              <a-col :span="6">
+                <a-input-number
+                  v-model="element.down_floor"
+                  prepend="地下"
+                  append="层"
+                />
+              </a-col>
+              <a-col :span="2">
+                <icon-delete
+                  :size="16"
+                  style="cursor: pointer"
+                  @click="handleDelBuilding(element.customId)"
+                />
+              </a-col>
+              <a-divider />
+            </a-row>
+          </template>
+        </draggable>
       </a-form-item>
     </a-form>
   </a-drawer>
@@ -58,10 +173,25 @@
 <script lang="ts" setup>
   import { ref, watch, reactive, onMounted } from 'vue';
   import type { FormInstance } from '@arco-design/web-vue';
-  // import { Message } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
   import { projectTypeList } from '@/utils/constant';
-  // import { CreateTermSettingParam, FeeManagement } from '@/types/setting';
+  import {
-  // import { FeeManagementType } from '@/types/comm';
+    CommonProvinceItem,
+    CommonCityItem,
+    CommonDistrictItem,
+    ProjectType,
+  } from '@/types/comm';
+  import {
+    getProvinceList,
+    getCityListByProvinceId,
+    getDistrictListByCityId,
+  } from '@/api/common';
+  import { createProject, updateProject } from '@/api/business';
+  import { CreateProjectParam } from '@/types/business';
+  import ImageUpload from '@/components/common/ImageUpload.vue';
+  import draggable from 'vuedraggable';
+  import { generateRandomId } from '@/utils';
+
   const props = defineProps<{
     visible: boolean;
     isEdit: boolean;
@@ -71,34 +201,128 @@
     (e: 'update:visible', val: boolean): void;
     (e: 'submitted'): void;
   }>();
-
+  const createEmptyBuilding = () => {
+    return {
+      customId: generateRandomId(),
+      name: '',
+      up_floor: null,
+      down_floor: null,
+    };
+  };
+  const isLoading = ref<boolean>(false);
   //  表单数据
   const formRef = ref<FormInstance>();
-  const defaultForm: any = {
+
-    name: '', // 名称
+  const defaultForm: CreateProjectParam = {
-    type: 1, // 条款类型：1租赁类，2物业类，3特殊类，4其他类
+    type: 1 as ProjectType, // 项目类型：1写字楼，2商业综合体，3园区
-    is_fee: 1, // 是否勾选费项：1是，2否
+    name: '', // 楼栋名称
-    finance_fee_id: null, // 财务费项id（除保证金外
+    province_id: null, // 省份id
-    finance_fee_periodicity: 1, // 周期性：1周期性付款，2一次性付款
+    city_id: null, // 城市id
-    is_bond: 2, // 是否勾选保证金：1是，2否
+    district_id: null, // 区域id
-    finance_bond_fee_id: null, // 财务保证金费项id
+    address: '', // 详细地址
-    is_incremental: 2, // 是否勾选递增项：1是，2否
+    images: [], // 图片数组
-    is_discount: 2, // 是否勾选优惠项：1是，2否
+    buildings: [createEmptyBuilding()], // 楼栋数据
-    is_late_fee: 2, // 是否勾选滞纳金：1是，2否
   };
-  const form = reactive<any>({ ...defaultForm });
+  const form = reactive<CreateProjectParam>({ ...defaultForm });
   //  校验规则
   const rules = reactive({
-    name: [{ required: true, message: '请输入条款名称' }],
+    name: [{ required: true, message: '请输入项目名称' }],
-    type: [{ required: true, message: '请选择条款类别' }],
+    type: [{ required: true, message: '请选择项目类型' }],
+    address: [
+      { required: true, message: '详细地址不能为空' },
+      {
+        'validator': (_, cb) => {
+          if (!form.province_id) {
+            cb('请选择项目地址所在省份');
+          } else if (!form.city_id) {
+            cb('请选择项目地址所在城市');
+          } else if (!form.district_id) {
+            cb('请选择项目地址所在区域');
+          } else {
+            cb();
+          }
+        },
+        'validate-trigger': 'blur',
+      },
+    ],
   });
+  const provinceList = ref<CommonProvinceItem[]>([]);
+  const cityList = ref<CommonCityItem[]>([]);
+  const districtList = ref<CommonDistrictItem[]>([]);
 
+  const getProvinceListData = async () => {
+    const { code, data } = await getProvinceList();
+    if (code === 200 && data) {
+      provinceList.value = Array.isArray(data?.provinceList)
+        ? data?.provinceList
+        : [];
+    }
+  };
+  const getCityListByProvinceIdData = async (provinceId: number) => {
+    const { code, data } = await getCityListByProvinceId(provinceId);
+    if (code === 200 && data) {
+      cityList.value = Array.isArray(data?.cityList) ? data?.cityList : [];
+    }
+  };
+  const getDistrictListByCityIdData = async (cityId: number) => {
+    const { code, data } = await getDistrictListByCityId(cityId);
+    if (code === 200 && data) {
+      districtList.value = Array.isArray(data?.districtList)
+        ? data?.districtList
+        : [];
+    }
+  };
+  const handleChangeProvince = async (id) => {
+    form.city_id = null;
+    await getCityListByProvinceIdData(id);
+  };
+  const handleChangeCity = async (id) => {
+    form.district_id = null;
+    await getDistrictListByCityIdData(id);
+  };
+
+  const handleAddBuilding = () => {
+    form.buildings.push(createEmptyBuilding());
+  };
+  const handleDelBuilding = (id: string) => {
+    if (form.buildings.length === 1) return;
+    const index = form.buildings.findIndex((b) => b.customId === id);
+    if (index !== -1) {
+      form.buildings.splice(index, 1);
+    }
+  };
   watch(
     () => props.visible,
-    (val) => {
+    async (val) => {
       if (val) {
+        console.log(props.record, 'props.record');
+
         if (props.isEdit && props.record) {
-          Object.assign(form, props.record);
+          const record = props.record;
+          if (record?.buildings?.length) {
+            record.buildings.forEach((element) => {
+              element.up_floor = element.upFloor;
+              element.down_floor = element.downFloor;
+            });
+          }
+          if (record?.imageUrls?.length) {
+            record.images = record?.imageUrls;
+          }
+          form.name = record.name;
+          Object.keys(form).forEach((key) => {
+            form[key] = record[key];
+          });
+          form.province_id = record.provinceId;
+          form.city_id = record.cityId;
+          form.district_id = record.districtId;
+          form.id = record.id;
+          // Object.assign(form, record);
+          if (form.province_id) {
+            await getCityListByProvinceIdData(form.province_id);
+          }
+          if (form.city_id) {
+            await getDistrictListByCityIdData(form.city_id);
+          }
         } else {
           Object.assign(form, defaultForm);
         }
@@ -107,12 +331,45 @@
     { immediate: true }
   );
 
-  const handleOk = async () => {};
+  const handleOk = async () => {
+    if (isLoading.value) return;
+    try {
+      isLoading.value = true;
+      const valid = await formRef.value.validate();
+      if (valid) return;
+      form.buildings = form.buildings.map((item) => {
+        return {
+          name: item.name,
+          up_floor: item.up_floor,
+          down_floor: item.down_floor,
+          id: item?.id,
+        };
+      });
+      const params = {
+        ...form,
+      };
+      const res = props?.isEdit
+        ? await updateProject(params)
+        : await createProject(params);
+      if (res?.code === 200) {
+        Message.success(res?.message);
+        emit('submitted');
+        emit('update:visible', false);
+      }
+    } catch (err) {
+      // 捕获异常，暂不处理
+    } finally {
+      isLoading.value = false;
+    }
+  };
 
   const handleCancel = () => {
     emit('update:visible', false);
   };
-  onMounted(() => {});
+  const handleDragEnd = () => {};
+  onMounted(() => {
+    getProvinceListData();
+  });
 </script>
 
 <style lang="less" scoped>

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 }">
+        <template #type="{ record }">
-          <a-tag checkable :color="getTypeColor(record.type)">{{
+          <a-tag checkable :color="getProjectTypeColor(record.type)">
-            getTypeText(record.type)
+            {{ record.typeName }}
-            }}</a-tag>
+          </a-tag>
         </template>
         <template #rate="{ record }">
-          <a-progress :percent="record.rate" color="green" :style="{ width: '100px' }" />
+          <a-progress
-        </template> -->
+            :percent="Number(record.rentRate)"
-        <template #operate>
+            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 { ProjectItem, ProjectInfo } from '@/types/business';
-  import { getProjectList } from '@/api/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: 'RentAreaStr', key: 'RentAreaStr' },
-    { title: '可租面积', dataIndex: 'kezu', key: 'kezu' },
+    { title: '可租面积', dataIndex: 'RoomAreaStr', key: 'RoomAreaStr' },
-    { title: '出租率', dataIndex: 'rate', key: 'rate', slotName: 'rate' },
+    {
-    { title: '房源数量', dataIndex: 'count', key: 'count' },
+      title: '出租率',
-    { title: '创建时间', dataIndex: 'create_time', key: 'create_time' },
+      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>({
-  const getProjectListData = async () => {
-    const params = {
     page: current.value,
     page_size: pageSize.value,
-    };
+    keyword: '',
+    type: null,
+    province_ids: null,
+    rent_rate_min: null,
+    rent_rate_max: null,
+  });
+  const getProjectListData = async () => {
     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();

src/views/setting/system/contract-settings/drawer/contract-number-form-drawer.vue

@@ -109,6 +109,7 @@
   // import { CreateCodeSettingParam } from '@/types/setting'
   import draggable from 'vuedraggable';
 
+  const isLoading = ref<boolean>(false);
   const props = defineProps<{
     visible: boolean;
     isEdit: boolean;
@@ -240,7 +241,9 @@
     form.arrange = JSON.parse(JSON.stringify(arrangeList.value));
   };
   const handleOk = async () => {
+    if (isLoading.value) return;
     try {
+      isLoading.value = true;
       const valid = await formRef.value.validate();
       if (valid) return;
       // 同步编号排序
@@ -265,6 +268,8 @@
       }
     } catch (err) {
       // 捕获异常，暂不处理
+    } finally {
+      isLoading.value = false;
     }
   };
 

src/views/setting/system/contract-settings/drawer/contract-terms-form-drawer.vue

@@ -120,7 +120,7 @@
     (e: 'update:visible', val: boolean): void;
     (e: 'submitted'): void;
   }>();
-
+  const isLoading = ref<boolean>(false);
   //  表单数据
   const formRef = ref<FormInstance>();
   const defaultForm: CreateTermSettingParam = {
@@ -182,7 +182,9 @@
   };
 
   const handleOk = async () => {
+    if (isLoading.value) return;
     try {
+      isLoading.value = true;
       const valid = await formRef.value.validate();
       if (valid) return;
       const { is_bond, is_fee, finance_bond_fee_id, finance_fee_id } = form;
@@ -208,6 +210,8 @@
       }
     } catch (err) {
       // 捕获异常，暂不处理
+    } finally {
+      isLoading.value = false;
     }
   };
 

src/views/setting/system/finance-settings/drawer/fee-management-drawer.vue

@@ -78,6 +78,7 @@
   import { CreateFeeParams } from '@/types/setting';
   import { feeTypeList } from '@/utils/constant';
 
+  const isLoading = ref<boolean>(false);
   const props = defineProps<{
     visible: boolean;
     isEdit: boolean;
@@ -132,7 +133,9 @@
     { immediate: true }
   );
   const handleOk = async () => {
+    if (isLoading.value) return;
     try {
+      isLoading.value = true;
       const valid = await formRef.value.validate();
       if (valid) return;
       const res = props?.isEdit ? await updateFee(form) : await createFee(form);
@@ -143,6 +146,8 @@
       }
     } catch (err) {
       // 捕获异常，暂不处理
+    } finally {
+      isLoading.value = false;
     }
   };
 

src/views/setting/user/components/change-role-drawer.vue

@@ -40,6 +40,7 @@
   import { updateUserRole } from '@/api/setting';
   import { UpdateUserRoleParam, RoleItem } from '@/types/setting';
 
+  const isLoading = ref<boolean>(false);
   const props = defineProps<{
     visible: boolean;
     roleId: number | null;
@@ -76,7 +77,9 @@
     { immediate: true }
   );
   const handleOk = async () => {
+    if (isLoading.value) return;
     try {
+      isLoading.value = true;
       const valid = await formRef.value.validate();
       if (valid) return;
       const params = { ...form };
@@ -88,6 +91,8 @@
       }
     } catch (error) {
       // 捕获异常，暂不处理
+    } finally {
+      isLoading.value = false;
     }
   };
 

src/views/setting/user/components/role-form-drawer.vue

@@ -40,6 +40,7 @@
   import { updateRole, createRole } from '@/api/setting';
   import { RoleFormParam, RoleItem } from '@/types/setting';
 
+  const isLoading = ref<boolean>(false);
   const props = defineProps<{
     visible: boolean;
     isEdit: boolean;
@@ -92,7 +93,9 @@
     { immediate: true }
   );
   const handleOk = async () => {
+    if (isLoading.value) return;
     try {
+      isLoading.value = true;
       const valid = await formRef.value.validate();
       if (valid) return;
       const params = { ...form };
@@ -106,6 +109,8 @@
       }
     } catch (err) {
       // 捕获异常，暂不处理
+    } finally {
+      isLoading.value = false;
     }
   };
 

src/views/setting/user/components/user-form-drawer.vue

@@ -114,6 +114,7 @@
   import { createUser, updateUser } from '@/api/setting';
   import { DepartmentItem, RoleItem, FormUserItem } from '@/types/setting';
 
+  const isLoading = ref<boolean>(false);
   const props = defineProps<{
     visible: boolean;
     isEdit: boolean;
@@ -242,7 +243,9 @@
     { immediate: true }
   );
   const handleOk = async () => {
+    if (isLoading.value) return;
     try {
+      isLoading.value = true;
       const valid = await formRef.value.validate();
       if (valid) return;
       const params = { ...form };
@@ -255,6 +258,8 @@
       emit('update:visible', false);
     } catch (err) {
       // 处理错误
+    } finally {
+      isLoading.value = false;
     }
   };