Files
dvcp_v2_webapp/project/sass/apps/AppBuildManage/components/BuildMsg.vue
yanran200730 407d8d4baa 迁移
2022-02-09 10:15:44 +08:00

751 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<ai-list class="BuildMsg">
<!-- 标题 -->
<template #title>
<ai-title :title="params.communityName + '-' + params.buildingNumber + '号楼房屋信息'" isShowBack isShowBottomBorder
@onBackClick="cancel(false)"></ai-title>
</template>
<template #content>
<!-- 性别下拉选择框 -->
<ai-search-bar>
<template #left>
<ai-select v-model="search.livingStatus" placeholder="房屋状态" clearable @change=";(page.current = 1), getList()"
:selectList="dict.getDict('houselivingStatus')"></ai-select>
<ai-select v-model="search.existFlow" placeholder="有无流动人口" clearable @change=";(page.current = 1), getList()"
:selectList="dict.getDict('yesOrNo')"></ai-select>
</template>
<template #right>
<el-input v-model="search.houseCode" size="small" placeholder="请输入户号/户主" clearable
@keyup.enter.native=";(page.current = 1), getList()"
@clear=";(page.current = 1), (search.houseCode = ''), getList()" suffix-icon="iconfont iconSearch"/>
</template>
</ai-search-bar>
<ai-search-bar>
<template #left>
<div style="height: 32px"/>
</template>
<template #right>
<ai-import :instance="instance" :dict="dict" type="appcommunityhouseinfo" :importParams="houseImpParam" name="房屋信息"
@success="getList()">
<el-button icon="iconfont iconImport">导入房屋信息</el-button>
</ai-import>
<ai-download :instance="instance" url="/app/appcommunityhouseinfo/listExport" :params="houseExpParam"
fileName="房屋信息" style="margin-right: 10px">
<el-button icon="iconfont iconExported">导出房屋信息</el-button>
</ai-download>
<ai-import :instance="instance" :dict="dict" type="appcommunityhouseresident" :importParams="houseImpParam" name="人口信息"
@success="getList()">
<el-button icon="iconfont iconImport">导入人口信息</el-button>
</ai-import>
<ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="houseExpParam"
fileName="人口信息">
<el-button icon="iconfont iconExported">导出人口信息</el-button>
</ai-download>
</template>
</ai-search-bar>
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
:current.sync="page.current" :size.sync="page.size" @getList="getList"
@selection-change="(v) => (ids = v.map((e) => e.id))">
<el-table-column slot="owner" label="房主" align="center">
<template slot-scope="{ row }">
<span v-for="(item, i) in row.owner" :key="i" v-if="item.name">
<span v-if="i < 2" style="margin-right: 5px;">
{{ item.name }}
</span>
</span>
</template>
</el-table-column>
<el-table-column slot="owner" label="联系方式" align="center">
<template slot-scope="{ row }">
<span v-for="(item, i) in row.owner" :key="i" v-if="item.phone">
<span v-if="i < 1">
{{ item.phone }}
</span>
</span>
</template>
</el-table-column>
<el-table-column slot="livingStatus" label="房屋状态" align="center">
<template slot-scope="{ row }">
{{ dict.getLabel('houselivingStatus', row.livingStatus) }}
</template>
</el-table-column>
<el-table-column slot="owner" label="流动人口" align="center">
<template slot-scope="{ row }">
<span>{{ row.existFlow == 1 ? '有' : '无' }}</span>
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center" fixed="right" width="140">
<div class="table-options" slot-scope="{ row }">
<el-button type="text" @click="toEdit(row.id, 'edit')">编辑</el-button>
<el-button type="text" @click="toEdit(row.id, 'detail')">详情</el-button>
</div>
</el-table-column>
</ai-table>
<ai-dialog :title="isEdit ? '编辑居民户' : '居民户详情'" :visible.sync="dialogVisible" width="800px" customFooter>
<ai-wrapper label>
<div class="bulidmsg">
<span class="icon"></span>
<span class="bulidtext">房屋信息</span>
</div>
<ai-info-item label="所属社区">
{{ forms.areaName }}
</ai-info-item>
<ai-info-item label="房屋地址">
{{ forms.createAddress }}
</ai-info-item>
<ai-info-item label="房屋类型">
{{ dict.getLabel('communityBuildingType', forms.buildingType) }}
</ai-info-item>
<template v-if="!isEdit">
<ai-info-item label="房屋面积" prop="houseArea" class="line">
<span>{{ forms.houseArea }}</span
>&nbsp;<span v-if="forms.houseArea">m²</span>
</ai-info-item>
<ai-info-item label="居住现状" prop="livingStatus">
<span>{{ dict.getLabel('houselivingStatus', forms.livingStatus) }}</span>
</ai-info-item>
<ai-info-item label="房屋用途" prop="houseUse">
<span>{{ dict.getLabel('houseUseStatus', forms.houseUse) }}</span>
</ai-info-item>
<ai-info-item label="承租情况" prop="leaseSituation">
<span>{{ dict.getLabel('houseLeaseSituation', forms.leaseSituation) }}</span>
</ai-info-item>
<ai-info-item label="起租日期" prop="startDate">
{{ $dateFormat(forms.startDate) }}
</ai-info-item>
<ai-info-item label="备案证明" prop="isFilingCertificate">
<span>{{ dict.getLabel('isFilingCertificateStatus', forms.isFilingCertificate) }}</span>
</ai-info-item>
</template>
</ai-wrapper>
<el-form v-if="isEdit" :model="forms" ref="ruleForm" label-width="100px" label-suffix="" align-items="center"
size="small">
<template>
<el-form-item label="房屋面积" prop="houseArea" class="house">
<el-input v-model="forms.houseArea" type="text" size="small" placeholder="请输入" suffix="">
<template slot="suffix">m²</template>
</el-input>
</el-form-item>
<div class="family-hose">
<el-form-item label="居住现状">
<el-radio-group v-model="forms.livingStatus">
<el-radio label="0">自用</el-radio>
<el-radio label="1">出租</el-radio>
<el-radio label="2">闲置</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="房屋用途">
<el-radio-group v-model="forms.houseUse">
<el-radio label="0">居住</el-radio>
<el-radio label="1">闲置</el-radio>
<el-radio label="2">经营</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div class="family-hose">
<el-form-item label="承租情况" prop="leaseSituation">
<ai-select v-model="forms.leaseSituation" placeholder="请选择" clearable
@change=";(page.current = 1), getList()" :selectList="dict.getDict('houseLeaseSituation')"
size="small"></ai-select>
</el-form-item>
<el-form-item label="起租日期" prop="startDate">
<el-date-picker v-model="forms.startDate" type="date" placeholder="选择日期" size="small"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</div>
<el-form-item label="备案证明" prop="isFilingCertificate">
<el-radio-group v-model="forms.isFilingCertificate">
<el-radio label="0">有租赁房备案证明</el-radio>
<el-radio label="1">无租赁房备案证明</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-form>
<!-- 房主信息 -->
<div class="table">
<div class="msg">
<b class="house-msg">
<span class="icon"></span>
<span class="msg">房主信息</span>
</b>
<div class="button">
<ai-person-select :instance="instance" @selectPerson="getOwners" ref="getOwner" :chooseUserList="owners"
:isMultiple="true" v-if="isEdit"/>
</div>
</div>
<ai-table :tableData="owners" :col-configs="owner" ref="aitableex">
<el-table-column slot="owner" label="居民类型" align="center">
<template slot-scope="{ row }">
{{ dict.getLabel('BulidResidentType', row.residentType) }}
</template>
</el-table-column>
<el-table-column slot="owner" label="特殊人群" align="center" v-if="!isEdit">
<template slot-scope="{ row }">
{{ row.tips }}
</template>
</el-table-column>
<el-table-column slot="owner" label="与户主关系" align="center" v-if="isEdit">
<template slot-scope="{ row }">
<ai-select v-model="row.relation" placeholder="与户主关系" clearable
:selectList="$dict.getDict('householdRelation')"></ai-select>
</template>
</el-table-column>
<el-table-column slot="owner" label="与户主关系" align="center" v-if="!isEdit">
<template slot-scope="{ row }">
{{ dict.getLabel('householdRelation', row.relation) }}
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center" v-if="isEdit">
<template slot-scope="scope">
<el-button type="text" @click="remove(scope.$index, 'owners')">删除</el-button>
</template>
</el-table-column>
</ai-table>
</div>
<!-- 承租人信息 -->
<div class="table">
<div class="msg">
<b class="house-msg">
<span class="icon"></span>
<span class="msg">承租人信息</span>
</b>
<div class="button">
<ai-person-select :instance="instance" @selectPerson="getRenters" :chooseUserList="renters"
:isMultiple="true" v-if="isEdit"/>
</div>
</div>
<ai-table :tableData="renters" :col-configs="renter" ref="aitableex">
<el-table-column slot="renters" label="居民类型" align="center">
<template slot-scope="{ row }">
{{ dict.getLabel('BulidResidentType', row.residentType) }}
</template>
</el-table-column>
<el-table-column slot="renters" label="特殊人群" align="center" v-if="!isEdit">
<template slot-scope="{ row }">
{{ row.tips }}
</template>
</el-table-column>
<el-table-column slot="renters" label="与户主关系" align="center" v-if="isEdit">
<template slot-scope="{ row }">
<ai-select v-model="row.relation" placeholder="与户主关系" clearable
:selectList="$dict.getDict('householdRelation')"></ai-select>
</template>
</el-table-column>
<el-table-column slot="renters" label="与户主关系" align="center" v-if="!isEdit">
<template slot-scope="{ row }">
{{ dict.getLabel('householdRelation', row.relation) }}
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center" v-if="isEdit">
<template slot-scope="scope">
<el-button type="text" @click="remove(scope.$index, 'renters')">删除</el-button>
</template>
</el-table-column>
</ai-table>
</div>
<!-- 实际居住人员 -->
<div class="table">
<div class="msg">
<b class="house-msg">
<span class="icon"></span>
<span class="msg">实际居住人员</span>
</b>
<div class="button" v-if="isEdit">
<ai-person-select :instance="instance" @selectPerson="getLives" :isMultiple="true"
:chooseUserList="lives"/>
</div>
</div>
<ai-table :tableData="lives" :col-configs="live" ref="aitableex">
<el-table-column slot="lives" label="居民类型" align="center">
<template slot-scope="{ row }">
{{ dict.getLabel('BulidResidentType', row.residentType) }}
</template>
</el-table-column>
<el-table-column slot="lives" label="特殊人群" align="center" v-if="!isEdit">
<template slot-scope="{ row }">
{{ row.tips }}
</template>
</el-table-column>
<el-table-column slot="lives" label="与户主关系" align="center" v-if="isEdit">
<template slot-scope="{ row }">
<ai-select v-model="row.relation" placeholder="与户主关系" clearable
:selectList="$dict.getDict('householdRelation')"></ai-select>
</template>
</el-table-column>
<el-table-column slot="lives" label="与户主关系" align="center" v-if="!isEdit">
<template slot-scope="{ row }">
{{ dict.getLabel('householdRelation', row.relation) }}
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center" v-if="isEdit">
<template slot-scope="scope">
<el-button type="text" @click="remove(scope.$index, 'lives')">删除</el-button>
</template>
</el-table-column>
</ai-table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{ isEdit ? '取消' : '关闭' }}</el-button>
<el-button type="primary" @click="report" v-if="isEdit">确认</el-button>
</span>
</ai-dialog>
</template>
</ai-list>
</template>
<script>
export default {
name: 'BuildMsg',
components: {},
props: {
dict: Object,
params: Object,
instance: Function,
},
data() {
return {
id: '',
page: {
current: 1,
size: 10,
},
total: 0,
search: {
livingStatus: '',
houseCode: '',
},
colConfigs: [
{prop: 'unitNumber', label: '单元', align: 'center'},
{prop: 'houseCode', label: '户号', align: 'center'},
{prop: 'livingNumber', label: '住户数', align: 'center'},
{slot: 'owner', label: '户主', align: 'center'},
{slot: 'livingStatus', align: 'center'},
{slot: 'options', label: '操作', align: 'center'},
],
tableData: [],
dialogVisible: false,
forms: {
houseArea: '',
livingStatus: 0,
houseUse: 0,
leaseSituation: '',
isFilingCertificate: '',
},
owners: [],
owner: [
{prop: 'name', label: '姓名', align: 'center'},
{prop: 'idNumber', label: '身份证号', align: 'center'},
{prop: 'phone', label: '联系方式', align: 'center'},
{slot: 'owner', align: 'center'},
{
slot: 'relation',
align: 'center',
},
{slot: 'options', label: '操作', align: 'center'},
],
renters: [],
renter: [
{prop: 'name', label: '姓名', align: 'center'},
{prop: 'idNumber', label: '身份证号', align: 'center'},
{prop: 'phone', label: '联系方式', align: 'center'},
{
slot: 'relation',
align: 'center',
},
{slot: 'renters', align: 'center'},
{slot: 'options', label: '操作', align: 'center'},
],
lives: [],
live: [
{prop: 'name', label: '姓名', align: 'center'},
{prop: 'idNumber', label: '身份证号', align: 'center'},
{prop: 'phone', label: '联系方式', align: 'center'},
{
slot: 'relation',
align: 'center',
},
{slot: 'lives', align: 'center'},
{slot: 'options', label: '操作', align: 'center'},
],
type: '',
ids: '',
buildingId: '',
}
},
computed: {
houseImpParam() {
return {
buildingId: this.params.id,
}
},
houseExpParam() {
return {
buildingId: this.params.id,
}
},
isEdit() {
return this.type == 'edit'
},
},
watch: {},
created() {
this.dict.load('yesOrNo', 'houselivingStatus', 'houseLeaseSituation', 'isFilingCertificateStatus', 'houseUseStatus', 'BulidResidentType', 'communityBuildingType', 'householdRelation').then(() => {
this.getList()
})
},
mounted() {
},
methods: {
getList() {
this.instance
.post(`/app/appcommunityhouseinfo/list`, null, {
params: {
...this.page,
...this.search,
buildingId: this.params.id,
},
})
.then((res) => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
// 返回按钮
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
},
// 确认增加和编辑
report() {
this.instance
.post(`/app/appcommunityhouseinfo/update`, {
...this.forms,
id: this.id,
owner: this.owners,
renter: this.renters,
live: this.lives,
})
.then((res) => {
if (res.code == 0) {
this.$message.success('提交成功')
this.dialogVisible = false
this.getList()
}
})
},
// 详情 和 编辑
toEdit(id, type) {
this.id = id
this.type = type
this.instance.post(`/app/appcommunityhouseinfo/queryDetailById?&id=${id}`).then((res) => {
if (res.code == 0) {
this.forms = res.data
this.owners = this.forms.owner
this.renters = this.forms.renter
this.lives = this.forms.live
}
})
this.dialogVisible = true
},
// 删除
remove(index, source) {
this.$confirm('确定删除该数据?').then(() => {
this[source].splice(index, 1)
})
},
// 选择人员
getOwners(val) {
let listNew = []
let newName = []
for (var i = 0; i < val.length; i++) {
if (newName.indexOf(val[i].name) == -1) {
newName.push(val[i].name)
listNew.push(val[i])
}
}
this.owners = listNew
},
getRenters(val) {
let listNew = []
let newName = []
for (var i = 0; i < val.length; i++) {
if (newName.indexOf(val[i].name) == -1) {
newName.push(val[i].name)
listNew.push(val[i])
}
}
this.renters = listNew
},
getLives(val) {
let listNew = []
let newName = []
for (var i = 0; i < val.length; i++) {
if (newName.indexOf(val[i].name) == -1) {
newName.push(val[i].name)
listNew.push(val[i])
}
}
this.lives = listNew
},
},
}
</script>
<style lang="scss" scoped>
.BuildMsg {
::v-deep .ai-list__title {
background-color: #fff;
margin: 0 !important;
padding-left: 20px;
}
::v-deep .ai-list__content {
.ai-list__content--right {
.ai-list__content--right-wrapper {
.search-select {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
.left {
width: 30%;
.ai-select {
display: inline-block;
}
.ai-select:first-child {
margin-right: 15px;
}
}
.right {
width: 20%;
}
}
.bar {
display: flex;
justify-content: space-between;
margin-top: 10px;
.export {
.ai-import {
display: inline-block;
margin-right: 10px;
}
.ai-download {
display: inline-block;
}
}
.import {
.ai-import {
display: inline-block;
margin-right: 10px;
}
.ai-download {
display: inline-block;
}
}
}
.ai-dialog__wrapper {
background-color: #fff;
.el-dialog__wrapper {
.el-dialog__body {
.ai-dialog__content {
.ai-dialog__content--wrapper {
.ai-wrapper {
padding-left: 0 !important;
.bulidmsg {
height: 32px;
line-height: 32px;
width: 100%;
margin: 0 0 15px 20px;
.icon {
border-left: 2px solid #2266ff;
}
.bulidtext {
display: inline-block;
margin-left: 9px;
color: #222;
font-size: 15px;
font-weight: 800;
}
}
.create {
width: 100% !important;
.ai-info-item__left {
width: 78px;
margin-right: 22px;
}
}
.Address {
.ai-info-item__left {
width: 78px;
margin-right: 22px;
}
}
.building {
padding-left: 40px;
.ai-info-item__left {
width: 78px;
margin-right: 22px;
}
}
}
.el-form {
padding: 20px 0 0 0;
.house {
width: 50%;
.el-form-item__content {
width: 63%;
}
}
.family-hose {
display: flex;
justify-content: space-between;
}
.line {
width: 50% !important;
padding-right: 40px;
.el-form-item__content {
.el-input {
.el-input__suffix {
color: #666;
margin-right: 5px;
}
}
}
}
}
.table {
padding: 20px 20px 0 20px;
.msg {
display: flex;
justify-content: space-between;
.house-msg {
height: 32px;
line-height: 32px;
.icon {
border-left: 2px solid #2266ff;
}
.msg {
display: inline-block;
color: #222;
font-size: 15px;
font-weight: 800;
margin-left: 9px;
}
}
// .button {
// }
}
.ai-table {
margin-top: 10px;
// .el-table {
// }
.pagination {
display: none;
}
}
}
}
}
}
}
}
}
}
}
}
</style>