房屋详情，单元变更

2026-05-21 14:13:28 +08:00
parent 9645412534
commit 38274ab612
68 changed files with 1867 additions and 568 deletions
--- a/src/views/system/house/components/components/houseItem.vue
+++ b/src/views/system/house/components/components/houseItem.vue
@@ -44,13 +44,14 @@ const handleCalp = (event: MouseEvent, houseid: string) => {
 .house-list {
  display: flex;
  flex-wrap: wrap;
-  max-height: 300px;
+  gap: 10px;
+  max-height: 400px;
  overflow: auto;
-  justify-content: space-evenly;
+  overflow-x: hidden;
 }

 .house {
-  width: 100px;
+  min-width: 100px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
--- a/src/views/system/house/components/components/table.vue
+++ b/src/views/system/house/components/components/table.vue
@@ -1,25 +1,32 @@
 <template>
-  <div class="TableBox p-5 h-full" v-if="houseStore.currentHouseInfoList !== null">
-    <el-checkbox-group @change="handleChangeCheckhouses" v-model="houseStore.checkoutHouses">
-      <el-table border :data="houseStore.currentFloorInfoList">
-        <el-table-column align="center" fixed label="楼层\单元" max-width="100">
-          <template #default="{ row }">
-            <span>{{ row }}楼</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          min-width="260"
-          align="center"
-          :label="`${unit.unitNo}单元`"
-          v-for="(unit, index) in houseStore.currentHouseInfoList?.units.length > 0 ? houseStore.currentHouseInfoList?.units : []"
-          :key="index"
-        >
-          <template #default="{ row }">
-            <houseItem @contextmenufun="contextMenuFun" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-checkbox-group>
+  <div class="h-full">
+    <div class="TableBox p-5 h-full" v-if="houseStore.currentHouseInfoList !== null">
+      <el-checkbox-group @change="handleChangeCheckhouses" v-model="houseStore.checkoutHouses">
+        <el-table border :data="houseStore.currentFloorInfoList">
+          <el-table-column align="center" fixed label="楼层\单元" max-width="100">
+            <template #default="{ row }">
+              <span>{{ row }}楼</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            min-width="260"
+            align="center"
+            v-for="(unit, index) in houseStore.currentHouseInfoList?.units.length > 0 ? houseStore.currentHouseInfoList?.units : []"
+            :key="index"
+          >
+            <template #header>
+              <span>{{ unit.unitNoName }}</span>
+              <el-button link type="primary" icon="Edit" @click="HandleEditUnit(unit)"></el-button>
+              <el-button link type="danger" icon="Delete" style="margin-left: 0" @click="HandleDeleteUnit(unit)"></el-button>
+            </template>
+            <template #default="{ row }">
+              <houseItem @contextmenufun="contextMenuFun" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-checkbox-group>
+    </div>
+    <div v-else class="nodata">暂无房屋</div>
  </div>
 </template>

@@ -32,6 +39,8 @@ import { checkPermi } from '@/utils/permission';
 const houseStore = useHouseStore();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;

+const emit = defineEmits(['editUnit', 'deleteUnit']);
+
 const router = useRouter();
 const menutlist = [
  // { label: '编辑', value: 'edit' },
@@ -85,6 +94,13 @@ function contextMenuFun(val: { type: string; value: string }) {
      break;
  }
 }
+
+function HandleEditUnit(unit) {
+  emit('editUnit', unit.unitNoId);
+}
+function HandleDeleteUnit(unit) {
+  emit('deleteUnit', unit.unitNoId);
+}
 </script>

 <style scoped lang="scss">
@@ -93,4 +109,11 @@ function contextMenuFun(val: { type: string; value: string }) {
    height: calc(100% - 500px);
  }
 }
+.nodata {
+  font-size: 1.2rem;
+  color: #ccc;
+  letter-spacing: 2px;
+  text-align: center;
+  padding-top: 200px;
+}
 </style>
--- a/src/views/system/house/components/unit.vue
+++ b/src/views/system/house/components/unit.vue
@@ -28,9 +28,20 @@
        </span>
      </div>
      <div class="rightActions flex flex-items-center">
+        <span class="mr-20px" @click="handleAddUnit" v-hasPermi="['system:house:add']">+添加单元</span>
        <span class="mr-20px" @click="handleAddHouse" v-hasPermi="['system:house:add']">+增加房屋</span>
        <!-- <span class="mr-20px">收费标准设置</span> -->
        <span @click="deleteAllhouse" v-hasPermi="['system:house:remove']">删除</span>
+        <el-select
+          clearable
+          @clear="handleClearUse"
+          @change="handleChangeUse"
+          v-model="houseUse"
+          placeholder="筛选房屋类型"
+          style="width: 180px; margin: 0 10px"
+        >
+          <el-option v-for="item in houseUseTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
        <div class="searchbox flex flex-items-center">
          <el-input v-model="housename" class="searchinput" placeholder="请输入房屋号"></el-input>
          <el-button style="margin-left: 10px" type="primary" @click="handleSearchHouse">搜索</el-button>
@@ -39,8 +50,28 @@
      </div>
    </div>
    <div class="UnitBody">
-      <TableUnit></TableUnit>
+      <TableUnit @edit-unit="handleEditUnit" @delete-unit="handleDelete"></TableUnit>
    </div>
+    <!-- 添加或修改单元对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="unitNoFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="单元名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入单元名称" />
+        </el-form-item>
+        <el-form-item label="楼栋" prop="buildingId">
+          <!-- <el-input v-model="form.buildingId" placeholder="请输入楼栋" /> -->
+          <el-select v-model="form.buildingId" placeholder="请选择">
+            <el-option v-for="item in houseStore.currentBuildingInfoList" :key="item.id" :label="item.buildingName" :value="item.id" />
+          </el-select>
+        </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>
+      </template>
+    </el-dialog>
  </div>
 </template>

@@ -48,6 +79,9 @@
 import { deleteHouseApi } from '@/api/system/house';
 import TableUnit from './components/table.vue';
 import { useHouseStore } from '@/store/modules/house';
+import { listHouseUseType } from '@/api/system/houseUse';
+import { addUnitNo, delUnitNo, getUnitNo, updateUnitNo } from '@/api/system/houseUnit';
+import { UnitNoVO } from '@/api/system/houseUnit/type';

 const { proxy } = getCurrentInstance() as ComponentInternalInstance;

@@ -55,20 +89,117 @@ const houseStore = useHouseStore();
 const router = useRouter();

 const housename = ref('');
+const houseUse = ref('');
+const houseUseTypeList = ref([]);
+
+/**
+ * 获取房屋 类型
+ */
+function init() {
+  listHouseUseType({
+    pageNum: 1,
+    pageSize: 99999
+  }).then((res) => {
+    houseUseTypeList.value = res.rows;
+  });
+}
+init();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const unitNoFormRef = ref();
+const buttonLoading = ref(false);
+const form = ref({
+  id: undefined,
+  name: undefined,
+  buildingId: undefined,
+  villageId: undefined
+});
+
+const rules = {
+  name: [{ required: true, message: '单元名称不能为空', trigger: 'blur' }],
+  buildingId: [{ required: true, message: '所属楼栋不能为空', trigger: 'blur' }]
+};
+/** 新增按钮操作 */
+const handleAddUnit = () => {
+  resetForm();
+  dialog.visible = true;
+  dialog.title = '添加单元';
+};
+/** 修改按钮操作 */
+const handleEditUnit = async (id: string) => {
+  resetForm();
+  const res = await getUnitNo(id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改单元';
+};
+/** 删除按钮操作 */
+const handleDelete = async (id: string) => {
+  await proxy?.$modal.confirm('是否确认删除该单元？');
+  await delUnitNo(id);
+  proxy?.$modal.msgSuccess('删除成功');
+  // await getList();
+  houseStore.updateCureentBuilding();
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  unitNoFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateUnitNo(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addUnitNo(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      houseStore.updateCureentBuilding();
+    }
+  });
+};
+/** 取消按钮 */
+const cancel = () => {
+  resetForm();
+  dialog.visible = false;
+};
+/** 表单重置 */
+const resetForm = () => {
+  form.value = { id: undefined, name: undefined, buildingId: undefined, villageId: undefined };
+  unitNoFormRef.value?.resetFields();
+};
+/**
+ * 改变房屋类型
+ * @param id
+ */
+function handleChangeUse(id?: string) {
+  houseUse.value = id;
+}
+function handleClearUse() {
+  houseUse.value = '';
+  handleSearchHouse();
+}
 /** 添加房屋 */
 function handleAddHouse() {
  router.push({
    path: '/house/addHouse'
  });
 }
+
+/**
+ * 搜索 房屋
+ */
 function handleSearchHouse() {
-  if (housename.value && housename.value.trim()) {
-    houseStore.getHouseBybuildingNo(housename.value);
-  }
+  houseStore.getHouseBybuildingNo(housename.value, houseUse.value);
 }
 function reset() {
  housename.value = '';
-  houseStore.getHouseBybuildingNo(housename.value);
+  houseUse.value = '';
+  houseStore.getHouseBybuildingNo(housename.value, houseUse.value);
 }

 async function deleteAllhouse() {
@@ -109,7 +240,6 @@ $primary_color: #1978fe;
      }

      .searchbox {
-        margin-left: 30px;
        .searchinput {
          width: 250px;
          @media (max-width: 1200px) {