irc_web/.svn/pristine/21/21990658a30008dd4e2006ff958...

293 lines
8.4 KiB
Plaintext

<template>
<el-form
ref="clinicalDataForm"
v-loading="loading"
:model="form"
size="small"
:rules="rules"
label-width="110px"
>
<div class="base-dialog-body">
<el-form-item label="临床数据名称" prop="ClinicalDataSetEnum">
<!-- <el-input v-model="form.ClinicalDataSetName" /> -->
<el-select v-model="form.ClinicalDataSetEnum" placeholder="请选择" style="width:100%;">
<el-option
v-for="(item,index) of $d.ClinicalDataType"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="上传人" prop="UploadRole">
<el-select
v-model="form.UploadRole"
placeholder="请选择"
style="width:100%;"
@change="handleUploadRoleChange"
>
<el-option
v-for="(item,index) of $d.ClinicalDataUploadRole"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="数据级别" prop="ClinicalDataLevel">
<el-select
v-model="form.ClinicalDataLevel"
placeholder="请选择"
style="width:100%;"
>
<el-option
v-for="(item,index) of $d.ClinicalLevel"
:key="index"
:label="item.label"
:value="item.value"
:disabled="form.UploadRole === 0 && item.value=== 2"
/>
</el-select>
</el-form-item>
<el-form-item label="传输方式" prop="ClinicalUploadType">
<el-select
v-model="form.ClinicalUploadType"
placeholder="请选择"
style="width:100%;"
>
<el-option
v-for="(item,index) of $d.ClinicalUploadType"
:key="index"
:label="item.label"
:value="item.value"
:disabled="form.UploadRole === 1 && item.value=== 0"
/>
</el-select>
</el-form-item>
<el-form-item
label="阅片标准"
prop="SystemCriterionIdList"
>
<el-select
v-model="form.SystemCriterionIdList"
placeholder="请选择"
multiple
style="width:100%;"
>
<el-option
v-for="(item,index) of systemCriterionSelectList"
:key="index"
:label="item.CriterionName"
:value="item.Id"
/>
</el-select>
</el-form-item>
<el-form-item v-if="form.ClinicalUploadType === 1" label="模板: ">
<div class="upload-container">
<el-upload
class="upload-demo"
action
accept=".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"
:disabled="form.Type === ''"
>
<el-button size="small" type="primary">选择</el-button>
<span
slot="tip"
style="margin-left:10px;"
class="el-upload__tip"
>
(必须是doc/docx格式)
</span>
</el-upload>
</div>
</el-form-item>
<el-form-item v-if="form.Id !== ''" label="是否启用">
<el-switch v-model="form.IsEnable" />
</el-form-item>
</div>
<div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
<el-form-item>
<!-- 取消 -->
<el-button
:disabled="btnLoading"
size="small"
type="primary"
@click="close"
>
{{ $t('common:button:cancel') }}
</el-button>
<!-- 保存 -->
<el-button size="small" type="primary" :loading="btnLoading" @click="save">
{{ $t('common:button:save') }}
</el-button>
</el-form-item>
</div>
</el-form>
</template>
<script>
import { addOrUpdateClinicalDataSet, getSystemCriterionSelectList } from '@/api/dictionary'
import { uploadClinicalTemplate } from '@/api/trials'
export default {
name: 'AddOrUpdateClinicalData',
props: {
data: {
type: Object,
default() { return {} }
}
},
data() {
return {
form: {
Id: '',
ClinicalDataSetEnum: null,
ClinicalDataSetName: '',
ClinicalDataLevel: null,
ClinicalUploadType: null,
UploadRole: null,
FileName: '',
Path: '',
IsEnable: true,
SystemCriterionIdList: []
},
rules: {
ClinicalDataSetEnum: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur', 'change'] }],
ClinicalDataLevel: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
ClinicalUploadType: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
UploadRole: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
SystemCriterionIdList: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
},
loading: false,
btnLoading: false,
fileList: [],
systemCriterionSelectList: []
}
},
mounted() {
this.getSystemCriterionSelectList()
this.initForm()
},
methods: {
getSystemCriterionSelectList() {
getSystemCriterionSelectList({
}).then(res => {
this.systemCriterionSelectList = res.Result
})
},
initForm() {
if (Object.keys(this.data).length > 0) {
for (const k in this.form) {
if (this.data.hasOwnProperty(k)) {
this.form[k] = this.data[k]
}
}
if (this.data.Path) {
this.fileList = [
{
name: this.data.FileName,
path: this.data.Path
}
]
}
}
},
save() {
this.$refs.clinicalDataForm.validate(valid => {
if (!valid) return
this.btnLoading = true
this.form.ClinicalDataSetName = this.$fd('ClinicalDataType', this.form.ClinicalDataSetEnum)
addOrUpdateClinicalDataSet(this.form).then(res => {
this.btnLoading = false
this.$emit('getList')
this.$emit('close')
this.$message.success(this.$t('common:message:savedSuccessfully'))
})
.catch(() => {
this.btnLoading = false
})
})
},
// 上传模板uploadClinicalTemplate
handleUploadFile(param) {
this.loading = true
uploadClinicalTemplate(param.file).then(res => {
this.loading = false
if (res.IsSuccess) {
this.form.Path = res.Result[0].Path
this.form.FileName = res.Result[0].FileName
const file = { name: this.form.FileName, path: this.form.Path }
this.fileList.push(file)
}
}).catch(() => {
this.loading = false
})
},
beforeUpload(file) {
// 检测文件类型是否符合要求
if (this.checkFileSuffix(file.name)) {
this.fileList = []
return true
} else {
this.$message.error('(必须是doc/docx格式)')
return false
}
},
handleRemoveFile() {
this.fileList = []
this.form.Path = ''
this.form.FileName = ''
},
handlePreview(file) {
if (file.fullPath) {
window.open(file.fullPath, '_blank')
}
},
handleExceed(files, fileList) {
this.$message.warning(`只允许上传一个文件`)
},
checkFileSuffix(fileName) {
var typeArr = ['doc', 'docx']
var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
if (typeArr.indexOf(extendName) !== -1) {
return true
} else {
return false
}
},
handleUploadRoleChange(val) {
if (val === 0 && this.form.ClinicalDataLevel === 2) {
this.form.ClinicalDataLevel = null
}
if (val === 1 && this.form.ClinicalUploadType === 0) {
this.form.ClinicalUploadType = null
}
},
close() {
this.$emit('close')
}
}
}
</script>
<style lang="scss" scoped>
.upload-container{
>>>.el-upload {
width: 100%;
text-align: left;
}
}
</style>