房屋管理功能完成，接下来储藏室

src/views/system/storeroom/addStoreRoom.vue

@@ -1,39 +1,56 @@
 <template>
   <div class="AddBuildingBox">
-    <PageHeader title="新建储藏室"></PageHeader>
+    <PageHeader :title="storeRoomid ? '编辑储藏室' : '添加储藏室'"></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-row>
+            <el-col :span="11">
+              <el-form-item label="楼栋" prop="buildingId">
+                <el-select @change="handleChangeBuild" v-model="form.buildingId" placeholder="请选择楼栋">
+                  <el-option v-for="item in Buildinglists" :key="item.id" :label="item.buildingName" :value="item.id" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="单元" prop="unit">
+                <el-select v-model="form.unitNo" placeholder="请选择单元">
+                  <el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="储藏室号" prop="storeroomNo">
+                <el-input v-model.number="form.storeroomNo" placeholder="请输入储藏室号" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="建筑面积" prop="houseArea">
+                <el-input v-model="form.houseArea" placeholder="请输入建筑面积" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="公摊面积" prop="shareArea">
+                <el-input v-model="form.shareArea" placeholder="请输入公摊面积" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="2"></el-col>
+            <el-col :span="11">
+              <el-form-item label="实用面积" prop="internalArea">
+                <el-input v-model="form.internalArea" placeholder="请输入实用面积" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请输入备注" />
           </el-form-item>
           <el-form-item style="margin-top: 30px">
             <el-button type="primary" @click="submitForm">提交</el-button>
@@ -48,67 +65,93 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import PageHeader from '@/components/Pageheader/index.vue';
+import { getBuildinglistAPI, getBuildinglists, getBuildingOnly, getHouselistAPI } from '@/api/system/house';
+import { getCommunitylistAPI } from '@/api/system/community';
+import { addStoreroom, getStoreroom } from '@/api/system/storeroom';
+import { StoreroomVO } from '@/api/system/storeroom/types';
+import { N } from 'vue-router/dist/index-DFCq6eJK.js';
+const route = useRoute();
+const router = useRouter();
 const formRef = ref();
-const form = ref({
-  buildingID: '',
-  unit: '',
-  floor: '',
-  buildingName: '', // 房间号
-  buildingArea: '', //建筑面积
-  internalFloorArea: '', //套内面积
-  CommonArea: '', // 公摊面积
-  Housetype: '', // 房屋户型
-  ParkingSpaceNumber: '', // 车位号
-  storeroom: '' // 储藏室
+const form = ref<StoreroomVO>({
+  id: null,
+  buildingId: '',
+  unitNo: '',
+  storeroomNo: '',
+  houseArea: null,
+  shareArea: null,
+  internalArea: null,
+  houseId: '',
+  status: 0,
+  remark: ''
 });
-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' }]
+  buildingId: [{ required: true, message: '请选择楼栋', trigger: 'blur' }],
+  unitNo: [{ required: true, message: '请选择单元', trigger: 'blur' }],
+  storeroomNo: [{ 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 storeRoomid = ref(null);
+const units = ref([]);
+const Buildinglists = ref([]);
+const currentVilage = ref(null);
 
+// 获取储藏室信息
+function getStoreRoominfo(id: string) {
+  getStoreroom(id).then((res) => {
+    console.log(res);
+    form.value = {
+      ...form.value,
+      ...res.data
+    };
+  });
+}
+// 根据小区id获取楼栋单元
+function init() {
+  getBuildinglists().then((res) => {
+    Buildinglists.value = res.rows;
+    console.log(res.rows);
+  });
+}
+init();
+if (route.query.id) {
+  storeRoomid.value = route.query.id;
+  getStoreRoominfo(storeRoomid.value);
+}
+// 根据楼栋id获取单元
+function handleChangeBuild(val: string) {
+  getBuildingOnly(val).then((res) => {
+    console.log(res);
+    units.value = Array.from({ length: res.data.unitCount }).map((_, index) => {
+      return {
+        no: index + 1,
+        name: index + 1 + '单元'
+      };
+    });
+  });
+}
 const submitForm = () => {
   formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      console.log(form.value);
+      const data = {
+        ...form.value
+      };
+      if (storeRoomid.value !== null) {
+        console.log('修改');
+      } else {
+        console.log('新增');
+        addStoreroom(data).then((res) => {
+          console.log(res);
+        });
+      }
     }
   });
 };
 const cancelForm = () => {
   console.log('取消');
+  router.push({
+    path: '/house/storeroom'
+  });
 };
 </script>
 
@@ -137,7 +180,7 @@ const cancelForm = () => {
 
   .addBuildingFormBody {
     .formBody {
-      width: 550px;
+      width: 1050px;
       margin: 0 auto;
 
       .el-form-item__content,

src/views/system/storeroom/index.vue

@@ -1,141 +1,290 @@
 <template>
-  <div class="StoreRoomBox">
-    <PageHeader title="储藏室管理"> </PageHeader>
-    <div class="nav flex flex-items-center pb-3">
-      <div class="title-text">储藏编号</div>
-      <el-input placeholder="请输入" v-model="searchValue" />
-      <el-button class="mr-10px" type="primary">查询</el-button>
-      <el-button>重置</el-button>
-    </div>
-    <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 class="p-2 flex storeRoomBox">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form label-width="100" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="所属楼栋ID" prop="buildingId">
+              <el-input v-model="queryParams.buildingId" placeholder="请输入所属楼栋ID" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="单元号" prop="unitNo">
+              <el-input v-model="queryParams.unitNo" placeholder="请输入单元号" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="储藏室号" prop="storeroomNo">
+              <el-input v-model="queryParams.storeroomNo" placeholder="请输入储藏室号" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="建筑面积(㎡)" prop="houseArea">
+              <el-input v-model="queryParams.houseArea" placeholder="请输入建筑面积(㎡)" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="公摊面积(㎡)" prop="shareArea">
+              <el-input v-model="queryParams.shareArea" placeholder="请输入公摊面积(㎡)" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="实用面积(㎡)" prop="internalArea">
+              <el-input v-model="queryParams.internalArea" placeholder="请输入实用面积(㎡)" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="关联房屋ID" prop="houseId">
+              <el-input v-model="queryParams.houseId" placeholder="请输入关联房屋ID" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['storeroom:storeroom:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['storeroom:storeroom:edit']"
+              >修改</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['storeroom:storeroom:remove']"
+              >删除</el-button
+            >
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table class="tablebody" v-loading="loading" border :data="storeroomList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="储藏室ID" align="center" prop="id" v-if="true" />
+        <el-table-column label="所属楼栋ID" align="center" prop="buildingId" />
+        <el-table-column label="单元号" align="center" prop="unitNo" />
+        <el-table-column label="储藏室号" align="center" prop="storeroomNo" />
+        <el-table-column label="建筑面积(㎡)" align="center" prop="houseArea" />
+        <el-table-column label="公摊面积(㎡)" align="center" prop="shareArea" />
+        <el-table-column label="实用面积(㎡)" align="center" prop="internalArea" />
+        <el-table-column label="关联房屋ID" align="center" prop="houseId" />
+        <el-table-column label="状态" align="center" prop="status" />
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['storeroom:storeroom:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['storeroom:storeroom:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改储藏室管理对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="storeroomFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="所属楼栋ID" prop="buildingId">
+          <el-input v-model="form.buildingId" placeholder="请输入所属楼栋ID" />
+        </el-form-item>
+        <el-form-item label="单元号" prop="unitNo">
+          <el-input v-model="form.unitNo" placeholder="请输入单元号" />
+        </el-form-item>
+        <el-form-item label="储藏室号" prop="storeroomNo">
+          <el-input v-model="form.storeroomNo" placeholder="请输入储藏室号" />
+        </el-form-item>
+        <el-form-item label="建筑面积(㎡)" prop="houseArea">
+          <el-input v-model="form.houseArea" placeholder="请输入建筑面积(㎡)" />
+        </el-form-item>
+        <el-form-item label="公摊面积(㎡)" prop="shareArea">
+          <el-input v-model="form.shareArea" placeholder="请输入公摊面积(㎡)" />
+        </el-form-item>
+        <el-form-item label="实用面积(㎡)" prop="internalArea">
+          <el-input v-model="form.internalArea" placeholder="请输入实用面积(㎡)" />
+        </el-form-item>
+        <el-form-item label="关联房屋ID" prop="houseId">
+          <el-input v-model="form.houseId" placeholder="请输入关联房屋ID" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
         </div>
-      </div>
-      <div class="StoreRoomTablebox">
-        <el-table :data="datalist" checked>
-          <el-table-column align="center" type="selection"></el-table-column>
-          <el-table-column align="center" label="楼栋">
-            <template #default="scope">
-              <div>{{ scope.row.floor }}栋</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="单元">
-            <template #default="scope">
-              <div>{{ scope.row.name }}单元</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="储藏室号">
-            <template #default="scope">
-              <div>{{ scope.row.name }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="建筑面积">
-            <template #default="scope">
-              <div>{{ scope.row.name }}㎡</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="公摊面积">
-            <template #default="scope">
-              <div>{{ scope.row.name }}㎡</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="实用面积">
-            <template #default="scope">
-              <div>{{ scope.row.name }}㎡</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="操作">
-            <template #default="scope">
-              <div>
-                <el-button text type="primary">编辑</el-button>
-                <el-button text type="danger">删除</el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <Pagination v-bind="paginationOptions" @update:limit="handleSizeChange" @update:page="hanlePageChange"></Pagination>
-      </div>
-    </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
-const searchValue = ref('');
-import PageHeader from '@/components/Pageheader/index.vue';
+<script setup name="Storeroom" lang="ts">
+import { listStoreroom, getStoreroom, delStoreroom, addStoreroom, updateStoreroom } from '@/api/system/storeroom/index';
+import { StoreroomVO, StoreroomQuery, StoreroomForm } from '@/api/system/storeroom/types';
 
-const paginationOptions = ref({
-  total: 100,
-  page: 1,
-  limit: 10
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const router = useRouter();
+const storeroomList = ref<StoreroomVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const storeroomFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
 });
 
-const datalist = ref([
-  {
-    units: 3,
-    name: 'A1',
-    storeroom: 'b123',
-    area: '1000',
-    commontArea: '222',
-    useArea: '333',
-    floor: '1'
+const initFormData: StoreroomForm = {
+  id: undefined,
+  buildingId: undefined,
+  unitNo: undefined,
+  storeroomNo: undefined,
+  houseArea: undefined,
+  shareArea: undefined,
+  internalArea: undefined,
+  houseId: undefined,
+  status: undefined,
+  remark: undefined
+};
+const data = reactive<PageData<StoreroomForm, StoreroomQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    buildingId: undefined,
+    unitNo: undefined,
+    storeroomNo: undefined,
+    houseArea: undefined,
+    shareArea: undefined,
+    internalArea: undefined,
+    houseId: undefined,
+    status: undefined,
+    params: {}
+  },
+  rules: {
+    id: [{ required: true, message: '储藏室ID不能为空', trigger: 'blur' }],
+    buildingId: [{ required: true, message: '所属楼栋ID不能为空', trigger: 'blur' }],
+    unitNo: [{ required: true, message: '单元号不能为空', trigger: 'blur' }],
+    storeroomNo: [{ required: true, message: '储藏室号不能为空', trigger: 'blur' }]
   }
-]);
-function handleSizeChange(val: number) {
-  paginationOptions.value.limit = val;
-}
-function hanlePageChange(val: number) {
-  paginationOptions.value.page = val;
-}
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询储藏室管理列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listStoreroom(queryParams.value);
+  storeroomList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  storeroomFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: StoreroomVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  router.push({
+    path: '/house/addStoreRoom'
+  });
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: StoreroomVO) => {
+  router.push({
+    path: '/house/addStoreRoom',
+    query: {
+      id: row.id
+    }
+  });
+  // reset();
+  // const _id = row?.id || ids.value[0];
+  // const res = await getStoreroom(_id);
+  // Object.assign(form.value, res.data);
+  // dialog.visible = true;
+  // dialog.title = '修改储藏室管理';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  storeroomFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateStoreroom(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addStoreroom(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: StoreroomVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除储藏室管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delStoreroom(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+onMounted(() => {
+  getList();
+});
 </script>
 
-<style scoped lang="scss">
-.StoreRoomBox {
-  padding: 20px;
-  display: flex;
-  height: 100%;
+<style lang="scss" scoped>
+.storeRoomBox {
   flex-direction: column;
-
-  .el-button {
-    width: 80px;
-    height: 35px;
-    border-radius: 5px;
-  }
-  & > .nav {
-    background-color: white;
-    padding: 20px 30px;
-    border-top: 1px solid #ccc;
-    & > .title-text {
-      width: 80px;
-    }
-    .el-input {
-      width: 300px;
-      margin-right: 30px;
-    }
-  }
-}
-.StoreRoomBody {
-  $navHeight: 60px;
-  flex: 1;
-
-  padding: 20px;
-  // height: 785px;
-  border-radius: 5px;
-  margin-top: 20px;
-  background-color: #fff;
-  .nav {
-    height: $navHeight;
-  }
-  .StoreRoomTablebox {
-    padding: 0 10px;
-    margin-top: 10px;
-    height: calc(100% - $navHeight);
-    & > .el-table {
-      height: calc(100% - 70px);
+  height: 100%;
+  & > .el-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .tablebody {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 80px);
     }
   }
 }