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="150px" 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.gender}}</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="身份证反面照：" v-if="authInfoDetail.type == 'personal'">
            <span>
              <el-image
                style="width: 100px;"
                :src="authInfoDetail.idCardBackPhoto"
                fit="scale-down"></el-image>
            </span>
          </el-form-item>
          <el-form-item label="身份证截止时间：" v-if="authInfoDetail.type == 'personal'">
            <span>{{authInfoDetail.idCardDeadTime}}</span>
          </el-form-item>
          <el-form-item label="地址：">
            <span>{{authInfoDetail.address}}</span>
          </el-form-item>
          <el-form-item label="角色：" v-if="authInfoDetail.type == 'personal'">
            <el-checkbox-group v-model="authInfoDetail.roleList" disabled>
              <el-checkbox :label="1">发包</el-checkbox>
              <el-checkbox :label="0">接包</el-checkbox>
            </el-checkbox-group>
<!--            <span>{{authInfoDetail.roleList}}</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>
              <el-image
                style="width: 100px;"
                :src="authInfoDetail.businessLicensePhoto"
                fit="scale-down"></el-image>
            </span>
          </el-form-item>
          <el-form-item label="企业地址：">
            <span>{{authInfoDetail.address}}</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-item label="法人姓名：" v-if="authInfoDetail.type == 'agency'">
            <span>{{authInfoDetail.legalPersonName}}</span>
          </el-form-item>
          <el-form-item label="法人性别：" v-if="authInfoDetail.type == 'agency'">
            <span>{{authInfoDetail.gender}}</span>
          </el-form-item>
          <el-form-item label="法人身份证号：" v-if="authInfoDetail.type == 'agency'">
            <span>{{authInfoDetail.idCardNum}}</span>
          </el-form-item>
          <el-form-item label="法人身份证正面照：" v-if="authInfoDetail.type == 'agency'">
            <span>
              <el-image
                style="width: 100px;"
                :src="authInfoDetail.idCardPositivePhoto"
                fit="scale-down"></el-image>
            </span>
          </el-form-item>
          <el-form-item label="法人身份证反面照：" v-if="authInfoDetail.type == 'agency'">
            <span>
              <el-image
                style="width: 100px;"
                :src="authInfoDetail.idCardBackPhoto"
                fit="scale-down"></el-image>
            </span>
          </el-form-item>
          <el-form-item label="身份证截止时间：" v-if="authInfoDetail.type == 'agency'">
            <span>{{authInfoDetail.idCardDeadTime}}</span>
          </el-form-item>
<!--          <el-form-item label="企业角色：" v-if="authInfoDetail.type == 'agency'">-->
<!--            <span>{{authInfoDetail.roleList}}</span>-->
<!--          </el-form-item>-->

          <el-form-item label="企业角色：" v-if="authInfoDetail.type == 'agency'">
            <el-checkbox-group v-model="authInfoDetail.roleList" disabled>
              <el-checkbox :label="1">发包</el-checkbox>
              <el-checkbox :label="0">接包</el-checkbox>
            </el-checkbox-group>
            <!--            <span>{{authInfoDetail.roleList}}</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>
        <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: '',
                    realName: "",
                    applyTime: "",
                    checkTime: "",
                    explain: "",
                    gender: "",
                    idCard: "",
                    idCardBackPhoto: "",
                    idCardDeadTime: "",
                    idCardPositivePhoto: "",
                    isAuthentication: 0,
                    isDeleted: 0,
                    roleList: [],
                    address: "",

                    type: '',
                    bankAccount: '',
                    enterpriseName: '',
                    legalPersonName: '',
                    businessLicensePhoto: '',
                    unifiedSocialCreditCode: '',

                    agencyPhoto: "",
                    evaluationAgencyName: "",
                    expireTime: '',
                    idCardNum: "",
                    evaluationAgencyAbilityList: [],
                    evaluationAgencyResourceList: [],
                    updateTime: '',
                }
            }
        },
        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', '驳回成功')
                this.hideAuthDialog()
                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.applyTime = res.applyTime
                this.authInfoDetail.checkTime = res.checkTime
                this.authInfoDetail.explain = res.explain
                this.authInfoDetail.gender = res.gender
                this.authInfoDetail.idCard = res.idCard
                this.authInfoDetail.idCardBackPhoto = res.idCardBackPhoto
                this.authInfoDetail.idCardDeadTime = res.idCardDeadTime
                this.authInfoDetail.idCardPositivePhoto = res.idCardPositivePhoto
                this.authInfoDetail.isAuthentication = res.isAuthentication
                this.authInfoDetail.isDeleted = res.isDeleted
                this.authInfoDetail.roleList = res.roleList
                this.authInfoDetail.address = res.address
                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.data.bankAccount
              this.authInfoDetail.legalPersonName = res.data.legalPersonName
              this.authInfoDetail.businessLicensePhoto = res.data.businessLicensePhoto
              this.authInfoDetail.address = res.data.address
              this.authInfoDetail.applyTime = res.data.applyTime
              this.authInfoDetail.evaluationAgencyName = res.data.evaluationAgencyName
              this.authInfoDetail.evaluationAgencyAbilityList = res.data.evaluationAgencyAbilityList
              this.authInfoDetail.evaluationAgencyResourceList = res.data.evaluationAgencyResourceList
              this.authInfoDetail.agencyPhoto = res.data.agencyPhoto
              this.authInfoDetail.updateTime = res.data.updateTime
              this.authInfoDetail.checkTime = res.data.checkTime
              this.authInfoDetail.explain = res.data.explain
              this.authInfoDetail.gender = res.data.gender
              this.authInfoDetail.idCardNum = res.data.idCardNum
              this.authInfoDetail.idCardBackPhoto = res.data.idCardBackPhoto
              this.authInfoDetail.idCardDeadTime = res.data.idCardDeadTime
              this.authInfoDetail.idCardPositivePhoto = res.data.idCardPositivePhoto
              this.authInfoDetail.isAuthentication = res.data.isAuthentication
              this.authInfoDetail.isDeleted = res.data.isDeleted
              this.authInfoDetail.roleList = res.data.roleList
              this.showAuthDialog()
            },
            getCurrentAgencyAuthInfoFail (error) {
                this.hideLoading()
                notify('error', '获取机构认证信息出错：' + error.data)
            }
        }
    }
</script>

<style scoped>

</style>