储藏室页面部分结构

src/views/system/house/AddHouse.vue

@@ -4,19 +4,19 @@
     <div class="AddBuildingBody">
       <div class="title">基本信息</div>
       <div class="addBuildingFormBody">
-        <el-form class="formBody" ref="formRef" :model="form" :rules="rules" label-width="180px">
+        <el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="100px">
           <el-form-item label="楼栋" prop="buildingID">
-            <el-select v-model="form.buildingID" class="m-2" placeholder="请选择" size="large">
+            <el-select v-model="form.buildingID" class="m-2" placeholder="请选择">
               <el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
           <el-form-item label="单元" prop="unit">
-            <el-select v-model="form.unit" class="m-2" placeholder="请选择" size="large">
+            <el-select v-model="form.unit" class="m-2" placeholder="请选择">
               <el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" />
             </el-select>
           </el-form-item>
           <el-form-item label="楼层" prop="floor">
-            <el-select v-model="form.floor" class="m-2" placeholder="请选择" size="large">
+            <el-select v-model="form.floor" class="m-2" placeholder="请选择">
               <el-option v-for="item in floors" :key="item.no" :label="item.name" :value="item.no" />
             </el-select>
           </el-form-item>
@@ -52,12 +52,12 @@
             </div>
           </el-form-item>
           <el-form-item label="车位号" prop="buildingAddress">
-            <el-select v-model="form.ParkingSpaceNumber" class="m-2" placeholder="请选择车位号" size="large">
+            <el-select v-model="form.ParkingSpaceNumber" class="m-2" placeholder="请选择车位号">
               <el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
           <el-form-item label="储藏室" prop="buildingDescription">
-            <el-select v-model="form.storeroom" class="m-2" placeholder="请选择储藏室" size="large">
+            <el-select v-model="form.storeroom" class="m-2" placeholder="请选择储藏室">
               <el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
@@ -165,6 +165,9 @@ const cancelForm = () => {
     .formBody {
       width: 550px;
       margin: 0 auto;
+
+      .el-form-item__content,
+      .el-select,
       .el-input {
         width: 440px;
         margin-right: 10px;

src/views/system/house/HouseDetails.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="AddBuildingBox">
+    <PageHeader title="房屋信息"></PageHeader>
+    <div class="AddBuildingBody">
+      <div class="title">
+        <span>基本信息</span>
+        <el-button type="primary" text>编辑</el-button>
+      </div>
+      <div class="addBuildingFormBody">
+        <div style="width: 50%">
+          <el-descriptions>
+            <el-descriptions-item label-align="right" label="房号:"> 娜美 </el-descriptions-item>
+            <el-descriptions-item label-align="right" label="所属小区:">18100000000</el-descriptions-item>
+            <el-descriptions-item label-align="right" label="楼栋:">2栋</el-descriptions-item>
+            <el-descriptions-item label-align="right" label="单元:">2单元</el-descriptions-item>
+            <el-descriptions-item label-align="right" label="楼层:">3楼</el-descriptions-item>
+            <el-descriptions-item label-align="right" label="建筑面积:">112㎡</el-descriptions-item>
+            <el-descriptions-item label-align="right" label="公摊面积:">12㎡</el-descriptions-item>
+            <el-descriptions-item label-align="right" label="套内面积:">100㎡</el-descriptions-item>
+            <el-descriptions-item label-align="right" label="户型:">3室2厅2卫</el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+</script>
+
+<style scoped lang="scss">
+.AddBuildingBox {
+  padding: 15px;
+  height: 100%;
+  width: 100%;
+}
+.AddBuildingBody {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: white;
+  padding: 15px;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 60px;
+  }
+  .addBuildingFormBody {
+    font-size: large;
+    font-weight: bold;
+  }
+}
+</style>

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

@@ -15,7 +15,7 @@ const props = defineProps<{
   unit: any;
   fIdx: number;
 }>();
-
+const router = useRouter();
 const checked = ref([]);
 // 菜单
 const menuList = ref([
@@ -29,6 +29,19 @@ const contextMenu = ref();
 // 点击事件
 const handleSelect = (val) => {
   console.log('你选择了：', val);
+  switch (val) {
+    case 'edit':
+      break;
+    case 'money':
+      break;
+    case 'main':
+      router.push({
+        path: '/house/houseDetails'
+      });
+      break;
+    case 'delete':
+      break;
+  }
 };
 function handleClick(house: any) {
   checked.value = checked.value.includes(house.id) ? checked.value.filter((item) => item !== house.id) : checked.value.concat(house.id);

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

@@ -51,6 +51,9 @@ $primary_color: #1978fe;
     color: rgba(102, 102, 102, 1);
     .rightActions {
       color: $primary_color;
+      span {
+        cursor: pointer;
+      }
     }
   }
   .UnitBody {

src/views/system/house/index.vue

@@ -37,6 +37,41 @@ const active = ref(0);
 const changeHouseType = (index: number) => {
   active.value = index;
 };
+
+let ojb = {
+  'code': 200,
+  'msg': '操作成功',
+  'data': [
+    {
+      'unitNo': '1',
+      'houses': '{"houseId":5,"houseNo":"1201室"}, {"houseId":6,"houseNo":"1202室"}',
+      'houseCount': 2,
+      'floorNo': '12',
+      'buildingId': 54564
+    },
+    {
+      'unitNo': '1',
+      'houses': '{"houseId":1,"houseNo":"1301室"}, {"houseId":2,"houseNo":"1302室"}',
+      'houseCount': 2,
+      'floorNo': '13',
+      'buildingId': 54564
+    },
+    {
+      'unitNo': '2',
+      'houses': '{"houseId":7,"houseNo":"1201室"}',
+      'houseCount': 1,
+      'floorNo': '12',
+      'buildingId': 54564
+    },
+    {
+      'unitNo': '2',
+      'houses': '{"houseId":3,"houseNo":"1301室"}, {"houseId":4,"houseNo":"1302室"}',
+      'houseCount': 2,
+      'floorNo': '13',
+      'buildingId': 54564
+    }
+  ]
+};
 </script>
 
 <style lang="scss" scoped>

src/views/system/storeroom/addStoreRoom.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="AddBuildingBox">
+    <PageHeader title="新建储藏室"></PageHeader>
+    <div class="AddBuildingBody">
+      <div class="title">基本信息</div>
+      <div class="addBuildingFormBody">
+        <el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="100px">
+          <el-form-item label="楼栋" prop="buildingID">
+            <el-select v-model="form.buildingID" class="m-2" placeholder="请选择">
+              <el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="单元" prop="unit">
+            <el-select v-model="form.unit" class="m-2" placeholder="请选择">
+              <el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="楼层" prop="floor">
+            <el-select v-model="form.floor" class="m-2" placeholder="请选择">
+              <el-option v-for="item in floors" :key="item.no" :label="item.name" :value="item.no" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="储藏室号" prop="buildingName">
+            <el-input v-model="form.buildingName" placeholder="请输入储藏室号" />
+          </el-form-item>
+          <el-form-item label="建筑面积" prop="buildingName">
+            <el-input v-model="form.buildingName" placeholder="请输入建筑面积" />
+          </el-form-item>
+          <el-form-item label="公摊面积" prop="buildingName">
+            <el-input v-model="form.buildingName" placeholder="请输入公摊面积" />
+          </el-form-item>
+          <el-form-item label="实用面积" prop="buildingName">
+            <el-input v-model="form.buildingName" placeholder="请输入实用面积" />
+          </el-form-item>
+          <el-form-item label="备注" prop="buildingName">
+            <el-input textarea v-model="form.buildingName" placeholder="请输入备注" />
+          </el-form-item>
+          <el-form-item style="margin-top: 30px">
+            <el-button type="primary" @click="submitForm">提交</el-button>
+            <el-button @click="cancelForm">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PageHeader from '@/components/Pageheader/index.vue';
+const formRef = ref();
+const form = ref({
+  buildingID: '',
+  unit: '',
+  floor: '',
+  buildingName: '', // 房间号
+  buildingArea: '', //建筑面积
+  internalFloorArea: '', //套内面积
+  CommonArea: '', // 公摊面积
+  Housetype: '', // 房屋户型
+  ParkingSpaceNumber: '', // 车位号
+  storeroom: '' // 储藏室
+});
+const housetype = ref([]);
+const rules = ref({
+  buildingID: [{ required: true, message: '请输入楼栋', trigger: 'blur' }],
+  unit: [{ required: true, message: '请选择单元', trigger: 'blur' }],
+  floor: [{ required: true, message: '请选择楼层', trigger: 'blur' }],
+  buildingName: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
+  buildingArea: [{ required: true, message: '请输入建筑面积', trigger: 'blur' }],
+  internalFloorArea: [{ required: true, message: '请输入套内面积', trigger: 'blur' }],
+  CommonArea: [{ required: true, message: '请输入公摊面积', trigger: 'blur' }]
+});
+
+// 楼栋
+const building = ref([
+  {
+    id: '1',
+    name: '1号楼'
+  }
+]);
+const units = ref([
+  {
+    no: '1',
+    name: '1单元'
+  },
+  {
+    no: '2',
+    name: '2单元'
+  }
+]);
+const floors = ref([
+  {
+    no: '1',
+    name: '1层'
+  },
+  {
+    no: '2',
+    name: '2层'
+  }
+]);
+
+const submitForm = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      console.log(form.value);
+    }
+  });
+};
+const cancelForm = () => {
+  console.log('取消');
+};
+</script>
+
+<style scoped lang="scss">
+.AddBuildingBox {
+  padding: 15px;
+  height: 100%;
+  width: 100%;
+}
+.AddBuildingBody {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: white;
+  padding: 15px;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 60px;
+  }
+
+  .addBuildingFormBody {
+    .formBody {
+      width: 550px;
+      margin: 0 auto;
+
+      .el-form-item__content,
+      .el-select,
+      .el-input {
+        width: 440px;
+        margin-right: 10px;
+      }
+      .el-form-item {
+        margin-bottom: 20px;
+        align-items: center;
+      }
+      .unitBox {
+        .el-input {
+          width: 440px;
+          margin-right: 10px;
+        }
+      }
+      .el-button {
+        width: 80px;
+        height: 35px;
+        margin-right: 20px;
+      }
+
+      .houseTypebox {
+        display: flex;
+        align-items: center;
+        .el-input {
+          width: 100px;
+          margin-right: 0px;
+        }
+        span {
+          margin: 0 20px;
+        }
+      }
+    }
+    padding-bottom: 40px;
+  }
+}
+</style>

src/views/system/storeroom/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="StoreRoomBox">
+    <PageHeader title="储藏室管理">
+      <template #container>
+        <div class="flex flex-items-center pb-3">
+          <div>储藏编号</div>
+          <el-input class="ml-10px mr-20px" placeholder="请输入" v-model="searchValue" />
+          <el-button class="mr-20px" type="primary">查询</el-button>
+          <el-button>重置</el-button>
+        </div>
+      </template>
+    </PageHeader>
+    <div class="StoreRoomBody">
+      <div class="nav flex flex-items-center justify-between">
+        <div class="title-text">储藏室列表</div>
+        <div>
+          <el-button type="primary">+添加</el-button>
+          <el-button>批量操作</el-button>
+        </div>
+      </div>
+      <div class="StoreRoomTablebox">
+        <el-table checked>
+          <el-table-column label="楼栋" width="100">
+            <template #default="scope">
+              <div>{{ scope.row.id }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="单元" width="100">
+            <template #default="scope">
+              <div>{{ scope.row.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="储藏室号" width="100">
+            <template #default="scope">
+              <div>{{ scope.row.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="建筑面积" width="100">
+            <template #default="scope">
+              <div>{{ scope.row.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="公摊面积" width="100">
+            <template #default="scope">
+              <div>{{ scope.row.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="实用面积" width="100">
+            <template #default="scope">
+              <div>{{ scope.row.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="100">
+            <template #default="scope">
+              <div>
+                <el-button type="primary">编辑</el-button>
+                <el-button type="danger">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination v-bind="paginationOptions" @update:limit="handleSizeChange" @update:page="hanlePageChange"></Pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const searchValue = ref('');
+
+const paginationOptions = ref({
+  total: 100,
+  page: 1,
+  limit: 10
+});
+function handleSizeChange(val: number) {
+  paginationOptions.value.limit = val;
+}
+function hanlePageChange(val: number) {
+  paginationOptions.value.page = val;
+}
+</script>
+
+<style scoped lang="scss">
+.StoreRoomBody {
+  padding: 20px;
+  $navHeight: 60px;
+  .nav {
+    height: $navHeight;
+  }
+  .StoreRoomTablebox {
+    padding: 0 10px;
+    margin-top: 10px;
+    height: calc(100% - $navHeight);
+  }
+}
+</style>