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

2026-04-08 18:37:30 +08:00
parent cd292d5bf4
commit 6e998d4e87
9 changed files with 241 additions and 82 deletions
--- 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>