yunshengtai-admin/src/views/shop/demandHall/authentication.vue

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <!-- <crudOperation :permission="permission" /> -->
      <div class="search-box">
        <el-select v-model="authorizationType" clearable placeholder="认证类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="authenticationState" clearable placeholder="审核状态">
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;" >
        <el-table-column prop="authorizationType" label="认证类型">
          <template slot-scope="scope">
            <span>{{scope.row.authorizationType == 1 ? '企业' : '个人'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseId" label="企业id" />
        <el-table-column prop="applicantId" label="申请人id" />
        <el-table-column prop="isLegalPerson" label="是否为企业法人">
          <template slot-scope="scope">
            <span>{{scope.row.authorizationType == 0 ? '不是' : '是'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="authorizationPath" label="授权申请书">
          <template slot-scope="scope">
            <a :href="scope.row.authorizationPath" style="color: #42b983" target="_blank">
              <img :src="scope.row.authorizationPath" alt="点击打开" class="el-avatar2">
            </a>
          </template>
        </el-table-column>
        <el-table-column  prop="enterpriseName" label="企业名称" />
        <el-table-column prop="creditCode" label="信用代码" />
        <el-table-column prop="industryId" label="行业id" />
        <el-table-column prop="enterpriseScale" label="企业规模" />
        <el-table-column prop="businessLicense" label="营业执照">
          <template slot-scope="scope">
            <a :href="scope.row.businessLicense" style="color: #42b983" target="_blank">
              <img :src="scope.row.businessLicense" alt="点击打开" class="el-avatar2">
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="bankAccount" label="对公银行账号" width="100" />
        <el-table-column prop="bankName" label="银行名称" />
        <el-table-column prop="bankBranch" label="开户网点" />
        <el-table-column  header-align="center" align="center" prop="prop" label="法人信息" >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">姓名：{{scope.row.legalPersonName}}<br/>身份证号：{{scope.row.legalPersonIdcard}}</div>
              <div>{{scope.row.legalPersonName}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="legalPersonName" label="法人姓名" />
        
        <el-table-column prop="legalPersonIdcard" label="身份证号" /> -->
        <!-- <el-table-column prop="idcardPicFront" label="身份证正面">
          <template slot-scope="scope">
            <a :href="scope.row.idcardPicFront" style="color: #42b983" target="_blank">
              <img :src="scope.row.idcardPicFront" alt="点击打开" class="el-avatar2">
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="idcardPicBehind" label="身份证背面">
          <template slot-scope="scope">
            <a :href="scope.row.idcardPicBehind" style="color: #42b983" target="_blank">
              <img :src="scope.row.idcardPicBehind" alt="点击打开" class="el-avatar2">
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="idcardPicHold" label="手持身份证">
          <template slot-scope="scope">
            <a :href="scope.row.idcardPicHold" style="color: #42b983" target="_blank">
              <img :src="scope.row.idcardPicHold" alt="点击打开" class="el-avatar2">
            </a>
          </template>
        </el-table-column> -->
        <el-table-column prop="authenticationState" label="认证状态">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.authenticationState == 0">未认证</el-tag>
            <el-tag type="" v-if="scope.row.authenticationState == 1">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.authenticationState == 2">认证通过</el-tag>
            <el-tooltip class="item" effect="dark" :content="scope.row.reason" placement="top-start">
              <el-tag type="danger" v-if="scope.row.authenticationState == 3">认证失败</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="reason" label="认证失败原因" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.authenticationState == 3">{{scope.row.reason}}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="showDialog(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="审核"
      :visible.sync="dialogVisible"
      width="500">
      <div>
        <el-form :model="authForm" label-width="100px">
          <el-form-item label="是否通过">
            <el-radio-group v-model="authForm.type" @change="radioChange">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="未通过理由" v-show="authForm.type == 0">
            <el-input type="textarea" v-model="authForm.reason"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="authSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="size"
      :page-sizes="[ 10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import crudEnterpriseAuthentication from '@/api/EnterpriseAuthentication'
export default {
  name: 'authenticationInfo',
  data() {
    return {
      loading: true,
      data: [],
      authorizationType: null,
      authenticationState: null,
      typeOptions:[
        {
          value: 2,
          label: '个人'
        },
        {
          value: 1,
          label: '企业'
        }
      ],
      stateOptions:[
        {
          value: 1,
          label: '审核中'
        },
        {
          value: 2,
          label: '审核通过'
        },
        {
          value: 3,
          label: '审核不通过'
        }
      ],
      dialogVisible: false,
      authForm:{
        type: 1,
        reason:'' 
      },
      page: 1,
      size: 10,
      total: 0
    }
  },
  watch: {
  },
  created(){
    this.getList()
  },
  methods: {
    search(){
      this.page = 1
      this.getList()
    },
    handleSizeChange(val){
      this.size = val
      this.getList()
    },
    handleCurrentChange(val){
      this.page = val
      this.getList()
    },
    getList(){
      let params = {
        authorizationType: this.authorizationType,
        authenticationState: this.authenticationState,
        page: this.page - 1,
        size: this.size
      }
      crudEnterpriseAuthentication.getAuthenticationList(params).then((res)=>{
        this.data = res.content
        this.total = res.totalElements
        this.loading = false
      })
    },
    showDialog(row){
      this.authForm.examineId = row.id
      row.authenticationState == 2 ? this.authForm.type = 1 :  this.authForm.type = 0
      this.authForm.reason = row.reason
      this.dialogVisible = true
    },
    radioChange(val){
      if(val == 1){
        this.authForm.reason = ''
      }
    },
    authSubmit(){
      if(this.authForm.type == 0 && this.authForm.reason == ''){
        this.$message({
          message: '请填写不通过理由！',
          type: 'error'
        })
        return
      }
      crudEnterpriseAuthentication.examineAuthenticationInfo(this.authForm).then((res)=>{
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.dialogVisible = false
        this.getList()
      })
    }
  }
}



</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 58px;
    height: 58px;
    border-radius: 0;
  }
  .el-avatar2{
    width: 58px;
    height: 58px;
    border-radius: 4px;
  }
</style>