354 lines
13 KiB
Plaintext
354 lines
13 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"
|
|
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 dictionaryList.Rank"
|
|
: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.RankId===otherId" 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="employmentForm.RankId===otherId" 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="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() {
|
|
return {
|
|
employmentForm: {
|
|
Id: this.$route.query.Id,
|
|
DepartmentId: '',
|
|
DepartmentOther: '',
|
|
DepartmentOtherCN: '',
|
|
RankId: '',
|
|
RankOther: '',
|
|
RankOtherCN: '',
|
|
PositionId: '',
|
|
PositionOther: '',
|
|
PositionOtherCN: '',
|
|
HospitalId: ''
|
|
},
|
|
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: [{ max: 50, message: 'The maximum length is 50' }],
|
|
RankOtherCN: [{ 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: {
|
|
handleSave() {
|
|
this.$refs.employmentForm.validate(valid => {
|
|
if (valid) {
|
|
this.loading = true
|
|
this.isDisabled = true
|
|
const param = {}
|
|
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.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 { 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.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>
|