irc_web/src/views/reviewers/curriculumVitae/components/info/info.vue

864 lines
24 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>{{
isEN ? DATA.LastName + ' / ' + DATA.FirstName : DATA.ChineseName
}}</span>
<span>{{ $fd('Sex', DATA.Sex) }}</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 v-if="isEN">{{ DATA.HospitalName }}</span>
<span v-else>{{ DATA.HospitalNameCN }}</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-first-aid-kit" v-else>
<span v-if="isEN">{{ DATA.DepartmentOther }}</span>
<span v-else>{{ DATA.DepartmentOtherCN }}</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>
</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>
<div style="display: flex; font-size: 14px">
<span style="display: inline-block; width: 70px; color: #606266">{{
$t('curriculumVitae:info:meessage:partTimeJob')
}}</span>
<span
class="break-word"
style="
white-space: pre-wrap;
width: calc(100% - 80px);
word-wrap: break-word;
"
v-html="isEN ? DATA.WorkPartTimeEn : DATA.WorkPartTime"
></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="100px"
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
:maxlength="400"
></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
:maxlength="400"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" v-if="!isEN">
<el-form-item
:label="$t('curriculumVitae:info:form:userNameCN')"
prop="ChineseName"
>
<el-input
v-model="form.ChineseName"
clearable
:maxlength="400"
></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
:maxlength="400"
></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="DATA.IsHaveAccount"
></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
:maxlength="400"
></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="HospitalName"
v-if="isEN"
>
<el-autocomplete
clearable
class="inline-input"
style="width: 100%"
v-model="form.HospitalName"
:fetch-suggestions="querySearch"
@select="handleSelect"
placeholder=""
@change="handleChange"
></el-autocomplete>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:info:form:hospital')"
prop="HospitalNameCN"
v-else
>
<el-autocomplete
clearable
class="inline-input"
style="width: 100%"
v-model="form.HospitalNameCN"
:fetch-suggestions="querySearch"
@select="handleSelect"
placeholder=""
@change="handleChange"
></el-autocomplete>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:info:form:AffiliatedUniversity')"
prop="UniversityAffiliated"
v-if="isEN"
>
<el-input
v-model="form.UniversityAffiliated"
type="textarea"
autosize
size="small"
:maxlength="4000"
/>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:info:form:AffiliatedUniversity')"
prop="UniversityAffiliated"
v-else
>
<el-input
v-model="form.UniversityAffiliatedCN"
type="textarea"
autosize
size="small"
:maxlength="4000"
/>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:info:form:City')"
v-if="isEN"
>
<el-input v-model="form.City" size="small" />
</el-form-item>
<el-form-item :label="$t('curriculumVitae:info:form:City')" v-else>
<el-input v-model="form.CityCN" 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="$t('curriculumVitae:selectLabel:Other')"
:value="otherId"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="form.DepartmentId === otherId && isEN"
class="other-item"
prop="DepartmentOther"
>
<el-input
v-model="form.DepartmentOther"
:placeholder="
$t('curriculumVitae:info:form:placeholder:DepartmentOther')
"
size="small"
:maxlength="400"
/>
</el-form-item>
<el-form-item
v-if="form.DepartmentId === otherId && !isEN"
class="other-item"
prop="DepartmentOtherCN"
>
<el-input
v-model="form.DepartmentOtherCN"
:placeholder="
$t('curriculumVitae:info:form:placeholder:DepartmentOtherCN')
"
size="small"
:maxlength="400"
/>
</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') ===
$t('curriculumVitae:selectLabel:Other') && isEN
"
class="other-item"
prop="RankOther"
>
<el-input
v-model="form.RankOther"
:placeholder="
$t('curriculumVitae:info:form:placeholder:RankOther')
"
size="small"
:maxlength="400"
/>
</el-form-item>
<el-form-item
v-if="
$fd('Rank', form.RankId, 'id') ===
$t('curriculumVitae:selectLabel:Other') && !isEN
"
class="other-item"
prop="RankOtherCN"
>
<el-input
v-model="form.RankOtherCN"
:placeholder="
$t('curriculumVitae:info:form:placeholder:RankOtherCN')
"
size="small"
:maxlength="400"
/>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:info:form:partTimeJob')"
prop="WorkPartTime"
v-if="!isEN"
>
<el-input
:placeholder="
$t('curriculumVitae:info:form:placeholder:partTimeJob')
"
v-model="form.WorkPartTime"
type="textarea"
:rows="10"
clearable
:maxlength="4000"
></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:info:form:partTimeJob')"
prop="WorkPartTimeEn"
v-else
>
<el-input
:placeholder="
$t('curriculumVitae:info:form:placeholder:partTimeJobEN')
"
v-model="form.WorkPartTimeEn"
type="textarea"
:rows="10"
:maxlength="4000"
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: '',
HospitalName: null,
HospitalNameCN: null,
WorkPartTime: null,
WorkPartTimeEn: null,
UniversityAffiliated: null,
UniversityAffiliatedCN: null,
City: null,
CityCN: 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: true,
top: '8vh',
bodyStyle: `min-height: 100px; max-height: 650px;overflow-y: auto;padding: 10px;border: 1px solid #e0e0e0;`,
},
form: defaultForm(),
rules: {
FirstName: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: 'blur',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
LastName: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
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: this.$t('common:ruleMessage:select'),
trigger: 'blur',
},
],
TitleIds: [
{
required: true,
message: this.$t('common:ruleMessage:select'),
trigger: 'blur',
},
],
Phone: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: 'blur',
},
{ max: 20, min: 7, message: 'The length is 7 to 20' },
],
EMail: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: 'blur',
},
{
// type: 'email',
pattern: new RegExp(this.$reg().EmailRegexStr),
message: this.$t('rules:email'),
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',
},
],
Nation: [
{
required: true,
message: this.$t('common:ruleMessage:select'),
trigger: 'blur',
},
],
DepartmentId: [
{
required: true,
message: this.$t('common:ruleMessage:select'),
trigger: 'blur',
},
],
DepartmentOther: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: 'blur',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
,
],
DepartmentOtherCN: [
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
RankId: [
{
required: true,
message: this.$t('common:ruleMessage:select'),
trigger: 'blur',
},
],
RankOther: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: 'blur',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
RankOtherCN: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: 'blur',
},
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
HospitalName: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: ['blur', 'change'],
},
],
HospitalNameCN: [
{
required: true,
message: this.$t('common:ruleMessage:specify'),
trigger: ['blur', 'change'],
},
],
UniversityAffiliated: [
{
max: 4000,
message: this.$t('form:rules:maxLength:4000'),
trigger: 'blur',
},
],
WorkPartTime: [
{
max: 4000,
message: this.$t('form:rules:maxLength:4000'),
trigger: 'blur',
},
],
WorkPartTimeEn: [
{
max: 4000,
message: this.$t('form:rules:maxLength:4000'),
trigger: 'blur',
},
],
},
loading: false,
dictionaryList: {},
otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
hospitalSelectList: [],
}
},
computed: {
...mapGetters(['hospitalList']),
},
watch: {
hospitalList: {
handler() {
if (!Array.isArray(this.hospitalList) || this.hospitalList.length <= 0)
return false
this.hospitalSelectList = []
this.hospitalList.forEach((item) => {
if (this.isEN) {
this.hospitalSelectList.push({
value: item.HospitalName,
...item,
})
} else {
this.hospitalSelectList.push({
value: item.HospitalNameCN,
...item,
})
}
})
},
deep: true,
},
},
mounted() {
this.getDicData()
store.dispatch('global/getHospital')
},
methods: {
handleChange(v) {
if (v) return
this.form.UniversityAffiliated = null
this.form.City = null
this.form.UniversityAffiliatedCN = null
this.form.CityCN = null
},
querySearch(queryString, cb) {
var hospitalList = this.hospitalSelectList
var results = queryString
? hospitalList.filter(this.createFilter(queryString))
: hospitalList
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter(queryString) {
return (hospitalList) => {
if (this.isEN) {
return (
hospitalList.HospitalName.toLowerCase().indexOf(
queryString.toLowerCase()
) >= 0
)
} else {
return (
hospitalList.HospitalNameCN.toLowerCase().indexOf(
queryString.toLowerCase()
) >= 0
)
}
}
},
openEdit() {
this.form = defaultForm()
Object.keys(this.form).forEach((key) => {
if (this.DATA[key] || this.DATA[key] == 0) {
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
}
// console.log(this.form)
let data = Object.assign({}, this.form)
// if (!this.hospitalList.find((item) => item.Id === data.HospitalId)) {
// data.HospitalName = data.HospitalId
// data.HospitalId = null
// }
this.loading = true
let res = await addOrUpdateDoctorBasicInfoAndEmployment(data)
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(() => {})
},
handleSelect(value) {
const item = value
if (item) {
this.form.UniversityAffiliated = item.UniversityAffiliated
this.form.City = item.City
this.form.UniversityAffiliatedCN = item.UniversityAffiliatedCN
this.form.CityCN = item.CityCN
} else {
this.form.UniversityAffiliated = null
this.form.City = null
this.form.UniversityAffiliatedCN = null
this.form.CityCN = null
}
},
},
}
</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>