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>
 |