610 lines
17 KiB
Vue
610 lines
17 KiB
Vue
<template>
|
|
<div class="info">
|
|
<el-button type="text" class="editBtn" @click.stop="openEdit">
|
|
{{ $t('common:button:edit') }}
|
|
</el-button>
|
|
<template v-if="DATA.FirstName && DATA.LastName">
|
|
<div class="userInfo">
|
|
<span>{{ DATA.FirstName }}{{ DATA.LastName }}</span>
|
|
<span>
|
|
<span v-if="isEN">
|
|
{{
|
|
Array.isArray(DATA.TitleList) && DATA.TitleList.length > 0
|
|
? DATA.TitleList.join(', ')
|
|
: ''
|
|
}}
|
|
</span>
|
|
<span v-else>
|
|
{{
|
|
Array.isArray(DATA.TitleCNList) && DATA.TitleCNList.length > 0
|
|
? DATA.TitleCNList.join(', ')
|
|
: ''
|
|
}}
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span v-if="isEN">{{ DATA.HospitalName }}</span>
|
|
<span v-else>{{ DATA.HospitalNameCN }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="userTitle">
|
|
<span
|
|
class="el-icon-first-aid-kit"
|
|
v-if="DATA.Department || DATA.DepartmentCN"
|
|
>
|
|
<span v-if="isEN">{{ DATA.Department }}</span>
|
|
<span v-else>{{ DATA.DepartmentCN }}</span>
|
|
</span>
|
|
<span class="el-icon-user" v-if="DATA.Rank || DATA.RankCN">
|
|
<span v-if="isEN">{{ DATA.Rank }}</span>
|
|
<span v-else>{{ DATA.RankCN }}</span>
|
|
</span>
|
|
<span
|
|
class="el-icon-medal"
|
|
v-if="DATA.WorkPartTimeEn || DATA.WorkPartTime"
|
|
>
|
|
<span v-if="isEN">{{ DATA.WorkPartTimeEn }}</span>
|
|
<span v-else>{{ DATA.WorkPartTime }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="userTel">
|
|
<span class="el-icon-phone-outline">
|
|
{{ DATA.Phone }}
|
|
</span>
|
|
<span class="el-icon-message">{{ DATA.EMail }}</span>
|
|
<span class="el-icon-chat-dot-round" v-if="DATA.WeChat">{{
|
|
DATA.WeChat
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
<div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
|
|
<base-model :config="model_cfg">
|
|
<template slot="dialog-body">
|
|
<el-form
|
|
ref="infoFrom"
|
|
v-loading="loading"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="80px"
|
|
size="small"
|
|
>
|
|
<div class="form_title">
|
|
{{ $t('curriculumVitae:info:form:infoTitle') }}
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:surname')"
|
|
prop="FirstName"
|
|
>
|
|
<el-input v-model="form.FirstName" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:name')"
|
|
prop="LastName"
|
|
>
|
|
<el-input v-model="form.LastName" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:userNameCN')"
|
|
prop="ChineseName"
|
|
>
|
|
<el-input v-model="form.ChineseName" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:sex')"
|
|
prop="Sex"
|
|
>
|
|
<el-select v-model="form.Sex" clearable placeholder="">
|
|
<el-option
|
|
v-for="item in $d.Sex"
|
|
:key="item.id"
|
|
: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('curriculumVitae:info:form:education')"
|
|
prop="TitleIds"
|
|
>
|
|
<el-select v-model="form.TitleIds[0]" clearable placeholder="">
|
|
<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-col :span="12">
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:phone')"
|
|
prop="Phone"
|
|
>
|
|
<el-input v-model="form.Phone" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:email')"
|
|
prop="EMail"
|
|
>
|
|
<el-input v-model="form.EMail" clearable disabled></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:wechat')"
|
|
prop="WeChat"
|
|
>
|
|
<el-input v-model="form.WeChat" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:country')"
|
|
prop="Nation"
|
|
>
|
|
<el-select v-model="form.Nation" size="small" 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>
|
|
<div class="form_title">
|
|
{{ $t('curriculumVitae:info:form:workTitle') }}
|
|
</div>
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:hospital')"
|
|
prop="HospitalId"
|
|
>
|
|
<el-select
|
|
v-model="form.HospitalId"
|
|
filterable
|
|
placeholder=""
|
|
@change="handleHospitalChange"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in hospitalList"
|
|
:key="index"
|
|
:label="item.HospitalName"
|
|
:value="item.Id"
|
|
>
|
|
<span>
|
|
{{ item.HospitalName }}
|
|
</span>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:AffiliatedUniversity')"
|
|
>
|
|
<el-input
|
|
disabled
|
|
v-model="form.UniversityAffiliated"
|
|
type="textarea"
|
|
autosize
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('curriculumVitae:info:form:City')">
|
|
<el-input disabled v-model="form.City" size="small" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:department')"
|
|
prop="DepartmentId"
|
|
>
|
|
<el-select v-model="form.DepartmentId" clearable placeholder="">
|
|
<el-option
|
|
v-for="item of dictionaryList.Department"
|
|
:key="item.Id"
|
|
:label="item.Value"
|
|
:value="item.Id"
|
|
/>
|
|
<el-option label="Other" :value="otherId" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form.DepartmentId === otherId"
|
|
class="other-item"
|
|
prop="DepartmentOther"
|
|
>
|
|
<el-input
|
|
v-model="form.DepartmentOther"
|
|
:placeholder="
|
|
$t('curriculumVitae:info:form:placeholder:DepartmentOther')
|
|
"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form.DepartmentId === otherId"
|
|
class="other-item"
|
|
prop="DepartmentOtherCN"
|
|
>
|
|
<el-input
|
|
v-model="form.DepartmentOtherCN"
|
|
:placeholder="
|
|
$t('curriculumVitae:info:form:placeholder:DepartmentOtherCN')
|
|
"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:physician')"
|
|
prop="RankId"
|
|
>
|
|
<el-select v-model="form.RankId" clearable placeholder="">
|
|
<el-option
|
|
v-for="item in $d.Rank"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="
|
|
$fd('Rank', form.RankId, 'id') === '其它' ||
|
|
$fd('Rank', form.RankId, 'id') === 'Other'
|
|
"
|
|
class="other-item"
|
|
prop="RankOther"
|
|
>
|
|
<el-input
|
|
v-model="form.RankOther"
|
|
:placeholder="
|
|
$t('curriculumVitae:info:form:placeholder:RankOther')
|
|
"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="
|
|
$fd('Rank', form.RankId, 'id') === '其它' ||
|
|
$fd('Rank', form.RankId, 'id') === 'Other'
|
|
"
|
|
class="other-item"
|
|
prop="RankOtherCN"
|
|
>
|
|
<el-input
|
|
v-model="form.RankOtherCN"
|
|
:placeholder="
|
|
$t('curriculumVitae:info:form:placeholder:RankOtherCN')
|
|
"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('curriculumVitae:info:form:partTimeJob')"
|
|
prop="WorkPartTime"
|
|
>
|
|
<el-input
|
|
:placeholder="
|
|
$t('curriculumVitae:info:form:placeholder:partTimeJob')
|
|
"
|
|
v-model="form.WorkPartTime"
|
|
type="textarea"
|
|
:rows="2"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="WorkPartTimeEn">
|
|
<el-input
|
|
:placeholder="
|
|
$t('curriculumVitae:info:form:placeholder:partTimeJobEN')
|
|
"
|
|
v-model="form.WorkPartTimeEn"
|
|
type="textarea"
|
|
:rows="2"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<template slot="dialog-footer">
|
|
<el-button size="small" type="primary" @click="handleCancle">
|
|
{{ $t('common:button:cancel') }}
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
@click="handleSave"
|
|
:loading="loading"
|
|
>
|
|
{{ $t('common:button:save') }}
|
|
</el-button>
|
|
</template>
|
|
</base-model>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import BaseModel from '@/components/BaseModel'
|
|
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
|
|
import { addOrUpdateDoctorBasicInfoAndEmployment } from '@/api/reviewers'
|
|
import store from '@/store'
|
|
import { mapGetters } from 'vuex'
|
|
const defaultForm = () => {
|
|
return {
|
|
FirstName: '',
|
|
LastName: '',
|
|
ChineseName: '',
|
|
Sex: '',
|
|
TitleIds: [],
|
|
Phone: '',
|
|
EMail: '',
|
|
WeChat: '',
|
|
Nation: 0,
|
|
|
|
DepartmentId: '',
|
|
DepartmentOther: '',
|
|
DepartmentOtherCN: '',
|
|
RankId: '',
|
|
RankOther: '',
|
|
RankOtherCN: '',
|
|
HospitalId: '',
|
|
WorkPartTime: null,
|
|
WorkPartTimeEn: null,
|
|
UniversityAffiliated: null,
|
|
City: null,
|
|
}
|
|
}
|
|
export default {
|
|
name: 'info',
|
|
components: { BaseModel },
|
|
props: {
|
|
DATA: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},
|
|
reviewerId: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
isEN: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
model_cfg: {
|
|
visible: false,
|
|
showClose: true,
|
|
width: '800px',
|
|
title: this.$t('curriculumVitae:info:form:title'),
|
|
appendToBody: false,
|
|
},
|
|
form: defaultForm(),
|
|
rules: {
|
|
FirstName: [
|
|
{
|
|
required: true,
|
|
message: 'Please enter FirstName',
|
|
trigger: 'blur',
|
|
},
|
|
{ max: 50, message: 'The maximum length is 50' },
|
|
],
|
|
LastName: [
|
|
{ required: true, message: 'Please enter LastName', trigger: 'blur' },
|
|
{ max: 50, message: 'The maximum length is 50' },
|
|
],
|
|
ChineseName: [{ max: 50, message: 'The maximum length is 50' }],
|
|
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: 20, min: 7, message: 'The length is 7 to 20' },
|
|
],
|
|
EMail: [
|
|
{
|
|
required: true,
|
|
message: 'Please input the email address',
|
|
trigger: 'blur',
|
|
},
|
|
{
|
|
type: 'email',
|
|
message: 'Please input the correct email address',
|
|
trigger: 'blur,change',
|
|
},
|
|
{ max: 50, message: 'The maximum length is 50' },
|
|
],
|
|
WeChat: [{ max: 50, message: 'The maximum length is 50' }],
|
|
Nation: [
|
|
{
|
|
required: true,
|
|
message: 'Please select the Nation',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
DepartmentId: [
|
|
{
|
|
required: true,
|
|
message: 'Please select department',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
DepartmentOther: [
|
|
{ required: true, message: 'Please specify', trigger: 'blur' },
|
|
{ max: 50, message: 'The maximum length is 50' },
|
|
],
|
|
DepartmentOtherCN: [{ max: 50, message: 'The maximum length is 50' }],
|
|
RankId: [
|
|
{ required: true, message: 'Please select rank', trigger: 'blur' },
|
|
],
|
|
RankOther: [
|
|
{ required: true, message: 'Please select rank', trigger: 'blur' },
|
|
{ max: 50, message: 'The maximum length is 50' },
|
|
],
|
|
RankOtherCN: [
|
|
{ required: true, message: 'Please select rank', trigger: 'blur' },
|
|
{ max: 50, message: 'The maximum length is 50' },
|
|
],
|
|
HospitalId: [
|
|
{
|
|
required: true,
|
|
message: 'Please select hospital',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
},
|
|
loading: false,
|
|
dictionaryList: {},
|
|
otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['hospitalList']),
|
|
},
|
|
mounted() {
|
|
this.getDicData()
|
|
store.dispatch('global/getHospital')
|
|
},
|
|
methods: {
|
|
openEdit() {
|
|
this.form = defaultForm()
|
|
Object.keys(this.form).forEach((key) => {
|
|
if (this.DATA[key]) {
|
|
this.form[key] = this.DATA[key]
|
|
}
|
|
})
|
|
this.model_cfg.visible = true
|
|
},
|
|
handleCancle() {
|
|
this.form = defaultForm()
|
|
this.model_cfg.visible = false
|
|
},
|
|
async handleSave() {
|
|
try {
|
|
let validate = await this.$refs.infoFrom.validate()
|
|
if (!validate) return false
|
|
if (this.reviewerId) {
|
|
this.form.Id = this.reviewerId
|
|
}
|
|
this.loading = true
|
|
let res = await addOrUpdateDoctorBasicInfoAndEmployment(this.form)
|
|
this.loading = false
|
|
if (res.IsSuccess) {
|
|
this.$emit('update:reviewerId', res.Result.Id)
|
|
sessionStorage.setItem('reviewerId', res.Result.Id)
|
|
this.$emit('getInfo')
|
|
this.model_cfg.visible = false
|
|
}
|
|
} catch (err) {
|
|
this.loading = false
|
|
console.log(err)
|
|
}
|
|
},
|
|
getDicData() {
|
|
getBasicDataSelects(['Title', 'Department', 'Rank', 'Position'])
|
|
.then((res) => {
|
|
this.dictionaryList = { ...res.Result }
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
handleHospitalChange(value) {
|
|
const item = this.hospitalList.filter((item) => item.Id === value)
|
|
if (item.length) {
|
|
this.form.UniversityAffiliated = item[0].UniversityAffiliated
|
|
this.form.City = item[0].City
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.info {
|
|
position: relative;
|
|
min-height: 100px;
|
|
.editBtn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0px;
|
|
}
|
|
.userInfo,
|
|
.userTitle,
|
|
.userTel {
|
|
line-height: 30px;
|
|
margin-bottom: 15px;
|
|
span {
|
|
margin-right: 20px;
|
|
&:last-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.userTitle,
|
|
.userTel {
|
|
span {
|
|
display: inline-block;
|
|
min-width: 80px;
|
|
border-right: 1px solid #ddd;
|
|
padding-right: 10px;
|
|
&::before {
|
|
margin-right: 5px;
|
|
}
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding-top: 0 !important;
|
|
}
|
|
.form_title {
|
|
margin: 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
&::after {
|
|
margin-left: 20px;
|
|
display: block;
|
|
content: '';
|
|
border-top: 1px solid #eee;
|
|
flex: 1;
|
|
}
|
|
}
|
|
.noData {
|
|
line-height: 100px;
|
|
}
|
|
</style> |