<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="关键字" prop="nickname">
<el-input v-model="queryParams.nickname" placeholder="搜索昵称、姓名、手机、Email" clearable @keyup.enter.native="handleQuery"/>
</el-form-item>
<el-form-item label="成交" prop="mobile">
<el-select v-model="queryParams.isDeal">
<el-option v-for="item in [{label:'全部',value:''},{label:'是',value:true},{label:'否',value:false}]" :value="item.value" :label="item.label" :key="item.value" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="认证" prop="password">
<el-select v-model="queryParams.authType">
<el-option v-for="item in [{label: '全部',value: ''},{label:'营业执照认证',value:1},{label:'身份证认证',value:2},{label:'双认证',value:3}]" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="审核状态" prop="registerIp">
<dict-selector v-model="queryParams.auditStatus" :type="DICT_TYPE.AUDIT_STATUS"></dict-selector>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<el-button :loading="exportLoading" type="primary" @click="exportFn">导 出</el-button>
</el-form-item>
</el-form>
<!-- 操作工具栏 -->
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="公司名称" align="center" prop="enterpriseName" />
<el-table-column label="用户昵称" align="center" prop="nickname" />
<el-table-column label="真实姓名" align="center" prop="identityName" />
<el-table-column label="区号">
<template v-slot:default = 'scope'>
{{scope.row.areaCode ? `${scope.row.areaCode}`:''}}
</template>
</el-table-column>
<el-table-column label="手机号" show-overflow-tooltip align="center" prop="mobile" >
</el-table-column>
<el-table-column label="成交" align="center" prop="" show-overflow-tooltip />
<el-table-column label="认证" align="center" :formatter="authentication" />
<el-table-column label="状态" align="center" prop="status" >
<template slot-scope="scope">
<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)" />
</template>
</el-table-column>
<el-table-column label="身份证审核状态" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<div v-if="!scope.row.identityAuditStatus">未提交</div>
<dict-tag v-else :type="DICT_TYPE.AUDIT_STATUS" :value="scope.row.identityAuditStatus" ></dict-tag>
<el-tooltip v-if="scope.row.identityAuditStatus === 3" class="item" effect="dark" :content="scope.identityAuditRemark" placement="bottom">
<i class="el-icon-question"></i>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="营业执照审核状态" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<div v-if="!scope.row.enterpriseAuditStatus">未提交</div>
<dict-tag v-else :type="DICT_TYPE.AUDIT_STATUS" :value="scope.row.enterpriseAuditStatus" ></dict-tag>
<el-tooltip v-if="scope.row.enterpriseAuditStatus === 3" class="item" effect="dark" :content="scope.rowenterpriseAuditRemark" placement="bottom">
<i class="el-icon-question"></i>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
<template slot-scope="scope" >
<el-button size="mini" type="text" @click="guarantee(scope.row)">保函/证书</el-button>
<el-button size="mini" type="text" @click="operationLogFn(scope.row)">操作日志</el-button>
<el-button v-if="scope.row.identityAuditStatus !== 0 && scope.row.identityAuditStatus !== undefined" size="mini" type="text" @click="identityFn(scope.row , '1')">身份证</el-button>
<el-button size="mini" type="text" @click="identityFn(scope.row, '2')">营业执照</el-button>
<el-button size="mini" type="text" @click="deleteFn(scope.row)">删 除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
<el-dialog
title="保函/证书"
:visible.sync="guaranteeShow"
:before-close="()=>{guaranteeUrl = ''; guaranteeShow = false;}"
width="50%">
<el-form>
<el-form-item label="保函/证书">
<el-row :gutter="20" type="flex" justify="center" >
<el-col :span="12"><el-input v-model="guaranteeUrl" ></el-input></el-col>
<el-col :span="4"><div style="height: 45px;overflow: hidden;">
<file-upload v-model="guaranteeUrl" :fileType="['png', 'jpg', 'jpeg','pdf']" :limit="1" :isShowTip="false"></file-upload>
</div></el-col>
<el-col :span="6">
<div>可上传图片,pdf文档</div>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div style="text-align: center;"><el-button @click="setGuarantee">保 存</el-button></div>
</el-dialog>
<el-dialog
title="操作日志"
:visible.sync="operationLogShow"
width="50%">
<el-table :data="operationLogList">
<el-table-column label="标题" prop="title"></el-table-column>
<el-table-column label="操作内容" prop="content"></el-table-column>
<el-table-column label="操作人" prop="userId"></el-table-column>
<el-table-column label="操作时间">
<template v-slot:default ="scope">
{{parseTime(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作ip" prop="ip"></el-table-column>
</el-table>
<pagination v-show="totalLog > 0" :total="totalLog" :page.sync="operationLogFrom.page" :limit.sync="operationLogFrom.row"
@pagination="getOperationLogList"/>
</el-dialog>
<el-dialog
title="认证"
:visible.sync="attestationShow"
width="80%">
<div class="details">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="身份证" name="1" v-if="this.publicObj && this.publicObj.identityAuditStatus !== 0 && this.publicObj.identityAuditStatus !== undefined">
<div style="padding:0 40px;box-sizing: border-box;">
<el-form ref="formId" label-position="left" label-width="100px" :rules="rulesId" :model="IdDetails" >
<el-form-item label="姓名" prop="name">
<el-input v-model="IdDetails.name"></el-input>
</el-form-item>
<el-form-item label="证件类型" prop="cardType">
<dict-selector v-model="IdDetails.cardType" :type="DICT_TYPE.CERTIFICATE_TYPE" ></dict-selector>
</el-form-item>
<el-form-item label="证件号码" prop="cardNumber">
<el-input v-model="IdDetails.cardNumber"></el-input>
</el-form-item>
<el-form-item label="证件正面照" prop="img1">
<div>
<el-input style="margin-bottom: 20px" v-model="IdDetails.img1"></el-input>
<ImageUpload :isShowTip="false" v-model="IdDetails.img1" :limit="1"></ImageUpload>
</div>
</el-form-item>
<el-form-item label="证件背面照" prop="img2">
<div>
<el-input style="margin-bottom: 20px" v-model="IdDetails.img2"></el-input>
<ImageUpload :isShowTip="false" :limit="1" v-model="IdDetails.img2"></ImageUpload>
</div>
</el-form-item>
<el-form-item label="审核状态">
{{getDictDatas(DICT_TYPE.AUDIT_STATUS)[IdDetails.status].label}}
</el-form-item>
<el-form-item label="审核时间" v-if="IdDetails.status === 2 || IdDetails.status === 3">
{{parseTime(IdDetails.auditTime)}}
</el-form-item>
<el-form-item v-if="IdDetails.status === 1 || IdDetails.status === 3" label="审核备注">
<el-input v-model="IdDetails.auditRemark" :disabled="IdDetails.status === 3" type="textarea"></el-input>
</el-form-item>
</el-form>
<div v-if="IdDetails.status === 1" style="text-align: center;margin-top: 20px;">
<el-button type="primary" @click="idCardAuditFn(2)">审核通过</el-button>
<el-button type="primary" @click="idCardAuditFn(3)">审核不通过</el-button>
<el-button @click="attestationShow = false">取 消</el-button>
</div>
<div v-if="IdDetails.status === 2 || IdDetails.status === 3" style="text-align: center;margin-top: 20px;">
<el-button type="primary" @click="setMemberUserUpdateIdCard">修 改</el-button>
<el-button @click="attestationShow = false">取 消</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="营业执照" name="2" >
<div style="width: 500px;padding:0 40px;box-sizing: border-box;">
<el-form :rules="rulesEnterprise" :model="enterpriseFrom" label-position="left" ref="formEnter" label-width="100px">
<el-form-item label="企业名称" prop="name">
<el-input v-model="enterpriseFrom.name" ></el-input>
</el-form-item>
<el-form-item label="企业法人" prop="legalName">
<el-input v-model="enterpriseFrom.legalName" ></el-input>
</el-form-item>
<el-form-item label="证件号码" prop="cardNumber">
<el-input v-model="enterpriseFrom.cardNumber"></el-input>
</el-form-item>
<el-form-item label="证件照" prop="img1">
<div>
<el-input style="margin-bottom: 20px" v-model="enterpriseFrom.img1"></el-input>
<ImageUpload :isShowTip="false" :limit="1" v-model="enterpriseFrom.img1"></ImageUpload>
</div>
</el-form-item>
<el-form-item label="附件">
<el-input v-model="enterpriseFrom.img2"></el-input>
<ImageUpload :isShowTip="false" :limit="1" v-model="enterpriseFrom.img2"></ImageUpload>
</el-form-item>
<el-form-item label="审核状态">{{getDictDatas(DICT_TYPE.AUDIT_STATUS)[enterpriseFrom.status].label}}</el-form-item>
<el-form-item v-if="enterpriseFrom.status === 2 || enterpriseFrom.status === 3" label="审核时间">{{parseTime(enterpriseFrom.auditTime)}}</el-form-item>
<el-form-item v-if="enterpriseFrom.status === 1 || enterpriseFrom.status === 3" label="审核备注">
<el-input v-model="enterpriseFrom.auditRemark" :disabled="enterpriseFrom.status === 3" type="textarea"></el-input>
</el-form-item>
</el-form>
<div v-if="enterpriseFrom.status === 1" style="text-align: center;margin-top: 20px;">
<el-button type="primary" @click="certificateVerificationFn(2)">审核通过</el-button>
<el-button type="primary" @click="certificateVerificationFn(3)">审核不通过</el-button>
<el-button @click="attestationShow = false">取 消</el-button>
</div>
<div v-if="enterpriseFrom.status === 2 || enterpriseFrom.status === 3" style="text-align: center;margin-top: 20px;">
<el-button type="primary" @click="setMemberUserUpdateEnterprise">修 改</el-button>
<el-button @click="attestationShow = false">取 消</el-button>
</div>
<div v-if="enterpriseFrom.status === 0" style="text-align: center;margin-top: 20px;">
<el-button type="primary" @click="submit">上 传</el-button>
<el-button @click="attestationShow = false">取 消</el-button>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</div>
</template>
<script>
import {
createUser,
updateUser,
deleteUser,
getUserPage,
exportUserExcel,
operationLogApi,
seTupdateBackletter,
memberGetAuthIdcardInfo,
memberGetAuthEnterpriseInfo,
memberUserAuditIdCard,
memberUserUpdateIdCard,
memberUserUpdateEnterprise, setUserUpdateStatus, userCreateAuditEnterprise
} from "@/api/member/user";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import FileUpload from "@/components/FileUpload"
import ImageUpload from "@/components/ImageUpload";
import uploadImage from "@/components/UploadImage";
import {CommonStatusEnum} from "@/utils/constants";
import {changeUserStatus} from "@/api/system/user";
let stateId = {
0:'审核中',
1:'审核通过',
2:'审核不通过',
3:'已过期'
}
export default {
name: "User",
components: {
FileUpload,
ImageUpload,uploadImage
},
data() {
return {
totalLog:0,
stateId,
IdDetails:{},
enterpriseFrom:{},
guaranteeUrl:undefined,
DICT_TYPE,
getDictDatas,
// audit_status
activeName:"1",
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 用户列表
list: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
dateRangeLoginDate: [],
dateRangeCreateTime: [],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
isDeal:undefined,// 是否成交
searchKey:undefined,//关键字
auditStatus:undefined,//审核状态
authType:undefined,//关键字
},
// 表单参数
form: {},
// 表单校验
rulesId: {
name: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
cardType: [{ required: true, message: "证件类型不能为空", trigger: "blur" }],
cardNumber: [{ required: true, message: "证件号码不能为空", trigger: "blur" }],
img1: [{ required: true, message: "身份正面照不能为空", trigger: "blur" }],
img2: [{ required: true, message: "身份正面照不能为空", trigger: "blur" }],
},
rulesEnterprise: {
name: [{required: true, message: "企业名称不能为空", trigger: "blur"}],
legalName: [{required: true, message: "企业法人不能为空", trigger: "blur"}],
cardNumber: [{required: true, message: "证件号码不能为空", trigger: "blur"}],
img1: [{required: true, message: "证件照不能为空", trigger: "blur"}],
},
publicObj:undefined,
operationLogShow:false,
guaranteeShow:false,
operationLogFrom:{
page:1,
row:10,
userId:undefined
},
operationLogList:[],
attestationShow:false
};
},
created() {
this.resetId();
this.resetEnterprise()
this.getList();
},
methods: {
deleteFn(row){
console.log(row)
this.$modal.confirm(`是否要删除昵称为${row.nickname}的会员`).then(function (){
return deleteUser(row.id)
}).then( res => {
if(res.code === 0) this.getList(); this.$message.success('删除成功')
}).catch(() =>{
this.$message.success('删除失败')
}
)
},
//导出
exportFn(){
this.$modal.confirm('是否确认导出所有用户数据项?').then(() => {
this.exportLoading = true;
return exportUserExcel(this.queryParams);
}).then(response => {
this.$download.excel(response, '${table.classComment}.xls');
this.exportLoading = false;
}).catch(() => {});
},
// 用户状态修改
handleStatusChange(row) {
let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
this.$modal.confirm('确认要"' + text + '""' + row.nickname + '"用户吗?').then(function() {
return setUserUpdateStatus({id:row.id,status:row.status})
}).then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function() {
row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
: CommonStatusEnum.ENABLE;
});
},
/** 查询列表 */
getList() {
this.loading = true;
// 处理查询参数
let params = {...this.queryParams};
this.addBeginAndEndTime(params, this.dateRangeLoginDate, 'loginDate');
this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
// 执行查询
getUserPage(params).then(response => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
});
},
/** 表单重置 */
resetId(){
this.IdDetails = {
auditRemark: undefined,
auditTime: undefined,
cardNumber: undefined,
cardType: 0,
createTime: undefined,
id: 0,
img1: undefined,
img2: undefined,
name: '',
status: 0,
userId: 0
}
},//清空身份证
resetEnterprise(){
this.enterpriseFrom = {
auditRemark: undefined,
auditTime: undefined,
cardNumber: undefined,
createTime: undefined,
id: undefined,
img1: undefined,
img2: undefined,
legalName: undefined,
name: undefined,
status: 0,
userId: undefined
}
},//清空企业
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRangeLoginDate = [];
this.dateRangeCreateTime = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 保函证书
guarantee(row) {
this.publicObj = row;
this.guaranteeShow = true;
this.guaranteeUrl = row.backLetterImg;
},
// 操作日志
operationLogFn(row){
this.publicObj = row;
this.operationLogFrom.page = 1;
this.operationLogFrom.userId = row.id
this.operationLogShow = true;
this.operationLogList = [];
this.getOperationLogList();
},
getOperationLogList(){
operationLogApi(this.operationLogFrom).then(r=>{
if(r.code === 0){
this.operationLogList = r.data.list
this.totalLog = r.data.total
}
})
},
setGuarantee(){
seTupdateBackletter({userId:this.publicObj.id,backLetter:this.guaranteeUrl}).then(r=>{
if(r.code === 0){
this.guaranteeShow = false;
this.guaranteeUrl = '';
this.$message.success('保存成功');
}
})
},
identityFn(row,val){
this.attestationShow = true;
this.activeName = val;
this.publicObj = row;
if(val == 1){
this.getIdentityDetails();
}else {
this.getEnterpriseFn();
}
},
handleClick(val){
if(val.name == 1){
this.getIdentityDetails();
}else {
this.getEnterpriseFn();
}
},
getIdentityDetails(){
this.resetId();
memberGetAuthIdcardInfo({userId:this.publicObj.id}).then(r=>{
if(r.code === 0 && !!r.data){
this.IdDetails = r.data
}
})
},
getEnterpriseFn(){
this.resetEnterprise();
memberGetAuthEnterpriseInfo({userId:this.publicObj.id}).then(r => {
if(r.code === 0 && !!r.data){
this.enterpriseFrom = r.data
}
})
},
//身份证审核
idCardAuditFn(val){
let p = {
auditStatus:val,
userCardAuthId:this.IdDetails.id,
auditRemark:this.IdDetails.auditRemark
}
if(val === 3){
p.auditRemark = undefined
}
memberUserAuditIdCard(p).then(r => {
if(r.code === 0){
this.getList()
this.getIdentityDetails()
}
})
},
// 企业证书审核
certificateVerificationFn(val){
let p = {
auditStatus:val,
userCardAuthId:this.enterpriseFrom.id,
auditRemark:this.enterpriseFrom.auditRemark
}
if(val === 3){
p.auditRemark = undefined
}
memberUserAuditEnterprise(p).then(r => {
if(r.code === 0){
this.getList()
this.getEnterpriseFn();
}
})
},
setMemberUserUpdateIdCard(){
this.$refs.formId.validate(valid =>{
if(valid){
let p ={
cardNumber:this.IdDetails.cardNumber,
cardType:this.IdDetails.cardType,
img1:this.IdDetails.img1,
img2:this.IdDetails.img2,
name:this.IdDetails.name,
userCardAuthId:this.IdDetails.id,
auditPass:this.IdDetails.status === 3 ? true : false,
} ;
memberUserUpdateIdCard(p).then(r => {
if(r.code === 0){
if(this.IdDetails.status === 3){
this.$confirm('是否要将当前状态修改为审核成功？', '状态修改', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.idCardAuditFn(2);
}).catch(() => {
this.getIdentityDetails()
});
}
this.getList()
this.$message.success('修改成功');
}
})
}
})
},
setMemberUserUpdateEnterprise(){
this.$refs.formEnter.validate(valid =>{
if(valid){
let p = {
cardNumber:this.enterpriseFrom.cardNumber,
img1:this.enterpriseFrom.img1,
img2:this.enterpriseFrom.img2,
legalName:this.enterpriseFrom.legalName,
name:this.enterpriseFrom.name,
userEnterpriseAuthId:this.enterpriseFrom.id,
auditPass:this.enterpriseFrom.status === 3 ? true : false,
}
memberUserUpdateEnterprise(p).then(r =>{
if(r.code === 0){
if(this.enterpriseFrom.status === 3){
this.$confirm('是否要将当前状态修改为审核成功?', '状态修改', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.certificateVerificationFn(2);
}).catch(() => {
this.getEnterpriseFn();
});
}
this.getList()
this.$message.success('修改成功');
}
})
}
})
},
authentication(row){
if(!row.identityAuditStatus && !row.enterpriseAuditRemark){
return '否'
}else if(row.identityAuditStatus >= 0 && row.enterpriseAuditRemark >= 0){
return '双认证'
} else if(row.identityAuditStatus >= 0){
return '身份'
}else if(row.enterpriseAuditRemark >= 0){
return '营业'
}
},
submit(){
let p = {
cardNumber:this.enterpriseFrom.cardNumber,
img1:this.enterpriseFrom.img1,
img2:this.enterpriseFrom.img2,
legalName:this.enterpriseFrom.legalName,
name:this.enterpriseFrom.name,
userEnterpriseAuthId:this.enterpriseFrom.id,
userId:this.publicObj.id
}
userCreateAuditEnterprise(p).then(r => {
console.log(r);
if(r.code === 0){
this.$message.success('添加成功!');
this.enterpriseFrom.status = 3
this.enterpriseFrom.auditTime = new Date().getTime()
}
})
}
},
watch:{
attestationShow(newVal){
if(!newVal){
this.resetId();
this.resetEnterprise()
this.publicObj = undefined;
}
}
}
};
</script>
<style lang="scss" scoped>
.details{
.el-input {
width: 300px;
}
.el-textarea{
width: 300px;
}
.el-button{
width: 180px;
height: 50px;
margin: 0 10px;
}
}
</style>