<template>
|
<div class="old-authentication">
|
<v-header title="高龄老人列表"></v-header>
|
<!-- 搜索 -->
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="关键字">
|
<div class="fl-fw">
|
<el-input
|
style="width: 390px"
|
size="small"
|
v-model="searchList.searchKey"
|
placeholder="请输入姓名、身份证号、联系电话等关键词进行查找"
|
></el-input>
|
<div class="fl-al mr-l-20">
|
有无高龄补贴：
|
<div
|
class="fl-cen btn-box"
|
v-for="(it, ix) in subsidyList"
|
:key="ix"
|
:class="[it.type ? 'btn-box-check' : '']"
|
@click="subsidyCheclHandle(ix)"
|
>
|
{{ it.label }}
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<div class="fl-al">
|
<div class="fl-al">
|
人员类别：
|
<div
|
class="fl-cen btn-box"
|
v-for="(it, ix) in personClass"
|
:key="ix"
|
:class="[it.type ? 'btn-box-check' : '']"
|
@click="labelCheclHandle(ix)"
|
>
|
{{ it.label }}
|
</div>
|
</div>
|
<div class="fl-al mr-l-50">
|
健在：
|
<div
|
class="fl-cen btn-box"
|
v-for="(it, ix) in isExistList"
|
:key="ix"
|
:class="[it.type ? 'btn-box-check' : '']"
|
@click="deathCheclHandle(ix)"
|
>
|
{{ it.label }}
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch"
|
>查询</el-button
|
>
|
<el-button @click="Reset" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="add flex">
|
<el-button type="primary" @click="advancedExport">导出 </el-button>
|
</div>
|
<div class="tab">
|
<v-table :trs="trs" :tds="tds" first firstWidth="50px" ref="table">
|
<template v-slot:personnelCategory="{ scope }">
|
<b>{{
|
["", "80-89周岁", "90-99周岁", "100周岁（含）以上）"][scope.type]
|
}}</b>
|
</template>
|
<template v-slot:jz="{ scope }">
|
<b>{{ scope.death == 0 ? "否" : "是" }}</b>
|
</template>
|
<template v-slot:sex="{ scope }">
|
{{ scope.sex == "1" ? "男" : "女" }}
|
</template>
|
<template v-slot:status="{ scope }">
|
<a v-if="scope.approvalStatus == '1'">待审核</a>
|
<a v-if="scope.approvalStatus == '2'">驳回</a>
|
<a v-if="scope.approvalStatus == '3'">通过</a>
|
</template>
|
<template v-slot:btn="{ scope }">
|
<div class="table_flex">
|
<span class="col_primary" @click="onShow(scope.id)">查看</span>
|
</div>
|
</template>
|
</v-table>
|
</div>
|
|
<!-- 分页 -->
|
<div class="page">
|
<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>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
searchList: {
|
searchKey: "",
|
},
|
isExistList: [
|
{
|
label: "全部",
|
value: null,
|
type: true,
|
},
|
{
|
label: "是",
|
value: 0,
|
type: false,
|
},
|
{
|
label: "否",
|
value: 1,
|
type: false,
|
},
|
],
|
subsidyList: [
|
{
|
label: "全部",
|
value: null,
|
type: true,
|
},
|
{
|
label: "有",
|
value: "高龄老人",
|
type: false,
|
},
|
],
|
personClass: [
|
{
|
label: "全部",
|
value: null,
|
type: true,
|
},
|
{
|
label: "80-89岁",
|
value: 1,
|
type: false,
|
},
|
{
|
label: "90-99岁",
|
value: 2,
|
type: false,
|
},
|
{
|
label: "100岁及以上",
|
value: 3,
|
type: false,
|
},
|
],
|
trs: [
|
{ text: "序号", val: "index", width: "50px" },
|
{ text: "姓名", val: "name", width: "100px" },
|
{ text: "身份证号", val: "cardNo", width: "180px" },
|
{ text: "性别", val: "btn", slot: "sex", width: "80px" },
|
{ text: "年龄", val: "age", width: "80px" },
|
{ text: "人员标签", val: "label" },
|
{ text: "居住地址", val: "address" },
|
{
|
text: "人员类别",
|
val: "btn",
|
slot: "personnelCategory",
|
width: "130px",
|
},
|
{ text: "联系电话", val: "phone", width: "180px" },
|
{ text: "文化程度", val: "cultureLevelName", width: "150px" },
|
{ text: "健在", val: "btn", slot: "jz", width: "80px" },
|
{ text: "操作", val: "btn", width: "100px", fixed: "right" },
|
],
|
tds: [],
|
Change: false,
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
search: {},
|
maxall: false,
|
maxallTime: false,
|
sendIds: [],
|
personClassType: null,
|
deathType: null,
|
subsudyName: null,
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.init();
|
}
|
},
|
deep: true,
|
},
|
maxall(n) {
|
if (this.maxallTime) return 0;
|
this.tds = this.tds.map((r) => {
|
r.is_check = n;
|
return r;
|
});
|
},
|
tds: {
|
handler(n) {
|
let x = n.filter((r) => {
|
return r.is_check;
|
});
|
this.maxallTime = true;
|
this.maxall = x.length === n.length && x.length > 0;
|
setTimeout(() => {
|
this.maxallTime = false;
|
}, 500);
|
this.sendIds = x.map((r) => {
|
return r.id;
|
});
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
subsidyCheclHandle(i) {
|
this.subsidyList.forEach((item, index) => {
|
if (index == i) {
|
item.type = true;
|
this.subsudyName = item.value;
|
} else {
|
item.type = false;
|
}
|
});
|
this.init();
|
},
|
labelCheclHandle(i) {
|
this.personClass.forEach((item, index) => {
|
if (index == i) {
|
item.type = true;
|
this.personClassType = item.value;
|
} else {
|
item.type = false;
|
}
|
});
|
this.init();
|
},
|
deathCheclHandle(i) {
|
this.isExistList.forEach((item, index) => {
|
if (index == i) {
|
this.deathType = item.value;
|
item.type = true;
|
} else {
|
item.type = false;
|
}
|
});
|
this.init();
|
},
|
//导出
|
advancedExport() {
|
this.$api.post(
|
"common/data/population/data/exportOld",
|
{
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
keyWord: this.searchList.searchKey,
|
isDeath: this.deathType,
|
type: this.personClassType,
|
ageStart: 80,
|
},
|
(e) => {
|
window.location.href = e;
|
}
|
);
|
},
|
/** pageSize 改变时会触发 */
|
onPageSizeChange(pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.init();
|
},
|
/** 分页 */
|
onPaginationChange(page) {
|
this.paginationParams.currentPage = page;
|
this.init();
|
},
|
// 查看
|
onShow(e) {
|
console.log(e);
|
this.$router.push("man_user_detail/" + e);
|
},
|
/**
|
* 条件查询
|
*/
|
onSearch(v) {
|
this.paginationParams.currentPage = 1;
|
this.init();
|
},
|
|
Reset() {
|
for (let key in this.searchList) {
|
this.searchList[key] = "";
|
}
|
this.personClass.forEach((item, index) => {
|
if (index === 0) {
|
item.type = true;
|
} else {
|
item.type = false;
|
}
|
});
|
this.isExistList.forEach((item, index) => {
|
if (index === 0) {
|
item.type = true;
|
} else {
|
item.type = false;
|
}
|
});
|
this.personClassType = null;
|
this.deathType = null;
|
},
|
|
// 获取数据
|
init() {
|
let params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
keyWord: this.searchList.searchKey,
|
isDeath: this.deathType,
|
type: this.personClassType,
|
ageStart: 80,
|
label: this.subsudyName,
|
};
|
this.$api.post("common/data/population/pagePopulation", params, (e) => {
|
this.paginationParams.total = e.total;
|
// this.paged.r++;
|
this.tds = e.records || [];
|
this.tds.map((v, index) => {
|
v.index =
|
(this.paginationParams.currentPage - 1) *
|
this.paginationParams.pageSize +
|
index +
|
1;
|
this.$set(v, "che", false);
|
return v;
|
});
|
});
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.old-authentication {
|
overflow-y: auto;
|
.erro-text {
|
font-size: 13px;
|
color: #f56c6c;
|
cursor: pointer;
|
}
|
.off-a {
|
padding-left: 10px;
|
font-size: 14px;
|
color: #333;
|
}
|
.text {
|
p {
|
position: relative;
|
padding-left: 40px;
|
font-size: 13px;
|
color: #669;
|
line-height: 1;
|
margin-bottom: 5px;
|
&::before {
|
content: attr(data-content);
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
}
|
}
|
.table_flex {
|
span {
|
cursor: pointer;
|
}
|
}
|
.add,
|
.tab,
|
.text {
|
margin-bottom: 10px;
|
}
|
.add_back {
|
text-align: right;
|
.back-color {
|
color: #409eff;
|
cursor: pointer;
|
}
|
}
|
.add .m_btn {
|
min-width: 80px;
|
}
|
.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;
|
}
|
.page {
|
text-align: center;
|
padding: 10px 0;
|
}
|
}
|
.input-width {
|
width: 200px;
|
}
|
.textarea-width {
|
width: 300px;
|
}
|
.fl-cen {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.fl-fw {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.btn-box {
|
margin-right: 10px;
|
cursor: pointer;
|
padding: 0px 14px;
|
border: 1px solid;
|
border-radius: 6px;
|
}
|
.btn-box-check {
|
color: #d61919 !important;
|
border: 1px solid #d61919 !important;
|
}
|
</style>
|
