407 lines
12 KiB
Vue
407 lines
12 KiB
Vue
<template>
|
|
<div class="research_login_m_content">
|
|
<div class="title">{{ $t('trials:researchForm:title:question') }}</div>
|
|
<el-form
|
|
ref="loginForm"
|
|
v-loading="loading"
|
|
label-position="left"
|
|
label-width="120px"
|
|
:model="form"
|
|
:rules="rules"
|
|
>
|
|
<div class="basic_content">
|
|
<!-- 项目编号 -->
|
|
<el-form-item
|
|
:label="$t('trials:researchForm:form:trialId')"
|
|
>
|
|
<span>{{ form.TrialCode }}</span>
|
|
</el-form-item>
|
|
<!-- 试验方案号 -->
|
|
<el-form-item
|
|
:label="$t('trials:researchForm:form:researchNo')"
|
|
>
|
|
<span>{{ form.ResearchProgramNo }}</span>
|
|
</el-form-item>
|
|
<!-- 试验名称 -->
|
|
<el-form-item
|
|
:label="$t('trials:researchForm:form:researchName')"
|
|
>
|
|
<span>{{ form.ExperimentName }}</span>
|
|
</el-form-item>
|
|
<!-- 适应症类型 -->
|
|
<el-form-item
|
|
:label="$t('trials:researchForm:form:decleareType')"
|
|
>
|
|
<span>{{ form.IndicationType }}</span>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="login_content">
|
|
<el-form-item
|
|
:label="$t('trials:researchForm:form:siteName')"
|
|
prop="SiteId"
|
|
>
|
|
<el-select
|
|
v-model="form.TrialSiteId"
|
|
filterable
|
|
style="width:100%;"
|
|
@change="handleSiteChange"
|
|
>
|
|
<el-option
|
|
v-for="(item,index) of siteOptions"
|
|
:key="index"
|
|
:label="item.TrialSiteAliasName"
|
|
:value="item.TrialSiteId"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form.TrialSiteId && isHaveSiteSurveyRecord"
|
|
label=""
|
|
style="text-align:right;"
|
|
>
|
|
<!-- 更新调研表 -->
|
|
<el-link
|
|
v-if="!form.IsUpdate"
|
|
type="primary"
|
|
@click="form.IsUpdate = true"
|
|
>
|
|
{{ $t('trials:researchForm:button:updateQsForm') }}
|
|
</el-link>
|
|
<!-- 取消更新调研表 -->
|
|
<el-link
|
|
v-else
|
|
type="primary"
|
|
@click="form.IsUpdate = false;form.ReplaceUserEmailOrPhone=''"
|
|
>
|
|
{{ $t('trials:researchForm:button:cancelUpdateQsForm') }}
|
|
</el-link>
|
|
</el-form-item>
|
|
|
|
<!-- 原调研表填写人邮箱 -->
|
|
<el-form-item
|
|
v-if="form.IsUpdate"
|
|
:label="$t('trials:researchForm:form:originalEmail')"
|
|
prop="ReplaceUserEmailOrPhone"
|
|
>
|
|
<el-input
|
|
v-model="form.ReplaceUserEmailOrPhone"
|
|
autocomplete="new-password"
|
|
/>
|
|
</el-form-item>
|
|
<!-- 联系邮箱 -->
|
|
<el-form-item
|
|
:label="$t('trials:researchForm:form:contactorEmail')"
|
|
prop="EmailOrPhone"
|
|
>
|
|
<el-input
|
|
v-model="form.EmailOrPhone"
|
|
autocomplete="new-password"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('trials:researchForm:form:verifyCode')"
|
|
>
|
|
<div class="code_content">
|
|
<el-input
|
|
v-model="form.VerificationCode"
|
|
autocomplete="new-password"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
:disabled="sendDisabled || !form.EmailOrPhone || count > 0"
|
|
@click="handleSendCode"
|
|
>
|
|
{{ this.$t('trials:researchForm:button:send') }} {{ sendTitle ? `${sendTitle}` : null }}
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<div class="submit_content">
|
|
<el-button
|
|
size="large"
|
|
type="primary"
|
|
@click="onSubmit"
|
|
>
|
|
{{ $t('common:button:submit') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { sendVerifyCode, verifySendCode, getTrialSurveyInitInfo } from '@/api/research'
|
|
import { getUserMenuTree, getUserPermissions } from '@/api/user'
|
|
import store from '@/store'
|
|
import { mapGetters, mapMutations } from 'vuex'
|
|
export default {
|
|
name: 'ResearchMobileLogin',
|
|
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)) {
|
|
callback()
|
|
} else {
|
|
callback(new Error(this.$t('trials:researchForm:formRule:email')))
|
|
}
|
|
}
|
|
}
|
|
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: '',
|
|
TrialSiteId: null, // 研究单位名称
|
|
UserName: null, // 联系人
|
|
Phone: '', // 联系人电话
|
|
EmailOrPhone: '',
|
|
TrialSiteCode: '',
|
|
IsUpdate: false,
|
|
ReplaceUserEmailOrPhone: '',
|
|
VerificationCode: ''
|
|
},
|
|
rules: {
|
|
TrialSiteId: [
|
|
{ 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, validator: (rule, value, callback) => { !value ? callback(new Error(this.$t('trials:researchForm:formRule:specify'))) : callback() }, trigger: ['blur'] }]
|
|
},
|
|
siteOptions: [],
|
|
loading: false,
|
|
sendDisabled: false,
|
|
btnLoading: false,
|
|
sendTitle: '',
|
|
count: '',
|
|
timer: null,
|
|
msg: '',
|
|
lang: 'zh',
|
|
isHaveSiteSurveyRecord: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'asyncRoutes',
|
|
'routes',
|
|
'language'
|
|
])
|
|
},
|
|
mounted() {
|
|
this.$i18n.locale = this.$route.query.lang
|
|
this.setLanguage(this.$route.query.lang)
|
|
this.$updateDictionary()
|
|
if (this.$route.query.trialId) {
|
|
this.trialId = this.$route.query.trialId
|
|
this.initPage()
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations({ setLanguage: 'lang/setLanguage' }),
|
|
// 初始化页面
|
|
async initPage() {
|
|
try {
|
|
this.loading = true
|
|
const res = await getTrialSurveyInitInfo(this.trialId)
|
|
this.loading = false
|
|
if (res.IsSuccess) {
|
|
this.siteOptions = res.Result.TrialSiteSelectList
|
|
}
|
|
Object.keys(this.form).forEach(key => {
|
|
if (res.Result.hasOwnProperty(key)) {
|
|
this.form[key] = res.Result[key]
|
|
}
|
|
})
|
|
} catch (e) {
|
|
this.loading = false
|
|
console.log(e)
|
|
}
|
|
},
|
|
// 提交
|
|
async onSubmit() {
|
|
const validate = await this.$refs.loginForm.validate()
|
|
if (!validate) return
|
|
try {
|
|
this.loading = true
|
|
if (!this.form.IsUpdate) {
|
|
this.form.ReplaceUserEmailOrPhone = ''
|
|
}
|
|
const param = {
|
|
trialSiteId: this.form.TrialSiteId,
|
|
userName: this.form.UserName,
|
|
phone: this.form.Phone,
|
|
verificationType: 0,
|
|
emailOrPhone: this.form.EmailOrPhone,
|
|
verificationCode: this.form.VerificationCode,
|
|
isUpdate: this.form.IsUpdate,
|
|
replaceUserEmailOrPhone: this.form.ReplaceUserEmailOrPhone,
|
|
trialId: this.trialId
|
|
}
|
|
const res = await verifySendCode(param)
|
|
|
|
if (res.IsSuccess) {
|
|
zzSessionStorage.clear()
|
|
this.$i18n.locale = this.$route.query.lang
|
|
this.setLanguage(this.$route.query.lang)
|
|
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: `/researchDetail_m?trialId=${this.trialId}&trialSiteSurveyId=${res.Result.TrialSiteSurveyId}` })
|
|
this.loading = false
|
|
}
|
|
} catch (e) {
|
|
this.loading = false
|
|
this.sendDisabled = false
|
|
}
|
|
},
|
|
handleSiteChange(val) {
|
|
this.isHaveSiteSurveyRecord = false
|
|
var selected = this.siteOptions.find(item => item.TrialSiteId === val)
|
|
if (selected) {
|
|
this.form.TrialSiteCode = selected.TrialSiteCode
|
|
this.isHaveSiteSurveyRecord = selected.IsHaveSiteSurveyRecord
|
|
}
|
|
},
|
|
// 发送验证码
|
|
async handleSendCode() {
|
|
try {
|
|
this.loading = true
|
|
const param = {
|
|
Email: this.form.EmailOrPhone,
|
|
TrialId: this.trialId
|
|
}
|
|
const res = await sendVerifyCode(param)
|
|
if (res.IsSuccess) {
|
|
this.getCode()
|
|
this.loading = false
|
|
const msg = this.$t('trials:researchForm:tip:sendCode').replace('xxx', this.form.EmailOrPhone)
|
|
this.$message.success(msg)
|
|
} else {
|
|
this.$alert(res.ErrorMessage)
|
|
}
|
|
} catch (e) {
|
|
this.loading = false
|
|
console.log(e)
|
|
}
|
|
},
|
|
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.sendTitle = `(${this.count}s)`
|
|
this.count--
|
|
} else {
|
|
this.sendDisabled = false
|
|
this.sendTitle = ''
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
}, 1000)
|
|
}
|
|
},
|
|
onCancel() {
|
|
this.$refs['loginForm'].resetFields()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.research_login_m_content{
|
|
background-color:#f5f7fa;
|
|
.title{
|
|
margin-bottom: 5px;
|
|
line-height: 80px;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
background: #fff;
|
|
}
|
|
.basic_content{
|
|
padding: 0 20px;
|
|
background: #fff;
|
|
}
|
|
.login_content{
|
|
padding: 5px 20px;
|
|
margin-top: 5px;
|
|
background: #fff;
|
|
/deep/.el-form-item {
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
.code_content{
|
|
display:flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
.el-input{
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.submit_content{
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
/deep/.el-form-item {
|
|
margin-bottom: 0px;
|
|
padding-top: 5px;
|
|
border-bottom: 1px solid #f5f7fa;
|
|
.el-form-item__content{
|
|
color: #82848a;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|