344 lines
13 KiB
Vue
344 lines
13 KiB
Vue
<template>
|
|
<div class="AddBuildingBox">
|
|
<PageHeader title="房屋信息"></PageHeader>
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>基本信息</span>
|
|
<el-button v-if="HouseInfo.house" v-has-permi="['system:house:edit']" text type="primary" @click="editHouse">编辑</el-button>
|
|
</div>
|
|
<div v-if="HouseInfo.house" class="addBuildingFormBody">
|
|
<div class="descriptionsBox">
|
|
<div class="label">房号:</div>
|
|
<div class="value">{{ HouseInfo.house?.buildingName }}-{{ HouseInfo.house?.unitNoName }}-{{ HouseInfo.house?.houseNo ?? '--' }}</div>
|
|
</div>
|
|
<div class="descriptionsBox">
|
|
<div class="label">所属小区:</div>
|
|
<div class="value">{{ HouseInfo.house?.villageName ?? '--' }}</div>
|
|
</div>
|
|
<div class="descriptionsBox">
|
|
<div class="label">楼栋:</div>
|
|
<div class="value">{{ HouseInfo.house?.buildingName ?? '--' }}</div>
|
|
</div>
|
|
<div class="descriptionsBox">
|
|
<div class="label">单元:</div>
|
|
<div class="value">{{ HouseInfo.house?.unitNoName ?? '--' }}</div>
|
|
</div>
|
|
<div class="descriptionsBox">
|
|
<div class="label">楼层:</div>
|
|
<div class="value">{{ HouseInfo.house?.floorNo ? HouseInfo.house?.floorNo + ' 层' : '--' }}</div>
|
|
</div>
|
|
<div class="descriptionsBox">
|
|
<div class="label">建筑面积:</div>
|
|
<div class="value">{{ HouseInfo.house?.houseArea ? `${HouseInfo.house?.houseArea} ㎡` : '--' }}</div>
|
|
</div>
|
|
<div class="descriptionsBox">
|
|
<div class="label">套内面积:</div>
|
|
<div class="value">{{ HouseInfo.house?.internalArea ? `${HouseInfo.house?.internalArea} ㎡` : '--' }}</div>
|
|
</div>
|
|
<div class="descriptionsBox">
|
|
<div class="label">公摊面积:</div>
|
|
<div class="value">{{ HouseInfo.house?.shareArea ? `${HouseInfo.house?.shareArea} ㎡` : '--' }}</div>
|
|
</div>
|
|
<div class="descriptionsBox">
|
|
<div class="label">户型:</div>
|
|
<div class="value">
|
|
{{ HouseInfo.house?.houseType ? HouseInfo.house?.houseType.split('')[0] : '--' }}室
|
|
{{ HouseInfo.house?.houseType ? HouseInfo.house?.houseType.split('')[1] : '--' }}厅
|
|
{{ HouseInfo.house?.houseType ? HouseInfo.house?.houseType.split('')[2] : '--' }}卫
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
<!-- 储藏室信息 -->
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>储藏室信息 </span>
|
|
<el-button v-if="HouseInfo.storeroom" v-has-permi="['storeroom:storeroom:edit']" text type="primary" @click="editStoreRoom">编辑</el-button>
|
|
</div>
|
|
<div v-if="HouseInfo.storeroom" class="">
|
|
<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">
|
|
<span style="color: #999; font-weight: 500; font-size: 1.1rem; letter-spacing: 10px">暂无信息</span>
|
|
</div>
|
|
</div>
|
|
<!-- 车位信息 -->
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>车位信息</span>
|
|
</div>
|
|
<div v-if="HouseInfo.parkingList.length > 0" class="">
|
|
<el-table :data="HouseInfo.parkingList">
|
|
<el-table-column align="center" label="区域" prop="areaName" />
|
|
<el-table-column align="center" label="车位编号" prop="parkingCode" />
|
|
<el-table-column align="center" label="车位面积" prop="parkingArea" width="100">
|
|
<template #default="scope">
|
|
<span>{{ scope.row.parkingArea ?? '--' }} /㎡</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="楼层" prop="parkingFloor" width="50" />
|
|
<el-table-column align="center" label="车位类型" prop="type" width="100">
|
|
<template #default="scope">
|
|
<dict-tag :options="com_parking_type" :value="scope.row.type"></dict-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="车位状态" prop="parkingStatus" width="100">
|
|
<template #default="scope">
|
|
<dict-tag :options="com_parking_status" :value="scope.row.parkingStatus"></dict-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="持有人" prop="residentName">
|
|
<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" label="备注" prop="remark" show-overflow-tooltip />
|
|
</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>
|
|
</div>
|
|
</div>
|
|
<!-- 收费项目 -->
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>收费项目</span>
|
|
</div>
|
|
<div>
|
|
<el-table :data="HouseInfo.chargeItemList" style="width: 100%">
|
|
<el-table-column label="收费项目" prop="itemName" />
|
|
<el-table-column label="收费标准" prop="name">
|
|
<template #default="scope">
|
|
<div v-if="scope.row.fixedPrice" class="flex">
|
|
<span>{{ scope.row.fixedPrice }}</span>
|
|
<span v-if="scope.row.unit">/</span>
|
|
<dict-tag v-if="scope.row.unit" :options="com_charge_item_unit" :value="scope.row.unit"></dict-tag>
|
|
</div>
|
|
<span v-else> --- </span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="开始时间" prop="createTime" />
|
|
<el-table-column label="结束时间" prop="name">
|
|
<template #default>
|
|
<span>---</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注" prop="remark" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<!-- 相关住户 -->
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>相关住户</span>
|
|
</div>
|
|
<div>
|
|
<el-table :data="HouseInfo.residentList" style="width: 100%">
|
|
<el-table-column label="姓名" prop="residentName" />
|
|
<el-table-column label="性别" prop="gender">
|
|
<template #default="scope">
|
|
<DictTag :options="sys_user_sex" :value="scope.row.gender"></DictTag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="联系电话" prop="phone" />
|
|
<el-table-column label="身份" prop="ownerRelationship">
|
|
<template #default="scope">
|
|
<DictTag :options="com_resident_relationship" :value="scope.row.ownerRelationship"></DictTag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注" prop="remark" show-overflow-tooltip />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<!-- 缴费账单 -->
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>缴费账单</span>
|
|
</div>
|
|
<div>
|
|
<el-table :data="billList" style="width: 100%">
|
|
<el-table-column label="账单名称" prop="detailsName" />
|
|
<el-table-column label="账单项目" prop="chargeItemName" />
|
|
<el-table-column label="金额" prop="money">
|
|
<template #default="scope">
|
|
<span>{{ scope.row.amount }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="支付状态" prop="payStatus">
|
|
<template #default="scope">
|
|
<DictTag :options="com_pay_status" :value="scope.row.payStatus ?? 0"></DictTag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import DictTag from '@/components/DictTag/index.vue';
|
|
import PageHeader from '@/components/Pageheader/index.vue';
|
|
import { Data, getHouseMain, House } from '@/api/system/house';
|
|
import { billlistType, billQuery } from '@/api/system/SdbCashier';
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
|
|
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();
|
|
let routeId = '';
|
|
const HouseInfo = ref<Data>({
|
|
billResidentList: [],
|
|
chargeItemList: [],
|
|
house: null,
|
|
parkingList: [],
|
|
residentList: [],
|
|
storeroom: null
|
|
});
|
|
function editHouse() {
|
|
router.push({
|
|
path: '/house/editHouse',
|
|
query: {
|
|
id: HouseInfo.value.house.houseId
|
|
}
|
|
});
|
|
}
|
|
function editStoreRoom() {
|
|
router.push({
|
|
path: '/house/EditStoreRoom',
|
|
query: {
|
|
id: HouseInfo.value.storeroom.storeroomId
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleEditUser(id: string) {
|
|
router.push({
|
|
// path: '/house/editResident',
|
|
path: '/house/ResidentMain',
|
|
query: {
|
|
id: id
|
|
}
|
|
});
|
|
}
|
|
function init() {
|
|
if (route.query.id) {
|
|
routeId = route.query.id as string;
|
|
getHouseMain(routeId).then((res) => {
|
|
HouseInfo.value = res.data;
|
|
getBillByHouse(res.data.house);
|
|
});
|
|
}
|
|
}
|
|
init();
|
|
const billList = ref<billlistType[]>([]);
|
|
const queryParams = ref({
|
|
pageSize: 10,
|
|
pageNum: 1
|
|
});
|
|
const total = ref(0);
|
|
function getBillByHouse(info: House) {
|
|
const obj = {
|
|
buildingId: info.buildingId,
|
|
houseId: info.houseId,
|
|
pageNum: queryParams.value.pageNum,
|
|
pageSize: queryParams.value.pageSize,
|
|
unitNoId: info.unitNoId,
|
|
payStatus: null,
|
|
villageId: info.villageId
|
|
};
|
|
billQuery(obj).then((res) => {
|
|
billList.value = res.rows;
|
|
total.value = res.total;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AddBuildingBox {
|
|
padding: 15px;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.AddBuildingBody {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background-color: white;
|
|
padding: 15px;
|
|
.title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding-left: 20px;
|
|
font-size: 15px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(16, 16, 16, 1);
|
|
border-bottom: 1px solid #bbbbbb;
|
|
margin-bottom: 20px;
|
|
}
|
|
.addBuildingFormBody {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(3, 1fr);
|
|
&.remarkBuildingFormBody {
|
|
display: block;
|
|
}
|
|
.descriptionsBox {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 10px 0;
|
|
font-size: 15px;
|
|
.label {
|
|
width: 100px;
|
|
text-align: right;
|
|
font-weight: 800;
|
|
}
|
|
.value {
|
|
flex: 1;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|