house

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="TableBox p-5 h-full">
+    <el-table border :data="Array.from({ length: building.totalFloors }, (_, i) => i + 1)">
+      <el-table-column align="center" fixed label="楼层\单元" width="85">
+        <template #default="{ $index }">
+          <span>{{ $index + 1 }}楼</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">
+        <template #default="{ $index }">
+          <houseItem :unit="units.houses[$index]" :f-idx="$index"></houseItem>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import houseItem from './houseItem.vue';
+import { build } from 'vite';
+// 房屋信息
+interface House {
+  id: string; // 唯一标识，如 B-1-101
+  roomNo: string; // 房号，如 101
+  checked: boolean; // 是否选中
+  // 可扩展：面积、户型、收费标准、状态等
+}
+
+// 单元信息
+interface Unit {
+  id: string; // 唯一标识，如 1
+  unitNo: string; // 单元号，如 1单元
+  houses: House[][]; // 按楼层分组的房屋，houses[0] 对应1楼，houses[1]对应2楼...
+}
+
+// 楼栋信息
+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">
+.TableBox {
+  overflow: hidden;
+  flex: 1;
+  .column {
+    width: 200px;
+    background-color: red;
+  }
+}
+</style>