crowd-test-service-frontend/src/components/authen/AuthenticationManage.vue

<template>
  <div class="create-container" v-loading="loading">
    <div class="create-body">
      <div class="title">审核认证信息</div>
      <el-table
        :data="handlingAuthList"
        :row-class-name="rowClassName"
        stripe
        style="width: 100%">
        <el-table-column prop="id" label="编号">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userInfo" label="用户信息">
          <template slot-scope="scope">
            <span style="cursor: pointer">
              <el-link type="primary">{{scope.row.userName}}</el-link>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="认证类型">
          <template slot-scope="scope">
            <span>
              <el-tag v-if="scope.row.type=='personal'" type="success">个人</el-tag>
              <el-tag v-if="scope.row.type=='agency'">机构</el-tag>
              <el-tag v-if="scope.row.type=='enterprise'" type="warning">企业</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="detail" label="认证详情">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleAuthDetail(scope.row.userId,scope.row.type)">认证详情</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="认证状态">
          <template slot-scope="scope">
            <span>
              <el-tag :type="scope.row.authStatus.style">{{scope.row.authStatus.text}}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="申请时间" width="180">
          <template slot-scope="scope">
            <span>{{reformTime(new Date(scope.row.applytime))}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleAuthenticationPass(scope.row.userId,scope.row.type)">
              通过
            </el-button>
            <el-button type="danger" size="mini" @click="handleAuthenticationReject(scope.row.userId,scope.row.type)">
              驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="认证详情" :visible.sync="showDialog" center width="40%">
        <el-form :model="authInfoDetail" label-width="120px" label-position="right">
          <el-form-item label="类型：">
            <span>
              <el-tag v-if="authInfoDetail.type=='personal'" type="success">个人</el-tag>
              <el-tag v-if="authInfoDetail.type=='agency'">机构</el-tag>
              <el-tag v-if="authInfoDetail.type=='enterprise'" type="warning">企业</el-tag>
            </span>
          </el-form-item>
          <el-form-item label="姓名：" v-if="authInfoDetail.type == 'personal'">
            <span>{{authInfoDetail.realName}}</span>
          </el-form-item>
          <el-form-item label="身份证号：" v-if="authInfoDetail.type == 'personal'">
            <span>{{authInfoDetail.IDCard}}</span>
          </el-form-item>
          <el-form-item label="身份证照：" v-if="authInfoDetail.type == 'personal'">
            <span>
              <el-image
                style="width: 100px;"
                :src="authInfoDetail.IDCardPositivePhoto"
                fit="scale-down"></el-image>
            </span>
          </el-form-item>
<!--          <el-form-item label="银行账号：">-->
<!--            <span>{{authInfoDetail.bankAccount}}</span>-->
<!--          </el-form-item>-->
          <el-form-item label="地址：">
            <span>{{authInfoDetail.address}}</span>
          </el-form-item>
          <el-form-item label="申请时间：">
            <span>{{reformTime(new Date(authInfoDetail.applyTime))}}</span>
          </el-form-item>

          <el-form-item label="企业名称：" v-if="authInfoDetail.type == 'enterprise'">
            <span>{{authInfoDetail.enterpriseName}}</span>
          </el-form-item>
          <el-form-item label="法人姓名：" v-if="authInfoDetail.type == 'enterprise'">
            <span>{{authInfoDetail.legalPersonName}}</span>
          </el-form-item>
          <el-form-item label="营业执照：" v-if="authInfoDetail.type == 'enterprise'">
            <span>
              <el-image
                style="width: 100px;"
                :src="authInfoDetail.businessLicensePhoto"
                fit="scale-down"></el-image>
            </span>
          </el-form-item>
          <el-form-item label="统一信用代码：" v-if="authInfoDetail.type == 'enterprise'">
            <span>{{authInfoDetail.unifiedSocialCreditCode}}</span>
          </el-form-item>

          <el-form-item label="机构名称：" v-if="authInfoDetail.type == 'agency'">
            <span>{{authInfoDetail.evaluationAgencyName}}</span>
          </el-form-item>
          <el-form-item label="机构能力：" v-if="authInfoDetail.type == 'agency'">
            <span v-for="item in authInfoDetail.evaluationAgencyAbilityList"> <el-tag>{{item}}</el-tag>
            </span>
          </el-form-item>
          <el-form-item label="机构资源：" v-if="authInfoDetail.type == 'agency'">
            <span v-for="item in authInfoDetail.evaluationAgencyResourceList"> <el-tag>{{item.type}} ( {{item.name}} ) ：&nbsp; [总数：{{item.totalNum}} ,可用数量：{{item.availableNum}}]</el-tag>
            </span>
          </el-form-item>
          <el-form-item label="机构Logo：" v-if="authInfoDetail.type == 'agency'">
            <span>
              <el-image
                style="width: 100px;"
                :src="authInfoDetail.agencyPhoto"
                fit="scale-down"></el-image>
            </span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="info" size="mini" @click="hideAuthDialog()">返回</el-button>

          <el-button type="danger" size="mini"
                     @click="handleAuthenticationReject(authInfoDetail.userId,authInfoDetail.type)">驳回
          </el-button>

          <el-button type="primary" size="mini"
                     @click="handleAuthenticationPass(authInfoDetail.userId,authInfoDetail.type)">通过
          </el-button>
        </div>
      </el-dialog>
      <!--<el-pagination-->
      <!--:page-size="20"-->
      <!--hide-on-single-page-->
      <!--:pager-count="5"-->
      <!--:current-page.sync="currentPage"-->
      <!--layout="prev, pager, next"-->
      <!--@current-change="handleCurrentChange"-->
      <!--:total="100">-->
      <!--</el-pagination>-->
    </div>
  </div>
</template>

<script>
    import {
        checkPassAuth,
        checkRejectAuth,
        getAllHandledAuthInfo,
        getAllHandlingAuthInfo,
        getCurrentAgencyAuthInfo,
        getCurrentEnterpriseAuthInfo,
        getCurrentIndividualAuthenInfo,
        getFormalTimeFromDate
    } from '@/js/index'
    import {notify} from '@/constants/index'

    export default {
        name: 'AuthenticationManage',
        data () {
            return {
                currentPage: 1,
                loading: false,
                showDialog: false,
                authenticationStatusUntreated: '审核中',
                authenticationStatusPass: '审核通过',
                authenticationStatusReject: '审核未通过',
                handlingAuthList: [],
                handledAuthList: [],
                authInfoDetail: {
                    userId: '',
                    type: '',
                    realName: '',
                    IDCard: '',
                    IDCardPositivePhoto: '',
                    bankAccount: '',
                    address: '',
                    applyTime: '',

                    enterpriseName: '',
                    legalPersonName: '',
                    businessLicensePhoto: '',
                    unifiedSocialCreditCode: '',

                    evaluationAgencyName: '',
                    evaluationAgencyAbilityList: [],
                    evaluationAgencyResourceList: [],
                    agencyPhoto: '',
                    updateTime: '',
                    expireTime: ''
                }
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            init () {
                this.getHandlingAuthList()
                this.getHandledAuthList()
            },
            //获取所有未认证信息
            getHandlingAuthList () {
                this.showLoading()
                getAllHandlingAuthInfo(this.getHandlingAuthListSuccess, this.getHandlingAuthListFail)
            },
            //获取所有已认证信息
            getHandlingAuthListSuccess (res) {
                this.handlingAuthList = res
                this.hideLoading()
            },
            getHandlingAuthListFail (error) {
                this.hideLoading()
                notify('error', '获取认证信息失败：' + error.data)
            },
            getHandledAuthList () {
                this.showLoading()
                getAllHandledAuthInfo(this.getHandledAuthListSuccess, this.getHandledAuthListFail)
            },
            getHandledAuthListSuccess (res) {
                this.handledAuthList = res
                this.hideLoading()
            },
            getHandledAuthListFail (error) {
                this.hideLoading()
                notify('error', '获取已认证信息失败：' + error.data)
            },
            handleCurrentChange (param) {
                console.log(param)
            },
            handleAuthenticationPass (userId, type) {
                this.showLoading()
                checkPassAuth(type, userId, this.handleAuthenticationPassSuccess, this.handleAuthenticationPassFail)
                this.showDialog = false
                // item.status = this.authenticationStatusPass
                // console.log('通过')
            },
            handleAuthenticationPassSuccess (res) {
                this.hideLoading()
                this.getHandlingAuthList()
                console.log(res)
            },
            handleAuthenticationPassFail (error) {
                this.hideLoading()
                console.log(error)
                notify('error', '通过失败：' + error.data)
            },
            handleAuthenticationReject (userId, type) {
                this.$prompt('请输入驳回本申请的原因', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then((event) => {
                    const explain = event.value
                    console.log(explain)
                    this.showLoading()
                    const data = {
                        explain: event.value
                    }
                    checkRejectAuth(type, userId, data, this.handleAuthenticationRejectSuccess, this.handleAuthenticationRejectFail)
                }).catch(() => {
                })
            },
            handleAuthenticationRejectSuccess (res) {
                this.hideLoading()
                this.getHandlingAuthList()
                notify('success', '驳回成功')
                console.log(res)
            },
            handleAuthenticationRejectFail (error) {
                this.hideLoading()
                console.log(error)
                notify('error', '拒绝失败：' + error.data)
            },
            handleAuthDetail (userId, type) {
                this.authInfoDetail.userId = userId
                this.authInfoDetail.type = type
                this.getAuthInfo(userId, type)
            },
            showLoading () {
                this.loading = true
            },
            hideLoading () {
                this.loading = false
            },
            reformTime (date) {
                return getFormalTimeFromDate(date)
            },
            rowClassName ({row, rowIndex}) {
                //把每一行的索引放进row.id
                row.id = rowIndex + 1
            },
            showAuthDialog () {
                this.showDialog = true
            },
            hideAuthDialog () {
                this.showDialog = false
            },
            getAuthInfo (userId, type) {
                this.showLoading()
                if (type == 'personal') {
                    getCurrentIndividualAuthenInfo(userId, this.getCurrentIndividualAuthenInfoSuccess, this.getCurrentIndividualAuthenInfoFail)
                } else if (type == 'enterprise') {
                    getCurrentEnterpriseAuthInfo(userId, this.getCurrentEnterpriseAuthInfoSuccess, this.getCurrentEnterpriseAuthInfoFail)
                } else if (type == 'agency') {
                    getCurrentAgencyAuthInfo(userId, this.getCurrentAgencyAuthInfoSuccess, this.getCurrentAgencyAuthInfoFail)
                }
            },
            getCurrentIndividualAuthenInfoSuccess (res) {
                this.hideLoading()
                console.log(res)
                this.authInfoDetail.realName = res.realName
                this.authInfoDetail.IDCard = res.idcard
                this.authInfoDetail.IDCardPositivePhoto = res.idCardPositivePhotoi
                this.authInfoDetail.bankAccount = res.bankAccount
                this.authInfoDetail.address = res.address
                this.authInfoDetail.applyTime = res.applyTime
                this.showAuthDialog()
                console.log(res)

            },
            getCurrentIndividualAuthenInfoFail (error) {
                this.hideLoading()
                notify('error', '获取个人认证信息出错：' + error.data)
            },
            getCurrentEnterpriseAuthInfoSuccess (res) {
                this.hideLoading()
                this.authInfoDetail.enterpriseName = res.enterpriseName
                this.authInfoDetail.legalPersonName = res.legalPersonName
                this.authInfoDetail.businessLicensePhoto = res.businessLicensePhoto
                this.authInfoDetail.bankAccount = res.bankAccount
                this.authInfoDetail.address = res.address
                this.authInfoDetail.applyTime = res.applyTime
                this.authInfoDetail.unifiedSocialCreditCode = res.unifiedSocialCreditCode
                this.showAuthDialog()
            },
            getCurrentEnterpriseAuthInfoFail (error) {
                this.hideLoading()
                notify('error', '获取企业认证信息出错：' + error.data)
            },
            getCurrentAgencyAuthInfoSuccess (res) {
                this.hideLoading()
              this.authInfoDetail.bankAccount = res.bankAccount
              this.authInfoDetail.address = res.address
              this.authInfoDetail.applyTime = res.applyTime
                this.authInfoDetail.evaluationAgencyName = res.evaluationAgencyName
                this.authInfoDetail.evaluationAgencyAbilityList = res.evaluationAgencyAbilityList
                this.authInfoDetail.evaluationAgencyResourceList = res.evaluationAgencyResourceList
                this.authInfoDetail.agencyPhoto = res.agencyPhoto
                this.authInfoDetail.updateTime = res.updateTime
              this.showAuthDialog()
            },
            getCurrentAgencyAuthInfoFail (error) {
                this.hideLoading()
                notify('error', '获取机构认证信息出错：' + error.data)
            }
        }
    }
</script>

<style scoped>

</style>