<template>
|
<div class='man_pop' >
|
<!-- <v-header-->
|
<!-- title="实有人口"-->
|
<!-- :bar="bar"-->
|
<!-- search-->
|
<!-- @on-search="onSearch"-->
|
<!-- ></v-header>-->
|
<h1 class="h1">居民信息管理</h1>
|
<Statistics :list="list"></Statistics>
|
<div class="head-box">
|
<el-form :inline="true" ref="form" :model="bar" class="demo-form-inline">
|
<el-form-item label="姓名">
|
<el-input size="small" v-model="bar.name" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证">
|
<el-input size="small" v-model="bar.cardNo" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="人员标签">
|
<el-input size="small" v-model="bar.label" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="性别">
|
<el-select size="small" v-model="bar.sex" placeholder="请输入">
|
<el-option v-for="item in sex" :key="item.value"
|
:label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="民族">
|
<el-select size="small" v-model="bar.nation" placeholder="请输入">
|
<el-option v-for="item in nation" :key="item.value"
|
:label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="政治面貌">
|
<el-select size="small" v-model="bar.politicalOutlook" placeholder="请输入">
|
<el-option v-for="item in politicalOutlook" :key="item.value"
|
:label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="籍贯">
|
<el-input size="small" v-model="bar.nativePlace" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="年龄">
|
<el-input style="width: 100px" size="small" v-model="bar.ageStart"placeholder="请输入"></el-input>
|
~
|
<el-input style="width: 100px" size="small" v-model="bar.ageEnd"placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="本地外地">
|
<el-select size="small" v-model="bar.outOrLocal" placeholder="请输入">
|
<el-option v-for="item in outOrLocal" :key="item.value"
|
:label="item.label" :value="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="居住地址">
|
<el-cascader size="small"
|
ref="cascader"
|
@change="cascader"
|
:options="options"
|
v-model="bar.address1"
|
:props="props"></el-cascader>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch()">查询</el-button>
|
<el-button @click="resetForm" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="add">
|
<el-button
|
@click="setDialogVisible1"
|
size="small"
|
>导入</el-button>
|
<el-button
|
@click="Change =!Change"
|
size="small"
|
>批量操作</el-button>
|
<!-- listareas-->
|
<el-button
|
type="primary"
|
@click="exportuser"
|
size="small"
|
>下载模板
|
</el-button>
|
<el-button
|
type="primary"
|
size="small"
|
@click="Export"
|
>
|
{{ChangeList.length!=0?'选择导出':'导出'}}
|
</el-button>
|
</div>
|
<div
|
class="Tips"
|
v-show="Change"
|
>
|
<i
|
style="color: #409EFF"
|
class="el-icon-info"
|
></i>
|
<div class="Tips-cont">已选择<span>{{ChangeList.length}}</span>项</div>
|
<el-button
|
type="text"
|
@click="clear()"
|
>批量删除</el-button>
|
<el-button
|
type="text"
|
@click="cancel"
|
>取消</el-button>
|
</div>
|
<div class="tab">
|
<v-table
|
:trs="trs"
|
:tds="tds"
|
ref="table"
|
sel
|
@handleSelectionChange="handleSelectionChange"
|
>
|
<template v-slot:sex="{scope}">
|
{{ ['','男','女','未知'][scope.sex]}}
|
</template>
|
<template v-slot:politicalOutlook="{scope}">
|
{{scope.politicalOutlookName}}
|
<!-- {{politicalOutlookList[scope.politicalOutlook]}} -->
|
</template>
|
<template v-slot:outOrLocal="{scope}">
|
{{scope.outOrLocal?scope.outOrLocal===1?'本地':'外地':''}}
|
</template>
|
<template v-slot:cultureLevel="{scope}">
|
{{scope.cultureLevelName}}
|
</template>
|
<template v-slot:marriageText="{scope}">
|
{{scope.marriageText}}
|
</template>
|
<template v-slot:btn="{scope}">
|
<el-button
|
@click="edit(scope)"
|
type="text"
|
>编辑</el-button>
|
<el-button
|
@click="clear(scope.id)"
|
type="text"
|
>删除</el-button>
|
<el-button
|
@click.stop="onDetail(scope.id)"
|
type="text"
|
>查看详情</el-button>
|
</template>
|
</v-table>
|
</div>
|
<v-tool-page
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
<!--导入-->
|
<el-dialog
|
title="导入"
|
:modal="false"
|
:close-on-click-modal="false"
|
:visible.sync="dialogVisible1"
|
width=""
|
>
|
<span>
|
<el-upload
|
name="file"
|
v-loading="loading"
|
accept=".xls, .xlsx"
|
:headers={Authorization:Authorization}
|
class="upload-demo"
|
:show-file-list="false"
|
:action="$js.api.http+'common/data/population/serve/import'"
|
:on-success="success"
|
:before-upload="beforeUpload"
|
:on-error="error"
|
multiple
|
>
|
<el-button size="small">导入</el-button>
|
</el-upload>
|
<!-- 导入错误按钮 -->
|
<el-button style="margin-top: 10px" type="danger" size="mini" v-if="errUrl" @click="dowErr">下载错误表格</el-button>
|
</span>
|
|
<span
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button
|
type="primary"
|
@click="imp"
|
>确 定</el-button>
|
</span>
|
</el-dialog>
|
<!---->
|
<el-dialog
|
title="下载模板"
|
:modal="false"
|
:close-on-click-modal="false"
|
:visible.sync="centerDialogVisible"
|
width="30%"
|
center
|
>
|
<div class="dialog-box">
|
<div style="max-width:600px">
|
<el-select
|
v-model="value"
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in options"
|
pageuser
|
:key="item.id"
|
:label="item.areaName"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div
|
@click="quarters"
|
class="text-link"
|
>小区管理</div>
|
</div>
|
<span
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="exportuser()"
|
>确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
let id = 0;
|
import { mapState } from "vuex";
|
import list from "@/assets/js/nation.js"; //56民族
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
list:[
|
{
|
key:'localTotal',
|
name:'本地人口',
|
num:0,
|
Company:'人'
|
},
|
{
|
key:'outTotal',
|
name:'外地人口',
|
num:0,
|
Company:'人'
|
},
|
{
|
key:'populationTotal',
|
name:'人口总数',
|
num:0,
|
Company:'人'
|
},
|
{
|
key:'specialTotal',
|
name:'特殊群体',
|
num:0,
|
Company:'人'
|
}
|
],
|
relation: [
|
// "",
|
// { name: "户主", value: 1 },
|
// { name: "配偶", value: 2 },
|
// { name: "子女", value: 3 },
|
// { name: "孙女", value: 4 },
|
// { name: "父母", value: 5 },
|
// { name: "其他", value: 6 },
|
],
|
cultureLevel: [
|
"",
|
{ name: "小学", value: 1 },
|
{ name: "初中", value: 2 },
|
{ name: "高中", value: 3 },
|
{
|
name: "中专",
|
value: 4,
|
},
|
{ name: "大专", value: 5 },
|
{ name: "本科", value: 6 },
|
{ name: "硕士", value: 7 },
|
{ name: "博士", value: 8 },
|
{
|
name: "其他",
|
value: 9,
|
},
|
],
|
marriage: [
|
{ name: "未婚", value: 10 },
|
{ name: "已婚", value: 20 },
|
{ name: "初婚", value: 21 },
|
{ name: "再婚", value: 22 },
|
{ name: "复婚", value: 23 },
|
{ name: "丧偶", value: 30 },
|
{ name: "离婚", value: 40 },
|
{ name: "未说明", value: 90 },
|
],
|
centerDialogVisible: false,
|
centerDialogVisible1: false,
|
dialogVisible1: false,
|
Authorization: "",
|
msg: "",
|
msgList: [], //
|
Change: false,
|
ChangeList: [], // 选中
|
value: "", //小区选择
|
politicalOutlookList: [
|
"",
|
"中共党员",
|
"中共预备党员",
|
"共青团员",
|
"民革党员",
|
"民盟盟员",
|
"民建会员",
|
"农工党党员",
|
"农工党党员",
|
"致公党党员",
|
"九三学社社员",
|
"台盟盟员",
|
"无党派人士",
|
"群众",
|
],
|
sex:[
|
{ value: 1, label: "男" },
|
{ value: 2, label: "女" },
|
{ value: 3, label: "未知" },
|
],
|
politicalOutlook:[
|
// { value: 1, label: "中共党员" },
|
// { value: 3, label: "共青团员" },
|
// { value: 13, label: "群众" },
|
],
|
nation:list,
|
outOrLocal:[
|
{ value: 1, label: "本地" },
|
{ value: 2, label: "外地" },
|
],
|
options:[],
|
props:{//Cascader 级联选择器
|
label:'name',
|
value:'id',
|
lazy:true,
|
lazyLoad:(node, resolve)=>{
|
//动态加载
|
let {level,value,data} = node
|
if(level===0){
|
return
|
}
|
// debugger
|
let data1 = {
|
level:level+1,
|
houseId:data.houseId||'',
|
}
|
this.$api.post('common/data/population/cascade/list',data1,e=>{
|
let list = []
|
e.map(item=>{
|
list.push({
|
name:item.name,
|
id:++id,
|
houseId:item.houseId,
|
leaf:level >= 4//第5级为子节点
|
})
|
})
|
list.unshift({
|
houseId:data.houseId||'',
|
id:++id,
|
name:'全部',
|
leaf:true
|
})
|
resolve(list)
|
})
|
}
|
},
|
bar:{
|
name:'',
|
cardNo:'',
|
label:'',
|
sex:'',
|
nation:'',
|
address1:'',
|
politicalOutlook:'',
|
nativePlace:'',
|
ageStart:'',
|
ageEnd:'',
|
outOrLocal:'',
|
},
|
ageList: [],
|
trs: [
|
{ text: "姓名", val: "name", width: "100px" },
|
{ text: "身份证号", val: "cardNo" ,width: "200px"},
|
{ text: "人员标签", val: "label",width: "200px" },
|
{ text: "居住地址", val: "address",width: "200px" },
|
{ text: "性别", val: "btn", slot: "sex",width: "80px" },
|
{ text: "民族", val: "nation" ,width: "80px"},
|
{ text: "政治面貌", val: "btn", slot: "politicalOutlook",width: "150px" },
|
{ text: "出生年月", val: "birthday",width: "110px" },
|
{ text: "年龄", val: "age",width: "110px" },
|
{ text: "联系方式", val: "phone",width: "110px" },
|
{ text: "籍贯", val: "nativePlace",width: "110px" },
|
{ text: "本地外地", val: "btn",slot:'outOrLocal',width: "110px" },
|
{ text: "户口所在地", val: "censusRegister",width: "110px" },
|
{ text: "文化程度", val: "btn",slot:'cultureLevel',width: "110px" },
|
// { text: "与户主关系", val: "btn",slot:'relation',width: "110px" },
|
{ text: "婚姻状况", val: "btn",slot:'marriageText',width: "110px" },
|
{ text: "健康状况", val: "healthy",width: "110px" },
|
{ text: "工作单位", val: "workCompany",width: "110px" },
|
{ text: "更新时间", val: "updateAt",width: "200px" },
|
{ text: "操作", val: "btn",width:"250px", fixed:'right'},
|
],
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
os: {},
|
search: {},
|
errUrl:'',
|
loading:false
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.paged.page = 1;
|
this.init();
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
cascader(e){
|
let houseId = this.$refs.cascader.getCheckedNodes()
|
this.bar.houseId = houseId[0].data.houseId
|
// console.log(node)
|
},
|
cascadeList(){
|
//房屋级联菜单查询
|
let data = {
|
level:1,
|
houseId:''
|
}
|
this.$api.post('common/data/population/cascade/list',data,e=>{
|
// console.log(e)
|
let list = []
|
e.map(item=>{
|
list.push({
|
id:++id,
|
houseId:item.houseId,
|
name:item.name
|
})
|
})
|
this.options= list
|
})
|
},
|
statistics(){
|
//
|
this.$api.post('common/data/population/statistics','',e=>{
|
let o = e
|
this.list.map(item=>{
|
for(let key in o){
|
if(item.key===key){
|
item.num = o[key]
|
}
|
}
|
})
|
})
|
},
|
edit(item) {
|
this.$router.push({
|
path: "/man_user_edit",
|
query: { item: JSON.stringify(item) },
|
});
|
},
|
onCard(v) {
|
this.$api.post(
|
"common/data/population/electronicArchives?populationId=" + v.id,
|
{ populationId: v.id },
|
(e) => {
|
if (demo._is_obj(e).code !== 6) {
|
return demo.toast("暂无TA的档案信息");
|
}
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: { data: { type: this.$route.name, v: e }, type: "user-card" },
|
time: Date.now(),
|
});
|
}
|
);
|
},
|
cancel() {
|
//取消
|
this.$refs.multipleTable.clearSelection();
|
this.Change = false;
|
},
|
beforeUpload(){
|
//上传前
|
this.loading =true
|
this.msg = "导入中";
|
},
|
success(e, file) {
|
//导入成功
|
this.loading =false
|
if (e.code !== 200) {
|
this.errUrl = e.msg
|
} else {
|
this.msg = "导入成功";
|
this.errUrl = ''
|
}
|
},
|
setDialogVisible1(){
|
//外层 点击导入按钮
|
this.msg = "";
|
this.msgList = []
|
this.dialogVisible1 = true;
|
this.errUrl = ''
|
},
|
imp() {
|
this.msg = "";
|
this.msgList = [];
|
this.dialogVisible1 = false;
|
this.init();
|
},
|
error(err) {
|
this.loading =false
|
demo.toast("导入失败");
|
// console.log(err)
|
},
|
handleSelectionChange(e) {
|
this.ChangeList = e;
|
},
|
Export() {
|
//导出
|
let list = [];
|
this.ChangeList.map((item) => {
|
list.push(item.id);
|
});
|
this.$api.post("common/data/population/data/export", list, (e) => {
|
location.href = e;
|
});
|
},
|
listareas() {
|
//选择导入小区
|
this.centerDialogVisible = true;
|
this.$api.get("communitymanager/listareas", "", (e) => {
|
this.options = e;
|
});
|
},
|
exportuser() {
|
//下载模板
|
// if (this.value == '') {
|
// return demo.toast("请选择小区");
|
// }
|
this.$api.get("common/data/population/export", {}, (e) => {
|
console.log(e);
|
location.href = e;
|
this.centerDialogVisible = false;
|
});
|
},
|
dowErr(){
|
//下载错误i
|
let data = {
|
key:this.errUrl
|
}
|
return
|
this.$api.post('common/data/population/download/error/population?key='+this.errUrl,'',e=>{
|
// console.log(e)
|
location.href = e
|
})
|
},
|
quarters() {
|
//去小区管理
|
this.$router.push({ path: this.$nav.url("/man_bui_village") });
|
},
|
is_time(v) {
|
return demo.timeout(new Date(v).getTime(), "alls", "-");
|
},
|
onDetail(id) {
|
this.$router.push(this.$nav.url("/man_user_detail/" + id));
|
},
|
// 标签
|
onTags(item) {
|
this.centerDialogVisible1 = true;
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
type: "pop-set1",
|
title: "设置标签[" + item.name + "]",
|
data: {
|
id: item.id,
|
label: item.label,
|
},
|
},
|
time: Date.now(),
|
});
|
},
|
onSearch(v) {
|
// if (v.time && v.time.length && v.time[1]) {
|
// v.createBegin = v.time[0];
|
// v.createEnd = v.time[1];
|
// }
|
|
// this.bar = demo.copy(v);
|
// delete this.search.time;
|
this.paged.page = 1;
|
this.init();
|
},
|
resetForm(){
|
//重置
|
this.paged.page = 1
|
for(let key in this.bar){
|
this.bar[key] = ''
|
}
|
},
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
// 获取数据
|
init() {
|
let v = demo.copy(
|
Object.assign(this.bar, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
level:this.bar.address1.length||''
|
})
|
);
|
this.$api.post("common/data/population/pagePopulation", v, (e) => {
|
|
this.paged.total = e.total;
|
this.tds = e.records || [];
|
this.tds.map(item=>{
|
//婚姻状况
|
if(item.marriage){
|
this.marriage.map(li=>{
|
if(li.value ==item.marriage){
|
item.marriageText = li.name
|
}
|
})
|
}
|
})
|
this.statistics()
|
});
|
},
|
clear(id) {
|
//删除
|
let t = this;
|
let list = [];
|
this.ChangeList.map((item) => {
|
list.push(item.id);
|
});
|
if (id) {
|
list = [id];
|
}
|
if(list.length===0){
|
//什么都没选 拦截
|
return
|
}
|
t.$js.model("删除人口", "是否删除人口？", (res) => {
|
if (res) {
|
t.$api.post("common/data/population/delete", list, (e) => {
|
demo.toast("删除成功");
|
t.init();
|
});
|
}
|
});
|
},
|
},
|
created() {
|
this.cascadeList()
|
},
|
mounted() {
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.head-box{
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 10px 0;
|
}
|
.h1{
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
}
|
.Tips {
|
margin: 10px 0;
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
background: #e6f7ff;
|
border: #bae7ff 1px solid;
|
border-radius: 6px;
|
height: 40px;
|
padding: 0 20px;
|
}
|
.Tips-cont {
|
padding: 0 10px;
|
font-size: 16px;
|
color: #606266;
|
}
|
.Tips-cont > span {
|
padding: 0 4px;
|
color: #409eff;
|
font-weight: 600;
|
}
|
.upload-box {
|
margin: 0 10px;
|
}
|
|
.man_pop {
|
overflow-y: auto;
|
|
.tab {
|
/*overflow-x: scroll;*/
|
margin-bottom: 10px;
|
}
|
}
|
|
.add {
|
display: flex;
|
padding-bottom: 20px;
|
}
|
|
.dialog-box {
|
display: flex;
|
justify-content: center;
|
}
|
|
.text-link {
|
cursor: pointer;
|
margin-left: 20px;
|
color: #409eff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
