house

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

@@ -0,0 +1,107 @@
+<template>
+  <div class="BuildingBox">
+    <div class="buildingheader flex align-center justify-between">
+      <div>楼栋</div>
+      <div>
+        <span class="pointer" @click="handleAddBuilding">+增加楼栋</span>
+      </div>
+    </div>
+    <ul>
+      <li
+        v-for="(item, index) in buildingList"
+        :class="{
+          active: index === activeId
+        }"
+        :key="index"
+        @click="checkBuilding(index)"
+      >
+        <div class="buildingname">{{ item.name }}</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>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+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({
+    path: '/house/addbuilding'
+  });
+};
+</script>
+
+<style scoped lang="scss">
+$primary_color: #1978fe;
+.BuildingBox {
+  width: 220px;
+  height: 100%;
+  font-size: 14px;
+  background-color: #fff;
+  border-radius: 2px;
+  color: rgba(0, 0, 0, 1);
+  margin-right: 10px;
+  .buildingheader {
+    height: 60px;
+    line-height: 60px;
+    padding: 0 15px;
+    border-bottom: 1px solid #f2f2f2;
+    span {
+      color: $primary_color;
+    }
+  }
+
+  li {
+    height: 45px;
+    line-height: 45px;
+    color: rgba(16, 16, 16, 1);
+    position: relative;
+    cursor: pointer;
+    border-bottom: 1px solid #f2f2f2;
+    .buildingname {
+      text-align: center;
+      width: 100%;
+      padding: 0 20px 0 0;
+    }
+    .buildactions {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 75px;
+      font-size: 15px;
+      padding: 15px 0;
+      padding-right: 10px;
+      color: rgba(153, 153, 153, 1);
+    }
+
+    &.active {
+      color: $primary_color;
+      border-bottom: 1px solid $primary_color;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="house-list">
+    <div class="house flex align-center" @contextmenu="contextMenu.open($event, house.id)" v-for="house in unit" :key="house.id">
+      <el-checkbox @click="handleClick(house)" :label="house.id" :value="house.id" />
+    </div>
+    <!-- 右键菜单组件 -->
+    <ContextMenu ref="contextMenu" :menu="menuList" @select="handleSelect" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ContextMenu from '@/components/ContextMenu/index.vue';
+import { ref } from 'vue';
+const props = defineProps<{
+  unit: any;
+  fIdx: number;
+}>();
+
+const checked = ref([]);
+// 菜单
+const menuList = ref([
+  { label: '编辑', value: 'edit' },
+  { label: '收费标准', value: 'money' },
+  { label: '详情', value: 'main' },
+  { label: '删除', value: 'delete' }
+]);
+// 菜单ref
+const contextMenu = ref();
+// 点击事件
+const handleSelect = (val) => {
+  console.log('你选择了：', val);
+};
+function handleClick(house: any) {
+  checked.value = checked.value.includes(house.id) ? checked.value.filter((item) => item !== house.id) : checked.value.concat(house.id);
+}
+
+const emit = defineEmits<{
+  change: string[];
+}>();
+
+function handleContextMenu(e) {
+  console.log(e);
+}
+</script>
+
+<style scoped lang="scss">
+.house-list {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.house {
+  width: 110px;
+  height: 40px;
+  line-height: 40px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 5px;
+  padding-left: 10px;
+  padding-top: 3px;
+}
+.house:hover {
+  background: #e8f3ff;
+  border-color: #409eff;
+  color: #409eff;
+}
+.house.checked {
+  background: #e8f3ff;
+  border-color: #409eff;
+  color: #409eff;
+}
+
+.dropdownClass {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

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>

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="UnitBox">
+    <div class="Unit_top flex align-center justify-between">
+      <div>
+        <span class="text-size-16px text-color-black text-widget-bold mr-30px">
+          <strong>B栋</strong>
+        </span>
+        <span class="mr-30px">楼栋朝向:西南</span>
+        <span class="mr-30px">楼高：30米</span>
+        <span class="mr-30px">楼栋结构：框架 </span>
+      </div>
+      <div class="rightActions">
+        <span class="mr-20px" @click="handleAddHouse">+增加房屋</span>
+        <span class="mr-20px">收费标准设置</span>
+        <span>删除</span>
+      </div>
+    </div>
+    <div class="UnitBody">
+      <TableUnit></TableUnit>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TableUnit from './components/table.vue';
+const router = useRouter();
+function handleAddHouse() {
+  console.log('add house');
+  router.push({
+    path: '/house/addHouse'
+  });
+}
+</script>
+
+<style scoped lang="scss">
+$primary_color: #1978fe;
+.UnitBox {
+  flex: 1;
+  height: 100%;
+  max-width: 100%;
+  border-radius: 2px;
+  font-size: 14px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .Unit_top {
+    padding: 20px;
+    height: 60px;
+    color: rgba(102, 102, 102, 1);
+    .rightActions {
+      color: $primary_color;
+    }
+  }
+  .UnitBody {
+    flex: 1;
+  }
+}
+</style>