250 lines
		
	
	
		
			8.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			250 lines
		
	
	
		
			8.3 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <div class="question-login-wrapper">
 | 
						|
    <div class="box-wrapper">
 | 
						|
      <h2 style="text-align:center;">
 | 
						|
        <!-- 中心调研表 -->
 | 
						|
        独立阅片人信息填写
 | 
						|
      </h2>
 | 
						|
      <el-card shadow="hover" style="padding-top: 40px">
 | 
						|
        <el-form
 | 
						|
          ref="resetForm"
 | 
						|
          v-loading="loading"
 | 
						|
          :model="form"
 | 
						|
          label-width="150px"
 | 
						|
          style="width:80%;margin:0 auto;"
 | 
						|
          :rules="rules"
 | 
						|
          class="demo-ruleForm"
 | 
						|
          size="small"
 | 
						|
        >
 | 
						|
          <!-- 联系邮箱 -->
 | 
						|
          <el-form-item :label="$t('trials:researchForm:form:contactorEmail')" prop="EmailOrPhone">
 | 
						|
            <el-input v-model="form.EmailOrPhone" autocomplete="new-password" @change="handleEmailChange" />
 | 
						|
          </el-form-item>
 | 
						|
          <!-- 验证码 -->
 | 
						|
          <el-form-item :label="$t('trials:researchForm:form:verifyCode')" required>
 | 
						|
            <el-col :span="20">
 | 
						|
              <el-form-item prop="VerificationCode">
 | 
						|
                <el-input v-model="form.VerificationCode" autocomplete="new-password" />
 | 
						|
              </el-form-item>
 | 
						|
            </el-col>
 | 
						|
            <el-col :span="4">
 | 
						|
              <el-button
 | 
						|
                size="small"
 | 
						|
                type="primary"
 | 
						|
                style="width:100%;"
 | 
						|
                :disabled="sendDisabled"
 | 
						|
                @click="handleSendCode"
 | 
						|
              >{{ sendTitle }}</el-button>
 | 
						|
            </el-col>
 | 
						|
          </el-form-item>
 | 
						|
          <el-form-item>
 | 
						|
            <!-- 取消 -->
 | 
						|
            <el-button size="small" :disabled="btnLoading" @click="onCancel">
 | 
						|
              {{ $t('common:button:cancel') }}
 | 
						|
            </el-button>
 | 
						|
            <!-- 提交 -->
 | 
						|
            <el-button size="small" type="primary" :loading="btnLoading" @click="onSubmit">
 | 
						|
              {{ $t('common:button:submit') }}
 | 
						|
            </el-button>
 | 
						|
 | 
						|
          </el-form-item>
 | 
						|
        </el-form>
 | 
						|
      </el-card>
 | 
						|
    </div>
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import { sendVerifyCode, verifySendCode, getTrialSurveyInitInfo } from '@/api/research'
 | 
						|
import { verifyEmialGetDoctorInfo, sendEmialVerifyCode } from '@/api/reviewers'
 | 
						|
import { login, getUserMenuTree, getUserPermissions } from '@/api/user'
 | 
						|
import store from '@/store'
 | 
						|
export default {
 | 
						|
  data() {
 | 
						|
    var checkPhone = (rule, value, callback) => {
 | 
						|
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
 | 
						|
      if (!value) {
 | 
						|
        return callback(new Error(this.$t('trials:researchForm:formRule:specify')))
 | 
						|
      }
 | 
						|
      setTimeout(() => {
 | 
						|
        if (!Number.isInteger(+value)) {
 | 
						|
          callback(new Error(this.$t('trials:researchForm:formRule:phone')))
 | 
						|
        } else {
 | 
						|
          if (phoneReg.test(value)) {
 | 
						|
            callback()
 | 
						|
          } else {
 | 
						|
            callback(new Error(this.$t('trials:researchForm:formRule:phone')))
 | 
						|
          }
 | 
						|
        }
 | 
						|
      }, 100)
 | 
						|
    }
 | 
						|
    var validateEmail = (rule, value, callback) => {
 | 
						|
      if (value === '') {
 | 
						|
        callback(new Error(this.$t('trials:researchForm:formRule:specify')))
 | 
						|
      } else {
 | 
						|
        var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
 | 
						|
        if (this.form.EmailOrPhone && reg.test(this.form.EmailOrPhone)) {
 | 
						|
          this.sendDisabled = false
 | 
						|
          callback()
 | 
						|
        } else {
 | 
						|
          callback(new Error(this.$t('trials:researchForm:formRule:email')))
 | 
						|
          this.sendDisabled = true
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
    var validateReplaceEmail = (rule, value, callback) => {
 | 
						|
      if (value === '') {
 | 
						|
        callback(new Error(this.$t('trials:researchForm:formRule:specify')))
 | 
						|
      } else {
 | 
						|
        var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
 | 
						|
        if (this.form.ReplaceUserEmailOrPhone && reg.test(this.form.ReplaceUserEmailOrPhone)) {
 | 
						|
          callback()
 | 
						|
        } else {
 | 
						|
          callback(new Error(this.$t('trials:researchForm:formRule:email')))
 | 
						|
        }
 | 
						|
      }
 | 
						|
    }
 | 
						|
    return {
 | 
						|
      trialId: '',
 | 
						|
      form: {
 | 
						|
        Sponsor: null, // 申办方
 | 
						|
        ResearchProgramNo: null, // 方案号
 | 
						|
        TrialCode: null, // 项目编号
 | 
						|
        IndicationType: null, // 适应症
 | 
						|
        ExperimentName: '',
 | 
						|
        SiteId: null, // 研究单位名称
 | 
						|
        UserName: null, // 联系人
 | 
						|
        Phone: null, // 联系人电话
 | 
						|
        EmailOrPhone: '',
 | 
						|
        TrialSiteCode: '',
 | 
						|
        IsUpdate: false,
 | 
						|
        ReplaceUserEmailOrPhone: '',
 | 
						|
        VerificationCode: ''
 | 
						|
      },
 | 
						|
      rules: {
 | 
						|
        SiteId: [
 | 
						|
          { required: true, message: this.$t('trials:researchForm:formRule:specify'), trigger: ['blur'] }
 | 
						|
        ],
 | 
						|
        UserName: [
 | 
						|
          { required: true, message: this.$t('trials:researchForm:formRule:specify'), trigger: ['blur'] },
 | 
						|
          { min: 0, max: 50, message: this.$t('trials:researchForm:formRule:maxLength'), trigger: 'blur' }
 | 
						|
        ],
 | 
						|
        Phone: [
 | 
						|
          { required: true, validator: checkPhone, trigger: ['blur'] }
 | 
						|
        ],
 | 
						|
        EmailOrPhone: [
 | 
						|
          { required: true, validator: validateEmail, trigger: ['blur', 'change'] }
 | 
						|
        ],
 | 
						|
        ReplaceUserEmailOrPhone: [
 | 
						|
          { required: true, validator: validateReplaceEmail, trigger: ['blur'] }
 | 
						|
        ],
 | 
						|
        VerificationCode: [{ required: true, message: this.$t('trials:researchForm:formRule:specify'), trigger: ['blur'] }]
 | 
						|
      },
 | 
						|
      siteOptions: [],
 | 
						|
      loading: false,
 | 
						|
      sendDisabled: true,
 | 
						|
      btnLoading: false,
 | 
						|
      sendTitle: this.$t('trials:researchForm:button:send'),
 | 
						|
      count: '',
 | 
						|
      timer: null,
 | 
						|
      isHaveSiteSurveyRecord: false
 | 
						|
    }
 | 
						|
  },
 | 
						|
  mounted() {
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    // 提交
 | 
						|
    onSubmit() {
 | 
						|
      this.$refs['resetForm'].validate(valid => {
 | 
						|
        if (valid) {
 | 
						|
          // 登陆成功并跳转
 | 
						|
          this.btnLoading = true
 | 
						|
          this.sendDisabled = true
 | 
						|
          if (!this.form.IsUpdate) {
 | 
						|
            this.form.ReplaceUserEmailOrPhone = ''
 | 
						|
          }
 | 
						|
          const param = {
 | 
						|
            emailOrPhone: this.form.EmailOrPhone,
 | 
						|
            verificationCode: this.form.VerificationCode,
 | 
						|
          }
 | 
						|
          verifyEmialGetDoctorInfo(param).then(async res => {
 | 
						|
            this.btnLoading = false
 | 
						|
            zzSessionStorage.clear()
 | 
						|
            store.dispatch('user/setToken', res.Result.Token)
 | 
						|
            zzSessionStorage.setItem('TokenKey', res.Result.Token)
 | 
						|
            var permissions = await getUserPermissions()
 | 
						|
            var menuTree = await getUserMenuTree()
 | 
						|
            store.dispatch('user/setTree', menuTree.Result)
 | 
						|
            store.dispatch('user/setPermissions', permissions.Result)
 | 
						|
            // this.$router.push({ path: `/researchForm?trialId=${this.trialId}&trialSiteSurveyId=${res.Result.TrialSiteSurveyId}` })
 | 
						|
            this.$router.push({path: `/ReviewersResearchForm?Id=${res.Result.DoctorId ? res.Result.DoctorId : ''}&tabActive=BasicInfo&ReviewStatus=${res.Result.ReviewStatus}`})
 | 
						|
          }).catch(() => {
 | 
						|
            this.btnLoading = false
 | 
						|
            this.sendDisabled = false
 | 
						|
          })
 | 
						|
        } else {
 | 
						|
          return false
 | 
						|
        }
 | 
						|
      })
 | 
						|
    },
 | 
						|
    // 发送验证码
 | 
						|
    handleSendCode() {
 | 
						|
      this.sendDisabled = true
 | 
						|
      const param = {
 | 
						|
        Email: this.form.EmailOrPhone
 | 
						|
      }
 | 
						|
      sendEmialVerifyCode(param).then(res => {
 | 
						|
        if (res.IsSuccess) {
 | 
						|
          this.getCode()
 | 
						|
        } else {
 | 
						|
          this.$alert(res.ErrorMessage)
 | 
						|
        }
 | 
						|
      }).catch(() => {
 | 
						|
        this.sendDisabled = false
 | 
						|
      })
 | 
						|
    },
 | 
						|
    // 邮箱change事件
 | 
						|
    handleEmailChange() {
 | 
						|
      var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
 | 
						|
      if (this.form.EmailOrPhone && reg.test(this.form.EmailOrPhone)) {
 | 
						|
        this.sendDisabled = false
 | 
						|
      } else {
 | 
						|
        this.sendDisabled = true
 | 
						|
      }
 | 
						|
    },
 | 
						|
    getCode() {
 | 
						|
      const TIME_COUNT = 60
 | 
						|
      if (!this.timer) {
 | 
						|
        this.count = TIME_COUNT
 | 
						|
        this.sendDisabled = true
 | 
						|
        this.timer = setInterval(() => {
 | 
						|
          if (this.count > 0 && this.count <= TIME_COUNT) {
 | 
						|
            this.count--
 | 
						|
            this.sendTitle = `${this.$t('trials:researchForm:button:send')}(${this.count}s)`
 | 
						|
            this.sendDisabled = true
 | 
						|
          } else {
 | 
						|
            this.sendDisabled = false
 | 
						|
            this.sendTitle = this.$t('trials:researchForm:button:send')
 | 
						|
            clearInterval(this.timer)
 | 
						|
            this.timer = null
 | 
						|
          }
 | 
						|
        }, 1000)
 | 
						|
      }
 | 
						|
    },
 | 
						|
    onCancel() {
 | 
						|
      this.$refs['resetForm'].resetFields()
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 | 
						|
<style lang="scss" scoped>
 | 
						|
.question-login-wrapper {
 | 
						|
  padding: 20px;
 | 
						|
  .box-wrapper {
 | 
						|
    width: 50%;
 | 
						|
    margin: 20px auto;
 | 
						|
    padding: 10px;
 | 
						|
    color: #303133;
 | 
						|
  }
 | 
						|
}
 | 
						|
</style>
 |