irc_web/src/views/reviewers/components/Specialty.vue

429 lines
14 KiB
Vue

<template>
<div class="form-container">
<el-card class="box-card">
<div style="width: 80%">
<el-form
ref="specialtyForm"
v-loading="loading"
:rules="specialtyRules"
:model="specialtyForm"
class="demo-ruleForm"
label-width="150px"
>
<el-row>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:Specialty')"
prop="SpecialityId"
>
<el-select
v-model="specialtyForm.SpecialityId"
:disabled="$route.query.ReviewStatus === '1'"
placeholder="Please 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="$t('curriculumVitae:selectLabel:Other')"
:value="otherId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
v-if="specialtyForm.SpecialityId == otherId"
class="other-item"
prop="SpecialityOther"
>
<el-input
:disabled="$route.query.ReviewStatus === '1'"
v-model="specialtyForm.SpecialityOther"
placeholder="Please specify (required)"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
v-if="specialtyForm.SpecialityId == otherId"
prop="SpecialityOtherCN"
class="other-item"
>
<el-input
:disabled="$route.query.ReviewStatus === '1'"
v-model="specialtyForm.SpecialityOtherCN"
placeholder="请用中文注明"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:Subspeciality')"
prop="SubspecialityIds"
>
<el-select
v-model="specialtyForm.SubspecialityIds"
:disabled="$route.query.ReviewStatus === '1'"
placeholder="select"
multiple
style="width: 100%"
size="small"
>
<!-- <el-option
v-for="(key,value) of dictionaryList.Subspeciality"
:key="key"
:label="key"
:value="value"
/> -->
<el-option
v-for="item of dictionaryList.Subspeciality"
:key="item.Id"
:label="item.Value"
:value="item.Id"
/>
<el-option
:label="$t('curriculumVitae:selectLabel:Other')"
:value="otherId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
v-if="
specialtyForm.SubspecialityIds &&
specialtyForm.SubspecialityIds.indexOf(otherId) > -1
"
class="other-item"
prop="SubspecialityOther"
>
<el-input
:disabled="$route.query.ReviewStatus === '1'"
v-model="specialtyForm.SubspecialityOther"
placeholder="Please specify (required)"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
v-if="
specialtyForm.SubspecialityIds &&
specialtyForm.SubspecialityIds.indexOf(otherId) > -1
"
class="other-item"
prop="SubspecialityOtherCN"
>
<el-input
:disabled="$route.query.ReviewStatus === '1'"
v-model="specialtyForm.SubspecialityOtherCN"
placeholder="请用中文注明"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
:label="$t('system:reviewer:label:Modality')"
prop="ReadingTypeIds"
>
<el-select
:disabled="$route.query.ReviewStatus === '1'"
v-model="specialtyForm.ReadingTypeIds"
placeholder="Please select"
style="width: 100%"
multiple
size="small"
>
<!-- <el-option
v-for="(key,value) of dictionaryList.ReadingType"
:key="key"
:label="key"
:value="value"
/> -->
<el-option
v-for="item of dictionaryList.ReadingType"
:key="item.Id"
:label="item.Value"
:value="item.Id"
/>
<el-option
:label="$t('curriculumVitae:selectLabel:Other')"
:value="otherId"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
v-if="
specialtyForm.ReadingTypeIds &&
specialtyForm.ReadingTypeIds.indexOf(otherId) > -1
"
prop="ReadingTypeOther"
class="other-item"
>
<el-input
:disabled="$route.query.ReviewStatus === '1'"
v-model="specialtyForm.ReadingTypeOther"
placeholder="Please specify (required)"
size="small"
:maxlength="400"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
v-if="
specialtyForm.ReadingTypeIds &&
specialtyForm.ReadingTypeIds.indexOf(otherId) > -1
"
prop="ReadingTypeOtherCN"
class="other-item"
>
<el-input
:disabled="$route.query.ReviewStatus === '1'"
v-model="specialtyForm.ReadingTypeOtherCN"
placeholder="请用中文注明"
size="small"
:maxlength="400"
/>
</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 { getSpecialtyInfo, updateSpecialtyInfo } from '@/api/reviewers'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
export default {
name: 'Specialty',
props: {
reviewerId: {
type: String,
},
},
data() {
return {
specialtyForm: {
ReadingTypeIds: [],
ReadingTypeOther: '',
ReadingTypeOtherCN: '',
SubspecialityIds: [],
SubspecialityOther: '',
SubspecialityOtherCN: '',
SpecialityId: '',
SpecialityOther: '',
SpecialityOtherCN: '',
},
specialtyRules: {
SpecialityId: [
{
required: true,
message: 'Please select speciality',
trigger: 'blur',
},
],
SpecialityOther: [
{ required: true, message: 'Please specify', trigger: 'blur' },
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
SpecialityOtherCN: [
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
ReadingTypeIds: [
{
required: true,
message: 'Please select clinical reading type',
trigger: 'blur',
},
],
ReadingTypeOther: [
{ required: true, message: 'Please specify', trigger: 'blur' },
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
ReadingTypeOtherCN: [
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
SubspecialityIds: [
{
required: true,
message: 'Please select subspecialty',
trigger: 'blur',
},
],
SubspecialityOther: [
{ required: true, message: 'Please specify', trigger: 'blur' },
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
SubspecialityOtherCN: [
{
max: 400,
message: this.$t('form:rules:maxLength:400'),
trigger: 'blur',
},
],
},
selectId: '00000000-0000-0000-0000-000000000000',
otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
isDisabled: false,
loading: false,
dictionaryList: {},
}
},
mounted() {
this.initSpecialty()
},
methods: {
handleSave() {
this.$refs.specialtyForm.validate((valid) => {
if (valid) {
this.isDisabled = true
const params = {}
params.ReadingTypeIds = this.specialtyForm.ReadingTypeIds
params.ReadingTypeOther =
params.ReadingTypeIds.indexOf(this.otherId) > -1
? this.specialtyForm.ReadingTypeOther
: ''
params.ReadingTypeOtherCN =
params.ReadingTypeIds.indexOf(this.otherId) > -1
? this.specialtyForm.ReadingTypeOtherCN
: ''
params.SubspecialityIds = this.specialtyForm.SubspecialityIds
params.SubspecialityOther =
params.SubspecialityIds.indexOf(this.otherId) > -1
? this.specialtyForm.SubspecialityOther
: ''
params.SubspecialityOtherCN =
params.SubspecialityIds.indexOf(this.otherId) > -1
? this.specialtyForm.SubspecialityOtherCN
: ''
params.SpecialityId = this.specialtyForm.SpecialityId
params.SpecialityOther =
params.SpecialityId === this.otherId
? this.specialtyForm.SpecialityOther
: ''
params.SpecialityOtherCN =
params.SpecialityId === this.otherId
? this.specialtyForm.SpecialityOtherCN
: ''
params.Id = this.$route.query.Id || this.reviewerId
updateSpecialtyInfo(params)
.then((res) => {
this.isDisabled = false
this.$message.success('Saved successfully')
this.specialtyForm.Id = res.Result
})
.catch(() => {
this.isDisabled = false
})
}
})
},
initForm() {
this.loading = true
const id = this.$route.query.Id || this.reviewerId
if (id) {
getSpecialtyInfo(id)
.then((res) => {
this.specialtyForm.ReadingTypeIds =
res.Result.ReadingTypeIds.length > 0
? res.Result.ReadingTypeIds
: []
this.specialtyForm.ReadingTypeOther = res.Result.ReadingTypeOther
this.specialtyForm.ReadingTypeOtherCN =
res.Result.ReadingTypeOtherCN
this.specialtyForm.SubspecialityIds = res.Result.SubspecialityIds
this.specialtyForm.SubspecialityOther =
res.Result.SubspecialityOther
this.specialtyForm.SubspecialityOtherCN =
res.Result.SubspecialityOtherCN
this.specialtyForm.SpecialityId =
res.Result.SpecialityId === this.selectId
? ''
: res.Result.SpecialityId
this.specialtyForm.SpecialityOther = res.Result.SpecialityOther
this.specialtyForm.SpecialityOtherCN = res.Result.SpecialityOtherCN
this.loading = false
})
.catch(() => {
this.loading = false
})
}
},
async initSpecialty() {
await this.getDicData()
this.initForm()
},
getDicData() {
getBasicDataSelects(['Department', 'Subspeciality', 'ReadingType']).then(
(res) => {
this.dictionaryList = { ...res.Result }
}
)
},
},
}
</script>
<style lang="scss">
.other-item .el-form-item__content {
margin-left: 80px !important;
}
</style>