irc_web/src/views/reviewers/components/BasicInfo.vue

386 lines
11 KiB
Vue

<template>
<div class="form-container basic-form">
<el-card class="box-card">
<div style="width: 1000px">
<!-- v-loading="loading" -->
<el-form
ref="basicInfoForm"
v-loading="loading"
:inline="true"
:rules="rules"
:model="basicInfo"
class="demo-ruleForm"
label-width="120px"
size="small"
>
<el-row>
<el-col :span="12">
<el-form-item
v-if="basicInfo.ReviewerCode"
:label="$t('system:reviewer:label:Id')"
>
<el-input
v-model="basicInfo.ReviewerCode"
disabled
size="small"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:LastName')"
prop="LastName"
>
<el-input
v-model="basicInfo.LastName"
:disabled="$route.query.ReviewStatus === '1'"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:FirstName')"
prop="FirstName"
>
<el-input
v-model="basicInfo.FirstName"
:disabled="$route.query.ReviewStatus === '1'"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:NameCN')"
prop="ChineseName"
>
<el-input
v-model="basicInfo.ChineseName"
:disabled="$route.query.ReviewStatus === '1'"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:Gender')"
prop="Sex"
>
<el-select
v-model="basicInfo.Sex"
prop="Sex"
placeholder="Please select gender"
size="small"
:disabled="$route.query.ReviewStatus === '1'"
>
<el-option
v-for="(item, index) of genderOptions"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:Phone')"
prop="Phone"
>
<el-input
:disabled="$route.query.ReviewStatus === '1'"
v-model="basicInfo.Phone"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:Title')"
prop="TitleIds"
>
<el-select
:disabled="$route.query.ReviewStatus === '1'"
v-model="basicInfo.TitleIds[0]"
placeholder="Please select Title"
size="small"
>
<!-- <el-option
v-for="item of dict.type.Title"
:key="item.value"
:label="item.label"
:value="item.value"
/> -->
<el-option
v-for="item of dictionaryList.Title"
:key="item.Id"
:label="item.Value"
:value="item.Id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:Email')"
prop="EMail"
>
<el-input
v-model="basicInfo.EMail"
:disabled="
$route.query.ReviewStatus === '1' || basicInfo.IsHaveAccount
"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="WeChat: " prop="WeChat">-->
<!-- <el-input v-model="basicInfo.WeChat" :disabled="$route.query.ReviewStatus === '1'" size="small" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
<!-- <el-form-item label="Payment Type: " prop="Nation">
<el-radio-group v-model="basicInfo.Nation">
<el-radio :label="0">CN</el-radio>
<el-radio :label="1">US</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item
:label="$t('system:reviewer:label:Country')"
prop="Nation"
>
<el-select
:disabled="$route.query.ReviewStatus === '1'"
v-model="basicInfo.Nation"
size="small"
clearable
class="mr"
>
<el-option
v-for="item of $d.AttendedReviewerType"
:value="item.value"
:label="item.label"
:key="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>-->
<!-- </el-row>-->
<el-row>
<el-form-item style="margin-left: 120px">
<el-button
:disabled="$route.query.ReviewStatus === '1'"
type="primary"
:loading="isDisabled"
size="small"
@click="handleSave"
>
{{ $t('common:button:save') }}</el-button
>
</el-form-item>
</el-row>
</el-form>
</div>
</el-card>
</div>
</template>
<script>
import { getBasicInfo, addOrUpdateDoctorBasicInfo } from '@/api/reviewers'
import { changeURLStatic } from '@/utils/history.js'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
export default {
props: {
reviewerId: {
type: String,
},
isSystem: {
type: Boolean,
default: true,
},
},
data() {
return {
basicInfo: {
Id: '',
ReviewerCode: '',
FirstName: '',
LastName: '',
ChineseName: '',
Sex: '',
TitleIds: [],
Phone: '',
EMail: '',
WeChat: '',
Introduction: '',
Nation: 0,
},
rules: {
FirstName: [
{
required: true,
message: 'Please enter FirstName',
trigger: 'blur',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
LastName: [
{ required: true, message: 'Please enter LastName', trigger: 'blur' },
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
ChineseName: [
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
Sex: [
{ required: true, message: 'Please select gender', trigger: 'blur' },
],
TitleIds: [
{ required: true, message: 'Please select Title', trigger: 'blur' },
],
Phone: [
{
required: true,
message: 'Please enter phone number',
trigger: 'blur',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
EMail: [
{
required: true,
message: 'Please input the email address',
trigger: 'blur',
},
{
type: 'email',
message: 'Please input the correct email address',
trigger: 'blur,change',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
WeChat: [
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
},
isDisabled: false,
loading: false,
genderOptions: [
{ label: 'Male', value: 0 },
{ label: 'Female', value: 1 },
],
dictionaryList: {},
}
},
mounted() {
this.initForm()
},
methods: {
handleSave() {
this.$refs.basicInfoForm.validate((valid) => {
if (valid) {
this.loading = true
this.isDisabled = true
addOrUpdateDoctorBasicInfo(this.basicInfo)
.then((res) => {
this.isDisabled = false
this.loading = false
this.$message.success('Saved successfully')
if (!this.id) {
this.basicInfo.Id = res.Result.Id
if (this.isSystem) {
changeURLStatic('Id', res.Result.Id)
}
if (!this.reviewerId) {
this.$emit('update:reviewerId', res.Result.Id)
}
this.basicInfo.ReviewerCode = res.Result.ReviewerCode
}
})
.catch(() => {
this.isDisabled = false
this.loading = false
})
}
})
},
async initForm() {
await this.getDicData()
const id = this.$route.query.Id || this.reviewerId
if (id) {
this.loading = true
getBasicInfo(id)
.then((res) => {
// eslint-disable-next-line no-unused-vars
const { TitleList, ...param } = res.Result
this.basicInfo = param
this.loading = false
})
.catch(() => {
this.loading = false
})
}
},
getDicData() {
getBasicDataSelects(['Title'])
.then((res) => {
this.dictionaryList = { ...res.Result }
})
.catch(() => {})
},
},
}
</script>
<style lang="scss" scoped>
.basic-form {
.el-input--small {
width: 220px !important;
}
.el-select--small {
width: 220px !important;
}
}
</style>