286 lines
		
	
	
		
			8.2 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			286 lines
		
	
	
		
			8.2 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="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>
 | 
						|
 | 
						|
      <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,
 | 
						|
        CriterionEnumList: []
 | 
						|
      },
 | 
						|
      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'] }],
 | 
						|
        CriterionEnumList: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
 | 
						|
      },
 | 
						|
      loading: false,
 | 
						|
      btnLoading: false,
 | 
						|
      fileList: [],
 | 
						|
      systemCriterionSelectList: []
 | 
						|
    }
 | 
						|
  },
 | 
						|
  mounted() {
 | 
						|
    this.initForm()
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    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>
 |