Merge branch 'main' of https://gitea.frp.extimaging.com/XCKJ/irc_web into main

src/components/uploadDicomAndNonedicom/nonedicomFile.vue

@@ -9,6 +9,8 @@
       style="width: 100%"
       v-adaptive="{ bottomOffset: 40 }"
       :loading="loading"
+      @sort-change="handleSortByColumn"
+      :default-sort="{ prop: 'TaskBlindName', order: 'descending' }"
     >
       <!--受试者-->
       <el-table-column
@@ -19,67 +21,111 @@
       <el-table-column
         prop="TaskBlindName"
         :label="$t('upload:nonedicom:table:taskName')"
+        sortable="custom"
       />
       <!--检查类型-->
       <el-table-column
         prop="Modality"
         :label="$t('upload:nonedicom:table:molityType')"
+        sortable="custom"
       >
       </el-table-column>
       <!--检查部位-->
       <el-table-column
         prop="BodyPart"
         :label="$t('upload:nonedicom:table:bodyPart')"
+        sortable="custom"
       />
       <!--原文件数-->
       <el-table-column
         prop="FileCount"
         :label="$t('upload:nonedicom:table:fileCount')"
       >
-        <el-popover
+        <template slot-scope="scope">
-          v-if="scope.row.FileCount"
+          <el-popover
-          trigger="click"
+            v-if="scope.row.FileCount"
-          placement="bottom"
+            trigger="click"
-        >
+            placement="bottom"
-          <el-table
-            :data="scope.row.NoneDicomStudyFileList"
-            height="300"
-            size="small"
           >
-            <!-- 文件名称 -->
+            <el-table :data="scope.row.FileList" height="300" size="small">
-            <el-table-column
+              <!-- 文件名称 -->
-              prop="FileName"
+              <el-table-column
-              :label="$t('trials:audit:table:nonDicomsFileName')"
+                prop="FileName"
-              width="200"
+                :label="$t('trials:audit:table:nonDicomsFileName')"
-            />
+                width="200"
-            <el-table-column :label="$t('common:action:action')" width="120">
+              />
-              <template slot-scope="files">
+              <el-table-column :label="$t('common:action:action')" width="120">
-                <!-- 预览 -->
+                <template slot-scope="files">
-                <el-button
+                  <!-- 预览 -->
-                  type="text"
+                  <el-button
-                  :disabled="
+                    type="text"
-                    files.row.FileType && files.row.FileType.indexOf('zip') >= 0
+                    :disabled="
-                  "
+                      files.row.FileType &&
-                  @click.native.prevent="previewFile(files.row)"
+                      files.row.FileType.indexOf('zip') >= 0
-                >
+                    "
-                  {{ $t('trials:audit:button:nonDicomsPreview') }}
+                    @click.native.prevent="previewFile(files.row)"
-                </el-button>
+                  >
-              </template>
+                    {{ $t('trials:audit:button:nonDicomsPreview') }}
-            </el-table-column>
+                  </el-button>
-          </el-table>
+                </template>
-          <div slot="reference" class="name-wrapper">
+              </el-table-column>
-            <el-button type="text">
+            </el-table>
-              {{ scope.row.FileCount }}
+            <div slot="reference" class="name-wrapper">
-            </el-button>
+              <el-button type="text">
-          </div>
+                {{ scope.row.FileCount }}
-        </el-popover>
+              </el-button>
-        <span v-else>{{ scope.row.FileCount }}</span>
+            </div>
+          </el-popover>
+          <span v-else>{{ scope.row.FileCount }}</span>
+        </template>
       </el-table-column>
       <!--后处理文件数-->
       <el-table-column
         prop="UploadedFileCount"
         :label="$t('upload:nonedicom:table:uploadFileCount')"
-      />
+      >
+        <template slot-scope="scope">
+          <el-popover
+            v-if="scope.row.UploadedFileCount"
+            trigger="click"
+            placement="bottom"
+          >
+            <el-table
+              :data="scope.row.UploadedFileList"
+              height="300"
+              size="small"
+            >
+              <!-- 文件名称 -->
+              <el-table-column
+                prop="FileName"
+                :label="$t('trials:audit:table:nonDicomsFileName')"
+                width="200"
+              />
+              <el-table-column :label="$t('common:action:action')" width="120">
+                <template slot-scope="files">
+                  <!-- 预览 -->
+                  <el-button
+                    type="text"
+                    :disabled="
+                      files.row.FileType &&
+                      files.row.FileType.indexOf('zip') >= 0
+                    "
+                    @click.native.prevent="previewFile(files.row)"
+                  >
+                    {{ $t('trials:audit:button:nonDicomsPreview') }}
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div slot="reference" class="name-wrapper">
+              <el-button type="text">
+                {{ scope.row.UploadedFileCount }}
+              </el-button>
+            </div>
+          </el-popover>
+          <span v-else>{{ scope.row.UploadedFileCount }}</span>
+        </template>
+      </el-table-column>
       <el-table-column
         :label="$t('common:action:action')"
         fixed="right"
@@ -97,6 +143,7 @@
             circle
             icon="el-icon-upload2"
             :title="$t('upload:nonedicom:button:upload')"
+            @click.native.prevent="handleUpload(scope.row)"
           />
           <!--删除--->
           <el-button
@@ -104,6 +151,7 @@
             circle
             icon="el-icon-delete"
             :title="$t('upload:nonedicom:button:delete')"
+            @click.stop="remove(scope.row)"
           />
         </template>
       </el-table-column>
@@ -112,7 +160,7 @@
     <el-dialog
       v-if="imgObj.visible"
       :visible.sync="imgObj.visible"
-      :title="$t('trials:uploadNonDicoms:dialogTitle:preview')"
+      :title="$t('upload:nonedicom:dialogTitle:preview')"
       append-to-body
       width="565px"
     >
@@ -131,10 +179,161 @@
         />
       </div>
     </el-dialog>
+    <!-- 上传非dicom文件 -->
+    <el-dialog
+      v-if="uploadVisible"
+      :visible.sync="uploadVisible"
+      :close-on-click-modal="false"
+      :title="$t('trials:uploadNonDicoms:dialogTitle:upload')"
+      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)"
+              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)"
+              v-if="!btnLoading"
+            />
+            <div class="btn-select">
+              {{ $t('trials:uploadNonDicoms:button:select') }}
+            </div>
+          </div>
+          <span style="margin-left: 10px">{{
+            $store.state.trials.uploadTip
+          }}</span>
+        </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(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('trials:uploadNonDicoms:table:failedFileCount')"
+          min-width="150"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <el-progress
+              color="#409eff"
+              :percentage="
+                ((scope.row.uploadFileSize * 100) / scope.row.size).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 style="text-align: right; padding: 10px 0px">
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="selectArr.length == 0"
+          :loading="btnLoading"
+          @click="beginUpload"
+        >
+          {{ $t('trials:uploadNonDicoms:action:upload') }}
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
-import { getIRUploadTaskNoneDicomStudyList } from '@/api/load.js'
+import {
+  getIRUploadTaskNoneDicomStudyList,
+  deleteTaskStudy,
+} from '@/api/load.js'
+import { preArchiveStudy, uploadNoneDicomFile } from '@/api/trials'
+import store from '@/store'
 let defaultSearchData = () => {
   return {
     SubjectId: null,
@@ -168,8 +367,43 @@ export default {
       list: [],
       searchData: defaultSearchData(),
       imgObj: { url: '', visible: false, loading: false },
+      uploadVisible: false,
+      fileList: [],
+      selectArr: [],
+      successFileList: [],
+      isFail: false,
+      faccept: ['.jpg', '.jpeg', '.png', '.bmp', '.zip'],
+      fCount: 0,
+      btnLoading: false,
+      currentRow: {},
+      studyMonitorId: null,
     }
   },
+  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)
+          })
+      }
+    },
+    btnLoading() {
+      store.dispatch('trials/setUnLock', this.btnLoading)
+    },
+  },
   mounted() {
     this.getList()
   },
@@ -191,6 +425,112 @@ export default {
         console.log(err)
       }
     },
+    // 扫描待上传文件
+    beginScanFiles(e) {
+      var files = [...e.target.files]
+      var sameFiles = []
+      files.forEach((file) => {
+        var extendName = file.name
+          .substring(file.name.lastIndexOf('.'))
+          .toLocaleLowerCase()
+        if (
+          this.faccept.indexOf(extendName) !== -1 &&
+          this.fileList.findIndex((v) => v.name === file.name) > -1
+        ) {
+          sameFiles.push(file.name)
+        }
+      })
+      var scope = this
+      if (sameFiles.length > 0) {
+        const h = this.$createElement
+        var msg = this.$t(
+          'trials:uploadNonDicoms:message:exsitSameFile'
+        ).replace('xxx', sameFiles.join(', '))
+        this.$msgbox({
+          message: h('div', { style: 'maxHeight:300px;overflow: auto;' }, [
+            h('p', null, msg),
+            h(
+              'p',
+              null,
+              this.$t('trials:uploadNonDicoms:message:isContinueUpload')
+            ),
+          ]),
+          type: 'warning',
+          showCancelButton: true,
+        })
+          .then(() => {
+            scope.pendingUploadQuene(files)
+          })
+          .catch(() => {
+            scope.resetUploadForm()
+          })
+      } else {
+        scope.pendingUploadQuene(files)
+      }
+    },
+    pendingUploadQuene(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) {
+          files[i].id = `${files[i].lastModified}${files[i].name}`
+          let obj = {
+            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,
+            uploadFileSize: 0,
+          }
+          this.fileList.push(obj)
+          this.$refs.filesTable.toggleRowSelection(obj, true)
+        }
+      }
+      this.resetUploadForm()
+    },
+    handleRemoveFile(row) {
+      this.$confirm(this.$t('trials:uploadNonDicoms:message:delete'), {
+        type: 'warning',
+        distinguishCancelAndClose: true,
+      })
+        .then(() => {
+          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(() => {})
+    },
+    resetUploadForm() {
+      this.$nextTick(() => {
+        this.$refs.uploadForm.reset()
+      })
+    },
+    // 打开上传文件弹窗
+    handleUpload(row) {
+      this.fileList = []
+      this.uploadVisible = true
+      this.fCount = 0
+      this.currentRow = { ...row }
+    },
+    resetFileDiaolg() {
+      this.btnLoading = false
+      this.uploadVisible = false
+      this.selectArr = []
+      this.successFileList = []
+      this.OSSclient.close()
+    },
     // 预览文件
     previewFile(row) {
       // window.open(row.FullFilePath, '_blank')
@@ -198,6 +538,181 @@ export default {
       this.imgObj.loading = true
       this.imgObj.visible = true
     },
+    // 删除
+    async remove(item) {
+      try {
+        let confirm = await this.$confirm(
+          this.$t('upload:nonedicom:confirm:delMessage'),
+          {
+            type: 'warning',
+            distinguishCancelAndClose: true,
+            confirmButtonText: this.$t('common:button:confirm'),
+            cancelButtonText: this.$t('common:button:cancel'),
+          }
+        )
+        if (confirm !== 'confirm') return
+        let params = {
+          VisitTaskId: item.VisitTaskId,
+          IsDicom: false,
+          NoneDicomStudyId: item.Id,
+        }
+        let res = await deleteTaskStudy(params)
+        if (res.IsSuccess) {
+          this.getList()
+          this.$message.success(
+            this.$t('trials:uploadImage:message:delSuccess')
+          )
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    // 排序
+    handleSortByColumn(column) {
+      if (column.order === 'ascending') {
+        this.searchData.Asc = true
+      } else {
+        this.searchData.Asc = false
+      }
+      this.searchData.SortField = column.prop
+      this.searchData.PageIndex = 1
+      this.getList()
+    },
+    // 获取待上传文件信息
+    handleSelectionChange(selection) {
+      this.selectArr = selection
+    },
+    // 开始上传文件
+    async beginUpload() {
+      this.btnLoading = true
+      this.isFail = false
+      const fileMaxSize = 1024 * 1024 * 1024 * 1 // 1G
+      var currentFilesSize = 0
+      this.selectArr.forEach((item) => {
+        currentFilesSize += item.size
+      })
+      if (currentFilesSize / fileMaxSize > 1) {
+        // 'Upload file size cannot exceed 1G'
+        this.$alert(this.$t('trials:uploadNonDicoms:message:uploadSize'))
+        this.btnLoading = false
+      } else {
+        this.selectArr.forEach((item) => (item.status = 0))
+        let num = this.selectArr.length > 6 ? 6 : this.selectArr.length
+        let funArr = []
+        let res = await preArchiveStudy({
+          subjectVisitId: this.currentRow.SourceSubjectVisitId,
+          isDicom: false,
+        })
+        if (res.IsSuccess) {
+          this.studyMonitorId = res.Result
+          for (let i = 0; i < num; i++) {
+            funArr.push(this.handleUploadTask(this.selectArr, i))
+          }
+          if (funArr.length > 0) {
+            let res = await Promise.all(funArr)
+          }
+        } else {
+          this.isFail = true
+        }
+      }
+    },
+    // 并发上传
+    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.$route.query.trialId}/TaskImage/${
+        this.currentRow.SubjectId
+      }/${this.currentRow.VisitTaskId}/${new Date().getTime()}_${file.name}`
+      const fileData = await this.fileToBlob(file.file)
+      let res = await this.fileToOss(path, fileData, file)
+      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) => {
+            row.uploadFileSize = 0
+            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, item) {
+      try {
+        let res = await this.OSSclient.multipartUpload(
+          {
+            path,
+            file,
+            speed: true,
+          },
+          (percentage, checkpoint, lastPer) => {
+            item.uploadFileSize += checkpoint.size * (percentage - lastPer)
+            if (item.uploadFileSize > file.fileSize) {
+              item.uploadFileSize = file.fileSize
+            }
+          }
+        )
+        if (res) {
+          return res
+        } else {
+          return false
+        }
+      } catch (err) {
+        console.log(err)
+        return false
+      }
+    },
+    // 非Dicom文件上传归档
+    submitFile(uploadedFileList) {
+      if (!this.uploadVisible) return
+      this.btnLoading = true
+      var params = {
+        trialId: this.$route.query.trialId,
+        subjectVisitId: this.currentRow.SourceSubjectVisitId,
+        noneDicomStudyId: this.currentRow.Id,
+        studyMonitorId: this.studyMonitorId,
+        VisitTaskId: this.currentRow.VisitTaskId,
+        uploadedFileList: uploadedFileList,
+      }
+      uploadNoneDicomFile(params)
+        .then((res) => {
+          this.resetFileDiaolg()
+          this.getList()
+          // 刷新父组件列表
+          this.$emit('getList')
+          this.$message.success(
+            this.$t('trials:uploadNonDicoms:message:uploadedSuccessfully')
+          )
+        })
+        .catch(() => {
+          this.btnLoading = false
+        })
+    },
   },
 }
 </script>
@@ -205,4 +720,43 @@ export default {
 .top {
   margin: 10px 0;
 }
+.upload {
+  display: inline-block;
+  height: 30px;
+  width: 90px;
+  padding: 2px 10px;
+  line-height: 23px;
+  position: relative;
+  text-decoration: none;
+  border-radius: 3px;
+  overflow: hidden;
+  text-align: center;
+  background: #428bca;
+  border-color: #428bca;
+  color: #fff;
+  .select-file {
+    height: 30px;
+    width: 90px;
+    position: absolute;
+    overflow: hidden;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    font-size: 0;
+  }
+  .btn-select {
+    //给显示在页面上的按钮写样式
+    width: 90px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 24px;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none; //pointer-events:none用来控制该标签的点击穿透事件
+  }
+}
 </style>