完成小区相关的接口对接

.env.development

@@ -1,6 +1,7 @@
 # 页面标题
-VITE_APP_TITLE =
+VITE_APP_TITLE =  智慧物业后台管理系统
-VITE_APP_LOGO_TITLE = RuoYi-Vue-Plus
+
+VITE_APP_LOGO_TITLE = 智慧物业后台管理系统
 
 # 开发环境配置
 VITE_APP_ENV = 'development'
@@ -17,7 +18,7 @@ VITE_APP_MONITOR_ADMIN = 'http://192.168.0.222/admin/applications'
 # SnailJob 控制台地址
 VITE_APP_SNAILJOB_ADMIN = 'http://192.168.0.222/snail-job'
 
-VITE_APP_PORT = 80
+VITE_APP_PORT = 5173
 
 # 接口加密功能开关(如需关闭 后端也必须对应关闭)
 VITE_APP_ENCRYPT = true

package.json

@@ -29,6 +29,7 @@
     "axios": "1.13.6",
     "crypto-js": "4.2.0",
     "echarts": "6.0.0",
+    "element-china-area-data": "^6.1.0",
     "element-plus": "2.13.5",
     "file-saver": "2.0.5",
     "highlight.js": "11.11.1",

src/api/system/community/index.ts

@@ -0,0 +1,59 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { communitylist_rows_type } from './type';
+
+// 查询小区列表
+export function getCommunitylistAPI(): AxiosPromise<communitylist_rows_type[]> {
+  return request({
+    url: '/village/list',
+    method: 'get'
+  });
+}
+/** 通过小区id获取小区信息 */
+export function getVillageByIdAPI(id: string): AxiosPromise<communitylist_rows_type> {
+  return request({
+    url: `/village/${id}`,
+    method: 'get'
+  });
+}
+/** 删除小区 */
+export function deleteVillageByIdAPI(id: number): AxiosPromise<null> {
+  return request({
+    url: `/village/${id}`,
+    method: 'delete'
+  });
+}
+/** 上传小区图片 */
+export function uploadVillageImageAPI(formdata: FormData): AxiosPromise<{ fileName: string; url: string; ossId: string }[]> {
+  return request({
+    url: `/village/uploadImages`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: formdata
+  });
+}
+/** 添加小区 */
+export function addVillageAPI<T>(data: T) {
+  return request({
+    url: `/village`,
+    method: 'post',
+    data: data
+  });
+}
+/** 添加小区 */
+export function editVillageAPI<T>(data: T) {
+  return request({
+    url: `/village`,
+    method: 'put',
+    data: data
+  });
+}
+/**切换小区 */
+export function switchVillageAPI(villageId: number) {
+  return request({
+    url: `/village/switchVillage/${villageId}`,
+    method: 'POST'
+  });
+}

src/api/system/community/type.ts

@@ -0,0 +1,20 @@
+export interface communitylist_rows_type {
+  villageId?: number;
+  villageName: string;
+  villageCode: string;
+  address: string;
+  houseUse: number | null;
+  villageArea: number;
+  remark: string;
+  parkingSpaceCount: number;
+  villageImageUrl: string;
+  city: string | string[];
+  status: '0' | '1';
+  manageName: string;
+  managePhone: string;
+  manageVx: string;
+  manageEmail: string;
+  manageQq: string;
+  completDate: string;
+  choiceStatus: 0 | 1;
+}

src/api/system/house/index.ts

@@ -0,0 +1,24 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { BuildingUnit, BuildingVo } from './type';
+
+// 楼栋---------------------------------------------------------------------------------------
+// 根据 小区id 和 类型 查询楼栋信息
+export function getBuildinglistAPI(villageId: number, buildingUse: number): AxiosPromise<BuildingVo[]> {
+  return request({
+    url: '/building/byVillage',
+    method: 'get',
+    params: {
+      villageId: villageId,
+      buildingUse: buildingUse
+    }
+  });
+}
+
+// 房屋----------------------------------------------------------------------------------------------
+export function getHouselistAPI(buildingId: number): AxiosPromise<BuildingUnit[]> {
+  return request({
+    url: `/house/groupByUnitTree/${buildingId}`,
+    method: 'get'
+  });
+}

src/api/system/house/type.ts

@@ -0,0 +1,65 @@
+export interface BuildingVo {
+  /**
+   * 楼栋名称/编号
+   */
+  buildingName: string;
+  /**
+   * 0住宅 1办公 2商用 3公寓
+   */
+  buildingUse: number;
+  /**
+   * 楼栋结构
+   */
+  buildStructure?: string;
+  /**
+   * 楼高
+   */
+  buildTall?: string;
+  /**
+   * 楼栋朝向
+   */
+  buildToward?: string;
+  /**
+   * 层数
+   */
+  floorCount?: number;
+  /**
+   * 楼栋ID
+   */
+  id: number;
+  /**
+   * 备注
+   */
+  remark?: string;
+  /**
+   * 单元数
+   */
+  unitCount?: number;
+  /**
+   * 所属小区ID
+   */
+  villageId?: number;
+  villageName?: string;
+}
+
+// 楼栋
+export interface BuildingUnit {
+  actualFloorCount: number;
+  buildingFloorCount: number;
+  buildingId: number;
+  buildingName: string;
+  totalHouses: number;
+  unitNo: string;
+  floors: string;
+  floors_Json?: FloorsType[];
+}
+// 楼层
+export interface FloorsType {
+  floorNo: string;
+  houses: HouseType[];
+}
+// 房间
+export interface HouseType {
+  houseId: number;
+  houseNo: string;
+}

src/assets/styles/index.scss

@@ -17,15 +17,6 @@ body {
   background: var(--el-bg-color-page);
   font-family: 'MiSans', 'HarmonyOS Sans SC', 'PingFang SC', 'Source Han Sans SC', 'Noto Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
 }
-/* 图片统一初始化 */
-img {
-  border: none;
-  vertical-align: middle;
-  max-width: 100%;
-  height: auto;
-  -webkit-user-drag: none;
-  user-select: none;
-}
 label {
   font-weight: 600;
 }

src/components/Breadcrumb/index.vue

@@ -38,7 +38,6 @@ const getBreadcrumb = () => {
     matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
   }
   levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
-  console.log(levelList.value);
 };
 const findPathNum = (str, char = '/') => {
   if (typeof str !== 'string' || str.length === 0) return 0;

src/components/ContextMenu/index.vue

@@ -45,7 +45,6 @@ const open = async (e: MouseEvent, value: any) => {
   if (left + rect.width > window.innerWidth) {
     left = window.innerWidth - rect.width - 8;
   }
-  console.log('window', window.innerWidth);
 
   // 下边界碰撞
   if (top + rect.height > window.innerHeight) {
@@ -69,7 +68,6 @@ const open = async (e: MouseEvent, value: any) => {
 // 关闭
 const close = () => {
   show.value = false;
-  console.log('close');
   document.removeEventListener('click', close);
   document.removeEventListener('contextmenu', close);
 };

src/components/Pageheader/index.vue

@@ -14,8 +14,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 import Breadcrumb from '@/components/Breadcrumb/index.vue';
 const slots = useSlots();
 const showSlot = computed(() => {
@@ -28,6 +26,10 @@ const props = defineProps({
     default: '房屋管理'
   }
 });
+
+defineSlots<{
+  content?: () => void;
+}>();
 </script>
 
 <style scoped lang="scss">

src/components/Process/submitVerify.vue

@@ -271,7 +271,6 @@ const openDialog = async (id?: string) => {
   selectCopyUserList.value = task.value.copyList;
   selectCopyUserIds.value = task.value.copyList.map((e) => e.userId).join(',');
   varNodeList.value = task.value.varList;
-  console.log('varNodeList', varNodeList.value);
   buttonDisabled.value = false;
   try {
     const data = {

src/enums/RespEnum.ts

@@ -56,9 +56,9 @@ export enum HttpStatus {
    */
   UNSUPPORTED_TYPE = 415,
   /**
-   * 系统内部错误
+   * 图片上传-全部失败
    */
-  SERVER_ERROR = 500,
+  UPLOAD_IMG_ALL_ERROR = 500,
   /**
    * 接口未实现
    */
@@ -84,7 +84,7 @@ export enum HttpStatus {
    */
   DATABASE_ERROR = 522,
   /**
-   * 系统警告消息
+   * 图片上传-部分失败
    */
-  WARN = 601
+  UPLOAD_IMG_ERROR = 601
 }

src/layout/components/Navbar.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="navbar" :class="'nav' + navType">
-    <!-- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" /> -->
-    <!-- <breadcrumb v-if="navType == NavTypeEnum.LEFT" id="breadcrumb-container" class="breadcrumb-container" /> -->
     <div class="right-menu flex align-center">
       <template v-if="appStore.device !== 'mobile'">
-        <!-- 消息 -->
         <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">
           <div>
             <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
@@ -31,12 +28,9 @@
               <el-dropdown-item divided command="changecommunity">
                 <span>{{ proxy.$t('navbar.community') }}</span>
               </el-dropdown-item>
-              <router-link v-if="!dynamic" to="/user/profile">
+              <router-link to="/user/profile">
                 <el-dropdown-item>{{ proxy.$t('navbar.personalCenter') }}</el-dropdown-item>
               </router-link>
-              <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
-                <span>{{ proxy.$t('navbar.layoutSetting') }}</span>
-              </el-dropdown-item>
               <el-dropdown-item divided command="logout">
                 <span>{{ proxy.$t('navbar.logout') }}</span>
               </el-dropdown-item>
@@ -93,7 +87,6 @@ const logout = async () => {
 
 const routerPush = useRouter();
 const changecommunity = () => {
-  console.log('change community');
   routerPush.push({
     path: '/community'
   });
@@ -152,8 +145,9 @@ watch(
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: var(--el-bg-color);
+  background: #1a75ff;
-  border-bottom: 1px solid var(--el-border-color-lighter);
+  color: #fff;
+  border-bottom: 1px solid #1a75ff;
   box-shadow: none;
   display: flex;
   align-items: center;
@@ -218,16 +212,16 @@ watch(
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: var(--el-text-color-regular);
+      color: #fff;
       vertical-align: text-bottom;
 
       &.hover-effect {
         cursor: pointer;
         transition: background 0.3s;
 
-        &:hover {
+        // &:hover {
-          background: var(--el-fill-color-lighter);
+        //   background: var(--el-fill-color-lighter);
-        }
+        // }
       }
     }
 

src/layout/components/Sidebar/Logo.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
-    class="sidebar-logo-container"
-    :class="{ collapse: collapse }"
-  >
     <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
@@ -11,7 +8,6 @@
         </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
         <h1 class="sidebar-title">
           {{ title }}
         </h1>
@@ -41,24 +37,24 @@ const sideTheme = computed(() => settingsStore.sideTheme);
 // 获取Logo背景色
 const getLogoBackground = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-bg)'
+    return 'var(--sidebar-bg)';
   }
   if (settingsStore.navType == NavTypeEnum.TOP) {
-    return variables.menuLightBackground
+    return variables.menuLightBackground;
   }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBackground
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBackground;
-})
+});
 
 // 获取Logo文字颜色
 const getLogoTextColor = computed(() => {
   if (settingsStore.isDark) {
-    return 'var(--sidebar-text)'
+    return 'var(--sidebar-text)';
   }
   if (settingsStore.navType == NavTypeEnum.TOP) {
-    return variables.logoLightTitleColor
+    return variables.logoLightTitleColor;
   }
-  return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor
+  return sideTheme.value === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor;
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -75,9 +71,10 @@ const getLogoTextColor = computed(() => {
   position: relative;
   height: 50px;
   line-height: 50px;
-  background: v-bind(getLogoBackground);
+  background-color: #1a75ff;
   text-align: center;
   overflow: hidden;
+  box-shadow: none;
 
   & .sidebar-logo-link {
     height: 100%;
@@ -98,7 +95,12 @@ const getLogoTextColor = computed(() => {
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      font-family:
+        Avenir,
+        Helvetica Neue,
+        Arial,
+        Helvetica,
+        sans-serif;
       vertical-align: middle;
     }
   }

src/layout/components/Sidebar/index.vue

@@ -50,7 +50,6 @@ const activeMenu = computed(() => {
   }
   return path;
 });
-
 const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
 const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
 </script>

src/layout/components/TagsView/index.vue

@@ -12,7 +12,7 @@
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openMenu(tag, $event)"
       >
-        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon"/>
+        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
         <span class="tags-view-item-title">{{ tag.title }}</span>
         <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
           <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
@@ -52,7 +52,7 @@ const router = useRouter();
 const visitedViews = computed(() => useTagsViewStore().getVisitedViews());
 const routes = computed(() => usePermissionStore().getRoutes());
 const theme = computed(() => useSettingsStore().theme);
-const tagsIcon = computed(() => useSettingsStore().tagsIcon)
+const tagsIcon = computed(() => useSettingsStore().tagsIcon);
 
 watch(route, () => {
   addTags();
@@ -261,7 +261,11 @@ onMounted(() => {
       margin-left: 5px;
       margin-top: 4px;
       border-radius: var(--app-radius-md);
-      transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease,
+        border-color 0.2s ease,
+        color 0.2s ease;
       &:hover {
         color: var(--el-color-primary);
         border-color: var(--el-color-primary-light-5);

src/router/index.ts

@@ -65,7 +65,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: 'AddCommunity',
         hidden: true,
         meta: {
-          title: '新建小区'
+          title: '小区管理'
         },
         component: () => import('@/views/community/AddCommunity.vue')
       }

src/settings.ts

@@ -12,7 +12,7 @@ const setting: DefaultSettings = {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
   /**
    * 是否系统布局配置
    */

src/store/modules/house.ts

@@ -1,16 +1,55 @@
+import { getCommunitylistAPI } from '@/api/system/community';
+import { communitylist_rows_type } from '@/api/system/community/type';
+import { getBuildinglistAPI, getHouselistAPI } from '@/api/system/house';
+import { BuildingUnit, BuildingVo } from '@/api/system/house/type';
 import { defineStore } from 'pinia';
-import { reactive } from 'vue';
 
 export const useHouseStore = defineStore('house', () => {
-  const state = reactive({
+  // 当前小区信息
-    // 小区信息
+  const currentVilageInfo = ref<communitylist_rows_type>();
-    communityInfo: {},
+
-    // 楼栋信息
+  // 当前小区 所有楼栋信息
-    houseList: [],
+  const currentBuildingInfoList = ref<BuildingVo[]>([]);
-    // 房屋信息
+  // 当前楼栋信息
-    houseInfo: {}
+  const currentBuildingInfo = ref<BuildingVo>();
-  });
+
+  // 当前楼栋 所有房屋信息
+  const currentHouseInfoList = ref<BuildingUnit[]>([]);
+
+  // 初始化
+  const initHouse = async (buildingtype: number) => {
+    const res = await getCommunitylistAPI();
+    const currentVilage = res.rows.find((item) => item.choiceStatus === 0);
+    currentVilageInfo.value = currentVilage;
+    // 获取当前小区 所有楼栋信息
+    const res2 = await getBuildinglistAPI(currentVilage.villageId, buildingtype);
+    currentBuildingInfoList.value = res2.data;
+    // 获取当前小区 楼栋信息
+    currentBuildingInfo.value = res2.data[0];
+    // 获取当前楼栋 所有房屋信息
+    const res3 = await getHouselistAPI(currentBuildingInfo.value.id);
+    currentHouseInfoList.value = res3.data;
+  };
+
+  // 切换住宅类型
+  const switchHouseType = (housetype: 0 | 1 | 2 | 3) => {
+    getBuildinglistAPI(currentVilageInfo.value.villageId, housetype)
+      .then(() => ElMessage.success('切换成功'))
+      .catch(() => ElMessage.error('切换失败'));
+  };
+
+  // 切换楼栋
+  const switchBuilding = (buildingId: number) => {
+    getHouselistAPI(buildingId).then(() => ElMessage.success('切换成功'));
+  };
+
   return {
-    state
+    currentVilageInfo,
+    currentBuildingInfoList,
+    currentBuildingInfo,
+    currentHouseInfoList,
+    initHouse,
+    switchHouseType,
+    switchBuilding
   };
 });

src/store/modules/settings.ts

@@ -4,7 +4,6 @@ import { useDynamicTitle } from '@/utils/dynamicTitle';
 import { useStorage } from '@vueuse/core';
 import { ref } from 'vue';
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
-
 export const useSettingsStore = defineStore('setting', () => {
   const storageSetting = useStorage<LayoutSetting>('layout-setting', {
     topNav: defaultSettings.topNav,

src/types/axios.d.ts

@@ -4,6 +4,6 @@ declare module 'axios' {
     code: number;
     msg: string;
     rows: T;
-    total: number;
+    total?: number;
   }
 }

src/utils/request.ts

@@ -151,12 +151,14 @@ service.interceptors.response.use(
         });
       }
       return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
-    } else if (code === HttpStatus.SERVER_ERROR) {
+      // 图片上传全部失败 500
-      ElMessage({ message: msg, type: 'error' });
+    } else if (code === HttpStatus.UPLOAD_IMG_ALL_ERROR) {
-      return Promise.reject(new Error(msg));
+      ElMessage({ message: '图片全部上传失败', type: 'error' });
-    } else if (code === HttpStatus.WARN) {
-      ElMessage({ message: msg, type: 'warning' });
       return Promise.reject(new Error(msg));
+      // 图片上传部分失败 601
+    } else if (code === HttpStatus.UPLOAD_IMG_ERROR) {
+      ElMessage({ message: '部分图片上传失败', type: 'warning' });
+      return Promise.reject(res.data);
     } else if (code !== HttpStatus.SUCCESS) {
       ElNotification.error({ title: msg });
       return Promise.reject('error');

src/utils/vartype.ts

@@ -0,0 +1,9 @@
+// 判断是不是 File 文件
+function isFile(file) {
+  return file instanceof File;
+}
+
+// 判断是不是字符串
+function isString(str) {
+  return typeof str === 'string';
+}

src/views/community/AddCommunity.vue

@@ -1,32 +1,39 @@
 <template>
-  <div class="container AddBuildingBox">
+  <div class="box">
-    <PageHeader title="新建小区"></PageHeader>
+    <div class="header">
-    <el-form inline class="formBody" ref="formRef" :model="form" :rules="rules" label-width="100px">
+      <span>智慧物业后台管理系统</span>
-      <div class="AddBuildingBody">
+      <navbar ref="navbarRef" />
-        <div class="title">基本信息</div>
+    </div>
-        <div class="addBuildingFormBody">
+    <div class="container AddBuildingBox">
-          <el-form-item label="小区名称" prop="buildingName">
+      <PageHeader :title="isedit ? '编辑小区' : '添加小区'"> </PageHeader>
-            <el-input v-model="form.buildingName" placeholder="请输入小区名称" />
+      <el-form inline class="formBody" ref="formRef" :model="form" :rules="rules" label-width="100px">
-          </el-form-item>
+        <div class="AddBuildingBody">
-          <el-form-item label="小区编号" prop="buildingCode">
+          <div class="title">基本信息</div>
-            <el-input v-model="form.buildingCode" placeholder="请输入小区编号" />
+          <div class="addBuildingFormBody">
-          </el-form-item>
+            <el-form-item label="小区名称" prop="villageName">
-          <el-form-item label="所在城市" prop="buildingType">
+              <el-input v-model.trim="form.villageName" placeholder="请输入小区名称" />
-            <el-input v-model="form.buildingType" placeholder="请输入楼高(m)" />
+            </el-form-item>
-          </el-form-item>
+            <el-form-item label="小区编号" prop="villageCode">
-          <el-form-item label="详细地址" prop="buildingArea">
+              <el-input v-model.trim="form.villageCode" placeholder="请输入小区编号" />
-            <el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
+            </el-form-item>
-          </el-form-item>
+            <el-form-item label="所在城市" prop="city">
-          <el-form-item label="建成时间" prop="buildingArea">
+              <el-cascader :options="pcaTextArrlist" v-model="city" @change="cityChange"> </el-cascader>
-            <el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" />
+            </el-form-item>
-          </el-form-item>
+            <el-form-item label="详细地址" prop="buildingArea">
-          <el-form-item label="房屋用途" prop="buildingArea">
+              <el-input v-model.trim="form.address" placeholder="请输入详细地址" />
-            <el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
+            </el-form-item>
-          </el-form-item>
+            <el-form-item label="建成时间" prop="buildingArea">
-          <el-form-item label="小区面积" prop="buildingArea">
+              <el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" value-format="YYYY-MM-DD" @change="changeBuiltTime" />
-            <el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
+            </el-form-item>
-          </el-form-item>
+            <el-form-item label="房屋用途" prop="buildingArea">
-          <el-form-item label="小区楼栋" prop="buildingArea">
+              <el-select v-model="form.houseUse" placeholder="请选择房屋用途" style="width: 240px">
+                <el-option v-for="item in houseUserList" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="小区面积" prop="villageArea">
+              <el-input v-model.trim.number="form.villageArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
+            </el-form-item>
+            <!-- <el-form-item label="小区楼栋" prop="buildingArea">
             <el-input v-model="form.buildingArea" placeholder="请输入小区楼栋"><template #append>栋</template> </el-input>
           </el-form-item>
           <el-form-item label="小区房屋" prop="buildingArea">
@@ -34,81 +41,339 @@
           </el-form-item>
           <el-form-item label="小区面积" prop="buildingArea">
             <el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
-          </el-form-item>
+          </el-form-item> -->
-          <el-form-item label="车位数量" prop="buildingArea">
+            <el-form-item label="车位数量" prop="parkingSpaceCount">
-            <el-input v-model="form.buildingArea" placeholder="请输入车位数量">
+              <el-input v-model.trim.number="form.parkingSpaceCount" placeholder="请输入车位数量">
-              <template #append>个</template>
+                <template #append>个</template>
-            </el-input>
+              </el-input>
-          </el-form-item>
+            </el-form-item>
-          <el-form-item style="width: 100%" label="小区图片" prop="buildingArea">
+            <el-form-item style="width: 100%" label="小区图片">
-            <el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
+              <el-upload
-          </el-form-item>
+                accept=".jpg, .png"
-          <el-form-item style="width: 100%" label="小区简介" prop="buildingArea">
+                ref="uploadRef"
-            <el-input v-model="form.textarea" :rows="5" type="textarea" placeholder="小区简介" />
+                :action="uploadfileurl"
-          </el-form-item>
+                :headers="headerToken()"
-        </div>
+                list-type="picture-card"
-      </div>
+                :file-list="villageImg"
-      <div class="AddBuildingBody">
+                :auto-upload="false"
-        <div class="title">负责人信息</div>
+                @change="handleUploadChange"
-        <div class="addBuildingFormBody addBuildingForm_User_Body">
+                @before-upload="handleBeforeUpload"
-          <el-form-item label="姓名" prop="buildingName">
+              >
-            <el-input v-model="form.buildingName" placeholder="请输入姓名" />
+                <el-icon><Plus /></el-icon>
-          </el-form-item>
+                <template #file="{ file }">
-          <el-form-item label="电话" prop="buildingCode">
+                  <div>
-            <el-input v-model="form.buildingCode" placeholder="请输入电话" />
+                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-          </el-form-item>
+                    <span class="el-upload-list__item-actions">
-          <el-form-item label="微信" prop="buildingArea">
+                      <span class="el-upload-list__item-delete" @click="handleRemove(file)">
-            <el-input v-model="form.buildingArea" placeholder="请输入微信"> </el-input>
+                        <el-icon><Delete /></el-icon>
-          </el-form-item>
+                      </span>
-          <el-form-item label="QQ" prop="buildingArea">
+                    </span>
-            <el-input v-model="form.buildingArea" placeholder="请输入QQ"> </el-input>
+                  </div>
-          </el-form-item>
+                </template>
-          <el-form-item label="邮箱" prop="buildingArea">
+                <template #tip>
-            <el-input v-model="form.buildingArea" placeholder="请输入邮箱"> </el-input>
+                  <div class="el-upload__tip">支持jpg, png等格式文件上传，文件大小不超过10MB，可上传多张</div>
-          </el-form-item>
+                </template>
-          <div class="pl-100px">
+              </el-upload>
-            <el-button type="primary" @click="submitForm">提交</el-button>
+            </el-form-item>
-            <el-button @click="cancelForm">取消</el-button>
+            <el-form-item style="width: 100%" label="小区简介">
+              <el-input v-model.trim="form.remark" :rows="5" type="textarea" placeholder="小区简介" />
+            </el-form-item>
           </div>
         </div>
-      </div>
+        <div class="AddBuildingBody">
-    </el-form>
+          <div class="title">负责人信息</div>
+          <div class="addBuildingFormBody addBuildingForm_User_Body">
+            <el-form-item label="姓名">
+              <el-input v-model.trim="form.manageName" placeholder="请输入姓名" />
+            </el-form-item>
+            <el-form-item label="电话">
+              <el-input v-model.trim="form.managePhone" placeholder="请输入电话" />
+            </el-form-item>
+            <el-form-item label="微信">
+              <el-input v-model.trim="form.manageVx" placeholder="请输入微信"> </el-input>
+            </el-form-item>
+            <el-form-item label="QQ">
+              <el-input v-model.trim="form.manageQq" placeholder="请输入QQ"> </el-input>
+            </el-form-item>
+            <el-form-item label="邮箱">
+              <el-input v-model.trim="form.manageEmail" placeholder="请输入邮箱"> </el-input>
+            </el-form-item>
+            <div class="pl-100px">
+              <el-button type="primary" @click="submitForm">提交</el-button>
+              <el-button @click="cancelForm">取消</el-button>
+            </div>
+          </div>
+        </div>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Navbar from '@/layout/components/Navbar.vue';
 import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
+import { pcaTextArr } from 'element-china-area-data';
+import type { DataItem } from 'element-china-area-data';
+import { useUserStore } from '@/store/modules/user';
+import { CascaderValue } from 'element-plus';
+import { addVillageAPI, editVillageAPI, getVillageByIdAPI, uploadVillageImageAPI } from '@/api/system/community/index';
+import { communitylist_rows_type } from '@/api/system/community/type';
+const route = useRoute();
+const router = useRouter();
+const editId = ref(route.query.id as string);
+const isedit = computed(() => Boolean(editId.value));
+
+const apipriex = import.meta.env.VITE_APP_BASE_API;
+const uploadfileurl = `${apipriex}/village/uploadImages`;
+// 获取省 市 区
+const pcaTextArrlist = ref<DataItem[]>(pcaTextArr);
+// 获取小区用途
+const houseUserList = ref([
+  {
+    value: 0,
+    label: '住宅'
+  },
+  {
+    value: 1,
+    label: '商住两用'
+  },
+  {
+    value: 2,
+    label: '商业'
+  },
+  {
+    value: 3,
+    label: '办公'
+  }
+]);
 const formRef = ref();
-const form = ref({
+const uploadRef = ref();
-  buildingName: '',
+
-  buildingCode: '',
+const form = ref<communitylist_rows_type>({
-  buildingType: '',
+  villageName: '',
-  buildingArea: '',
+  villageCode: '',
-  buildingAddress: null,
+  address: '',
-  buildingDescription: null,
+  houseUse: null,
-  textarea: ''
+  villageArea: 0,
+  remark: '',
+  parkingSpaceCount: 0,
+  villageImageUrl: '',
+  city: '',
+  status: '0',
+  choiceStatus: 1, // 0  选择 1未选择
+  manageName: '',
+  managePhone: '',
+  manageVx: '',
+  manageEmail: '',
+  manageQq: '',
+  completDate: ''
 });
 const builtTime = ref(null);
+const city = ref<string[]>([]);
+const villageImg = ref([]);
+
+// 表单验证
 const rules = ref({
-  buildingName: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
+  villageName: [{ required: true, message: '请输入小区名称', trigger: 'blur' }],
-  buildingAddress: [{ required: true, message: '请输入单元数', trigger: 'blur' }],
+  villageCode: [{ required: true, message: '请输入小区编号', trigger: 'blur' }],
-  buildingDescription: [{ required: true, message: '请输入楼层', trigger: 'blur' }]
+  city: [{ required: true, message: '请选择城市', trigger: 'blur' }]
 });
 
+/** 获取编辑小区的信息 */
+function getCommunityinfo() {
+  getVillageByIdAPI(editId.value).then((res) => {
+    city.value = (res.data.city as string).split('/');
+    if (res.data.villageImageUrl) {
+      villageImg.value = res.data.villageImageUrl
+        .split(',')
+        .filter((item) => item !== '')
+        .map((item) => {
+          return {
+            name: item.split('/').pop(),
+            url: item
+          };
+        });
+    }
+    builtTime.value = res.data.completDate.split(' ')[0];
+    form.value = {
+      ...res.data,
+      completDate: builtTime.value
+    };
+  });
+}
+if (isedit.value) {
+  getCommunityinfo();
+}
+// 请求头
+function headerToken() {
+  const useStore = useUserStore();
+  return {
+    Authorization: 'Bearer ' + useStore.token
+  };
+}
+
+/** 检测文件大小和格式 */
+function handleBeforeUpload(file: UploadFile): Promise<boolean | { file: UploadFile; type: string }> {
+  return new Promise((resolve, reject) => {
+    const isLt10M = file.size / 1024 / 1024 < 10;
+    if (!isLt10M) {
+      reject({
+        type: '文件大小错误',
+        file: file
+      });
+    } else if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
+      reject({
+        type: '文件类型错误',
+        file: file
+      });
+    } else {
+      resolve(true);
+    }
+  });
+}
+/** 上传狗子 */
+async function handleUploadChange(file: UploadFile) {
+  const isupload = await handleBeforeUpload(file);
+  if (typeof isupload === 'object') {
+    ElMessage.error(isupload.type);
+    return;
+  } else if (typeof isupload === 'boolean' && isupload === true) {
+    villageImg.value.push(file.raw);
+  }
+}
+
+/** 移除钩子 */
+const handleRemove = (file: UploadFile) => {
+  villageImg.value = villageImg.value.filter((item) => item.uid !== file.uid);
+};
+
+// 改变时间
+const changeBuiltTime = (value: string) => {
+  form.value.completDate = value;
+};
+const cityChange = (value: CascaderValue[]) => {
+  form.value.city = value.join('/');
+};
+
+const reg = {
+  phone: /^1[3-9]\d{9}$/,
+  email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+  qq: /^[1-9]\d{4,11}$/,
+  wechat: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
+};
+
+// 使用
+reg.phone.test('13800138000');
+//  上传图片
 const submitForm = () => {
   formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      console.log(form.value);
+      // 1) 将图片拆分为“新上传文件”和“已有图片URL”
+      const newFiles: File[] = [];
+      const existingUrls: string[] = [];
+      villageImg.value.forEach((item: any) => {
+        // 新增图片：handleUploadChange push 进来的是 File
+        if (item instanceof File) {
+          newFiles.push(item);
+          return;
+        }
+        // 编辑态已有图片：通常是 { name, url } 结构
+        if (item && typeof item === 'object' && typeof item.url === 'string') {
+          existingUrls.push(item.url);
+          return;
+        }
+        // 兜底：如果有字符串URL也兼容
+        if (typeof item === 'string') {
+          existingUrls.push(item);
+        }
+      });
+      // 2) 没有新文件：不调用上传接口，直接用已有URL提交
+      if (newFiles.length === 0) {
+        form.value.villageImageUrl = existingUrls.join(',');
+        submitFormInfo();
+        return;
+      }
+
+      // 3) 有新文件：先上传新文件，再与已有URL合并
+      const formdata = new FormData();
+      newFiles.forEach((file) => formdata.append('files', file));
+
+      uploadVillageImageAPI(formdata).then((res) => {
+        const uploadedUrls = res.data.map((x) => x.url).filter(Boolean);
+        // 4) 最终图片 = 已有图片 + 新上传图片（避免覆盖）
+        form.value.villageImageUrl = [...existingUrls, ...uploadedUrls].join(',');
+        submitFormInfo();
+      });
     }
   });
 };
+
+function submitFormInfo() {
+  if (form.value.managePhone.trim()) {
+    if (reg.phone.test(form.value.managePhone)) {
+      ElMessage.error('请输入正确的手机号码');
+      return;
+    }
+  }
+  if (form.value.manageVx.trim()) {
+    if (reg.wechat.test(form.value.manageVx)) {
+      ElMessage.error('请输入正确的微信号');
+      return;
+    }
+  }
+  if (form.value.manageQq.trim()) {
+    if (reg.qq.test(form.value.manageQq)) {
+      ElMessage.error('请输入正确的QQ号码');
+      return;
+    }
+  }
+  if (form.value.manageEmail.trim()) {
+    if (reg.email.test(form.value.manageEmail)) {
+      ElMessage.error('请输入正确的邮箱号码');
+      return;
+    }
+  }
+
+  if (isedit.value) {
+    editVillageAPI<communitylist_rows_type>(form.value).then((res) => {
+      ElMessage.success('编辑成功');
+      router.push({
+        path: '/community'
+      });
+    });
+  } else {
+    addVillageAPI<communitylist_rows_type>(form.value).then((res) => {
+      ElMessage.success('添加成功');
+      router.push({
+        path: '/community'
+      });
+    });
+  }
+}
 const cancelForm = () => {
   console.log('取消');
 };
 </script>
 
 <style scoped lang="scss">
+.box {
+  .header {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+    background-color: #1a75ff;
+    & > div {
+      flex: 1;
+    }
+    & > span {
+      padding-left: 20px;
+      font-size: 20px;
+      color: white;
+    }
+  }
+}
 .AddBuildingBox {
   padding: 15px;
   height: 100%;
@@ -128,7 +393,7 @@ const cancelForm = () => {
     background-color: rgba(255, 255, 255, 1);
     color: rgba(16, 16, 16, 1);
     border-bottom: 1px solid #bbbbbb;
-    margin-bottom: 60px;
+    margin-bottom: 50px;
   }
   .addBuildingFormBody {
     width: 900px;

src/views/community/index.vue

@@ -1,76 +1,153 @@
 <template>
-  <div class="container">
+  <div class="box">
-    <div class="community_nav_box">
+    <div class="header">
-      <div class="currentbox">当前小区：xxxxxxxxxxxxx</div>
+      <span class="">智慧物业后台管理系统</span>
-      <div class="subtitle flex align-center">
+      <navbar ref="navbarRef" />
-        <div class="line"></div>
-        <div class="changecommunity">切换小区</div>
-      </div>
     </div>
-    <div class="communityBody">
+    <div class="container">
-      <div
+      <div class="community_nav_box">
-        class="coummunity_card"
+        <div class="currentbox">当前小区:{{ currentViliageInfo && currentViliageInfo.villageName }}</div>
-        :class="{
+        <div class="subtitle flex align-center">
-          activeCommunity: index === 2
+          <div class="line"></div>
-        }"
+          <div class="changecommunity">切换小区</div>
-        v-for="(item, index) in list"
-        :key="index"
-      >
-        <img src="https://picsum.photos/400/400" alt="" />
-        <div class="coummunityaction_box">
-          <div class="coummunityname">{{ item.name }}</div>
-          <div class="counmmunityaddress">{{ item.address }}</div>
-        </div>
-        <div class="actions flex">
-          <div>管理</div>
-          <div>编辑</div>
-          <div>删除</div>
         </div>
       </div>
-      <div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
+      <div class="communityBody">
-        <div class="addCoummunity">
+        <div
-          <el-icon>
+          class="coummunity_card"
-            <AddLocation></AddLocation>
+          :class="{
-          </el-icon>
+            activeCommunity: item.choiceStatus === 0
-          <div>添加小区</div>
+          }"
+          v-for="(item, index) in list"
+          :key="index"
+        >
+          <el-image :src="item.villageImageUrl ? item.villageImageUrl.split(',')[0] : ''">
+            <template #error>
+              <div class="image-viewer-slot image-slot">
+                <el-icon><Picture /></el-icon>
+              </div>
+            </template>
+          </el-image>
+          <div class="coummunityaction_box">
+            <div class="coummunityname">{{ item.villageName }}</div>
+            <div class="counmmunityaddress">{{ item.address }}</div>
+          </div>
+          <div class="actions flex">
+            <div
+              @click="handleclick(item)"
+              :style="{
+                color: item.choiceStatus === 0 ? 'green' : ''
+              }"
+            >
+              {{ item.choiceStatus === 0 ? '进入' : '管理' }}
+            </div>
+            <div @click="handleEdit(item)">编辑</div>
+            <div @click="handleDelete(item)">删除</div>
+          </div>
+        </div>
+        <div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
+          <div class="addCoummunity">
+            <el-icon>
+              <AddLocation></AddLocation>
+            </el-icon>
+            <div>添加小区</div>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-const list = ref([
+import Navbar from '@/layout/components/Navbar.vue';
-  {
+import { deleteVillageByIdAPI, switchVillageAPI, getCommunitylistAPI } from '@/api/system/community/index';
-    name: '北境碧桂园小区',
+import type { communitylist_rows_type } from '@/api/system/community/type';
-    address: '北境朝北市塔reek儿大道368号'
+import { Picture } from '@element-plus/icons-vue';
-  },
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  },
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  },
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  },
-  {
-    name: '北境碧桂园小区',
-    address: '北境朝北市塔reek儿大道368号'
-  }
-]);
 
 const router = useRouter();
+const list = ref<communitylist_rows_type[]>([]);
+const currentViliageInfo = ref<communitylist_rows_type>();
+/** 获取小区列表 */
+function getlist() {
+  getCommunitylistAPI().then((res) => {
+    list.value = res.rows;
+    currentViliageInfo.value = res.rows.find((item) => item.choiceStatus === 0);
+    res.rows.forEach((item) => {
+      if (item.villageImageUrl) {
+        console.log(item.villageImageUrl.split(','));
+      }
+    });
+  });
+}
+getlist();
+/** 新增小区 */
 function handleAdd() {
-  console.log('add');
   router.push({
     path: '/community/AddCommunity'
   });
 }
+
+/** 删除小区 */
+function handleDelete(item: communitylist_rows_type) {
+  deleteVillageByIdAPI(item.villageId).then(() => {
+    const newlist = list.value.filter((listitem) => listitem.villageId !== item.villageId);
+    list.value = newlist;
+  });
+}
+
+/** 编辑小区 */
+function handleEdit(item: communitylist_rows_type) {
+  router.push({
+    path: '/community/AddCommunity',
+    query: {
+      id: item.villageId
+    }
+  });
+}
+
+/** 管理小区 */
+function handleclick(item: communitylist_rows_type) {
+  if (item.choiceStatus === 0) {
+    router.push({
+      path: '/index'
+    });
+  } else {
+    switchVillageAPI(item.villageId).then((res) => {
+      console.log('切换成小区---------------------');
+      ElMessage.success('切换小区成功');
+      router.push({
+        path: '/index'
+      });
+    });
+  }
+}
 </script>
 <style scoped lang="scss">
+.box {
+  .header {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+    background-color: #1a75ff;
+    & > div {
+      flex: 1;
+    }
+    & > span {
+      padding-left: 20px;
+      font-size: 20px;
+      color: white;
+    }
+  }
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: 30px;
+  height: 200px;
+  background: #fff;
+}
 .container {
   width: 100%;
   margin: 0 auto;
@@ -106,30 +183,41 @@ function handleAdd() {
     }
   }
   .communityBody {
-    padding: 30px;
+    padding: 20px;
-
     color: #000;
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(5, minmax(292px, 1fr));
-    align-items: center;
+    @media (max-width: 1540px) {
+      grid-template-columns: repeat(4, minmax(292px, 1fr));
+    }
+    @media (max-width: 1280px) {
+      grid-template-columns: repeat(3, minmax(292px, 1fr));
+    }
+    @media (max-width: 1030px) {
+      grid-template-columns: repeat(2, minmax(292px, 1fr));
+    }
     .coummunity_card {
-      width: 330px;
+      height: 300px;
-      height: 330px;
       border: 1px solid #ccc;
       border-radius: 5px;
       background-color: rgba(255, 255, 255, 1);
-      margin-right: 15px;
+      margin-right: 10px;
       margin-bottom: 15px;
       overflow: hidden;
-
+      display: flex;
-      img {
+      flex-direction: column;
+      &:hover {
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      }
+      .el-image {
         height: 200px;
         width: 100%;
         object-fit: cover;
       }
       .coummunityaction_box {
-        height: 100px;
+        flex: 1;
-        padding: 10px 10px;
+        padding: 10px 5px;
+        font-size: 15px;
         .counmmunityaddress {
           margin-top: 20px;
           font-size: small;

src/views/login.vue

@@ -125,7 +125,6 @@ const handleLogin = () => {
         }
       }
     } else {
-      console.log('error submit!', fields);
     }
   });
 };

src/views/system/house/components/building.vue

@@ -8,14 +8,14 @@
     </div>
     <ul>
       <li
-        v-for="(item, index) in buildingList"
+        v-for="(item, index) in currentBuildingInfoList"
         :class="{
-          active: index === activeId
+          active: item.id === currentBuildingInfo.id
         }"
         :key="index"
-        @click="checkBuilding(index)"
+        @click="switchBuilding(item.id)"
       >
-        <div class="buildingname">{{ item.name }}</div>
+        <div class="buildingname">{{ item.villageName ?? '未知' }}</div>
         <div class="buildactions flex align-center justify-around">
           <el-icon class="pointer hover-color-blue"><Setting /></el-icon>
           <el-icon class="pointer hover-color-red"><Delete /></el-icon>
@@ -27,26 +27,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-
+import { useHouseStore } from '@/store/modules/house';
+const houseStore = useHouseStore();
+const { switchBuilding } = houseStore; // 方法
+const { currentBuildingInfoList, currentBuildingInfo } = storeToRefs(houseStore); // 数据
 const router = useRouter();
-const activeId = ref(0);
-const buildingList = ref([
-  {
-    id: 1,
-    name: 'a栋'
-  },
-  {
-    id: 2,
-    name: 'b栋'
-  },
-  {
-    id: 3,
-    name: 'c栋'
-  }
-]);
-const checkBuilding = (index: number) => {
-  activeId.value = index;
-};
 
 const handleAddBuilding = () => {
   router.push({

src/views/system/house/components/components/houseItem.vue

@@ -15,6 +15,8 @@ const props = defineProps<{
   unit: any;
   fIdx: number;
 }>();
+const houstlist = ref([]);
+props.unit;
 const router = useRouter();
 const checked = ref([]);
 // 菜单
@@ -28,7 +30,6 @@ const menuList = ref([
 const contextMenu = ref();
 // 点击事件
 const handleSelect = (val) => {
-  console.log('你选择了：', val);
   switch (val) {
     case 'edit':
       break;
@@ -50,10 +51,6 @@ function handleClick(house: any) {
 const emit = defineEmits<{
   change: string[];
 }>();
-
-function handleContextMenu(e) {
-  console.log(e);
-}
 </script>
 
 <style scoped lang="scss">

src/views/system/house/components/components/table.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="TableBox p-5 h-full">
-    <el-table border :data="Array.from({ length: building.totalFloors }, (_, i) => i + 1)">
+    <el-table border :data="floorsSortList">
       <el-table-column align="center" fixed label="楼层\单元" width="85">
-        <template #default="{ $index }">
+        <template #default="{ $index, row }">
-          <span>{{ $index + 1 }}楼</span>
+          <span>{{ row }}楼</span>
         </template>
       </el-table-column>
-      <el-table-column min-width="160" class="column" align="center" :label="units.unitNo" v-for="(units, index) in building.units" :key="index">
+      <el-table-column
-        <template #default="{ $index }">
+        min-width="160"
-          <houseItem :unit="units.houses[$index]" :f-idx="$index"></houseItem>
+        class="column"
+        align="center"
+        :label="units.buildingName"
+        v-for="(units, index) in currentHouseInfoList"
+        :key="index"
+      >
+        <template #default="{ $index, row }">
+          <houseItem :unit="units.floors_Json" :f-idx="row"></houseItem>
         </template>
       </el-table-column>
     </el-table>
@@ -18,72 +25,38 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import houseItem from './houseItem.vue';
-import { build } from 'vite';
+import { useHouseStore } from '@/store/modules/house';
-// 房屋信息
+const houseStore = useHouseStore();
-interface House {
+const { currentHouseInfoList } = storeToRefs(houseStore); // 数据
-  id: string; // 唯一标识，如 B-1-101
+console.log(currentHouseInfoList);
-  roomNo: string; // 房号，如 101
+const maxFloors = ref(0);
-  checked: boolean; // 是否选中
+const maxUnits = ref(currentHouseInfoList.value.length);
-  // 可扩展：面积、户型、收费标准、状态等
+const floorslist = ref(new Set());
+const floorsSortList = computed(() => {
+  const list = Array.from(floorslist.value) as string[];
+  return list.sort(sortNumberStr);
+});
+function sortNumberStr(a, b) {
+  const numA = parseFloat(a);
+  const numB = parseFloat(b);
+
+  // 如果都是有效数字 → 按数字大小排（支持负数、小数）
+  if (!isNaN(numA) && !isNaN(numB)) {
+    return numA - numB;
+  }
+
+  // 否则按自然语言排
+  return a.localeCompare(b, 'zh-CN', { numeric: true });
 }
 
-// 单元信息
+currentHouseInfoList.value.forEach((item) => {
-interface Unit {
+  maxFloors.value = Math.max(maxFloors.value, item.actualFloorCount);
-  id: string; // 唯一标识，如 1
+  item.floors_Json = JSON.parse(`[${item.floors.replaceAll('\\', '')}]`);
-  unitNo: string; // 单元号，如 1单元
+  console.log(item.floors_Json);
-  houses: House[][]; // 按楼层分组的房屋，houses[0] 对应1楼，houses[1]对应2楼...
+  item.floors_Json.forEach((floor) => {
-}
+    floorslist.value.add(floor.floorNo);
-
+  });
-// 楼栋信息
+});
-interface Building {
-  buildingNo: string; // 楼栋号，如 B栋
-  totalFloors: number; // 总楼层
-  units: Unit[]; // 单元列表
-}
-// 初始化B栋数据
-const building: Building = {
-  buildingNo: 'B栋',
-  totalFloors: 5, // 总楼层
-  // 栋-> 单元 -> 楼 -> 房间
-  units: []
-};
-
-function init(length) {
-  const arr = Array.from({ length: length }).map((_, index) => {
-    return {
-      id: index,
-      unitNo: index + 1 + '单元',
-      // 1单元
-      houses: [
-        // 1楼
-        [
-          // 一楼房屋
-          { id: 'B-3-301', roomNo: '101', checked: true },
-          { id: 'B-3-302', roomNo: '102', checked: false },
-          { id: 'B-3-303', roomNo: '103', checked: false },
-          { id: 'B-3-304', roomNo: '104', checked: false },
-          { id: 'B-3-305', roomNo: '105', checked: false },
-          { id: 'B-3-306', roomNo: '106', checked: false },
-          { id: 'B-3-307', roomNo: '107', checked: false },
-          { id: 'B-3-308', roomNo: '108', checked: false }
-        ],
-        [
-          { id: 'B-1-201', roomNo: '201', checked: true },
-          { id: 'B-1-202', roomNo: '202', checked: false },
-          { id: 'B-1-203', roomNo: '203', checked: false },
-          { id: 'B-1-204', roomNo: '204', checked: false },
-          { id: 'B-1-205', roomNo: '205', checked: false },
-          { id: 'B-1-206', roomNo: '206', checked: false },
-          { id: 'B-1-207', roomNo: '207', checked: false },
-          { id: 'B-1-208', roomNo: '208', checked: false }
-        ]
-      ]
-    };
-  }) as any;
-  console.log(arr);
-  building.units = arr;
-}
-init(20);
 </script>
 
 <style scoped lang="scss">

src/views/system/house/components/unit.vue

@@ -26,7 +26,6 @@ import { ref } from 'vue';
 import TableUnit from './components/table.vue';
 const router = useRouter();
 function handleAddHouse() {
-  console.log('add house');
   router.push({
     path: '/house/addHouse'
   });

src/views/system/house/index.vue

@@ -3,8 +3,8 @@
     <PageHeader>
       <template #content>
         <div class="houseAdressBox">
-          <span class="mr-50px">当前小区：北境碧桂园小区</span>
+          <span class="mr-50px">当前小区：{{ currentVilageInfo && currentVilageInfo.villageName }}</span>
-          <span>小区地址：北境朝北市塔里克儿大道368号</span>
+          <span>小区地址：{{ currentVilageInfo && currentVilageInfo.city }} {{ currentVilageInfo && currentVilageInfo.address }}</span>
         </div>
         <div class="houseTypeBox flex">
           <div
@@ -31,47 +31,19 @@
 import building from './components/building.vue';
 import unit from './components/unit.vue';
 import PageHeader from '@/components/Pageheader/index.vue';
-const housetypelist = ['住宅', '办公', '商用', '公寓'];
+import { useHouseStore } from '@/store/modules/house';
+const houseStore = useHouseStore();
+const { currentVilageInfo } = storeToRefs(houseStore);
+console.log(currentVilageInfo);
 
+const housetypelist = ['住宅', '办公', '商用', '公寓'];
 const active = ref(0);
 const changeHouseType = (index: number) => {
   active.value = index;
 };
 
-let ojb = {
+// 初始化数据
-  'code': 200,
+houseStore.initHouse(active.value);
-  'msg': '操作成功',
-  'data': [
-    {
-      'unitNo': '1',
-      'houses': '{"houseId":5,"houseNo":"1201室"}, {"houseId":6,"houseNo":"1202室"}',
-      'houseCount': 2,
-      'floorNo': '12',
-      'buildingId': 54564
-    },
-    {
-      'unitNo': '1',
-      'houses': '{"houseId":1,"houseNo":"1301室"}, {"houseId":2,"houseNo":"1302室"}',
-      'houseCount': 2,
-      'floorNo': '13',
-      'buildingId': 54564
-    },
-    {
-      'unitNo': '2',
-      'houses': '{"houseId":7,"houseNo":"1201室"}',
-      'houseCount': 1,
-      'floorNo': '12',
-      'buildingId': 54564
-    },
-    {
-      'unitNo': '2',
-      'houses': '{"houseId":3,"houseNo":"1301室"}, {"houseId":4,"houseNo":"1302室"}',
-      'houseCount': 2,
-      'floorNo': '13',
-      'buildingId': 54564
-    }
-  ]
-};
 </script>
 
 <style lang="scss" scoped>

src/views/system/storeroom/index.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="StoreRoomBox">
-    <PageHeader title="储藏室管理">
+    <PageHeader title="储藏室管理"> </PageHeader>
-      <template #container>
+    <div class="nav flex flex-items-center pb-3">
-        <div class="flex flex-items-center pb-3">
+      <div class="title-text">储藏编号</div>
-          <div>储藏编号</div>
+      <el-input placeholder="请输入" v-model="searchValue" />
-          <el-input class="ml-10px mr-20px" placeholder="请输入" v-model="searchValue" />
+      <el-button class="mr-10px" type="primary">查询</el-button>
-          <el-button class="mr-20px" type="primary">查询</el-button>
+      <el-button>重置</el-button>
-          <el-button>重置</el-button>
+    </div>
-        </div>
-      </template>
-    </PageHeader>
     <div class="StoreRoomBody">
       <div class="nav flex flex-items-center justify-between">
         <div class="title-text">储藏室列表</div>
@@ -19,42 +16,43 @@
         </div>
       </div>
       <div class="StoreRoomTablebox">
-        <el-table checked>
+        <el-table :data="datalist" checked>
-          <el-table-column label="楼栋" width="100">
+          <el-table-column align="center" type="selection"></el-table-column>
+          <el-table-column align="center" label="楼栋">
             <template #default="scope">
-              <div>{{ scope.row.id }}</div>
+              <div>{{ scope.row.floor }}栋</div>
             </template>
           </el-table-column>
-          <el-table-column label="单元" width="100">
+          <el-table-column align="center" label="单元">
+            <template #default="scope">
+              <div>{{ scope.row.name }}单元</div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="储藏室号">
             <template #default="scope">
               <div>{{ scope.row.name }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="储藏室号" width="100">
+          <el-table-column align="center" label="建筑面积">
             <template #default="scope">
-              <div>{{ scope.row.name }}</div>
+              <div>{{ scope.row.name }}㎡</div>
             </template>
           </el-table-column>
-          <el-table-column label="建筑面积" width="100">
+          <el-table-column align="center" label="公摊面积">
             <template #default="scope">
-              <div>{{ scope.row.name }}</div>
+              <div>{{ scope.row.name }}㎡</div>
             </template>
           </el-table-column>
-          <el-table-column label="公摊面积" width="100">
+          <el-table-column align="center" label="实用面积">
             <template #default="scope">
-              <div>{{ scope.row.name }}</div>
+              <div>{{ scope.row.name }}㎡</div>
             </template>
           </el-table-column>
-          <el-table-column label="实用面积" width="100">
+          <el-table-column align="center" label="操作">
-            <template #default="scope">
-              <div>{{ scope.row.name }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="100">
             <template #default="scope">
               <div>
-                <el-button type="primary">编辑</el-button>
+                <el-button text type="primary">编辑</el-button>
-                <el-button type="danger">删除</el-button>
+                <el-button text type="danger">删除</el-button>
               </div>
             </template>
           </el-table-column>
@@ -68,12 +66,25 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 const searchValue = ref('');
+import PageHeader from '@/components/Pageheader/index.vue';
 
 const paginationOptions = ref({
   total: 100,
   page: 1,
   limit: 10
 });
+
+const datalist = ref([
+  {
+    units: 3,
+    name: 'A1',
+    storeroom: 'b123',
+    area: '1000',
+    commontArea: '222',
+    useArea: '333',
+    floor: '1'
+  }
+]);
 function handleSizeChange(val: number) {
   paginationOptions.value.limit = val;
 }
@@ -83,9 +94,39 @@ function hanlePageChange(val: number) {
 </script>
 
 <style scoped lang="scss">
-.StoreRoomBody {
+.StoreRoomBox {
   padding: 20px;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  .el-button {
+    width: 80px;
+    height: 35px;
+    border-radius: 5px;
+  }
+  & > .nav {
+    background-color: white;
+    padding: 20px 30px;
+    border-top: 1px solid #ccc;
+    & > .title-text {
+      width: 80px;
+    }
+    .el-input {
+      width: 300px;
+      margin-right: 30px;
+    }
+  }
+}
+.StoreRoomBody {
   $navHeight: 60px;
+  flex: 1;
+
+  padding: 20px;
+  // height: 785px;
+  border-radius: 5px;
+  margin-top: 20px;
+  background-color: #fff;
   .nav {
     height: $navHeight;
   }
@@ -93,6 +134,9 @@ function hanlePageChange(val: number) {
     padding: 0 10px;
     margin-top: 10px;
     height: calc(100% - $navHeight);
+    & > .el-table {
+      height: calc(100% - 70px);
+    }
   }
 }
 </style>