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-09 12:40:17 +08:00
parent 6e998d4e87
commit 267a9a5f29
19 changed files with 1569 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.7z
View File

Binary file not shown.

1
package.json
View File

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

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

@@ -1,10 +1,11 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { addBuildingType, BuildingUnit, BuildingVo } from './type';
import { addBuildingType, addHouseType, BuildingUnit, BuildingVo } from './type';
import { number } from 'vue-types';
// 楼栋---------------------------------------------------------------------------------------
// 根据 小区id 和 类型 查询楼栋信息
/** 根据 小区id 和 类型 查询楼栋信息 */
export function getBuildinglistAPI(villageId: number, buildingUse: number): AxiosPromise<BuildingVo[]> {
return request({
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) {
@@ -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({
url: '/building',
method: 'PUT',
@@ -41,24 +56,42 @@ export function deleteBuildingApi(id: number) {
}
// 房屋----------------------------------------------------------------------------------------------
// 根据 楼栋id 查询房屋信息
export function getHouselistAPI(buildingId: number): AxiosPromise<BuildingUnit> {
/** 根据 楼栋id 查询房屋信息 */
export function getHouselistAPI(buildingId: string): AxiosPromise<BuildingUnit> {
return request({
url: `/house/groupByUnitTree/${buildingId}`,
method: 'get'
});
}
// 添加房屋
export function addHouseAPI() {
/** 添加房屋 */
export function addHouseAPI(data: addHouseType) {
return request({
url: `/house`,
method: 'POST'
method: 'POST',
data
});
}
// 删除房屋
export function deleteHouseApi() {
export function deleteHouseApi(houseIds: string) {
return request({
url: `/house/{houseIds}`,
url: `/house/${houseIds}`,
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
});
}

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

@@ -26,7 +26,7 @@ export interface BuildingVo {
/**
* 楼栋ID
*/
id: number;
id: string;
/**
* 备注
*/
@@ -46,6 +46,8 @@ export interface BuildingVo {
export interface BuildingUnit {
buildingId: number;
buildingName: string;
floorCount: number;
unitCount: number;
units: BuildingUnitlist[];
}
// 单元
@@ -73,3 +75,16 @@ export interface addBuildingType {
floorCount?: 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;
}

63
src/api/system/resident/index.ts Normal file
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'
});
};

210
src/api/system/resident/type.ts Normal file
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;
}

63
src/api/system/storeroom/index.ts Normal file
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'
});
};

150
src/api/system/storeroom/types.ts Normal file
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;
}

1
src/main.ts
View File

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

3
src/store/index.ts
View File

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

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

@@ -1,6 +1,6 @@
import { getCommunitylistAPI } from '@/api/system/community';
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 { defineStore } from 'pinia';
// 数字排序
@@ -16,89 +16,20 @@ function sortNumberStr(a: string, b: string) {
// 否则按自然语言排
return a.localeCompare(b, 'zh-CN', { numeric: true });
}
export const useHouseStore = defineStore('house', () => {
// 当前小区信息
const currentVilageInfo = ref<communitylist_rows_type>();
export const useHouseStore = defineStore(
'house',
() => {
// 当前小区信息
const currentVilageInfo = ref<communitylist_rows_type>();
// 住宅类型
const buildingtype = ref<number>(0);
// 住宅列表
const buildingtypelist = ref([]);
const buildingtype = ref<number>(0);
// 当前小区 所有楼栋信息
const currentBuildingInfoList = 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 = {
// 当前小区 所有楼栋信息
const currentBuildingInfoList = ref<BuildingVo[]>([]);
// 当前楼栋信息
const currentBuildingInfo = ref<BuildingVo>({
'id': null,
'villageId': null,
'villageName': '',
@@ -110,67 +41,139 @@ export const useHouseStore = defineStore('house', () => {
'unitCount': null,
'floorCount': null,
'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();
// 重新获取楼层信息
// 得到所有的有房屋的 楼层 数组
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 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: 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 {
currentVilageInfo,
currentBuildingInfoList,
currentBuildingInfo,
currentHouseInfoList,
currentFloorInfoList,
checkoutHouses,
buildingtype,
checkoutHousesFun,
initHouse,
switchHouseType,
switchBuilding,
deleteHouseFun,
updateHouse,
deleteBuildingFun
};
});
return {
currentVilageInfo,
currentBuildingInfoList,
currentBuildingInfo,
currentHouseInfoList,
currentFloorInfoList,
checkoutHouses,
buildingtype,
buildingtypelist,
checkoutHousesFun,
initHouse,
switchHouseType,
switchBuilding,
updateHouse,
deleteBuildingFun
};
},
{
persist: {
storage: sessionStorage
}
}
);

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

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

163
src/views/system/house/AddHouse.vue
View File

@@ -1,43 +1,43 @@
<template>
<div class="AddBuildingBox">
<PageHeader title="新建楼栋"></PageHeader>
<PageHeader :title="houseid ? '添加房屋' : '编辑房屋'"></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-form-item label="楼栋" prop="buildingId">
<el-select @change="handlechangeBuild" v-model="form.buildingId" class="m-2" 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-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-select>
</el-form-item>
<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-select>
</el-form-item>
<el-form-item label="房间号" prop="buildingName">
<el-input v-model="form.buildingName" placeholder="请输入房间号" />
<el-form-item label="房间号" prop="houseNo">
<el-input v-model="form.houseNo" placeholder="请输入房间号" />
</el-form-item>
<el-form-item label="建筑面积" prop="buildingArea">
<el-form-item label="建筑面积" prop="houseArea">
<div class="unitBox flex align-center">
<el-input v-model="form.buildingArea" placeholder="请输入建筑面积" />
<el-input v-model="form.houseArea" placeholder="请输入建筑面积" />
<span>㎡</span>
</div>
</el-form-item>
<el-form-item label="套内面积" prop="internalFloorArea">
<el-form-item label="套内面积" prop="internalArea">
<div class="unitBox flex align-center">
<el-input v-model="form.internalFloorArea" placeholder="请输入套内面积" />
<el-input v-model="form.internalArea" placeholder="请输入套内面积" />
<span>㎡</span>
</div>
</el-form-item>
<el-form-item label="公摊面积" prop="CommonArea">
<el-form-item label="公摊面积" prop="shareArea">
<div class="unitBox flex align-center">
<el-input v-model="form.CommonArea" placeholder="请输入公摊面积" />
<el-input v-model="form.shareArea" placeholder="请输入公摊面积" />
<span>㎡</span>
</div>
</el-form-item>
@@ -51,7 +51,7 @@
<span>卫</span>
</div>
</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-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
@@ -60,7 +60,7 @@
<el-select v-model="form.storeroom" class="m-2" placeholder="请选择储藏室">
<el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item style="margin-top: 30px">
<el-button type="primary" @click="submitForm">确定</el-button>
<el-button @click="cancelForm">取消</el-button>
@@ -74,67 +74,110 @@
<script setup lang="ts">
import { ref } from '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 form = ref({
buildingID: '',
unit: '',
floor: '',
buildingName: '', // 房间号
buildingArea: '', //建筑面积
internalFloorArea: '', //套内面积
CommonArea: '', // 公摊面积
Housetype: '', // 房屋户型
ParkingSpaceNumber: '', // 车位号
storeroom: '' // 储藏室
const form = ref<addHouseType>({
buildingId: '',
unitNo: '',
floorNo: '',
houseNo: '', // 房间号
houseArea: '', //建筑面积
internalArea: '', //套内面积
shareArea: '', // 公摊面积
houseType: '' // 房屋户型
});
const housetype = ref([]);
const rules = ref({
buildingID: [{ required: true, message: '请输入楼栋', trigger: 'blur' }],
unit: [{ required: true, message: '请选择单元', trigger: 'blur' }],
floor: [{ required: true, message: '请选择楼层', trigger: 'blur' }],
buildingId: [{ required: true, message: '请输入楼栋', trigger: 'blur' }],
unitNo: [{ required: true, message: '请选择单元', trigger: 'blur' }],
floorNo: [{ 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 housetype = ref([]);
const units = ref([]);
const floors = ref([]);
// 楼栋
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 houseid = ref(null);
if (route.query.id) {
houseid.value = route.query.id;
getHouseApi(houseid.value).then((res) => {
form.value = {
...form.value,
buildingId: res.data.buildingId, // 楼栋id
houseId: res.data.houseId, // 房屋id
unitNo: res.data.unitNo,
floorNo: res.data.floorNo,
houseNo: res.data.houseNo, // 房间号
houseArea: res.data.houseArea, //建筑面积
internalArea: res.data.internalArea, //套内面积
shareArea: res.data.shareArea // 公摊面积
};
housetype.value = res.data.houseType.split('');
handlechangeBuild(form.value.buildingId);
console.log(form.value);
});
}
// 选择楼栋
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 = () => {
formRef.value?.validate(async (valid: boolean) => {
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 = () => {
console.log('取消');
formRef?.value.resetFields();
router.push({
path: '/house/houselist'
});
};
</script>

12
src/views/system/house/components/components/houseItem.vue
View File

@@ -1,7 +1,7 @@
<template>
<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">
<el-checkbox @click="handleClick(house)" :label="house.houseNo" :value="house.houseId" />
<el-checkbox :label="house.houseNo" :value="house.houseId" />
</div>
<!-- 右键菜单组件 -->
<ContextMenu ref="contextMenu" :menu="menuList" @select="handleSelect" />
@@ -20,23 +20,15 @@ const props = defineProps<{
value: string;
}[];
}>();
const list = props.unit.find((item) => item.floorNo === props.fIdx);
const checked = ref<string[]>([]);
const list = props.unit.find((item) => item.floorNo === props.fIdx) ?? { floorNo: '', houses: [] };
// 菜单ref
const contextMenu = ref();
// 点击事件
const handleSelect = (data: { type: string; value: string }) => {
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<{
change: [value: string[]];
contextmenufun: [value: { type: string; value: string }];
}>();
</script>

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

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

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

@@ -12,7 +12,7 @@
<div class="rightActions">
<span class="mr-20px" @click="handleAddHouse">+增加房屋</span>
<span class="mr-20px">收费标准设置</span>
<span>删除</span>
<span @click="deleteAllhouse">删除</span>
</div>
</div>
<div class="UnitBody">
@@ -22,6 +22,7 @@
</template>
<script setup lang="ts">
import { deleteHouseApi } from '@/api/system/house';
import TableUnit from './components/table.vue';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
@@ -31,6 +32,25 @@ function handleAddHouse() {
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>
<style scoped lang="scss">

318
src/views/system/resident/index.vue Normal file
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>

199
src/views/system/storeroom/addStoreRoom.vue
View File

@@ -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,

401
src/views/system/storeroom/index.vue
View File

@@ -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);
}
}
}