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

446 lines
13 KiB
Vue

<template>
<div class="clinicalTrials">
<!--临床试验-->
<div class="title">
<span>{{ $t('curriculumVitae:clinicalTrials:title') }}</span>
<el-button
type="text"
class="editBtn"
@click.stop="openEdit('', 'clinicalTrials')"
>
{{ $t('common:button:add') }}
</el-button>
</div>
<el-table
:data="tableData"
style="width: 100%"
:header-cell-style="{ background: '#eee', color: '#606266' }"
>
<el-table-column
prop="date"
:label="$t('curriculumVitae:clinicalTrials:table:byStages')"
>
</el-table-column>
<el-table-column
prop="date"
:label="$t('curriculumVitae:clinicalTrials:table:criterion')"
>
</el-table-column>
<el-table-column
prop="date"
:label="$t('curriculumVitae:clinicalTrials:table:indication')"
>
</el-table-column>
<el-table-column
prop="date"
:label="$t('curriculumVitae:clinicalTrials:table:viewingVolumeNum')"
>
</el-table-column>
<el-table-column
prop="date"
:label="$t('curriculumVitae:clinicalTrials:table:year')"
>
</el-table-column>
<el-table-column prop="date" :label="$t('common:action:action')">
<template slot-scope="scope">
<el-button
type="text"
class="editBtn"
@click.stop="openEdit(scope, 'clinicalTrials')"
>
{{ $t('common:button:edit') }}
</el-button>
<el-button type="text" class="editBtn" @click.stop="openEdit">
{{ $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="has"
:label="$t('curriculumVitae:clinicalTrials:table:hasCertificate')"
>
</el-table-column>
<el-table-column
prop="time"
:label="$t('curriculumVitae:clinicalTrials:table:certificateTime')"
>
</el-table-column>
<el-table-column
prop="adress"
: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"
@click.stop="openEdit(scope, '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"
@click.stop="openEdit('', 'other')"
>
{{ $t('common:button:edit') }}
</el-button>
</div>
<template v-if="true">
<div class="message">三的卡上不能打卡上班打卡</div>
</template>
<div class="noData" v-else>{{ $t('curriculumVitae:noData') }}</div>
<!--临床试验-->
<base-model :config="model_cfg_clinicalTrials">
<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="InternationalizationType"
>
<el-select v-model="form.Sex" clearable placeholder="">
<el-option
v-for="item in $d.sex"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:criterion')"
prop="InternationalizationType"
>
<el-select v-model="form.Sex" clearable placeholder="">
<el-option
v-for="item in $d.sex"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:startTime')"
prop="InternationalizationType"
>
<el-input clearable></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:endTime')"
prop="InternationalizationType"
>
<el-input clearable></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:viewingVolumeNum')"
prop="InternationalizationType"
>
<el-input clearable></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:indication')"
prop="InternationalizationType"
>
<el-input 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"
@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="InternationalizationType"
>
<el-radio-group v-model="certificateForm.radio">
<el-radio
v-for="item in 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="InternationalizationType"
>
<el-date-picker
v-model="certificateForm.time"
type="date"
placeholder=""
>
</el-date-picker>
</el-form-item>
<el-form-item
:label="
$t('curriculumVitae:clinicalTrials:form:certificateHospital')
"
prop="InternationalizationType"
>
<el-input clearable></el-input>
</el-form-item>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:attachments')"
prop="InternationalizationType"
>
<div class="upload-container">
<el-upload
class="upload-demo"
action
accept=".xls,.xlsx,.doc,.docx"
:before-upload="beforeUpload"
:http-request="handleUploadFile"
:on-preview="handlePreview"
:on-remove="handleRemoveFile"
:show-file-list="true"
:file-list="fileList"
:limit="1"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary" :loading="btnLoading">
{{ $t('common:button:upload') }}
</el-button>
<span
slot="tip"
style="margin-left: 10px"
class="el-upload__tip"
>
(must be in xlsx/xls/doc/docx format)
</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"
@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="certificateFrom"
v-loading="loading"
:model="otherForm"
:rules="otherRules"
label-width="80px"
size="small"
>
<el-form-item
:label="$t('curriculumVitae:clinicalTrials:form:other')"
prop="InternationalizationType"
>
<el-input
clearable
type="textarea"
:rows="2"
style="margin-bottom: 20px"
:placeholder="
$t('curriculumVitae:clinicalTrials:placeholder:other')
"
></el-input>
<el-input
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" @click="handleSave('other')">
{{ $t('common:button:save') }}
</el-button>
</template>
</base-model>
</div>
</template>
<script>
import BaseModel from '@/components/BaseModel'
export default {
name: 'clinicalTrials',
components: { BaseModel },
props: {
DATA: {
type: Object,
required: true,
default: () => {
return {
}
},
},
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: {},
rules: {},
loading: false,
daterange: [],
GCPData: [
{
has: false,
time: '2023.06',
adress: 'xxxx医院',
},
],
certificateForm: {},
certificateRules: {},
fileList: [],
btnLoading: false,
model_cfg_certificate: {
visible: false,
showClose: true,
width: '600px',
title: this.$t('curriculumVitae:clinicalTrials:form:certificateTitle'),
appendToBody: true,
},
otherForm: {},
otherRules: {},
model_cfg_other: {
visible: false,
showClose: true,
width: '600px',
title: this.$t('curriculumVitae:clinicalTrials:form:otherTitle'),
appendToBody: true,
},
}
},
methods: {
openEdit(row, key) {
this[`model_cfg_${key}`].visible = true
},
handleCancle(key) {
this[`model_cfg_${key}`].visible = false
},
handleSave(key) {
this[`model_cfg_${key}`].visible = false
},
beforeUpload(file) {},
async handleUploadFile(param) {},
handleRemoveFile() {
this.fileList = []
this.form.Path = ''
this.form.NameCN = ''
this.form.Name = ''
},
handlePreview(file) {},
handleExceed(files, fileList) {
this.$message.warning(`Upload is currently limited to 1 file`)
},
checkFileSuffix(fileName) {},
},
}
</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>