【LiLi】支持影像拖拽上传

src/utils/index.js

@@ -197,3 +197,29 @@ export function workSpeedclose(isForce = false) {
   imageId = null;
   percentageById = {};
 }
+export async function readEntry(entry) {
+  const files = [];
+
+  // 如果是文件夹，创建读取器并递归读取其内容
+  if (entry.isDirectory) {
+    const directoryReader = entry.createReader();
+    const entries = await new Promise((resolve, reject) => {
+      directoryReader.readEntries(resolve, reject); // readEntries是异步的
+    });
+
+    // 递归读取文件夹内的每一项
+    for (const subEntry of entries) {
+      const subFiles = await readEntry(subEntry);
+      files.push(...subFiles);
+    }
+  }
+  // 如果是文件，则将其转换为File对象
+  else if (entry.isFile) {
+    const file = await new Promise((resolve, reject) => {
+      entry.file(resolve, reject); // entry.file()是异步的
+    });
+    files.push(file);
+  }
+
+  return files;
+}

src/views/trials/trials-panel/trial-summary/trial-document/components/uploadFiles.vue

@@ -30,6 +30,7 @@
           </div>
         </div>
       </form>
+      <div class="drag" ref="drag" @dragover="handleDragover" @drop="handleDrop">
         <!-- 文件列表 -->
         <el-table ref="filesTable" :data="fileList" class="dicomFiles-table" height="300"
           @selection-change="handleSelectionChange">
@@ -74,6 +75,8 @@
           </el-table-column>
         </el-table>
       </div>
+
+    </div>
     <div slot="dialog-footer">
       <div style="text-align: right; padding: 10px 0px">
         <span style="margin-right: 10px">{{
@@ -91,6 +94,7 @@
 import baseModel from '@/components/BaseModel'
 import { deepClone } from '@/utils/index.js'
 import store from '@/store'
+import { readEntry } from '@/utils/index'
 export default {
   name: 'uploadFiles',
   props: {
@@ -131,16 +135,41 @@ export default {
     }
   },
   methods: {
+    handleDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    handleDrop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.beginScanFiles(e, true)
+    },
     // 获取待上传文件信息
     handleSelectionChange(selection) {
       this.selectArr = selection
     },
     // 扫描待上传文件
-    beginScanFiles(e) {
+    async beginScanFiles(e, isDrop = false) {
       if (this.fileInput) {
         this.fileInput = null
       }
-      var files = [...e.target.files]
+      var files = []
+      if (isDrop) {
+        const items = e.dataTransfer.items;
+        const allFiles = []; // 用于存储所有找到的文件
+
+        // 遍历拖拽项
+        for (const item of items) {
+          const entry = item.webkitGetAsEntry(); // 获取文件系统入口
+          if (entry) {
+            const files = await readEntry(entry); // 递归读取入口内容
+            allFiles.push(...files);
+          }
+        }
+        files = allFiles
+      } else {
+        files = [...e.target.files]
+      }
       if (this.limitLength && this.fileList.length >= this.limitLength)
         return this.$message.warning(
           this.$t('trials:trialDocument:message:limitLength')

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

@@ -180,6 +180,8 @@
                 " />
             </div>
           </div>
+          <div class="drag" ref="drag" @dragover="handleDragover"
+            @drop="(e) => handleDrop(e, cd.Id, cd.ClinicalDataTrialSetId)">
             <el-table :data="cd.PDFFileList" style="width: 100%">
               <el-table-column type="index" width="50" />
               <!-- 文件名称 -->
@@ -207,6 +209,8 @@
               </el-table-column>
             </el-table>
           </div>
+
+        </div>
         <!-- PDF录入 -->
         <div v-if="cd.ClinicalUploadType === 2">
           <clinicalDataQuestions v-if="cd.ClinicalFromList.length > 0" :data="cd"
@@ -274,6 +278,7 @@ import PreviousFiles from "./previousFiles";
 import clinicalDataQuestions from "@/components/clinicalDataQuestions";
 import PreviewFile from "@/components/PreviewFile/index";
 import moment from "moment";
+import { readEntry } from '@/utils/index'
 export default {
   name: "ClinicalData",
   components: {
@@ -333,14 +338,39 @@ export default {
     this.getClinicalData();
   },
   methods: {
-    beginScanFiles(e, id, clinicalDataTrialSetId) {
+    handleDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    handleDrop(e, id, clinicalDataTrialSetId) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.beginScanFiles(e, id, clinicalDataTrialSetId, true)
+    },
+    async beginScanFiles(e, id, clinicalDataTrialSetId, isDrop = false) {
       this.currentRow = {
         Id: id,
         ClinicalDataTrialSetId: clinicalDataTrialSetId,
         SubjectId: this.data.SubjectId,
       };
       this.currentRow.TrialId = this.$route.query.trialId;
-      var files = e.target.files;
+      var files = [];
+      if (isDrop) {
+        const items = e.dataTransfer.items;
+        const allFiles = []; // 用于存储所有找到的文件
+
+        // 遍历拖拽项
+        for (const item of items) {
+          const entry = item.webkitGetAsEntry(); // 获取文件系统入口
+          if (entry) {
+            const files = await readEntry(entry); // 递归读取入口内容
+            allFiles.push(...files);
+          }
+        }
+        files = allFiles
+      } else {
+        files = e.target.files
+      }
       this.fileList = [];
       for (var i = 0; i < files.length; ++i) {
         const fileName = files[i].name;

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

@@ -142,10 +142,10 @@
             </div>
           </div>
         </form>
-
+        <div class="drag" ref="drag" @dragover="handleDragover" @drop="handleDrop">
           <!-- 文件列表 -->
-        <el-table ref="dicomFilesTable" :data="uploadQueues" :row-key="(row) => row.studyIndex" class="dicomFiles-table"
+          <el-table ref="dicomFilesTable" :data="uploadQueues" :row-key="(row) => row.studyIndex"
-          @selection-change="handleSelectionChange">
+            class="dicomFiles-table" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" :selectable="handleSelectable" />
             <el-table-column type="index" width="40" />
             <el-table-column min-width="200" show-overflow-tooltip>
@@ -393,6 +393,8 @@
               </template>
             </el-table-column>
           </el-table>
+        </div>
+
         <div style="text-align: right; padding: 10px 0px">
           <!-- 关闭 -->
           <!-- <el-button :disabled="btnLoading" size="small" type="primary" @click="cancel">
@@ -567,6 +569,7 @@ import DicomPreview from '@/views/dicom-show/dicom-preview'
 import uploadPetClinicalData from './uploadPetClinicalData.vue'
 import dicomStore from '@/utils/dicom-store'
 import { getToken } from '@/utils/auth'
+import { readEntry } from '@/utils/index'
 import { dcmUpload } from '@/utils/dcmUpload/dcmUpload'
 import { convertBytes } from '@/utils/dicom-character-set'
 import moment from 'moment'
@@ -676,6 +679,15 @@ export default {
     this.OSSclient.close()
   },
   methods: {
+    handleDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    handleDrop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.beginScanFiles(e, true)
+    },
     getParentList() {
       this.getStudyInfo()
       this.$emit('getList')
@@ -802,8 +814,24 @@ export default {
       window.open(routeData.href, '_blank')
     },
     // 扫描待上传文件
-    beginScanFiles(e) {
+    async beginScanFiles(e, isDrop = false) {
-      var files = e.target.files
+      var files = []
+      if (isDrop) {
+        const items = e.dataTransfer.items;
+        const allFiles = []; // 用于存储所有找到的文件
+
+        // 遍历拖拽项
+        for (const item of items) {
+          const entry = item.webkitGetAsEntry(); // 获取文件系统入口
+          if (entry) {
+            const files = await readEntry(entry); // 递归读取入口内容
+            allFiles.push(...files);
+          }
+        }
+        files = allFiles
+      } else {
+        files = e.target.files
+      }
       if (files.length > 0) {
         var checkFiles = [...files]
         let max = checkFiles.some((item) => item.size > 20 * 1024 * 1024 * 1024)
@@ -1098,6 +1126,7 @@ export default {
           }
         }
         reader.onerror = function (e) {
+          console.log(e, 'err')
           resolve()
         }
         reader.readAsArrayBuffer(file)

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

@@ -230,6 +230,7 @@
           </div>
         </div>
       </form>
+      <div class="drag" ref="drag" @dragover="handleDragover" @drop="handleDrop">
         <!-- 文件列表 -->
         <el-table ref="filesTable" :data="fileList" class="dicomFiles-table" height="300"
           @selection-change="handleSelectionChange">
@@ -274,6 +275,7 @@
             </template>
           </el-table-column>
         </el-table>
+      </div>
       <div style="text-align: right; padding: 10px 0px">
         <span style="margin-right: 10px">{{
           $store.state.trials.uploadTip
@@ -334,6 +336,7 @@ import {
   deleteNoneDicomStudyFile,
 } from '@/api/trials'
 import { getToken } from '@/utils/auth'
+import { readEntry } from '@/utils/index'
 // import PreviewFiles from './previewFiles'
 // import uploadVideos from '@/components/videos'
 import moment from 'moment'
@@ -454,6 +457,15 @@ export default {
     },
   },
   methods: {
+    handleDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    handleDrop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.beginScanFiles(e, true)
+    },
     // 初始化非Dicom列表数据
     getNoneDicomList() {
       this.loading = true
@@ -634,8 +646,24 @@ export default {
       }
     },
     // 扫描待上传文件
-    beginScanFiles(e) {
+    async beginScanFiles(e, isDrop = false) {
-      var files = [...e.target.files]
+      var files = []
+      if (isDrop) {
+        const items = e.dataTransfer.items;
+        const allFiles = []; // 用于存储所有找到的文件
+
+        // 遍历拖拽项
+        for (const item of items) {
+          const entry = item.webkitGetAsEntry(); // 获取文件系统入口
+          if (entry) {
+            const files = await readEntry(entry); // 递归读取入口内容
+            allFiles.push(...files);
+          }
+        }
+        files = allFiles
+      } else {
+        files = [...e.target.files]
+      }
       var sameFiles = []
       files.forEach((file) => {
         var extendName = file.name