[add] 文档拆分模块

2023-08-15 18:20:08 +08:00
parent ff0570abd2
commit 74ac8c07d0
11 changed files with 929 additions and 132 deletions
@@ -0,0 +1,150 @@
+<template>
+  <div class="split-import-upload">
+    <a-upload
+      accept=".zip"
+      :disabled="disabled"
+      class="ant-upload-list"
+      name="file"
+      :list-type="listType"
+      :file-list="myFileList"
+      :multiple="false"
+      :action="uploadAction"
+      :headers="headers"
+      :before-upload="beforeUpload"
+      :remove='remove'
+      @change="handleChange">
+      <div class="operator-text">
+        <a-icon type="export" :rotate="-90"/>
+        拆分文件
+      </div>
+    </a-upload>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+export default {
+  name: 'SplitUpload',
+  props: ['disabled', 'listType'],
+  data () {
+    return {
+      visible: false,
+      uploadAction: window._CONFIG.domianURL + '/sys/common/upload',
+      myFileList: [],
+      fileList: [],
+      fileTypeStatus: false,
+      headers: {}
+    }
+  },
+  created () {
+    const token = Vue.ls.get(ACCESS_TOKEN)
+    this.headers = { 'X-Access-Token': token }
+  },
+  methods: {
+    beforeUpload (file, fileList) {
+      console.log('file', this.accept, file, fileList, this.myFileList)
+      this.fileTypeSatus = false
+      if (this.myFileList && this.myFileList.length >= 1) {
+        this.$message.warning(this.$t('onlyOnefileUploaded'))
+        return false
+      } else {
+        const suffix = file.name.split('.')
+        const acceptSuffix = suffix[suffix.length - 1]
+        if (acceptSuffix.toLowerCase() === 'zip') {
+          this.fileTypeSatus = true
+          this.$message.destroy()
+          // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
+          this.errorMessage = file.name + '文件大小超出100MB限制, 请压缩或降低文件质量!'
+          // }
+        }
+      }
+    },
+    remove () {
+      this.fileTypeSatus = true
+    },
+    handleChange (info) {
+      const { file } = info
+      const status = info.file.status
+      info.fileList.forEach((val, index) => {
+        if (val.response && !val.response.result) {
+          this.$message.error(val.response.message)
+          info.fileList.splice(index, 1)
+        }
+      })
+      if (this.fileTypeSatus) {
+        if (file.size > 100000000) {
+          this.$message.error(this.errorMessage)
+        } else {
+          if (status === 'error') {
+            this.$emit('uploadSuccess', this.fileList)
+            this.$message.destroy()
+            this.$message.error(`${info.file.name}` + this.$t('fileUploadFailed'))
+          } else if (status === 'removed') {
+            this.myFileList = info.fileList
+            this.fileList = []
+            this.myFileList.forEach((res) => {
+              if (res.response) {
+                this.fileList.push(res.response.result)
+              } else {
+                this.fileList.push(res)
+              }
+            })
+            this.$emit('uploadSuccess', this.fileList)
+            this.$message.destroy()
+            this.$message.success(`${info.file.name}` + this.$t('deletedSuccessfully'))
+          } else if (status === 'done') {
+            this.fileList = []
+            this.myFileList = info.fileList
+            this.myFileList.forEach((res) => {
+              if (res.response) {
+                this.fileList.push(res.response.result)
+              } else {
+                this.fileList.push(res)
+              }
+            })
+            if (this.myFileList.length > 0) {
+              this.$emit('uploadSuccess', this.fileList)
+              this.$message.destroy()
+              this.$message.success(`${info.file.name}` + this.$t('uploadSuccessful'))
+            }
+          } else if (status === 'uploading') {
+            this.myFileList = info.fileList
+            this.$emit('uploadSuccess')
+          }
+        }
+      } else if (!this.fileTypeSatus && this.myFileList.length < 1) {
+        this.$message.warning(this.$t('typeCannotUploaded'))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.split-import-upload {
+  /deep/ .ant-upload-list-item {
+    position: relative;
+    height: 22px;
+    margin-top: -22px;
+    font-size: 14px;
+    margin-right: 100px;
+  }
+  /deep/ .ant-upload-list-item-info {
+    span {
+      display: flex;
+      justify-content: start;
+      text-align: right;
+
+      .ant-upload-list-item-name {
+        margin-right: 20px;
+        max-width: 800px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>