zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

楼栋增删改查完成， 接着房屋

Browse Source
This commit is contained in:
Zy
2026-04-08 18:37:30 +08:00
parent cd292d5bf4
commit 6e998d4e87
9 changed files with 241 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/system/house/index.ts
View File

@@ -1,6 +1,7 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { addBuildingType, BuildingUnit, BuildingVo } from './type';
import { number } from 'vue-types';
// 楼栋---------------------------------------------------------------------------------------
// 根据 小区id 和 类型 查询楼栋信息
@@ -23,10 +24,25 @@ export function addBuildingApi(data: addBuildingType) {
data
});
}
/** 编辑楼栋 */
export function editBuildingApi(data: addBuildingType & { id: number }) {
return request({
url: '/building',
method: 'PUT',
data
});
}
/** 删除楼栋 */
export function deleteBuildingApi(id: number) {
return request({
url: `/building/${id}`,
method: 'DELETE'
});
}
// 房屋----------------------------------------------------------------------------------------------
// 根据 楼栋id 查询房屋信息
export function getHouselistAPI(buildingId: number): AxiosPromise<BuildingUnit[]> {
export function getHouselistAPI(buildingId: number): AxiosPromise<BuildingUnit> {
return request({
url: `/house/groupByUnitTree/${buildingId}`,
method: 'get'

14
src/api/system/house/type.ts
View File

@@ -42,16 +42,16 @@ export interface BuildingVo {
villageName?: string;
}
// 楼栋
// 楼栋总信息
export interface BuildingUnit {
actualFloorCount: number;
buildingFloorCount: number;
buildingId: number;
buildingName: string;
totalHouses: number;
unitNo: string;
floors: string;
floors_Json?: FloorsType[];
units: BuildingUnitlist[];
}
// 单元
export interface BuildingUnitlist {
floors: FloorsType[];
unitNo: number;
}
// 楼层
export interface FloorsType {

11
src/components/Pageheader/index.vue
View File

@@ -9,12 +9,12 @@
<div class="pagetitle">{{ props.title }}</div>
</div>
<!-- solt -->
<slot name="content" v-if="showSlot"></slot>
<div class="h-20px" v-show="!showSlot"></div>
<slot name="content" v-if="Boolean(showSlot.content)"></slot>
<div class="h-20px" v-show="!Boolean(showSlot.content)"></div>
</div>
<div class="rightbox">
<!-- 操作按钮 -->
<slot name="operate" v-if="showSlot"></slot>
<slot name="operate" v-if="Boolean(showSlot.operate)"></slot>
</div>
</div>
</template>
@@ -23,7 +23,10 @@
import Breadcrumb from '@/components/Breadcrumb/index.vue';
const slots = useSlots();
const showSlot = computed(() => {
return slots.content && slots.content().length > 0;
return {
content: slots.content ?? null,
operate: slots.operate ?? null
};
});
const props = defineProps({

96
src/store/modules/house.ts
View File

@@ -1,7 +1,7 @@
import { getCommunitylistAPI } from '@/api/system/community';
import { communitylist_rows_type } from '@/api/system/community/type';
import { getBuildinglistAPI, getHouselistAPI } from '@/api/system/house';
import { BuildingUnit, BuildingVo } from '@/api/system/house/type';
import type { addBuildingType, BuildingUnit, BuildingVo } from '@/api/system/house/type';
import { defineStore } from 'pinia';
// 数字排序
function sortNumberStr(a: string, b: string) {
@@ -20,6 +20,8 @@ export const useHouseStore = defineStore('house', () => {
// 当前小区信息
const currentVilageInfo = ref<communitylist_rows_type>();
const buildingtype = ref<number>(0);
// 当前小区 所有楼栋信息
const currentBuildingInfoList = ref<BuildingVo[]>([]);
// 当前楼栋信息
@@ -38,14 +40,15 @@ export const useHouseStore = defineStore('house', () => {
});
// 当前楼栋 所有房屋信息
const currentHouseInfoList = ref<BuildingUnit[]>([]);
const currentHouseInfoList = ref<BuildingUnit>();
// 当前楼栋 所有楼层数据
const currentFloorInfoList = ref<string[]>([]);
// 最大楼层
const maxFloors = ref(0);
const currentFloorInfoList = computed(() => {
return (Array.from(floorslist.value) as string[]).sort(sortNumberStr);
});
// 楼层列表 set
const floorslist = ref<Set<string>>(new Set());
// 初始化
const initHouse = async (buildingtype: number) => {
// 查找当前小区
@@ -55,42 +58,96 @@ export const useHouseStore = defineStore('house', () => {
// 获取当前小区 所有楼栋信息
const res2 = await getBuildinglistAPI(currentVilage.villageId, buildingtype);
currentBuildingInfoList.value = res2.data;
// 获取当前小区 楼栋信息
if (!currentBuildingInfo.value) {
// 获取当前小区 第一个楼栋信息
currentBuildingInfo.value = res2.data[0];
console.log(currentBuildingInfo.value);
}
// 获取当前楼栋 所有房屋信息
// 获取当前 第一个楼栋的所有信息
const res3 = await getHouselistAPI(currentBuildingInfo.value.id);
currentHouseInfoList.value = res3.data;
currentHouseInfoList.value.forEach((item) => {
maxFloors.value = Math.max(maxFloors.value, item.actualFloorCount);
item.floors_Json = JSON.parse(`[${item.floors.replaceAll('\\', '')}]`);
item.floors_Json.forEach((floor) => {
console.log(currentHouseInfoList.value);
floorslist.value = new Set();
// 得到所有的有房屋的 楼层 数组
currentHouseInfoList.value.units.forEach((item) => {
item.floors.forEach((floor) => {
floorslist.value.add(floor.floorNo);
});
});
// 对当前小区的 楼层进行排序
currentFloorInfoList.value = (Array.from(floorslist.value) as string[]).sort(sortNumberStr);
};
// 选中房屋
// 选中的房屋
const checkoutHouses = ref<string[]>([]);
// 选中的房屋方法
const checkoutHousesFun = (data: string[]) => {
checkoutHouses.value = data;
};
// 切换住宅类型
const switchHouseType = (housetype: 0 | 1 | 2 | 3) => {
const switchHouseType = (housetype: number) => {
getBuildinglistAPI(currentVilageInfo.value.villageId, housetype)
.then(() => ElMessage.success('切换成功'))
.then(() => {
buildingtype.value = housetype;
initHouse(housetype);
ElMessage.success('切换成功');
})
.catch(() => ElMessage.error('切换失败'));
};
// 切换楼栋
const switchBuilding = (buildingId: number) => {
getHouselistAPI(buildingId).then(() => ElMessage.success('切换成功'));
// 切换之前 清空当前楼栋信息
currentBuildingInfo.value = {
'id': null,
'villageId': null,
'villageName': '',
'buildingName': '',
'buildingUse': null,
'buildToward': '',
'buildTall': '',
'buildStructure': '',
'unitCount': null,
'floorCount': null,
'remark': ''
};
getHouselistAPI(buildingId).then((res) => {
currentHouseInfoList.value = res.data;
// 获取当前楼栋信息并 赋值
currentBuildingInfo.value = currentBuildingInfoList.value.find((item) => item.id === buildingId);
// 清空 楼层信息
floorslist.value = new Set();
// 重新获取楼层信息
currentHouseInfoList.value.units.forEach((item) => {
item.floors.forEach((floor) => {
floorslist.value.add(floor.floorNo);
});
});
ElMessage.success('切换成功');
return;
});
};
// 更新数据
const updateHouse = () => {
initHouse(buildingtype.value);
};
// 删除指定楼栋
const deleteBuildingFun = (buildingId: number) => {
console.log('删除楼栋');
// 手动 从 楼栋列表中删除 指定楼栋
currentBuildingInfoList.value = currentBuildingInfoList.value.filter((item) => item.id !== buildingId);
// 判断指定楼栋是 当前楼栋
if (currentBuildingInfo.value.id === buildingId) {
// 获取楼栋列表中的第一个楼栋,并切换到第一个楼栋
if (currentBuildingInfoList.value[0]) {
currentBuildingInfo.value = currentBuildingInfoList.value[0];
switchBuilding(currentBuildingInfo.value.id);
}
}
};
// 删除指定房屋
const deleteHouseFun = (houseId: string | string[]) => {
console.log('删除房屋');
if (typeof houseId === 'string') {
@@ -107,10 +164,13 @@ export const useHouseStore = defineStore('house', () => {
currentHouseInfoList,
currentFloorInfoList,
checkoutHouses,
buildingtype,
checkoutHousesFun,
initHouse,
switchHouseType,
switchBuilding,
deleteHouseFun
deleteHouseFun,
updateHouse,
deleteBuildingFun
};
});

103
src/views/system/house/AddBuilding.vue
View File

@@ -1,6 +1,10 @@
<template>
<div class="AddBuildingBox">
<PageHeader title="新建楼栋"></PageHeader>
<PageHeader title="新建楼栋">
<template #operate>
<div class="BackBox" @click="goBack">返回</div>
</template>
</PageHeader>
<div class="AddBuildingBody">
<div class="title">基本信息</div>
<div class="addBuildingFormBody">
@@ -8,11 +12,16 @@
<el-form-item label="楼栋名称" prop="buildingName">
<el-input v-model.trim="form.buildingName" placeholder="请输入楼栋名称" />
</el-form-item>
<el-form-item label="楼栋类型" prop="buildingUse">
<el-select v-model="form.buildingUse" placeholder="选择楼栋类型">
<el-option v-for="(item, index) in housetypelist" :key="index" :label="item" :value="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="楼栋朝向" prop="buildToward">
<el-input v-model.trim="form.buildToward" placeholder="请输入楼栋朝向" />
</el-form-item>
<el-form-item label="楼高(m)" prop="buildTail">
<el-input v-model.trim="form.buildTail" placeholder="请输入楼高(m)" />
<el-input v-model.trim="form.buildTall" placeholder="请输入楼高(m)" />
</el-form-item>
<el-form-item label="楼栋结构" prop="buildStructure">
<el-input v-model.trim="form.buildStructure" placeholder="请输入楼栋结构" />
@@ -37,55 +46,119 @@
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getCommunitylistAPI } from '@/api/system/community';
import { addBuildingApi } from '@/api/system/house';
import { addBuildingApi, editBuildingApi } from '@/api/system/house';
import { useRouter } from 'vue-router';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
const { currentVilageInfo } = storeToRefs(houseStore);
const route = useRoute();
const router = useRouter();
const formRef = ref();
const form = ref({
buildingName: '',
buildToward: '',
buildTail: '',
buildTall: '',
buildingUse: 0,
buildStructure: '',
unitCount: null,
floorCount: null
});
const housetypelist = ['住宅', '办公', '商用', '公寓'];
const rules = ref({
buildingName: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
buildingUse: [{ required: true, message: '请选择楼栋类型', trigger: 'blur' }],
unitCount: [{ required: true, message: '请输入单元数', trigger: 'blur' }],
floorCount: [{ required: true, message: '请输入楼层数', trigger: 'blur' }]
});
// 判断新增还是编辑
const buildingId = route.query.buildingId as string;
if (buildingId) {
console.log('edit');
getBuildingById();
} else {
console.log('add');
}
// 获取当前小区信息
const currentVilageinfo = ref();
function getVilageFun() {
getCommunitylistAPI().then((res) => {
currentVilageinfo.value = res.rows.find((item) => item.choiceStatus === 0);
/** 编辑楼栋 */
function getBuildingById() {
console.log(houseStore.currentBuildingInfoList);
houseStore.currentBuildingInfoList.forEach((item) => {
if (item.id === parseInt(buildingId)) {
form.value.buildingName = item.buildingName;
form.value.buildToward = item.buildToward;
form.value.buildingUse = item.buildingUse;
form.value.buildTall = item.buildTall;
form.value.buildStructure = item.buildStructure;
form.value.unitCount = item.unitCount;
form.value.floorCount = item.floorCount;
}
});
}
// getVilageFun();
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
console.log(form.value);
addBuildingApi({
if (buildingId) {
console.log('修改');
editBuildingApi({
...form.value,
villageId: currentVilageinfo.value.id
villageId: currentVilageInfo.value.villageId,
id: parseInt(buildingId)
})
.then((res) => {
console.log(res);
ElMessage.success('添加成功');
ElMessage.success('修改成功');
houseStore.updateHouse();
cancelForm();
})
.catch((err) => {
ElMessage.error('修改失败');
});
} else {
console.log(' 添加');
addBuildingApi({
...form.value,
villageId: currentVilageInfo.value.villageId
})
.then((res) => {
ElMessage.success('添加成功');
houseStore.updateHouse();
cancelForm();
})
.catch((err) => {
console.log(err);
ElMessage.error('添加失败');
});
}
}
});
};
const cancelForm = () => {
formRef.value?.resetFields();
goBack();
};
function goBack() {
router.push({
path: '/house/houselist'
});
}
</script>
<style scoped lang="scss">
.BackBox {
width: 100px;
height: 45px;
line-height: 40px;
text-align: center;
border-radius: 5px;
color: rgba(16, 16, 16, 1);
border: 1px solid rgba(187, 187, 187, 1);
cursor: pointer;
font-size: 14px;
&:hover {
box-shadow: 0px 2px 6px 0px rgba(26, 117, 255, 0.1);
}
}
.AddBuildingBox {
padding: 15px;
height: 100%;

32
src/views/system/house/components/building.vue
View File

@@ -13,12 +13,11 @@
active: item.id === currentBuildingInfo.id
}"
:key="index"
@click="switchBuilding(item.id)"
>
<div class="buildingname">{{ item.buildingName ?? '测试数据' }}</div>
<div class="buildingname" @click="switchBuilding(item.id)">{{ item.buildingName ?? '测试数据' }}</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>
<el-icon class="pointer hover-color-blue" @click="editBuilding(item.id)"><Setting /></el-icon>
<el-icon class="pointer hover-color-red" @click="deleteBuilding(item.id)"><Delete /></el-icon>
</div>
</li>
</ul>
@@ -26,17 +25,35 @@
</template>
<script setup lang="ts">
import { deleteBuildingApi } from '@/api/system/house';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
const { switchBuilding } = houseStore; // 方法
const { currentBuildingInfoList, currentBuildingInfo } = storeToRefs(houseStore); // 数据
const router = useRouter();
console.log(currentBuildingInfoList);
const handleAddBuilding = () => {
router.push({
path: '/house/addbuilding'
});
};
const editBuilding = (id: number) => {
router.push({
path: '/house/addbuilding',
query: {
buildingId: id
}
});
};
const deleteBuilding = (id: number) => {
deleteBuildingApi(id)
.then(() => {
console.log('删除成功');
houseStore.deleteBuildingFun(id);
})
.catch(() => {
console.log('删除失败');
});
};
</script>
<style scoped lang="scss">
@@ -64,12 +81,15 @@ $primary_color: #1978fe;
line-height: 45px;
color: rgba(16, 16, 16, 1);
position: relative;
cursor: pointer;
border-bottom: 1px solid #f2f2f2;
&:hover {
background-color: #1978fe0c;
}
.buildingname {
text-align: center;
width: 100%;
padding: 0 20px 0 0;
cursor: pointer;
}
.buildactions {
position: absolute;

17
src/views/system/house/components/components/table.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="TableBox p-5 h-full">
<el-table border :data="currentFloorInfoList">
<el-table-column align="center" fixed label="楼层\单元" width="85">
<el-table border :data="houseStore.currentFloorInfoList">
<el-table-column align="center" fixed label="楼层\单元" min-width="85">
<template #default="{ row }">
<span>{{ row }}楼</span>
</template>
@@ -10,18 +10,12 @@
min-width="160"
class="column"
align="center"
:label="`${units.unitNo}单元`"
v-for="(units, index) in currentHouseInfoList"
:label="`${unit.unitNo}单元`"
v-for="(unit, index) in houseStore.currentHouseInfoList?.units ?? []"
:key="index"
>
<template #default="{ row }">
<houseItem
@contextmenufun="contextMenuFun"
@change="handleChange"
:menu-list="menutlist"
:unit="units.floors_Json"
:f-idx="row"
></houseItem>
<houseItem @contextmenufun="contextMenuFun" @change="handleChange" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
</template>
</el-table-column>
</el-table>
@@ -33,6 +27,7 @@ import houseItem from './houseItem.vue';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
const { currentHouseInfoList, currentFloorInfoList } = storeToRefs(houseStore); // 数据
console.log(currentHouseInfoList);
const menutlist = [
{ label: '编辑', value: 'edit' },
{ label: '收费标准', value: 'money' },

3
src/views/system/house/components/unit.vue
View File

@@ -6,7 +6,7 @@
<strong>{{ houseStore.currentBuildingInfo.buildingName }}</strong>
</span>
<span class="mr-30px">楼栋朝向:{{ houseStore.currentBuildingInfo.buildToward }}</span>
<span class="mr-30px">楼高：{{ houseStore.currentBuildingInfo.buildTall }}</span>
<span class="mr-30px">楼高：{{ houseStore.currentBuildingInfo.buildTall }}(m)</span>
<span class="mr-30px">楼栋结构：{{ houseStore.currentBuildingInfo.buildStructure }} </span>
</div>
<div class="rightActions">
@@ -22,7 +22,6 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import TableUnit from './components/table.vue';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();

13
src/views/system/house/index.vue
View File

@@ -10,9 +10,9 @@
<div
class="housetype"
:class="{
active: active === index
active: houseStore.buildingtype === index
}"
@click="changeHouseType(index)"
@click="houseStore.switchHouseType(index)"
v-for="(house, index) in housetypelist"
:key="index"
>
@@ -34,16 +34,9 @@ import PageHeader from '@/components/Pageheader/index.vue';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
const { currentVilageInfo } = storeToRefs(houseStore);
console.log(currentVilageInfo);
const housetypelist = ['住宅', '办公', '商用', '公寓'];
const active = ref(0);
const changeHouseType = (index: number) => {
active.value = index;
};
houseStore.initHouse(houseStore.buildingtype);
// 初始化数据
houseStore.initHouse(active.value);
</script>
<style lang="scss" scoped>