SEEC-Portal-Front/pages/person/identification.vue

<template>
  <div class="main-card__body" v-loading="pageLoading">
    <h1 class="main-card__title">
      身份认证
    </h1>
    <!--<div class="main-card__selections">-->
      <!--<el-button type="primary" class="main-card__selection" plain>主要按钮</el-button>-->
    <!--</div>-->
    <el-tabs v-model="activeTab" type="card" class="main-card__tab">
      <el-tab-pane label="教师认证" name="TEACHER" :disabled="role!=='STUDENT'&&role!=='TEACHER'">
        <div class="main-card__tab__item">
          认证角色： 教师
        </div>
        <div class="main-card__tab__item">
          当前状态：
          <el-tag v-if="state === 'UNIDENTIFIED'" type="info">未认证</el-tag>
          <el-tag v-if="state === 'REJECTED'" type="danger">未通过</el-tag>
          <el-tag v-if="state === 'IDENTIFYING'">审核中</el-tag>
          <el-tag v-if="state === 'IDENTIFIED'" type="success">已认证</el-tag>
        </div>
        <div class="main-card__tab__item">
          真实姓名：
          <el-input v-model="teacher.realName" class="main-card__tab__input" maxlength="20" :disabled="disabled" compositionend="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')"></el-input>
        </div>
        <div class="main-card__tab__item">
          所属单位：
          <el-input v-model="teacher.organization" class="main-card__tab__input" placeholder="请输入单位名称" maxlength="20" :disabled="disabled"></el-input>
        </div>
        <div class="main-card__tab__item" >
          教师工号：
          <el-input v-model="teacher.jobNumber" class="main-card__tab__input" maxlength="20" :disabled="disabled" oninput="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"></el-input>
        </div>
        <div class="main-card__tab__item">
          <el-button type="primary" class="main-card__tab__button" :loading="loading" @click="apply('TEACHER')" v-if="state === 'UNIDENTIFIED'">提交审核</el-button>
          <el-button type="primary" class="main-card__tab__button" :loading="loading" @click="reapply('TEACHER')" v-if="state === 'REJECTED'">再次提交</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="职员认证" name="STAFF" :disabled="role!=='STUDENT'&&role!=='STAFF'">
        <div class="main-card__tab__item">
          认证角色： 职员
        </div>
        <div class="main-card__tab__item">
          当前状态：
          <el-tag v-if="state === 'UNIDENTIFIED'" type="info">未认证</el-tag>
          <el-tag v-if="state === 'REJECTED'" type="danger">未通过</el-tag>
          <el-tag v-if="state === 'IDENTIFYING'">审核中</el-tag>
          <el-tag v-if="state === 'IDENTIFIED'" type="success">已认证</el-tag>
        </div>
        <div class="main-card__tab__item">
          真实姓名：
          <el-input v-model="staff.realName" class="main-card__tab__input" maxlength="20" :disabled="disabled" compositionend="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')"></el-input>
        </div>
        <div class="main-card__tab__item">
          所属单位：
          <el-input v-model="staff.organization" class="main-card__tab__input" placeholder="请输入单位名称" maxlength="20" :disabled="disabled"></el-input>
        </div>
        <div class="main-card__tab__item" >
          职员工号：
          <el-input v-model="staff.jobNumber" class="main-card__tab__input" maxlength="20" :disabled="disabled" oninput="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"></el-input>
        </div>
        <div class="main-card__tab__item">
          <el-button type="primary" class="main-card__tab__button" :loading="loading" @click="apply('STAFF')" v-if="state === 'UNIDENTIFIED'">提交审核</el-button>
          <el-button type="primary" class="main-card__tab__button" :loading="loading" @click="reapply('STAFF')" v-if="state === 'REJECTED'">再次提交</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="HR认证" name="HR" :disabled="role!=='STUDENT'&&role!=='HR'">
        <div class="main-card__tab__item">
          认证角色： HR
        </div>
        <div class="main-card__tab__item">
          当前状态：
          <el-tag v-if="state === 'UNIDENTIFIED'" type="info">未认证</el-tag>
          <el-tag v-if="state === 'REJECTED'" type="danger">未通过</el-tag>
          <el-tag v-if="state === 'IDENTIFYING'">审核中</el-tag>
          <el-tag v-if="state === 'IDENTIFIED'" type="success">已认证</el-tag>
        </div>
        <div class="main-card__tab__item">
          真实姓名：
          <el-input v-model="hr.realName" class="main-card__tab__input" maxlength="20" :disabled="disabled" compositionend="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')"></el-input>
        </div>
        <div class="main-card__tab__item">
          所属单位：
          <el-input v-model="hr.organization" class="main-card__tab__input" placeholder="请输入单位名称" maxlength="20" :disabled="disabled"></el-input>
        </div>
        <div class="main-card__tab__item" >
           工作证号：
          <el-input v-model="hr.jobNumber" class="main-card__tab__input" maxlength="20" :disabled="disabled" oninput="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"></el-input>
        </div>
        <div class="main-card__tab__item">
          <el-button type="primary" class="main-card__tab__button" :loading="loading" @click="apply('HR')" v-if="state === 'UNIDENTIFIED'">提交审核</el-button>
          <el-button type="primary" class="main-card__tab__button" :loading="loading" @click="reapply('HR')" v-if="state === 'REJECTED'">再次提交</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { state } from '../../store'

export default {
  name: 'identification',
  layout: 'person',
  data () {
    return {
      activeTab: 'TEACHER',
      role: 'STUDENT',
      state: 'UNIDENTIFIED',
      disabled: false,
      teacher: {
        realName: '',
        organization: '',
        jobNumber: ''
      },
      staff: {
        realName: '',
        organization: '',
        jobNumber: ''
      },
      hr: {
        realName: '',
        organization: '',
        jobNumber: ''
      },
      pageLoading: true,
      loading: false
    }
  },
  mounted () {
    this.$api.$get('/super/getInfo', {
      realName: this.realName,
      jobNumber: this.jobNumber,
      organization: this.organization
    }).then((res) => {
      console.log(res.data)
      if (res.code === 0) {
        const data = res.data
        switch (data.role) {
          case 'TEACHER':
            this.teacher.realName = data.realName
            this.teacher.jobNumber = data.jobNumber
            this.teacher.organization = data.organization
            break
          case 'STAFF' :
            this.staff.realName = data.realName
            this.staff.jobNumber = data.jobNumber
            this.staff.organization = data.organization
            break
          case 'HR':
            this.hr.realName = data.realName
            this.hr.jobNumber = data.jobNumber
            this.hr.organization = data.organization
            break
        }
        this.state = data.state
        this.disabled = (this.state === 'IDENTIFYING' || this.state === 'IDENTIFIED')
        this.activeTab = data.role
        this.role = data.role
      }
    }
    ).catch((e) => {
      console.log(e)
    })
    this.pageLoading = false
  },
  methods: {
    apply (role) {
      let realName, organization, jobNumber
      this.loading = true
      switch (role) {
        case 'TEACHER' :
          realName = this.teacher.realName
          organization = this.teacher.organization
          jobNumber = this.teacher.jobNumber
          break
        case 'STAFF' :
          realName = this.staff.realName
          organization = this.staff.organization
          jobNumber = this.staff.jobNumber
          break
        case 'HR' :
          realName = this.hr.realName
          organization = this.hr.organization
          jobNumber = this.hr.jobNumber
          break
      }
      if (realName.length === 0) {
        this.$message({
          showClose: true,
          message: '真实姓名不得为空',
          type: 'error'
        })
        this.loading = false
        return
      }
      if (organization.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择所属单位',
          type: 'error'
        })
        this.loading = false
        return
      }
      if (jobNumber.length === 0) {
        this.$message({
          showClose: true,
          message: '工号不得为空',
          type: 'error'
        })
        this.loading = false
        return
      }
      this.$api.$post('/super/apply', {
        realName: realName,
        jobNumber: jobNumber,
        organization: organization,
        role: role
      }).then((res) => {
        if (res.code === 0) {
          this.state = 'IDENTIFYING'
          this.disabled = true
          this.$message({
            showClose: true,
            message: '提交成功，请耐心等待审核结果',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      }
      ).catch((e) => {
        console.log(e)
      })
      this.loading = false
    },
    reapply (role) {
      let realName, organization, jobNumber
      this.loading = true
      switch (role) {
        case 'TEACHER' :
          realName = this.teacher.realName
          organization = this.teacher.organization
          jobNumber = this.teacher.jobNumber
          break
        case 'STAFF' :
          realName = this.staff.realName
          organization = this.staff.organization
          jobNumber = this.staff.jobNumber
          break
        case 'HR' :
          realName = this.hr.realName
          organization = this.hr.organization
          jobNumber = this.hr.jobNumber
          break
      }
      if (realName.length === 0) {
        this.$message({
          showClose: true,
          message: '真实姓名不得为空',
          type: 'error'
        })
        this.loading = false
        return
      }
      if (organization.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择所属单位',
          type: 'error'
        })
        this.loading = false
        return
      }
      if (jobNumber.length === 0) {
        this.$message({
          showClose: true,
          message: '工号不得为空',
          type: 'error'
        })
        this.loading = false
        return
      }
      this.$api.$post('/super/reapply', {
        realName: realName,
        jobNumber: jobNumber,
        organization: organization,
        role: role
      }).then((res) => {
        if (res.code === 0) {
          this.state = 'IDENTIFYING'
          this.$message({
            showClose: true,
            message: '提交成功，请耐心等待审核结果',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
      }
      ).catch((e) => {
        console.log(e)
      })
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~/assets/css/person.scss';
</style>