<template>
|
<div class='old-authentication'>
|
<v-header
|
title="认证统计"
|
></v-header>
|
<div class="add_back">
|
<span class="back-color" @click="back"><i class="el-icon-arrow-left"></i>返回上一级</span>
|
</div>
|
<!-- 搜索 -->
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="关键字">
|
<el-input style="width:390px" size="small" v-model="searchList.searchKey" placeholder=" 请输入认证姓名、认证身份证、标记等关键词进行查找"></el-input>
|
</el-form-item>
|
<el-form-item label="认证期数" v-if="type == '1'">
|
<el-date-picker
|
v-model="searchList.authPeriod"
|
format="yyyy-MM"
|
value-format="yyyy-MM"
|
type="month"
|
placeholder="选择年月">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="认证期数" v-if="type == '2'">
|
<el-date-picker
|
v-model="searchList.authPeriod"
|
format="yyyy"
|
value-format="yyyy"
|
type="year"
|
placeholder="选择年">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="认证状态">
|
<el-select v-model="searchList.authStatus" placeholder="请选择">
|
<el-option
|
v-for="item in statusList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="人员类别" v-if="type == '1'">
|
<el-select v-model="searchList.personnelCategory" placeholder="请选择">
|
<el-option
|
v-for="item in levelList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="健在">
|
<el-select v-model="searchList.isAlive" placeholder="请选择">
|
<el-option
|
v-for="item in isExistList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</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="button-lie">
|
<div class="num-statistics">
|
<span class="text">本期总人数:<span>{{staticsNum.allCount}}</span></span>
|
<span class="text">本期认证成功人数:<span>{{staticsNum.yesCount}}</span></span>
|
<span class="text">本期未认证人数:<span>{{staticsNum.noCount}}</span></span>
|
</div>
|
<div class="aside-btn">
|
<el-button type="primary" @click="exportTemplate">导出</el-button>
|
</div>
|
<div style="clear:both"></div>
|
</div>
|
<p class="alert" v-if="type == '1'">本月的认证统计每天24点更新一次</p>
|
<p class="alert" v-if="type == '2'">本年的认证统计每天24点更新一次</p>
|
<div class="tab">
|
<v-table
|
:trs="trs"
|
:tds="tds"
|
first
|
firstWidth="50px"
|
>
|
<template v-slot:personnelCategory="{scope}">
|
<b>{{['','80-89周岁','90-99周岁','100周岁（含）以上）'][scope.personnelCategory]}}</b>
|
</template>
|
<template v-slot:gl="{scope}">
|
<b>{{['','是','否'][scope.isBigAge]}}</b>
|
</template>
|
<template v-slot:jz="{scope}">
|
<b>{{scope.isAlive == 1 ? '是' : '否'}}</b>
|
</template>
|
<template v-slot:authMethod="{scope}">
|
<b v-if="scope.authMethod == 1">视频认证</b>
|
<b v-if="scope.authMethod == 2">人脸认证</b>
|
<b v-if="scope.authMethod == 3">线下认证</b>
|
</template>
|
<template v-slot:status="{scope}">
|
<a v-if="scope.isAuth == 1">已认证</a>
|
<a v-if="scope.isAuth == 2">未认证</a>
|
</template>
|
<template v-slot:btn="{scope}">
|
<div class="table_flex">
|
<span
|
v-if="scope.isAuth == 1"
|
class="col_primary"
|
@click="onShow(scope)"
|
>查看</span>
|
<span
|
class="col_primary"
|
@click="onsign(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";
|
import volunteer_examineVue from "../../fixed/child/volunteer_examine.vue";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
searchList:{
|
searchKey:'',
|
authPeriod:'',
|
authStatus:'',
|
personnelCategory:'',
|
isAlive:'',
|
},
|
periodsList:[{
|
label:'2019',
|
value:1,
|
}],
|
statusList: [
|
{
|
label:'全部',
|
value:'',
|
},
|
{
|
label:'已认证',
|
value:1,
|
},
|
{
|
label:'未认证',
|
value:2,
|
},
|
],
|
levelList: ["全部", "80-89周岁", "90-99周岁", "100周岁(含)以上"].map(
|
(r, v) => {
|
return { label: r, value: v > 0 ? v : "" };
|
}),
|
isExistList:[
|
{
|
label:'全部',
|
value:'',
|
},
|
{
|
label:'是',
|
value:1,
|
},
|
{
|
label:'否',
|
value:0,
|
}
|
],
|
|
trs: [
|
{ text: "序号", val: "index" ,width:"80px" },
|
{ text: "联系电话", val: "phone" ,width:"150px"},
|
{ text: "认证姓名", val: "name",width:"100px" },
|
{ text: "认证身份证", val: "idCard" ,width:"180px"},
|
// { text: "性别", val: "sex" ,width:"80px"},
|
// { text: "年龄", val: "age" ,width:"80px"},
|
// { text: "出生年月", val: "birthday" ,width:"150px"},
|
// { text: "现居住地址", val: "address" ,width:"150px"},
|
{ text: "健在", val: "btn", slot: "jz",width:"130px" },
|
{ text: "认证期数", val: "authPeriod" ,width:"130px"},
|
{ text: "认证时间", val: "authDate" ,width:"150px"},
|
{ text: "认证方式",val: "btn",slot:"authMethod" ,width:"150px"},
|
{ text: "标记", val: "mark" ,width:"130px"},
|
{ text: "认证状态", val: "btn",slot:"status" ,width:"130px"},
|
{ text: "操作", val: "btn",width:"150px", fixed:'right'},
|
],
|
tds: [],
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
search: {},
|
maxall: false,
|
maxallTime: false,
|
sendIds: [],
|
uploadSrc: "",
|
Authorization: "",
|
type:'',
|
url:'',
|
numurl:'',
|
staticsNum:{},
|
dataperiods:'',
|
};
|
},
|
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
|
watch: {
|
vuex_page: {
|
handler(n) {
|
console.log(n.page)
|
console.log(this.$route.path)
|
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,
|
},
|
},
|
|
mounted() {
|
this.uploadSrc = this.$js.api.http + "eldersauthelderly/import";
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
this.type = this.$route.params.id;
|
|
if ( this.type == '1') {
|
this.searchList.authPeriod = this.$$moment(new Date()).add('year',0).format("YYYY-MM");
|
}else {
|
this.searchList.authPeriod = this.$$moment(new Date()).add('year',0).format("YYYY");
|
}
|
this.init();
|
this.numAll();
|
},
|
|
methods: {
|
|
numAll() {
|
if(this.type == '1') {
|
this.dataperiods = this.searchList.authPeriod.split("-").join("")
|
} else {
|
this.dataperiods = this.searchList.authPeriod
|
}
|
let params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
searchKey: this.searchList.searchKey,
|
authPeriod:this.dataperiods,
|
authStatus:this.searchList.authStatus,
|
isAlive: this.searchList.isAlive,
|
communityId:'',
|
personnelCategory: this.searchList.personnelCategory,
|
}
|
|
//高龄认证统计接口
|
if(this.type == '1') {
|
this.numurl = "eldersauth/auth/header/statistic"
|
}
|
if(this.type == '2') {
|
this.numurl = 'eldersauth/pension/auth/header/statistic'
|
}
|
|
this.$api.post(this.numurl, params, (e) => {
|
this.staticsNum = e;
|
});
|
},
|
//导出模板
|
exportTemplate() {
|
let params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
authDateBegin:'',
|
authDateEnd: '',
|
approvalStatus: this.searchList.approvalStatus,
|
authPeriod: this.searchList.authPeriod.split("-").join(""),
|
authStatus:this.searchList.authStatus,
|
isAlive: this.searchList.isAlive,
|
personnelCategory: this.searchList.personnelCategory,
|
searchKey: this.searchList.searchKey
|
}
|
if(this.type == '1'){
|
this.$api.post("eldersauth/authRecords/statistic/export", params, (e) => {
|
window.location.href = e;
|
});
|
}
|
if(this.type == '2'){
|
this.$api.post("eldersauth/pensionAuthRecords/statistic/export", params, (e) => {
|
window.location.href = e;
|
});
|
}
|
|
},
|
|
back() {
|
this.$router.back()
|
|
},
|
|
/** pageSize 改变时会触发 */
|
onPageSizeChange (pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.init();
|
},
|
|
/** 分页 */
|
onPaginationChange (page) {
|
this.paginationParams.currentPage = page;
|
this.init();
|
},
|
|
/** 查看 */
|
onShow(e) {
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
title: "查看",
|
type: "old-see",
|
data: { type: "show-statistics", data: e },
|
},
|
time: Date.now(),
|
});
|
},
|
|
/** 标记 */
|
onsign(e) {
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
title: "标记",
|
type: "old-cer",
|
data: { type: "sign-statistic", data: e },
|
},
|
time: Date.now(),
|
});
|
},
|
|
/**
|
* 条件查询
|
*/
|
onSearch(v) {
|
this.paginationParams.currentPage = 1;
|
this.init();
|
this.numAll();
|
},
|
|
Reset() {
|
for(let key in this.searchList){
|
this.searchList[key] = ''
|
}
|
},
|
|
|
// 获取数据
|
init() {
|
if(this.type == '1') {
|
this.dataperiods = this.searchList.authPeriod.split("-").join("")
|
} else {
|
this.dataperiods = this.searchList.authPeriod
|
}
|
let params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
keyWord: this.searchList.searchKey,
|
authPeriod: this.dataperiods,
|
authStatus:this.searchList.authStatus,
|
isAlive: this.searchList.isAlive,
|
communityId:'',
|
personnelCategory: this.searchList.personnelCategory,
|
}
|
|
//高龄认证统计接口
|
if(this.type == '1') {
|
this.url = "eldersauth/auth/statistic/page"
|
}
|
|
//养老认证统计接口
|
if(this.type == '2') {
|
this.url = "eldersauth/pensionAuthRecords/statistic/page"
|
}
|
|
this.$api.post(this.url, params, (e) => {
|
this.paginationParams.total = e.total;
|
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;
|
});
|
});
|
},
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.old-authentication {
|
overflow-y: auto;
|
.button-lie {
|
line-height: 40px;
|
padding-bottom: 10px;
|
.num-statistics {
|
float: left;
|
.text {
|
margin-right: 30px;
|
span {
|
font-size: 17px;
|
font-weight: 500;
|
}
|
}
|
}
|
.aside-btn {
|
float: right;
|
}
|
|
}
|
.alert {
|
font-size: 13px;
|
color: #409EFF;
|
padding-bottom: 3px;
|
}
|
.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;
|
}
|
}
|
}
|
.add,
|
.tab,
|
.text {
|
margin-bottom: 10px;
|
}
|
.add_back {
|
text-align: right;
|
padding-bottom: 20px;
|
.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;
|
}
|
}
|
</style>
|
