This commit is contained in:
yanran200730
2022-02-09 10:15:39 +08:00
parent 8440693bbd
commit 407d8d4baa
31 changed files with 10557 additions and 5 deletions

View File

@@ -0,0 +1,68 @@
<template>
<div class="AppBuildManage">
<keep-alive :include="['List']">
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
</keep-alive>
</div>
</template>
<script>
import List from './components/List'
import Add from './components/Add'
import BuildMsg from './components/BuildMsg'
export default {
label: '楼栋管理',
name: 'AppBuildManage',
props: {
instance: Function,
dict: Object,
},
data() {
return {
component: 'List',
params: {},
include: [],
}
},
components: {
Add,
List,
BuildMsg,
},
methods: {
onChange(data) {
if (data.type === 'add') {
this.component = 'Add'
this.params = data.params
}
if (data.type === 'buildmsg') {
this.component = 'BuildMsg'
this.params = { ...data.params }
}
if (data.type == 'list') {
this.component = 'List'
this.params = data.params
this.$nextTick(() => {
if (data.isRefresh) {
this.$refs.component.getList()
}
})
}
},
},
}
</script>
<style lang="scss">
.AppBuildManage {
height: 100%;
background: #f3f6f9;
overflow: auto;
}
</style>

View File

@@ -0,0 +1,402 @@
<template>
<section style="height: 100%" class="AppBuildManage">
<ai-detail class="Add">
<!-- 返回按钮 -->
<template #title>
<ai-title :title="isEdit ? '编辑楼栋信息' : '添加楼栋'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
</template>
<template #content>
<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="" align-items="center">
<!-- 小区名称 -->
<ai-bar title="基础信息"></ai-bar>
<el-form-item label="小区名称" prop="communityName" class="line" ref="communityNameContent">
<!-- 选择小区 -->
<ai-select v-if="instance" :instance="instance" v-model="formData.communityId" action="/app/appcommunityinfo/listAll" :prop="{ label: 'communityName' }"></ai-select>
</el-form-item>
<div class="flex">
<!-- 楼栋号 -->
<el-form-item label="楼栋号" prop="buildingNumber" :rules="[{ required: true, message: '请输入楼栋号', trigger: 'blur' }]">
<el-input size="small" v-model="formData.buildingNumber" placeholder="请输入" clearable :disabled="isEdit" />
</el-form-item>
<!-- 单元数 -->
<el-form-item label="单元数" prop="unitNumber">
<el-input size="small" v-model.number="formData.unitNumber" placeholder="请输入" clearable :disabled="isEdit" />
</el-form-item>
<!-- 起始计数层数 -->
<el-form-item label="起始计数层数" prop="layerStart">
<el-input size="small" v-model.number="formData.layerStart" placeholder="请输入" clearable :disabled="isEdit"></el-input>
</el-form-item>
<!-- 最高层数 -->
<el-form-item label="最高层数" prop="layerNumber">
<el-input size="small" v-model.number="formData.layerNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input>
</el-form-item>
<!-- 起始计数户数 -->
<el-form-item label="起始计数户数" prop="householdStart">
<el-input size="small" v-model.number="formData.householdStart" placeholder="请输入" clearable :disabled="isEdit"></el-input>
</el-form-item>
<!-- 每层户数 -->
<el-form-item label="每层户数" prop="householdNumber">
<el-input size="small" v-model.number="formData.householdNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input>
</el-form-item>
<!-- 楼栋长姓名 -->
<el-form-item label="楼栋长姓名" prop="managerName">
<el-input size="small" v-model="formData.managerName" placeholder="请输入" clearable></el-input>
</el-form-item>
<!-- 楼栋长联系方式 -->
<el-form-item label="楼栋长联系方式" prop="managerPhone">
<el-input size="small" v-model.number="formData.managerPhone" placeholder="请输入" clearable></el-input>
</el-form-item>
<!-- 房屋类别 -->
<el-form-item label="房屋类别" prop="buildingType" class="buildingTypes">
<el-radio-group v-model="formData.buildingType">
<el-radio label="0">单元公寓</el-radio>
<el-radio label="1">筒子楼</el-radio>
<el-radio label="2">别墅</el-radio>
<el-radio label="3">自建楼</el-radio>
<el-radio label="4">平房</el-radio>
<el-radio label="5">高层公共建筑</el-radio>
<el-radio label="6">商住两用</el-radio>
<el-radio label="7">其它</el-radio>
</el-radio-group>
</el-form-item>
<!-- 楼栋经度坐标 -->
<el-form-item label="楼栋经度坐标" prop="lng">
<el-input size="small" v-model="formData.lng" placeholder="请输入" clearable></el-input>
</el-form-item>
<!-- 楼栋纬度坐标 -->
<el-form-item label="楼栋纬度坐标" prop="lat">
<el-input size="small" v-model="formData.lat" placeholder="请输入" clearable></el-input>
</el-form-item>
<!-- 地图位置 -->
<el-form-item label="地图位置" prop="lat">
<el-button @click="showMap = true">地图标绘</el-button>
</el-form-item>
</div>
</el-form>
</template>
<!-- 底部按钮 -->
<template #footer>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="confirm()">提交</el-button>
</template>
</ai-detail>
<ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
<div id="map"></div>
<el-form label-width="80px" style="padding: 10px 20px 0 20px;">
<el-row type="flex" justify="space-between">
<el-form-item label="经度">
<el-input disabled size="small" v-model="placeDetail.lng"></el-input>
</el-form-item>
<el-form-item label="纬度">
<el-input disabled size="small" v-model="placeDetail.lat"></el-input>
</el-form-item>
</el-row>
</el-form>
<el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
<el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
</el-input>
<div id="searchPlaceOutput" />
</ai-dialog>
</section>
</template>
<script>
import { mapState } from 'vuex'
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
name: 'Add',
components: {},
props: {
dict: Object,
params: Object,
instance: Function,
},
data() {
return {
formData: {
communityName: '',
buildingNumber: '',
unitNumber: '',
layerStart: '1',
layerNumber: '',
householdStart: '1',
householdNumber: '',
managerName: '',
managerPhone: '',
lng: '',
lat: '',
id: '', // 小区编号
buildingType: '0',
communityId: '',
},
formRules: {
unitNumber: [
{ required: true, message: '请输入单元数', trigger: 'change' },
{
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
},
],
layerStart: [
{ required: true, message: '请输入起始计数层数', trigger: 'change' },
{
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
},
],
layerNumber: [
{ required: true, message: '请输入最高层数', trigger: 'change' },
{
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
},
],
householdStart: [
{ required: true, message: '请输入起始计数户数', trigger: 'change' },
{
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
},
],
householdNumber: [
{ required: true, message: '请输入每层户数', trigger: 'change' },
{
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
},
],
},
plot: [],
dialogVisible: false,
treeData: [],
map: null,
placeDetail: {
lng: '',
lat: '',
},
showMap: false,
searchPlace: '',
}
},
computed: {
...mapState(['user']),
isEdit() {
return !!this.params.id
},
},
created() {
this.formData.communityId = this.params.communityId
this.getListinfo()
},
methods: {
selectMap() {
this.formData.lng = this.placeDetail.lng
this.formData.lat = this.placeDetail.lat
this.showMap = false
},
getCorpLocation() {
this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
if (res.code == 0) {
this.initMap(res.data)
}
})
},
initMap({ lng, lat }) {
AMapLoader.load({
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
version: '2.0',
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
}).then((AMap) => {
this.placeDetail.lng = this.formData.lng
this.placeDetail.lat = this.formData.lat
this.map = new AMap.Map('map', {
resizeEnable: true,
zooms: [6, 20],
center: [lng, lat],
zoom: 11,
})
this.placeSearch = new AMap.PlaceSearch({ map: this.map })
new AMap.AutoComplete({
input: 'searchPlaceInput',
output: 'searchPlaceOutput',
}).on('select', (e) => {
if (e?.poi) {
this.placeSearch.setCity(e.poi.adcode)
this.movePosition(e.poi.location)
}
})
this.map.on('click', (e) => {
new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
if (res?.regeocode) {
this.placeDetail = {
lng: e.lnglat?.lng,
lat: e.lnglat?.lat,
address: res.regeocode.formattedAddress,
}
}
})
this.movePosition(e.lnglat)
})
})
},
movePosition(center) {
if (this.map) {
this.map.clearMap()
this.map.panTo(center)
this.map.add([
new AMap.Marker({
position: center,
clickable: true,
}),
])
this.map.setFitView()
}
},
getListinfo() {
return this.instance
.post('/app/appcommunitybuildinginfo/queryDetailById', null, {
params: {
id: this.params.id,
},
})
.then((res) => {
if (res.data) {
this.formData = res.data
}
})
},
confirm() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.instance
.post(`/app/appcommunitybuildinginfo/addOrUpdate`, {
...this.formData,
})
.then((res) => {
if (res.code == 0) {
this.$message.success('提交成功')
setTimeout(() => {
this.cancel(true)
}, 1000)
}
})
}
})
},
// 返回按钮
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
},
},
watch: {
communityNameContent: {
deep: true,
},
},
}
</script>
<style lang="scss" scoped>
.AppBuildManage {
::v-deep .amap-logo {
display: none!important;
}
::v-deep .amap-copyright {
display: none!important;
}
}
.Add {
height: 100%;
.ai-detail__title {
background-color: #fff;
}
.ai-detail__content {
.ai-detail__content--wrapper {
.el-form {
background-color: #fff;
padding: 0 60px;
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.el-form-item {
width: 48%;
}
.buildingTypes {
width: 100%;
}
}
}
}
}
}
::v-deep .mapDialog {
.el-dialog__body {
padding: 0;
.ai-dialog__content {
padding: 0;
}
.ai-dialog__content--wrapper {
padding: 0 !important;
position: relative;
}
#map {
width: 100%;
height: 420px;
}
.searchPlaceInput {
position: absolute;
width: 250px;
top: 30px;
left: 25px;
}
#searchPlaceOutput {
position: absolute;
width: 250px;
left: 25px;
height: initial;
top: 80px;
background: white;
z-index: 250;
max-height: 300px;
overflow-y: auto;
.auto-item {
text-align: left;
font-size: 14px;
padding: 8px;
box-sizing: border-box;
}
}
}
}
</style>

View File

@@ -0,0 +1,750 @@
<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>

View File

@@ -0,0 +1,312 @@
<template>
<section class="AppPetitionManage">
<ai-detail>
<!-- 标题 -->
<ai-title slot="title" title="楼栋管理" isShowBottomBorder />
<template #content>
<ai-tree-menu title="楼栋管理" @search="(v) => $refs.gridTree.filter(v)">
<el-tree :data="treeData" ref="gridTree" :filter-node-method="handleTreeFilter" @node-click="handleSelectGrid" highlight-current node-key="id" :props="{ label: 'name', children: 'children' }" :default-expanded-keys="[defaultShowNodes]" />
</ai-tree-menu>
<div class="flex">
<ai-search-bar bottomBorder>
<template slot="left">
<!-- 定位状态 -->
<ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('BuildLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
</template>
<!-- 搜索 -->
<template slot="right">
<el-input v-model="search.managerName" size="small" placeholder="楼栋号/楼长/联系方式" clearable @keyup.enter.native=";(page.current = 1), getList()" @clear=";(page.current = 1), (search.managerName = ''), getList()" suffix-icon="iconfont iconSearch" />
</template>
</ai-search-bar>
<ai-search-bar class="ai-search-ba">
<template slot="left">
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')" :disabled="!isAdd">添加 </el-button>
<el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
</template>
<!-- 导入导出 -->
<template #right>
<ai-import :instance="instance" :dict="dict" type="appcommunitybuildinginfo" :importParams="{ areaId: user.info && user.info.areaId }" name="楼栋管理" @success="getList()">
<el-button icon="iconfont iconImport">导入</el-button>
</ai-import>
<ai-download :instance="instance" url="/app/appcommunitybuildinginfo/listExport" :params="param" fileName="楼栋管理模板" :disabled="tableData.length == 0">
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
</ai-download>
</template>
</ai-search-bar>
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" style="margin-top: 20px;" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
<el-table-column slot="locationStatus" label="定位状态" align="center">
<template slot-scope="{ row }">
<span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
<span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center" width="240px" fixed="right">
<div class="table-options" slot-scope="{ row }">
<el-button type="text" @click="onAdd(row.id)">编辑</el-button>
<el-button type="text" @click="remove(row.id)">删除</el-button>
<el-button type="text" @click="toBuildMsg(row)">房屋信息</el-button>
<el-button type="text" @click="$router.push({ name: '63', query: { communityId: row.communityId, buildingId: row.id, unitNum: 1, buildingNumber: row.buildingNumber } })">
楼栋模型
</el-button>
</div>
</el-table-column>
</ai-table>
</div>
</template>
</ai-detail>
</section>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'List',
props: {
dict: Object,
instance: Function,
params: Object,
},
data() {
return {
isAdd: false,
page: {
current: 1,
size: 10,
},
total: 0,
search: {
locationStatus: '',
managerName: '',
},
id: '',
ids: [],
colConfigs: [
{ type: 'selection' },
{
prop: 'communityName',
label: '小区名称',
},
{
prop: 'buildingNumber',
label: '楼栋号',
align: 'center',
},
{ prop: 'unitNumber', label: '单元数', align: 'center' },
{
prop: 'layerNumber',
label: '最高层数',
align: 'center',
},
{ prop: 'householdNumber', label: '每层户数', align: 'center' },
{
prop: 'houseNum',
label: '实有户数',
align: 'center',
},
{ prop: 'residentNum', label: '实有人口', align: 'center' },
{
prop: 'managerName',
label: '楼栋长名',
align: 'center',
},
{ prop: 'managerPhone', label: '楼栋长联系方式', align: 'center', width: '150' },
{ slot: 'locationStatus' },
{
slot: 'options',
label: '操作',
align: 'center',
},
],
tableData: [],
organizationId: '',
meta: [],
treeData: [],
areaId: '',
communityId: null,
buildingTypeStatus: '',
defaultShowNodes: [],
}
},
computed: {
...mapState(['user']),
param() {
return {
...this.search,
communityId: this.communityId,
areaId: this.user.info?.areaId,
ids: this.ids,
}
},
},
created() {
this.dict.load('BuildLocationStatus').then(() => {
this.getList()
this.getListinfo()
})
},
mounted() {},
methods: {
getListinfo() {
return this.instance.post(`/app/appcommunityinfo/queryCommunityTree?id=${this.user.info?.areaId}`).then((res) => {
if (res.data) {
this.treeData = [res.data]
this.$nextTick(() => {
this.defaultShowNodes = this.treeData[0].id
})
}
})
},
getList() {
this.instance
.post(`/app/appcommunitybuildinginfo/list`, null, {
params: {
...this.page,
...this.search,
communityId: this.communityId,
areaId: this.areaId,
},
})
.then((res) => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
// 添加
onAdd(id) {
this.$emit('change', {
type: 'add',
params: {
id: id || '',
bulidId: this.id,
communityId: this.communityId,
},
})
},
// 房屋信息
toBuildMsg(row) {
this.$emit('change', {
type: 'buildmsg',
params: {
...row,
},
})
},
// 删除
remove(id) {
this.$confirm('确定删除该数据?').then(() => {
this.instance.post(`/app/appcommunitybuildinginfo/delete?ids=${id}`).then((res) => {
if (res.code == 0) {
this.$message.success('删除成功!')
this.getList()
}
})
})
},
removeAll() {
var id = this.ids.join(',')
this.remove(id)
},
handleTreeFilter(v, data) {
return data?.name.indexOf(v) > -1
},
handleSelectGrid(data) {
this.isAdd = false
if (data.type == 1) {
this.isAdd = true
this.communityId = data.id
this.areaId = null
} else if (data.type == 0) {
this.communityId = null
this.areaId = data.id
}
this.getList()
},
},
}
</script>
<style lang="scss" scoped>
.AppPetitionManage {
height: 100%;
.ai-detail {
::v-deep .ai-detail__content {
.ai-detail__content--wrapper {
display: flex;
justify-content: space-between;
height: 100%;
max-width: 100%;
padding: 15px;
.AiTreeMenu {
width: 22%;
}
.flex {
width: 78%;
margin-left: 10px;
padding: 15px;
background-color: #fff;
.ai-search-ba {
margin-top: 10px;
}
.ai-table {
margin-top: 0 !important;
}
}
}
}
}
::v-deep .el-tree {
.el-tree-node__content {
display: inline-flex;
min-width: 100%;
&:hover {
background: #e8efff;
color: #222222;
border-radius: 2px;
}
}
.is-current > .el-tree-node__content {
background: #2266ff;
&:hover {
background: #2266ff;
color: #fff;
}
span {
color: #fff;
font-weight: bold;
}
}
}
}
</style>