楼栋增删改查完成，接着房屋

2026-04-08 18:37:30 +08:00
parent cd292d5bf4
commit 6e998d4e87
9 changed files with 241 additions and 82 deletions
--- a/src/api/system/house/index.ts
+++ b/src/api/system/house/index.ts
@@ -1,6 +1,7 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 import { addBuildingType, BuildingUnit, BuildingVo } from './type';
+import { number } from 'vue-types';

 // 楼栋---------------------------------------------------------------------------------------
 // 根据 小区id 和 类型   查询楼栋信息
@@ -23,10 +24,25 @@ export function addBuildingApi(data: addBuildingType) {
    data
  });
 }
+/** 编辑楼栋 */
+export function editBuildingApi(data: addBuildingType & { id: number }) {
+  return request({
+    url: '/building',
+    method: 'PUT',
+    data
+  });
+}
+/** 删除楼栋 */
+export function deleteBuildingApi(id: number) {
+  return request({
+    url: `/building/${id}`,
+    method: 'DELETE'
+  });
+}

 // 房屋----------------------------------------------------------------------------------------------
 // 根据 楼栋id 查询房屋信息
-export function getHouselistAPI(buildingId: number): AxiosPromise<BuildingUnit[]> {
+export function getHouselistAPI(buildingId: number): AxiosPromise<BuildingUnit> {
  return request({
    url: `/house/groupByUnitTree/${buildingId}`,
    method: 'get'
--- a/src/api/system/house/type.ts
+++ b/src/api/system/house/type.ts
@@ -42,16 +42,16 @@ export interface BuildingVo {
  villageName?: string;
 }

-// 楼栋
+// 楼栋总信息
 export interface BuildingUnit {
-  actualFloorCount: number;
-  buildingFloorCount: number;
  buildingId: number;
  buildingName: string;
-  totalHouses: number;
-  unitNo: string;
-  floors: string;
-  floors_Json?: FloorsType[];
+  units: BuildingUnitlist[];
+}
+// 单元
+export interface BuildingUnitlist {
+  floors: FloorsType[];
+  unitNo: number;
 }
 // 楼层
 export interface FloorsType {
--- a/src/components/Pageheader/index.vue
+++ b/src/components/Pageheader/index.vue
@@ -9,12 +9,12 @@
        <div class="pagetitle">{{ props.title }}</div>
      </div>
      <!-- solt -->
-      <slot name="content" v-if="showSlot"></slot>
-      <div class="h-20px" v-show="!showSlot"></div>
+      <slot name="content" v-if="Boolean(showSlot.content)"></slot>
+      <div class="h-20px" v-show="!Boolean(showSlot.content)"></div>
    </div>
    <div class="rightbox">
      <!-- 操作按钮 -->
-      <slot name="operate" v-if="showSlot"></slot>
+      <slot name="operate" v-if="Boolean(showSlot.operate)"></slot>
    </div>
  </div>
 </template>
@@ -23,7 +23,10 @@
 import Breadcrumb from '@/components/Breadcrumb/index.vue';
 const slots = useSlots();
 const showSlot = computed(() => {
-  return slots.content && slots.content().length > 0;
+  return {
+    content: slots.content ?? null,
+    operate: slots.operate ?? null
+  };
 });

 const props = defineProps({
--- a/src/store/modules/house.ts
+++ b/src/store/modules/house.ts
@@ -1,7 +1,7 @@
 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 type { addBuildingType, BuildingUnit, BuildingVo } from '@/api/system/house/type';
 import { defineStore } from 'pinia';
 // 数字排序
 function sortNumberStr(a: string, b: string) {
@@ -20,6 +20,8 @@ export const useHouseStore = defineStore('house', () => {
  // 当前小区信息
  const currentVilageInfo = ref<communitylist_rows_type>();

+  const buildingtype = ref<number>(0);
+
  // 当前小区 所有楼栋信息
  const currentBuildingInfoList = ref<BuildingVo[]>([]);
  // 当前楼栋信息
@@ -38,14 +40,15 @@ export const useHouseStore = defineStore('house', () => {
  });

  // 当前楼栋 所有房屋信息
-  const currentHouseInfoList = ref<BuildingUnit[]>([]);
+  const currentHouseInfoList = ref<BuildingUnit>();

  // 当前楼栋 所有楼层数据
-  const currentFloorInfoList = ref<string[]>([]);
-  // 最大楼层
-  const maxFloors = ref(0);
+  const currentFloorInfoList = computed(() => {
+    return (Array.from(floorslist.value) as string[]).sort(sortNumberStr);
+  });
  // 楼层列表 set
  const floorslist = ref<Set<string>>(new Set());
+
  // 初始化
  const initHouse = async (buildingtype: number) => {
    // 查找当前小区
@@ -55,42 +58,96 @@ export const useHouseStore = defineStore('house', () => {
    // 获取当前小区 所有楼栋信息
    const res2 = await getBuildinglistAPI(currentVilage.villageId, buildingtype);
    currentBuildingInfoList.value = res2.data;
-    // 获取当前小区 楼栋信息
-    currentBuildingInfo.value = res2.data[0];
-    console.log(currentBuildingInfo.value);
+    if (!currentBuildingInfo.value) {
+      // 获取当前小区 第一个楼栋信息
+      currentBuildingInfo.value = res2.data[0];
+      console.log(currentBuildingInfo.value);
+    }

-    // 获取当前楼栋 所有房屋信息
+    // 获取当前 第一个楼栋的所有信息
    const res3 = await getHouselistAPI(currentBuildingInfo.value.id);
    currentHouseInfoList.value = res3.data;
-    currentHouseInfoList.value.forEach((item) => {
-      maxFloors.value = Math.max(maxFloors.value, item.actualFloorCount);
-      item.floors_Json = JSON.parse(`[${item.floors.replaceAll('\\', '')}]`);
-      item.floors_Json.forEach((floor) => {
+    console.log(currentHouseInfoList.value);
+    floorslist.value = new Set();
+    // 得到所有的有房屋的 楼层 数组
+    currentHouseInfoList.value.units.forEach((item) => {
+      item.floors.forEach((floor) => {
        floorslist.value.add(floor.floorNo);
      });
    });
-    // 对当前小区的 楼层进行排序
-    currentFloorInfoList.value = (Array.from(floorslist.value) as string[]).sort(sortNumberStr);
  };

-  // 选中房屋
+  // 选中的房屋
  const checkoutHouses = ref<string[]>([]);
+  // 选中的房屋方法
  const checkoutHousesFun = (data: string[]) => {
    checkoutHouses.value = data;
  };

  // 切换住宅类型
-  const switchHouseType = (housetype: 0 | 1 | 2 | 3) => {
+  const switchHouseType = (housetype: number) => {
    getBuildinglistAPI(currentVilageInfo.value.villageId, housetype)
-      .then(() => ElMessage.success('切换成功'))
+      .then(() => {
+        buildingtype.value = housetype;
+        initHouse(housetype);
+        ElMessage.success('切换成功');
+      })
      .catch(() => ElMessage.error('切换失败'));
  };

  // 切换楼栋
  const switchBuilding = (buildingId: number) => {
-    getHouselistAPI(buildingId).then(() => ElMessage.success('切换成功'));
+    // 切换之前 清空当前楼栋信息
+    currentBuildingInfo.value = {
+      'id': null,
+      'villageId': null,
+      'villageName': '',
+      'buildingName': '',
+      'buildingUse': null,
+      'buildToward': '',
+      'buildTall': '',
+      'buildStructure': '',
+      'unitCount': null,
+      'floorCount': null,
+      'remark': ''
+    };
+    getHouselistAPI(buildingId).then((res) => {
+      currentHouseInfoList.value = res.data;
+      // 获取当前楼栋信息并 赋值
+      currentBuildingInfo.value = currentBuildingInfoList.value.find((item) => item.id === buildingId);
+
+      // 清空 楼层信息
+      floorslist.value = new Set();
+      // 重新获取楼层信息
+      currentHouseInfoList.value.units.forEach((item) => {
+        item.floors.forEach((floor) => {
+          floorslist.value.add(floor.floorNo);
+        });
+      });
+      ElMessage.success('切换成功');
+      return;
+    });
  };

+  // 更新数据
+  const updateHouse = () => {
+    initHouse(buildingtype.value);
+  };
+  // 删除指定楼栋
+  const deleteBuildingFun = (buildingId: number) => {
+    console.log('删除楼栋');
+    // 手动 从 楼栋列表中删除 指定楼栋
+    currentBuildingInfoList.value = currentBuildingInfoList.value.filter((item) => item.id !== buildingId);
+    // 判断指定楼栋是 当前楼栋
+    if (currentBuildingInfo.value.id === buildingId) {
+      // 获取楼栋列表中的第一个楼栋,并切换到第一个楼栋
+      if (currentBuildingInfoList.value[0]) {
+        currentBuildingInfo.value = currentBuildingInfoList.value[0];
+        switchBuilding(currentBuildingInfo.value.id);
+      }
+    }
+  };
+  //  删除指定房屋
  const deleteHouseFun = (houseId: string | string[]) => {
    console.log('删除房屋');
    if (typeof houseId === 'string') {
@@ -107,10 +164,13 @@ export const useHouseStore = defineStore('house', () => {
    currentHouseInfoList,
    currentFloorInfoList,
    checkoutHouses,
+    buildingtype,
    checkoutHousesFun,
    initHouse,
    switchHouseType,
    switchBuilding,
-    deleteHouseFun
+    deleteHouseFun,
+    updateHouse,
+    deleteBuildingFun
  };
 });
--- a/src/views/system/house/AddBuilding.vue
+++ b/src/views/system/house/AddBuilding.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="AddBuildingBox">
-    <PageHeader title="新建楼栋"></PageHeader>
+    <PageHeader title="新建楼栋">
+      <template #operate>
+        <div class="BackBox" @click="goBack">返回</div>
+      </template>
+    </PageHeader>
    <div class="AddBuildingBody">
      <div class="title">基本信息</div>
      <div class="addBuildingFormBody">
@@ -8,11 +12,16 @@
          <el-form-item label="楼栋名称" prop="buildingName">
            <el-input v-model.trim="form.buildingName" placeholder="请输入楼栋名称" />
          </el-form-item>
+          <el-form-item label="楼栋类型" prop="buildingUse">
+            <el-select v-model="form.buildingUse" placeholder="选择楼栋类型">
+              <el-option v-for="(item, index) in housetypelist" :key="index" :label="item" :value="index"></el-option>
+            </el-select>
+          </el-form-item>
          <el-form-item label="楼栋朝向" prop="buildToward">
            <el-input v-model.trim="form.buildToward" placeholder="请输入楼栋朝向" />
          </el-form-item>
          <el-form-item label="楼高(m)" prop="buildTail">
-            <el-input v-model.trim="form.buildTail" placeholder="请输入楼高(m)" />
+            <el-input v-model.trim="form.buildTall" placeholder="请输入楼高(m)" />
          </el-form-item>
          <el-form-item label="楼栋结构" prop="buildStructure">
            <el-input v-model.trim="form.buildStructure" placeholder="请输入楼栋结构" />
@@ -37,55 +46,119 @@
 import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
 import { getCommunitylistAPI } from '@/api/system/community';
-import { addBuildingApi } from '@/api/system/house';
+import { addBuildingApi, editBuildingApi } from '@/api/system/house';
+import { useRouter } from 'vue-router';
+import { useHouseStore } from '@/store/modules/house';
+
+const houseStore = useHouseStore();
+const { currentVilageInfo } = storeToRefs(houseStore);
+const route = useRoute();
+const router = useRouter();
 const formRef = ref();
 const form = ref({
  buildingName: '',
  buildToward: '',
-  buildTail: '',
+  buildTall: '',
+  buildingUse: 0,
  buildStructure: '',
  unitCount: null,
  floorCount: null
 });
+const housetypelist = ['住宅', '办公', '商用', '公寓'];
 const rules = ref({
  buildingName: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
+  buildingUse: [{ required: true, message: '请选择楼栋类型', trigger: 'blur' }],
  unitCount: [{ required: true, message: '请输入单元数', trigger: 'blur' }],
  floorCount: [{ required: true, message: '请输入楼层数', trigger: 'blur' }]
 });
+// 判断新增还是编辑
+const buildingId = route.query.buildingId as string;
+if (buildingId) {
+  console.log('edit');
+  getBuildingById();
+} else {
+  console.log('add');
+}

-// 获取当前小区信息
-const currentVilageinfo = ref();
-function getVilageFun() {
-  getCommunitylistAPI().then((res) => {
-    currentVilageinfo.value = res.rows.find((item) => item.choiceStatus === 0);
+/** 编辑楼栋 */
+function getBuildingById() {
+  console.log(houseStore.currentBuildingInfoList);
+  houseStore.currentBuildingInfoList.forEach((item) => {
+    if (item.id === parseInt(buildingId)) {
+      form.value.buildingName = item.buildingName;
+      form.value.buildToward = item.buildToward;
+      form.value.buildingUse = item.buildingUse;
+      form.value.buildTall = item.buildTall;
+      form.value.buildStructure = item.buildStructure;
+      form.value.unitCount = item.unitCount;
+      form.value.floorCount = item.floorCount;
+    }
  });
 }
-// getVilageFun();
 const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      console.log(form.value);
-      addBuildingApi({
-        ...form.value,
-        villageId: currentVilageinfo.value.id
-      })
-        .then((res) => {
-          console.log(res);
-          ElMessage.success('添加成功');
+      if (buildingId) {
+        console.log('修改');
+        editBuildingApi({
+          ...form.value,
+          villageId: currentVilageInfo.value.villageId,
+          id: parseInt(buildingId)
        })
-        .catch((err) => {
-          console.log(err);
-          ElMessage.error('添加失败');
-        });
+          .then((res) => {
+            ElMessage.success('修改成功');
+            houseStore.updateHouse();
+            cancelForm();
+          })
+          .catch((err) => {
+            ElMessage.error('修改失败');
+          });
+      } else {
+        console.log(' 添加');
+        addBuildingApi({
+          ...form.value,
+          villageId: currentVilageInfo.value.villageId
+        })
+          .then((res) => {
+            ElMessage.success('添加成功');
+            houseStore.updateHouse();
+            cancelForm();
+          })
+          .catch((err) => {
+            ElMessage.error('添加失败');
+          });
+      }
    }
  });
 };
 const cancelForm = () => {
  formRef.value?.resetFields();
+  goBack();
 };
+
+function goBack() {
+  router.push({
+    path: '/house/houselist'
+  });
+}
 </script>

 <style scoped lang="scss">
+.BackBox {
+  width: 100px;
+  height: 45px;
+  line-height: 40px;
+  text-align: center;
+  border-radius: 5px;
+  color: rgba(16, 16, 16, 1);
+  border: 1px solid rgba(187, 187, 187, 1);
+  cursor: pointer;
+  font-size: 14px;
+  &:hover {
+    box-shadow: 0px 2px 6px 0px rgba(26, 117, 255, 0.1);
+  }
+}
 .AddBuildingBox {
  padding: 15px;
  height: 100%;
--- a/src/views/system/house/components/building.vue
+++ b/src/views/system/house/components/building.vue
@@ -13,12 +13,11 @@
          active: item.id === currentBuildingInfo.id
        }"
        :key="index"
-        @click="switchBuilding(item.id)"
      >
-        <div class="buildingname">{{ item.buildingName ?? '测试数据' }}</div>
+        <div class="buildingname" @click="switchBuilding(item.id)">{{ item.buildingName ?? '测试数据' }}</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>
+          <el-icon class="pointer hover-color-blue" @click="editBuilding(item.id)"><Setting /></el-icon>
+          <el-icon class="pointer hover-color-red" @click="deleteBuilding(item.id)"><Delete /></el-icon>
        </div>
      </li>
    </ul>
@@ -26,17 +25,35 @@
 </template>

 <script setup lang="ts">
+import { deleteBuildingApi } from '@/api/system/house';
 import { useHouseStore } from '@/store/modules/house';
 const houseStore = useHouseStore();
 const { switchBuilding } = houseStore; // 方法
 const { currentBuildingInfoList, currentBuildingInfo } = storeToRefs(houseStore); // 数据
 const router = useRouter();
-console.log(currentBuildingInfoList);
 const handleAddBuilding = () => {
  router.push({
    path: '/house/addbuilding'
  });
 };
+const editBuilding = (id: number) => {
+  router.push({
+    path: '/house/addbuilding',
+    query: {
+      buildingId: id
+    }
+  });
+};
+const deleteBuilding = (id: number) => {
+  deleteBuildingApi(id)
+    .then(() => {
+      console.log('删除成功');
+      houseStore.deleteBuildingFun(id);
+    })
+    .catch(() => {
+      console.log('删除失败');
+    });
+};
 </script>

 <style scoped lang="scss">
@@ -64,12 +81,15 @@ $primary_color: #1978fe;
    line-height: 45px;
    color: rgba(16, 16, 16, 1);
    position: relative;
-    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
+    &:hover {
+      background-color: #1978fe0c;
+    }
    .buildingname {
      text-align: center;
      width: 100%;
      padding: 0 20px 0 0;
+      cursor: pointer;
    }
    .buildactions {
      position: absolute;
--- a/src/views/system/house/components/components/table.vue
+++ b/src/views/system/house/components/components/table.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="TableBox p-5 h-full">
-    <el-table border :data="currentFloorInfoList">
-      <el-table-column align="center" fixed label="楼层\单元" width="85">
+    <el-table border :data="houseStore.currentFloorInfoList">
+      <el-table-column align="center" fixed label="楼层\单元" min-width="85">
        <template #default="{ row }">
          <span>{{ row }}楼</span>
        </template>
@@ -10,18 +10,12 @@
        min-width="160"
        class="column"
        align="center"
-        :label="`${units.unitNo}单元`"
-        v-for="(units, index) in currentHouseInfoList"
+        :label="`${unit.unitNo}单元`"
+        v-for="(unit, index) in houseStore.currentHouseInfoList?.units ?? []"
        :key="index"
      >
        <template #default="{ row }">
-          <houseItem
-            @contextmenufun="contextMenuFun"
-            @change="handleChange"
-            :menu-list="menutlist"
-            :unit="units.floors_Json"
-            :f-idx="row"
-          ></houseItem>
+          <houseItem @contextmenufun="contextMenuFun" @change="handleChange" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
        </template>
      </el-table-column>
    </el-table>
@@ -33,6 +27,7 @@ import houseItem from './houseItem.vue';
 import { useHouseStore } from '@/store/modules/house';
 const houseStore = useHouseStore();
 const { currentHouseInfoList, currentFloorInfoList } = storeToRefs(houseStore); // 数据
+console.log(currentHouseInfoList);
 const menutlist = [
  { label: '编辑', value: 'edit' },
  { label: '收费标准', value: 'money' },
--- a/src/views/system/house/components/unit.vue
+++ b/src/views/system/house/components/unit.vue
@@ -6,7 +6,7 @@
          <strong>{{ houseStore.currentBuildingInfo.buildingName }}</strong>
        </span>
        <span class="mr-30px">楼栋朝向:{{ houseStore.currentBuildingInfo.buildToward }}</span>
-        <span class="mr-30px">楼高：{{ houseStore.currentBuildingInfo.buildTall }}</span>
+        <span class="mr-30px">楼高：{{ houseStore.currentBuildingInfo.buildTall }}(m)</span>
        <span class="mr-30px">楼栋结构：{{ houseStore.currentBuildingInfo.buildStructure }} </span>
      </div>
      <div class="rightActions">
@@ -22,7 +22,6 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue';
 import TableUnit from './components/table.vue';
 import { useHouseStore } from '@/store/modules/house';
 const houseStore = useHouseStore();
--- a/src/views/system/house/index.vue
+++ b/src/views/system/house/index.vue
@@ -10,9 +10,9 @@
          <div
            class="housetype"
            :class="{
-              active: active === index
+              active: houseStore.buildingtype === index
            }"
-            @click="changeHouseType(index)"
+            @click="houseStore.switchHouseType(index)"
            v-for="(house, index) in housetypelist"
            :key="index"
          >
@@ -34,16 +34,9 @@ import PageHeader from '@/components/Pageheader/index.vue';
 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;
-};
-
+houseStore.initHouse(houseStore.buildingtype);
 // 初始化数据
-houseStore.initHouse(active.value);
 </script>

 <style lang="scss" scoped>