450 lines
17 KiB
Plaintext
450 lines
17 KiB
Plaintext
<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="Hospital: " prop="HospitalId">
|
|
<el-select
|
|
v-model="employmentForm.HospitalId"
|
|
placeholder="select"
|
|
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="Affiliated University: ">
|
|
<el-input
|
|
v-model="UniversityAffiliated"
|
|
type="textarea"
|
|
autosize
|
|
disabled
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item label="City: ">
|
|
<el-input v-model="City" disabled size="small" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item label="State/Province: ">
|
|
<el-input v-model="Province" disabled size="small" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item label="Country: ">
|
|
<el-input v-model="Country" disabled size="small" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item label="Department: " prop="DepartmentId">
|
|
<el-select
|
|
v-model="employmentForm.DepartmentId"
|
|
placeholder="select"
|
|
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
|
|
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
|
|
v-model="employmentForm.DepartmentOtherCN"
|
|
placeholder="请用中文注明"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item label="Rank: " prop="RankId">
|
|
<el-select
|
|
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
|
|
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
|
|
v-model="employmentForm.RankOtherCN"
|
|
placeholder="请用中文注明"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item label="Physician: " prop="PhysicianId" >
|
|
<el-select
|
|
v-model="employmentForm.PhysicianId"
|
|
placeholder="select"
|
|
@change="PhysicianChange"
|
|
style="width:100%;"
|
|
size="small"
|
|
>
|
|
<el-option
|
|
v-for="item of $d.PhysicianOriginal"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item v-if="$fd('PhysicianOriginal', employmentForm.PhysicianId, 'id') === '其它' || $fd('PhysicianOriginal', employmentForm.PhysicianId, 'id') === 'Other'" class="other-item" prop="Physician">
|
|
<el-input
|
|
v-model="employmentForm.Physician"
|
|
placeholder="Please specify"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item v-if="$fd('PhysicianOriginal', employmentForm.PhysicianId, 'id') === '其它' || $fd('PhysicianOriginal', employmentForm.PhysicianId, 'id') === 'Other'" class="other-item" prop="PhysicianCN">
|
|
<el-input
|
|
v-model="employmentForm.PhysicianCN"
|
|
placeholder="请用中文注明"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="14">
|
|
<el-form-item label="Position: " prop="Position">
|
|
<el-select
|
|
v-model="employmentForm.PositionId"
|
|
placeholder="select"
|
|
style="width:100%;"
|
|
size="small"
|
|
>
|
|
<!-- <el-option
|
|
v-for="(key,value) of dictionaryList.Position"
|
|
:key="key"
|
|
:label="key"
|
|
:value="value"
|
|
/> -->
|
|
<el-option
|
|
v-for="item of dictionaryList.Position"
|
|
:key="item.Id"
|
|
:label="item.Value"
|
|
:value="item.Id"
|
|
/>
|
|
<el-option label="Other" :value="otherId" />
|
|
<el-option label="None" value="f30a074b-2b47-4a92-97ec-e15086d37883" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item v-if="employmentForm.PositionId===otherId" class="other-item" prop="PositionOther">
|
|
<el-input
|
|
v-model="employmentForm.PositionOther"
|
|
placeholder="Please specify"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item v-if="employmentForm.PositionId===otherId" class="other-item" prop="PositionOtherCN">
|
|
<el-input
|
|
v-model="employmentForm.PositionOtherCN"
|
|
placeholder="请用中文注明"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" :disabled="isDisabled" size="small" @click="handleSave">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',
|
|
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,
|
|
DepartmentId: '',
|
|
DepartmentOther: '',
|
|
DepartmentOtherCN: '',
|
|
RankId: '',
|
|
RankOther: '',
|
|
RankOtherCN: '',
|
|
PositionId: '',
|
|
PositionOther: '',
|
|
PositionOtherCN: '',
|
|
HospitalId: '',
|
|
PhysicianId: '',
|
|
Physician: '',
|
|
PhysicianCN: '',
|
|
PhysicianOriginal: 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
|
|
param.DepartmentId = this.employmentForm.DepartmentId
|
|
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
|
|
if (id) {
|
|
this.loading = true
|
|
getEmploymentInfo(id).then(res => {
|
|
const { PhysicianId, Physician, PhysicianCN, DepartmentId, DepartmentOther, DepartmentOtherCN, RankId, RankOther, RankOtherCN, PositionId, PositionOther, PositionOtherCN, HospitalId } = res.Result
|
|
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>
|