【LiLi】支持影像拖拽上传

2025-11-05 16:33:03 +08:00 · 2025-11-05 16:33:03 +08:00 · 6c02793d2f
parent 4f5fb17bb8
commit 6c02793d2f
5 changed files with 492 additions and 350 deletions
--- a/src/utils/index.js
+++ b/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;
+}
--- a/src/views/trials/trials-panel/trial-summary/trial-document/components/uploadFiles.vue
+++ b/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')
--- a/src/views/trials/trials-panel/visit/crc-upload/components/uploadClinicalData.vue
+++ b/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;
--- a/src/views/trials/trials-panel/visit/crc-upload/components/uploadDicomFiles2.vue
+++ b/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"
-          @selection-change="handleSelectionChange">
+          <el-table ref="dicomFilesTable" :data="uploadQueues" :row-key="(row) => row.studyIndex"
+            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) {
-      var files = e.target.files
+    async beginScanFiles(e, isDrop = false) {
+      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)
--- a/src/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles.vue
+++ b/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) {
-      var files = [...e.target.files]
+    async beginScanFiles(e, isDrop = false) {
+      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