非DICOM影像上传

src/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles.vue

@@ -61,6 +61,7 @@
                     circle
                     :title="$t('trials:uploadNonDicoms:action:preview')"
                     size="small"
+                    :disabled="files.row.FileType&&files.row.FileType.indexOf('zip') >= 0"
                     @click.native.prevent="files.row.type === 'MP4' ? handleLookVideo(scope.row) : handlePreviewImg(files.row)"
                   />
                   <!-- 删除 -->
@@ -182,7 +183,9 @@
             ]"
           >
             <el-radio-group v-model="form.Modality">
-              <el-radio v-for="m in trialModalitys" v-if="m !== ''" :key="m" :label="m" style="line-height: 40px" />
+              <template v-for="m in trialModalitys">
+                <el-radio  v-if="m !== ''" :key="m" :label="m" style="line-height: 40px" />
+              </template>
             </el-radio-group>
           </el-form-item>
           <!-- 检查部位 -->
@@ -234,22 +237,23 @@
       :visible.sync="uploadVisible"
       :close-on-click-modal="false"
       :title="$t('trials:uploadNonDicoms:dialogTitle:upload')"
-      width="600px"
+      width="800px"
       append-to-body
       custom-class="base-dialog-wrapper"
+      @close="resetFileDiaolg"
     >
       <!-- 多文件上传 -->
       <form id="inputForm" ref="uploadForm">
         <el-divider content-position="left">{{ $t('trials:uploadNonDicoms:label:fileType') }}</el-divider>
         <div class="form-group">
           <div class="upload" style="margin-right: 10px">
-            <input multiple="multiple" webkitdirectory="" directory accept="*/*" type="file" name="uploadFolder" class="select-file" title="" @change="beginScanFiles($event)">
+            <input multiple="multiple" webkitdirectory="" directory accept="*/*" type="file" name="uploadFolder" class="select-file" title="" @change="beginScanFiles($event)" v-if='!btnLoading'>
             <div class="btn-select">
               {{ $t('trials:uploadNonDicoms:button:selectFolder') }}
             </div>
           </div>
           <div class="upload">
-            <input class="select-file" multiple="" :accept="faccept.join(',')" type="file" name="uploadFile" title="" @change="beginScanFiles($event)">
+            <input class="select-file" multiple="" :accept="faccept.join(',')" type="file" name="uploadFile" title="" @change="beginScanFiles($event)" v-if='!btnLoading'>
             <div class="btn-select">
               {{ $t('trials:uploadNonDicoms:button:select') }}
             </div>
@@ -268,6 +272,7 @@
         <el-table-column
           type="selection"
           width="55"
+          :selectable="(row,index)=>row.status !== 2"
         />
         <el-table-column
           type="index"
@@ -277,17 +282,46 @@
         <el-table-column
           prop="name"
           :label="$t('trials:uploadNonDicoms:table:fileName')"
-          min-width="180"
+          min-width="100"
         />
+        <!-- 文件大小 -->
+        <el-table-column
+          prop="size"
+          :label="$t('trials:uploadNonDicoms:table:fileSize')"
+        >
+        <template slot-scope="scope">
+          <span>{{
+            scope.row.size && scope.row.size > 0
+              ? `${(scope.row.size / 1024 / 1024).toFixed(2)}MB`
+              : 0
+          }}</span>
+        </template>
+        </el-table-column>
+        <!-- 文件类型 -->
+        <el-table-column
+          prop="type"
+          :label="$t('trials:uploadNonDicoms:table:fileType')"
+        />
+        <!-- 上传状态 -->
+        <el-table-column
+          prop="status"
+          :label="$t('trials:uploadNonDicoms:table:uploadStatus')"
+          min-width="100"
+        >
+        <template slot-scope="scope">
+          <el-tag
+            :type="
+              ['warning', 'info', 'success', 'danger'][
+                scope.row.status
+              ]
+            "
+            v-if="scope.row.status || scope.row.status === 0"
+            >{{ $fd("NoneDicomUploadStatus", scope.row.status) }}
+          </el-tag>
+        </template>
+        </el-table-column>
         <el-table-column :label="$t('common:action:action')">
           <template slot-scope="scope">
-            <!-- <el-button
-              size="mini"
-              icon="el-icon-view"
-              circle
-              :title="$t('trials:uploadNonDicoms:button:preview')"
-              @click="handlePreviewImg(scope.row)"
-            /> -->
             <el-button
               size="mini"
               icon="el-icon-delete"
@@ -421,7 +455,9 @@ export default {
       uploadVisible: false,
       fileList: [],
       selectArr: [],
-      faccept: ['.jpg', '.jpeg', '.png', '.bmp'],
+      successFileList:[],
+      isFail:false,
+      faccept: ['.jpg', '.jpeg', '.png', '.bmp' ,'.zip'],
       fCount: 0,
       currentRow: {},
       filesLoading: false,
@@ -441,6 +477,25 @@ export default {
     this.getNoneDicomList()
     this.trialBodyPartTypes = this.bodyParts ? this.bodyParts.split('|') : []
     this.trialModalitys = this.modalities ? this.modalities.split('|') : []
+  },
+   watch: {
+    isFail() {
+      if (this.isFail) {
+        this.$confirm(this.$t("trials:visit:crcUpload:nomDicomFiles:failUpload"), {
+          type: "warning",
+          distinguishCancelAndClose: true,
+          confirmButtonText: this.$t("common:button:confirm"),
+          cancelButtonText: this.$t("common:button:cancel"),
+        })
+        .then(() => {
+          this.beginUpload();
+        })
+        .catch((err) => {
+          this.btnLoading = false;
+          console.log(err);
+        });
+      }
+    },
   },
   methods: {
     // 初始化非Dicom列表数据
@@ -623,9 +678,18 @@ export default {
         const fileName = files[i].name
         var extendName = fileName.substring(fileName.lastIndexOf('.')).toLocaleLowerCase()
         if (this.faccept.indexOf(extendName) !== -1) {
-          files[i].id = `${files[i].lastModified}${files[i].name}`
+          files[i].id = `${files[i].lastModified}${files[i].name}`;
-          this.fileList.push(files[i])
+          let obj = {
-          this.$refs.filesTable.toggleRowSelection(files[i], true)
+            name:files[i].name,
+            size:files[i].size,
+            type:extendName.split('.')[1],
+            status:0,
+            file:files[i],
+            id:`${files[i].lastModified}${files[i].name}`,
+            fileType:files[i].type
+          }
+          this.fileList.push(obj)
+          this.$refs.filesTable.toggleRowSelection(obj, true)
         }
       }
       this.resetUploadForm()
@@ -658,16 +722,22 @@ export default {
         distinguishCancelAndClose: true
       })
         .then(() => {
-          this.fileList.splice(this.fileList.findIndex(item => item.id === row.id), 1)
+          this.fileList.splice(this.fileList.findIndex(item => item.id === row.id), 1);
+          let flag = this.successFileList.some(item=>item.id === row.id);
+          if(flag){
+            this.successFileList.splice(this.successFileList.findIndex(item => item.id === row.id), 1);
+          }
         }).catch(() => {})
     },
     // 获取待上传文件信息
     handleSelectionChange(selection) {
       this.selectArr = selection
+      console.log(this.selectArr,'selectArr');
     },
     // 开始上传文件
     async beginUpload() {
       this.btnLoading = true
+      this.isFail = false;
       const fileMaxSize = 1024 * 1024 * 1024 * 1 // 1G
       var currentFilesSize = 0
       this.selectArr.forEach(item => {
@@ -678,12 +748,71 @@ export default {
         this.$alert(this.$t('trials:uploadNonDicoms:message:uploadSize'))
         this.btnLoading = false
       } else {
-        var uploadedFileList = []
+        this.selectArr.forEach(item=>item.status = 0);
-        for (var i = 0; i < this.selectArr.length; ++i) {
+        let num = this.selectArr.length > 6 ? 6 : this.selectArr.length;
-          const file = await this.fileToBlob(this.selectArr[i])
+        let funArr = [];
-          const res = await this.OSSclient.put(`/${this.trialId}/Image/${this.data.SubjectId}/${this.data.VisitName}/${this.selectArr[i].name}`, file)
+        for (let i = 0; i < num; i++) {
-          uploadedFileList.push({ fileName: this.selectArr[i].name, filePath: this.$getObjectName(res.url),fileFize: this.selectArr[i].size})
+          funArr.push(this.handleUploadTask(this.selectArr, i));
         }
+        if (funArr.length > 0) {
+          let res = await Promise.all(funArr);
+        }
+      }
+    },
+    // 并发上传
+    async handleUploadTask(arr, index){
+      if(!this.uploadVisible) return;
+      let file = this.fileList.filter(item=> item.id === arr[index].id)[0];
+      file.status=1;
+      let path = `/${this.trialId}/Image/${this.data.SubjectId}/${this.data.VisitName}/${file.name}`;
+      const fileData = await this.fileToBlob(file.file);
+      let res = await this.fileToOss(path,fileData);
+      if(res){
+        file.status = 2;
+        this.successFileList.push({ fileName: file.name, filePath: this.$getObjectName(res.url),fileFize: file.size,fileType:file.fileType})
+        let flag = arr.every(item=>item.status === 2);
+        if(flag){
+          return this.submitFile(this.successFileList);
+        }
+      }else{
+        file.status = 3;
+      }
+      let flag = arr.every(item=>item.status > 1);
+      if(flag){
+        let failFileList = arr.filter(item=>item.status === 3);
+        if(failFileList&&failFileList.length > 0){
+          this.$refs.filesTable.clearSelection();
+          failFileList.forEach((row) => {
+            this.$refs.filesTable.toggleRowSelection(row);
+          });
+          this.isFail = true;
+          return false;
+        }
+      }
+      let ind = arr.findIndex(item=>item.status === 0);
+      if(ind >= 0){
+        return this.handleUploadTask(arr,ind);
+      }else{
+        return false;
+      }
+    },
+    // file上传到oss
+    async fileToOss(path,file){
+      try{
+        let res = await this.OSSclient.put(path,file);
+        if(res){
+          return res;
+        }else{
+          return false;
+        }
+      }catch(err){
+        console.log(err);
+        return false;
+      }
+    },
+    // 非Dicom文件上传归档
+    submitFile(uploadedFileList){
+      if(!this.uploadVisible) return;
       preArchiveStudy({
         subjectVisitId: this.subjectVisitId,
         isDicom: false
@@ -697,16 +826,19 @@ export default {
           uploadedFileList: uploadedFileList
         }
         uploadNoneDicomFile(params).then(res => {
-            this.btnLoading = false
+          this.resetFileDiaolg();
-            this.uploadVisible = false
-            this.selectArr = []
           this.getNoneDicomList()
           // 刷新父组件列表
           this.$emit('getList')
           this.$message.success(this.$t('trials:uploadNonDicoms:message:uploadedSuccessfully'))
         }).catch(() => { this.btnLoading = false })
       })
-      }
+    },
+    resetFileDiaolg(){
+      this.btnLoading = false
+      this.uploadVisible = false
+      this.selectArr = [];
+      this.successFileList=[];
     },
     handleGetFilesList(row) {
       this.filesLoading = true