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.
1167 lines
35 KiB
1167 lines
35 KiB
<template>
|
|
<div class="house-container" :style="handlerWidth" v-show="show">
|
|
<transition>
|
|
<div>
|
|
<div class="house-header">
|
|
<div class="houser-data">
|
|
<div class="house-main-row">
|
|
<div class="house-name">
|
|
<span class="number-font">{{ houseItem.name }}</span>
|
|
（共<span class="number-font"> {{ total }} </span>人）
|
|
</div>
|
|
<div class="house-type">{{ houseData.typename }}</div>
|
|
<ColorCell :item="houseData"
|
|
><span class="house-color">
|
|
{{ houseData.color }}</span
|
|
></ColorCell
|
|
>
|
|
|
|
<div
|
|
class="house-is"
|
|
style="border: 1px solid #81204e; color: #e73388"
|
|
v-show="houseData.isD == 1"
|
|
>
|
|
中共党员
|
|
</div>
|
|
<div
|
|
class="house-is"
|
|
style="border: 1px solid #734700; color: #e09100"
|
|
v-show="houseData.isK == 1"
|
|
>
|
|
帮扶对象
|
|
</div>
|
|
<div
|
|
class="house-is"
|
|
style="border: 1px solid #00694c; color: #00c185"
|
|
v-show="houseData.isX == 1"
|
|
>
|
|
重点人群
|
|
</div>
|
|
<div
|
|
class="house-is"
|
|
style="border: 1px solid #006382; color: #02b4e7"
|
|
v-show="houseData.isJ == 1"
|
|
>
|
|
退伍军人
|
|
</div>
|
|
|
|
<div class="hose-update">
|
|
更新时间：<span class="number-font">{{
|
|
houseData.update_time
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<imageButton
|
|
v-show="houseData.color == 'NO'"
|
|
size="small"
|
|
@handlerClcik="handlerhousEempty()"
|
|
>确认空关</imageButton
|
|
>
|
|
<imageButton
|
|
size="small"
|
|
@handlerClcik="handlerGather()"
|
|
v-hasPermi="['taicangpop:person:add']"
|
|
>房屋信息采集</imageButton
|
|
>
|
|
<imageButton
|
|
size="small"
|
|
@handlerClcik="addPerson()"
|
|
v-hasPermi="['taicangpop:person:add']"
|
|
>添加居民</imageButton
|
|
>
|
|
|
|
<div class="btn-close" @click="handleClose()">关闭</div>
|
|
</div>
|
|
</div>
|
|
<div class="house-address">
|
|
公安地址：{{ publicAddress[houseData.xiaoquId]
|
|
}}{{ houseData.deptname }}{{ houseData.buildingname
|
|
}}{{ houseItem.name }}
|
|
</div>
|
|
</div>
|
|
<div class="house-list" v-if="total > 0">
|
|
<div class="list-item" v-for="item in list" :key="item.id">
|
|
<div class="person-icon">
|
|
<img :src="filterIcon(item.credentialNo)" alt="" />
|
|
<div class="person-name">{{ item.name }}</div>
|
|
</div>
|
|
<div class="person-data">
|
|
<div class="data-row">
|
|
<div class="row-item">
|
|
<div class="row-item-lable">
|
|
性別：{{ filterCarId(item.credentialNo, "性别") }}
|
|
</div>
|
|
<div class="row-item-value"></div>
|
|
</div>
|
|
<div class="row-item">
|
|
<div class="row-item-lable">身份证号：</div>
|
|
<div class="row-item-value">
|
|
{{ item.credentialNo || "-" }}
|
|
</div>
|
|
</div>
|
|
<div class="row-item">
|
|
<div class="row-item-lable">户籍：</div>
|
|
<div
|
|
class="row-item-value"
|
|
:style="{ color: item.type == 1 ? '#00C185' : '#E73388' }"
|
|
>
|
|
{{ item.typename }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-row">
|
|
<div class="row-item">
|
|
<div class="row-item-lable">年龄：</div>
|
|
<div class="row-item-value">
|
|
{{ filterCarId(item.credentialNo, "年龄") }} 岁
|
|
</div>
|
|
</div>
|
|
<div class="row-item">
|
|
<div class="row-item-lable">手机号：</div>
|
|
<div class="row-item-value">{{ item.phone }}</div>
|
|
</div>
|
|
<div class="row-item">
|
|
<div class="row-item-lable">分色：</div>
|
|
<div class="row-item-value">
|
|
<ColorCell :item="item" size="small"
|
|
><span class="house-color">
|
|
{{ item.color }}</span
|
|
></ColorCell
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-row">
|
|
<div class="row-item">
|
|
<div class="row-item-lable">出生年月：</div>
|
|
<div class="row-item-value">
|
|
{{ filterCarId(item.credentialNo, "出生年月") }}
|
|
</div>
|
|
</div>
|
|
<div class="row-item">
|
|
<div class="row-item-lable">数据更新时间：</div>
|
|
<div class="row-item-value" style="color: #ffb82f">
|
|
{{ item.updateTime }}
|
|
</div>
|
|
</div>
|
|
<div class="row-item">
|
|
<div class="row-item-lable">更新人员：</div>
|
|
<div class="row-item-value" style="color: #ffb82f">
|
|
{{ item.updateBy }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-row last-row">
|
|
<div class="is-list">
|
|
<div
|
|
class="row-item-value"
|
|
:style="{
|
|
color: item.color == 'NL' ? '#E73388' : '#00C185',
|
|
}"
|
|
>
|
|
{{ item.color == "NL" ? "租客" : "自住" }}
|
|
</div>
|
|
<div
|
|
class="house-is"
|
|
style="border: 1px solid #81204e; color: #e73388"
|
|
v-show="item.isD == 1"
|
|
>
|
|
中共党员
|
|
</div>
|
|
<div
|
|
class="house-is"
|
|
style="border: 1px solid #734700; color: #e09100"
|
|
v-show="item.isK == 1"
|
|
>
|
|
帮扶对象
|
|
</div>
|
|
<div
|
|
class="house-is"
|
|
style="border: 1px solid #00694c; color: #00c185"
|
|
v-show="item.isX == 1"
|
|
>
|
|
重点人群
|
|
</div>
|
|
<div
|
|
class="house-is"
|
|
style="border: 1px solid #006382; color: #02b4e7"
|
|
v-show="item.isJ == 1"
|
|
>
|
|
退伍军人
|
|
</div>
|
|
</div>
|
|
<div class="row-btn">
|
|
<imageButton
|
|
@handlerClcik="delPerson(item.id)"
|
|
v-hasPermi="['taicangpop:person:remove']"
|
|
>删除</imageButton
|
|
>
|
|
<imageButton
|
|
@handlerClcik="getPersonInfo(item.id)"
|
|
v-hasPermi="['taicangpop:person:edit']"
|
|
>修改</imageButton
|
|
>
|
|
<imageButton @handlerClcik="handlerInfo(item.id)"
|
|
>查看</imageButton
|
|
>
|
|
<imageButton @handlerClcik="lookSocialSecurity(item.id)"
|
|
>查看社保</imageButton
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="no-data">
|
|
<el-empty
|
|
:image="require('@/assets/images/ui/noData.png')"
|
|
description="暂无居民"
|
|
></el-empty>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<!-- 添加修改居民 -->
|
|
<el-dialog
|
|
:visible.sync="open"
|
|
append-to-body
|
|
custom-class="taicang-dialog-small"
|
|
>
|
|
<div class="dialog-main">
|
|
<div class="dialog-title"><span></span> {{ title }}</div>
|
|
<el-form ref="form" :rules="rules" :model="form" label-position="top">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="姓名" prop="name">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="人员类型">
|
|
<el-checkbox-group v-model="multiple">
|
|
<el-checkbox label="中共党员"></el-checkbox>
|
|
<el-checkbox label="帮扶对象"></el-checkbox>
|
|
<el-checkbox label="重点人群"></el-checkbox>
|
|
<el-checkbox label="退伍军人"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<!-- prop="credentialNo" -->
|
|
<el-form-item label="身份证">
|
|
<el-input v-model="form.credentialNo"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="工作单位">
|
|
<el-input v-model="form.workunit"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input v-model="form.phone"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12"> </el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="户籍" prop="color">
|
|
<el-radio-group v-model="form.color">
|
|
<el-radio
|
|
:label="dict.value"
|
|
v-for="dict in dict.type.b_census_color_type"
|
|
:key="dict.value"
|
|
>{{ dict.value }}
|
|
{{
|
|
dict.value == "HZ" ? "（有户口自住）" : "（有户口不住）"
|
|
}}</el-radio
|
|
>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="流动" prop="color">
|
|
<el-radio-group v-model="form.color">
|
|
<el-radio
|
|
:label="dict.value"
|
|
v-for="dict in dict.type.b_flow_color_type"
|
|
:key="dict.value"
|
|
>{{ dict.value }}
|
|
{{
|
|
dict.value == "NZ" ? "（没户口自住）" : "（没户口租客）"
|
|
}}</el-radio
|
|
>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="备注">
|
|
<el-input type="textarea" v-model="form.remark"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="dialog-btn-group">
|
|
<imageButton size="small" @handlerClcik="confirm()"
|
|
>确 定</imageButton
|
|
>
|
|
<imageButton size="small" @handlerClcik="open = false"
|
|
>取 消</imageButton
|
|
>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:visible.sync="openGather"
|
|
append-to-body
|
|
custom-class="taicang-dialog-small"
|
|
>
|
|
<div class="dialog-main">
|
|
<div class="dialog-title">
|
|
<span></span> 房屋信息采集
|
|
<div class="title-lable" style="margin-left: 12px">更新人员：</div>
|
|
<div class="title-value">{{ formGather.updateBy || "-" }}</div>
|
|
|
|
<div class="title-lable">数据更新时间：</div>
|
|
<div class="title-value">{{ formGather.updateTime || "-" }}</div>
|
|
</div>
|
|
<el-form
|
|
ref="formGather"
|
|
:rules="formRules"
|
|
:model="formGather"
|
|
label-position="top"
|
|
>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="社区" prop="sqcjwh">
|
|
<!-- <el-input v-model="formGather.sqcjwh"></el-input> -->
|
|
<el-select v-model="formGather.sqcjwh" placeholder="请选择社区">
|
|
<el-option
|
|
v-for="dict in dictObject.shequ"
|
|
:key="dict.dept_id"
|
|
:label="dict.dept_name"
|
|
:value="dict.dept_name"
|
|
:popper-append-to-body="false"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="填写方式">
|
|
<el-radio-group v-model="writeType">
|
|
<el-radio :label="1">下拉选择</el-radio>
|
|
<el-radio :label="2">人填写</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="房东"
|
|
prop="person_id"
|
|
v-show="writeType == 1"
|
|
>
|
|
<el-select
|
|
v-model="formGather.person_id"
|
|
placeholder="请选择"
|
|
@change="onChange"
|
|
>
|
|
<el-option
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="房东姓名："
|
|
prop="fdxm"
|
|
v-show="writeType == 2"
|
|
>
|
|
<el-input
|
|
v-model="formGather.fdxm"
|
|
placeholder="请输入房东姓名"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="房东电话" prop="fdlxdh">
|
|
<el-input v-model="formGather.fdlxdh"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="房东证件类型" prop="fdzjlx">
|
|
<el-select
|
|
v-model="formGather.fdzjlx"
|
|
placeholder="请选择房东证件类型"
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.bm_czfw_zjlx"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="房东身份证号" prop="fdsfzh">
|
|
<el-input v-model="formGather.fdsfzh"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="房屋类型" prop="fwlx">
|
|
<el-select
|
|
v-model="formGather.fwlx"
|
|
placeholder="请选择房屋类型"
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.bm_fwlx"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="是否群租房" prop="sfqzf">
|
|
<el-radio-group v-model="formGather.sfqzf">
|
|
<el-radio label="1">是</el-radio>
|
|
<el-radio label="0">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="租房类型" prop="zzlx">
|
|
<el-select
|
|
v-model="formGather.zzlx"
|
|
placeholder="请选择租住类型"
|
|
>
|
|
<el-option
|
|
v-for="dict in dict.type.bm_czfw_zzlx"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="出租间数" prop="czjs">
|
|
<el-input v-model="formGather.czjs"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="出租面积" prop="czmj">
|
|
<el-input v-model="formGather.czmj"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="备注" prop="person_information">
|
|
<el-input v-model="formGather.person_information"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="dialog-btn-group">
|
|
<imageButton size="small" @handlerClcik="gatherconfirm()"
|
|
>确 定</imageButton
|
|
>
|
|
<imageButton size="small" @handlerClcik="openGather = false"
|
|
>取 消</imageButton
|
|
>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 查看详情 -->
|
|
<el-dialog
|
|
:visible.sync="openInfo"
|
|
append-to-body
|
|
custom-class="taicang-dialog-small"
|
|
>
|
|
<div class="dialog-main">
|
|
<div class="dialog-title"><span></span> 详情</div>
|
|
<div class="info-container">
|
|
<div class="border-top">社区名称</div>
|
|
<div class="border-top">{{ infoData.shequ_name }}</div>
|
|
<div class="border-top no-left">姓名</div>
|
|
<div class="border-top">{{ infoData.name }}</div>
|
|
<div>小区名称</div>
|
|
<div>{{ infoData.xiaoqu_name }}</div>
|
|
<div class="no-left">身份证号</div>
|
|
<div>{{ infoData.credentialNo }}</div>
|
|
<div>网格名称</div>
|
|
<div>{{ infoData.parentname }}</div>
|
|
<div class="no-left">手机号码</div>
|
|
<div>{{ infoData.phone }}</div>
|
|
<div>苑名称</div>
|
|
<div>{{ infoData.deptname }}</div>
|
|
<div class="no-left">户口类型</div>
|
|
<div>{{ infoData.type == 1 ? "户籍" : "流动" }}</div>
|
|
<div>楼栋名称</div>
|
|
<div>{{ infoData.buildingname }}</div>
|
|
<div class="no-left">分色</div>
|
|
<div>
|
|
<ColorCell :item="infoData"
|
|
><span class="house-color"> {{ infoData.color }}</span></ColorCell
|
|
>
|
|
</div>
|
|
<div>住户名称</div>
|
|
<div>{{ infoData.housename }}</div>
|
|
|
|
<div class="no-left">实际工作单位</div>
|
|
<div>{{ infoData.workunit || "/" }}</div>
|
|
<div>备注</div>
|
|
<div style="flex: 1">{{ infoData.remark || "/" }}</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:visible.sync="sbInfo"
|
|
append-to-body
|
|
custom-class="taicang-dialog-small"
|
|
>
|
|
<div class="dialog-main">
|
|
<div class="dialog-title"><span></span> 社保详情</div>
|
|
<div class="info-container">
|
|
<div class="border-top">参保单位</div>
|
|
<div class="border-top">{{ infoData.qymc || "/" }}</div>
|
|
<div class="no-left border-top">社保联系电话</div>
|
|
<div class="border-top">{{ infoData.lxdh || "/" }}</div>
|
|
<div>参保类型</div>
|
|
<div>
|
|
<dict-tag
|
|
:options="dict.type.sys_sb_type"
|
|
:value="infoData.eacaabbff || '/'"
|
|
/>
|
|
</div>
|
|
<div class="no-left">民族</div>
|
|
<div>
|
|
<dict-tag
|
|
:options="dict.type.sys_nationality"
|
|
:value="infoData.mzcgf || '/'"
|
|
/>
|
|
</div>
|
|
<div>社保联系地址</div>
|
|
<div style="flex: 1">
|
|
{{ infoData.lxdzDzmc || "/" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import { getHouse, updateHouse } from "@/api/taicangpop/house.js";
|
|
import {
|
|
listPerson,
|
|
addPerson,
|
|
updatePerson,
|
|
delPerson,
|
|
getPerson,
|
|
} from "@/api/taicangpop/person.js";
|
|
import { pxToVw, handleColor } from "@/utils/myFuntion.js";
|
|
import ColorCell from "@/components/ColorCell";
|
|
import { validateAndParseIDCard } from "@/utils/myFuntion.js";
|
|
const moment = require("moment");
|
|
import { getCommunitylist } from "@/api/taicangpop/data";
|
|
export default {
|
|
components: { ColorCell },
|
|
dicts: [
|
|
"b_census_color_type",
|
|
"b_flow_color_type",
|
|
"bm_czfw_zjlx",
|
|
"bm_fwlx",
|
|
"bm_czfw_zzlx",
|
|
"sys_nationality",
|
|
"sys_sb_type",
|
|
],
|
|
data() {
|
|
var validateNumber = (rule, value, callback) => {
|
|
console.log("value:" + value);
|
|
if (!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
|
|
callback(new Error("手机号只能为数字！"));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
return {
|
|
publicAddress: {
|
|
202: "滨河路大庆锦绣新城",
|
|
215: "常胜路景瑞荣御蓝湾",
|
|
242: "东仓路星雨华府",
|
|
235: "兰州路华盛六园",
|
|
267: "太平北路森茂汽车城",
|
|
},
|
|
houseData: {},
|
|
form: {
|
|
name: undefined,
|
|
credentialNo: undefined,
|
|
workunit: undefined,
|
|
phone: undefined,
|
|
color: undefined,
|
|
remark: undefined,
|
|
isD: undefined,
|
|
isK: undefined,
|
|
isJ: undefined,
|
|
isX: undefined,
|
|
userId: undefined,
|
|
houseId: undefined,
|
|
buildingId: undefined,
|
|
deptId: undefined,
|
|
},
|
|
rules: {
|
|
name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
|
credentialNo: [
|
|
{ required: true, message: "身份证不能为空", trigger: "blur" },
|
|
],
|
|
phone: [
|
|
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
|
{ validator: validateNumber, trigger: "blur" },
|
|
],
|
|
|
|
color: [{ required: true, message: "分色不能为空", trigger: "change" }],
|
|
},
|
|
|
|
writeType: 1,
|
|
formGather: {
|
|
sqcjwh: undefined, //社区
|
|
person_id: undefined, //房东
|
|
fdxm: undefined, //房东名字
|
|
fdlxdh: undefined, //联系方式
|
|
fdzjlx: undefined, //房东证件类型
|
|
fdsfzh: undefined, //请输入身份证
|
|
fwlx: undefined, //房屋类型
|
|
sfqzf: undefined, //是否群租房
|
|
zzlx: undefined, //租住类型
|
|
czjs: undefined, //出租间数
|
|
czmj: undefined, //出租面积
|
|
person_information: undefined, //备注信息
|
|
},
|
|
formRules: {
|
|
fdsfzh: [
|
|
{ required: true, message: "身份证不能为空", trigger: "blur" },
|
|
],
|
|
},
|
|
multiple: [],
|
|
dictObject: {
|
|
shequ: [],
|
|
},
|
|
title: "",
|
|
openGather: false,
|
|
open: false,
|
|
openInfo: false,
|
|
sbInfo: false,
|
|
infoData: {},
|
|
show: false,
|
|
total: 0,
|
|
list: [],
|
|
};
|
|
},
|
|
watch: {
|
|
houseItem: {
|
|
handler(val) {
|
|
if (!val.id) {
|
|
this.show = false;
|
|
return;
|
|
}
|
|
this.getPersonList();
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(["houseItem", "queryParamsXiaoqu", "userId"]),
|
|
handlerWidth() {
|
|
return {
|
|
width: this.houseItem.buildingWidth + "px",
|
|
zIndex: this.queryParamsXiaoqu.xiaoquId == 267 ? 2007 : 100,
|
|
};
|
|
},
|
|
},
|
|
created() {},
|
|
methods: {
|
|
onChange(val) {
|
|
let checkLabel = this.list.find((item) => {
|
|
return item.id == val;
|
|
});
|
|
this.formGather.fdxm = checkLabel.name;
|
|
},
|
|
gatherconfirm() {
|
|
this.$refs["formGather"].validate((valid) => {
|
|
if (valid) {
|
|
if (this.formGather.id != null) {
|
|
updateHouse(this.formGather).then((response) => {
|
|
this.openGather = false;
|
|
this.getPersonList();
|
|
this.$modal.msgSuccess("采集成功");
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//打开房屋信息采集
|
|
async handlerGather() {
|
|
this.formGather = JSON.parse(JSON.stringify(this.houseData));
|
|
this.dictObject.shequ = await this.getCommunitylist();
|
|
this.openGather = true;
|
|
},
|
|
//获取社区列表
|
|
async getCommunitylist() {
|
|
let res = await getCommunitylist();
|
|
return res.data["社区list集合"];
|
|
},
|
|
reset() {
|
|
this.form = {
|
|
id: null,
|
|
name: undefined,
|
|
credentialNo: undefined,
|
|
workunit: undefined,
|
|
phone: undefined,
|
|
color: undefined,
|
|
remark: undefined,
|
|
isD: undefined,
|
|
isK: undefined,
|
|
isJ: undefined,
|
|
isX: undefined,
|
|
userId: undefined,
|
|
houseId: undefined,
|
|
buildingId: undefined,
|
|
deptId: undefined,
|
|
type: undefined,
|
|
};
|
|
this.multiple = [];
|
|
},
|
|
async handlerInfo(id) {
|
|
this.infoData = await this.getInfo(id);
|
|
this.openInfo = true;
|
|
},
|
|
async getInfo(id) {
|
|
let res = await getPerson(id);
|
|
return handleColor([res.data])[0];
|
|
},
|
|
async lookSocialSecurity(id) {
|
|
this.infoData = await this.getInfo(id);
|
|
this.sbInfo = true;
|
|
},
|
|
handlerhousEempty() {
|
|
let id = this.houseData.id;
|
|
this.$modal
|
|
.confirm('是否确认空关编号为"' + id + '"的数据项？')
|
|
.then(function () {
|
|
return updateHouse({ id: id });
|
|
})
|
|
.then(() => {
|
|
this.$modal.msgSuccess("空关保存成功");
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
async getPersonInfo(id) {
|
|
let res = await getPerson(id);
|
|
this.reset();
|
|
this.title = "修改居民";
|
|
res.data.isD == "1" ? this.multiple.push("中共党员") : "";
|
|
res.data.isJ == "1" ? this.multiple.push("退伍军人") : "";
|
|
res.data.isK == "1" ? this.multiple.push("帮扶对象") : "";
|
|
res.data.isX == "1" ? this.multiple.push("重点人群") : "";
|
|
|
|
this.form = res.data;
|
|
this.open = true;
|
|
},
|
|
delPerson(ids) {
|
|
this.$modal
|
|
.confirm('是否确认删除居民管理编号为"' + ids + '"的数据项？')
|
|
.then(function () {
|
|
return delPerson(ids);
|
|
})
|
|
.then(() => {
|
|
this.getPersonList();
|
|
this.setrefresh(4);
|
|
this.$modal.msgSuccess("删除成功");
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
confirm() {
|
|
this.$refs["form"].validate((valid) => {
|
|
if (valid) {
|
|
this.form.isD = this.multiple.some((item) => item == "中共党员")
|
|
? 1
|
|
: 0;
|
|
this.form.isK = this.multiple.some((item) => item == "帮扶对象")
|
|
? 1
|
|
: 0;
|
|
this.form.isJ = this.multiple.some((item) => item == "退伍军人")
|
|
? 1
|
|
: 0;
|
|
this.form.isX = this.multiple.some((item) => item == "重点人群")
|
|
? 1
|
|
: 0;
|
|
|
|
if (this.form.color == "HZ" || this.form.color == "HO") {
|
|
this.form.type = 1;
|
|
} else {
|
|
this.form.type = 2;
|
|
}
|
|
if (this.form.id != null) {
|
|
updatePerson(this.form).then((response) => {
|
|
this.open = false;
|
|
this.getPersonList();
|
|
this.setrefresh(3);
|
|
this.$modal.msgSuccess("修改成功");
|
|
});
|
|
} else {
|
|
this.form.userId = this.userId;
|
|
this.form.buildingId = this.houseItem.buildingId;
|
|
this.form.houseId = this.houseItem.id;
|
|
this.form.deptId = this.houseItem.deptId;
|
|
addPerson(this.form).then((res) => {
|
|
this.open = false;
|
|
this.getPersonList();
|
|
this.setrefresh(2);
|
|
this.$modal.msgSuccess("新增成功");
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
setrefresh(type) {
|
|
this.$store.commit("SET_REFRESH", type);
|
|
},
|
|
|
|
addPerson() {
|
|
this.reset();
|
|
this.title = "添加居民";
|
|
this.open = true;
|
|
},
|
|
|
|
filterIcon(credentialNo) {
|
|
let sex = validateAndParseIDCard(credentialNo, "性别");
|
|
if (sex == "女") {
|
|
return require("@/assets/images/ui/img_woman@2x.png");
|
|
} else {
|
|
return require("@/assets/images/ui/img_man@2x.png");
|
|
}
|
|
},
|
|
|
|
handleClose() {
|
|
this.show = false;
|
|
if (this.houseItem.sm) {
|
|
this.$store.commit("CHANGE_QUERY", {
|
|
buildingId: undefined,
|
|
}); //存储全局参数
|
|
}
|
|
this.$store.commit("SET_BUILDING_WIDTH", {});
|
|
},
|
|
async getPersonList() {
|
|
let result = await getHouse(this.houseItem.id);
|
|
result.data.update_time = moment(result.data.updateTime).format(
|
|
"YYYY-MM-DD"
|
|
);
|
|
this.houseData = handleColor([result.data])[0];
|
|
|
|
this.getList();
|
|
},
|
|
|
|
async getList() {
|
|
let res = await listPerson({
|
|
buildingId: this.houseItem.buildingId,
|
|
houseId: this.houseItem.id,
|
|
deptId: this.houseItem.deptId,
|
|
});
|
|
this.list = handleColor(res.rows);
|
|
this.total = res.total;
|
|
this.show = true;
|
|
},
|
|
|
|
filterCarId(carId, type) {
|
|
return validateAndParseIDCard(carId, type);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
div {
|
|
font-family: "Alibaba-PuHuiTi-Regular.otf";
|
|
}
|
|
.house-container {
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 75px;
|
|
left: 0;
|
|
height: calc(100% - 75px);
|
|
|
|
& > div {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
overflow-y: auto;
|
|
background: #113666;
|
|
border: 1px solid #2d6cad;
|
|
border-right: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
}
|
|
.house-header {
|
|
.houser-data {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
& > div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
.house-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
|
|
.list-item {
|
|
position: relative;
|
|
height: calc((100% / 4) - 15px);
|
|
border: 1px solid #2468c1;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
.item-key {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
height: 66px;
|
|
width: 66px;
|
|
background: url("~@/assets/images/ui/img_tag_hz@2x.png");
|
|
background-size: 100% 100%;
|
|
font-size: 18px;
|
|
line-height: 40px;
|
|
color: #ffffff;
|
|
text-shadow: 0px 2px 0px rgba(7, 58, 123, 0.5);
|
|
font-family: "BY";
|
|
text-align: right;
|
|
span {
|
|
display: inline-block;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
.person-icon {
|
|
width: 170px;
|
|
height: 100%;
|
|
background: linear-gradient(0deg, #00234e, #003980);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
display: block;
|
|
height: 74px;
|
|
width: 74px;
|
|
}
|
|
.person-name {
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
background: url("~@/assets/images/ui/img_name_bg@2x.png");
|
|
background-size: 100% 100%;
|
|
padding: 3px 20px;
|
|
}
|
|
}
|
|
.person-data {
|
|
flex: 1;
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
background: #004994;
|
|
.data-row,
|
|
.row-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.data-row {
|
|
height: calc(100% / 4);
|
|
font-size: 14px;
|
|
color: #9acfff;
|
|
font-weight: 400;
|
|
// padding: 10px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
.row-item-value {
|
|
color: #fff;
|
|
}
|
|
}
|
|
.data-row > div {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.house-main-row > div {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.house-name,
|
|
.hose-update {
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
}
|
|
.number-font {
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
font-style: italic;
|
|
font-family: "DIN-Medium-2.otf";
|
|
font-weight: bold;
|
|
}
|
|
.last-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border: 0px !important;
|
|
.is-list,
|
|
.row-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.row-btn {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.is-list > div {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.house-is {
|
|
font-size: 14px;
|
|
background: rgba(3, 24, 47, 0.8);
|
|
padding: 0 6px;
|
|
}
|
|
.house-type {
|
|
font-size: 14px;
|
|
color: #00c185;
|
|
}
|
|
.house-color {
|
|
display: inline-block;
|
|
margin-left: 3px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
.btn-group > div {
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
font-size: 14px;
|
|
color: #cdfbff;
|
|
font-weight: 400;
|
|
padding: 7px 12px 10px 12px;
|
|
background: url("~@/assets/images/ui/btn_bg.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
.btn-group > div:last-child {
|
|
background: transparent;
|
|
}
|
|
.house-address {
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
font-family: "Alibaba-PuHuiTi-Regular.otf";
|
|
margin: 3px 0 6px 0;
|
|
}
|
|
.no-data {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* 下面我们会解释这些 class 是做什么的 */
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
height: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
height: 10px;
|
|
width: 1px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::v-deep .el-form-item__label {
|
|
color: #7ff7ff;
|
|
}
|
|
::v-deep .el-form-item__content {
|
|
background: #162841;
|
|
}
|
|
::v-deep .el-checkbox-group {
|
|
padding-left: 10px;
|
|
.el-checkbox__label {
|
|
padding-left: 3px;
|
|
color: #aabace;
|
|
}
|
|
.el-checkbox {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-radio-group {
|
|
padding-left: 10px;
|
|
.el-radio__label {
|
|
padding-left: 3px;
|
|
color: #aabace;
|
|
}
|
|
.el-radio {
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
.title-lable {
|
|
font-size: 15px;
|
|
color: rgb(154, 207, 255);
|
|
margin-left: 6px;
|
|
}
|
|
.title-value {
|
|
font-size: 15px;
|
|
color: rgb(255, 184, 47);
|
|
}
|
|
</style>
|