irc_web/src/views/reviewers/curriculumVitae/components/info/clinicalTrials.vue

955 lines
28 KiB
Vue

<template>
<div class="clinicalTrials">
<!--临床试验-->
<div class="title">
<span>{{ $t('curriculumVitae:clinicalTrials:title') }}</span>
<el-button
type="text"
class="editBtn"
:disabled="!reviewerId"
@click.stop="openEdit('', 'clinicalTrials')"
>
{{ $t('common:button:add') }}
</el-button>
</div>
<el-table
:data="DATA.ClinicalTrialExperienceList"
style="width: 100%"
:header-cell-style="{ background: '#eee', color: '#606266' }"
>
<el-table-column
prop="Phase"
:label="$t('curriculumVitae:clinicalTrials:table:byStages')"
>
<template slot-scope="scope">
{{ scope.row.OtherStages ? scope.row.OtherStages : scope.row.Phase }}
</template>
</el-table-column>
<el-table-column
prop="EvaluationCriteriaList"
:label="$t('curriculumVitae:clinicalTrials:table:criterion')"
>
<template slot-scope="scope">
{{
scope.row.EvaluationCriteriaList.length > 0
? scope.row.EvaluationCriteriaList.join(', ')
: ''
}}
<span v-if="scope.row.OtherCriterion">
{{
scope.row.EvaluationCriteriaList.length > 0
? `, ${scope.row.OtherCriterion}`
: scope.row.OtherCriterion
}}
</span>
</template>
</el-table-column>
<el-table-column
prop="EvaluationContent"
:label="$t('curriculumVitae:clinicalTrials:table:indication')"
>
<span v-if="scope.row.EvaluationContent">
{{ scope.row.EvaluationContent }}
</span>
<span v-else>
{{ $fd('Indication', scope.row.IndicationEnum) }}
</span>
</el-table-column>
<el-table-column
prop="VisitReadingCount"
:label="$t('curriculumVitae:clinicalTrials:table:viewingVolumeNum')"
>
</el-table-column>
<el-table-column
prop="date"
:label="$t('curriculumVitae:clinicalTrials:table:year')"
>
<template slot-scope="scope">
<span v-if="scope.row.StartTime"
>{{ scope.row.StartTime.split('-')[0] }}-{{
scope.row.EndTime ? scope.row.EndTime.split('-')[0] : ''
}}</span
>
</template>
</el-table-column>
<el-table-column prop="date" :label="$t('common:action:action')">
<template
slot-scope="scope"
v-if="
scope.row.ExperienceDataType != 2 &&
scope.row.ExperienceDataType != 3
"
>
<el-button
type="text"
class="editBtn"
@click.stop="openEdit(scope.row, 'clinicalTrials')"
>
{{ $t('common:button:edit') }}
</el-button>
<el-button
type="text"
class="editBtn"
@click.stop="handleDel(scope.row, 'clinicalTrials')"
>
{{ $t('common:button:delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!--GCP证书-->
<div class="title" style="margin-top: 20px">
<span>{{ $t('curriculumVitae:clinicalTrials:GCPtitle') }}</span>
</div>
<el-table
:data="GCPData"
style="width: 100%"
:header-cell-style="{ background: '#eee', color: '#606266' }"
>
<el-table-column
prop="GCP"
:label="$t('curriculumVitae:clinicalTrials:table:hasCertificate')"
>
<template slot-scope="scope">
<span>{{ $fd('hasOrNo', scope.row.GCP) }}</span>
</template>
</el-table-column>
<el-table-column
prop="GCPTime"
:label="$t('curriculumVitae:clinicalTrials:table:certificateTime')"
>
</el-table-column>
<el-table-column
prop="GCPAgencies"
:label="$t('curriculumVitae:clinicalTrials:table:certificateHospital')"
>
</el-table-column>
<el-table-column :label="$t('common:action:action')">
<template slot-scope="scope">
<el-button
type="text"
class="editBtn"
:disabled="!reviewerId"
@click.stop="openEdit(scope.row, 'certificate')"
>
{{ $t('common:button:edit') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!--其他相关经历-->
<div class="title" style="margin-top: 20px">
<span>{{ $t('curriculumVitae:clinicalTrials:otherTitle') }}</span>
<el-button
type="text"
class="editBtn"
:disabled="!reviewerId"
@click.stop="openEdit('', 'other')"
>
{{ $t('common:button:edit') }}
</el-button>
</div>
<template
v-if="DATA.OtherClinicalExperience || DATA.OtherClinicalExperienceCN"
>
<div class="message">
{{
isEN ? DATA.OtherClinicalExperience : DATA.OtherClinicalExperienceCN
}}
</div>
</template>
<div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
<!--临床试验-->
<base-model
:config="model_cfg_clinicalTrials"
v-if="model_cfg_clinicalTrials.visible"
>
<template slot="dialog-body">
<el-form
ref="clinicalTrialsFrom"
v-loading="loading"
:model="form"
:rules="rules"
label-width="80px"
size="small"
>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:byStages')"
prop="PhaseId"
>
<el-select v-model="form.PhaseId" clearable placeholder="">
<el-option
v-for="item of dictionaryList.Trial_Phase"
:key="item.Id"
:label="item.Value"
:value="item.Id"
/>
</el-select>
</el-form-item>
<el-form-item prop="OtherStages" v-if="Trial_Phase_isOther">
<el-input
v-model="form.OtherStages"
clearable
:placeholder="
$t('curriculumVitae:clinicalTrials:placeholder:byStagesOther')
"
></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:criterion')"
prop="EvaluationCriteriaIdList"
>
<el-select
v-model="form.EvaluationCriteriaIdList"
clearable
multiple
placeholder=""
>
<el-option
v-for="item in CriterionType"
:key="item.Id"
:label="item.Value"
:value="item.Id"
/>
</el-select>
</el-form-item>
<el-form-item prop="OtherCriterion" v-if="ReadingStandard_isOther">
<el-input
v-model="form.OtherCriterion"
clearable
:placeholder="
$t('curriculumVitae:clinicalTrials:placeholder:criterionOther')
"
></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:time')"
prop="BeginDate"
>
<el-date-picker
clearable
v-model="daterange"
type="daterange"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
:range-separator="$t('curriculumVitae:daterange:rangeSeparator')"
:start-placeholder="$t('curriculumVitae:daterange:startTime')"
:end-placeholder="$t('curriculumVitae:daterange:endTime')"
@change="changeTimeList"
>
</el-date-picker
></el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:viewingVolumeNum')"
prop="VisitReadingCount"
>
<el-input
oninput="value=value.replace(/[^\d]/g,'')"
v-model="form.VisitReadingCount"
controls-position="right"
:min="0"
clearable
></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:indication')"
prop="IndicationEnum"
>
<el-select v-model="form.IndicationEnum">
<el-option
v-for="item of $d.Indication"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="EvaluationContent" v-if="IndicationEnum_isOther">
<el-input v-model="form.EvaluationContent" clearable></el-input>
</el-form-item>
</el-form>
</template>
<template slot="dialog-footer">
<el-button
size="small"
type="primary"
@click="handleCancle('clinicalTrials')"
>
{{ $t('common:button:cancel') }}
</el-button>
<el-button
size="small"
type="primary"
:loading="loading"
@click="handleSave('clinicalTrials')"
>
{{ $t('common:button:save') }}
</el-button>
</template>
</base-model>
<!--GCP证书-->
<base-model :config="model_cfg_certificate">
<template slot="dialog-body">
<el-form
ref="certificateFrom"
v-loading="loading"
:model="certificateForm"
:rules="certificateRules"
label-width="80px"
size="small"
>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:hasCertificate')"
prop="GCP"
>
<el-radio-group v-model="certificateForm.GCP" @input="handleInput">
<el-radio
v-for="item in $d.hasOrNo"
:key="item.id"
:label="item.value"
>
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:CertificateTime')"
prop="GCPTime"
v-if="certificateForm.GCP"
>
<el-date-picker
v-model="certificateForm.GCPTime"
type="date"
placeholder=""
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item
:label="
$t('curriculumVitae:clinicalTrials:form:certificateHospital')
"
prop="GCPAgencies"
v-if="certificateForm.GCP"
>
<el-input
v-model="certificateForm.GCPAgencies"
clearable
></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:attachments')"
prop="GCPId"
v-if="certificateForm.GCP"
>
<div class="upload-container">
<el-upload
class="upload-demo"
action
:http-request="uploadFile"
:before-upload="beforeUpload"
:file-list="fileList"
:before-remove="beforeRemove"
:on-remove="handleRemoveFile"
:on-preview="handlePreview"
:limit="1"
:on-exceed="handleExceed"
accept=".pdf"
>
<el-button size="small" type="primary" :loading="btnDisabled">
{{ $t('system:GcpCertificate:upload:Upload') }}
</el-button>
<span
slot="tip"
style="margin-left: 10px"
class="el-upload__tip"
>
{{ $t('system:tip:file:pdf') }}
</span>
</el-upload>
</div>
</el-form-item>
</el-form>
</template>
<template slot="dialog-footer">
<el-button
size="small"
type="primary"
@click="handleCancle('certificate')"
>
{{ $t('common:button:cancel') }}
</el-button>
<el-button
size="small"
type="primary"
:loading="loading"
:disabled="!!certificateForm.GCP && !certificateForm.GCPId"
@click="handleSave('certificate')"
>
{{ $t('common:button:save') }}
</el-button>
</template>
</base-model>
<!--其他相关经历-->
<base-model :config="model_cfg_other">
<template slot="dialog-body">
<el-form
ref="otherAboutFrom"
v-loading="loading"
:model="otherForm"
:rules="otherRules"
label-width="100px"
size="small"
>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:other')"
prop="OtherClinicalExperienceCN"
>
<el-input
v-model="otherForm.OtherClinicalExperienceCN"
clearable
type="textarea"
:rows="2"
style="margin-bottom: 20px"
:placeholder="
$t('curriculumVitae:clinicalTrials:placeholder:other')
"
></el-input>
</el-form-item>
<el-form-item prop="OtherClinicalExperience">
<el-input
v-model="otherForm.OtherClinicalExperience"
clearable
type="textarea"
:rows="2"
:placeholder="
$t('curriculumVitae:clinicalTrials:placeholder:otherEN')
"
></el-input>
</el-form-item>
</el-form>
</template>
<template slot="dialog-footer">
<el-button size="small" type="primary" @click="handleCancle('other')">
{{ $t('common:button:cancel') }}
</el-button>
<el-button
size="small"
type="primary"
:loading="loading"
@click="handleSave('other')"
>
{{ $t('common:button:save') }}
</el-button>
</template>
</base-model>
</div>
</template>
<script>
import BaseModel from '@/components/BaseModel'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
import {
addOrUpdateTrialExperience,
deleteTrialExperience,
updateOtherExperience,
updateGcpExperience,
} from '@/api/reviewers'
import {
deleteAttachment,
saveAttachments,
getAttachmentByType,
} from '@/api/attachment'
const defaultForm = () => {
return {
PhaseId: '',
EvaluationCriteriaIdList: [],
EvaluationContent: '',
VisitReadingCount: 0,
StartTime: null,
EndTime: null,
OtherStages: '',
OtherCriterion: '',
IndicationEnum: null,
}
}
const defaultCertificateForm = () => {
return {
GCP: 0,
GCPTime: '',
GCPId: '',
GCPAgencies: '',
}
}
const defaultOtherForm = () => {
return {
OtherClinicalExperience: '',
OtherClinicalExperienceCN: '',
}
}
export default {
name: 'clinicalTrials',
components: { BaseModel },
props: {
DATA: {
type: Object,
required: true,
default: () => {
return {
ClinicalTrialExperienceList: [],
}
},
},
reviewerId: {
type: String,
default: '',
},
isEN: {
type: Boolean,
default: false,
},
},
data() {
return {
tableData: [],
model_cfg_clinicalTrials: {
visible: false,
showClose: true,
width: '600px',
title: this.$t('curriculumVitae:clinicalTrials:form:title'),
appendToBody: true,
},
form: defaultForm(),
rules: {
PhaseId: [
{
required: true,
message: 'Please select',
trigger: ['blur', 'change'],
},
],
EvaluationCriteriaIdList: [
{
required: true,
message: 'Please select',
trigger: ['blur', 'change'],
},
],
VisitReadingCount: [
{ required: true, message: 'Please specify', trigger: 'blur' },
],
EvaluationContent: [
{ required: true, message: 'Please specify', trigger: 'blur' },
{ max: 300, message: 'The maximum length is 300' },
],
IndicationEnum: [
{ required: true, message: 'Please select', trigger: 'blur' },
],
StartTime: [
{ required: true, message: 'Please specify', trigger: 'blur' },
],
OtherStages: [
{
required: true,
message: 'Please input',
trigger: ['blur', 'change'],
},
],
OtherCriterion: [
{
required: true,
message: 'Please input',
trigger: ['blur', 'change'],
},
],
},
loading: false,
daterange: [],
certificateForm: defaultCertificateForm(),
certificateRules: {
GCP: [
{
required: true,
message: 'Please select',
trigger: ['blur', 'change'],
},
],
GCPId: [
{
required: true,
message: 'Please upload File',
trigger: ['blur', 'change'],
},
],
},
fileList: [],
btnDisabled: false,
model_cfg_certificate: {
visible: false,
showClose: true,
width: '600px',
title: this.$t('curriculumVitae:clinicalTrials:form:certificateTitle'),
appendToBody: true,
},
otherForm: defaultOtherForm(),
otherRules: {},
model_cfg_other: {
visible: false,
showClose: true,
width: '600px',
title: this.$t('curriculumVitae:clinicalTrials:form:otherTitle'),
appendToBody: true,
},
dictionaryList: {},
otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5',
}
},
watch: {
Trial_Phase_isOther() {
if (!this.Trial_Phase_isOther) {
this.form.OtherStages = null
}
},
ReadingStandard_isOther() {
if (!this.ReadingStandard_isOther) {
this.form.OtherCriterion = null
}
},
IndicationEnum_isOther() {
if (!this.IndicationEnum_isOther) {
this.form.EvaluationContent = null
}
},
},
computed: {
GCPData() {
if (!this.DATA) return []
return [
{
ExpiryDateStr: this.DATA.ExpiryDateStr,
FileName: this.DATA.FileName,
GCP: this.DATA.GCP,
GCPAgencies: this.DATA.GCPAgencies,
GCPFullPath: this.DATA.GCPFullPath,
GCPId: this.DATA.GCPId,
GCPTime: this.DATA.GCPTime,
Path: this.DATA.Path,
Type: this.DATA.Type,
},
]
},
IndicationEnum_isOther() {
if (!this.form.IndicationEnum) return false
let value = this.$d.Indication.find(
(item) => item.value === this.form.IndicationEnum
).label
return value === '其它' || value === 'Other'
},
Trial_Phase_isOther() {
if (!this.form.PhaseId) return false
let value = this.dictionaryList.Trial_Phase.find(
(item) => item.Id === this.form.PhaseId
).Value
return value === '其它' || value === 'Other'
},
ReadingStandard_isOther() {
if (
!this.form.EvaluationCriteriaIdList ||
this.form.EvaluationCriteriaIdList.length <= 0
)
return false
return this.form.EvaluationCriteriaIdList.includes(this.otherId)
},
CriterionType() {
if (!this.dictionaryList.CriterionType) return []
return [
...this.dictionaryList.CriterionType,
{
Id: this.otherId,
Value: 'Other',
},
]
},
},
mounted() {
this.getDicData()
},
methods: {
openEdit(row, key) {
this.form = defaultForm()
this.certificateForm = defaultCertificateForm()
this.otherForm = defaultOtherForm()
this.daterange = []
if (key === 'clinicalTrials' && row) {
Object.keys(this.form).forEach((key) => {
if (row[key]) {
this.form[key] = row[key]
}
})
if (this.form.StartTime && this.form.EndTime) {
this.daterange = [this.form.StartTime, this.form.EndTime]
}
if (
this.form.OtherCriterion &&
!this.form.EvaluationCriteriaIdList.includes(this.otherId)
) {
this.form.EvaluationCriteriaIdList.push(this.otherId)
}
this.form.Id = row.Id
}
if (key === 'certificate' && row) {
Object.keys(this.certificateForm).forEach((key) => {
if (row[key]) {
this.certificateForm[key] = row[key]
}
this.initFileList()
})
}
if (key === 'other') {
Object.keys(this.otherForm).forEach((key) => {
if (this.DATA[key]) {
this.otherForm[key] = this.DATA[key]
}
})
}
this[`model_cfg_${key}`].visible = true
},
handleCancle(key) {
this.form = defaultForm()
this.certificateForm = defaultCertificateForm()
this.otherForm = defaultOtherForm()
this.daterange = []
this[`model_cfg_${key}`].visible = false
},
async handleSave(key) {
try {
if (key === 'clinicalTrials') {
let validate = await this.$refs.clinicalTrialsFrom.validate()
console.log(validate, 'validate')
if (!validate) return false
this.form.DoctorId = this.reviewerId
this.loading = true
let res = await addOrUpdateTrialExperience(this.form)
this.loading = false
if (res.IsSuccess) {
this.$emit('getInfo')
this[`model_cfg_${key}`].visible = false
}
}
if (key === 'certificate') {
let validate = await this.$refs.certificateFrom.validate()
if (!validate) return false
this.certificateForm.Id = this.reviewerId
this.loading = true
let res = await updateGcpExperience(this.certificateForm)
this.loading = false
if (res.IsSuccess) {
this.$emit('getInfo')
this[`model_cfg_${key}`].visible = false
}
}
if (key === 'other') {
let validate = await this.$refs.otherAboutFrom.validate()
if (!validate) return false
this.otherForm.DoctorId = this.reviewerId
this.loading = true
let res = await updateOtherExperience(this.otherForm)
this.loading = false
if (res.IsSuccess) {
this.$emit('getInfo')
this[`model_cfg_${key}`].visible = false
}
}
} catch (err) {
this.loading = false
console.log(err)
}
},
async handleDel(row, key) {
try {
let confirm = await this.$confirm(
this.$t('trials:trials-list:table:isDeleted')
)
if (!confirm) return false
this.loading = true
let res = await deleteTrialExperience(row.Id)
this.loading = false
if (res.IsSuccess) {
this.$message.success(this.$t('common:message:deletedSuccessfully'))
this.$emit('getInfo')
}
} catch (err) {
this.loading = false
console.log(err)
}
},
async uploadFile(param) {
var fileName = param.file.name
this.btnDisabled = true
const file = await this.fileToBlob(param.file)
const res = await this.OSSclient.put(
`/SystemData/reviewer/GCP/${this.reviewerId}/${fileName}`,
file
)
this.fileList.push({
name: fileName,
path: this.$getObjectName(res.url),
fullPath: this.$getObjectName(res.url),
url: this.$getObjectName(res.url),
type: 'GCP',
})
this.saveFile()
},
saveFile() {
const { name, path, fullPath, type } = this.fileList[0]
const param = [
{
DoctorId: this.reviewerId,
Type: type,
Path: path,
FullPath: fullPath,
FileName: name,
},
]
saveAttachments(param)
.then((res) => {
this.btnDisabled = false
if (res.IsSuccess) {
this.fileList[0].id = res.Result[0].Id
this.certificateForm.GCPId = res.Result[0].Id
this.$message.success(this.$t('common:message:savedSuccessfully'))
}
})
.catch(() => {
this.btnDisabled = false
})
},
beforeUpload(file, fileList) {
const isValidFile = this.fileValid(file.name, ['pdf'])
if (isValidFile) {
this.fileList = []
} else {
this.$alert(this.$t('trials:attachment:message:pdf'))
return false
}
},
fileValid(fileName, typeArr) {
var extendName = fileName
.substring(fileName.lastIndexOf('.') + 1)
.toLocaleLowerCase()
if (typeArr.indexOf(extendName) > -1) {
return true
} else {
return false
}
},
beforeRemove(file, fileList) {
if (file && file.status === 'success') {
return this.$confirm(
this.$t('trials:staffResearch:message:confirmDel')
).then(() => {
this.certificateForm.GCPId = ''
})
}
},
handleRemoveFile(file, fileList) {
if (file && file.status === 'success') {
if (file.id) {
deleteAttachment(file.id, file.path).then((res) => {
if (res.IsSuccess) {
this.fileList = []
this.certificateForm.GCPId = ''
this.$emit('getInfo')
this.$message({
message: this.$t('common:message:deletedSuccessfully'),
type: 'success',
})
}
})
} else {
this.fileList = []
this.GCPID = ''
}
}
},
handlePreview(file) {
if (file.fullPath) {
window.open(this.OSSclientConfig.basePath + file.fullPath, '_blank')
}
},
handleExceed(files, fileList) {
this.$message.warning(`Upload is currently limited to 1 file`)
},
initFileList() {
if (!this.reviewerId) return
getAttachmentByType(this.reviewerId, 'GCP').then((res) => {
if (res.IsSuccess) {
if (res.Result.length > 0) {
this.fileList = this.formatterFileList(res.Result)
} else {
this.fileList = []
}
}
})
},
formatterFileList(list) {
var arr = []
list.forEach((item) => {
var data = {
name: item.FileName,
path: item.Path,
fullPath: item.FullPath,
id: item.Id,
type: item.Type,
}
arr.push(data)
})
return arr
},
getDicData() {
getBasicDataSelects(['Trial_Phase', 'CriterionType']).then((res) => {
this.dictionaryList = { ...res.Result }
})
},
changeTimeList() {
if (this.daterange && this.daterange.length === 2) {
this.form.StartTime = this.daterange[0]
this.form.EndTime = this.daterange[1]
} else {
this.form.StartTime = null
this.form.EndTime = null
}
},
handleInput() {
if (this.certificateForm.GCP === 0) {
this.certificateForm = defaultCertificateForm()
}
},
},
}
</script>
<style lang="scss" scoped>
.clinicalTrials {
min-height: 100px;
.title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.message {
margin: auto;
min-height: 100px;
background-color: #eee;
padding: 10px;
line-height: 30px;
border-radius: 5px;
}
}
.el-select,
.el-date-editor {
width: 100%;
}
</style>