<template>
|
<div class="old-authentication">
|
<v-header title="高龄认证记录"></v-header>
|
<!-- 搜索 -->
|
<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="认证期数">
|
<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="审核状态">
|
<el-select v-model="searchList.approvalStatus" 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="人员类别">
|
<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>
|
<div class="block">
|
<span class="demonstration">认证时间</span>
|
<el-date-picker
|
v-model="searchList.time"
|
type="daterange"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
</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="addBtnHandle">新增 </el-button>
|
<span class="erro-text" @click="dowErr" v-if="errUrl">下载错误表格</span>
|
<el-upload
|
name="file"
|
accept=".xls, .xlsx"
|
:headers="{ Authorization: Authorization }"
|
class="upload-demo"
|
style="display: inline-block"
|
:show-file-list="false"
|
:action="importDataurl"
|
:on-success="success"
|
:on-error="error"
|
:before-upload="beforeUpload"
|
multiple
|
>
|
<el-button type="primary">导入线下认证居民</el-button>
|
</el-upload>
|
<el-button type="primary" @click="advancedExport">导出 </el-button>
|
<el-button type="primary" @click="down">下载模版</el-button>
|
<!-- <el-button type="primary" @click="Statistics(1)">认证统计</el-button> -->
|
<span class="off-a">
|
<a>{{ authenticationText }}</a>
|
<el-switch
|
v-model="authenticationOff"
|
@change="authenticationClick"
|
active-color="#13ce66"
|
inactive-color="#909399"
|
>
|
</el-switch>
|
</span>
|
</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="cancel">取消</el-button>
|
</div>
|
|
<div class="tab">
|
<v-table :trs="trs" :tds="tds" first firstWidth="50px" ref="table">
|
<template v-slot:first-th>
|
<div>
|
<el-checkbox @change="cheAll" v-model="alls"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="item">
|
<div>
|
<el-checkbox
|
@change="change"
|
v-model="item.scope.che"
|
></el-checkbox>
|
</div>
|
</template>
|
<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:sex="{ scope }">
|
{{ scope.sex == "1" ? "男" : "女" }}
|
</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.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>
|
<span
|
v-if="scope.approvalStatus == '1'"
|
class="col_primary"
|
@click="onexamine(scope.id)"
|
>审核</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>
|
<!-- 新增弹框 -->
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="dialogVisible"
|
width="50%"
|
:before-close="handleCloseData"
|
append-to-body
|
>
|
<div>
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="ruleForm"
|
label-width="150px"
|
class="demo-ruleForm"
|
>
|
<div class="fl-fw">
|
<el-form-item label="认证姓名" prop="name">
|
<el-input
|
class="input-width"
|
placeholder="请输入认证姓名"
|
size="small"
|
v-model.trim="form.name"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="认证身份证" prop="idCard">
|
<el-input
|
class="input-width"
|
placeholder="请输入认证身份证"
|
size="small"
|
maxlength="18"
|
v-model.trim="form.idCard"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="联系电话" prop="phone">
|
<el-input
|
class="input-width"
|
placeholder="请输入联系电话"
|
size="small"
|
maxlength="11"
|
v-model.trim="form.phone"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="现居住地址" prop="address">
|
<el-input
|
class="input-width"
|
placeholder="请输入现居住地址"
|
size="small"
|
v-model.trim="form.address"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="fl-fw">
|
<el-form-item label="认证时间" prop="authDate">
|
<el-date-picker
|
class="input-width"
|
v-model="form.authDate"
|
type="date"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
placeholder="请选择认证时间"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="认证期数" prop="authPeriod">
|
<el-date-picker
|
class="input-width"
|
v-model="form.authPeriod"
|
type="month"
|
format="yyyy-MM"
|
value-format="yyyyMM"
|
placeholder="请选择认证期数"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</div>
|
<el-form-item label="标记">
|
<el-input
|
class="textarea-width"
|
placeholder="请输入标记"
|
size="small"
|
type="textarea"
|
resize="none"
|
:rows="4"
|
v-model="form.mark"
|
maxlength="300"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="fl-cen">
|
<el-button size="small" @click="handleCloseData">取 消</el-button>
|
<el-button size="small" type="primary" @click="submitHandle"
|
>确 定</el-button
|
>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import { SHENFENZHENG, PHONE } from "../../../utils/validation";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
dialogVisible: false,
|
dialogTitle: "",
|
searchList: {
|
searchKey: "",
|
authPeriod: "",
|
time: [],
|
approvalStatus: "",
|
personnelCategory: "",
|
isAlive: "",
|
},
|
periodsList: [
|
{
|
label: "2019",
|
value: 1,
|
},
|
],
|
importDataurl:
|
this.$js.api.http + "eldersauth/authRecords/uderLine/import",
|
statusList: ["全部", "待审核", "驳回", "通过"].map((r, v) => {
|
return { label: r, value: v > 0 ? v : "" };
|
}),
|
levelList: ["全部", "80-89周岁", "90-99周岁", "100周岁(含)以上"].map(
|
(r, v) => {
|
return { label: r, value: v > 0 ? v : "" };
|
}
|
),
|
isExistList: [
|
{
|
label: "全部",
|
value: null,
|
},
|
{
|
label: "是",
|
value: 1,
|
},
|
{
|
label: "否",
|
value: 0,
|
},
|
],
|
|
trs: [
|
{ text: "序号", val: "index" },
|
{ text: "提交用户", val: "submitUserName", width: "120px" },
|
{ text: "联系电话", val: "phone", width: "150px" },
|
{ text: "认证姓名", val: "name", width: "100px" },
|
{ text: "身份证号", val: "idCard", width: "180px" },
|
{ text: "性别", val: "btn", slot: "sex", width: "80px" },
|
{ text: "年龄", val: "age", width: "80px" },
|
// { text: "姓名", val: "name" ,width:"100px"},
|
{ text: "出生日期", val: "birthday", width: "150px" },
|
{
|
text: "人员类别",
|
val: "btn",
|
slot: "personnelCategory",
|
width: "130px",
|
},
|
{ text: "现居住地址", val: "address", width: "180px" },
|
{ text: "健在", val: "btn", slot: "jz", width: "80px" },
|
{ text: "认证期数", val: "authPeriod", width: "100px" },
|
{ text: "认证时间", val: "authDate", width: "150px" },
|
{ text: "认证方式", val: "btn", slot: "authMethod", width: "100px" },
|
{ text: "标记", val: "mark" },
|
{ text: "审核状态", val: "btn", slot: "status", width: "100px" },
|
{ text: "操作", val: "btn", width: "150px", fixed: "right" },
|
],
|
authenticationOff: true,
|
tds: [],
|
Change: false,
|
ids: [], //选中的id集合
|
alls: false, //全选状态
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
os: {},
|
form: {
|
name: "",
|
idCard: "",
|
phone: "",
|
address: "",
|
mark: "",
|
authPeriod: "",
|
authDate: "",
|
},
|
rules: {
|
name: [{ required: true, message: "请输入认证姓名", trigger: "blur" }],
|
idCard: [{ required: true, validator: SHENFENZHENG, trigger: "blur" }],
|
phone: [{ required: true, validator: PHONE, trigger: "blur" }],
|
address: [
|
{ required: true, message: "请输入现居住地址", trigger: "blur" },
|
],
|
authDate: [
|
{ required: true, message: "请选择认证时间", trigger: "blur" },
|
],
|
authPeriod: [
|
{ required: true, message: "请选择认证期数", trigger: "blur" },
|
],
|
},
|
search: {},
|
maxall: false,
|
maxallTime: false,
|
sendIds: [],
|
uploadSrc: "",
|
Authorization: "",
|
authenticationType: "",
|
loading: {},
|
errUrl: "",
|
authenticationText: "",
|
};
|
},
|
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: {
|
handleCloseData() {
|
this.$refs["ruleForm"].resetFields(); // 重置表单
|
this.form = {
|
name: "",
|
idCard: "",
|
phone: "",
|
address: "",
|
mark: "",
|
authPeriod: "",
|
authDate: "",
|
};
|
this.dialogVisible = false;
|
},
|
submitHandle() {
|
this.$refs["ruleForm"].validate((val) => {
|
if (val) {
|
this.$api.post("eldersauth/authRecord/add", this.form, () => {
|
demo.toast("新增成功");
|
this.handleCloseData();
|
this.init();
|
});
|
}
|
});
|
},
|
addBtnHandle() {
|
this.dialogTitle = "新增";
|
this.dialogVisible = true;
|
},
|
/**
|
* 全选和单选
|
*/
|
cheAll() {
|
this.Change = !this.Change;
|
//全选
|
this.tds.map((item) => {
|
item.che = this.alls;
|
});
|
this.change();
|
},
|
|
change() {
|
//单个选择
|
this.ids = [];
|
this.tds.map((item) => {
|
if (item.che) {
|
this.ids.push(item.id);
|
} else {
|
this.alls = false;
|
}
|
});
|
},
|
|
cancel() {
|
//取消选中
|
this.Change = false;
|
this.alls = false;
|
this.tds.map((item) => {
|
item.che = false;
|
});
|
},
|
|
//导出
|
advancedExport() {
|
let ids = [];
|
this.$api.post(
|
"eldersauth/authRecords/export",
|
{
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
authDateBegin: this.searchList.time[0] || "",
|
authDateEnd: this.searchList.time[1] || "",
|
approvalStatus: this.searchList.approvalStatus,
|
authPeriod: this.searchList.authPeriod.split("-").join(""),
|
authStatus: "",
|
isAlive: this.searchList.isAlive,
|
personnelCategory: this.searchList.personnelCategory,
|
searchKey: this.searchList.searchKey,
|
},
|
(e) => {
|
window.location.href = e;
|
}
|
);
|
},
|
|
authenticationClick(e) {
|
if (e) {
|
this.authenticationType = 1;
|
this.authenticationText = "视频认证";
|
} else {
|
this.authenticationType = 2;
|
this.authenticationText = "人脸认证";
|
}
|
this.$api.put(
|
`eldersauth/authType/${this.authenticationType}`,
|
{},
|
(e) => {
|
console.log(e);
|
}
|
);
|
},
|
|
authType() {
|
this.$api.get("eldersauth/authType", {}, (e) => {
|
if (e == "1") {
|
this.authenticationOff = true;
|
this.authenticationType = 1;
|
this.authenticationText = "视频认证";
|
} else {
|
this.authenticationOff = false;
|
this.authenticationType = 2;
|
this.authenticationText = "人脸认证";
|
}
|
});
|
},
|
|
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", data: e },
|
},
|
time: Date.now(),
|
});
|
},
|
//审核
|
onexamine(e) {
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
title: "审核",
|
type: "old-see",
|
data: { type: "examine", data: e },
|
},
|
time: Date.now(),
|
});
|
},
|
|
onsign(e) {
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
title: "标记",
|
type: "old-cer",
|
data: { type: "sign", data: e },
|
},
|
time: Date.now(),
|
});
|
},
|
|
/**
|
* 条件查询
|
*/
|
onSearch(v) {
|
this.paginationParams.currentPage = 1;
|
this.init();
|
},
|
|
Reset() {
|
for (let key in this.searchList) {
|
this.searchList[key] = "";
|
}
|
},
|
|
// 获取数据
|
init() {
|
let params = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
authDateBegin: this.searchList.time[0] || "",
|
authDateEnd: this.searchList.time[1] || "",
|
approvalStatus: this.searchList.approvalStatus,
|
authPeriod: this.searchList.authPeriod.split("-").join(""),
|
authStatus: "",
|
isAlive: this.searchList.isAlive,
|
personnelCategory: this.searchList.personnelCategory,
|
searchKey: this.searchList.searchKey,
|
};
|
|
this.$api.post("eldersauth/authRecords/page", 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;
|
});
|
});
|
},
|
//导入前
|
beforeUpload() {
|
this.errUrl = "";
|
this.loading = this.$loading({
|
lock: true,
|
text: "导入中,请勿退出系统和关闭网络",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
},
|
|
//导入
|
success(e) {
|
if (e.code === 200) {
|
this.errUrl = "";
|
demo.toast("导入成功");
|
this.loading.close();
|
} else {
|
this.errUrl = e.msg;
|
this.loading.close();
|
|
if (e.msg == "ELDER_RECORD_ERROR_LIST_2") {
|
demo.toast("导入失败");
|
} else {
|
demo.toast(e.msg);
|
}
|
}
|
this.init();
|
},
|
|
error(err) {
|
this.loading.close();
|
demo.toast("模板错误，请下载最新模板");
|
},
|
|
dowErr() {
|
//下载错误i
|
let data = {
|
key: this.errUrl,
|
};
|
this.$api.post(
|
"eldersauth/download/error/authRecords/?key=" + this.errUrl,
|
"",
|
(e) => {
|
window.location.href = e;
|
this.errUrl = "";
|
}
|
);
|
},
|
|
//下载高龄认证模板
|
down() {
|
this.$api.get("eldersauth/authRecords/uderLine/export", {}, (e) => {
|
window.location.href = e;
|
});
|
},
|
},
|
mounted() {
|
this.uploadSrc = this.$js.api.http + "eldersauthelderly/import";
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
this.init();
|
this.authType();
|
// this.authenticationClick();
|
},
|
};
|
</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;
|
}
|
</style>
|
<style>
|
.el-table .cell {
|
font-size: 14px;
|
color: #444;
|
}
|
.el-dialog {
|
width: 800px !important;
|
}
|
</style>
|
