321 lines
12 KiB
Vue
321 lines
12 KiB
Vue
<template>
|
|
<div class="AddBuildingBox">
|
|
<PageHeader title="房屋信息"></PageHeader>
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>基本信息</span>
|
|
<el-button v-has-permi="['system:house:edit']" type="primary" text v-if="HouseInfo.house" @click="editHouse">编辑</el-button>
|
|
</div>
|
|
<div class="addBuildingFormBody" v-if="HouseInfo.house">
|
|
<div class="descriptionsbox">
|
|
<div class="label">房号:</div>
|
|
<div class="value">{{ 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?.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-has-permi="['storeroom:storeroom:edit']" type="primary" text v-if="HouseInfo.storeroom" @click="editStoreRoom">编辑</el-button>
|
|
</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">
|
|
<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 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>
|
|
</div>
|
|
</div>
|
|
<!-- 收费项目 -->
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>收费项目</span>
|
|
</div>
|
|
<div>
|
|
<el-table :data="HouseInfo.chargeItemList" style="width: 100%">
|
|
<el-table-column prop="itemName" label="收费项目" />
|
|
<el-table-column prop="name" label="收费标准">
|
|
<template #default="scope">
|
|
<div class="flex">
|
|
<span>{{ scope.row.fixedPrice }}</span>
|
|
<span v-if="scope.row.fixedPrice && scope.row.unit">/</span>
|
|
<span v-else>---</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>
|
|
<!-- 相关住户 -->
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>相关住户</span>
|
|
</div>
|
|
<div>
|
|
<el-table :data="HouseInfo.residentList" style="width: 100%">
|
|
<el-table-column prop="residentName" label="姓名" />
|
|
<el-table-column prop="gender" label="性别">
|
|
<template #default="scope">
|
|
<DictTag :options="sys_user_sex" :value="scope.row.gender"></DictTag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="phone" label="联系电话" />
|
|
<el-table-column prop="ownerRelationship" label="身份">
|
|
<template #default="scope">
|
|
<DictTag :options="com_resident_relationship" :value="scope.row.ownerRelationship"></DictTag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="备注" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<!-- 缴费账单 -->
|
|
<div class="AddBuildingBody">
|
|
<div class="title">
|
|
<span>缴费账单</span>
|
|
</div>
|
|
<div>
|
|
<el-table :data="HouseInfo.billResidentList" style="width: 100%">
|
|
<el-table-column prop="billCode" label="账单编号" />
|
|
<el-table-column prop="billName" label="账单名称" />
|
|
<el-table-column prop="chargeTypeName" label="账单项目" />
|
|
<el-table-column prop="money" label="金额">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.chargeTypeName === '水费' || scope.row.chargeTypeName === '电费'">--</span>
|
|
<span v-else>{{ scope.row.money }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="payStatus" label="支付状态">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.chargeTypeName === '水费' || scope.row.chargeTypeName === '电费'">--</span>
|
|
<DictTag :options="com_pay_status" :value="scope.row.payStatus"></DictTag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import DictTag from '@/components/DictTag/index.vue';
|
|
import PageHeader from '@/components/Pageheader/index.vue';
|
|
import { Data, getHouseMain } from '@/api/system/house';
|
|
|
|
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();
|
|
const routeid = ref('');
|
|
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',
|
|
query: {
|
|
id: id
|
|
}
|
|
});
|
|
}
|
|
function init() {
|
|
if (route.query.id) {
|
|
routeid.value = route.query.id as string;
|
|
getHouseMain(routeid.value).then((res) => {
|
|
console.log(res);
|
|
HouseInfo.value = res.data;
|
|
});
|
|
}
|
|
}
|
|
init();
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.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>
|