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

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'

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;
+  units: BuildingUnitlist[];
-  unitNo: string;
+}
-  floors: string;
+// 单元
-  floors_Json?: FloorsType[];
+export interface BuildingUnitlist {
+  floors: FloorsType[];
+  unitNo: number;
 }
 // 楼层
 export interface FloorsType {

src/components/Pageheader/index.vue

@@ -9,12 +9,12 @@
         <div class="pagetitle">{{ props.title }}</div>
       </div>
       <!-- solt -->
-      <slot name="content" v-if="showSlot"></slot>
+      <slot name="content" v-if="Boolean(showSlot.content)"></slot>
-      <div class="h-20px" v-show="!showSlot"></div>
+      <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({

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 currentFloorInfoList = computed(() => {
-  // 最大楼层
+    return (Array.from(floorslist.value) as string[]).sort(sortNumberStr);
-  const maxFloors = ref(0);
+  });
   // 楼层列表 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;
-    // 获取当前小区 楼栋信息
+    if (!currentBuildingInfo.value) {
-    currentBuildingInfo.value = res2.data[0];
+      // 获取当前小区 第一个楼栋信息
-    console.log(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) => {
+    console.log(currentHouseInfoList.value);
-      maxFloors.value = Math.max(maxFloors.value, item.actualFloorCount);
+    floorslist.value = new Set();
-      item.floors_Json = JSON.parse(`[${item.floors.replaceAll('\\', '')}]`);
+    // 得到所有的有房屋的 楼层 数组
-      item.floors_Json.forEach((floor) => {
+    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
   };
 });

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 getBuildingById() {
-function getVilageFun() {
+  console.log(houseStore.currentBuildingInfoList);
-  getCommunitylistAPI().then((res) => {
+  houseStore.currentBuildingInfoList.forEach((item) => {
-    currentVilageinfo.value = res.rows.find((item) => item.choiceStatus === 0);
+    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({
+      if (buildingId) {
-        ...form.value,
+        console.log('修改');
-        villageId: currentVilageinfo.value.id
+        editBuildingApi({
-      })
+          ...form.value,
-        .then((res) => {
+          villageId: currentVilageInfo.value.villageId,
-          console.log(res);
+          id: parseInt(buildingId)
-          ElMessage.success('添加成功');
         })
-        .catch((err) => {
+          .then((res) => {
-          console.log(err);
+            ElMessage.success('修改成功');
-          ElMessage.error('添加失败');
+            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%;

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-blue" @click="editBuilding(item.id)"><Setting /></el-icon>
-          <el-icon class="pointer hover-color-red"><Delete /></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;

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 border :data="houseStore.currentFloorInfoList">
-      <el-table-column align="center" fixed label="楼层\单元" width="85">
+      <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}单元`"
+        :label="`${unit.unitNo}单元`"
-        v-for="(units, index) in currentHouseInfoList"
+        v-for="(unit, index) in houseStore.currentHouseInfoList?.units ?? []"
         :key="index"
       >
         <template #default="{ row }">
-          <houseItem
+          <houseItem @contextmenufun="contextMenuFun" @change="handleChange" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
-            @contextmenufun="contextMenuFun"
-            @change="handleChange"
-            :menu-list="menutlist"
-            :unit="units.floors_Json"
-            :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' },

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();

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);
+houseStore.initHouse(houseStore.buildingtype);
-const changeHouseType = (index: number) => {
-  active.value = index;
-};
-
 // 初始化数据
-houseStore.initHouse(active.value);
 </script>
 
 <style lang="scss" scoped>