irc_web/.svn/pristine/e5/e5cd312a37e9ba87104a99a4f27...

652 lines
24 KiB
Plaintext

<template>
<div v-loading="loading" class="form-container">
<div class="title-wrapper">
<p>Education (in chronological order)</p>
<el-button class="add" :disabled="$route.query.ReviewStatus === '1'" size="small" @click="handleAddEducation">Add</el-button>
</div>
<el-table
ref="educationTbl"
:data="educationList"
border
class="table"
size="small"
>
<el-table-column type="index" width="30" />
<el-table-column
prop="BeginDateStr"
label="Start"
min-width="55"
show-overflow-tooltip
/>
<el-table-column
prop="EndDateStr"
label="End"
min-width="55"
show-overflow-tooltip
/>
<el-table-column prop="Degree" label="Degree" min-width="70" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.DegreeCN?`${scope.row.Degree} / ${scope.row.DegreeCN}`:scope.row.Degree }}
</template>
</el-table-column>
<el-table-column prop="Major" label="Major" min-width="120" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.MajorCN?`${scope.row.Major} / ${scope.row.MajorCN}`:scope.row.Major }}
</template>
</el-table-column>
<el-table-column
prop="Organization"
label="Institution"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.OrganizationCN?`${scope.row.Organization} / ${scope.row.OrganizationCN}`:scope.row.Organization }}
</template>
</el-table-column>
<el-table-column prop="City" label="City" min-width="90" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.CityCN?`${scope.row.City} / ${scope.row.CityCN}`:scope.row.City }}
</template>
</el-table-column>
<el-table-column prop="Province" label="State/Province" min-width="90" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.ProvinceCN?`${scope.row.Province} / ${scope.row.ProvinceCN}`:scope.row.Province }}
</template>
</el-table-column>
<el-table-column prop="Country" label="Country" min-width="80" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.CountryCN?`${scope.row.Country} / ${scope.row.CountryCN}`:scope.row.Country }}
</template>
</el-table-column>
<el-table-column label="Operation" min-width="120">
<template slot-scope="scope">
<el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleEducationEdit(scope.row)">Edit</el-button>
<el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleEducationDelete(scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<div class="title-wrapper" style="margin-top:40px;">
<p>Postgraduate Training (in chronological order)</p>
<el-button class="add" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handleAddPostgraduate">Add</el-button>
</div>
<el-table
ref="postgraduateTbl"
:data="postgraduateList"
border
class="table"
size="small"
>
<el-table-column type="index" width="30" />
<el-table-column
prop="BeginDateStr"
label="Start"
min-width="55"
show-overflow-tooltip
/>
<el-table-column
prop="EndDateStr"
label="End"
min-width="55"
show-overflow-tooltip
/>
<el-table-column prop="Training" label="Training" min-width="70" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.TrainingCN?`${scope.row.Training} / ${scope.row.TrainingCN}`:scope.row.Training }}
</template>
</el-table-column>
<el-table-column
prop="Major"
label="Specialty/Research Field"
min-width="155"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.MajorCN?`${scope.row.Major} / ${scope.row.MajorCN}`:scope.row.Major }}
</template>
</el-table-column>
<el-table-column prop="Hospital" label="Hospital" min-width="120" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.HospitalCN?`${scope.row.Hospital} / ${scope.row.HospitalCN}`:scope.row.Hospital }}
</template>
</el-table-column>
<el-table-column prop="School" label="University" min-width="120" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.SchoolCN?`${scope.row.School} / ${scope.row.SchoolCN}`:scope.row.School }}
</template>
</el-table-column>
<el-table-column prop="City" label="City" min-width="100" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.CityCN?`${scope.row.City} / ${scope.row.CityCN}`:scope.row.City }}
</template>
</el-table-column>
<el-table-column prop="Province" label="State/Province" min-width="100" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.ProvinceCN?`${scope.row.Province} / ${scope.row.ProvinceCN}`:scope.row.Province }}
</template>
</el-table-column>
<el-table-column prop="Country" label="Country" min-width="90" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.CountryCN?`${scope.row.Country} / ${scope.row.CountryCN}`:scope.row.Country }}
</template>
</el-table-column>
<el-table-column label="Operation" min-width="120">
<template slot-scope="scope">
<el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handlePostgraduateEdit(scope.row)">Edit</el-button>
<el-button type="text" size="small" :disabled="$route.query.ReviewStatus === '1'" @click="handlePostgraduateDelete(scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
v-if="educationDialogVisible"
:title="educationDialogTitle"
:visible.sync="educationDialogVisible"
width="40%"
:close-on-click-modal="false"
>
<el-form v-if="educationDialogVisible" ref="educationForm" size="small" label-width="120px" :model="educationForm" :rules="educationRules">
<el-form-item label="Start" prop="BeginDate">
<el-date-picker
v-model="educationForm.BeginDate"
type="month"
placeholder="select date"
value-format="yyyy-MM"
format="yyyy-MM"
size="small"
:picker-options="beginPickerOption"
/>
</el-form-item>
<el-form-item label="End" prop="EndDate">
<el-date-picker
v-model="educationForm.EndDate"
type="month"
placeholder="select date"
value-format="yyyy-MM"
format="yyyy-MM"
size="small"
:picker-options="endpickerOption"
/>
</el-form-item>
<el-form-item label="Degree" prop="Degree">
<el-select v-model="educationForm.Degree" placeholder="Please select" size="small">
<el-option
v-for="item in degreeOptions"
:key="item.value"
:label="item.value"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="Major" prop="Major">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="educationForm.Major" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="educationForm.MajorCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Institution" prop="Organization">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="educationForm.Organization" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="educationForm.OrganizationCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="City" prop="City">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="educationForm.City" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="educationForm.CityCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="State/Province" prop="Province">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="educationForm.Province" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="educationForm.ProvinceCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Country" prop="Country">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="educationForm.Country" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="educationForm.CountryCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" :loading="isDisabled" @click="handleEducationSave">Save</el-button>
</span>
</el-dialog>
<el-dialog
v-if="postgraduateDialogVisible"
:title="postgraduateDialogTitle"
:visible.sync="postgraduateDialogVisible"
width="40%"
:close-on-click-modal="false"
>
<el-form v-if="postgraduateDialogVisible" ref="postgraduateForm" size="small" label-width="190px" :model="postgraduateForm" :rules="postgraduateRules">
<el-form-item label="Start" prop="BeginDate">
<el-date-picker
v-model="postgraduateForm.BeginDate"
type="month"
placeholder="select date"
value-format="yyyy-MM"
format="yyyy-MM"
:picker-options="postgraduateBeginPickerOption"
size="small"
/>
</el-form-item>
<el-form-item label="End" prop="EndDate">
<el-date-picker
v-model="postgraduateForm.EndDate"
type="month"
placeholder="select date"
value-format="yyyy-MM"
format="yyyy-MM"
:picker-options="postgraduateEndpickerOption"
size="small"
/>
</el-form-item>
<el-form-item label="Training" prop="Training">
<el-select v-model="postgraduateForm.Training" placeholder="Please select" size="small">
<el-option
v-for="item in TrainingOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="Specialty / Research Field" prop="Major">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="postgraduateForm.Major" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="postgraduateForm.MajorCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Hospital" prop="Hospital">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="postgraduateForm.Hospital" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="postgraduateForm.HospitalCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="University" prop="School">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="postgraduateForm.School" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="postgraduateForm.SchoolCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="City" prop="City">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="postgraduateForm.City" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="postgraduateForm.CityCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="State/Province" prop="Province">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="postgraduateForm.Province" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="postgraduateForm.ProvinceCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Country" prop="Country">
<el-row type="flex" justify="space-between">
<el-col :span="11">
<el-input v-model="postgraduateForm.Country" placeholder="Please specify in English" size="small" />
</el-col>
<el-col :span="11">
<el-input v-model="postgraduateForm.CountryCN" placeholder="请用中文注明" size="small" />
</el-col>
</el-row>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" :loading="isDisabled" @click="handlePostgraduateSave">Save</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getEducation, addOrUpdateEducationInfo, deleteEducationInfo, addOrUpdatePostgraduateInfo, deletePostgraduateInfo } from '@/api/reviewers'
const getEducationDefault = () => {
return {
Id: '',
DoctorId: '',
BeginDate: '',
EndDate: '',
Degree: '',
Major: '',
MajorCN: '',
Organization: '',
OrganizationCN: '',
City: '',
CityCN: '',
Province: '',
ProvinceCN: '',
Country: '',
CountryCN: ''
}
}
const getPostgraduateDefault = () => {
return {
Id: '',
DoctorId: '',
BeginDate: '',
EndDate: '',
Training: '',
Major: '',
MajorCN: '',
Hospital: '',
HospitalCN: '',
School: '',
SchoolCN: '',
City: '',
CityCN: '',
Province: '',
ProvinceCN: '',
Country: '',
CountryCN: ''
}
}
export default {
name: 'EducationTraining',
data() {
return {
educationList: [],
postgraduateList: [],
educationDialogTitle: '',
educationForm: getEducationDefault(),
educationRules: {
BeginDate: [{ required: true, message: 'Please select a start date', trigger: 'blur' }],
EndDate: [{ required: true, message: 'Please select a valid date', trigger: 'blur' }],
Degree: [
{ required: true, message: 'Please enter the degree', trigger: 'blur' },
{ max: 100, message: 'The maximum length is 100' }
],
Major: [
{ required: true, message: 'Please enter the major', trigger: 'blur' },
{ max: 100, message: 'The maximum length is 100' }
],
Organization: [
{ required: true, message: 'Please enter the institution', trigger: 'blur' },
{ max: 100, message: 'The maximum length is 100' }
],
City: [
{ required: true, message: 'Please enter the city', trigger: 'blur' },
{ max: 50, message: 'The maximum length is 50' }
],
Province: [
{ required: true, message: 'Please enter the state/province', trigger: 'blur' },
{ max: 50, message: 'The maximum length is 50' }
],
Country: [
{ required: true, message: 'Please enter the country', trigger: 'blur' },
{ max: 50, message: 'The maximum length is 50' }
]
},
educationDialogVisible: false,
degreeOptions: [{ value: 'Bachelor' }, { value: 'Master' }, { value: 'Doctorate' }],
TrainingOptions: [{ value: 'Residency' }, { value: 'Fellowship' }, { value: 'Post-Doc' }, { value: 'Visiting Scholar' }],
beginPickerOption: {
disabledDate: time => {
if (this.educationForm.EndDate) {
return time.getTime() > new Date(this.educationForm.EndDate).getTime()
} else {
return time.getTime() > Date.now()
}
}
},
endpickerOption: {
disabledDate: time => {
if (this.educationForm.BeginDate) {
return time.getTime() > Date.now() || time.getTime() <= new Date(this.educationForm.BeginDate).getTime()
} else {
return time.getTime() > Date.now()
}
}
},
postgraduateDialogTitle: '',
postgraduateDialogVisible: false,
postgraduateForm: getPostgraduateDefault(),
postgraduateRules: {
BeginDate: [{ required: true, message: 'Please select a start date', trigger: 'blur' }],
EndDate: [{ required: true, message: 'Please select a valid date', trigger: 'blur' }],
Training: [
{ required: true, message: 'Please enter the degree', trigger: 'blur' },
{ max: 100, message: 'The maximum length is 100' }
],
Major: [
{ required: true, message: 'Please enter the major', trigger: 'blur' },
{ max: 100, message: 'The maximum length is 100' }
],
City: [
{ required: true, message: 'Please enter the city', trigger: 'blur' },
{ max: 50, message: 'The maximum length is 50' }
],
Province: [
{ required: true, message: 'Please enter the state/province', trigger: 'blur' },
{ max: 50, message: 'The maximum length is 50' }
],
Country: [
{ required: true, message: 'Please enter the country', trigger: 'blur' },
{ max: 50, message: 'The maximum length is 50' }
]
},
postgraduateBeginPickerOption: {
disabledDate: time => {
if (this.postgraduateForm.EndDate) {
return time.getTime() > new Date(this.postgraduateForm.EndDate).getTime()
} else {
return time.getTime() > Date.now()
}
}
},
postgraduateEndpickerOption: {
disabledDate: time => {
if (this.postgraduateForm.BeginDate) {
return time.getTime() > Date.now() || time.getTime() <= new Date(this.postgraduateForm.BeginDate).getTime()
} else {
return time.getTime() > Date.now()
}
}
},
isDisabled: false,
loading: false
}
},
mounted() {
this.initPage()
},
methods: {
initPage() {
const id = this.$route.query.Id
if (id) {
this.loading = true
getEducation(id).then(res => {
this.educationList = res.Result.EducationList
this.postgraduateList = res.Result.PostgraduateList
this.loading = false
}).catch(() => {
this.loading = false
})
}
},
handleAddEducation() {
this.educationDialogTitle = 'New'
this.educationDialogVisible = true
Object.assign(this.educationForm, getEducationDefault())
},
handleEducationEdit(row) {
// eslint-disable-next-line no-unused-vars
const { BeginDateStr, EndDateStr, ...param } = row
this.educationDialogTitle = 'Edit'
this.educationDialogVisible = true
this.educationForm = param
},
handleEducationSave() {
this.$refs.educationForm.validate(valid => {
if (valid) {
this.isDisabled = true
this.educationForm.DoctorId = this.$route.query.Id
if (this.educationForm.Degree === 'Bachelor') {
this.educationForm.DegreeCN = '学士'
} else if (this.educationForm.Degree === 'Master') {
this.educationForm.DegreeCN = '硕士'
} else if (this.educationForm.Degree === 'Doctorate') {
this.educationForm.DegreeCN = '博士'
}
addOrUpdateEducationInfo(this.educationForm).then(res => {
this.isDisabled = false
this.educationDialogVisible = false
this.initPage()
if (this.educationForm.Id) {
this.$message({
message: 'Updated successfully',
type: 'success'
})
} else {
this.$message({
message: 'Addedd successfully',
type: 'success'
})
}
this.$refs['educationForm'].resetFields()
})
.catch(() => {
this.isDisabled = false
})
}
})
},
handleEducationDelete(row) {
this.$confirm('Confirm to delete?', {
type: 'warning',
distinguishCancelAndClose: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel'
})
.then(() => {
deleteEducationInfo(row.Id)
.then(res => {
this.educationList.splice(this.educationList.findIndex(item => item.Id === row.Id), 1)
this.$message.success('Deleted successfully !')
})
})
.catch(action => {})
},
handleAddPostgraduate() {
this.postgraduateDialogTitle = 'New'
this.postgraduateDialogVisible = true
Object.assign(this.postgraduateForm, getPostgraduateDefault())
},
handlePostgraduateEdit(row) {
// eslint-disable-next-line no-unused-vars
const { BeginDateStr, EndDateStr, ...param } = row
this.postgraduateDialogTitle = 'Edit'
this.postgraduateDialogVisible = true
this.postgraduateForm = param
},
handlePostgraduateSave() {
this.$refs.postgraduateForm.validate(valid => {
if (valid) {
this.isDisabled = true
this.postgraduateForm.DoctorId = this.$route.query.Id
if (this.postgraduateForm.Training === 'Residency') {
this.postgraduateForm.TrainingCN = '规培'
} else if (this.postgraduateForm.Training === 'Fellowship') {
this.postgraduateForm.TrainingCN = '专科培训'
} else if (this.postgraduateForm.Training === 'Post-Doc') {
this.postgraduateForm.TrainingCN = '博士后'
} else if (this.postgraduateForm.Training === 'Visiting Scholar') {
this.postgraduateForm.TrainingCN = '访问学者'
}
addOrUpdatePostgraduateInfo(this.postgraduateForm).then(res => {
this.isDisabled = false
this.postgraduateDialogVisible = false
this.initPage()
if (this.postgraduateForm.Id) {
this.$message({
message: 'Updated successfully',
type: 'success'
})
} else {
this.$message({
message: 'Addedd successfully',
type: 'success'
})
}
this.$refs['postgraduateForm'].resetFields()
})
.catch(err => {
this.isDisabled = false
console.log(err)
})
}
})
},
handlePostgraduateDelete(row) {
this.$confirm('Confirm to delete?', {
type: 'warning',
distinguishCancelAndClose: true,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel'
})
.then(() => {
deletePostgraduateInfo(row.Id)
.then(res => {
this.postgraduateList.splice(this.postgraduateList.findIndex(item => item.Id === row.Id), 1)
this.$message.success('Deleted successfully !')
})
})
.catch(action => {})
}
}
}
</script>