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

同步6/16

Browse Source
This commit is contained in:
Zy
2026-06-01 18:12:58 +08:00
parent 38274ab612
commit 50e7b14fd6
183 changed files with 8956 additions and 4803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,53 +20,53 @@
<el-option v-for="item in units" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="楼层" prop="floor">
<el-form-item label="楼层" prop="floorNo">
<el-select v-model.number="form.floorNo" 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="houseNo">
<el-input v-model="form.houseNo" placeholder="请输入房间号" />
<el-input v-model.trim="form.houseNo" placeholder="请输入房间号" />
</el-form-item>
<el-form-item label="建筑面积" prop="houseArea">
<div class="unitBox flex align-center">
<el-input v-model="form.houseArea" placeholder="请输入建筑面积" />
<el-input v-model.trim="form.houseArea" placeholder="请输入建筑面积" />
<span>㎡</span>
</div>
</el-form-item>
<el-form-item label="套内面积" prop="internalArea">
<div class="unitBox flex align-center">
<el-input v-model="form.internalArea" placeholder="请输入套内面积" />
<el-input v-model.trim="form.internalArea" placeholder="请输入套内面积" />
<span>㎡</span>
</div>
</el-form-item>
<el-form-item label="公摊面积" prop="shareArea">
<div class="unitBox flex align-center">
<el-input v-model="form.shareArea" placeholder="请输入公摊面积" />
<el-input v-model.trim="form.shareArea" placeholder="请输入公摊面积" />
<span>㎡</span>
</div>
</el-form-item>
<el-form-item label="房屋户型">
<div class="houseTypebox">
<el-input v-model="housetype[0]" placeholder="房间" />
<el-input v-model.trim="housetype[0]" placeholder="房间" />
<span>室</span>
<el-input v-model="housetype[1]" placeholder="客厅" />
<el-input v-model.trim="housetype[1]" placeholder="客厅" />
<span>厅</span>
<el-input v-model="housetype[2]" placeholder="卫生间" />
<el-input v-model.trim="housetype[2]" placeholder="卫生间" />
<span>卫</span>
</div>
</el-form-item>
<!-- <el-form-item label="车位号" prop="parkingId">
<el-select v-model="form.parkingId" class="m-2" placeholder="请选择车位号">
<el-option v-for="item in parkinglist" :key="item.id" :label="item.parkingName" :value="item.id" />
<el-form-item label="车位号" prop="parkingIds">
<el-select @change="(val) => console.log(val)" multiple v-model="form.parkingIds" class="m-2" placeholder="请选择车位号">
<el-option v-for="(item, index) in parkinglist" :key="index" :label="item.parkingName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="储藏室" prop="storeroomId">
<el-select v-model="form.storeroomId" class="m-2" placeholder="请选择储藏室">
<el-option v-for="item in storeRoomlist" :key="item.id" :label="item.storeroomName" :value="item.id" />
<el-option v-for="(item, index) in storeRoomlist" :key="index" :label="item.storeroomName" :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>
@@ -81,16 +81,13 @@
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { useHouseStore } from '@/store/modules/house';
import { addHouseAPI, EditHouseApi, getBuildingOnly, getHouseApi, getHouselistAPI } from '@/api/system/house';
import { addHouseAPI, EditHouseApi, getHouseApi } from '@/api/system/house';
import { addHouseType } from '@/api/system/house/type';
import { GetVillageListParking, listParking } from '@/api/system/parking';
import { GetVillagelistStoreroom, listStoreroom } from '@/api/system/storeroom';
import { listHouseUseType } from '@/api/system/houseUse';
import { GetVillageListParking } from '@/api/system/parking';
import { GetVillagelistStoreroom } from '@/api/system/storeroom';
import { listHouseUseType_add_house } from '@/api/system/houseUse';
import { getByBUildingidtoUnitNo } from '@/api/system/houseUnit';
// const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// const { com_build_use } = toRefs<any>(proxy?.useDict('com_build_use'));
const router = useRouter();
const route = useRoute();
const houseStore = useHouseStore();
@@ -106,14 +103,16 @@ const form = ref<addHouseType>({
shareArea: '', // 公摊面积
houseType: '', // 房屋户型
storeroomId: '', // 储藏室
parkingId: '' // 车位
parkingIds: [] // 车位
});
const rules = ref({
buildingId: [{ required: true, message: '请输入楼栋', trigger: 'blur' }],
unitNoId: [{ required: true, message: '请选择单元', trigger: 'blur' }],
floorNo: [{ required: true, message: '请选择楼层', trigger: 'blur' }],
houseUseTypeId: [{ required: true, message: '请选择房屋用途', trigger: 'blur' }],
houseArea: [{ required: true, message: '请输入建筑面积', trigger: 'blur' }],
buildingName: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
houseNo: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
buildingArea: [{ required: true, message: '请输入建筑面积', trigger: 'blur' }],
internalFloorArea: [{ required: true, message: '请输入套内面积', trigger: 'blur' }],
CommonArea: [{ required: true, message: '请输入公摊面积', trigger: 'blur' }]
@@ -137,29 +136,31 @@ const queryChangestore = ref({
});
const villageid = localStorage.getItem('villageid');
async function init() {
if (route.query.id) {
houseid.value = route.query.id;
}
nextTick(() => geteditinfo());
}
init();
const houseUseTypeList = ref([]);
async function geteditinfo() {
listHouseUseType({
pageNum: 1,
pageSize: 99999
}).then((res) => {
houseUseTypeList.value = res.rows;
listHouseUseType_add_house().then((res) => {
houseUseTypeList.value = res.data;
});
// 车位列表 = 当前房屋绑定车位 + 无人绑定车位
GetVillageListParking(villageid, houseid.value).then((res) => {
parkinglist.value = res.data;
});
GetVillagelistStoreroom({
...queryChangestore.value,
villageid: villageid,
houseId: houseid.value
}).then((res) => {
storeRoomlist.value = res.data.filter((item) => item);
});
if (route.query.id) {
houseid.value = route.query.id;
// const res = await GetVillageListParking(villageid, houseid.value);
// parkinglist.value = res.data;
// GetVillagelistStoreroom({
// ...queryChangestore.value,
// villageid: villageid,
// houseId: houseid.value
// }).then((res1) => {
// storeRoomlist.value = res1.data;
// });
getHouseApi(houseid.value).then((res) => {
form.value = {
...form.value,
@@ -171,23 +172,14 @@ async function geteditinfo() {
houseArea: res.data.houseArea, //建筑面积
internalArea: res.data.internalArea, //套内面积
storeroomId: res.data.storeroomId, //储藏室
parkingId: res.data.parkingId, //车位
parkingIds: res.data.parkingIds ?? [], //车位
houseUseTypeId: res.data.houseUseTypeId,
shareArea: res.data.shareArea // 公摊面积
};
housetype.value = res.data.houseType.split('');
// handlechangeBuild(form.value.buildingId);
console.log(housetype.value);
housetype.value = res.data.houseType ? res.data.houseType.split('') : [];
queryChangestore.value.buildingId = form.value.buildingId;
changeBuild(res.data.buildingId);
});
} else {
// const res = await GetVillageListParking(villageid);
// parkinglist.value = res.data;
// const res1 = await GetVillagelistStoreroom({
// ...queryChangestore.value,
// villageid: villageid
// });
// storeRoomlist.value = res1.data;
}
}
// 选择楼栋
@@ -195,12 +187,12 @@ function handlechangeBuild(id: string) {
queryChangestore.value.buildingId = id;
form.value.unitNoId = '';
form.value.floorNo = '';
changeBuild(id);
// getStoreRoomlist();
getStoreRoomlist();
}
function changeBuild(id: string) {
// 根据楼栋id获取单元
const arr = houseStore.currentBuildingInfoList;
const find = arr.find((item) => item.id === id);
if (find) {
@@ -211,16 +203,20 @@ function changeBuild(id: string) {
};
});
}
// 获取单元
getByBUildingidtoUnitNo(id).then((res) => {
units.value = [];
units.value = res.data;
});
}
// change unitNoId
function changeUnitNo(id: string) {
form.value.unitNoId = '';
form.value.unitNoId = id;
queryChangestore.value.unitNoId = id;
form.value.floorNo = '';
// getStoreRoomlist();
getStoreRoomlist();
}
// 查询储藏室列表
@@ -252,7 +248,7 @@ const submitForm = () => {
});
});
} else {
addHouseAPI(data).then((res) => {
addHouseAPI(data).then(() => {
ElMessage.success('添加成功');
houseStore.updateCureentBuilding();
router.push({

174
src/views/system/house/HouseDetails.vue
View File

@@ -21,11 +21,11 @@
</div>
<div class="descriptionsbox">
<div class="label">单元:</div>
<div class="value">{{ HouseInfo.house?.unitNoName ?? '--' }} 单元</div>
<div class="value">{{ HouseInfo.house?.unitNoName ?? '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">楼层:</div>
<div class="value">{{ HouseInfo.house?.floorNo ?? '--' }} 层</div>
<div class="value">{{ HouseInfo.house?.floorNo ? HouseInfo.house?.floorNo + ' 层' : '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">建筑面积:</div>
@@ -54,34 +54,36 @@
<span>储藏室信息 </span>
<el-button v-hasPermi="['storeroom:storeroom:edit']" type="primary" text v-if="HouseInfo.storeroom" @click="editStoreRoom">编辑</el-button>
</div>
<div class="addBuildingFormBody" v-if="HouseInfo.storeroom">
<div class="descriptionsbox">
<div class="label">楼栋:</div>
<div class="value">{{ HouseInfo.storeroom?.buildingName ?? '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">单元:</div>
<div class="value">{{ HouseInfo.storeroom?.unitNo ?? '--' }} 单元</div>
</div>
<div class="descriptionsbox">
<div class="label">储藏室号:</div>
<div class="value">{{ HouseInfo.storeroom?.unitNo ?? '--' }} 楼</div>
</div>
<div class="descriptionsbox">
<div class="label">建筑面积:</div>
<div class="value">{{ HouseInfo.storeroom?.houseArea ?? '--' }}㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">公摊面积:</div>
<div class="value">{{ HouseInfo.storeroom?.shareArea ?? '--' }}㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">实用面积:</div>
<div class="value">{{ HouseInfo.storeroom?.internalArea ?? '--' }}㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">备注:</div>
<div class="value"></div>
<div class="" v-if="HouseInfo.storeroom">
<div class="addBuildingFormBody">
<div class="descriptionsbox">
<div class="label">楼栋:</div>
<div class="value">{{ HouseInfo.storeroom?.buildingName ?? '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">单元:</div>
<div class="value">{{ HouseInfo.storeroom?.unitNoName ? `${HouseInfo.storeroom?.unitNoName} 单元` : '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">储藏室号:</div>
<div class="value">{{ HouseInfo.storeroom?.storeroomNo ? `${HouseInfo.storeroom?.storeroomNo}` : '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">建筑面积:</div>
<div class="value">{{ HouseInfo.storeroom?.houseArea ? HouseInfo.storeroom?.houseArea + ' ㎡' : '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">公摊面积:</div>
<div class="value">{{ HouseInfo.storeroom?.shareArea ? HouseInfo.storeroom?.shareArea + ' ㎡' : '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">实用面积:</div>
<div class="value">{{ HouseInfo.storeroom?.internalArea ? HouseInfo.storeroom?.internalArea + ' ㎡' : '--' }}㎡</div>
</div>
<div class="descriptionsbox" style="grid-column-start: 1; grid-column-end: 4">
<div class="label">备注:</div>
<div class="value">{{ HouseInfo.storeroom?.remark ?? '--' }}</div>
</div>
</div>
</div>
<div v-else class="w-full h-full flex flex-center min-h-4rem">
@@ -92,63 +94,34 @@
<div class="AddBuildingBody">
<div class="title">
<span>车位信息</span>
<el-button v-hasPermi="['parking:parking:edit']" type="primary" text @click="handleEditParking" v-if="HouseInfo.parking">编辑</el-button>
</div>
<div class="addBuildingFormBody" v-if="HouseInfo.parking">
<div class="descriptionsbox">
<div class="label">区域:</div>
<div class="value">{{ HouseInfo.parking?.areaName ?? '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">车位编号:</div>
<div class="value">{{ HouseInfo.parking?.parkingCode ?? '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">车位面积:</div>
<div class="value">{{ HouseInfo.parking?.parkingArea ?? '--' }} ㎡</div>
</div>
<div class="descriptionsbox">
<div class="label">楼层:</div>
<div class="value">{{ HouseInfo.parking?.parkingFloor ?? '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">车位类型:</div>
<div class="value">
<dict-tag :options="com_parking_type" :value="HouseInfo.parking.type" />
</div>
</div>
<div class="descriptionsbox">
<div class="label">车位状态:</div>
<div class="value">
<dict-tag :options="com_parking_status" :value="HouseInfo.parking.parkingStatus" />
</div>
</div>
<div class="descriptionsbox">
<div class="label">持有人:</div>
<div class="value">
<span>{{ HouseInfo.parking?.residentName ?? '--' }}</span>
<el-button
v-hasPermi="['parking:parking:edit']"
type="primary"
text
@click="handleEditUser(HouseInfo.parking.residentId)"
v-if="HouseInfo.parking"
>编辑</el-button
>
</div>
</div>
<div class="descriptionsbox">
<div class="label">添加时间:</div>
<div class="value">{{ HouseInfo.parking?.createTime ?? '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">添加人:</div>
<div class="value">{{ HouseInfo.parking?.createName ?? '--' }}</div>
</div>
<div class="descriptionsbox">
<div class="label">备注:</div>
<div class="value">{{ HouseInfo.parking?.remark ?? '--' }}</div>
</div>
<div class="" v-if="HouseInfo.parkingList.length > 0">
<el-table :data="HouseInfo.parkingList">
<el-table-column align="center" prop="areaName" label="区域" />
<el-table-column align="center" prop="parkingCode" label="车位编号" />
<el-table-column align="center" width="100" prop="parkingArea" label="车位面积">
<template #default="scope">
<span>{{ scope.row.parkingArea ?? '--' }} /㎡</span>
</template>
</el-table-column>
<el-table-column align="center" width="50" prop="parkingFloor" label="楼层" />
<el-table-column align="center" width="100" prop="type" label="车位类型">
<template #default="scope">
<dict-tag :options="com_parking_type" :value="scope.row.type"></dict-tag>
</template>
</el-table-column>
<el-table-column align="center" width="100" prop="parkingStatus" label="车位状态">
<template #default="scope">
<dict-tag :options="com_parking_status" :value="scope.row.parkingStatus"></dict-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="residentName" label="持有人">
<template #default="scope">
<el-button link type="primary" @click="handleEditUser(scope.row.residentId)">{{ scope.row.residentName }}</el-button>
</template>
</el-table-column>
<el-table-column align="center" show-overflow-tooltip prop="remark" label="备注" />
</el-table>
</div>
<div v-else class="w-full h-full flex flex-center min-h-4rem">
<span style="color: #999; font-weight: 500; font-size: 1.1rem; letter-spacing: 10px">暂无信息</span>
@@ -161,12 +134,22 @@
</div>
<div>
<el-table :data="HouseInfo.chargeItemList" style="width: 100%">
<el-table-column prop="date" label="收费项目" />
<el-table-column prop="name" label="收费标准" />
<el-table-column prop="name" label="开始时间" />
<el-table-column prop="name" label="结束时间" />
<el-table-column prop="name" label="备注" />
<el-table-column prop="address" label="操作" />
<el-table-column prop="itemName" label="收费项目" />
<el-table-column prop="name" label="收费标准">
<template #default="scope">
<div class="flex">
<span>{{ scope.row.fixedPrice }}</span> /
<dict-tag :options="com_charge_item_unit" :value="scope.row.unit"></dict-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="开始时间" />
<el-table-column prop="name" label="结束时间">
<template #default>
<span>---</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" />
</el-table>
</div>
</div>
@@ -232,6 +215,7 @@ const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { com_pay_status } = toRefs<any>(proxy?.useDict('com_pay_status'));
const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
const { com_charge_item_unit } = toRefs<any>(proxy?.useDict('com_charge_item_unit'));
const route = useRoute();
const router = useRouter();
@@ -240,7 +224,7 @@ const HouseInfo = ref<Data>({
billResidentList: [],
chargeItemList: [],
house: null,
parking: null,
parkingList: [],
residentList: [],
storeroom: null
});
@@ -316,7 +300,9 @@ init();
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
&.remarkbuildingformbody {
display: block;
}
.descriptionsbox {
display: flex;
align-items: center;

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

@@ -6,7 +6,7 @@
<span class="pointer" @click="handleAddBuilding" v-hasPermi="['system:building:add']">+增加楼栋</span>
</div>
</div>
<ul>
<ul class="flex-1 overflow-y-auto overflow-x-hidden">
<li
v-for="(item, index) in currentBuildingInfoList"
:class="{
@@ -14,7 +14,7 @@
}"
:key="index"
>
<div class="buildingname" @click="switchBuilding(item.id ?? null)">{{ item.buildingName ?? '' }}</div>
<div class="buildingname" :title="item.buildingName ?? ''" @click="switchBuilding(item.id ?? null)">{{ item.buildingName ?? '' }}</div>
<div class="buildactions flex align-center justify-around">
<el-icon class="pointer hover-color-blue" @click="editBuilding(item.id)" v-hasPermi="['system:building:edit']"><Setting /></el-icon>
<el-icon class="pointer hover-color-red" @click="deleteBuilding(item.id)" v-hasPermi="['system:building:remove']"><Delete /></el-icon>
@@ -67,6 +67,9 @@ $primary_color: #1978fe;
border-radius: 2px;
color: rgba(0, 0, 0, 1);
margin-right: 10px;
display: flex;
flex-direction: column;
.buildingheader {
height: 60px;
line-height: 60px;
@@ -78,6 +81,9 @@ $primary_color: #1978fe;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
height: 45px;
line-height: 45px;
color: rgba(16, 16, 16, 1);
@@ -87,15 +93,17 @@ $primary_color: #1978fe;
background-color: #1978fe0c;
}
.buildingname {
text-align: center;
width: 100%;
padding: 0 20px 0 0;
padding: 0 10px 0 5px;
cursor: pointer;
flex: 1;
max-width: 175px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: right;
}
.buildactions {
position: absolute;
right: 0;
top: 0;
width: 75px;
font-size: 15px;
padding: 15px 0;

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

@@ -1,46 +1,88 @@
<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">
<div class="flex flex-center">
<el-checkbox :label="house.houseNo" :value="house.houseId" />
<div class="calp" @click="handleCalp($event, house.houseId)">···</div>
<div class="house flex align-center" @contextmenu="handleContextMenu($event, house.houseId)" v-for="house in sortedHouses" :key="house.houseId">
<div class="w-full flex items-center justify-between">
<el-checkbox :title="house.houseNo" :label="house.houseNo" :value="house.houseId" />
<div class="circlebox" @click="handleContextMenu($event, house.houseId)">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<!-- 右键菜单组件 -->
<ContextMenu ref="contextMenu" :menu="menuList" @select="handleSelect" />
</div>
</template>
<script setup lang="ts">
import ContextMenu from '@/components/ContextMenu/index.vue';
import { ref } from 'vue';
import type { FloorsType, HouseType } from '@/api/system/house/type';
import type { FloorsType } from '@/api/system/house/type';
const props = defineProps<{
unit: FloorsType[];
fIdx: number | string;
menuList: {
label: string;
value: 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);
// 使用 computed 获取当前楼层数据，确保响应式
const currentFloor = computed(() => {
return props.unit.find((item) => item.floorNo === props.fIdx) ?? { floorNo: '', houses: [] };
});
// 存储排序后的结果
const sortedHouses = ref(currentFloor.value.houses);
// 轻量级比较函数：优先尝试数字比较，失败则使用 localeCompare
const compareHouseNo = (a: string, b: string) => {
// 如果都是纯数字，直接数字比较最快
const numA = Number(a);
const numB = Number(b);
if (!isNaN(numA) && !isNaN(numB)) {
return numA - numB;
}
// 否则使用自然排序
return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
};
// 监听数据源变化，仅当 houses 数组引用或内容变化时重新排序
watch(
() => currentFloor.value.houses,
(newHouses) => {
// 创建副本并排序
sortedHouses.value = [...newHouses].sort((a, b) => compareHouseNo(a.houseNo, b.houseNo));
},
{ immediate: true, deep: false } // deep: false 因为我们要替换整个数组引用
);
const emit = defineEmits<{
contextmenufun: [value: { type: string; value: string }];
// 新增事件：通知父组件打开菜单
openMenu: [data: { event: MouseEvent; houseId: string }];
}>();
const handleCalp = (event: MouseEvent, houseid: string) => {
contextMenu.value.open(event, houseid);
// 处理右键点击，向上传递事件对象和ID
const handleContextMenu = (event: MouseEvent, houseId: string) => {
event.preventDefault(); // 阻止默认浏览器菜单
emit('openMenu', { event, houseId });
};
</script>
<style scoped lang="scss">
.circlebox {
width: 14px;
height: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
$circleSize: 3px;
margin-left: 10px;
cursor: pointer;
.circle {
width: $circleSize;
height: $circleSize;
border-radius: 50%;
background-color: #666666;
}
}
.house-list {
display: flex;
flex-wrap: wrap;
@@ -52,13 +94,24 @@ const handleCalp = (event: MouseEvent, houseid: string) => {
.house {
min-width: 100px;
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 5px;
padding-left: 10px;
padding: 0 10px;
&:deep(.el-checkbox) {
max-width: 200px;
.el-checkbox__label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
.house:hover {
background: #e8f3ff;
border-color: #409eff;
@@ -75,19 +128,4 @@ const handleCalp = (event: MouseEvent, houseid: string) => {
top: 0;
left: 0;
}
.calp {
margin-left: 10px;
width: 20px;
height: 20px;
line-height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
letter-spacing: -3px;
transform: rotateZ(90deg) scale(0.8);
cursor: pointer;
}
</style>

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

@@ -1,6 +1,6 @@
<template>
<div class="h-full">
<div class="TableBox p-5 h-full" v-if="houseStore.currentHouseInfoList !== null">
<div class="tablebox1 h-full flex-1">
<div class="TableBox p-5" v-if="houseStore.currentHouseInfoList !== null">
<el-checkbox-group @change="handleChangeCheckhouses" v-model="houseStore.checkoutHouses">
<el-table border :data="houseStore.currentFloorInfoList">
<el-table-column align="center" fixed label="楼层\单元" max-width="100">
@@ -15,18 +15,28 @@
:key="index"
>
<template #header>
<span>{{ unit.unitNoName }}</span>
<el-button link type="primary" icon="Edit" @click="HandleEditUnit(unit)"></el-button>
<el-button link type="danger" icon="Delete" style="margin-left: 0" @click="HandleDeleteUnit(unit)"></el-button>
<div class="flex align-center justify-center">
<div class="houseName" :title="unit.unitNoName">{{ unit.unitNoName }}</div>
<el-button v-hasPermi="['unitNo:unitNo:edit']" link type="primary" icon="Edit" @click="HandleEditUnit(unit)"></el-button>
<el-button
v-hasPermi="['unitNo:unitNo:remove']"
link
type="danger"
icon="Delete"
style="margin-left: 0"
@click="HandleDeleteUnit(unit)"
></el-button>
</div>
</template>
<template #default="{ row }">
<houseItem @contextmenufun="contextMenuFun" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
<houseItem @openMenu="handleOpenMenu" :unit="unit.floors" :f-idx="row"></houseItem>
</template>
</el-table-column>
</el-table>
</el-checkbox-group>
</div>
<div v-else class="nodata">暂无房屋</div>
<ContextMenu ref="contextMenuRef" :menu="menutlist" @select="contextMenuFun" />
</div>
</template>
@@ -36,6 +46,8 @@ import houseItem from './houseItem.vue';
import { useHouseStore } from '@/store/modules/house';
import { checkPermi } from '@/utils/permission';
import ContextMenu from '@/components/ContextMenu/index.vue';
const houseStore = useHouseStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -57,6 +69,17 @@ if (checkPermi(['system:house:ByIdList'])) {
if (checkPermi(['system:house:remove'])) {
menutlist.push({ label: '删除', value: 'delete' });
}
const contextMenuRef = ref();
// 处理子组件抛出的打开菜单事件
const handleOpenMenu = ({ event, houseId }: { event: MouseEvent; houseId: string }) => {
// 调用唯一 ContextMenu 实例的 open 方法
// 注意：这里需要确保 ContextMenu 组件暴露了 open 方法，或者我们修改 ContextMenu 为受控模式
if (contextMenuRef.value) {
contextMenuRef.value.open(event, houseId);
}
};
function handleChangeCheckhouses(val: string[]) {
houseStore.checkoutHousesFun([]);
houseStore.checkoutHousesFun(val);
@@ -104,9 +127,35 @@ function HandleDeleteUnit(unit) {
</script>
<style scoped lang="scss">
.TableBox {
.el-table {
height: calc(100% - 500px);
.tablebox1 {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
.TableBox {
height: 100%;
.el-checkbox-group {
height: 100%;
overflow-y: auto;
}
.el-table {
width: 100%;
height: 100%;
}
.houseName {
height: 40px;
line-height: 40px;
font-weight: 600;
max-width: 300px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: default;
}
}
}
.nodata {

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

@@ -15,31 +15,24 @@
>楼栋结构：{{ houseStore.currentBuildingInfo?.buildStructure ? `${houseStore.currentBuildingInfo?.buildStructure}(m)` : '--' }}
</span>
</div> -->
<div>
<div style="text-wrap: nowrap">
<span class="text-size-16px text-color-black text-widget-bold mr-30px">
<strong>{{ houseStore.currentBuildingInfo?.buildingName }}</strong>
</span>
<span class="mr-15px"
>楼栋朝向:{{ houseStore.currentBuildingInfo?.buildToward ? `${houseStore.currentBuildingInfo?.buildToward}` : '--' }}</span
>楼栋朝向:{{ houseStore.currentBuildingInfo?.buildToward ? `${houseStore.currentBuildingInfo?.buildToward}` : ' --' }}</span
>
<span class="mr-15px">楼高：{{ houseStore.currentBuildingInfo?.buildTall ? `${houseStore.currentBuildingInfo?.buildTall}(m)` : '--' }}</span>
<span class="mr-15px">楼高:{{ houseStore.currentBuildingInfo?.buildTall ? `${houseStore.currentBuildingInfo?.buildTall}(m)` : ' --' }}</span>
<span class="mr-15px"
>楼栋结构：{{ houseStore.currentBuildingInfo?.buildStructure ? `${houseStore.currentBuildingInfo?.buildStructure}` : '--' }}
>楼栋结构:{{ houseStore.currentBuildingInfo?.buildStructure ? `${houseStore.currentBuildingInfo?.buildStructure}` : ' --' }}
</span>
</div>
<div class="rightActions flex flex-items-center">
<span class="mr-20px" @click="handleAddUnit" v-hasPermi="['system:house:add']">+添加单元</span>
<div style="text-wrap: nowrap" class="rightActions flex flex-items-center">
<span class="mr-20px" @click="handleAddUnit" v-hasPermi="['unitNo:unitNo:add']">+添加单元</span>
<span class="mr-20px" @click="handleAddHouse" v-hasPermi="['system:house:add']">+增加房屋</span>
<!-- <span class="mr-20px">收费标准设置</span> -->
<span @click="deleteAllhouse" v-hasPermi="['system:house:remove']">删除</span>
<el-select
clearable
@clear="handleClearUse"
@change="handleChangeUse"
v-model="houseUse"
placeholder="筛选房屋类型"
style="width: 180px; margin: 0 10px"
>
<span @click="deleteAllhouse" v-hasPermi="['system:house:remove']">批量删除房屋</span>
<el-select clearable @clear="handleClearUse" @change="handleChangeUse" v-model="houseUse" placeholder="筛选房屋类型" class="selectbox">
<el-option v-for="item in houseUseTypeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<div class="searchbox flex flex-items-center">
@@ -49,9 +42,9 @@
</div>
</div>
</div>
<div class="UnitBody">
<TableUnit @edit-unit="handleEditUnit" @delete-unit="handleDelete"></TableUnit>
</div>
<!-- <div class="UnitBody"> -->
<TableUnit @edit-unit="handleEditUnit" @delete-unit="handleDelete"></TableUnit>
<!-- </div> -->
<!-- 添加或修改单元对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="unitNoFormRef" :model="form" :rules="rules" label-width="80px">
@@ -79,7 +72,7 @@
import { deleteHouseApi } from '@/api/system/house';
import TableUnit from './components/table.vue';
import { useHouseStore } from '@/store/modules/house';
import { listHouseUseType } from '@/api/system/houseUse';
import { listHouseUseType, listHouseUseType_add_house } from '@/api/system/houseUse';
import { addUnitNo, delUnitNo, getUnitNo, updateUnitNo } from '@/api/system/houseUnit';
import { UnitNoVO } from '@/api/system/houseUnit/type';
@@ -96,11 +89,8 @@ const houseUseTypeList = ref([]);
* 获取房屋 类型
*/
function init() {
listHouseUseType({
pageNum: 1,
pageSize: 99999
}).then((res) => {
houseUseTypeList.value = res.rows;
listHouseUseType_add_house().then((res) => {
houseUseTypeList.value = res.data;
});
}
init();
@@ -228,6 +218,8 @@ $primary_color: #1978fe;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
.Unit_top {
padding: 20px;
height: 60px;
@@ -238,15 +230,24 @@ $primary_color: #1978fe;
span {
cursor: pointer;
}
.selectbox {
width: 150px;
margin: 0 10px;
@media (max-width: 1550px) {
width: 120px;
}
@media (max-width: 1400px) {
width: 80px;
}
}
.searchbox {
.searchinput {
width: 250px;
@media (max-width: 1200px) {
width: 50px;
@media (max-width: 1550px) {
width: 130px;
}
@media (max-width: 1400px) {
width: 130px;
width: 50px;
}
}
}
@@ -256,6 +257,7 @@ $primary_color: #1978fe;
flex: 1;
overflow-x: hidden;
overflow-y: auto;
display: flex;
}
}
</style>

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

@@ -1,10 +1,10 @@
<template>
<div class="p-2 houselist">
<div class="p-2 houselist flex flex-col">
<PageHeader>
<template #content>
<div class="houseAdressBox">
<span class="mr-50px">当前小区：{{ currentVilageInfo && currentVilageInfo.villageName }}</span>
<span>小区地址：{{ currentVilageInfo && currentVilageInfo.city }} {{ currentVilageInfo && currentVilageInfo.address }}</span>
<span>小区地址： {{ currentVilageInfo && currentVilageInfo.address }}</span>
</div>
</template>
</PageHeader>
@@ -21,8 +21,10 @@ import PageHeader from '@/components/Pageheader/index.vue';
import { useHouseStore } from '@/store/modules/house';
const houseStore = useHouseStore();
const { buildingtype, currentVilageInfo } = storeToRefs(houseStore);
const { currentVilageInfo } = storeToRefs(houseStore);
function init() {
houseStore.getviliageinfo(localStorage.getItem('villageid'));
houseStore.initHouse();
}
init();
@@ -32,13 +34,13 @@ init();
<style lang="scss" scoped>
.houselist {
flex: 1;
box-sizing: border-box;
height: calc(100vh - 84px);
min-height: calc(100vh - 84px);
height: 100%;
.houseBody {
height: calc(100% - 200px);
flex: 1;
margin-top: 10px;
min-height: 0;
overflow: hidden;
}
}
.houseAdressBox {