557 lines
18 KiB
Vue
557 lines
18 KiB
Vue
<template>
|
|
<div class="form-container">
|
|
<el-card class="box-card">
|
|
<div style="width: 80%">
|
|
<el-form
|
|
ref="employmentForm"
|
|
v-loading="loading"
|
|
:rules="employmentRules"
|
|
:model="employmentForm"
|
|
class="demo-ruleForm"
|
|
label-width="150px"
|
|
>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item
|
|
:label="$t('system:reviewer:label:Hospital')"
|
|
prop="HospitalId"
|
|
>
|
|
<el-select
|
|
v-model="employmentForm.HospitalId"
|
|
placeholder="select"
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
style="width: 100%"
|
|
size="small"
|
|
@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-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item
|
|
:label="$t('system:reviewer:label:AffiliatedUniversity')"
|
|
>
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="UniversityAffiliated"
|
|
type="textarea"
|
|
autosize
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item :label="$t('system:reviewer:label:City')">
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="City"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item :label="$t('system:reviewer:label:State/Province')">
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="Province"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item :label="$t('system:reviewer:label:Country')">
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="Country"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item
|
|
:label="$t('system:reviewer:label:Department')"
|
|
prop="DepartmentId"
|
|
>
|
|
<el-select
|
|
v-model="employmentForm.DepartmentId"
|
|
placeholder="select"
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
style="width: 100%"
|
|
size="small"
|
|
>
|
|
<!-- <el-option
|
|
v-for="(key,value) of dictionaryList.Department"
|
|
:key="key"
|
|
:label="key"
|
|
:value="value"
|
|
/> -->
|
|
<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-col>
|
|
<el-col :span="5">
|
|
<el-form-item
|
|
v-if="employmentForm.DepartmentId === otherId"
|
|
class="other-item"
|
|
prop="DepartmentOther"
|
|
>
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="employmentForm.DepartmentOther"
|
|
placeholder="Please specify (required)"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item
|
|
v-if="employmentForm.DepartmentId === otherId"
|
|
class="other-item"
|
|
prop="DepartmentOtherCN"
|
|
>
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="employmentForm.DepartmentOtherCN"
|
|
placeholder="请用中文注明"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item
|
|
:label="$t('system:reviewer:label:Rank')"
|
|
prop="RankId"
|
|
>
|
|
<el-select
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="employmentForm.RankId"
|
|
placeholder="select"
|
|
@change="RankChange"
|
|
style="width: 100%"
|
|
size="small"
|
|
>
|
|
<!-- <el-option
|
|
v-for="(key,value) of dictionaryList.Rank"
|
|
:key="key"
|
|
:label="key"
|
|
:value="value"
|
|
/> -->
|
|
<el-option
|
|
v-for="item of $d.Rank"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:value="item.id"
|
|
/>
|
|
<!-- <el-option label="Other" :value="otherId" />-->
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item
|
|
v-if="
|
|
$fd('Rank', employmentForm.RankId, 'id') === '其它' ||
|
|
$fd('Rank', employmentForm.RankId, 'id') === 'Other'
|
|
"
|
|
class="other-item"
|
|
prop="RankOther"
|
|
>
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="employmentForm.RankOther"
|
|
placeholder="Please specify"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item
|
|
v-if="
|
|
$fd('Rank', employmentForm.RankId, 'id') === '其它' ||
|
|
$fd('Rank', employmentForm.RankId, 'id') === 'Other'
|
|
"
|
|
class="other-item"
|
|
prop="RankOtherCN"
|
|
>
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="employmentForm.RankOtherCN"
|
|
placeholder="请用中文注明"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item
|
|
:label="$t('system:reviewer:label:WorkPartTime')"
|
|
prop="WorkPartTime"
|
|
>
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="employmentForm.WorkPartTime"
|
|
type="textarea"
|
|
:rows="2"
|
|
:placeholder="
|
|
$t('curriculumVitae:info:form:placeholder:partTimeJob')
|
|
"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item prop="WorkPartTimeEn">
|
|
<el-input
|
|
:disabled="$route.query.ReviewStatus === '1'"
|
|
v-model="employmentForm.WorkPartTimeEn"
|
|
type="textarea"
|
|
:rows="2"
|
|
:placeholder="
|
|
$t('curriculumVitae:info:form:placeholder:partTimeJobEN')
|
|
"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
:disabled="isDisabled || $route.query.ReviewStatus === '1'"
|
|
size="small"
|
|
@click="handleSave"
|
|
>{{ $t('common:button:save') }}</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getEmploymentInfo, updateEmploymentInfo } from '@/api/reviewers'
|
|
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
|
|
import store from '@/store'
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'Employment',
|
|
props: {
|
|
reviewerId: {
|
|
type: String,
|
|
},
|
|
},
|
|
data() {
|
|
const RankIndication = (rule, value, callback) => {
|
|
if (value === '其它' || value === 'Other') {
|
|
if (!this.trialForm.IndicationOther) {
|
|
return callback(new Error('请输入适应症'))
|
|
}
|
|
}
|
|
callback()
|
|
}
|
|
const PhysicianIndication = (rule, value, callback) => {
|
|
if (value === '其它' || value === 'Other') {
|
|
if (!this.trialForm.IndicationOther) {
|
|
return callback(new Error('请输入适应症'))
|
|
}
|
|
}
|
|
callback()
|
|
}
|
|
return {
|
|
employmentForm: {
|
|
Id: this.$route.query.Id || this.reviewerId,
|
|
DepartmentId: '',
|
|
DepartmentOther: '',
|
|
DepartmentOtherCN: '',
|
|
RankId: '',
|
|
RankOther: '',
|
|
RankOtherCN: '',
|
|
PositionId: '',
|
|
PositionOther: '',
|
|
PositionOtherCN: '',
|
|
HospitalId: '',
|
|
PhysicianId: '',
|
|
Physician: '',
|
|
PhysicianCN: '',
|
|
PhysicianOriginal: null,
|
|
WorkPartTime: null,
|
|
WorkPartTimeEn: null,
|
|
},
|
|
UniversityAffiliated: '',
|
|
City: '',
|
|
Province: '',
|
|
Country: '',
|
|
employmentRules: {
|
|
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' },
|
|
],
|
|
PhysicianId: [
|
|
{
|
|
required: true,
|
|
message: 'Please select Physician',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
Physician: [
|
|
{
|
|
required: true,
|
|
message: 'Please select Physician',
|
|
trigger: 'blur',
|
|
},
|
|
{ max: 50, message: 'The maximum length is 50' },
|
|
],
|
|
PhysicianCN: [
|
|
{
|
|
required: true,
|
|
message: 'Please select Physician',
|
|
trigger: 'blur',
|
|
},
|
|
{ max: 50, message: 'The maximum length is 50' },
|
|
],
|
|
PositionId: [
|
|
{
|
|
required: true,
|
|
message: 'Please select position',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
PositionOther: [{ max: 50, message: 'The maximum length is 50' }],
|
|
PositionOtherCN: [{ max: 50, message: 'The maximum length is 50' }],
|
|
HospitalId: [
|
|
{
|
|
required: true,
|
|
message: 'Please select hospital',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
},
|
|
isDisabled: false,
|
|
selectId: '00000000-0000-0000-0000-000000000000',
|
|
otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
|
|
loading: false,
|
|
dictionaryList: {},
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['hospitalList']),
|
|
},
|
|
mounted() {
|
|
this.initEmployment()
|
|
},
|
|
methods: {
|
|
RankChange(val) {
|
|
var o = this.$d.Rank.find((v) => {
|
|
return v.id === val
|
|
})
|
|
if (o.label === '其它' || o.label === 'Other') {
|
|
this.employmentForm.RankOther = ''
|
|
this.employmentForm.RankOtherCN = ''
|
|
} else {
|
|
this.employmentForm.RankOther = o.raw.Value
|
|
this.employmentForm.RankOtherCN = o.raw.ValueCN
|
|
}
|
|
},
|
|
PhysicianChange(val) {
|
|
var o = this.$d.PhysicianOriginal.find((v) => {
|
|
return v.id === val
|
|
})
|
|
if (o.label === '其它' || o.label === 'Other') {
|
|
this.employmentForm.Physician = ''
|
|
this.employmentForm.PhysicianCN = ''
|
|
} else {
|
|
this.employmentForm.Physician = o.raw.Value
|
|
this.employmentForm.PhysicianCN = o.raw.ValueCN
|
|
}
|
|
},
|
|
handleSave() {
|
|
this.$refs.employmentForm.validate((valid) => {
|
|
if (valid) {
|
|
this.loading = true
|
|
this.isDisabled = true
|
|
const param = {}
|
|
// var o = this.$d.PhysicianOriginal.find(v => {
|
|
// return v.id === this.employmentForm.PhysicianId
|
|
// })
|
|
param.Id = this.$route.query.Id || this.reviewerId
|
|
param.DepartmentId = this.employmentForm.DepartmentId
|
|
param.WorkPartTime = this.employmentForm.WorkPartTime
|
|
param.WorkPartTimeEn = this.employmentForm.WorkPartTimeEn
|
|
param.DepartmentOther =
|
|
this.employmentForm.DepartmentId === this.otherId
|
|
? this.employmentForm.DepartmentOther
|
|
: ''
|
|
param.DepartmentOtherCN =
|
|
this.employmentForm.DepartmentId === this.otherId
|
|
? this.employmentForm.DepartmentOtherCN
|
|
: ''
|
|
param.RankId = this.employmentForm.RankId
|
|
param.RankOther =
|
|
this.employmentForm.RankId === this.otherId
|
|
? this.employmentForm.RankOther
|
|
: ''
|
|
param.RankOtherCN =
|
|
this.employmentForm.RankId === this.otherId
|
|
? this.employmentForm.RankOtherCN
|
|
: ''
|
|
// param.PhysicianId = this.employmentForm.PhysicianId
|
|
// param.Physician = o.label !== '其它' && o.label !== 'Other' ? o.raw.Value : this.employmentForm.Physician
|
|
// param.PhysicianCN = o.label !== '其它' && o.label !== 'Other' ? o.raw.ValueCN : this.employmentForm.PhysicianCN
|
|
param.PositionId = this.employmentForm.PositionId
|
|
param.PositionOther =
|
|
this.employmentForm.PositionId === this.otherId
|
|
? this.employmentForm.PositionOther
|
|
: ''
|
|
param.PositionOtherCN =
|
|
this.employmentForm.PositionId === this.otherId
|
|
? this.employmentForm.PositionOtherCN
|
|
: ''
|
|
param.HospitalId = this.employmentForm.HospitalId
|
|
|
|
updateEmploymentInfo(param)
|
|
.then((res) => {
|
|
this.isDisabled = false
|
|
this.loading = false
|
|
this.$message.success('Saved successfully')
|
|
if (!this.id) {
|
|
this.employmentForm.Id = res.Result
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.isDisabled = false
|
|
this.loading = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
initForm() {
|
|
const id = this.$route.query.Id || this.reviewerId
|
|
if (id) {
|
|
this.loading = true
|
|
getEmploymentInfo(id)
|
|
.then((res) => {
|
|
const {
|
|
PhysicianId,
|
|
Physician,
|
|
PhysicianCN,
|
|
DepartmentId,
|
|
DepartmentOther,
|
|
DepartmentOtherCN,
|
|
RankId,
|
|
RankOther,
|
|
RankOtherCN,
|
|
PositionId,
|
|
PositionOther,
|
|
PositionOtherCN,
|
|
HospitalId,
|
|
WorkPartTime,
|
|
WorkPartTimeEn,
|
|
} = res.Result
|
|
this.employmentForm.WorkPartTime = WorkPartTime
|
|
this.employmentForm.WorkPartTimeEn = WorkPartTimeEn
|
|
this.employmentForm.Id = id
|
|
this.employmentForm.DepartmentId =
|
|
DepartmentId === this.selectId ? '' : DepartmentId
|
|
this.employmentForm.DepartmentOther = DepartmentOther
|
|
this.employmentForm.DepartmentOtherCN = DepartmentOtherCN
|
|
this.employmentForm.RankId = RankId === this.selectId ? '' : RankId
|
|
this.employmentForm.RankOther = RankOther
|
|
this.employmentForm.RankOtherCN = RankOtherCN
|
|
this.employmentForm.PositionId =
|
|
PositionId === this.selectId ? '' : PositionId
|
|
this.employmentForm.PositionOther = PositionOther
|
|
this.employmentForm.PhysicianId = PhysicianId
|
|
this.employmentForm.Physician = Physician
|
|
this.employmentForm.PhysicianCN = PhysicianCN
|
|
this.employmentForm.PositionOtherCN = PositionOtherCN
|
|
this.employmentForm.HospitalId =
|
|
HospitalId === this.selectId ? '' : HospitalId
|
|
this.handleHospitalChange(this.employmentForm.HospitalId)
|
|
this.loading = false
|
|
})
|
|
.catch(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
},
|
|
handleHospitalChange(value) {
|
|
const item = this.hospitalList.filter((item) => item.Id === value)
|
|
if (item.length) {
|
|
this.UniversityAffiliated = item[0].UniversityAffiliated
|
|
this.City = item[0].City
|
|
this.Province = item[0].Province
|
|
this.Country = item[0].Country
|
|
}
|
|
},
|
|
async initEmployment() {
|
|
await this.getDicData()
|
|
await store.dispatch('global/getHospital')
|
|
this.initForm()
|
|
},
|
|
getDicData() {
|
|
getBasicDataSelects(['Department', 'Rank', 'Position']).then((res) => {
|
|
this.dictionaryList = { ...res.Result }
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.other-item .el-form-item__content {
|
|
margin-left: 80px !important;
|
|
}
|
|
</style>
|