完善人房管理功能
This commit is contained in:
TS-QD1
parent
4b906b469e
commit
de36f700ea
@ -1,10 +1,347 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="body">
|
||||||
|
<n-spin :show="isInfoLoading" stroke="#FFFFFF">
|
||||||
|
<template #description><span style="color:#FFFFFF;">正在加载...</span></template>
|
||||||
|
<div class="left">
|
||||||
|
<div class="group">
|
||||||
|
<div class="title">
|
||||||
|
<span>基础信息</span>
|
||||||
|
<Icon class="go-back" @click="onGoBackClick" title="返回">
|
||||||
|
<ArrowStepBack16Filled />
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">所在社区</label>
|
||||||
|
<div class="value">{{ houseInfo.communityName }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">所在小区/组</label>
|
||||||
|
<div class="value">{{ houseInfo.residentialName }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">楼/排名称</label>
|
||||||
|
<div class="value">{{ houseInfo.buildingName }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">所在单元/列</label>
|
||||||
|
<div class="value">{{ houseInfo.affiliationUnit }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">所在层/院</label>
|
||||||
|
<div class="value">{{ houseInfo.affiliationFloors }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">门牌号</label>
|
||||||
|
<div class="value">{{ houseInfo.houseNum }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">房屋类型</label>
|
||||||
|
<div class="value">{{ houseInfo.typeName }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">房屋性质</label>
|
||||||
|
<div class="value">{{ houseInfo.natureName }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">房屋种类</label>
|
||||||
|
<div class="value">{{ houseInfo.categoryName }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">房屋结构</label>
|
||||||
|
<div class="value">{{ houseInfo.structureName }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">房屋面积</label>
|
||||||
|
<div class="value">{{ houseInfo.roomArea }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">建筑用途</label>
|
||||||
|
<div class="value">{{ houseInfo.buildingPurposeName }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">房屋间数</label>
|
||||||
|
<div class="value">{{ houseInfo.roomNum }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">产权证号</label>
|
||||||
|
<div class="value">{{ houseInfo.certificateNum }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">房屋用途</label>
|
||||||
|
<div class="value">{{ houseInfo.roomUseName }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">是否空置房</label>
|
||||||
|
<div class="value">{{ houseInfo.isVacant }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">是否出租屋</label>
|
||||||
|
<div class="value">{{ houseInfo.isRental }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">隐患类型</label>
|
||||||
|
<div class="value">{{ houseInfo.dangerName }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">登记日期</label>
|
||||||
|
<div class="value">{{ houseInfo.registrationDate }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">所属单位</label>
|
||||||
|
<div class="value">{{ houseInfo.affiliatedUnit }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="group">
|
||||||
|
<div class="title">租住情况</div>
|
||||||
|
<div class="content">
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">租住类型</label>
|
||||||
|
<div class="value">{{ houseInfo.lodgeTypeName }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="group">
|
||||||
|
<div class="title">房主</div>
|
||||||
|
<div class="content">
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">房主姓名</label>
|
||||||
|
<div class="value">{{ houseInfo.homeowner }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">证件种类</label>
|
||||||
|
<div class="value">{{ houseInfo.documentName }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">证件号码</label>
|
||||||
|
<div class="value">{{ houseInfo.documentNum }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">联系电话</label>
|
||||||
|
<div class="value">{{ houseInfo.phone }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="group">
|
||||||
|
<div class="title">托管人</div>
|
||||||
|
<div class="content">
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">托管人姓名</label>
|
||||||
|
<div class="value">{{ houseInfo.custodian }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">证件种类</label>
|
||||||
|
<div class="value">{{ houseInfo.custodianDocumentName }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">证件号码</label>
|
||||||
|
<div class="value">{{ houseInfo.custodianDocumentNum }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">联系电话</label>
|
||||||
|
<div class="value">{{ houseInfo.custodianPhone }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">与房主关系</label>
|
||||||
|
<div class="value">{{ houseInfo.relationshipHomeowner }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-spin>
|
||||||
|
<n-spin :show="isPopulationLoading" stroke="#FFFFFF">
|
||||||
|
<template #description><span style="color:#FFFFFF;">正在加载...</span></template>
|
||||||
|
<div class="right">
|
||||||
|
<div class="title">共{{ populationList.length }}人</div>
|
||||||
|
<div class="list" v-if="populationList.length > 0">
|
||||||
|
<div class="card" v-for="item in populationList" :key="item.populationInfoId"
|
||||||
|
@click="onPopulationClick(item.populationInfoId)">
|
||||||
|
<div>姓名：{{ item.name }}</div>
|
||||||
|
<div>年龄：{{ item.age }}</div>
|
||||||
|
<div>证件类型：{{ item.idcardType }}</div>
|
||||||
|
<div>证件号码：{{ item.idcard }}</div>
|
||||||
|
<div>联系方式：{{ item.phone }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, reactive, inject } from 'vue';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import { NSpace, NSpin } from 'naive-ui';
|
||||||
|
import { ArrowStepBack16Filled } from '@vicons/fluent';
|
||||||
|
import { Icon } from '@vicons/utils';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const query = route.query;
|
||||||
|
const axios = inject('axios');
|
||||||
|
|
||||||
|
const houseInfo = reactive({});
|
||||||
|
const populationList = reactive([]);
|
||||||
|
|
||||||
|
const isInfoLoading = ref(false);
|
||||||
|
const isPopulationLoading = ref(false);
|
||||||
|
|
||||||
|
const initHouseInfo = () => {
|
||||||
|
isInfoLoading.value = true;
|
||||||
|
axios.get(`/api/house/get/${query.houseId}`, {}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
houseInfo.communityName = data.communityName;
|
||||||
|
houseInfo.residentialName = data.residentialName;
|
||||||
|
houseInfo.buildingName = data.buildingName;
|
||||||
|
houseInfo.affiliationUnit = data.affiliationUnit;
|
||||||
|
houseInfo.affiliationFloors = data.affiliationFloors;
|
||||||
|
houseInfo.houseNum = data.houseNum;
|
||||||
|
houseInfo.typeName = data.typeName;
|
||||||
|
houseInfo.natureName = data.natureName;
|
||||||
|
houseInfo.categoryName = data.categoryName;
|
||||||
|
houseInfo.structureName = data.structureName;
|
||||||
|
houseInfo.roomArea = data.roomArea;
|
||||||
|
houseInfo.buildingPurposeName = data.buildingPurposeName;
|
||||||
|
houseInfo.roomNum = data.roomNum;
|
||||||
|
houseInfo.certificateNum = data.certificateNum;
|
||||||
|
houseInfo.roomUseName = data.roomUseName;
|
||||||
|
houseInfo.isVacant = data.isVacant == 0 ? '否' : '是';
|
||||||
|
houseInfo.isRental = data.isRental == 0 ? '否' : '是';
|
||||||
|
houseInfo.dangerName = data.dangerName;
|
||||||
|
houseInfo.registrationDate = data.registrationDate;
|
||||||
|
houseInfo.affiliatedUnit = data.affiliatedUnit;
|
||||||
|
houseInfo.lodgeTypeName = data.lodgeTypeName;
|
||||||
|
houseInfo.homeowner = data.homeowner;
|
||||||
|
houseInfo.documentName = data.documentName;
|
||||||
|
houseInfo.documentNum = data.documentNum;
|
||||||
|
houseInfo.phone = data.phone;
|
||||||
|
houseInfo.custodian = data.custodian;
|
||||||
|
houseInfo.custodianDocumentName = data.custodianDocumentName;
|
||||||
|
houseInfo.custodianDocumentNum = data.custodianDocumentNum;
|
||||||
|
houseInfo.custodianPhone = data.custodianPhone;
|
||||||
|
houseInfo.relationshipHomeowner = data.relationshipHomeowner;
|
||||||
|
}).catch(err => { console.error(err); }).finally(() => {
|
||||||
|
isInfoLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const initPopulationList = () => {
|
||||||
|
isPopulationLoading.value = true;
|
||||||
|
axios.get(`/api/populationinfo/list/house-id/${query.houseId}`).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
populationList.push(...data);
|
||||||
|
}).catch(err => {
|
||||||
|
console.error(err);
|
||||||
|
}).finally(() => {
|
||||||
|
isPopulationLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const onGoBackClick = () => {
|
||||||
|
router.go(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPopulationClick = (populationInfoId) => {
|
||||||
|
router.push({
|
||||||
|
path: 'population-info',
|
||||||
|
query: {
|
||||||
|
populationInfoId: populationInfoId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
initHouseInfo();
|
||||||
|
initPopulationList();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.container
|
||||||
|
--var-left-width 600px
|
||||||
|
--var-right-width 230px
|
||||||
|
--var-parents-width 200px
|
||||||
|
--var-label-width 70px
|
||||||
|
--var-value-width 100px
|
||||||
|
.top
|
||||||
|
padding 10px 0
|
||||||
|
font-weight bold
|
||||||
|
.body
|
||||||
|
display flex
|
||||||
|
justify-content space-between
|
||||||
|
.left
|
||||||
|
width var(--var-left-width)
|
||||||
|
.group
|
||||||
|
.title
|
||||||
|
font-weight bold
|
||||||
|
padding 10px 0
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
.go-back
|
||||||
|
margin-left 10px
|
||||||
|
cursor pointer
|
||||||
|
.content
|
||||||
|
.row
|
||||||
|
margin-bottom 10px
|
||||||
|
.item
|
||||||
|
font-size 12px
|
||||||
|
.name
|
||||||
|
font-weight bold
|
||||||
|
display block
|
||||||
|
width var(--var-label-width)
|
||||||
|
.value
|
||||||
|
width var(--var-value-width)
|
||||||
|
height 20px
|
||||||
|
line-height 20px
|
||||||
|
font-weight 400
|
||||||
|
padding 5px
|
||||||
|
color #B7B9BB
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
overflow hidden
|
||||||
|
text-overflow ellipsis
|
||||||
|
white-space nowrap
|
||||||
|
.right
|
||||||
|
width var(--var-right-width)
|
||||||
|
font-size 12px
|
||||||
|
margin-top 44px
|
||||||
|
.title
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
padding 10px
|
||||||
|
.list
|
||||||
|
margin-top 10px
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
padding 10px
|
||||||
|
.card
|
||||||
|
background-color rgba(255, 255, 255, 0.25)
|
||||||
|
padding 5px
|
||||||
|
margin-bottom 5px
|
||||||
|
cursor pointer
|
||||||
|
&:last-child
|
||||||
|
margin-bottom 0
|
||||||
</style>
|
</style>
|
||||||
@ -1,10 +1,344 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="top">
|
||||||
|
<span>基础信息</span>
|
||||||
|
<Icon class="go-back" @click="onGoBackClick" title="返回">
|
||||||
|
<ArrowStepBack16Filled />
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<n-spin :show="isInfoLoading" stroke="#FFFFFF">
|
||||||
|
<template #description><span style="color:#FFFFFF;">正在加载...</span></template>
|
||||||
|
<div class="left">
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">姓名</label>
|
||||||
|
<div class="value">{{ populationInfo.name }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">证件类型</label>
|
||||||
|
<div class="value">{{ populationInfo.idcardType }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">证件号码</label>
|
||||||
|
<div class="value" style="width: 200px;">{{ populationInfo.idcard }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">性别</label>
|
||||||
|
<div class="value">{{ populationInfo.sex }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">名族</label>
|
||||||
|
<div class="value" style="width: 120px">{{ populationInfo.nation }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">文化程度</label>
|
||||||
|
<div class="value" style="width: 120px">{{ populationInfo.education }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="text" vertical>
|
||||||
|
<label class="name">就读院校及专业（需注明学历）</label>
|
||||||
|
<div class="value">{{ populationInfo.description }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">所属党派</label>
|
||||||
|
<div class="value">{{ populationInfo.organization }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">宗教信仰</label>
|
||||||
|
<div class="value">{{ populationInfo.religion }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">婚姻状况</label>
|
||||||
|
<div class="value">{{ populationInfo.marriageStatus }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">婚变日期</label>
|
||||||
|
<div class="value">{{ populationInfo.marriageChangeTime }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">初婚日期</label>
|
||||||
|
<div class="value">{{ populationInfo.marriageFirstTime }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">社会保险情况</label>
|
||||||
|
<div class="value" style="width: 120px">{{ populationInfo.socialSecurity }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">健康状况</label>
|
||||||
|
<div class="value">{{ populationInfo.healthStatus }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">就业状态</label>
|
||||||
|
<div class="value">{{ populationInfo.departmentType }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">工作单位</label>
|
||||||
|
<div class="value">{{ populationInfo.department }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">工作职务</label>
|
||||||
|
<div class="value">{{ populationInfo.pastion }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">专业技术职称</label>
|
||||||
|
<div class="value">{{ populationInfo.pastionTitle }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">专长</label>
|
||||||
|
<div class="value">{{ populationInfo.expertise }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">联系电话</label>
|
||||||
|
<div class="value" style="width: 120px">{{ populationInfo.phone }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">户籍地址</label>
|
||||||
|
<div class="value" style="width: 530px">{{ populationInfo.domicileAddress }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">流动日期</label>
|
||||||
|
<div class="value">{{ populationInfo.flowTime }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">流动原因</label>
|
||||||
|
<div class="value" style="width: 120px">{{ populationInfo.flowReason }}</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="item" align="center">
|
||||||
|
<label class="name">流动其他原因</label>
|
||||||
|
<div class="value" style="width: 120px">{{ populationInfo.flowReasontext }}</div>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="row" justify="space-between">
|
||||||
|
<n-space class="parents" vertical>
|
||||||
|
<div class="card father">
|
||||||
|
<div class="title">父亲</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">姓名：{{ populationInfo.fatherName }}</div>
|
||||||
|
<div class="id-card">身份证：{{ populationInfo.fatherIdcard }}</div>
|
||||||
|
<div class="phone">联系电话：{{ populationInfo.fatherPhone }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card mother">
|
||||||
|
<div class="title">母亲</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">姓名：{{ populationInfo.motherName }}</div>
|
||||||
|
<div class="id-card">身份证：{{ populationInfo.motherIdcard }}</div>
|
||||||
|
<div class="phone">联系电话：{{ populationInfo.motherPhone }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-space>
|
||||||
|
<div class="relationship"></div>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-spin>
|
||||||
|
<n-spin :show="isHouseLoading" stroke="#FFFFFF">
|
||||||
|
<template #description><span style="color:#FFFFFF;">正在加载...</span></template>
|
||||||
|
<div class="right">
|
||||||
|
<div class="title">共{{ houseList.length }}套房</div>
|
||||||
|
<div class="list" v-if="houseList.length > 0">
|
||||||
|
<div class="card" v-for="house in houseList" :key="house.houseId"
|
||||||
|
@click="onHouseClick(house.houseId)">
|
||||||
|
<div>所在社区：{{ house.communityName }}</div>
|
||||||
|
<div>所在小区/组：{{ house.residentialName }}</div>
|
||||||
|
<div>楼/排名称：{{ house.buildingName }}</div>
|
||||||
|
<div>所在单元/列：{{ house.affiliationUnit }}</div>
|
||||||
|
<div>门牌号：{{ house.houseNum }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, reactive, inject } from 'vue';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import { NSpace, NSpin } from 'naive-ui';
|
||||||
|
import { ArrowStepBack16Filled } from '@vicons/fluent';
|
||||||
|
import { Icon } from '@vicons/utils';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const query = route.query;
|
||||||
|
const axios = inject('axios');
|
||||||
|
|
||||||
|
const populationInfo = reactive({});
|
||||||
|
const houseList = reactive([]);
|
||||||
|
const isInfoLoading = ref(false);
|
||||||
|
const isHouseLoading = ref(false);
|
||||||
|
|
||||||
|
const initPopulationInfo = () => {
|
||||||
|
isInfoLoading.value = true;
|
||||||
|
axios.get(`/api/populationinfo/get/${query.populationInfoId}`, {}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
populationInfo.name = data.name;
|
||||||
|
populationInfo.idcardType = data.idcardType;
|
||||||
|
populationInfo.idcard = data.idcard;
|
||||||
|
populationInfo.sex = data.sex;
|
||||||
|
populationInfo.nation = data.nation;
|
||||||
|
populationInfo.education = data.education;
|
||||||
|
populationInfo.organization = data.organization;
|
||||||
|
populationInfo.religion = data.religion;
|
||||||
|
populationInfo.marriageStatus = data.marriageStatus;
|
||||||
|
populationInfo.marriageChangeTime = data.marriageChangeTime;
|
||||||
|
populationInfo.marriageFirstTime = data.marriageFirstTime;
|
||||||
|
populationInfo.socialSecurity = data.socialSecurity;
|
||||||
|
populationInfo.healthStatus = data.healthStatus;
|
||||||
|
populationInfo.departmentType = data.departmentType;
|
||||||
|
populationInfo.department = data.department;
|
||||||
|
populationInfo.pastion = data.pastion;
|
||||||
|
populationInfo.pastionTitle = data.pastionTitle;
|
||||||
|
populationInfo.expertise = data.expertise;
|
||||||
|
populationInfo.phone = data.phone;
|
||||||
|
populationInfo.domicileAddress = data.domicileAddress;
|
||||||
|
populationInfo.flowTime = data.flowTime;
|
||||||
|
populationInfo.flowReason = data.flowReason;
|
||||||
|
populationInfo.flowReasontext = data.flowReasontext;
|
||||||
|
populationInfo.fatherId = data.fatherId;
|
||||||
|
populationInfo.fatherName = data.fatherName;
|
||||||
|
populationInfo.fatherPhone = data.fatherPhone;
|
||||||
|
populationInfo.fatherIdcard = data.fatherIdcard;
|
||||||
|
populationInfo.motherId = data.motherId;
|
||||||
|
populationInfo.motherName = data.motherName;
|
||||||
|
populationInfo.motherPhone = data.motherPhone;
|
||||||
|
populationInfo.motherIdcard = data.motherIdcard;
|
||||||
|
}).catch(res => {
|
||||||
|
console.error(res);
|
||||||
|
}).finally(() => {
|
||||||
|
isInfoLoading.value = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const initHouseList = () => {
|
||||||
|
isHouseLoading.value = true;
|
||||||
|
axios.get(`/api/house/list/population-info-id/${query.populationInfoId}`, {}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
houseList.push(...data);
|
||||||
|
}).catch(res => {
|
||||||
|
console.error(res);
|
||||||
|
}).finally(() => {
|
||||||
|
isHouseLoading.value = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onGoBackClick = () => {
|
||||||
|
router.go(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onHouseClick = (houseId) => {
|
||||||
|
router.push({
|
||||||
|
path: 'house-info',
|
||||||
|
query: {
|
||||||
|
houseId: houseId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
initPopulationInfo();
|
||||||
|
initHouseList();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.container
|
||||||
|
--var-left-width 600px
|
||||||
|
--var-right-width 230px
|
||||||
|
--var-parents-width 200px
|
||||||
|
.top
|
||||||
|
padding 10px 0
|
||||||
|
font-weight bold
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
.go-back
|
||||||
|
margin-left 10px
|
||||||
|
cursor pointer
|
||||||
|
.body
|
||||||
|
display flex
|
||||||
|
justify-content space-between
|
||||||
|
.left
|
||||||
|
width var(--var-left-width)
|
||||||
|
.row
|
||||||
|
margin-bottom 10px
|
||||||
|
.item
|
||||||
|
font-size 12px
|
||||||
|
.name
|
||||||
|
font-weight bold
|
||||||
|
.value
|
||||||
|
width 70px
|
||||||
|
height 20px
|
||||||
|
line-height 20px
|
||||||
|
font-weight 400
|
||||||
|
padding 5px
|
||||||
|
color #B7B9BB
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
overflow hidden
|
||||||
|
text-overflow ellipsis
|
||||||
|
white-space nowrap
|
||||||
|
.text
|
||||||
|
font-size 12px
|
||||||
|
.name
|
||||||
|
font-weight bold
|
||||||
|
.value
|
||||||
|
width var(--var-left-width)
|
||||||
|
min-height 100px
|
||||||
|
line-height 20px
|
||||||
|
min-width 100px
|
||||||
|
padding 5px
|
||||||
|
color #B7B9BB
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
box-sizing border-box
|
||||||
|
.parents
|
||||||
|
font-size 12px
|
||||||
|
width var(--var-parents-width)
|
||||||
|
.card
|
||||||
|
.title
|
||||||
|
text-align center
|
||||||
|
padding 2px
|
||||||
|
.content
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
padding 6px
|
||||||
|
.father
|
||||||
|
.title
|
||||||
|
background-color #4095E5
|
||||||
|
.mother
|
||||||
|
.title
|
||||||
|
background-color #E26B60
|
||||||
|
.relationship
|
||||||
|
width calc(var(--var-left-width) - var(--var-parents-width) - 15px)
|
||||||
|
height 100%
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
.right
|
||||||
|
width var(--var-right-width)
|
||||||
|
font-size 12px
|
||||||
|
.title
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
padding 10px
|
||||||
|
.list
|
||||||
|
margin-top 10px
|
||||||
|
background-color rgba(239, 239, 239, 0.1)
|
||||||
|
padding 10px
|
||||||
|
.card
|
||||||
|
background-color rgba(255, 255, 255, 0.25)
|
||||||
|
padding 5px
|
||||||
|
margin-bottom 5px
|
||||||
|
cursor pointer
|
||||||
|
&:last-child
|
||||||
|
margin-bottom 0
|
||||||
</style>
|
</style>
|
||||||
@ -10,10 +10,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</n-space>
|
</n-space>
|
||||||
<n-space class="body">
|
<n-space class="body">
|
||||||
|
<n-spin :show="isLoading" stroke="#FFFFFF">
|
||||||
|
<template #description><span style="color:#FFFFFF;">正在加载...</span></template>
|
||||||
<div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
|
<div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
|
||||||
<n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
|
<n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
|
||||||
<n-grid-item v-for="data in dataRows" :key="data">
|
<n-grid-item v-for="data in dataRows" :key="data">
|
||||||
<n-space class="card" vertical justify="between">
|
<n-space class="card" vertical justify="between" @click="onHouseClick(data.houseDTO.houseId)">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<n-image width="60" height="60" src="assets/images/house.png" :preview-disabled="true" />
|
<n-image width="60" height="60" src="assets/images/house.png" :preview-disabled="true" />
|
||||||
<div class="info">
|
<div class="info">
|
||||||
@ -22,7 +24,8 @@
|
|||||||
<span class="type">{{ data.houseDTO.houseType }}</span>
|
<span class="type">{{ data.houseDTO.houseType }}</span>
|
||||||
<span class="housing-estate">{{ data.houseDTO.residentialName }}</span>
|
<span class="housing-estate">{{ data.houseDTO.residentialName }}</span>
|
||||||
<span class="population">
|
<span class="population">
|
||||||
<n-image width="15" height="15" src="assets/images/md-person.svg" :preview-disabled="true" />
|
<n-image width="15" height="15" src="assets/images/md-person.svg"
|
||||||
|
:preview-disabled="true" />
|
||||||
<span class="name">{{ data.houseDTO.homeowner }}</span>
|
<span class="name">{{ data.houseDTO.homeowner }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -35,7 +38,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<n-space class="bottom">
|
<n-space class="bottom">
|
||||||
<table>
|
<table v-if="data.populationInfoDTO">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>姓名</th>
|
<th>姓名</th>
|
||||||
@ -48,19 +51,29 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<div class="text" :title="data.populationInfoDTO.name">{{ data.populationInfoDTO.name }}</div>
|
<div class="text" :title="data.populationInfoDTO.name">
|
||||||
|
{{ data.populationInfoDTO.name }}
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="text" :title="data.populationInfoDTO.birthday">{{ data.populationInfoDTO.birthday }}</div>
|
<div class="text" :title="data.populationInfoDTO.birthday">
|
||||||
|
{{ data.populationInfoDTO.birthday }}
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="text" :title="data.populationInfoDTO.idcardType">{{ data.populationInfoDTO.idcardType }}</div>
|
<div class="text" :title="data.populationInfoDTO.idcardType">
|
||||||
|
{{ data.populationInfoDTO.idcardType }}
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="text" :title="data.populationInfoDTO.idcard">{{ data.populationInfoDTO.idcard }}</div>
|
<div class="text" :title="data.populationInfoDTO.idcard">
|
||||||
|
{{ data.populationInfoDTO.idcard }}
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="text" :title="data.populationInfoDTO.phone">{{ data.populationInfoDTO.phone }}</div>
|
<div class="text" :title="data.populationInfoDTO.phone">
|
||||||
|
{{ data.populationInfoDTO.phone }}
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -70,22 +83,24 @@
|
|||||||
</n-space>
|
</n-space>
|
||||||
</n-grid-item>
|
</n-grid-item>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
|
</n-spin>
|
||||||
</n-space>
|
</n-space>
|
||||||
<n-space class="footer">
|
<n-space class="footer">
|
||||||
<Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex"/>
|
<Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex" />
|
||||||
</n-space>
|
</n-space>
|
||||||
</n-space>
|
</n-space>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, inject } from 'vue';
|
import { ref, reactive, inject } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { NSpace, NInput, NGrid, NGridItem, NImage } from 'naive-ui';
|
import { NSpace, NInput, NGrid, NGridItem, NImage, NModal, NSpin } from 'naive-ui';
|
||||||
import { Search24Filled } from '@vicons/fluent';
|
import { Search24Filled } from '@vicons/fluent';
|
||||||
import { Icon } from '@vicons/utils';
|
import { Icon } from '@vicons/utils';
|
||||||
import Pager from '../pager/Pager.vue'
|
import Pager from '../pager/Pager.vue';
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
const axios = inject('axios');
|
const axios = inject('axios');
|
||||||
const keywords = ref(route.query.keywords);
|
const keywords = ref(route.query.keywords);
|
||||||
const currentPage = ref(1);
|
const currentPage = ref(1);
|
||||||
@ -93,8 +108,10 @@ const total = ref(0);
|
|||||||
const rows = ref(10);
|
const rows = ref(10);
|
||||||
const pagerUpdateIndex = ref(0);
|
const pagerUpdateIndex = ref(0);
|
||||||
const dataRows = reactive([]);
|
const dataRows = reactive([]);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
|
isLoading.value = true;
|
||||||
axios.get('/api/population/findHouse', {
|
axios.get('/api/population/findHouse', {
|
||||||
params: {
|
params: {
|
||||||
keywords: keywords.value,
|
keywords: keywords.value,
|
||||||
@ -109,7 +126,9 @@ const init = () => {
|
|||||||
dataRows.push(...data.rows);
|
dataRows.push(...data.rows);
|
||||||
pagerUpdateIndex.value++;
|
pagerUpdateIndex.value++;
|
||||||
}).catch(resp => {
|
}).catch(resp => {
|
||||||
console.log()
|
console.error(resp)
|
||||||
|
}).finally(() => {
|
||||||
|
isLoading.value = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -124,6 +143,15 @@ const onPageChange = (pager) => {
|
|||||||
init();
|
init();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onHouseClick = (houseId) => {
|
||||||
|
router.push({
|
||||||
|
path: '/house-info',
|
||||||
|
query: {
|
||||||
|
houseId: houseId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -5,50 +5,65 @@
|
|||||||
<a href="javascript:void(0)" @click="onReseachClick">重新搜索</a>
|
<a href="javascript:void(0)" @click="onReseachClick">重新搜索</a>
|
||||||
</n-space>
|
</n-space>
|
||||||
<n-space class="body">
|
<n-space class="body">
|
||||||
|
<n-spin :show="isLoading" stroke="#FFFFFF">
|
||||||
|
<template #description><span style="color:#FFFFFF;">正在加载...</span></template>
|
||||||
<div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
|
<div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
|
||||||
<n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
|
<n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
|
||||||
<n-grid-item v-for="data in dataRows" :key="data">
|
<n-grid-item v-for="data in dataRows" :key="data">
|
||||||
<n-space class="card" vertical justify="between">
|
<n-space class="card" vertical justify="between" @click="onPopulationClick(data.populationInfoId)">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<n-image width="60" height="60" src="assets/images/women.png" :preview-disabled="true" v-if="data.sex === '女性'"/>
|
<n-image width="60" height="60" src="assets/images/women.png" :preview-disabled="true"
|
||||||
<n-image width="60" height="60" src="assets/images/man.png" :preview-disabled="true" v-else/>
|
object-fit="contain" v-if="data.populationInfoBaseDTO.sex === '女性'" />
|
||||||
|
<n-image width="60" height="60" src="assets/images/man.png" :preview-disabled="true"
|
||||||
|
object-fit="contain" v-else />
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<span class="name">{{ data.populationInfoHouseDTO.name }}</span>
|
<span class="name">{{ data.populationInfoBaseDTO.name }}</span>
|
||||||
<span class="sex" :class="{ female: data.populationInfoHouseDTO.sex === '女性' }">{{ data.populationInfoHouseDTO.sex }}</span>
|
<span class="sex"
|
||||||
|
:class="{ female: data.populationInfoBaseDTO.sex === '女性' }">{{ data.populationInfoBaseDTO.sex }}</span>
|
||||||
<span class="age">17</span>
|
<span class="age">17</span>
|
||||||
<span class="id-card">
|
<span class="id-card">
|
||||||
<span class="type">{{ data.populationInfoHouseDTO.idcardType }}</span>
|
<span class="type">{{ data.populationInfoBaseDTO.idcardType }}</span>
|
||||||
<span class="num">{{ data.populationInfoHouseDTO.idcard }}</span>
|
<span class="num">{{ data.populationInfoBaseDTO.idcard }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<span class="birth">{{ data.populationInfoHouseDTO.birthday }}</span>
|
<span class="birth">{{ data.populationInfoBaseDTO.birthday }}</span>
|
||||||
<span class="phone">
|
<span class="phone">
|
||||||
<n-image width="15" height="15" src="assets/images/dial-phone.svg"
|
<n-image width="15" height="15" src="assets/images/dial-phone.svg"
|
||||||
:preview-disabled="true" />
|
:preview-disabled="true" />
|
||||||
<span class="num">{{ data.populationInfoHouseDTO.phone }}</span>
|
<span class="num">{{ data.populationInfoBaseDTO.phone }}</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="nation">{{ data.populationInfoHouseDTO.nation }}</span>
|
<span class="nation">{{ data.populationInfoBaseDTO.nation }}</span>
|
||||||
<span class="education">{{ data.populationInfoHouseDTO.education }}</span>
|
<span class="education">{{ data.populationInfoBaseDTO.education }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tags">
|
<div class="tags">
|
||||||
<span class="yellow" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isCorrect === '是'">社区矫正</span>
|
<span class="yellow"
|
||||||
<span class="yellow" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isRelease === '是'">刑满释放</span>
|
v-if="data.populationInfoBaseDTO.isCorrect === '是'">社区矫正</span>
|
||||||
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isDispute === '是'">矛盾纠纷</span>
|
<span class="yellow"
|
||||||
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isSecurity === '是'">社会治安</span>
|
v-if="data.populationInfoBaseDTO.isRelease === '是'">刑满释放</span>
|
||||||
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isDrug === '是'">吸毒人员</span>
|
<span class="grey"
|
||||||
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isCult === '是'">涉邪人员</span>
|
v-if="data.populationInfoBaseDTO.isDispute === '是'">矛盾纠纷</span>
|
||||||
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isPetition === '是'">重点上访户</span>
|
<span class="grey"
|
||||||
<span class="red" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isSeriousIllness === '是'">重病</span>
|
v-if="data.populationInfoBaseDTO.isSecurity === '是'">社会治安</span>
|
||||||
<span class="orange" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isOldage === '是'">老年人</span>
|
<span class="grey"
|
||||||
<span class="blue" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isMinority === '是'">未成年</span>
|
v-if="data.populationInfoBaseDTO.isDrug === '是'">吸毒人员</span>
|
||||||
<span class="green" v-if="data.populationInfoHouseDTO.isNormal">正常</span>
|
<span class="grey"
|
||||||
|
v-if="data.populationInfoBaseDTO.isCult === '是'">涉邪人员</span>
|
||||||
|
<span class="grey"
|
||||||
|
v-if="data.populationInfoBaseDTO.isPetition === '是'">重点上访户</span>
|
||||||
|
<span class="red"
|
||||||
|
v-if="data.populationInfoBaseDTO.isSeriousIllness === '是'">重病</span>
|
||||||
|
<span class="orange"
|
||||||
|
v-if="data.populationInfoBaseDTO.isOldage === '是'">老年人</span>
|
||||||
|
<span class="blue"
|
||||||
|
v-if="data.populationInfoBaseDTO.isMinority === '是'">未成年</span>
|
||||||
|
<span class="green" v-if="data.populationInfoBaseDTO.isNormal">正常</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<n-space class="bottom">
|
<n-space class="bottom">
|
||||||
<table>
|
<table v-if="data.houseDTO">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>社区</th>
|
<th>社区</th>
|
||||||
@ -87,9 +102,10 @@
|
|||||||
</n-space>
|
</n-space>
|
||||||
</n-grid-item>
|
</n-grid-item>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
|
</n-spin>
|
||||||
</n-space>
|
</n-space>
|
||||||
<n-space class="footer">
|
<n-space class="footer">
|
||||||
<Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex"/>
|
<Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex" />
|
||||||
</n-space>
|
</n-space>
|
||||||
</n-space>
|
</n-space>
|
||||||
</template>
|
</template>
|
||||||
@ -97,7 +113,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, inject } from 'vue';
|
import { ref, reactive, inject } from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { NSpace, NInput, NGrid, NGridItem, NImage } from 'naive-ui';
|
import { NSpace, NInput, NGrid, NGridItem, NImage, NSpin } from 'naive-ui';
|
||||||
import Pager from '../pager/Pager.vue'
|
import Pager from '../pager/Pager.vue'
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@ -109,8 +125,10 @@ const total = ref(0);
|
|||||||
const rows = ref(10);
|
const rows = ref(10);
|
||||||
const pagerUpdateIndex = ref(0);
|
const pagerUpdateIndex = ref(0);
|
||||||
const dataRows = reactive([]);
|
const dataRows = reactive([]);
|
||||||
|
const isLoading = ref(false)
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
|
isLoading.value = true;
|
||||||
axios.get('/api/population/findPopulation', {
|
axios.get('/api/population/findPopulation', {
|
||||||
params: {
|
params: {
|
||||||
...query,
|
...query,
|
||||||
@ -123,19 +141,21 @@ const init = () => {
|
|||||||
total.value = data.total;
|
total.value = data.total;
|
||||||
dataRows.splice(0, dataRows.length);
|
dataRows.splice(0, dataRows.length);
|
||||||
data.rows.forEach(item => {
|
data.rows.forEach(item => {
|
||||||
item.populationInfoHouseDTO.isNormal = (
|
item.isNormal = (
|
||||||
item.populationInfoHouseDTO.populationInfoBaseDTO.isCorrect === '否' &&
|
item.populationInfoBaseDTO.isCorrect === '否' &&
|
||||||
item.populationInfoHouseDTO.populationInfoBaseDTO.isRelease === '否' &&
|
item.populationInfoBaseDTO.isRelease === '否' &&
|
||||||
item.populationInfoHouseDTO.populationInfoBaseDTO.isDispute === '否' &&
|
item.populationInfoBaseDTO.isDispute === '否' &&
|
||||||
item.populationInfoHouseDTO.populationInfoBaseDTO.isSecurity === '否' &&
|
item.populationInfoBaseDTO.isSecurity === '否' &&
|
||||||
item.populationInfoHouseDTO.populationInfoBaseDTO.isDrug === '否' &&
|
item.populationInfoBaseDTO.isDrug === '否' &&
|
||||||
item.populationInfoHouseDTO.populationInfoBaseDTO.isCult === '否' &&
|
item.populationInfoBaseDTO.isCult === '否' &&
|
||||||
item.populationInfoHouseDTO.populationInfoBaseDTO.isPetition === '否'
|
item.populationInfoBaseDTO.isPetition === '否'
|
||||||
)
|
)
|
||||||
dataRows.push(item);
|
dataRows.push(item);
|
||||||
});
|
});
|
||||||
pagerUpdateIndex.value++;
|
pagerUpdateIndex.value++;
|
||||||
}).catch(resp => {
|
}).catch(resp => {
|
||||||
|
}).finally(() => {
|
||||||
|
isLoading.value = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -151,6 +171,15 @@ const onReseachClick = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onPopulationClick = (populationInfoId) => {
|
||||||
|
router.push({
|
||||||
|
path: 'population-info',
|
||||||
|
query: {
|
||||||
|
populationInfoId: populationInfoId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -6,7 +6,8 @@ import axios from 'axios';
|
|||||||
|
|
||||||
const createAxios = {
|
const createAxios = {
|
||||||
install(app, options) {
|
install(app, options) {
|
||||||
axios.defaults.baseURL = 'http://192.168.0.9:7023/population';
|
// axios.defaults.baseURL = 'http://192.168.0.9:7023/population';
|
||||||
|
axios.defaults.baseURL = 'http://192.168.0.15:7023/population';
|
||||||
// axios.defaults.baseURL = '/population';
|
// axios.defaults.baseURL = '/population';
|
||||||
axios.defaults.timeout = 20000;
|
axios.defaults.timeout = 20000;
|
||||||
app.provide('axios', axios);
|
app.provide('axios', axios);
|
||||||
|
|||||||
@ -17,7 +17,7 @@ const routes = [{
|
|||||||
}, {
|
}, {
|
||||||
name: '以房找人列表',
|
name: '以房找人列表',
|
||||||
path: '/population-list',
|
path: '/population-list',
|
||||||
component: PopulationList
|
component: PopulationList,
|
||||||
}, {
|
}, {
|
||||||
name: '以人找房列表',
|
name: '以人找房列表',
|
||||||
path: '/house-list',
|
path: '/house-list',
|
||||||
|
|||||||
@ -4,5 +4,8 @@ import vue from '@vitejs/plugin-vue'
|
|||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
base: './',
|
base: './',
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
},
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user