irc_web/.svn/pristine/70/705a98f4d3fb55a309fcae948e24bfa5682e113a.svn-base

<template>
  <el-form
    ref="clinicalDataForm"
    v-loading="loading"
    :model="form"
    size="small"
    :rules="rules"
    label-width="110px"
    :inline="true"
  >
    <div class="base-dialog-body">
      <!-- 临床数据名称 -->
      <el-form-item :label="$t('trials:readingPeriod:cd:table:clinicalDataName')" prop="ClinicalDataTrialSetId">
        <el-select v-model="form.ClinicalDataTrialSetId" style="width:100%;">
          <el-option
            v-for="item of clinicalDatas"
            :key="item.Id"
            :label="item.ClinicalDataSetName"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <!-- 数据内容 -->
      <el-form-item :label="$t('trials:readingPeriod:cd:form:data')">
        <!-- 多文件上传 -->
        <form id="inputForm" ref="uploadForm">
          <div class="form-group">
            <div id="directoryInputWrapper" class="btn btn-link" style="position: relative;overflow: hidden;display: inline-block;">
              <el-button type="primary" style="width: 56px;" size="small">{{ $t('trials:uploadClinicalData:button:selectFile') }}</el-button>
              <input
                type="file"
                name="file"
                multiple
                style="position: absolute;top: 0;left: 0;width: 56px;height: 100%;opacity: 0;cursor: pointer;"
                :accept="faccept.join(',')"
                @change="beginScanFiles($event)"
              >
              <span>{{ ($t('trials:attachment:message:pdf')) }}</span>
            </div>

          </div>
        </form>
        <!-- 文件列表 -->
        <el-table
          ref="filesTable"
          :data="fileList"
          class="dicomFiles-table"
          height="300"
          style="width:100%"
          border
        >
          <el-table-column type="index" width="40" />
          <el-table-column
            prop="FileName"
            :label="$t('trials:uploadClinicalData:table:fileName')"
            width="190"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('common:action:action')"
            width="100"
          >
            <template slot-scope="scope">
              <!-- 删除 -->
              <el-button
                circle
                :title="$t('trials:readingPeriod:cd:action:deleteFile')"
                icon="el-icon-delete"
                @click="handleDeleteFile(scope.$index,scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </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 { getTrialClinicalDataSelect, addOrUpdateReadingClinicalData, uploadClinicalData } from '@/api/trials'
export default {
  name: 'AddOrUpdateClinicalData',
  props: {
    data: {
      type: Object,
      default() { return {} }
    }
  },

  data() {
    return {
      fileList: [],
      faccept: ['.pdf'],
      form: {
        Id: '',
        TrialId: '',
        SubjectId: '',
        ReadingId: '',
        ClinicalDataTrialSetId: '',
        IsVisist: true,
        AddFileList: [],
        DeleteFileIds: [],
        FileList: []
      },
      rules: {
        ClinicalDataTrialSetId: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
      },
      loading: false,
      btnLoading: false,
      clinicalDatas: [],
      pendingUploadList: [],
      pendingDeleteList: []
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    async initForm() {
      await this.getClinicalDatas()
      if (Object.keys(this.data).length > 0) {
        for (const k in this.form) {
          if (this.data.hasOwnProperty(k)) {
            this.form[k] = this.data[k]
          }
        }
        this.fileList = this.form.FileList.concat()
      }
    },
    save() {
      this.$refs.clinicalDataForm.validate(valid => {
        if (!valid) return
        if (this.fileList.length === 0) {
          // 请上传文件！
          this.$message.error(this.$t('trials:readingPeriod:cd:message:uploadFile'))
          return
        }
        this.pendingUploadList = []
        for (let i = 0; i < this.fileList.length; ++i) {
          if (this.fileList[i].Status === 0) {
            this.pendingUploadList.push(this.fileList[i].Files)
          }
        }
        if (this.pendingUploadList.length > 0) {
          this.uploadFilesAndSave()
        } else {
          this.saveClinicalData()
        }
      })
    },
    uploadFilesAndSave() {
      return new Promise((resolve, reject) => {
        var fileData = new FormData()
        for (var i = 0; i < this.pendingUploadList.length; ++i) {
          fileData.append('file', this.pendingUploadList[i])
        }
        this.btnLoading = true
        uploadClinicalData(this.data.TrialId, this.data.SubjectId, this.data.ReadingId, fileData).then(response => {
          this.btnLoading = false
          this.form.AddFileList = response.Result
          this.saveClinicalData()
          resolve(response.Result)
        }).catch(() => {
          this.btnLoading = false
          reject()
        })
      })
    },
    saveClinicalData() {
      return new Promise((resolve, reject) => {
        this.btnLoading = true
        this.form.DeleteFileIds = this.pendingDeleteList
        addOrUpdateReadingClinicalData(this.form).then(response => {
          this.btnLoading = false
          this.$emit('getList')
          this.$emit('close')
          this.$message.success(this.$t('common:message:savedSuccessfully'))
          resolve()
        }).catch(() => {
          this.btnLoading = false
          reject()
        })
      })
    },
    getClinicalDatas() {
      return new Promise((resolve, reject) => {
        this.loading = true
        var param = {
          trialId: this.data.TrialId,
          IsVisit: this.data.IsVisit,
          ReadingId: this.data.ReadingId,
          SubjectId: this.data.SubjectId,
          ReadingClinicalDataId: this.data.Id ? this.data.Id : '',
          IsBaseLine: this.data.IsBaseLine
        }
        getTrialClinicalDataSelect(param).then(res => {
          this.clinicalDatas = res.Result
          this.loading = false
          resolve()
        }).catch(() => {
          this.loading = false
          reject()
        })
      })
    },
    handleDeleteFile(index, row) {
      this.$confirm(this.$t('trials:readingPeriod:cd:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          if (row.Id) {
            this.pendingDeleteList.push(row.Id)
          }
          this.fileList.splice(index, 1)
        }).catch(() => {})
    },
    beginScanFiles(e) {
      var files = e.target.files
      for (var i = 0; i < files.length; ++i) {
        const fileName = files[i].name
        var extendName = fileName.substring(fileName.lastIndexOf('.')).toLocaleLowerCase()
        if (this.faccept.indexOf(extendName) !== -1) {
          this.fileList.push({ FileName: fileName, Path: '', Status: 0, Files: files[i] })
        }
      }
    },
    handleClinicalDataSetChange(v) {
      var index = this.clinicalDatas.findIndex(item => item.Id === v)
      console.log(this.clinicalDatas[index])
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
</style>