<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="$t('关键字')" prop="nickname"> <el-input v-model="queryParams.searchKey" :placeholder="$t('搜索昵称、姓名、手机、Email')" clearable @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item :label="$t('成交')" prop="mobile"> <el-select v-model="queryParams.isDeal"> <el-option v-for="item in [{label:$t('全部'),value:''},{label:$t('是'),value:true},{label:$t('否'),value:false}]" :value="item.value" :label="item.label" :key="item.value" ></el-option> </el-select> </el-form-item> <el-form-item :label="$t('认证')" prop="password"> <el-select v-model="queryParams.authType"> <el-option v-for="item in [{label: $t('全部'),value: ''},{label:$t('营业执照认证'),value:1},{label:$t('身份证认证'),value:2},{label:$t('双认证'),value:3}]" :key="item.value" :value="item.value" :label="item.label"></el-option> </el-select> </el-form-item> <el-form-item :label="$t('审核状态')" 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">{{$t('搜索')}}</el-button> <el-button icon="el-icon-refresh" @click="resetQuery">{{$t('重置')}}</el-button> <el-button :loading="exportLoading" type="primary" @click="exportFn">{{$t('导 出')}}</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="$t('公司名称')" align="center" prop="enterpriseName" /> <el-table-column :label="$t('用户昵称')" align="center" prop="nickname" /> <el-table-column :label="$t('真实姓名')" align="center" prop="identityName" /> <el-table-column :label="$t('区号')"> <template v-slot:default = 'scope'> +{{scope.row.areaCode ? `${scope.row.areaCode}`:''}} </template> </el-table-column> <el-table-column :label="$t('手机号')" show-overflow-tooltip align="center" prop="mobile" > </el-table-column> <el-table-column :label="$t('成交')" align="center" prop="customerStatus" show-overflow-tooltip > <template v-slot="{row}"> {{row.customerStatus === 3 ? $t('成交') : $t('非成交')}} </template> </el-table-column> <el-table-column :label="$t('认证')" align="center" :formatter="authentication" /> <el-table-column :label="$t('状态')" 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="$t('身份证审核状态')" align="center" prop="createTime" width="180"> <template slot-scope="scope"> <div v-if="!scope.row.identityAuditStatus">{{$t('未提交')}}</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.row.identityAuditRemark" placement="bottom"> <i class="el-icon-question"></i> </el-tooltip> </template> </el-table-column> <el-table-column :label="$t('营业执照审核状态')" align="center" prop="createTime" width="180"> <template slot-scope="scope"> <div v-if="!scope.row.enterpriseAuditStatus">{{$t('未提交')}}</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.row.rowenterpriseAuditRemark" placement="bottom"> <i class="el-icon-question"></i> </el-tooltip> </template> </el-table-column> <el-table-column :label="$t('创建时间')" align="center" prop="createTime" width="180"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200px"> <template slot-scope="scope" > <el-button size="mini" type="text" @click="guarantee(scope.row)">{{$t('保函/证书')}}</el-button> <el-button size="mini" type="text" @click="operationLogFn(scope.row)">{{$t('操作日志')}}</el-button> <el-button size="mini" type="text" @click="identityFn(scope.row , '1')">{{$t('身份证')}}</el-button> <el-button size="mini" type="text" @click="identityFn(scope.row, '2')">{{$t('营业执照')}}</el-button> <el-button size="mini" type="text" @click="deleteFn(scope.row)">{{$t('删 除')}}</el-button> </template> </el-table-column> </el-table> <!-- 分页组件 --> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList"/> <el-dialog title="保函/证书" :visible.sync="guaranteeShow" :before-close="()=>{guaranteeUrl = ''; guaranteeShow = false;}" width="50%"> <el-form> <el-form-item :label="$t('保函/证书')"> <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>{{$t('可上传图片,pdf文档')}}</div> </el-col> </el-row> </el-form-item> </el-form> <div style="text-align: center;"><el-button @click="setGuarantee">{{$t('保 存')}}</el-button></div> </el-dialog> <el-dialog :title="$t('操作日志')" :visible.sync="operationLogShow" width="50%"> <el-table :data="operationLogList"> <el-table-column :label="$t('标题')" prop="title"></el-table-column> <el-table-column :label="$t('操作内容')" prop="content"></el-table-column> <el-table-column :label="$t('操作人')" prop="userId"> <template v-slot="{row}"> {{list.find(i => i.id == row.userId).identityName}} </template> </el-table-column> <el-table-column :label="$t('操作时间')"> <template v-slot:default ="scope"> {{parseTime(scope.row.createTime) }} </template> </el-table-column> <el-table-column :label="$t('操作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="$t('认证')" :visible.sync="attestationShow" width="80%"> <div class="details"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane :label="$t('身份证')" name="1"> <div style="padding:0 40px;box-sizing: border-box;"> <el-form :disabled="[2,3].includes(IdDetails.status) && modifyIdCard" ref="formId" label-position="left" label-width="100px" :rules="rulesId" :model="IdDetails" > <el-form-item :label="$t('姓名')" prop="name"> <el-input v-model="IdDetails.name"></el-input> </el-form-item> <el-form-item :label="$t('证件类型')" prop="cardType"> <dict-selector v-model="IdDetails.cardType" :type="DICT_TYPE.CERTIFICATE_TYPE" ></dict-selector> </el-form-item> <el-form-item :label="$t('证件号码')" prop="cardNumber"> <el-input v-model="IdDetails.cardNumber"></el-input> </el-form-item> <el-form-item :label="$t('证件正面照')" prop="img1"> <div> <el-input readonly 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="$t('证件背面照')" prop="img2"> <div> <el-input readonly 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="$t('审核状态')" v-if="modifyIdCard && IdDetails.status !== 0 "> {{getDictDatas(DICT_TYPE.AUDIT_STATUS)[IdDetails.status].label}} </el-form-item> <el-form-item :label="$t('审核时间')" v-if="[2,3].includes(IdDetails.status) && modifyIdCard"> {{parseTime(IdDetails.auditTime)}} </el-form-item> <el-form-item v-if="modifyIdCard && IdDetails.status !== 0" :label="$t('审核备注')"> <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)">{{$t('审核通过')}}</el-button> <el-button type="primary" @click="idCardAuditFn(3)">{{$t('审核不通过')}}</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" v-if="modifyIdCard" @click="modifyIdCard = false;">{{$t('修 改')}}</el-button> <el-button type="primary" v-else @click="setMemberUserUpdateIdCard">{{$t('提交审核')}}</el-button> <el-button @click="attestationShow = false">{{$t('取 消')}}</el-button> </div> <div v-if="IdDetails.status === 0" style="text-align: center;margin-top: 20px;"> <el-button type="primary" @click="submitId">{{$t('上 传')}}</el-button> <el-button @click="attestationShow = false">{{$t('取 消')}}</el-button> </div> </div> </el-tab-pane> <el-tab-pane :label="$t('营业执照')" name="2" > <div style="width: 500px;padding:0 40px;box-sizing: border-box;"> <el-form :disabled="modifyLicense && [2,3].includes(enterpriseFrom.status)" :rules="rulesEnterprise" :model="enterpriseFrom" label-position="left" ref="formEnter" label-width="100px"> <el-form-item :label="$t('企业名称')" prop="name"> <el-input v-model="enterpriseFrom.name" ></el-input> </el-form-item> <el-form-item :label="$t('企业法人')" prop="legalName"> <el-input v-model="enterpriseFrom.legalName" ></el-input> </el-form-item> <el-form-item :label="$t('证件号码')" prop="cardNumber"> <el-input v-model="enterpriseFrom.cardNumber"></el-input> </el-form-item> <el-form-item :label="$t('证件照')" prop="img1"> <div> <el-input readonly 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="$t('附件')"> <el-input readonly v-model="enterpriseFrom.img2"></el-input> <ImageUpload :isShowTip="false" :limit="1" v-model="enterpriseFrom.img2"></ImageUpload> </el-form-item> <el-form-item v-if="modifyLicense && enterpriseFrom.status !== 0 " :label="$t('审核状态')">{{getDictDatas(DICT_TYPE.AUDIT_STATUS)[enterpriseFrom.status].label}}</el-form-item> <el-form-item v-if="[2,3].includes(enterpriseFrom.status) && modifyLicense " :label="$t('审核时间')">{{parseTime(enterpriseFrom.auditTime)}}</el-form-item> <el-form-item v-if="modifyLicense && enterpriseFrom.status !== 0" :label="$t('审核备注')"> <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)">{{$t('审核通过')}}</el-button> <el-button type="primary" @click="certificateVerificationFn(3)">{{$t('审核不通过')}}</el-button> <el-button @click="attestationShow = false">{{$t('取 消')}}</el-button> </div> <div v-if="enterpriseFrom.status === 2 || enterpriseFrom.status === 3" style="text-align: center;margin-top: 20px;"> <el-button type="primary" v-if="modifyLicense" @click="modifyLicense = false">{{$t('修 改')}}</el-button> <el-button type="primary" v-else @click="setMemberUserUpdateEnterprise">{{$t('提交审核')}}</el-button> <el-button @click="attestationShow = false">{{$t('取 消')}}</el-button> </div> <div v-if="enterpriseFrom.status === 0" style="text-align: center;margin-top: 20px;"> <el-button type="primary" @click="submit">{{$t('上 传')}}</el-button> <el-button @click="attestationShow = false">{{$t('取 消')}}</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, memberUserAuditEnterprise, createAuditIdCard } 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, listServiceUser, listSimpleUsers} from "@/api/system/user"; export default { name: "User", components: { FileUpload, ImageUpload,uploadImage }, data() { return { totalLog:0, 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: { page: 1, rows: 10, isDeal:undefined,// 是否成交 searchKey:undefined,//关键字 auditStatus:undefined,//审核状态 authType:undefined,//关键字 }, // 表单参数 form: {}, // 表单校验 rulesId: { name: [{ required: true, message: this.$t('用户昵称不能为空'), trigger: "blur" }], cardType: [{ required: true, message: this.$t('证件类型不能为空'), trigger: "blur" }], cardNumber: [{ required: true, message: this.$t('证件号码不能为空'), trigger: "blur" }], img1: [{ required: true, message: this.$t('身份正面照不能为空'), trigger: ['blur','change'] }], img2: [{ required: true, message: this.$t('身份正面照不能为空'), trigger: ['blur','change'] }], }, rulesEnterprise: { name: [{required: true, message: this.$t('企业名称不能为空'), trigger: "blur"}], legalName: [{required: true, message: this.$t('企业法人不能为空'), trigger: "blur"}], cardNumber: [{required: true, message: this.$t('证件号码不能为空'), trigger: "blur"}], img1: [{required: true, message: this.$t('证件照不能为空'), trigger: ['blur','change']}], }, publicObj:undefined, operationLogShow:false, guaranteeShow:false, operationLogFrom:{ page:1, row:10, userId:undefined }, operationLogList:[], attestationShow:false, modifyIdCard:true,//修改身份证 modifyLicense:true,//修改营业执照 }; }, created() { this.resetId(); this.resetEnterprise() this.getList(); }, methods: { deleteFn(row){ const nickname = row.nickname; this.$modal.confirm(`${this.$t('是否确认删除昵称为{nickname}的会员?', {nickname})}`).then(function (){ return deleteUser(row.id) }).then( res => { if(res.code === 0) this.getList(); this.$message.success(this.$t('删除成功')) }).catch(() =>{ // this.$message.success(this.$t('删除失败')) } ) }, //导出 exportFn(){ this.$modal.confirm(this.$t('是否确认导出所有用户数据项?')).then(() => { this.exportLoading = true; return exportUserExcel(this.queryParams); }).then(response => { this.$download.excel(response, `${this.$t('注册会员')}.xls`); this.exportLoading = false; }).catch(() => {}); }, // 用户状态修改 handleStatusChange(row) { let text = row.status === CommonStatusEnum.ENABLE ? this.$t('启用') : this.$t('停用'); this.$modal.confirm(this.$t('确认要"') + text + '""' + row.nickname + this.$t('"用户吗?')).then(function() { return setUserUpdateStatus({id:row.id,status:row.status}) }).then(() => { this.$modal.msgSuccess(text + this.$t('成功')); }).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: undefined, 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.page = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.dateRangeLoginDate = []; this.dateRangeCreateTime = []; this.queryParams = { page: 1, rows: 10, isDeal:undefined,// 是否成交 searchKey:undefined,//关键字 auditStatus:undefined,//审核状态 authType:undefined,//关键字 } 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.publicObj.backLetterImg = this.guaranteeUrl; this.guaranteeShow = false; this.$message.success(this.$t('保存成功')); } }) }, 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 } memberUserAuditIdCard(p).then(r => { if(r.code === 0){ this.$message.success(this.$t('修改成功')); this.getList() this.getIdentityDetails() } }) }, // 企业证书审核 certificateVerificationFn(val){ let p = { auditStatus:val, userEnterpriseAuthId:this.enterpriseFrom.id, auditRemark:this.enterpriseFrom.auditRemark } memberUserAuditEnterprise(p).then(r => { if(r.code === 0){ this.getList() this.getEnterpriseFn(); } }) }, setMemberUserUpdateIdCard(){ this.$refs.formId.validate(async 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:true, }; memberUserUpdateIdCard(p).then(r => { if(r.code === 0){ this.$message.success(this.$t('修改成功')) if(p.auditPass === true ){ this.getIdentityDetails() } this.getList() this.modifyIdCard = true; } }) } }) }, setMemberUserUpdateEnterprise(){ this.$refs.formEnter.validate(async 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:true, } memberUserUpdateEnterprise(p).then(r =>{ if(r.code === 0){ if(p.auditPass === true){ this.getEnterpriseFn(); } this.getList() this.modifyLicense = true; this.$message.success(this.$t('修改成功')); } }) } }) }, authentication(row){ if(!row.identityAuditStatus && !row.enterpriseAuditStatus){ return this.$t('否') }else if(!!row.identityAuditStatus && !!row.enterpriseAuditStatus){ return this.$t('双认证') } else if(row.identityAuditStatus >= 0){ return this.$t('身份') }else if(row.enterpriseAuditStatus >= 0){ return this.$t('营业') } }, 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 => { if(r.code === 0){ this.$message.success(this.$t('添加成功!')); this.enterpriseFrom.status = 2 this.enterpriseFrom.auditTime = new Date().getTime() this.getEnterpriseFn(); this.getList() } }) }, submitId(){ this.$refs.formId.validate(async 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, status:2, userId:this.publicObj.id }; createAuditIdCard(p).then(r => { if(r.code === 0){ this.$message.success(this.$t('添加成功!')); this.IdDetails.status = 2 this.IdDetails.auditTime = new Date().getTime() this.getIdentityDetails(); this.getList() } }) } }) } }, watch:{ attestationShow(newVal){ if(!newVal){ this.resetId(); this.resetEnterprise() this.publicObj = undefined; }else { this.modifyIdCard = true; this.modifyLicense = true; } } } }; </script> <style lang="scss" scoped> .details{ .el-input { width: 300px; } .el-textarea{ width: 300px; } } </style>