<template>
|
<div>
|
<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-cascader
|
@change="cascader"
|
ref="cascader"
|
size="small"
|
:options="options"
|
v-model="bar.address1"
|
:props="props"
|
></el-cascader>
|
</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
|
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-input
|
size="small"
|
v-model="bar.nativePlace"
|
placeholder="请输入"
|
></el-input>
|
</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="but">
|
<el-button @click="excel" size="small">导出</el-button>
|
<el-button @click="Change = !Change" size="small">批量删除</el-button>
|
</div>
|
<div class="Tips" v-show="Change">
|
<i style="color: #409eff" class="el-icon-info"></i>
|
<div class="Tips-cont">
|
已选择<span>{{ ids.length }}</span
|
>项
|
</div>
|
<el-button type="text" @click="clear()">批量删除</el-button>
|
<el-button type="text" @click="cancel">取消</el-button>
|
</div>
|
<!---->
|
<div>
|
<el-table
|
:data="tds"
|
border
|
@selection-change="handleSelectionChange"
|
style="width: 100%; margin-top: 10px"
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="name" label="姓名" width="100">
|
</el-table-column>
|
<el-table-column prop="cardNo" label="身份证" width="180">
|
</el-table-column>
|
<el-table-column
|
prop="label"
|
show-overflow-tooltip
|
label="人员标签"
|
width="180"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
show-overflow-tooltip
|
label="居住地址"
|
width="180"
|
>
|
</el-table-column>
|
<el-table-column label="性别" width="80">
|
<template slot-scope="{ row }">
|
{{ ["", "男", "女", "未知"][row.sex] }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="nation" label="民族" width="100">
|
</el-table-column>
|
<el-table-column label="政治面貌" width="100">
|
<template slot-scope="{ row }">
|
{{ politicalOutlookList[row.politicalOutlook || 0] }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="birthday" label="出生年月日" width="140">
|
</el-table-column>
|
<el-table-column prop="age" label="年龄" width="80"> </el-table-column>
|
<el-table-column prop="phone" label="联系方式" width="180">
|
</el-table-column>
|
<el-table-column prop="nativePlace" label="籍贯" width="100">
|
</el-table-column>
|
<el-table-column label="本地外地" width="100">
|
<template slot-scope="{ row }">
|
{{ row.outOrLocal === 1 ? "本地" : "外地" }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="censusRegister" label="户口所在地" width="180">
|
</el-table-column>
|
<el-table-column label="文化程度" width="100">
|
<template slot-scope="{ row }">
|
<span v-if="row.cultureLevel && row.cultureLevel < 9">
|
{{ cultureLevel[row.cultureLevel].name }}
|
</span>
|
<span v-else>其他</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="婚姻状况" width="100">
|
<template slot-scope="{ row }">
|
<span>
|
{{ row.marriageText }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="healthy" label="健康状况" width="180">
|
</el-table-column>
|
<el-table-column prop="workCompany" label="工作单位" width="180">
|
</el-table-column>
|
<el-table-column prop="updateAt" label="更新时间" width="180">
|
</el-table-column>
|
<el-table-column prop="name" fixed="right" label="操作" width="180">
|
<template slot-scope="{ row }">
|
<el-button @click="edit(row)" type="text">编辑</el-button>
|
<el-button @click="clear(row.id)" type="text">删除</el-button>
|
<el-button @click.stop="onDetail(row.id)" type="text"
|
>查看详情</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { watermark, removewatermark } from "../../../utils/watermark";
|
import { getPhoneEncty, getCardEncty } from "../../../utils/common";
|
let id = 0;
|
import list from "@/assets/js/nation.js"; //56民族
|
export default {
|
props: [],
|
components: {},
|
data() {
|
return {
|
Change: false,
|
ids: [],
|
bar: {
|
name: "",
|
cardNo: "",
|
label: "",
|
address: "", //
|
address1: "",
|
sex: "",
|
nation: "",
|
politicalOutlook: "",
|
ageStart: "",
|
ageEnd: "",
|
},
|
tds: [],
|
sex: [
|
{ label: "男", value: 1 },
|
{ label: "女", value: 2 },
|
{ label: "未知", value: 3 },
|
],
|
politicalOutlook: [
|
{ value: 1, label: "中共党员" },
|
{ value: 3, label: "共青团员" },
|
{ value: 13, label: "群众" },
|
],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
nation: list, //民族
|
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);
|
});
|
},
|
},
|
politicalOutlookList: [
|
"",
|
"中共党员",
|
"中共预备党员",
|
"共青团员",
|
"民革党员",
|
"民盟盟员",
|
"民建会员",
|
"农工党党员",
|
"农工党党员",
|
"致公党党员",
|
"九三学社社员",
|
"台盟盟员",
|
"无党派人士",
|
"群众",
|
],
|
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 },
|
],
|
};
|
},
|
created() {
|
this.cascadeList();
|
},
|
methods: {
|
newDestroyed() {
|
removewatermark();
|
},
|
newMounted() {
|
const USER_INFO = demo.$session.get("user");
|
watermark({
|
watermark_txt: `${USER_INFO.title}-“${USER_INFO.account} ${USER_INFO.name}”`,
|
});
|
},
|
cascader(e) {
|
let houseId = this.$refs.cascader.getCheckedNodes();
|
this.bar.houseId = houseId[0].data.houseId;
|
},
|
cascadeList() {
|
//连级选择器 房屋地址
|
let data = {
|
level: 1,
|
villageId: this.$route.query.id || "",
|
};
|
this.$api.post("common/data/population/cascade/list", data, (e) => {
|
let list = [];
|
e.map((item) => {
|
list.push({
|
id: ++id,
|
houseId: item.houseId,
|
name: item.name,
|
});
|
});
|
this.options = list;
|
});
|
},
|
excel() {
|
//导出excel
|
let list = [];
|
if (this.ids.length === 0) {
|
list = [this.$route.query.id];
|
} else {
|
list = this.ids;
|
}
|
this.$api.post("common/data/population/data/export", list, (e) => {
|
window.location.href = e;
|
});
|
},
|
edit(item) {
|
this.$router.push({
|
path: "/man_user_edit",
|
query: { item: JSON.stringify(item) },
|
});
|
},
|
onDetail(id) {
|
this.$router.push(this.$nav.url("/man_user_detail/" + id));
|
},
|
handleSelectionChange(val) {
|
this.ids = [];
|
val.map((item) => {
|
this.ids.push(item.id);
|
});
|
},
|
clear(id) {
|
//删除
|
let t = this;
|
if (id) {
|
this.ids = [id];
|
}
|
t.$js.model("删除人口", "是否删除人口？", (res) => {
|
if (res) {
|
t.$api.post("common/data/population/delete", this.ids, (e) => {
|
demo.toast("删除成功");
|
t.ids = [];
|
t.init();
|
});
|
}
|
});
|
},
|
onSearch() {
|
this.paged.page = 1;
|
this.init();
|
},
|
init() {
|
let v = demo.copy(
|
Object.assign(this.bar, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
villageId: this.$route.query.id || "",
|
level: this.bar.address1.length || "",
|
})
|
);
|
this.$api.post("common/data/population/pagePopulation", v, (e) => {
|
this.tds = e.records;
|
this.tds.map((item) => {
|
item.cardNo = getCardEncty(item.cardNo);
|
item.phone = getPhoneEncty(item.phone);
|
//婚姻状况
|
if (item.marriage) {
|
this.marriage.map((li) => {
|
if (li.value == item.marriage) {
|
item.marriageText = li.name;
|
}
|
});
|
}
|
});
|
this.paged.total = e.total;
|
});
|
},
|
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();
|
},
|
cancel() {
|
//取消
|
this.Change = false;
|
this.tds.map((item) => {
|
item.che = false;
|
});
|
},
|
},
|
watch: {},
|
computed: {},
|
};
|
</script>
|
<style scoped>
|
.head-box {
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 10px 0;
|
}
|
.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;
|
}
|
</style>
|
