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

This commit is contained in:
Zy
2026-04-09 12:40:17 +08:00
parent 6e998d4e87
commit 267a9a5f29
19 changed files with 1569 additions and 451 deletions

BIN
dist.7z

Binary file not shown.

View File

@@ -40,6 +40,7 @@
"jsencrypt": "3.5.4", "jsencrypt": "3.5.4",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "3.0.4", "pinia": "3.0.4",
"pinia-plugin-persistedstate": "^4.7.1",
"screenfull": "6.0.2", "screenfull": "6.0.2",
"vue": "3.5.30", "vue": "3.5.30",
"vue-cropper": "1.1.4", "vue-cropper": "1.1.4",

View File

@@ -1,10 +1,11 @@
import request from '@/utils/request'; import request from '@/utils/request';
import { AxiosPromise } from 'axios'; import { AxiosPromise } from 'axios';
import { addBuildingType, BuildingUnit, BuildingVo } from './type'; import { addBuildingType, addHouseType, BuildingUnit, BuildingVo } from './type';
import { number } from 'vue-types'; import { number } from 'vue-types';
// 楼栋--------------------------------------------------------------------------------------- // 楼栋---------------------------------------------------------------------------------------
// 根据 小区id 和 类型 查询楼栋信息
/** 根据 小区id 和 类型 查询楼栋信息 */
export function getBuildinglistAPI(villageId: number, buildingUse: number): AxiosPromise<BuildingVo[]> { export function getBuildinglistAPI(villageId: number, buildingUse: number): AxiosPromise<BuildingVo[]> {
return request({ return request({
url: '/building/byVillage', url: '/building/byVillage',
@@ -15,6 +16,20 @@ export function getBuildinglistAPI(villageId: number, buildingUse: number): Axio
} }
}); });
} }
/** 获取所有楼栋 */
export function getBuildinglists(): AxiosPromise<BuildingVo[]> {
return request({
url: '/building/list',
method: 'get'
});
}
/** 获取单一楼栋 */
export function getBuildingOnly(buildingId: string): AxiosPromise<BuildingVo> {
return request({
url: `/building/${buildingId}`,
method: 'get'
});
}
/** 添加楼栋 */ /** 添加楼栋 */
export function addBuildingApi(data: addBuildingType) { export function addBuildingApi(data: addBuildingType) {
@@ -25,7 +40,7 @@ export function addBuildingApi(data: addBuildingType) {
}); });
} }
/** 编辑楼栋 */ /** 编辑楼栋 */
export function editBuildingApi(data: addBuildingType & { id: number }) { export function editBuildingApi(data: addBuildingType & { id: string }) {
return request({ return request({
url: '/building', url: '/building',
method: 'PUT', method: 'PUT',
@@ -41,24 +56,42 @@ export function deleteBuildingApi(id: number) {
} }
// 房屋---------------------------------------------------------------------------------------------- // 房屋----------------------------------------------------------------------------------------------
// 根据 楼栋id 查询房屋信息 /** 根据 楼栋id 查询房屋信息 */
export function getHouselistAPI(buildingId: number): AxiosPromise<BuildingUnit> { export function getHouselistAPI(buildingId: string): AxiosPromise<BuildingUnit> {
return request({ return request({
url: `/house/groupByUnitTree/${buildingId}`, url: `/house/groupByUnitTree/${buildingId}`,
method: 'get' method: 'get'
}); });
} }
// 添加房屋 // 添加房屋
export function addHouseAPI() { /** 添加房屋 */
export function addHouseAPI(data: addHouseType) {
return request({ return request({
url: `/house`, url: `/house`,
method: 'POST' method: 'POST',
data
}); });
} }
// 删除房屋 // 删除房屋
export function deleteHouseApi() { export function deleteHouseApi(houseIds: string) {
return request({ return request({
url: `/house/{houseIds}`, url: `/house/${houseIds}`,
method: 'delete' method: 'delete'
}); });
} }
// 查询 房屋信息
export function getHouseApi(houseId: string) {
return request({
url: `/house/${houseId}`,
method: 'GET'
});
}
// 编辑房屋信息
export function EditHouseApi(data: addHouseType) {
return request({
url: `/house`,
method: 'PUT',
data
});
}

View File

@@ -26,7 +26,7 @@ export interface BuildingVo {
/** /**
* 楼栋ID * 楼栋ID
*/ */
id: number; id: string;
/** /**
* 备注 * 备注
*/ */
@@ -46,6 +46,8 @@ export interface BuildingVo {
export interface BuildingUnit { export interface BuildingUnit {
buildingId: number; buildingId: number;
buildingName: string; buildingName: string;
floorCount: number;
unitCount: number;
units: BuildingUnitlist[]; units: BuildingUnitlist[];
} }
// 单元 // 单元
@@ -73,3 +75,16 @@ export interface addBuildingType {
floorCount?: number; floorCount?: number;
unitCount?: number; unitCount?: number;
} }
export interface addHouseType {
'houseId'?: string;
'buildingId'?: string;
'villageId'?: number;
'unitNo': string;
'floorNo': string;
'houseNo': string;
'houseArea': string;
'internalArea': string;
'shareArea': string;
'houseType': string;
}

View File

@@ -0,0 +1,63 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { ResidentVO, ResidentForm, ResidentQuery } from '@/api/system/resident/type';
/**
* 查询住户管理列表
* @param query
* @returns {*}
*/
export const listResident = (query?: ResidentQuery): AxiosPromise<ResidentVO[]> => {
return request({
url: '/resident/list',
method: 'get',
params: query
});
};
/**
* 查询住户管理详细
* @param id
*/
export const getResident = (id: string | number): AxiosPromise<ResidentVO> => {
return request({
url: '/resident/' + id,
method: 'get'
});
};
/**
* 新增住户管理
* @param data
*/
export const addResident = (data: ResidentForm) => {
return request({
url: '////resident',
method: 'post',
data: data
});
};
/**
* 修改住户管理
* @param data
*/
export const updateResident = (data: ResidentForm) => {
return request({
url: '/resident',
method: 'put',
data: data
});
};
/**
* 删除住户管理
* @param id
*/
export const delResident = (id: string | number | Array<string | number>) => {
return request({
url: '/resident/' + id,
method: 'delete'
});
};

View File

@@ -0,0 +1,210 @@
export interface ResidentVO {
/**
* 主键 住户管理id
*/
id: string | number;
/**
* 住户编号
*/
code: number;
/**
* 姓名
*/
name: string;
/**
* 0业主 1租户
*/
type: number;
/**
* 0 男性 1女性
*/
gender: number;
/**
* 身份证号
*/
idCard: string | number;
/**
* 手机号码
*/
phone: number;
/**
* 小区id
*/
villageId: string | number;
/**
* 楼栋id
*/
buildingId: string | number;
/**
* 房屋表id
*/
houseId: string | number;
/**
* 0审核中 1 已认证
*/
status: number;
/**
* 身份证正面照url
*/
cardImageFront: string;
/**
* 身份证背面照url
*/
cardImageBack: string;
/**
* 备注
*/
remark: string;
}
export interface ResidentForm extends BaseEntity {
/**
* 主键 住户管理id
*/
id?: string | number;
/**
* 住户编号
*/
code?: number;
/**
* 姓名
*/
name?: string;
/**
* 0业主 1租户
*/
type?: number;
/**
* 0 男性 1女性
*/
gender?: number;
/**
* 身份证号
*/
idCard?: string | number;
/**
* 手机号码
*/
phone?: number;
/**
* 小区id
*/
villageId?: string | number;
/**
* 楼栋id
*/
buildingId?: string | number;
/**
* 房屋表id
*/
houseId?: string | number;
/**
* 0审核中 1 已认证
*/
status?: number;
/**
* 身份证正面照url
*/
cardImageFront?: string;
/**
* 身份证背面照url
*/
cardImageBack?: string;
/**
* 备注
*/
remark?: string;
}
export interface ResidentQuery extends PageQuery {
/**
* 住户编号
*/
code?: number;
/**
* 姓名
*/
name?: string;
/**
* 0业主 1租户
*/
type?: number;
/**
* 0 男性 1女性
*/
gender?: number;
/**
* 身份证号
*/
idCard?: string | number;
/**
* 手机号码
*/
phone?: number;
/**
* 小区id
*/
villageId?: string | number;
/**
* 楼栋id
*/
buildingId?: string | number;
/**
* 房屋表id
*/
houseId?: string | number;
/**
* 0审核中 1 已认证
*/
status?: number;
/**
* 身份证正面照url
*/
cardImageFront?: string;
/**
* 身份证背面照url
*/
cardImageBack?: string;
/**
* 日期范围参数
*/
params?: any;
}

View File

@@ -0,0 +1,63 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { StoreroomVO, StoreroomForm, StoreroomQuery } from '@/api/system/storeroom/types';
/**
* 查询储藏室管理列表
* @param query
* @returns {*}
*/
export const listStoreroom = (query?: StoreroomQuery): AxiosPromise<StoreroomVO[]> => {
return request({
url: '/storeroom/list',
method: 'get',
params: query
});
};
/**
* 查询储藏室管理详细
* @param id
*/
export const getStoreroom = (id: string | number): AxiosPromise<StoreroomVO> => {
return request({
url: '/storeroom/' + id,
method: 'get'
});
};
/**
* 新增储藏室管理
* @param data
*/
export const addStoreroom = (data: StoreroomForm) => {
return request({
url: '/storeroom',
method: 'post',
data: data
});
};
/**
* 修改储藏室管理
* @param data
*/
export const updateStoreroom = (data: StoreroomForm) => {
return request({
url: '/storeroom',
method: 'put',
data: data
});
};
/**
* 删除储藏室管理
* @param id
*/
export const delStoreroom = (id: string | number | Array<string | number>) => {
return request({
url: '/storeroom/' + id,
method: 'delete'
});
};

View File

@@ -0,0 +1,150 @@
export interface StoreroomVO {
/**
* 储藏室ID
*/
id: string | number;
/**
* 所属楼栋ID
*/
buildingId: string | number;
/**
* 单元号
*/
unitNo: string | number;
/**
* 储藏室号
*/
storeroomNo: string;
/**
* 建筑面积(㎡)
*/
houseArea: number;
/**
* 公摊面积(㎡)
*/
shareArea: number;
/**
* 实用面积(㎡)
*/
internalArea: number;
/**
* 关联房屋ID
*/
houseId: string | number;
/**
* 状态0正常 1停用
*/
status: number;
/**
* 备注
*/
remark: string;
}
export interface StoreroomForm extends BaseEntity {
/**
* 储藏室ID
*/
id?: string | number;
/**
* 所属楼栋ID
*/
buildingId?: string | number;
/**
* 单元号
*/
unitNo?: string | number;
/**
* 储藏室号
*/
storeroomNo?: string;
/**
* 建筑面积(㎡)
*/
houseArea?: number;
/**
* 公摊面积(㎡)
*/
shareArea?: number;
/**
* 实用面积(㎡)
*/
internalArea?: number;
/**
* 关联房屋ID
*/
houseId?: string | number;
/**
* 状态0正常 1停用
*/
status?: number;
/**
* 备注
*/
remark?: string;
}
export interface StoreroomQuery extends PageQuery {
/**
* 所属楼栋ID
*/
buildingId?: string | number;
/**
* 单元号
*/
unitNo?: string;
/**
* 储藏室号
*/
storeroomNo?: string;
/**
* 建筑面积(㎡)
*/
houseArea?: number;
/**
* 公摊面积(㎡)
*/
shareArea?: number;
/**
* 实用面积(㎡)
*/
internalArea?: number;
/**
* 关联房屋ID
*/
houseId?: string | number;
/**
* 状态0正常 1停用
*/
status?: number;
/**
* 日期范围参数
*/
params?: any;
}

View File

@@ -7,6 +7,7 @@ import '@/assets/styles/index.scss';
// App、router、store // App、router、store
import App from './App.vue'; import App from './App.vue';
import store from './store'; import store from './store';
import router from './router'; import router from './router';
// 自定义指令 // 自定义指令

View File

@@ -1,5 +1,6 @@
import { createPinia } from 'pinia'; import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const store = createPinia(); const store = createPinia();
store.use(piniaPluginPersistedstate);
export default store; export default store;

View File

@@ -1,6 +1,6 @@
import { getCommunitylistAPI } from '@/api/system/community'; import { getCommunitylistAPI } from '@/api/system/community';
import { communitylist_rows_type } from '@/api/system/community/type'; import { communitylist_rows_type } from '@/api/system/community/type';
import { getBuildinglistAPI, getHouselistAPI } from '@/api/system/house'; import { deleteHouseApi, getBuildinglistAPI, getHouselistAPI } from '@/api/system/house';
import type { addBuildingType, BuildingUnit, BuildingVo } from '@/api/system/house/type'; import type { addBuildingType, BuildingUnit, BuildingVo } from '@/api/system/house/type';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
// 数字排序 // 数字排序
@@ -16,89 +16,20 @@ function sortNumberStr(a: string, b: string) {
// 否则按自然语言排 // 否则按自然语言排
return a.localeCompare(b, 'zh-CN', { numeric: true }); return a.localeCompare(b, 'zh-CN', { numeric: true });
} }
export const useHouseStore = defineStore('house', () => { export const useHouseStore = defineStore(
// 当前小区信息 'house',
const currentVilageInfo = ref<communitylist_rows_type>(); () => {
// 当前小区信息
const currentVilageInfo = ref<communitylist_rows_type>();
// 住宅类型
const buildingtype = ref<number>(0);
// 住宅列表
const buildingtypelist = ref([]);
const buildingtype = ref<number>(0); // 当前小区 所有楼栋信息
const currentBuildingInfoList = ref<BuildingVo[]>([]);
// 当前小区 所有楼栋信息 // 当前楼栋信息
const currentBuildingInfoList = ref<BuildingVo[]>([]); const currentBuildingInfo = ref<BuildingVo>({
// 当前楼栋信息
const currentBuildingInfo = ref<BuildingVo>({
'id': null,
'villageId': null,
'villageName': '',
'buildingName': '',
'buildingUse': null,
'buildToward': '',
'buildTall': '',
'buildStructure': '',
'unitCount': null,
'floorCount': null,
'remark': ''
});
// 当前楼栋 所有房屋信息
const currentHouseInfoList = ref<BuildingUnit>();
// 当前楼栋 所有楼层数据
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) => {
// 查找当前小区
const res = await getCommunitylistAPI();
const currentVilage = res.rows.find((item) => item.choiceStatus === 0);
currentVilageInfo.value = currentVilage;
// 获取当前小区 所有楼栋信息
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;
console.log(currentHouseInfoList.value);
floorslist.value = new Set();
// 得到所有的有房屋的 楼层 数组
currentHouseInfoList.value.units.forEach((item) => {
item.floors.forEach((floor) => {
floorslist.value.add(floor.floorNo);
});
});
};
// 选中的房屋
const checkoutHouses = ref<string[]>([]);
// 选中的房屋方法
const checkoutHousesFun = (data: string[]) => {
checkoutHouses.value = data;
};
// 切换住宅类型
const switchHouseType = (housetype: number) => {
getBuildinglistAPI(currentVilageInfo.value.villageId, housetype)
.then(() => {
buildingtype.value = housetype;
initHouse(housetype);
ElMessage.success('切换成功');
})
.catch(() => ElMessage.error('切换失败'));
};
// 切换楼栋
const switchBuilding = (buildingId: number) => {
// 切换之前 清空当前楼栋信息
currentBuildingInfo.value = {
'id': null, 'id': null,
'villageId': null, 'villageId': null,
'villageName': '', 'villageName': '',
@@ -110,67 +41,139 @@ export const useHouseStore = defineStore('house', () => {
'unitCount': null, 'unitCount': null,
'floorCount': null, 'floorCount': null,
'remark': '' 'remark': ''
}; });
getHouselistAPI(buildingId).then((res) => {
currentHouseInfoList.value = res.data;
// 获取当前楼栋信息并 赋值
currentBuildingInfo.value = currentBuildingInfoList.value.find((item) => item.id === buildingId);
// 清空 楼层信息 // 当前楼栋 所有房屋信息
const currentHouseInfoList = ref<BuildingUnit>(null);
// 当前楼栋 所有楼层数据
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) => {
// 查找当前小区
const res = await getCommunitylistAPI();
const currentVilage = res.rows.find((item) => item.choiceStatus === 0);
currentVilageInfo.value = currentVilage;
// 获取当前小区 所有楼栋信息
const res2 = await getBuildinglistAPI(currentVilage.villageId, buildingtype);
currentBuildingInfoList.value = res2.data;
// 获取当前小区 第一个楼栋信息
if (currentBuildingInfo.value.id === null) {
currentBuildingInfo.value = res2.data[0];
} else {
// 更新当前楼栋的 信息
currentBuildingInfo.value = res2.data.find((item) => item.id === currentBuildingInfo.value.id);
}
// 获取当前 第一个楼栋的所有信息
const res3 = await getHouselistAPI(currentBuildingInfo.value.id);
currentHouseInfoList.value = res3.data;
floorslist.value = new Set(); floorslist.value = new Set();
// 重新获取楼层信息 // 得到所有的有房屋的 楼层 数组
currentHouseInfoList.value.units.forEach((item) => { currentHouseInfoList.value.units.forEach((item) => {
item.floors.forEach((floor) => { item.floors.forEach((floor) => {
floorslist.value.add(floor.floorNo); floorslist.value.add(floor.floorNo);
}); });
}); });
ElMessage.success('切换成功'); };
return;
});
};
// 更新数据 // 选中的房屋
const updateHouse = () => { const checkoutHouses = ref<string[]>([]);
initHouse(buildingtype.value); // 选中的房屋方法
}; const checkoutHousesFun = (data: string[]) => {
// 删除指定楼栋 checkoutHouses.value = data;
const deleteBuildingFun = (buildingId: number) => { };
console.log('删除楼栋');
// 手动 从 楼栋列表中删除 指定楼栋 // 切换住宅类型
currentBuildingInfoList.value = currentBuildingInfoList.value.filter((item) => item.id !== buildingId); const switchHouseType = (housetype: number) => {
// 判断指定楼栋是 当前楼栋 getBuildinglistAPI(currentVilageInfo.value.villageId, housetype)
if (currentBuildingInfo.value.id === buildingId) { .then(() => {
// 获取楼栋列表中的第一个楼栋,并切换到第一个楼栋 buildingtype.value = housetype;
if (currentBuildingInfoList.value[0]) { initHouse(housetype);
currentBuildingInfo.value = currentBuildingInfoList.value[0]; ElMessage.success('切换成功');
switchBuilding(currentBuildingInfo.value.id); })
.catch(() => ElMessage.error('切换失败'));
};
// 切换楼栋
const switchBuilding = (buildingId: string) => {
// 切换之前 清空当前楼栋信息
currentBuildingInfo.value = {
'id': null,
'villageId': null,
'villageName': '',
'buildingName': '',
'buildingUse': null,
'buildToward': '',
'buildTall': '',
'buildStructure': '',
'unitCount': null,
'floorCount': null,
'remark': ''
};
currentHouseInfoList.value = null;
getHouselistAPI(buildingId).then((res) => {
currentHouseInfoList.value = res.data;
console.log(currentHouseInfoList.value);
// 获取当前楼栋信息并 赋值
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);
});
});
return;
});
};
// 更新数据
const updateHouse = () => {
initHouse(buildingtype.value);
};
// 删除指定楼栋
const deleteBuildingFun = (buildingId: string) => {
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') {
console.log('单条删除');
} else if (Array.isArray(houseId)) {
console.log('批量删除');
}
};
return { return {
currentVilageInfo, currentVilageInfo,
currentBuildingInfoList, currentBuildingInfoList,
currentBuildingInfo, currentBuildingInfo,
currentHouseInfoList, currentHouseInfoList,
currentFloorInfoList, currentFloorInfoList,
checkoutHouses, checkoutHouses,
buildingtype, buildingtype,
checkoutHousesFun, buildingtypelist,
initHouse, checkoutHousesFun,
switchHouseType, initHouse,
switchBuilding, switchHouseType,
deleteHouseFun, switchBuilding,
updateHouse, updateHouse,
deleteBuildingFun deleteBuildingFun
}; };
}); },
{
persist: {
storage: sessionStorage
}
}
);

View File

@@ -84,7 +84,7 @@ if (buildingId) {
function getBuildingById() { function getBuildingById() {
console.log(houseStore.currentBuildingInfoList); console.log(houseStore.currentBuildingInfoList);
houseStore.currentBuildingInfoList.forEach((item) => { houseStore.currentBuildingInfoList.forEach((item) => {
if (item.id === parseInt(buildingId)) { if (item.id == buildingId) {
form.value.buildingName = item.buildingName; form.value.buildingName = item.buildingName;
form.value.buildToward = item.buildToward; form.value.buildToward = item.buildToward;
form.value.buildingUse = item.buildingUse; form.value.buildingUse = item.buildingUse;
@@ -104,7 +104,7 @@ const submitForm = () => {
editBuildingApi({ editBuildingApi({
...form.value, ...form.value,
villageId: currentVilageInfo.value.villageId, villageId: currentVilageInfo.value.villageId,
id: parseInt(buildingId) id: buildingId
}) })
.then((res) => { .then((res) => {
ElMessage.success('修改成功'); ElMessage.success('修改成功');

View File

@@ -1,43 +1,43 @@
<template> <template>
<div class="AddBuildingBox"> <div class="AddBuildingBox">
<PageHeader title="新建楼栋"></PageHeader> <PageHeader :title="houseid ? '添加房屋' : '编辑房屋'"></PageHeader>
<div class="AddBuildingBody"> <div class="AddBuildingBody">
<div class="title">基本信息</div> <div class="title">基本信息</div>
<div class="addBuildingFormBody"> <div class="addBuildingFormBody">
<el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="100px"> <el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="楼栋" prop="buildingID"> <el-form-item label="楼栋" prop="buildingId">
<el-select v-model="form.buildingID" class="m-2" placeholder="请选择"> <el-select @change="handlechangeBuild" 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-option v-for="item in houseStore.currentBuildingInfoList" :key="item.id" :label="item.buildingName" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="单元" prop="unit"> <el-form-item label="单元" prop="unit">
<el-select v-model="form.unit" class="m-2" placeholder="请选择"> <el-select v-model.number="form.unitNo" class="m-2" placeholder="请选择">
<el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" /> <el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="楼层" prop="floor"> <el-form-item label="楼层" prop="floor">
<el-select v-model="form.floor" class="m-2" placeholder="请选择"> <el-select v-model.number="form.floorNo" class="m-2" placeholder="请选择">
<el-option v-for="item in floors" :key="item.no" :label="item.name" :value="item.no" /> <el-option v-for="item in floors" :key="item.no" :label="item.name" :value="item.no" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="房间号" prop="buildingName"> <el-form-item label="房间号" prop="houseNo">
<el-input v-model="form.buildingName" placeholder="请输入房间号" /> <el-input v-model="form.houseNo" placeholder="请输入房间号" />
</el-form-item> </el-form-item>
<el-form-item label="建筑面积" prop="buildingArea"> <el-form-item label="建筑面积" prop="houseArea">
<div class="unitBox flex align-center"> <div class="unitBox flex align-center">
<el-input v-model="form.buildingArea" placeholder="请输入建筑面积" /> <el-input v-model="form.houseArea" placeholder="请输入建筑面积" />
<span></span> <span></span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="套内面积" prop="internalFloorArea"> <el-form-item label="套内面积" prop="internalArea">
<div class="unitBox flex align-center"> <div class="unitBox flex align-center">
<el-input v-model="form.internalFloorArea" placeholder="请输入套内面积" /> <el-input v-model="form.internalArea" placeholder="请输入套内面积" />
<span></span> <span></span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="公摊面积" prop="CommonArea"> <el-form-item label="公摊面积" prop="shareArea">
<div class="unitBox flex align-center"> <div class="unitBox flex align-center">
<el-input v-model="form.CommonArea" placeholder="请输入公摊面积" /> <el-input v-model="form.shareArea" placeholder="请输入公摊面积" />
<span></span> <span></span>
</div> </div>
</el-form-item> </el-form-item>
@@ -51,7 +51,7 @@
<span></span> <span></span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="车位号" prop="buildingAddress"> <!-- <el-form-item label="车位号" prop="buildingAddress">
<el-select v-model="form.ParkingSpaceNumber" class="m-2" placeholder="请选择车位号"> <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-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
@@ -60,7 +60,7 @@
<el-select v-model="form.storeroom" class="m-2" placeholder="请选择储藏室"> <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-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item> -->
<el-form-item style="margin-top: 30px"> <el-form-item style="margin-top: 30px">
<el-button type="primary" @click="submitForm">确定</el-button> <el-button type="primary" @click="submitForm">确定</el-button>
<el-button @click="cancelForm">取消</el-button> <el-button @click="cancelForm">取消</el-button>
@@ -74,67 +74,110 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue'; import PageHeader from '@/components/Pageheader/index.vue';
import { useHouseStore } from '@/store/modules/house';
import { addHouseAPI, EditHouseApi, getHouseApi, getHouselistAPI } from '@/api/system/house';
import { addHouseType } from '@/api/system/house/type';
const router = useRouter();
const route = useRoute();
const houseStore = useHouseStore();
const formRef = ref(); const formRef = ref();
const form = ref({ const form = ref<addHouseType>({
buildingID: '', buildingId: '',
unit: '', unitNo: '',
floor: '', floorNo: '',
buildingName: '', // 房间号 houseNo: '', // 房间号
buildingArea: '', //建筑面积 houseArea: '', //建筑面积
internalFloorArea: '', //套内面积 internalArea: '', //套内面积
CommonArea: '', // 公摊面积 shareArea: '', // 公摊面积
Housetype: '', // 房屋户型 houseType: '' // 房屋户型
ParkingSpaceNumber: '', // 车位号
storeroom: '' // 储藏室
}); });
const housetype = ref([]);
const rules = ref({ const rules = ref({
buildingID: [{ required: true, message: '请输入楼栋', trigger: 'blur' }], buildingId: [{ required: true, message: '请输入楼栋', trigger: 'blur' }],
unit: [{ required: true, message: '请选择单元', trigger: 'blur' }], unitNo: [{ required: true, message: '请选择单元', trigger: 'blur' }],
floor: [{ required: true, message: '请选择楼层', trigger: 'blur' }], floorNo: [{ required: true, message: '请选择楼层', trigger: 'blur' }],
buildingName: [{ required: true, message: '请输入房间号', trigger: 'blur' }], buildingName: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
buildingArea: [{ required: true, message: '请输入建筑面积', trigger: 'blur' }], buildingArea: [{ required: true, message: '请输入建筑面积', trigger: 'blur' }],
internalFloorArea: [{ required: true, message: '请输入套内面积', trigger: 'blur' }], internalFloorArea: [{ required: true, message: '请输入套内面积', trigger: 'blur' }],
CommonArea: [{ required: true, message: '请输入公摊面积', trigger: 'blur' }] CommonArea: [{ required: true, message: '请输入公摊面积', trigger: 'blur' }]
}); });
const housetype = ref([]);
const units = ref([]);
const floors = ref([]);
// 楼栋 const houseid = ref(null);
const building = ref([ if (route.query.id) {
{ houseid.value = route.query.id;
id: '1', getHouseApi(houseid.value).then((res) => {
name: '1号楼' form.value = {
} ...form.value,
]); buildingId: res.data.buildingId, // 楼栋id
const units = ref([ houseId: res.data.houseId, // 房屋id
{ unitNo: res.data.unitNo,
no: '1', floorNo: res.data.floorNo,
name: '1单元' houseNo: res.data.houseNo, // 房间号
}, houseArea: res.data.houseArea, //建筑面积
{ internalArea: res.data.internalArea, //套内面积
no: '2', shareArea: res.data.shareArea // 公摊面积
name: '2单元' };
} housetype.value = res.data.houseType.split('');
]); handlechangeBuild(form.value.buildingId);
const floors = ref([ console.log(form.value);
{ });
no: '1', }
name: '1层'
},
{
no: '2',
name: '2层'
}
]);
// 选择楼栋
function handlechangeBuild(id: string) {
getHouselistAPI(id).then((res) => {
units.value = Array.from({ length: res.data.unitCount }).map((_, index) => {
return {
no: index + 1,
name: index + 1 + '单元'
};
});
floors.value = Array.from({ length: res.data.floorCount }).map((_, index) => {
return {
no: index + 1,
name: index + 1 + '楼'
};
});
console.log(units.value, floors.value);
});
}
const submitForm = () => { const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => { formRef.value?.validate(async (valid: boolean) => {
if (valid) { if (valid) {
console.log(form.value); const data = {
...form.value,
houseType: housetype.value.join(''),
villageId: houseStore.currentBuildingInfo.villageId
};
if (houseid.value) {
EditHouseApi(data).then(() => {
ElMessage.success('修改成功');
houseStore.switchBuilding(houseStore.currentBuildingInfo.id);
router.push({
path: '/house/houselist'
});
});
} else {
addHouseAPI(data).then((res) => {
console.log(res);
ElMessage.success('添加成功');
houseStore.switchBuilding(houseStore.currentBuildingInfo.id);
router.push({
path: '/house/houselist'
});
});
}
} }
}); });
}; };
const cancelForm = () => { const cancelForm = () => {
console.log('取消'); formRef?.value.resetFields();
router.push({
path: '/house/houselist'
});
}; };
</script> </script>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="house-list"> <div class="house-list">
<div class="house flex align-center" @contextmenu="contextMenu.open($event, house.houseId)" v-for="house in list.houses" :key="house.houseId"> <div class="house flex align-center" @contextmenu="contextMenu.open($event, house.houseId)" v-for="house in list.houses" :key="house.houseId">
<el-checkbox @click="handleClick(house)" :label="house.houseNo" :value="house.houseId" /> <el-checkbox :label="house.houseNo" :value="house.houseId" />
</div> </div>
<!-- 右键菜单组件 --> <!-- 右键菜单组件 -->
<ContextMenu ref="contextMenu" :menu="menuList" @select="handleSelect" /> <ContextMenu ref="contextMenu" :menu="menuList" @select="handleSelect" />
@@ -20,23 +20,15 @@ const props = defineProps<{
value: string; value: string;
}[]; }[];
}>(); }>();
const list = props.unit.find((item) => item.floorNo === props.fIdx); const list = props.unit.find((item) => item.floorNo === props.fIdx) ?? { floorNo: '', houses: [] };
const checked = ref<string[]>([]);
// 菜单ref // 菜单ref
const contextMenu = ref(); const contextMenu = ref();
// 点击事件 // 点击事件
const handleSelect = (data: { type: string; value: string }) => { const handleSelect = (data: { type: string; value: string }) => {
emit('contextmenufun', data); emit('contextmenufun', data);
}; };
function handleClick(house: HouseType) {
checked.value = checked.value.includes(house.houseId)
? checked.value.filter((item) => item !== house.houseId)
: checked.value.concat(house.houseId);
emit('change', checked.value);
}
const emit = defineEmits<{ const emit = defineEmits<{
change: [value: string[]];
contextmenufun: [value: { type: string; value: string }]; contextmenufun: [value: { type: string; value: string }];
}>(); }>();
</script> </script>

View File

@@ -1,43 +1,56 @@
<template> <template>
<div class="TableBox p-5 h-full"> <div class="TableBox p-5 h-full" v-if="houseStore.currentHouseInfoList !== null">
<el-table border :data="houseStore.currentFloorInfoList"> <el-checkbox-group @change="handleChangeCheckhouses" v-model="houseStore.checkoutHouses">
<el-table-column align="center" fixed label="楼层\单元" min-width="85"> <el-table border :data="houseStore.currentFloorInfoList">
<template #default="{ row }"> <el-table-column align="center" fixed label="楼层\单元" min-width="85">
<span>{{ row }}</span> <template #default="{ row }">
</template> <span>{{ row }}</span>
</el-table-column> </template>
<el-table-column </el-table-column>
min-width="160" <el-table-column
class="column" min-width="160"
align="center" class="column"
:label="`${unit.unitNo}单元`" align="center"
v-for="(unit, index) in houseStore.currentHouseInfoList?.units ?? []" :label="`${unit.unitNo}单元`"
:key="index" v-for="(unit, index) in houseStore.currentHouseInfoList?.units ?? []"
> :key="index"
<template #default="{ row }"> >
<houseItem @contextmenufun="contextMenuFun" @change="handleChange" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem> <template #default="{ row }">
</template> <houseItem @contextmenufun="contextMenuFun" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
</el-table-column> </template>
</el-table> </el-table-column>
</el-table>
</el-checkbox-group>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { deleteHouseApi } from '@/api/system/house';
import houseItem from './houseItem.vue'; import houseItem from './houseItem.vue';
import { useHouseStore } from '@/store/modules/house'; import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore(); const houseStore = useHouseStore();
const { currentHouseInfoList, currentFloorInfoList } = storeToRefs(houseStore); // 数据
console.log(currentHouseInfoList); const router = useRouter();
const menutlist = [ const menutlist = [
{ label: '编辑', value: 'edit' }, { label: '编辑', value: 'edit' },
{ label: '收费标准', value: 'money' }, { label: '收费标准', value: 'money' },
{ label: '详情', value: 'main' }, { label: '详情', value: 'main' },
{ label: '删除', value: 'delete' } { label: '删除', value: 'delete' }
]; ];
function handleChangeCheckhouses(val: string[]) {
houseStore.checkoutHousesFun([]);
houseStore.checkoutHousesFun(val);
}
function contextMenuFun(val: { type: string; value: string }) { function contextMenuFun(val: { type: string; value: string }) {
switch (val.type) { switch (val.type) {
case 'edit': case 'edit':
console.log('你选择了:', val); console.log('你选择了:', val);
router.push({
path: '/house/addHouse',
query: {
id: val.value
}
});
break; break;
case 'money': case 'money':
console.log('你选择了:', val); console.log('你选择了:', val);
@@ -47,13 +60,13 @@ function contextMenuFun(val: { type: string; value: string }) {
break; break;
case 'delete': case 'delete':
console.log('你选择了:', val); console.log('你选择了:', val);
houseStore.deleteHouseFun(val.value); deleteHouseApi(val.value).then(() => {
ElMessage.success('删除成功');
houseStore.switchBuilding(houseStore.currentBuildingInfo.id);
});
break; break;
} }
} }
function handleChange(data: string[]) {
houseStore.checkoutHousesFun(data);
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@@ -12,7 +12,7 @@
<div class="rightActions"> <div class="rightActions">
<span class="mr-20px" @click="handleAddHouse">+增加房屋</span> <span class="mr-20px" @click="handleAddHouse">+增加房屋</span>
<span class="mr-20px">收费标准设置</span> <span class="mr-20px">收费标准设置</span>
<span>删除</span> <span @click="deleteAllhouse">删除</span>
</div> </div>
</div> </div>
<div class="UnitBody"> <div class="UnitBody">
@@ -22,6 +22,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { deleteHouseApi } from '@/api/system/house';
import TableUnit from './components/table.vue'; import TableUnit from './components/table.vue';
import { useHouseStore } from '@/store/modules/house'; import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore(); const houseStore = useHouseStore();
@@ -31,6 +32,25 @@ function handleAddHouse() {
path: '/house/addHouse' path: '/house/addHouse'
}); });
} }
function deleteAllhouse() {
const checkhouse = houseStore.checkoutHouses;
console.log(checkhouse);
if (checkhouse.length > 0) {
let deletecount = 0;
checkhouse.forEach((item) => {
deleteHouseApi(item).then(() => {
deletecount++;
if (deletecount === checkhouse.length - 1) {
ElMessage.success('批量删除成功');
houseStore.switchBuilding(houseStore.currentBuildingInfo.id);
}
});
});
} else {
ElMessage.warning('请选择要删除的房屋');
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@@ -0,0 +1,318 @@
<template>
<div class="p-2">
<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 ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="住户编号" prop="code">
<el-input v-model="queryParams.code" placeholder="请输入住户编号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="0 男性 1女性" prop="gender">
<el-input v-model="queryParams.gender" placeholder="请输入0 男性 1女性" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="queryParams.idCard" placeholder="请输入身份证号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="小区id" prop="villageId">
<el-input v-model="queryParams.villageId" placeholder="请输入小区id" clearable @keyup.enter="handleQuery" />
</el-form-item>
<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="房屋表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">
<div class="residentBody">
<div class="treebox">
<!-- 树状+ -->
</div>
<div class="flex-1">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['resident:resident:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['resident:resident:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['resident:resident:remove']"
>删除</el-button
>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" border :data="residentList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="姓名" align="center" prop="name" />
<el-table-column label="类型" align="center" prop="type">
<template #default="scope">
<el-tag v-if="scope.row.type === 0" size="small">业主</el-tag>
<el-tag v-else size="small">租户</el-tag>
</template>
</el-table-column>
<el-table-column label="证件号" align="center" prop="idCard" />
<el-table-column label="手机号码" align="center" prop="phone" />
<el-table-column label="房间" align="center" prop="houseId" />
<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="['resident:resident:edit']"></el-button>
</el-tooltip>
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['resident:resident:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['resident:resident: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"
/>
</div>
</div>
</el-card>
<!-- 添加或修改住户管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="residentFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="住户编号" prop="code">
<el-input v-model="form.code" placeholder="请输入住户编号" />
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="0 男性 1女性" prop="gender">
<el-input v-model="form.gender" placeholder="请输入0 男性 1女性" />
</el-form-item>
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="form.idCard" placeholder="请输入身份证号" />
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号码" />
</el-form-item>
<el-form-item label="小区id" prop="villageId">
<el-input v-model="form.villageId" placeholder="请输入小区id" />
</el-form-item>
<el-form-item label="楼栋id" prop="buildingId">
<el-input v-model="form.buildingId" placeholder="请输入楼栋id" />
</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="身份证正面照url" prop="cardImageFront">
<el-input v-model="form.cardImageFront" placeholder="请输入身份证正面照url" />
</el-form-item>
<el-form-item label="身份证背面照url" prop="cardImageBack">
<el-input v-model="form.cardImageBack" placeholder="请输入身份证背面照url" />
</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>
</template>
</el-dialog>
</div>
</template>
<script setup name="Resident" lang="ts">
import { listResident, getResident, delResident, addResident, updateResident } from '@/api/system/resident/index';
import { ResidentVO, ResidentQuery, ResidentForm } from '@/api/system/resident/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const residentList = ref<ResidentVO[]>([]);
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 residentFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ResidentForm = {
id: undefined,
code: undefined,
name: undefined,
type: undefined,
gender: undefined,
idCard: undefined,
phone: undefined,
villageId: undefined,
buildingId: undefined,
houseId: undefined,
status: undefined,
cardImageFront: undefined,
cardImageBack: undefined,
remark: undefined
};
const data = reactive<PageData<ResidentForm, ResidentQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
code: undefined,
name: undefined,
type: undefined,
gender: undefined,
idCard: undefined,
phone: undefined,
villageId: undefined,
buildingId: undefined,
houseId: undefined,
status: undefined,
cardImageFront: undefined,
cardImageBack: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '主键 住户管理id 不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询住户管理列表 */
const getList = async () => {
loading.value = true;
const res = await listResident(queryParams.value);
residentList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
residentFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ResidentVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加住户管理';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: ResidentVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getResident(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改住户管理';
};
/** 提交按钮 */
const submitForm = () => {
residentFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateResident(form.value).finally(() => (buttonLoading.value = false));
} else {
await addResident(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: ResidentVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除住户管理编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
await delResident(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'resident/resident/export',
{
...queryParams.value
},
`resident_${new Date().getTime()}.xlsx`
);
};
onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
.residentBody {
display: flex;
align-items: center;
.treebox {
width: 300px;
margin-right: 10px;
}
}
</style>

View File

@@ -1,39 +1,56 @@
<template> <template>
<div class="AddBuildingBox"> <div class="AddBuildingBox">
<PageHeader title="新建储藏室"></PageHeader> <PageHeader :title="storeRoomid ? '编辑储藏室' : '添加储藏室'"></PageHeader>
<div class="AddBuildingBody"> <div class="AddBuildingBody">
<div class="title">基本信息</div> <div class="title">基本信息</div>
<div class="addBuildingFormBody"> <div class="addBuildingFormBody">
<el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="100px"> <el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="楼栋" prop="buildingID"> <el-row>
<el-select v-model="form.buildingID" class="m-2" placeholder="请选择"> <el-col :span="11">
<el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" /> <el-form-item label="楼栋" prop="buildingId">
</el-select> <el-select @change="handleChangeBuild" v-model="form.buildingId" placeholder="请选择楼栋">
</el-form-item> <el-option v-for="item in Buildinglists" :key="item.id" :label="item.buildingName" :value="item.id" />
<el-form-item label="单元" prop="unit"> </el-select>
<el-select v-model="form.unit" class="m-2" placeholder="请选择"> </el-form-item>
<el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" /> </el-col>
</el-select> <el-col :span="2"></el-col>
</el-form-item> <el-col :span="11">
<el-form-item label="楼层" prop="floor"> <el-form-item label="单元" prop="unit">
<el-select v-model="form.floor" class="m-2" placeholder="请选择"> <el-select v-model="form.unitNo" placeholder="请选择单元">
<el-option v-for="item in floors" :key="item.no" :label="item.name" :value="item.no" /> <el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="储藏室号" prop="buildingName"> </el-col>
<el-input v-model="form.buildingName" placeholder="请输入储藏室号" /> </el-row>
</el-form-item> <el-row>
<el-form-item label="建筑面积" prop="buildingName"> <el-col :span="11">
<el-input v-model="form.buildingName" placeholder="请输入建筑面积" /> <el-form-item label="储藏室号" prop="storeroomNo">
</el-form-item> <el-input v-model.number="form.storeroomNo" placeholder="请输入储藏室号" />
<el-form-item label="公摊面积" prop="buildingName"> </el-form-item>
<el-input v-model="form.buildingName" placeholder="请输入公摊面积" /> </el-col>
</el-form-item> <el-col :span="2"></el-col>
<el-form-item label="实用面积" prop="buildingName"> <el-col :span="11">
<el-input v-model="form.buildingName" placeholder="请输入实用面积" /> <el-form-item label="建筑面积" prop="houseArea">
</el-form-item> <el-input v-model="form.houseArea" placeholder="请输入建筑面积" />
<el-form-item label="备注" prop="buildingName"> </el-form-item>
<el-input textarea v-model="form.buildingName" placeholder="请输入备注" /> </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>
<el-form-item style="margin-top: 30px"> <el-form-item style="margin-top: 30px">
<el-button type="primary" @click="submitForm">提交</el-button> <el-button type="primary" @click="submitForm">提交</el-button>
@@ -48,67 +65,93 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.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 formRef = ref();
const form = ref({ const form = ref<StoreroomVO>({
buildingID: '', id: null,
unit: '', buildingId: '',
floor: '', unitNo: '',
buildingName: '', // 房间号 storeroomNo: '',
buildingArea: '', //建筑面积 houseArea: null,
internalFloorArea: '', //套内面积 shareArea: null,
CommonArea: '', // 公摊面积 internalArea: null,
Housetype: '', // 房屋户型 houseId: '',
ParkingSpaceNumber: '', // 车位号 status: 0,
storeroom: '' // 储藏室 remark: ''
}); });
const housetype = ref([]);
const rules = ref({ const rules = ref({
buildingID: [{ required: true, message: '请输入楼栋', trigger: 'blur' }], buildingId: [{ required: true, message: '请选择楼栋', trigger: 'blur' }],
unit: [{ required: true, message: '请选择单元', trigger: 'blur' }], unitNo: [{ required: true, message: '请选择单元', trigger: 'blur' }],
floor: [{ required: true, message: '请选择楼层', trigger: 'blur' }], storeroomNo: [{ 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 storeRoomid = ref(null);
const building = ref([ const units = ref([]);
{ const Buildinglists = ref([]);
id: '1', const currentVilage = ref(null);
name: '1号楼'
}
]);
const units = ref([
{
no: '1',
name: '1单元'
},
{
no: '2',
name: '2单元'
}
]);
const floors = ref([
{
no: '1',
name: '1层'
},
{
no: '2',
name: '2层'
}
]);
// 获取储藏室信息
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 = () => { const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => { formRef.value?.validate(async (valid: boolean) => {
if (valid) { 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 = () => { const cancelForm = () => {
console.log('取消'); console.log('取消');
router.push({
path: '/house/storeroom'
});
}; };
</script> </script>
@@ -137,7 +180,7 @@ const cancelForm = () => {
.addBuildingFormBody { .addBuildingFormBody {
.formBody { .formBody {
width: 550px; width: 1050px;
margin: 0 auto; margin: 0 auto;
.el-form-item__content, .el-form-item__content,

View File

@@ -1,141 +1,290 @@
<template> <template>
<div class="StoreRoomBox"> <div class="p-2 flex storeRoomBox">
<PageHeader title="储藏室管理"> </PageHeader> <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div class="nav flex flex-items-center pb-3"> <div v-show="showSearch" class="mb-[10px]">
<div class="title-text">储藏编号</div> <el-card shadow="hover">
<el-input placeholder="请输入" v-model="searchValue" /> <el-form label-width="100" ref="queryFormRef" :model="queryParams" :inline="true">
<el-button class="mr-10px" type="primary">查询</el-button> <el-form-item label="所属楼栋ID" prop="buildingId">
<el-button>重置</el-button> <el-input v-model="queryParams.buildingId" placeholder="请输入所属楼栋ID" clearable @keyup.enter="handleQuery" />
</div> </el-form-item>
<div class="StoreRoomBody"> <el-form-item label="单元号" prop="unitNo">
<div class="nav flex flex-items-center justify-between"> <el-input v-model="queryParams.unitNo" placeholder="请输入单元号" clearable @keyup.enter="handleQuery" />
<div class="title-text">储藏室列表</div> </el-form-item>
<div> <el-form-item label="储藏室号" prop="storeroomNo">
<el-button type="primary">+添加</el-button> <el-input v-model="queryParams.storeroomNo" placeholder="请输入储藏室号" clearable @keyup.enter="handleQuery" />
<el-button>批量操作</el-button> </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> </template>
<div class="StoreRoomTablebox"> </el-dialog>
<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>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup name="Storeroom" lang="ts">
import { ref } from 'vue'; import { listStoreroom, getStoreroom, delStoreroom, addStoreroom, updateStoreroom } from '@/api/system/storeroom/index';
const searchValue = ref(''); import { StoreroomVO, StoreroomQuery, StoreroomForm } from '@/api/system/storeroom/types';
import PageHeader from '@/components/Pageheader/index.vue';
const paginationOptions = ref({ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
total: 100, const router = useRouter();
page: 1, const storeroomList = ref<StoreroomVO[]>([]);
limit: 10 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([ const initFormData: StoreroomForm = {
{ id: undefined,
units: 3, buildingId: undefined,
name: 'A1', unitNo: undefined,
storeroom: 'b123', storeroomNo: undefined,
area: '1000', houseArea: undefined,
commontArea: '222', shareArea: undefined,
useArea: '333', internalArea: undefined,
floor: '1' 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; const { queryParams, form, rules } = toRefs(data);
}
function hanlePageChange(val: number) { /** 查询储藏室管理列表 */
paginationOptions.value.page = val; 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> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.StoreRoomBox { .storeRoomBox {
padding: 20px;
display: flex;
height: 100%;
flex-direction: column; flex-direction: column;
height: 100%;
.el-button { & > .el-card {
width: 80px; flex: 1;
height: 35px; display: flex;
border-radius: 5px; flex-direction: column;
} .tablebody {
& > .nav { flex: 1;
background-color: white; display: flex;
padding: 20px 30px; flex-direction: column;
border-top: 1px solid #ccc; height: calc(100% - 80px);
& > .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);
} }
} }
} }