You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
366 lines
11 KiB
366 lines
11 KiB
<template>
|
|
<div class="g-main" v-loading="loading">
|
|
<div class="right">
|
|
<!-- <div class="editBtn">
|
|
<el-button
|
|
class="diy-button--add"
|
|
type="primary"
|
|
size="small"
|
|
@click.native="handelClickHouseEdit"
|
|
>编辑</el-button
|
|
>
|
|
</div> -->
|
|
<div class="title-small" id="base">房屋信息</div>
|
|
<el-row type="flex" justify="" class="f-m-top23">
|
|
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">房屋编码：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj">
|
|
{{houseDetailObj.houseCode || "--" }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">房屋类型：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj">
|
|
{{houseDetailObj.houseTypeName || "--" }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">房屋用途：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj">
|
|
{{houseDetailObj.purposeName || "--" }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">房屋状态：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj">
|
|
{{houseDetailObj.rentName || "--" }}
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row type="flex" justify="" class="f-m-top23">
|
|
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">家庭标签：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj.familyTags">
|
|
{{familyTags() }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">房主姓名：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj">
|
|
{{houseDetailObj.ownerName || "--" }}
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">证件号：</div>
|
|
<div class="f-left8 f-font-color">
|
|
{{
|
|
houseDetailObj.ownerIdCard
|
|
? houseDetailObj.ownerIdCard
|
|
: "--"
|
|
}}
|
|
</div>
|
|
<img
|
|
v-show="showFlagIdCardBtn"
|
|
src="@/assets/img/yanjing1.png"
|
|
alt=""
|
|
width="14px"
|
|
style="margin-left: 10px"
|
|
/>
|
|
<img
|
|
v-show="!showFlagIdCardBtn"
|
|
src="@/assets/img/yanjing2.png"
|
|
alt=""
|
|
width="14px"
|
|
style="margin-left: 10px"
|
|
/>
|
|
<el-button
|
|
type="text"
|
|
class="div-table-button--blue"
|
|
size="small"
|
|
@click="handelCLickShowCheckPassword('idCard')"
|
|
>{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button
|
|
>
|
|
</el-col>
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">联系电话：</div>
|
|
<div class="f-left8 f-font-color">
|
|
{{
|
|
houseDetailObj.ownerPhone
|
|
? houseDetailObj.ownerPhone
|
|
: "--"
|
|
}}
|
|
</div>
|
|
<img
|
|
v-show="showFlagMobileBtn"
|
|
src="@/assets/img/yanjing1.png"
|
|
alt=""
|
|
width="14px"
|
|
style="margin-left: 10px"
|
|
/>
|
|
<img
|
|
v-show="!showFlagMobileBtn"
|
|
src="@/assets/img/yanjing2.png"
|
|
alt=""
|
|
width="14px"
|
|
style="margin-left: 10px"
|
|
/>
|
|
<el-button
|
|
type="text"
|
|
class="div-table-button--blue"
|
|
size="small"
|
|
@click="handelCLickShowCheckPassword('mobile')"
|
|
>{{ showFlagMobileBtn ? "显示" : "隐藏" }}</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row type="flex" justify="" class="f-m-top23">
|
|
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">备注：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj">
|
|
{{houseDetailObj.remark || "--" }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">创建时间：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj">
|
|
{{houseDetailObj.createdTime || "--" }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6" class="f-flex">
|
|
<div class="f-label">更新时间：</div>
|
|
<div class="f-left8 f-font-color" v-if="houseDetailObj">
|
|
{{houseDetailObj.updatedTime || "--" }}
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
<div class="title-small">关系图谱
|
|
<el-button type="primary" style="margin-left: 20px;" size="small"
|
|
@click="addResident()">新增居民</el-button>
|
|
</div>
|
|
|
|
<graph
|
|
:houseInfo="houseDetailObj"
|
|
v-if="houseDetailObj"
|
|
/>
|
|
|
|
<div class="title-small" id="businessRecord">业务记录</div>
|
|
<business-record :houseId="houseId"></business-record>
|
|
<div class="title-small" id="updateRecord">更新记录</div>
|
|
<change-record :tableData="houseChangeRecordList"></change-record>
|
|
</div>
|
|
<el-dialog title="密码验证" :visible.sync="showCheckPassword">
|
|
<el-form :model="form" :rules="rules" ref="form">
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input
|
|
v-model="form.password"
|
|
autocomplete="off"
|
|
type="password"
|
|
placeholder="请输入当前账号密码"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="showCheckPassword = false">取 消</el-button>
|
|
<el-button type="primary" @click="handelClickCheckPassword"
|
|
>确 定</el-button
|
|
>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import graph from "./cpts/graph.vue";
|
|
import businessRecord from "./cpts/businessRecord.vue";
|
|
import changeRecord from "./cpts/table/changeRecord.vue";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
checkType: "edit", //edit或者view
|
|
houseChangeRecordList: [], //更新记录
|
|
houseDetailObj: {}, //房屋详情
|
|
showFlagIdCardBtn: true,
|
|
showFlagMobileBtn: true,
|
|
|
|
showCheckPassword: false,
|
|
houseId:"",
|
|
|
|
form: {
|
|
password: "", //脱敏确认密码
|
|
},
|
|
rules: {
|
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
|
},
|
|
familyTagList:[]
|
|
};
|
|
},
|
|
components: { graph, businessRecord, changeRecord },
|
|
created() {
|
|
this.getFamilyTagsDict()
|
|
},
|
|
mounted() {},
|
|
activated() {},
|
|
methods: {
|
|
// 更新记录
|
|
async getChangeRecordDetailById() {
|
|
try {
|
|
const { data } = await this.$http.get(
|
|
`/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=${this.houseId}`
|
|
);
|
|
if (data.data == null) {
|
|
this.houseChangeRecordList = [];
|
|
} else {
|
|
this.houseChangeRecordList = data.data;
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
|
|
getHouseDetail() {
|
|
this.$http
|
|
.post(`/actual/base/communityHouse/getMaskedHouseDeatilById/${this.houseId}`)
|
|
.then(async (res) => {
|
|
if (res.data.code === 0) {
|
|
this.houseDetailObj = res.data.data || {};
|
|
|
|
} else if (res.data.code >= 8000) {
|
|
this.houseDetailObj = {};
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
this.loading = false;
|
|
},
|
|
handelClickHouseEdit() {
|
|
this.checkType = "edit";
|
|
this.showCheckPassword = true;
|
|
},
|
|
|
|
handelCLickShowCheckPassword(type) {
|
|
this.form.password = "";
|
|
this.checkType = "view";
|
|
if (type === "idCard") {
|
|
if (this.showFlagIdCardBtn) {
|
|
this.showCheckPassword = true;
|
|
} else {
|
|
this.showFlagIdCardBtn = true;
|
|
this.$set(
|
|
this.houseDetailObj,
|
|
"ownerIdCard",
|
|
this.houseDetailObj.ownerIdCard.substr(0, 11) +
|
|
"****" +
|
|
this.houseDetailObj.ownerIdCard.substr(16, 2)
|
|
);
|
|
}
|
|
} else if (type === "mobile") {
|
|
if (this.showFlagMobileBtn) {
|
|
this.showCheckPassword = true;
|
|
} else {
|
|
this.showFlagMobileBtn = true;
|
|
this.$set(
|
|
this.houseDetailObj,
|
|
"ownerPhone",
|
|
this.houseDetailObj.ownerPhone.substr(0, 3) +
|
|
"****" +
|
|
this.houseDetailObj.ownerPhone.substr(7, 4)
|
|
);
|
|
}
|
|
}
|
|
this.tuominType = type;
|
|
},
|
|
|
|
handelClickCheckPassword() {
|
|
this.$refs.form.validate((vali) => {
|
|
if (vali) {
|
|
this.handleSaveTuomin(this.form.password);
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
addResident(){
|
|
// this.$router.push({ name: 'add-resi' });
|
|
this.$router.push({
|
|
name: "add-resi",
|
|
params: { agencyId: "1673584241869238273",gridId: "1673585475279826946",villageId:"1673600667388780545",buildId:"1673600667527192577",unitId:"1673600667577524226",homeId:"1673600737530126338"},
|
|
});
|
|
},
|
|
|
|
getFamilyTagsDict(){
|
|
this.$http.post("sys/dict/data/dictlist", {
|
|
dictType: 'family_tag',
|
|
}).then(res=>{
|
|
if(res.data.code === 0){
|
|
this.familyTagList = res.data.data;
|
|
}
|
|
}).catch(err=>{
|
|
console.log(err);
|
|
})
|
|
},
|
|
familyTags(){
|
|
const labels = this.houseDetailObj.familyTags.map(value => {
|
|
const item = this.familyTagList.find(obj => obj.value === value);
|
|
return item ? item.label : null;
|
|
});
|
|
return labels?labels.join('，'):'--';
|
|
},
|
|
async handleSaveTuomin(password) {
|
|
const url = `/actual/base/communityHouse/getClearHouseDeatilById/${this.houseId}`;
|
|
let parm = {
|
|
password,
|
|
};
|
|
const { data, code, msg } = await requestPost(url, parm);
|
|
if (code === 0) {
|
|
if (this.tuominType === "mobile") {
|
|
this.$set(this.houseDetailObj, "ownerPhone", data.ownerPhone);
|
|
this.showFlagMobileBtn = !this.showFlagMobileBtn;
|
|
}
|
|
if (this.tuominType === "idCard") {
|
|
this.$set(this.houseDetailObj, "ownerIdCard", data.ownerIdCard);
|
|
this.showFlagIdCardBtn = !this.showFlagIdCardBtn;
|
|
}
|
|
this.showCheckPassword = false;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
"$store.state.huaXiang.houseInfo.houseId": {
|
|
handler(newValue, oldValue) {
|
|
this.houseId = newValue;
|
|
this.houseDetailObj = {};
|
|
this.houseGraphObj = {};
|
|
|
|
this.getHouseDetail();
|
|
this.getChangeRecordDetailById();
|
|
|
|
this.loading = false;
|
|
},
|
|
deep: true, // 开启深度监听
|
|
immediate: true, // 立即触发一次handler
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/pages/resiInfo.scss";
|
|
@import "@/assets/scss/modules/management/list-main.scss";
|
|
</style>
|
|
|