305 lines
		
	
	
		
			8.1 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			305 lines
		
	
	
		
			8.1 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="ClinicalDataSetName"
 | |
|       >
 | |
|         <el-input
 | |
|           v-model="form.ClinicalDataSetName"
 | |
|           :disabled="data.IsFromSystemData === true"
 | |
|         />
 | |
|       </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) || (form.UploadRole === 0 && item.value=== 3)"
 | |
|           />
 | |
|         </el-select>
 | |
|       </el-form-item>
 | |
| 
 | |
|       <!--  暂时限制PM不允许选择数据传输方式 -->
 | |
|       <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>
 | |
|       <!--  暂时限制PM不允许选择数据传输方式 -->
 | |
|       <el-form-item
 | |
|         label="阅片标准"
 | |
|         prop="CriterionEnumList"
 | |
|       >
 | |
|         <el-select
 | |
|           v-model="form.CriterionEnumList"
 | |
|           placeholder="请选择"
 | |
|           multiple
 | |
|           style="width:100%;"
 | |
|         >
 | |
|           <el-option
 | |
|             v-for="(item,index) of $d.CriterionType"
 | |
|             :key="index"
 | |
|             :label="item.label"
 | |
|             :value="item.value"
 | |
|           />
 | |
|         </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>
 | |
| 
 | |
|     </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 { addOrUpdateClinicalDataTrialSet, uploadClinicalTemplate, getTrialCriterionSelectList } from '@/api/trials'
 | |
| export default {
 | |
|   name: 'AddOrUpdateClinicalData',
 | |
|   props: {
 | |
|     data: {
 | |
|       type: Object,
 | |
|       default() { return {} }
 | |
|     },
 | |
|     trialId: {
 | |
|       type: String,
 | |
|       required: true
 | |
|     }
 | |
|   },
 | |
| 
 | |
|   data() {
 | |
|     return {
 | |
|       form: {
 | |
|         TrialId: '',
 | |
|         Id: '',
 | |
|         ClinicalDataSetName: '',
 | |
|         ClinicalDataLevel: null,
 | |
|         ClinicalUploadType: null,
 | |
|         UploadRole: null,
 | |
|         FileName: '',
 | |
|         Path: '',
 | |
|         CriterionEnumList: []
 | |
|       },
 | |
|       rules: {
 | |
|         ClinicalDataSetName: [{ 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'] }],
 | |
|         CriterionEnumList: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
 | |
|       },
 | |
|       loading: false,
 | |
|       btnLoading: false,
 | |
|       fileList: [],
 | |
|       trialCriterionSelectList: []
 | |
|     }
 | |
|   },
 | |
|   mounted() {
 | |
|     this.initForm()
 | |
|   },
 | |
|   methods: {
 | |
|     getTrialCriterionSelectList() {
 | |
|       getTrialCriterionSelectList({TrialId: this.trialId}).then(res => {
 | |
|         this.trialCriterionSelectList = 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) return
 | |
|         this.fileList = [
 | |
|           {
 | |
|             name: this.data.FileName,
 | |
|             path: this.data.Path
 | |
|           }
 | |
|         ]
 | |
|       }
 | |
|     },
 | |
|     save() {
 | |
|       this.$refs.clinicalDataForm.validate(valid => {
 | |
|         if (!valid) return
 | |
|         this.btnLoading = true
 | |
|         this.form.TrialId = this.trialId
 | |
|         addOrUpdateClinicalDataTrialSet(this.form).then(res => {
 | |
|           this.btnLoading = false
 | |
|           this.$emit('getList', true)
 | |
|           this.$emit('close')
 | |
|           this.$message.success(this.$t('common:message:savedSuccessfully'))
 | |
|         })
 | |
|           .catch(() => {
 | |
|             this.btnLoading = false
 | |
|           })
 | |
|       })
 | |
|     },
 | |
|     // 上传模板uploadClinicalTemplate
 | |
|     handleUploadFile(param) {
 | |
|       this.loading = true
 | |
|       uploadClinicalTemplate(param.file, this.trialId).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) {
 | |
|       this.form.ClinicalDataLevel = null
 | |
|       this.form.ClinicalUploadType = null
 | |
|     },
 | |
|     close() {
 | |
|       this.$emit('close')
 | |
|     }
 | |
| 
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| <style lang="scss" scoped>
 | |
| .upload-container{
 | |
|   >>>.el-upload {
 | |
|     width: 100%;
 | |
|     text-align: left;
 | |
|   }
 | |
| }
 | |
| </style>
 |