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.IDCardPhoto"
                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>{{authInfoDetail.evaluationAgencyAbilityList}}</span>
          </el-form-item>
          <el-form-item label="机构资源：" v-if="authInfoDetail.type == 'agency'">
            <span>{{authInfoDetail.evaluationAgencyResourceList}}</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: '',
        IDCardPhoto: '',
        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)
      // 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.IDCardPhoto = res.idcardPhoto
      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 () {
      this.hideLoading()
      this.authInfoDetail.enterpriseName = res.enterpriseName
      this.authInfoDetail.legalPersonName = res.legalPersonName
      this.authInfoDetail.businessLicensePhoto = res.businessLicensePhoto
    },
    getCurrentEnterpriseAuthInfoFail () {
      this.hideLoading()
      notify('error', '获取企业认证信息出错：' + error.data)
    },
    getCurrentAgencyAuthInfoSuccess () {
      this.hideLoading()
      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
    },
    getCurrentAgencyAuthInfoFail () {
      this.hideLoading()
      notify('error', '获取机构认证信息出错：' + error.data)
    }
  }
}
</script>

<style scoped>

</style>