收集库-移动/大文件上传

src/api/collect/collect.js

@@ -180,6 +180,15 @@ export function FetchInsertSingle(data) {
   })
 }
 
+// 移动
+export function FetchMove(data) {
+  return request({
+    url: 'api/collect/move',
+    method: 'post',
+    data
+  })
+}
+
 export default {
   collectAdd,
   collectEdit,
@@ -198,5 +207,6 @@ export default {
   FetchArchivesAdjust,
   FetchDisbandArchives,
   FetchMergeArchives,
-  FetchInsertSingle
+  FetchInsertSingle,
+  FetchMove
 }

src/views/collectReorganizi/collectionLibrary/mixins/index.js

@@ -67,6 +67,7 @@ export const collectionLibraryCrud = {
         this.$parent.$parent.getTableDisplayFieldsLoading = true
         this.parentsId = this.parentsData.parentsAnjuanId
       } else if (this.isTitleType === 6) {
+        console.log('isTitleType', this.isTitleType)
         // 原文
         if (this.selectedCategory.arrangeType === 1) {
           this.parentsId = this.parentsData.parentsAnjuanId

src/views/collectReorganizi/collectionLibrary/module/collectMoveFile/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 移动 -->
-  <el-dialog class="collectMoveFile-dialog" title="移动" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="collectMoveFileVisible">
+  <el-dialog class="collectMoveFile-dialog" title="移动" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="collectMoveFileVisible" :before-close="handleCloseDialog">
     <div class="collectMove-main">
       <div class="collectMove-left">
         <CategoryTree ref="categoryTree" @nodeClick="handleNodeClick" />
@@ -56,21 +56,19 @@
           />
         </div>
         <div class="move-checked">
-          <el-checkbox-group v-model="checkList">
           <div class="checkbox-style">
             <span>移动电子文件</span>
-              <el-checkbox label="移动电子文件" />
+            <el-checkbox v-model="moveFile" label="移动电子文件" disabled />
           </div>
           <div class="checkbox-style">
             <span>保留原条目</span>
-              <el-checkbox label="保留原条目" />
+            <el-checkbox v-model="isReserve" label="保留原条目" />
           </div>
-          </el-checkbox-group>
         </div>
       </div>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button type="text" @click="collectMoveFileVisible = false">取消</el-button>
+      <el-button type="text" @click="handleCloseDialog">取消</el-button>
       <el-button type="primary" @click.native="handleComfireCollectMoveFile">确定</el-button>
     </div>
   </el-dialog>
@@ -78,7 +76,7 @@
 
 <script>
 import CategoryTree from '@/views/components/categoryTree'
-import { FetchInitCategoryViewTable, FetchInitCategoryView } from '@/api/collect/collect'
+import { FetchInitCategoryViewTable, FetchInitCategoryView, FetchMove } from '@/api/collect/collect'
 export default {
   name: 'CollectMoveFile',
   components: { CategoryTree },
@@ -108,6 +106,7 @@ export default {
       currentCategory: null,
       currentLevel: null,
       collectMoveFileVisible: false,
+      toCategoryLevel: null,
       loading: false,
       arrySort: [],
       tableData: [],
@@ -118,7 +117,8 @@ export default {
         size: 10,
         total: 0
       },
-      checkList: []
+      moveFile: true,
+      isReserve: false
     }
   },
   mounted() {
@@ -192,7 +192,45 @@ export default {
       this.moveSelections = selection
     },
     handleComfireCollectMoveFile() {
+      if (this.moveSelections.length > 1) {
+        this.$message('该操作只可勾选唯一目标条目，请先确认！')
+        return false
+      }
+      if (this.currentCategory.arrangeType === 1) {
+        this.toCategoryLevel = 3
+      } else if (this.currentCategory.arrangeType === 2) {
+        this.toCategoryLevel = 2
+      } else {
+        this.toCategoryLevel = 1
+      }
+      if (this.collectLevel === 2) {
+        if (this.toCategoryLevel === 3) {
+          this.$message('案卷级的案卷不可移动到文件级，请先确认！')
+          return false
+        }
+      }
+      const archivesIds = this.selections.map(item => item.id)
+      const toArchivesIds = this.moveSelections.map(item => item.id)
+      const params = {
+        'isReserve': this.isReserve, // 是否保留原条目
+        'categoryId': this.selectedCategory.id, // 门类id
+        'categoryLevel': this.collectLevel, // 门类级别
+        'toCategoryId': this.currentCategory.id, // 移动到的门类id
+        'toCategoryLevel': this.toCategoryLevel, // 移动到的门类级别
+        'archivesIds': archivesIds, // 移动的档案id
+        'toArchivesIds': toArchivesIds // 移动到的档案id (选填)
+      }
+      console.log(params)
+      FetchMove(params).then((res) => {
+        console.log(res)
+        if (res.code !== 500) {
+          this.$message.success('移动成功')
+          this.$emit('close-dialog')
+        } else {
+          this.$message.error('移动失败')
+        }
         this.collectMoveFileVisible = false
+      })
     },
     handleSizeChange(size) {
       this.page.size = size
@@ -202,6 +240,17 @@ export default {
     handleCurrentPage(val) {
       this.page.page = val
       this.getViewTableList()
+    },
+    handleCloseDialog(done) {
+      // 重置表单数据
+      this.query.search = null
+      this.tableDisplayFields = []
+      this.tableData = []
+      this.$refs.table.clearSelection()
+      this.moveSelections = []
+      this.collectMoveFileVisible = false
+      // 关闭弹框
+      // done()
     }
   }
 }
@@ -250,13 +299,11 @@ export default {
       }
     }
     .move-checked{
+      display: flex;
+        justify-content: flex-start;
       padding: 0 30px;
       height: 42px;
       line-height: 42px;
-      .el-checkbox-group{
-        display: flex;
-        justify-content: flex-start;
-      }
       .checkbox-style{
         font-size: 14px;
         color: #0C0E1E;
@@ -264,6 +311,10 @@ export default {
       }
       .el-checkbox{
         margin-right: 20px;
+        ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner{
+          border-color: #0348f3;
+          background-color: #0348f3;
+        }
         ::v-deep .el-checkbox__label{
           opacity: 0;
           margin-left: -100px;

src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/bigUpload.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <!--上传组件-->
+    <el-upload
+      class="upload-demo"
+      :action="uploadUrl"
+      :auto-upload="false"
+      :on-change="handleChange"
+      :before-upload="handleBeforeUpload"
+      :on-progress="handleProgress"
+    >
+      <el-button slot="trigger">选取文件</el-button>
+      <!--上传文件按钮-->
+      <el-button style="margin-left: 10px" type="primary" :loading="uploading" :disabled="files.length === 0" @click="handleUpload">
+        上传文件
+      </el-button>
+      <el-progress :percentage="percent" />
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      files: [], // 选中的文件列表
+      uploading: false, // 是否正在上传
+      percent: 0, // 上传进度
+      uploadUrl: this.baseApi + '/api/collect/uploadFiles' // 上传地址
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  methods: {
+    // 切片上传
+    async upload(file) {
+      const chunkSize = 1024 * 1024 // 每个块的大小为 1MB
+      const fileSize = file.size // 文件大小
+      const chunks = Math.ceil(fileSize / chunkSize) // 总块数
+      const tasks = [] // 上传任务数组
+      let uploaded = 0 // 已上传块数
+
+      // 文件切割
+      for (let i = 0; i < chunks; i++) {
+        const start = i * chunkSize
+        const end = Math.min(start + chunkSize, fileSize)
+
+        tasks.push(
+          new Promise((resolve, reject) => {
+            const formData = new FormData()
+            formData.append('chunk_index', i) // 块编号
+            formData.append('chunk_count', chunks) // 总块数
+            formData.append('file_id', file.id) // 文件ID
+            formData.append('chunk_data', file.slice(start, end)) // 块数据
+
+            axios
+              .post(this.uploadUrl, formData) // 上传块数据
+              .then(res => {
+                uploaded++
+                this.percent = Math.floor((uploaded / chunks) * 100)
+                console.log(this.percent)
+                resolve()
+              })
+              .catch(err => {
+                reject(err)
+              })
+          })
+        )
+      }
+
+      // 待所有块上传完成后，发送合并请求
+      await Promise.all(tasks)
+      const res = await axios.post(this.uploadUrl, { file_id: file.id, chunks })
+
+      // 上传成功，返回文件URL
+      if (res.status === 200) {
+        return `${this.uploadUrl}/${file.id}`
+      } else {
+        throw new Error(res.data.message)
+      }
+    },
+    handleChange(files) {
+      this.files = files
+    },
+    async handleUpload() {
+      console.log('handleUpload')
+      try {
+        console.log('handleUpload2')
+        this.uploading = true
+        console.log(this.files)
+        const url = await this.upload(this.files)
+        // 文件上传成功，将url展示给用户
+        this.$message.success(`文件${this.files.name}上传成功！URL：${url}`)
+        // for (let i = 0; i < this.files.length; i++) {
+        //   const file = this.files[i]
+        //   console.log('file', file)
+
+        // }
+      } catch (err) {
+        console.log('handleUpload3')
+        this.$message.error(`文件上传失败！${err.message}`)
+      } finally {
+        console.log('handleUpload4')
+        this.uploading = false
+      }
+    },
+    handleBeforeUpload() {
+      // TODO: 检查文件大小、类型等
+    },
+    handleProgress(event, file) {
+      // 显示上传进度
+      this.percent = Math.floor((event.loaded / event.total) * 100)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-demo{
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 120px;
+  margin: 20px 0 30px 0;
+  .el-progress{
+    position: absolute;
+    left: 0;
+    bottom: -20px;
+  }
+}
+</style>

src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/index.vue

@@ -10,10 +10,11 @@
             {{ item.name }}
             <i class="el-icon-close" @click="deleteFile(item)" />
           </div>
-          <div class="upload-input">
+          <div v-if="uploadType === 0" class="upload-input">
             <input ref="fileInput" :key="key" type="file" :multiple="isMultiple" :accept="uploadType === 2 ? '.zip' :''" @change="handleFileChange">
             <div class="upload-zip"><i class="iconfont icon-shangchuan2" />点击上传</div>
           </div>
+          <BigUpload v-else-if="uploadType === 1" />
           <div v-if="uploadType === 2" class="el-upload__tip">上传限制文件类型：zip</div>
           <div v-if="uploadType === 1" class="el-upload__tip">上传限制文件大小：最大10GB/个</div>
         </div>
@@ -60,10 +61,11 @@
 import { FetchAddArchivesFile } from '@/api/collect/collect'
 import { getCurrentTime } from '@/utils/index'
 import { archivesUpload } from '@/utils/upload'
+import BigUpload from './bigUpload'
 import { mapGetters } from 'vuex'
 export default {
   name: 'UploadOriginal',
-  components: {},
+  components: { BigUpload },
   props: {
     selectedCategory: {
       type: Object,
@@ -125,13 +127,13 @@ export default {
       this.key++
       let maxMessage
       let maxSize
-      if (this.uploadType === 0) {
-        maxSize = 10 * 1024 * 1024
-        maxMessage = '上传文件大小不能超过 10MB!'
-      } else if (this.uploadType === 1) {
-        maxSize = 10 * 1024 * 1024 * 1024
-        maxMessage = '上传文件大小不能超过 10GB!'
-      }
+      // if (this.uploadType === 0) {
+      //   maxSize = 10 * 1024 * 1024
+      //   maxMessage = '上传文件大小不能超过 10MB!'
+      // } else if (this.uploadType === 1) {
+      //   maxSize = 10 * 1024 * 1024 * 1024
+      //   maxMessage = '上传文件大小不能超过 10GB!'
+      // }
       if (this.file && this.file.size > maxSize) {
         this.$message.warning(maxMessage)
         this.fileList = []