【LiLi】支持影像拖拽上传

src/utils/index.js

@@ -196,4 +196,30 @@ export function workSpeedclose(isForce = false) {
   lastPercentage = 0;
   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,49 +30,52 @@
           </div>
         </div>
       </form>
-      <!-- 文件列表 -->
-      <el-table ref="filesTable" :data="fileList" class="dicomFiles-table" height="300"
-        @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" :selectable="(row, index) => row.status !== 2 && !loading" />
-        <el-table-column type="index" width="50" />
-        <!-- 文件名称 -->
-        <el-table-column prop="name" :label="$t('trials:trialDocument:table:fileName')" min-width="100" />
-        <!-- 文件大小 -->
-        <el-table-column prop="size" :label="$t('trials:trialDocument:table:fileSize')">
-          <template slot-scope="scope">
-            <span>{{
-              scope.row.size && scope.row.size > 0
-                ? `${(scope.row.size / 1024 / 1024).toFixed(3)}MB`
-                : '0MB'
-            }}</span>
-          </template>
-        </el-table-column>
-        <!-- 文件类型 -->
-        <el-table-column prop="type" :label="$t('trials:trialDocument:table:fileType')" />
-        <!-- 上传状态 -->
-        <el-table-column prop="status" :label="$t('trials:trialDocument: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('trials:trialDocument:table:failedFileCount')" min-width="150"
-          show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-progress color="#409eff" :percentage="scope.row.size && scope.row.size > 0 ? ((scope.row.uploadFileSize * 100) / scope.row.size).toFixed(2) *
-              1
-              : ((scope.row.uploadFileSize * 100) / 1).toFixed(2) *
-              1" />
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('common:action:action')">
-          <template slot-scope="scope">
-            <el-button size="mini" icon="el-icon-delete" circle :disabled="loading"
-              :title="$t('trials:trialDocument:action:delete')" @click="handleRemoveFile(scope.row)" />
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="drag" ref="drag" @dragover="handleDragover" @drop="handleDrop">
+        <!-- 文件列表 -->
+        <el-table ref="filesTable" :data="fileList" class="dicomFiles-table" height="300"
+          @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" :selectable="(row, index) => row.status !== 2 && !loading" />
+          <el-table-column type="index" width="50" />
+          <!-- 文件名称 -->
+          <el-table-column prop="name" :label="$t('trials:trialDocument:table:fileName')" min-width="100" />
+          <!-- 文件大小 -->
+          <el-table-column prop="size" :label="$t('trials:trialDocument:table:fileSize')">
+            <template slot-scope="scope">
+              <span>{{
+                scope.row.size && scope.row.size > 0
+                  ? `${(scope.row.size / 1024 / 1024).toFixed(3)}MB`
+                  : '0MB'
+              }}</span>
+            </template>
+          </el-table-column>
+          <!-- 文件类型 -->
+          <el-table-column prop="type" :label="$t('trials:trialDocument:table:fileType')" />
+          <!-- 上传状态 -->
+          <el-table-column prop="status" :label="$t('trials:trialDocument: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('trials:trialDocument:table:failedFileCount')" min-width="150"
+            show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-progress color="#409eff" :percentage="scope.row.size && scope.row.size > 0 ? ((scope.row.uploadFileSize * 100) / scope.row.size).toFixed(2) *
+                1
+                : ((scope.row.uploadFileSize * 100) / 1).toFixed(2) *
+                1" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('common:action:action')">
+            <template slot-scope="scope">
+              <el-button size="mini" icon="el-icon-delete" circle :disabled="loading"
+                :title="$t('trials:trialDocument:action:delete')" @click="handleRemoveFile(scope.row)" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
     <div slot="dialog-footer">
       <div style="text-align: right; padding: 10px 0px">
@@ -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

@@ -2,8 +2,8 @@
   <div v-loading="loading" class="clinical-data-wrapper">
     <el-tabs type="border-card">
       <el-tab-pane v-for="cd in clinicalDatas" :key="cd.ClinicalDataTrialSetId" :label="$i18n.locale === 'zh'
-          ? cd.ClinicalDataSetName
-          : cd.ClinicalDataSetEnName
+        ? cd.ClinicalDataSetName
+        : cd.ClinicalDataSetEnName
         ">
         <!-- 格式化录入 -->
         <div v-if="cd.ClinicalUploadType === 0">
@@ -180,32 +180,36 @@
                 " />
             </div>
           </div>
-          <el-table :data="cd.PDFFileList" style="width: 100%">
-            <el-table-column type="index" width="50" />
-            <!-- 文件名称 -->
-            <el-table-column prop="FileName" :label="$t('trials:uploadClinicalData:table:fileName')" width="250" />
-            <!-- 文件大小 -->
-            <el-table-column prop="Size" :label="$t('trials:uploadClinicalData:table:fileSize')" width="150">
-              <template slot-scope="scope">
-                <span>{{
-                  $FormatSize(scope.row.Size)
+          <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" />
+              <!-- 文件名称 -->
+              <el-table-column prop="FileName" :label="$t('trials:uploadClinicalData:table:fileName')" width="250" />
+              <!-- 文件大小 -->
+              <el-table-column prop="Size" :label="$t('trials:uploadClinicalData:table:fileSize')" width="150">
+                <template slot-scope="scope">
+                  <span>{{
+                    $FormatSize(scope.row.Size)
                   }}</span>
-              </template>
-            </el-table-column>
-            <!-- 上传时间 -->
-            <el-table-column prop="CreateTime" :label="$t('trials:uploadClinicalData:table:uploadedTime')"
-              width="200" />
-            <el-table-column :label="$t('common:action:action')" width="200">
-              <template slot-scope="scope">
-                <!-- 预览 -->
-                <el-button icon="el-icon-view" circle :title="$t('trials:uploadClinicalData:action:preview')"
-                  size="small" @click.native.prevent="preview(scope.row)" />
-                <!-- 移除 -->
-                <el-button v-if="allowAddOrEdit" icon="el-icon-delete" circle :title="$t('common:button:delete')"
-                  size="small" @click.native.prevent="deleteFile(scope.row.Id)" />
-              </template>
-            </el-table-column>
-          </el-table>
+                </template>
+              </el-table-column>
+              <!-- 上传时间 -->
+              <el-table-column prop="CreateTime" :label="$t('trials:uploadClinicalData:table:uploadedTime')"
+                width="200" />
+              <el-table-column :label="$t('common:action:action')" width="200">
+                <template slot-scope="scope">
+                  <!-- 预览 -->
+                  <el-button icon="el-icon-view" circle :title="$t('trials:uploadClinicalData:action:preview')"
+                    size="small" @click.native.prevent="preview(scope.row)" />
+                  <!-- 移除 -->
+                  <el-button v-if="allowAddOrEdit" icon="el-icon-delete" circle :title="$t('common:button:delete')"
+                    size="small" @click.native.prevent="deleteFile(scope.row.Id)" />
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
         </div>
         <!-- PDF录入 -->
         <div v-if="cd.ClinicalUploadType === 2">
@@ -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,257 +142,259 @@
             </div>
           </div>
         </form>
-
-        <!-- 文件列表 -->
-        <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>
-            <template slot="header">
-              <el-tooltip placement="top-start">
-                <div slot="content">
-                  {{ $t('trials:uploadDicomList:table:studyDetail1') }}<br />
-                  {{ $t('trials:uploadDicomList:table:studyDetail2') }}<br />
-                  {{ $t('trials:uploadedDicoms:table:studyDate') }}
-                </div>
-                <span>{{ $t('trials:uploadDicomList:table:studyInfo') }}</span>
-              </el-tooltip>
-            </template>
-            <template slot-scope="scope">
-              <div style="line-height: 15px">
-                <div>
+        <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-column type="selection" width="55" :selectable="handleSelectable" />
+            <el-table-column type="index" width="40" />
+            <el-table-column min-width="200" show-overflow-tooltip>
+              <template slot="header">
+                <el-tooltip placement="top-start">
+                  <div slot="content">
+                    {{ $t('trials:uploadDicomList:table:studyDetail1') }}<br />
+                    {{ $t('trials:uploadDicomList:table:studyDetail2') }}<br />
+                    {{ $t('trials:uploadedDicoms:table:studyDate') }}
+                  </div>
+                  <span>{{ $t('trials:uploadDicomList:table:studyInfo') }}</span>
+                </el-tooltip>
+              </template>
+              <template slot-scope="scope">
+                <div style="line-height: 15px">
                   <div>
-                    <span v-if="scope.row.dicomInfo.accNumber"><span style="font-weight: 500">Acc:</span>
-                      {{ scope.row.dicomInfo.accNumber }}</span>
-                    <span v-else style="color: #f44336">N/A</span>
+                    <div>
+                      <span v-if="scope.row.dicomInfo.accNumber"><span style="font-weight: 500">Acc:</span>
+                        {{ scope.row.dicomInfo.accNumber }}</span>
+                      <span v-else style="color: #f44336">N/A</span>
+                    </div>
+                    <div style="display: inline-block; margin-right: 2px">
+                      <span v-if="scope.row.dicomInfo.modality.length > 0">
+                        {{ scope.row.dicomInfo.modality.join('、') }},</span>
+                      <span v-else style="color: #f44336">N/A,</span>
+                    </div>
+                    <div style="display: inline-block; margin-right: 2px">
+                      <span v-if="scope.row.seriesList.length">{{ scope.row.seriesList.length }} Series,</span>
+                      <span v-else style="color: #f44336">N/A,</span>
+                    </div>
+                    <div style="display: inline-block">
+                      <span v-if="scope.row.fileList.length">{{ scope.row.fileList.length }} Instances</span>
+                      <span v-else style="color: #f44336">N/A</span>
+                    </div>
                   </div>
-                  <div style="display: inline-block; margin-right: 2px">
-                    <span v-if="scope.row.dicomInfo.modality.length > 0">
-                      {{ scope.row.dicomInfo.modality.join('、') }},</span>
-                    <span v-else style="color: #f44336">N/A,</span>
+
+                  <div>
+                    <div style="display: inline-block; margin-right: 2px">
+                      <span v-if="scope.row.dicomInfo.bodyPart">
+                        {{ scope.row.dicomInfo.bodyPart }},
+                      </span>
+                      <span v-else style="color: #f44336">N/A, </span>
+                    </div>
+                    <div style="display: inline-block">
+                      <span v-if="scope.row.dicomInfo.description">
+                        {{ scope.row.dicomInfo.description }}</span>
+                      <span v-else style="color: #f44336">N/A</span>
+                    </div>
                   </div>
-                  <div style="display: inline-block; margin-right: 2px">
-                    <span v-if="scope.row.seriesList.length">{{ scope.row.seriesList.length }} Series,</span>
-                    <span v-else style="color: #f44336">N/A,</span>
-                  </div>
-                  <div style="display: inline-block">
-                    <span v-if="scope.row.fileList.length">{{ scope.row.fileList.length }} Instances</span>
-                    <span v-else style="color: #f44336">N/A</span>
+                  <div>
+                    {{ scope.row.dicomInfo.studyTime }}
                   </div>
                 </div>
-
-                <div>
-                  <div style="display: inline-block; margin-right: 2px">
-                    <span v-if="scope.row.dicomInfo.bodyPart">
-                      {{ scope.row.dicomInfo.bodyPart }},
+              </template>
+            </el-table-column>
+            <el-table-column min-width="130" show-overflow-tooltip>
+              <template slot="header">
+                <el-tooltip placement="top">
+                  <div slot="content">
+                    {{ $t('trials:uploadDicomList:table:pId') }}<br />
+                    {{ $t('trials:uploadDicomList:table:patientName') }}<br />
+                    {{ $t('trials:uploadDicomList:table:pInfo') }}
+                  </div>
+                  <span>{{
+                    $t('trials:uploadDicomList:table:patientInfo')
+                  }}</span>
+                </el-tooltip>
+              </template>
+              <template slot-scope="scope">
+                <div style="line-height: 15px">
+                  <div>
+                    <span v-if="scope.row.dicomInfo.patientId"><span style="font-weight: 500">PID: </span>{{
+                      scope.row.dicomInfo.patientId }}</span>
+                    <span v-else style="color: #f44336">N/A</span>
+                  </div>
+                  <div>
+                    <span :class="[
+                      scope.row.dicomInfo.patientName ? '' : 'colorOfRed',
+                    ]">
+                      {{
+                        scope.row.dicomInfo.patientName
+                          ? scope.row.dicomInfo.patientName
+                          : 'N/A'
+                      }}
                     </span>
-                    <span v-else style="color: #f44336">N/A, </span>
                   </div>
-                  <div style="display: inline-block">
-                    <span v-if="scope.row.dicomInfo.description">
-                      {{ scope.row.dicomInfo.description }}</span>
-                    <span v-else style="color: #f44336">N/A</span>
+                  <div>
+                    <span :class="[
+                      scope.row.dicomInfo.patientSex ? '' : 'colorOfRed',
+                    ]">
+                      {{
+                        scope.row.dicomInfo.patientSex
+                          ? scope.row.dicomInfo.patientSex
+                          : 'N/A'
+                      }},
+                    </span>
+
+                    <span :class="[
+                      scope.row.dicomInfo.patientAge ? '' : 'colorOfRed',
+                    ]">
+                      {{
+                        scope.row.dicomInfo.patientAge
+                          ? scope.row.dicomInfo.patientAge
+                          : 'N/A'
+                      }},
+                    </span>
+
+                    <span :class="[
+                      scope.row.dicomInfo.patientBirthDate ? '' : 'colorOfRed',
+                    ]">
+                      {{
+                        scope.row.dicomInfo.patientBirthDate
+                          ? scope.row.dicomInfo.patientBirthDate
+                          : 'N/A'
+                      }}
+                    </span>
                   </div>
                 </div>
-                <div>
-                  {{ scope.row.dicomInfo.studyTime }}
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column min-width="130" show-overflow-tooltip>
-            <template slot="header">
-              <el-tooltip placement="top">
-                <div slot="content">
-                  {{ $t('trials:uploadDicomList:table:pId') }}<br />
-                  {{ $t('trials:uploadDicomList:table:patientName') }}<br />
-                  {{ $t('trials:uploadDicomList:table:pInfo') }}
-                </div>
-                <span>{{
-                  $t('trials:uploadDicomList:table:patientInfo')
-                }}</span>
-              </el-tooltip>
-            </template>
-            <template slot-scope="scope">
-              <div style="line-height: 15px">
-                <div>
-                  <span v-if="scope.row.dicomInfo.patientId"><span style="font-weight: 500">PID: </span>{{
-                    scope.row.dicomInfo.patientId }}</span>
-                  <span v-else style="color: #f44336">N/A</span>
-                </div>
-                <div>
-                  <span :class="[
-                    scope.row.dicomInfo.patientName ? '' : 'colorOfRed',
-                  ]">
-                    {{
-                      scope.row.dicomInfo.patientName
-                        ? scope.row.dicomInfo.patientName
-                        : 'N/A'
-                    }}
-                  </span>
-                </div>
-                <div>
-                  <span :class="[
-                    scope.row.dicomInfo.patientSex ? '' : 'colorOfRed',
-                  ]">
-                    {{
-                      scope.row.dicomInfo.patientSex
-                        ? scope.row.dicomInfo.patientSex
-                        : 'N/A'
-                    }},
-                  </span>
-
-                  <span :class="[
-                    scope.row.dicomInfo.patientAge ? '' : 'colorOfRed',
-                  ]">
-                    {{
-                      scope.row.dicomInfo.patientAge
-                        ? scope.row.dicomInfo.patientAge
-                        : 'N/A'
-                    }},
-                  </span>
-
-                  <span :class="[
-                    scope.row.dicomInfo.patientBirthDate ? '' : 'colorOfRed',
-                  ]">
-                    {{
-                      scope.row.dicomInfo.patientBirthDate
-                        ? scope.row.dicomInfo.patientBirthDate
-                        : 'N/A'
-                    }}
-                  </span>
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column :label="$t('trials:uploadDicomList:table:failedFileCount')" min-width="150"
-            show-overflow-tooltip>
-            <!--:percentage="
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('trials:uploadDicomList:table:failedFileCount')" min-width="150"
+              show-overflow-tooltip>
+              <!--:percentage="
                   (scope.row.dicomInfo.failedFileCount * 100) /
                   scope.row.dicomInfo.fileCount
                 "
                 :show-text="false"--->
-            <template slot-scope="scope">
-              <el-progress color="#409eff" :percentage="(
-                (scope.row.dicomInfo.uploadFileSize * 100) /
-                (scope.row.dicomInfo.fileSize ? scope.row.dicomInfo.fileSize : 1)
-              ).toFixed(2) * 1
-                " />
-              <span>
-                {{ $t('trials:uploadDicomList:table:uploadNow')
-                }}{{ scope.row.dicomInfo.failedFileCount }}/{{
-                  scope.row.dicomInfo.fileCount
-                }}
-                ({{
-                  (scope.row.dicomInfo.uploadFileSize / 1024 / 1024).toFixed(3)
-                }}MB/{{
-                  (scope.row.dicomInfo.fileSize / 1024 / 1024).toFixed(3)
-                }}MB)
-              </span>
-            </template>
-          </el-table-column>
+              <template slot-scope="scope">
+                <el-progress color="#409eff" :percentage="(
+                  (scope.row.dicomInfo.uploadFileSize * 100) /
+                  (scope.row.dicomInfo.fileSize ? scope.row.dicomInfo.fileSize : 1)
+                ).toFixed(2) * 1
+                  " />
+                <span>
+                  {{ $t('trials:uploadDicomList:table:uploadNow')
+                  }}{{ scope.row.dicomInfo.failedFileCount }}/{{
+                    scope.row.dicomInfo.fileCount
+                  }}
+                  ({{
+                    (scope.row.dicomInfo.uploadFileSize / 1024 / 1024).toFixed(3)
+                  }}MB/{{
+                    (scope.row.dicomInfo.fileSize / 1024 / 1024).toFixed(3)
+                  }}MB)
+                </span>
+              </template>
+            </el-table-column>
 
-          <el-table-column :label="$t('trials:uploadDicomList:table:status')" min-width="140" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <span v-if="
-                !scope.row.dicomInfo.failedFileCount &&
-                !scope.row.dicomInfo.isInit
-              ">
-                {{ $t('trials:uploadDicomList:table:status1') }}</span>
-              <span style="color: #409eff" v-else-if="
-                !scope.row.dicomInfo.failedFileCount &&
-                scope.row.dicomInfo.isInit &&
-                btnLoading
-              ">{{ $t('trials:uploadDicomList:table:status2') }}</span>
-              <span style="color: #409eff" v-else-if="
-                scope.row.dicomInfo.failedFileCount <
-                scope.row.dicomInfo.fileCount &&
-                !scope.row.uploadState.record
-              ">{{ $t('trials:uploadDicomList:table:status2') }}</span>
-              <span style="color: #2cc368" v-else-if="
-                scope.row.dicomInfo.failedFileCount ===
-                scope.row.dicomInfo.fileCount
-              ">{{ $t('trials:uploadDicomList:table:status3') }}</span>
-              <span style="color: #f66" v-else-if="
-                scope.row.uploadState.record &&
-                scope.row.uploadState.record.fileCount === 0
-              ">{{ $t('trials:uploadDicomList:table:status5') }}</span>
-              <span style="color: #f66" v-else>{{
-                $t('trials:uploadDicomList:table:Failed')
-              }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="$t('trials:uploadDicomList:table:record')" min-width="140" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <el-tooltip placement="top" v-if="scope.row.uploadState.record">
-                <div slot="content">
-                  <div style="max-height: 500px; overflow-y: auto">
-                    {{ $t('trials:uploadDicomList:table:Existed') }}:
-                    <div v-if="scope.row.uploadState.record.Existed.length">
-                      <div v-for="item of scope.row.uploadState.record.Existed" :key="item"
-                        style="font-size: 12px; color: #baa72a">
-                        {{ item }}
+            <el-table-column :label="$t('trials:uploadDicomList:table:status')" min-width="140" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <span v-if="
+                  !scope.row.dicomInfo.failedFileCount &&
+                  !scope.row.dicomInfo.isInit
+                ">
+                  {{ $t('trials:uploadDicomList:table:status1') }}</span>
+                <span style="color: #409eff" v-else-if="
+                  !scope.row.dicomInfo.failedFileCount &&
+                  scope.row.dicomInfo.isInit &&
+                  btnLoading
+                ">{{ $t('trials:uploadDicomList:table:status2') }}</span>
+                <span style="color: #409eff" v-else-if="
+                  scope.row.dicomInfo.failedFileCount <
+                  scope.row.dicomInfo.fileCount &&
+                  !scope.row.uploadState.record
+                ">{{ $t('trials:uploadDicomList:table:status2') }}</span>
+                <span style="color: #2cc368" v-else-if="
+                  scope.row.dicomInfo.failedFileCount ===
+                  scope.row.dicomInfo.fileCount
+                ">{{ $t('trials:uploadDicomList:table:status3') }}</span>
+                <span style="color: #f66" v-else-if="
+                  scope.row.uploadState.record &&
+                  scope.row.uploadState.record.fileCount === 0
+                ">{{ $t('trials:uploadDicomList:table:status5') }}</span>
+                <span style="color: #f66" v-else>{{
+                  $t('trials:uploadDicomList:table:Failed')
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('trials:uploadDicomList:table:record')" min-width="140" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <el-tooltip placement="top" v-if="scope.row.uploadState.record">
+                  <div slot="content">
+                    <div style="max-height: 500px; overflow-y: auto">
+                      {{ $t('trials:uploadDicomList:table:Existed') }}:
+                      <div v-if="scope.row.uploadState.record.Existed.length">
+                        <div v-for="item of scope.row.uploadState.record.Existed" :key="item"
+                          style="font-size: 12px; color: #baa72a">
+                          {{ item }}
+                        </div>
                       </div>
-                    </div>
-                    <div v-else>&nbsp;</div>
-                    {{ $t('trials:uploadDicomList:table:Uploaded') }}:
-                    <div v-if="scope.row.uploadState.record.Uploaded.length">
-                      <div v-for="item of scope.row.uploadState.record.Uploaded" :key="item"
-                        style="font-size: 12px; color: #24b837">
-                        {{ item }}
+                      <div v-else>&nbsp;</div>
+                      {{ $t('trials:uploadDicomList:table:Uploaded') }}:
+                      <div v-if="scope.row.uploadState.record.Uploaded.length">
+                        <div v-for="item of scope.row.uploadState.record.Uploaded" :key="item"
+                          style="font-size: 12px; color: #24b837">
+                          {{ item }}
+                        </div>
                       </div>
-                    </div>
-                    <div v-else>&nbsp;</div>
-                    <br />
-                    {{ $t('trials:uploadDicomList:table:Failed') }}:
-                    <div v-if="scope.row.uploadState.record.Failed.length">
-                      <div v-for="item of scope.row.uploadState.record.Failed" :key="item"
-                        style="font-size: 12px; color: #f66">
-                        {{ item }}
+                      <div v-else>&nbsp;</div>
+                      <br />
+                      {{ $t('trials:uploadDicomList:table:Failed') }}:
+                      <div v-if="scope.row.uploadState.record.Failed.length">
+                        <div v-for="item of scope.row.uploadState.record.Failed" :key="item"
+                          style="font-size: 12px; color: #f66">
+                          {{ item }}
+                        </div>
                       </div>
+                      <div v-else>&nbsp;</div>
                     </div>
-                    <div v-else>&nbsp;</div>
                   </div>
-                </div>
-                <el-button size="mini" style="cursor: pointer">
-                  <span style="font-size: 12px; color: #baa72a">{{
-                    scope.row.uploadState.record.Existed.length
-                  }}</span>
-                  /
-                  <span style="font-size: 12px; color: #24b837">{{
-                    scope.row.uploadState.record.Uploaded.length
-                  }}</span>
-                  /
-                  <span style="font-size: 12px; color: #f66">{{
-                    scope.row.uploadState.record.Failed.length
-                  }}</span>
-                </el-button>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column v-show="isScan" :label="$t('common:action:action')" width="200">
-            <template slot-scope="scope">
-              <!-- 预览 -->
-              <!--          :disabled="scope.row.dicomInfo.failedFileCount < scope.row.dicomInfo.fileCount && scope.row.dicomInfo.failedFileCount !== 0"-->
-              <el-button icon="el-icon-view" circle :disabled="(scope.row.uploadState.stateCode !== '' &&
-                scope.row.dicomInfo.failedFileCount <
-                scope.row.dicomInfo.fileCount &&
-                !scope.row.uploadState.record) ||
-                btnLoading
-                " :title="$t('trials:uploadedDicoms:action:preview')" size="small"
-                @click="handlePreview(scope.row.dicomInfo.studyUid)" />
-              <!-- 移除 -->
-              <el-button icon="el-icon-delete" circle :title="$t('trials:uploadedDicoms:action:delete')" size="small"
-                :disabled="(scope.row.uploadState.stateCode !== '' &&
+                  <el-button size="mini" style="cursor: pointer">
+                    <span style="font-size: 12px; color: #baa72a">{{
+                      scope.row.uploadState.record.Existed.length
+                    }}</span>
+                    /
+                    <span style="font-size: 12px; color: #24b837">{{
+                      scope.row.uploadState.record.Uploaded.length
+                    }}</span>
+                    /
+                    <span style="font-size: 12px; color: #f66">{{
+                      scope.row.uploadState.record.Failed.length
+                    }}</span>
+                  </el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+            <el-table-column v-show="isScan" :label="$t('common:action:action')" width="200">
+              <template slot-scope="scope">
+                <!-- 预览 -->
+                <!--          :disabled="scope.row.dicomInfo.failedFileCount < scope.row.dicomInfo.fileCount && scope.row.dicomInfo.failedFileCount !== 0"-->
+                <el-button icon="el-icon-view" circle :disabled="(scope.row.uploadState.stateCode !== '' &&
                   scope.row.dicomInfo.failedFileCount <
                   scope.row.dicomInfo.fileCount &&
                   !scope.row.uploadState.record) ||
                   btnLoading
-                  " @click="handleDelete(scope.$index, scope.row)" />
-            </template>
-          </el-table-column>
-        </el-table>
+                  " :title="$t('trials:uploadedDicoms:action:preview')" size="small"
+                  @click="handlePreview(scope.row.dicomInfo.studyUid)" />
+                <!-- 移除 -->
+                <el-button icon="el-icon-delete" circle :title="$t('trials:uploadedDicoms:action:delete')" size="small"
+                  :disabled="(scope.row.uploadState.stateCode !== '' &&
+                    scope.row.dicomInfo.failedFileCount <
+                    scope.row.dicomInfo.fileCount &&
+                    !scope.row.uploadState.record) ||
+                    btnLoading
+                    " @click="handleDelete(scope.$index, scope.row)" />
+              </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)

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

@@ -230,50 +230,52 @@
           </div>
         </div>
       </form>
-      <!-- 文件列表 -->
-      <el-table ref="filesTable" :data="fileList" class="dicomFiles-table" height="300"
-        @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" :selectable="(row, index) => row.status !== 2 && !btnLoading" />
-        <el-table-column type="index" width="50" />
-        <!-- 文件名称 -->
-        <el-table-column prop="name" :label="$t('trials:uploadNonDicoms:table:fileName')" 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(3)}MB`
-                : '0MB'
-            }}</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('trials:uploadNonDicoms:table:failedFileCount')" min-width="150"
-          show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-progress color="#409eff" :percentage="scope.row.size && scope.row.size > 0 ? ((scope.row.uploadFileSize * 100) / scope.row.size).toFixed(2) *
-              1
-              : ((scope.row.uploadFileSize * 100) / 1).toFixed(2) *
-              1
-              " />
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('common:action:action')">
-          <template slot-scope="scope">
-            <el-button size="mini" icon="el-icon-delete" circle :disabled="btnLoading"
-              :title="$t('trials:crcUpload:action:delete')" @click="handleRemoveFile(scope.row)" />
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="drag" ref="drag" @dragover="handleDragover" @drop="handleDrop">
+        <!-- 文件列表 -->
+        <el-table ref="filesTable" :data="fileList" class="dicomFiles-table" height="300"
+          @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" :selectable="(row, index) => row.status !== 2 && !btnLoading" />
+          <el-table-column type="index" width="50" />
+          <!-- 文件名称 -->
+          <el-table-column prop="name" :label="$t('trials:uploadNonDicoms:table:fileName')" 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(3)}MB`
+                  : '0MB'
+              }}</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('trials:uploadNonDicoms:table:failedFileCount')" min-width="150"
+            show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-progress color="#409eff" :percentage="scope.row.size && scope.row.size > 0 ? ((scope.row.uploadFileSize * 100) / scope.row.size).toFixed(2) *
+                1
+                : ((scope.row.uploadFileSize * 100) / 1).toFixed(2) *
+                1
+                " />
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('common:action:action')">
+            <template slot-scope="scope">
+              <el-button size="mini" icon="el-icon-delete" circle :disabled="btnLoading"
+                :title="$t('trials:crcUpload:action:delete')" @click="handleRemoveFile(scope.row)" />
+            </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