<template>
|
<div class="population-edit">
|
<div class="nav">
|
<i class="el-icon-arrow-left back" @click="$router.go(-1)"></i>
|
<span>{{ isDetails ? "楼栋修改" : "楼栋详情" }}</span>
|
</div>
|
|
<div class="population-statics">
|
<p>街路巷: {{ floorDetails.alley }}</p>
|
<!-- <p>街路巷: {{floorDetails.alley}}{{floorDetails.name}}栋{{floorDetails.doorNum}}号</p> -->
|
<p>所属小区: {{ floorDetails.villageName }}</p>
|
<p>楼栋号： {{ floorDetails.name }}</p>
|
<p>
|
房屋总户数: {{ floorDetails.houseNum }} <span
|
>自住:{{ floorDetails.liveTotal }}</span
|
><span>出租:{{ floorDetails.leaseTotal }}</span
|
><span>闲置:{{ floorDetails.vacantNum }}</span>
|
</p>
|
<!-- <p v-if="isDetails">
|
所属网格：
|
<el-select size="small" v-model="floorDetails.gridId" placeholder="请输入" style="width:200px" @change="changegrid">
|
<el-option v-for="item in gridList" :key="item.value"
|
:label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</p>
|
<p v-if="!isDetails">所属网格：{{floorDetails.gridName}}</p> -->
|
</div>
|
|
<div class="unit-box">
|
<div class="unit-list">
|
<el-scrollbar>
|
<ul>
|
<li
|
v-for="(unit, index) in unitData"
|
:key="index"
|
:class="index == activeUnit ? 'active' : ''"
|
@click="unitClick(unit.unitNo, index)"
|
>
|
{{ unit.floorString }}{{ unit.unitNoString
|
}}<i
|
v-if="isDetails"
|
class="el-icon-edit-outline m-text"
|
@click.stop="editUnit(unit.unitNo)"
|
></i>
|
</li>
|
</ul>
|
</el-scrollbar>
|
</div>
|
<div class="add-unit" @click="addunit" v-if="isDetails">
|
<img src="../../../assets/image/btn_icon_tianjia.png" />
|
</div>
|
<div style="clear: both"></div>
|
</div>
|
|
<div class="household">
|
<span
|
class="add-hold fl"
|
@click="addHouse"
|
v-if="isDetails && unitData.length"
|
>
|
<i class="el-icon-plus"></i>
|
<p>添加户室</p>
|
</span>
|
<span
|
class="house-lie fl"
|
:class="houseindex == index ? 'activeH' : ''"
|
v-for="(house, index) in housList"
|
:key="index"
|
@click="houseD(house.id, index)"
|
>
|
<p class="top">
|
<span class="lease zz" v-if="house.status == 1">自住</span>
|
<span class="lease cz" v-if="house.status == 2">出租</span>
|
<span class="lease kz" v-if="house.status == 3">其他</span>
|
<span class="lease qt" v-if="house.status == null">为空</span>
|
<span class="num">{{ house.houseNo }}</span>
|
<span
|
class="edit"
|
v-if="isDetails"
|
@click.stop="editRoom(house.buildingNum, house.houseNo, house.id)"
|
><i class="el-icon-edit-outline m-text"></i
|
></span>
|
</p>
|
<p class="resident custom-p">在住居民: {{ house.userNum }}</p>
|
<p class="floor custom-p">楼层数: {{ house.buildingNum }}</p>
|
</span>
|
<div style="clear: both"></div>
|
</div>
|
<!-- 分页 -->
|
<div
|
class="page"
|
v-if="paginationParams.total && paginationParams.total > 20"
|
>
|
<el-pagination
|
:current-page="paginationParams.currentPage"
|
:page-size="paginationParams.pageSize"
|
:page-sizes="[5, 10, 20, 50, 100]"
|
background
|
layout="total,prev,pager,next,sizes,jumper"
|
:total="paginationParams.total"
|
@size-change="onPageSizeChange"
|
@current-change="onPaginationChange"
|
>
|
</el-pagination>
|
</div>
|
|
<div class="house-information" v-if="isHouseInfo">
|
<div class="owner">
|
<p class="title">
|
房屋所有人(业主)信息：
|
<!-- <span>添加</span> -->
|
</p>
|
<div v-if="houseDetails.householderList">
|
<div
|
class="lie"
|
v-for="(owner, index) in houseDetails.householderList"
|
:key="index"
|
>
|
<div>
|
<span class="tag yz">业主</span>
|
<div class="msg">
|
<span>{{ owner.name }}</span>
|
<span>{{ owner.cardNo }}</span>
|
<span>{{ owner.sex == 1 ? "男" : "女" }}</span>
|
<span>{{ owner.age }}岁</span>
|
<span>{{ owner.phone }}</span>
|
<span v-if="owner.politicalOutlook">{{
|
politicalOutlookList[owner.politicalOutlook]
|
}}</span>
|
<span>{{ owner.label }}</span>
|
</div>
|
<span
|
v-if="isDetails"
|
class="delete"
|
@click="deleteowner(houseDetails.id, owner.id, 1)"
|
>删除</span
|
>
|
</div>
|
</div>
|
</div>
|
<div v-else class="no-data">暂无业主信息</div>
|
</div>
|
|
<div class="owner">
|
<p class="title">
|
居住人（业主家属、租户）：
|
<!-- <span class="tj">添加</span> -->
|
</p>
|
<div v-if="houseDetails.populationList">
|
<div
|
class="lie"
|
v-for="(people, index) in houseDetails.populationList"
|
:key="index"
|
>
|
<div>
|
<span v-if="people.relationId == '1' || '2' || '3'">
|
<span class="tag yz" v-if="people.relationId == '1'">业主</span>
|
<span class="tag js" v-if="people.relationId == '2'"
|
>业主家属</span
|
>
|
<span class="tag hz" v-if="people.relationId == '3'">租户</span>
|
</span>
|
<span class="tag hz" v-else>其他</span>
|
<div class="msg">
|
<span>{{ people.name }}</span>
|
<span>{{ people.cardNo }}</span>
|
<span>{{ people.sex == 1 ? "男" : "女" }}</span>
|
<span>{{ people.age }}岁</span>
|
<span>{{ people.phone }}</span>
|
<span v-if="people.politicalOutlook">{{
|
politicalOutlookList[people.politicalOutlook]
|
}}</span>
|
<span>{{ people.label }}</span>
|
</div>
|
<span
|
class="delete"
|
v-if="isDetails"
|
@click="deleteowner(houseDetails.id, people.id, 2)"
|
>删除</span
|
>
|
</div>
|
</div>
|
</div>
|
<div v-else class="no-data">暂无居住人信息</div>
|
</div>
|
</div>
|
|
<!-- 添加/修改户室 -->
|
<el-dialog
|
:title="houseId ? '修改户室' : '添加户室'"
|
:visible.sync="roomVisible"
|
width="30%"
|
:modal="false"
|
center
|
:show-close="false"
|
>
|
<el-form
|
:model="room"
|
status-icon
|
:rules="rules"
|
ref="room"
|
label-width="100px"
|
class="room"
|
>
|
<el-form-item label="门牌号" prop="houseNo">
|
<el-input
|
v-model.number="room.houseNo"
|
maxlength="5"
|
show-word-limit
|
></el-input>
|
</el-form-item>
|
<el-form-item label="楼层数" prop="floorNum">
|
<el-input v-model.number="room.floorNum"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="roomCancel('room')">取 消</el-button>
|
<el-button type="primary" @click="roomSure('room')">确 定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
<!-- 添加、修改单元号 -->
|
<el-dialog
|
:title="oldunit ? '修改单元' : '添加单元'"
|
:visible.sync="unitVisible"
|
width="30%"
|
:modal="false"
|
center
|
:show-close="false"
|
>
|
<el-form
|
:model="unit"
|
status-icon
|
:rules="rules"
|
ref="unit"
|
label-width="100px"
|
class="unit"
|
>
|
<el-form-item label="单元号" prop="unitNo">
|
<el-input
|
type="text"
|
v-model.number="unit.unitNo"
|
maxlength="4"
|
show-word-limit
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="resetunit('unit')">取 消</el-button>
|
<el-button type="primary" @click="subunit('unit')">确 定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import { watermark, removewatermark } from "../../../utils/watermark";
|
import { getPhoneEncty, getCardEncty } from "../../../utils/common";
|
export default {
|
destroyed() {
|
removewatermark();
|
},
|
data() {
|
return {
|
roomVisible: false,
|
unitVisible: false,
|
isHouseInfo: false,
|
id: "",
|
unitId: "",
|
unitNo: "",
|
floorDetails: [],
|
unitData: [],
|
housList: [],
|
houseDetails: [],
|
activeUnit: "0",
|
gridList: [],
|
room: {
|
houseNo: "",
|
floorNum: "",
|
},
|
unit: {
|
unitNo: "",
|
},
|
houseindex: "0",
|
oldunit: "",
|
rules: {
|
unitNo: [
|
{ required: true, message: "单元号不能为空" },
|
{ type: "number", message: "单元号必须为数字值" },
|
],
|
houseNo: [
|
{ required: true, message: "门牌号不能为空" },
|
{ type: "number", message: "门牌号必须为数字值" },
|
],
|
floorNum: [
|
{ required: true, message: "楼层数不能为空" },
|
{ type: "number", message: "楼层数必须为数字值" },
|
],
|
},
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 20,
|
total: 0,
|
},
|
politicalOutlookList: [
|
"",
|
"中共党员",
|
"中共预备党员",
|
"共青团员",
|
"民革党员",
|
"民盟盟员",
|
"民建会员",
|
"",
|
"农工党党员",
|
"致公党党员",
|
"九三学社社员",
|
"台盟盟员",
|
"无党派人士",
|
"群众",
|
],
|
houseId: "",
|
isDetails: true,
|
};
|
},
|
|
mounted() {
|
const USER_INFO = demo.$session.get("user");
|
watermark({
|
watermark_txt: `${USER_INFO.title}-“${USER_INFO.account} ${USER_INFO.name}”`,
|
});
|
this.id = this.$route.query.id;
|
if (this.$route.query.type == "details") {
|
this.isDetails = false;
|
} else {
|
this.isDetails = true;
|
}
|
this.getdetails();
|
this.unitList();
|
this.getgridList();
|
},
|
|
methods: {
|
changegrid() {
|
this.$api.get(
|
"building/detail",
|
{ id: this.floorDetails.gridId },
|
(e) => {
|
demo.toast("网格修改成功");
|
}
|
);
|
},
|
getgridList() {
|
this.$api.get("screen/event/grids", { communityId: 2 }, (e) => {
|
this.gridList = e.data.map((d) => {
|
return {
|
label: d.gridName,
|
value: d.id.toString(),
|
};
|
});
|
});
|
},
|
|
unitClick(unit, index) {
|
this.activeUnit = index;
|
this.unitNo = unit;
|
this.paginationParams.currentPage = 1;
|
this.getHouseList();
|
this.houseDetails = [];
|
},
|
|
/** 楼栋详情 */
|
getdetails() {
|
this.$api.get("building/detail", { id: this.id }, (e) => {
|
this.floorDetails = e;
|
this.floorDetails.gridId = e.gridId.toString();
|
console.log(typeof this.floorDetails.gridId);
|
});
|
},
|
|
/** 单元列表 */
|
unitList() {
|
this.$api.get("building/unit/list", { id: this.id }, (e) => {
|
this.unitData = e;
|
this.unitNo = e[0].unitNo;
|
this.getHouseList();
|
});
|
},
|
|
/**查询单元下房屋列表 */
|
getHouseList() {
|
let params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
id: this.id,
|
unit: this.unitNo,
|
};
|
this.$api.post("building/unit/house/list", params, (e) => {
|
this.housList = e.houseList;
|
this.paginationParams.total = e.houseNum;
|
if (e.houseList) {
|
this.houseD(e.houseList[0].id, 0);
|
}
|
});
|
},
|
|
houseD(id, index) {
|
(this.houseindex = index),
|
this.$api.get("building/unit/house/detail", { houseId: id }, (e) => {
|
console.log(e);
|
e.householderList = e.householderList || [];
|
e.populationList = e.populationList || [];
|
e.householderList.forEach((item) => {
|
item.cardNo = getCardEncty(item.cardNo);
|
item.phone = getPhoneEncty(item.phone);
|
});
|
e.populationList.forEach((item) => {
|
item.cardNo = getCardEncty(item.cardNo);
|
item.phone = getPhoneEncty(item.phone);
|
});
|
this.houseDetails = e;
|
this.isHouseInfo = true;
|
});
|
},
|
|
subunit(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
if (this.unit.unitNo < 0) {
|
return demo.toast("单元号不能小于0");
|
}
|
this.addUnit();
|
} else {
|
return false;
|
}
|
});
|
},
|
|
roomSure(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
if (this.room.houseNo < 0) {
|
return demo.toast("门牌号不能小于0");
|
}
|
this.addRoom();
|
} else {
|
return false;
|
}
|
});
|
},
|
|
/** 添加单元
|
* id：楼栋id unitNo:单元号
|
* 修改单元 newUnitNo：新单元号 oldUnitNo：旧单元号
|
*/
|
addUnit() {
|
if (this.oldunit) {
|
let e = {
|
id: this.id,
|
newUnitNo: this.unit.unitNo,
|
oldUnitNo: this.oldunit,
|
};
|
this.$api.post("building/edit/unit", e, (e) => {
|
demo.toast("修改成功");
|
this.unitVisible = false;
|
this.unitList();
|
});
|
} else {
|
let params = {
|
id: this.id,
|
unitNo: this.unit.unitNo,
|
};
|
this.$api.post("building/add/unit", params, (e) => {
|
demo.toast("添加成功");
|
this.unitVisible = false;
|
this.unitList();
|
this.getdetails();
|
});
|
}
|
},
|
|
/** 添加 /修改 户室 */
|
addRoom() {
|
if (this.houseId) {
|
let e = {
|
houseId: this.houseId,
|
floorNum: this.room.floorNum,
|
houseNo: this.room.houseNo,
|
};
|
this.$api.post("building/edit/house", e, (e) => {
|
demo.toast("修改成功");
|
this.roomVisible = false;
|
this.getHouseList();
|
});
|
} else {
|
let e = {
|
id: this.id,
|
floorNum: this.room.floorNum,
|
houseNo: this.room.houseNo,
|
unitNo: this.unitNo,
|
};
|
this.$api.post("building/add/house", e, (e) => {
|
demo.toast("添加成功");
|
this.roomVisible = false;
|
this.getHouseList();
|
});
|
}
|
},
|
|
/** pageSize 改变时会触发 */
|
onPageSizeChange(pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.getHouseList();
|
},
|
|
/** 分页 */
|
onPaginationChange(page) {
|
this.paginationParams.currentPage = page;
|
this.getHouseList();
|
},
|
|
/**添加单元 */
|
addunit() {
|
this.unit.unitNo = "";
|
this.oldunit = "";
|
this.unitVisible = true;
|
},
|
|
resetunit(formName) {
|
this.unitVisible = false;
|
this.$refs[formName].resetFields();
|
},
|
|
roomCancel(formName) {
|
this.roomVisible = false;
|
this.$refs[formName].resetFields();
|
},
|
|
/** 删除户主 */
|
deleteowner(houseid, ownerid, type) {
|
let params = {
|
houseId: houseid,
|
populationId: ownerid,
|
type: type,
|
};
|
|
this.$api.post("building/delete/population", params, (e) => {
|
demo.toast("删除成功");
|
console.log(houseid);
|
this.houseD(houseid, this.houseindex);
|
});
|
},
|
|
/** 修改单元 */
|
editUnit(unitNO) {
|
this.unit.unitNo = +unitNO;
|
this.oldunit = +unitNO;
|
this.unitVisible = true;
|
},
|
|
/**添加户室 */
|
addHouse() {
|
(this.room.floorNum = ""),
|
(this.room.houseNo = ""),
|
(this.houseId = ""),
|
(this.roomVisible = true);
|
},
|
|
/** 修改户室 */
|
editRoom(floorNum, houseNo, id) {
|
(this.room.floorNum = +floorNum),
|
(this.room.houseNo = +houseNo),
|
(this.houseId = id),
|
(this.roomVisible = true);
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.population-edit {
|
overflow: scroll;
|
.nav {
|
padding: 20px 0;
|
.back {
|
font-size: 22px;
|
cursor: pointer;
|
}
|
span {
|
font-size: 22px;
|
font-weight: 400;
|
color: #000000;
|
}
|
}
|
.population-statics {
|
font-size: 16px;
|
font-weight: 400;
|
color: #000000;
|
line-height: 28px;
|
span {
|
padding-right: 10px;
|
}
|
}
|
.unit-box {
|
position: relative;
|
.unit-list {
|
float: left;
|
}
|
.add-unit {
|
float: right;
|
width: 29px;
|
height: 29px;
|
position: relative;
|
top: 22px;
|
cursor: pointer;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
.unit-list {
|
width: 95%;
|
padding: 17px 0 8px 0;
|
/deep/.el-scrollbar__view {
|
overflow-x: auto;
|
}
|
ul {
|
display: flex;
|
padding-bottom: 10px;
|
li {
|
flex-shrink: 0;
|
width: 126px;
|
height: 35px;
|
border: 1px #3388ff solid;
|
color: #3388ff;
|
border-radius: 8px;
|
display: inline-block;
|
text-align: center;
|
line-height: 35px;
|
cursor: pointer;
|
float: left;
|
margin-right: 15px;
|
.m-text {
|
margin-left: 15px;
|
cursor: pointer;
|
}
|
}
|
.active {
|
background: #3388ff;
|
color: #fff;
|
}
|
}
|
}
|
.household {
|
padding-top: 17px;
|
.fl {
|
float: left;
|
margin-right: 19px;
|
margin-bottom: 19px;
|
}
|
.add-hold {
|
width: 117px;
|
height: 83px;
|
background: #ffffff;
|
border-radius: 3px;
|
border: 1px solid #898989;
|
display: inline-block;
|
text-align: center;
|
font-weight: 400;
|
color: #000000;
|
line-height: 12px;
|
i {
|
color: #3d8ef2;
|
font-weight: bold;
|
font-size: 23px;
|
padding: 17px 0 8px 0;
|
}
|
}
|
.house-lie:hover {
|
box-shadow: #ccc 0px 10px 10px;
|
}
|
.activeH {
|
border: 1px #0091ff solid !important;
|
background-color: rgba(0, 145, 255, 0.05) !important;
|
}
|
.house-lie {
|
width: 130px;
|
height: 83px;
|
background: #ffffff;
|
border-radius: 3px;
|
border: 1px solid #898989;
|
display: inline-block;
|
cursor: pointer;
|
.top {
|
padding: 5px 0;
|
}
|
.lease {
|
color: #fff;
|
font-size: 12px;
|
writing-mode: vertical-lr;
|
padding: 2px 3px;
|
margin: 2px 5px;
|
}
|
.zz {
|
background: #0091ff;
|
}
|
.cz {
|
background: #ff4d4f;
|
}
|
.qt {
|
background: #6d7278;
|
}
|
.kz {
|
background: #44d7b6;
|
}
|
.num {
|
font-size: 26px;
|
color: #000000;
|
line-height: 27px;
|
font-weight: 500;
|
position: relative;
|
top: -3px;
|
left: -2px;
|
}
|
.edit {
|
font-size: 19px;
|
color: #000000;
|
position: relative;
|
top: -5px;
|
margin-left: 5px;
|
}
|
.custom-p {
|
color: #6d7278;
|
font-size: 14px;
|
padding-bottom: 5px;
|
padding-left: 5px;
|
}
|
}
|
}
|
.page {
|
text-align: center;
|
padding: 20px 0;
|
}
|
.house-information {
|
width: 98%;
|
background: #ffffff;
|
box-shadow: 2px 2px 6px 2px rgba(115, 116, 117, 0.26);
|
border-radius: 3px;
|
border: 1px solid #3388ff;
|
padding: 15px 15px;
|
margin-top: 30px;
|
.owner:first-child {
|
margin-bottom: 20px;
|
}
|
.owner {
|
.title {
|
font-size: 15px;
|
font-weight: bold;
|
color: #000000;
|
span {
|
color: #2193ff;
|
margin-left: 150px;
|
cursor: pointer;
|
}
|
.tj {
|
margin-left: 117px !important;
|
}
|
}
|
.no-data {
|
padding-top: 20px;
|
color: #666;
|
}
|
}
|
.lie {
|
padding: 9px 0;
|
.tag {
|
border-radius: 3px;
|
font-size: 12px;
|
float: left;
|
margin-right: 23px;
|
padding: 2px 3px;
|
}
|
.yz {
|
border: 1px solid #3d8ef2;
|
color: #3d8ef2;
|
}
|
.hz {
|
border: 1px solid #ff4d4f;
|
color: #ff4d4f;
|
}
|
.js {
|
border: 1px solid #f7b500;
|
color: #f7b500;
|
}
|
.msg {
|
width: 480px;
|
span {
|
font-size: 14px;
|
color: #000;
|
margin-right: 5px;
|
}
|
}
|
.delete {
|
color: #3d8ef2;
|
margin-left: 100px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
