n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/NstcFileUpload/NstcFileUpload.vue

@@ -1,989 +1,989 @@
-<!--
-  功能：    新版UI文件上传
-  作者：    lihao
-  创建时间： 2021-02-19
--->
-<template>
-  <div class="nstc-file-upload">
-    <div v-if="pattern !== 'text'" class="nstc-file-upload-head">
-      <el-button
-        v-if="!views"
-        type="primary"
-        class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
-        :disabled="isDisabled"
-        @click="add"
-      >
-        新增
-      </el-button>
-      <el-button
-        v-if="tableData.length !== 0 && !views"
-        class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
-        @click="batchDownload"
-        >下载
-      </el-button>
-      <el-button
-        v-if="tableData.length !== 0 && !views"
-        class="nstc-g6-common-btn-4 nstc-g6-common-btn-size-s"
-        :disabled="isDisabled"
-        @click="batchDelete"
-      >
-        删除
-      </el-button>
-    </div>
-    <div v-else class="nstc-file-upload-head">
-      <el-button
-        v-if="tableData.length !== 0 && !views"
-        class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
-        @click="batchDownload"
-        >下载
-      </el-button>
-    </div>
-    <div class="nstc-file-upload-table">
-      <el-form ref="form" :rules="model.rules" :model="model">
-        <el-table :data="tableData" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="附件类型" align="left" min-width="180">
-            <template slot-scope="scope">
-              <!-- !textFlag(scope.row.uuid,scope.row.filePath) -->
-              <el-select
-                v-if="!textFlag(scope.row.uuid, scope.row.filePath) && !views"
-                v-model="scope.row.fileType"
-              >
-                <el-option
-                  v-for="(item, index) in fileTypeList"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-              <span v-else>{{
-                getFileTypeLabel(scope.row.fileType) || '--'
-              }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="附件名称" align="left" min-width="180">
-            <template slot-scope="scope">
-              <el-form-item
-                v-if="!textFlag(scope.row.uuid, scope.row.filePath) && !views"
-                :prop="'tableData.' + scope.$index + '.attachmentName'"
-                :rules="model.rules.attachmentName"
-              >
-                <el-input
-                  v-model.trim="scope.row.attachmentName"
-                  placeholder="请输入附件名称"
-                  clearable
-                  :maxlength="attachmentMaxlength"
-                />
-              </el-form-item>
-
-              <span v-else>{{ scope.row.attachmentName || '--' }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="附件上传" align="left" min-width="180">
-            <template slot-scope="scope">
-              <el-upload
-                v-if="pattern !== 'text' && !views"
-                :ref="`nstc_g6_common_upload_index_${scope.$index}`"
-                action=""
-                v-bind="$attrs"
-                :auto-upload="false"
-                :before-upload="
-                  function (file) {
-                    return beforeUpload(file, scope.row)
-                  }
-                "
-                :on-exceed="handleExceed"
-                :on-change="
-                  (file, fileLists) => {
-                    handleChange(file, fileLists, scope.$index, scope.row)
-                  }
-                "
-                :file-list="fileList"
-                :show-file-list="false"
-                :http-request="httpRequest"
-                v-on="$listeners"
-              >
-                <el-input
-                  v-model="scope.row.fileName"
-                  placeholder="请选择附件"
-                  readonly
-                  @click="getUploadIndex(scope.$index)"
-                >
-                  <div slot="suffix" class="input-upload">
-                    <img :src="inputUploadSvg" alt="" />
-                  </div>
-                </el-input>
-              </el-upload>
-              <span v-else>{{ scope.row.fileName || '--' }}</span>
-            </template>
-            <el-input />
-          </el-table-column>
-          <el-table-column
-            label="上传时间"
-            prop="time"
-            align="left"
-            width="220px"
-          >
-            <template slot-scope="scope">
-              <span>{{
-                (scope.row.time || scope.row.createTime) | parseTimeFormat
-              }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="上传人" prop="user" align="left">
-            <template slot-scope="scope">
-              <span>{{ scope.row.user || scope.row.creator }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="pattern !== 'text'"
-            label="上传进度"
-            align="left"
-            width="300px"
-          >
-            <template slot-scope="scope">
-              <div class="nstc-el-progress-box">
-                <el-progress
-                  v-show="showProgress"
-                  :percentage="
-                    (scope.row.uuid || scope.row.filePath) &&
-                    scope.row.status !== 'exception'
-                      ? 100
-                      : scope.row.percentage
-                  "
-                  :status="
-                    scope.row.uuid || scope.row.filePath
-                      ? 'success'
-                      : scope.row.status
-                  "
-                  :width="100"
-                />
-              </div>
-              <span
-                v-if="scope.row.status === 'exception'"
-                class="nstc-file-reload"
-                @click="reUploadAction(scope.$index)"
-                >重新上传</span
-              >
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="left" width="100px">
-            <template slot-scope="scope">
-              <div class="nstc-file-upload-opt">
-                <!-- v-if="false" -->
-                <!--  -->
-                <img
-                  v-if="showViews"
-                  :src="lookDiabled"
-                  alt=""
-                  @click="lookFile(scope.$index)"
-                />
-                <img
-                  v-if="
-                    (scope.row.uuid || scope.row.filePath) && pattern === 'text'
-                  "
-                  :src="downloadSvg"
-                  alt=""
-                  @click="downLoadFile(scope.row)"
-                />
-                <!-- <img
-                  v-if="pattern !== 'text'"
-                  :src="deleteSvg"
-                  alt=""
-                  @click="deleteFile(scope.$index)"
-                /> -->
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-form>
-    </div>
-    <DialogCustom
-      v-model="dialogShowFlag"
-      :show-footer="false"
-      :title="dialogTitle"
-      @confirm="handleConfirm"
-    >
-      <span>查看文件</span>
-    </DialogCustom>
-  </div>
-</template>
-
-<script>
-import lookSvg from './img/look.svg'
-import lookDiabled from './img/look-diabled.svg'
-import downloadSvg from './img/download.svg'
-import deleteSvg from './img/delete.svg'
-import inputUploadSvg from './img/inputUpload.svg'
-import addFile from './img/addFile.svg'
-import deleteFileSvg from './img/deleteFile.svg'
-import DialogCustom from '../NstcDialog/NstcDialog'
-// fileDownloadGdt
-
-import { parseTime } from '../../utils/parseTime'
-import auth from '../../utils/auth'
-import axios from 'axios'
-
-export default {
-  name: 'NstcFileUpload',
-  components: {
-    DialogCustom
-  },
-  filters: {
-    parseTimeFormat: function (val) {
-      if (val !== '' && val) {
-        return parseTime(new Date(val), '{y}-{m}-{d}')
-      } else {
-        return ''
-      }
-    }
-  },
-  props: {
-    attachmentMaxlength: {
-      type: String,
-      default: '64'
-    },
-    views: {
-      //是否浏览模式
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    pattern: {
-      type: String,
-      default: () => {
-        return 'normal'
-      }
-    },
-    url: {
-      type: String,
-      default: null
-    },
-    batchDownloadUrl: {
-      type: String,
-      default: null
-    },
-    httpMethod: {
-      type: String,
-      default: 'post'
-    },
-    showLength: {
-      type: Boolean,
-      default: true
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      lookSvg,
-      lookDiabled,
-      downloadSvg,
-      deleteSvg,
-      inputUploadSvg,
-      addFile,
-      deleteFileSvg,
-      showViews: false,
-      model: {
-        rules: {
-          attachmentName: {
-            type: 'string',
-            required: true,
-            message: '必填字段',
-            trigger: 'change'
-          }
-        },
-        tableData: []
-      },
-      fileList: [],
-      tableSelectionData: [],
-      tableSelectionData2: [],
-      fileTypeList: [{ label: '附件', value: 1 }],
-      tempFile: {
-        id: '',
-        attachmentName: '',
-        fileName: '',
-        remark: null,
-        fileType: 1,
-        type: '',
-        time: '',
-        user: '',
-        progress: 0,
-        uuid: '',
-        status: null,
-        fileObj: '',
-        percentage: 0
-      },
-      dialogTitle: '查看',
-      dialogShowFlag: false,
-      currentUploadIndex: null,
-      showProgress: true,
-      dialogShowDelete: false,
-      dialogDeleteTitle: '提示'
-    }
-  },
-  computed: {
-    tableData: {
-      get() {
-        this.value.map((item) => {
-          item.fileType = item.fileType == '' ? '' : Number(item.fileType)
-          item.status == null ? (item.status = 0) : ''
-          return item
-        })
-        this.model.tableData = this.value
-        console.log('this.model=====', this.model.tableData)
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    uploadFlag() {
-      return this.tableData.filter((i) => i.uuid).length !== 0
-    }
-  },
-  beforeUpdate() {
-    this.showProgress = false
-  },
-  updated() {
-    setTimeout(() => {
-      this.showProgress = true
-    }, 1)
-  },
-  methods: {
-    beforeUpload(file, row) {
-      console.log(file, row)
-      // if(!row.attachmentName) {
-      //   this.$message({
-      //       type: "warning",
-      //       message: "请先输入附件名称再上传",
-      //     });
-      //     return false
-      // }
-    },
-    checkValidate() {
-      this.$refs['form'].validate((res) => {
-        return res
-      })
-    },
-    cancel(i) {
-      this.tableData[i].percentage = 0
-      console.log('111')
-    },
-    /**
-     * 判断当前是不是文档模式
-     * 1， pattern 等于 text
-     * 2   上传成功
-     */
-    textFlag(uuid, filePath) {
-      console.log(uuid, filePath)
-      if (this.pattern === 'text') {
-        return true
-      } else {
-        return !!uuid || !!filePath
-      }
-    },
-
-    /**
-     * 新增文件
-     */
-    add() {
-      this.tableData.unshift(
-        JSON.parse(
-          JSON.stringify({
-            id: new Date().getTime(),
-            attachmentName: '',
-            fileName: '',
-            remark: null,
-            fileType: 1,
-            type: '',
-            time: '',
-            user: '',
-            progress: 0,
-            uuid: '',
-            status: null,
-            fileObj: '',
-            percentage: 0
-          })
-        )
-      )
-    },
-
-    /**
-     * 表格选择变化
-     */
-    handleSelectionChange(data) {
-      this.tableSelectionData = data
-    },
-
-    /**
-     * 查看文件
-     */
-    lookFile() {
-      // this.dialogShowFlag = true;
-    },
-
-    /**
-     * 下载文件
-     */
-    downLoadFile(data) {
-      console.log(data)
-      // const aEl = document.createElement('a')
-      let uuid = data.uuid || data.filePath
-      const p = encodeURIComponent(uuid)
-      const n = encodeURIComponent(data.fileName)
-
-      axios({
-        method: this.httpMethod,
-        url: `${this.url}/download/${p}/${n}`,
-        // 这里可以在header中加一些东西，比如token
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${auth.getCookieToken()}`,
-          timestamp: Date.now(),
-          OperationDesc: 'yYarJp',
-          requestKey: Math.round(Math.random() * 1000000000)
-        },
-        responseType: 'blob'
-      })
-        .then((res) => {
-          console.log('response: ', res)
-          let blob = new Blob([res.data], {
-            type: 'application/octet-stream;charset=UTF-8'
-          })
-          let fileName = decodeURI(
-            res.headers['content-disposition'].split(';')[1].split('=')[1]
-          )
-          if (window.navigator.msSaveBlob) {
-            // ie
-            window.navigator.msSaveOrOpenBlob(blob, fileName)
-            return
-          }
-          let elink = document.createElement('a')
-          elink.style.display = 'none'
-          elink.href = window.URL.createObjectURL(blob)
-          elink.download = data.fileName
-          document.body.appendChild(elink)
-          elink.click()
-          URL.revokeObjectURL(elink.href)
-          document.body.removeChild(elink)
-        })
-        .catch((error) => {
-          console.log('response: ', error)
-        })
-    },
-
-    /**
-     * 删除文件
-     */
-    deleteFile(index) {
-      this.$confirmTip({
-        type: 'info',
-        title: '确认删除该文件？',
-        info: '',
-        button: {
-          ok: '提交',
-          cancel: '取消'
-        }
-      }).then(() => {
-        this.tableData.splice(index, 1)
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
-        })
-      })
-    },
-
-    /**
-     * 弹框确认事件
-     */
-    handleConfirm() {},
-
-    /**
-     * 批量下载
-     */
-    batchDownload() {
-      if (this.tableSelectionData.length === 1) {
-        // 单条下载
-        this.downLoadFile(this.tableSelectionData[0])
-      } else if (this.tableSelectionData.length > 1) {
-        const files = []
-        // 判断是否有文件未上传
-        console.log('this.tableSelectionData====', this.tableSelectionData)
-        let isNoUpload = this.tableSelectionData.some((item) => {
-          !item.uuid == true
-        })
-        console.log('文件判断=======', isNoUpload)
-        if (isNoUpload) {
-          // 阻断下载
-          this.$message({
-            type: 'warning',
-            message: '勾选文件中有文件未上传'
-          })
-          return
-        }
-        this.tableSelectionData.map((item) => {
-          files.push({
-            uuid: item.uuid || item.filePath,
-            fileName: item.fileName
-          })
-        })
-
-        axios({
-          url: this.batchDownloadUrl,
-          method: 'POST',
-          data: JSON.stringify(files),
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${auth.getCookieToken()}`,
-            timestamp: Date.now(),
-            OperationDesc: 'yYarJp',
-            requestKey: Math.round(Math.random() * 1000000000)
-          },
-          responseType: 'blob'
-        })
-          .then((res) => {
-            let blob = new Blob([res.data], {
-              type: 'application/octet-stream;charset=UTF-8'
-            })
-            let fileName = decodeURI(
-              res.headers['content-disposition'].split(';')[1].split('=')[1]
-            )
-            if (window.navigator.msSaveBlob) {
-              // ie
-              window.navigator.msSaveOrOpenBlob(blob, fileName)
-              return
-            }
-            let elink = document.createElement('a')
-            elink.style.display = 'none'
-            elink.href = window.URL.createObjectURL(blob)
-            elink.download = '批量下载.zip'
-            document.body.appendChild(elink)
-            elink.click()
-            URL.revokeObjectURL(elink.href)
-            document.body.removeChild(elink)
-          })
-          .catch((error) => {
-            console.log('response: ', error)
-          })
-      } else {
-        this.$message({
-          type: 'warning',
-          message: '请选择要下载的附件'
-        })
-      }
-    },
-
-    /**
-     * 批量删除
-     */
-    batchDelete() {
-      if (this.tableSelectionData.length !== 0) {
-        this.dialogShowDelete = true
-        this.$confirmTip({
-          type: 'error',
-          title: '确认要删除所选附件吗？',
-          info: '删除后数据不可恢复',
-          button: {
-            ok: '提交',
-            cancel: '取消'
-          }
-        }).then(() => {
-          this.tableData = this.tableData.filter((i) => {
-            return !this.tableSelectionData.includes(i)
-          })
-          setTimeout(() => {
-            this.tableSelectionData = []
-          }, 30)
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          })
-        })
-      } else {
-        this.$message({
-          type: 'warning',
-          message: '请选择要删除的附件'
-        })
-      }
-    },
-    handleConfirmDelete() {
-      this.tableData = this.tableData.filter((i) => {
-        return !this.tableSelectionData.includes(i)
-      })
-      setTimeout(() => {
-        this.tableSelectionData = []
-      }, 30)
-      this.dialogShowDelete = false
-      this.$message({
-        type: 'success',
-        message: '删除成功!'
-      })
-    },
-
-    /**
-     * 获取文件类型
-     */
-    getFileTypeLabel(type) {
-      const t = this.fileTypeList.filter((i) => {
-        return Number(type) === Number(i.value)
-      })
-      if (t.length === 1) {
-        return t[0].label
-      } else {
-        return type
-      }
-    },
-
-    /**
-     * 附件上传
-     */
-    httpRequest(fileObj) {
-      const isLt2M = fileObj.file.size / 1024 / 1024 < 20
-      if (!isLt2M) {
-        this.$message({
-          message: '上传文件大小不能超过 20MB!',
-          type: 'warning'
-        })
-        this.tableData[this.currentUploadIndex].percentage = 75
-        this.tableData[this.currentUploadIndex].status = 'exception'
-        this.$emit('upload_over', {})
-        return
-      }
-      const that = this
-      const formData = new FormData()
-      this.tableData[this.currentUploadIndex].fileSize = fileObj.file.size
-      // this.tableData[this.currentUploadIndex].fileName = fileObj.file.name
-      this.tableData[this.currentUploadIndex].type = fileObj.file.type
-
-      formData.append('file', fileObj.file)
-      axios(`${this.url}/upload`, formData, {
-        onUploadProgress: (progressEvent) => {
-          let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0
-          // 调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
-          that.tableData[this.currentUploadIndex].percentage = percent
-        }
-      })
-        .then((res) => {
-          // 上传成功
-          // that.tableData[this.currentUploadIndex].percentage = 100
-          console.log('上传文件1111', res)
-          this.tableData[this.currentUploadIndex].time = parseTime(
-            res[0][`time`],
-            '{y}-{m}-{d} {h}:{i}:{s}'
-          )
-          this.tableData[this.currentUploadIndex].uuid = res[0][`uuid`]
-          this.tableData[this.currentUploadIndex].status = 'success'
-          this.tableData[this.currentUploadIndex].user = res[0][`user`]
-          this.tableData[this.currentUploadIndex].creator = res[0][`creator`]
-          res[0][`createTime`] = parseTime(
-            res[0][`createTime`],
-            '{y}-{m}-{d} {h}:{i}:{s}'
-          )
-          this.tableData[this.currentUploadIndex].createTime =
-            res[0][`createTime`]
-          this.$emit('upload_over', {})
-        })
-        .catch(() => {
-          // 上传失败
-          // this.resetUpload(this.currentUploadIndex)
-          that.tableData[this.currentUploadIndex].percentage = 75
-          this.tableData[this.currentUploadIndex].status = 'exception'
-          this.$emit('upload_over', {})
-        })
-      // setTimeout(function () {
-      //   //去调用了这个cancel()方法，没有完成请求的接口便会停止请求
-      //   self.cancel()
-      // }, 1)
-    },
-
-    /**
-     * 文件超出个数限制
-     */
-    handleExceed() {
-      this.$message({
-        type: 'error',
-        message: '最多只能选择一个文件'
-      })
-    },
-
-    /**
-     * 文件变化
-     * file, fileList
-     */
-    handleChange(file, fileLists, index, row) {
-      // if(!row.attachmentName) {
-      //     this.$message({
-      //       type: "warning",
-      //       message: "请先输入附件名称再上传",
-      //     });
-      //     return false
-      // }
-      this.tableData[index].fileObj = file
-      this.tableData[index].fileName = file.name
-      this.tableData[index].user = ''
-      this.tableData[index].percentage = 0
-      this.tableData[index].uuid = ''
-      if (fileLists.length > 1) {
-        fileLists.splice(0, 1)
-      }
-
-      this.tableSelectionData2 = []
-      this.tableSelectionData2.push(this.tableData[index])
-      this.validFile(index)
-    },
-
-    /**
-     * 获取当前上传的文件的index
-     */
-    getUploadIndex(index) {
-      this.currentUploadIndex = index
-    },
-
-    strLen(str) {
-      let len = 0
-      for (let i = 0; i < str.length; i++) {
-        let c = str.charCodeAt(i)
-        //单字节加1
-        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
-          len++
-        } else {
-          len += 3
-        }
-      }
-      return len
-    },
-
-    /**
-     * 校验文件上传
-     */
-    validFile(index) {
-      // if(this.tableSelectionData.length == 0) {
-      //   return this.$message.warning('请选择数据')
-      // }
-      let t = this.tableSelectionData2.filter((item) => {
-        // return this.strLen(item.fileName) > 60;
-        return item.fileName.length > 60
-      })
-      if (t.length) {
-        this.$message({
-          type: 'error',
-          message: '文件名不能超过64个字，请重新上传!'
-        })
-        // this.tableData[index].status = 'exception';
-        return null
-      }
-      let temp = this.tableSelectionData2.filter((item) => {
-        const names = item.fileName ? item.fileName.split('.') : []
-        let nameType = names.length ? names[names.length - 1] : ''
-        return ['exe', 'bin'].includes(nameType)
-      })
-      if (temp.length) {
-        this.$message({
-          type: 'error',
-          message: '暂不支持 .exe, .bin等格式文件格式上传！'
-        })
-        this.tableData[index].fileName = ''
-        return null
-      }
-      this.tableData[index].percentage = 50
-      this.submitFile()
-    },
-
-    /**
-     * 上传文件
-     */
-    submitFile() {
-      // 获得将要上传的文件
-      const uploadFileArr = []
-      this.tableSelectionData2.map((item) => {
-        // 没有上传文件 并且选择了文件
-        if (!item.uuid && item.fileObj) {
-          uploadFileArr.push({
-            ref_index: this.tableData.findIndex(
-              (objitem) => objitem.id === item.id
-            ),
-            data: item
-          })
-        }
-      })
-      // 执行
-      uploadFileArr.length &&
-        this.uploadAction(uploadFileArr).then(() => {
-          console.log('上传文件完成')
-        })
-    },
-
-    /**
-     * 文件上传动作
-     */
-    uploadAction(fileArr) {
-      let uploadedLength = 0
-      return new Promise((resolve) => {
-        // 启动上传
-        uploadedLength++
-        this.currentUploadIndex = fileArr[0].ref_index
-        this.$refs[
-          `nstc_g6_common_upload_index_${this.currentUploadIndex}`
-        ].submit()
-
-        // 监听上传完毕
-        this.$on('upload_over', () => {
-          if (uploadedLength === fileArr.length) {
-            resolve()
-          } else {
-            uploadedLength++
-            this.currentUploadIndex = fileArr[uploadedLength - 1].ref_index
-            this.$refs[
-              `nstc_g6_common_upload_index_${this.currentUploadIndex}`
-            ].submit()
-          }
-        })
-      })
-    },
-
-    /**
-     * 重置
-     */
-    resetUpload(index) {
-      this.$refs[`nstc_upload_index_${index}`].clearFiles()
-      this.tableData[index].fileName = ''
-      this.tableData[index].fileSize = ''
-      this.tableData[index].percentage = 0
-      this.tableData[index].fileType = 1
-      this.tableData[index].fileFormat = ''
-      this.tableData[index].remark = ''
-      this.tableData[index].state = '1'
-      this.tableData[index].createTime = ''
-      this.tableData[index].uuid = ''
-    },
-
-    /**
-     * 发生错误重新上传
-     */
-    reUploadAction(index) {
-      console.log('附件上传', index)
-      // this.tableData[index].percentage = 0;
-      // this.tableData[index].percentage = 50;
-      this.$refs[`nstc_g6_common_upload_index_${index}`].submit()
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.nstc-file-upload {
-  .input-upload {
-    height: 100%;
-  }
-
-  .cell {
-    padding: 0 8px !important;
-  }
-
-  &-head {
-    text-align: right;
-    display: flex;
-    justify-content: flex-end;
-
-    .nstc-g6-common-btn-4 {
-      // border-color: $--color-danger !important;
-      color: #fb5555 !important;
-    }
-  }
-
-  &-table {
-    margin-top: 12px;
-
-    .is-success {
-      .el-icon-circle-check {
-        &:before {
-          content: '\e79c';
-        }
-      }
-    }
-
-    .is-exception {
-      .el-icon-circle-close {
-        &:before {
-          content: '\e79d';
-        }
-      }
-    }
-
-    th {
-      > .cell {
-        box-sizing: border-box;
-        padding-left: 5px !important;
-        text-align: left !important;
-      }
-    }
-
-    .el-table-column--selection {
-      > .cell {
-        text-align: center !important;
-      }
-    }
-
-    .input-upload {
-      display: flex;
-      align-items: center;
-      margin-right: 5px;
-    }
-  }
-
-  &-opt {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-
-    img {
-      margin-right: 10px;
-      // &:hover {
-      //   cursor: pointer;
-      //   color: $baseColor;
-      // }
-    }
-  }
-
-  .nstc-el-progress-box {
-    width: 200px;
-    display: inline-block;
-  }
-
-  .nstc-file-reload {
-    color: #fb5555;
-    cursor: pointer;
-  }
-
-  .nstc-file-cancal {
-    color: #007aff;
-    cursor: pointer;
-  }
-
-  &-input-width {
-    max-width: 180px !important;
-
-    .el-input,
-    .el-select {
-      max-width: 180px !important;
-    }
-  }
-}
-</style>
-<style scoped>
-.nstc-file-upload /deep/ .cell {
-  padding: 0 8px 0 16px !important;
-}
-
-.nstc-file-upload .el-form-item {
-  margin-bottom: 0 !important;
-}
-</style>
+<!--
+  功能：    新版UI文件上传
+  作者：    lihao
+  创建时间： 2021-02-19
+-->
+<template>
+  <div class="nstc-file-upload">
+    <div v-if="pattern !== 'text'" class="nstc-file-upload-head">
+      <el-button
+        v-if="!views"
+        type="primary"
+        class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
+        :disabled="isDisabled"
+        @click="add"
+      >
+        新增
+      </el-button>
+      <el-button
+        v-if="tableData.length !== 0 && !views"
+        class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
+        @click="batchDownload"
+        >下载
+      </el-button>
+      <el-button
+        v-if="tableData.length !== 0 && !views"
+        class="nstc-g6-common-btn-4 nstc-g6-common-btn-size-s"
+        :disabled="isDisabled"
+        @click="batchDelete"
+      >
+        删除
+      </el-button>
+    </div>
+    <div v-else class="nstc-file-upload-head">
+      <el-button
+        v-if="tableData.length !== 0 && !views"
+        class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
+        @click="batchDownload"
+        >下载
+      </el-button>
+    </div>
+    <div class="nstc-file-upload-table">
+      <el-form ref="form" :rules="model.rules" :model="model">
+        <el-table :data="tableData" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="附件类型" align="left" min-width="180">
+            <template slot-scope="scope">
+              <!-- !textFlag(scope.row.uuid,scope.row.filePath) -->
+              <el-select
+                v-if="!textFlag(scope.row.uuid, scope.row.filePath) && !views"
+                v-model="scope.row.fileType"
+              >
+                <el-option
+                  v-for="(item, index) in fileTypeList"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <span v-else>{{
+                getFileTypeLabel(scope.row.fileType) || '--'
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="附件名称" align="left" min-width="180">
+            <template slot-scope="scope">
+              <el-form-item
+                v-if="!textFlag(scope.row.uuid, scope.row.filePath) && !views"
+                :prop="'tableData.' + scope.$index + '.attachmentName'"
+                :rules="model.rules.attachmentName"
+              >
+                <el-input
+                  v-model.trim="scope.row.attachmentName"
+                  placeholder="请输入附件名称"
+                  clearable
+                  :maxlength="attachmentMaxlength"
+                />
+              </el-form-item>
+
+              <span v-else>{{ scope.row.attachmentName || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="附件上传" align="left" min-width="180">
+            <template slot-scope="scope">
+              <el-upload
+                v-if="pattern !== 'text' && !views"
+                :ref="`nstc_g6_common_upload_index_${scope.$index}`"
+                action=""
+                v-bind="$attrs"
+                :auto-upload="false"
+                :before-upload="
+                  function (file) {
+                    return beforeUpload(file, scope.row)
+                  }
+                "
+                :on-exceed="handleExceed"
+                :on-change="
+                  (file, fileLists) => {
+                    handleChange(file, fileLists, scope.$index, scope.row)
+                  }
+                "
+                :file-list="fileList"
+                :show-file-list="false"
+                :http-request="httpRequest"
+                v-on="$listeners"
+              >
+                <el-input
+                  v-model="scope.row.fileName"
+                  placeholder="请选择附件"
+                  readonly
+                  @click="getUploadIndex(scope.$index)"
+                >
+                  <div slot="suffix" class="input-upload">
+                    <img :src="inputUploadSvg" alt="" />
+                  </div>
+                </el-input>
+              </el-upload>
+              <span v-else>{{ scope.row.fileName || '--' }}</span>
+            </template>
+            <el-input />
+          </el-table-column>
+          <el-table-column
+            label="上传时间"
+            prop="time"
+            align="left"
+            width="220px"
+          >
+            <template slot-scope="scope">
+              <span>{{
+                (scope.row.time || scope.row.createTime) | parseTimeFormat
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="上传人" prop="user" align="left">
+            <template slot-scope="scope">
+              <span>{{ scope.row.user || scope.row.creator }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="pattern !== 'text'"
+            label="上传进度"
+            align="left"
+            width="300px"
+          >
+            <template slot-scope="scope">
+              <div class="nstc-el-progress-box">
+                <el-progress
+                  v-show="showProgress"
+                  :percentage="
+                    (scope.row.uuid || scope.row.filePath) &&
+                    scope.row.status !== 'exception'
+                      ? 100
+                      : scope.row.percentage
+                  "
+                  :status="
+                    scope.row.uuid || scope.row.filePath
+                      ? 'success'
+                      : scope.row.status
+                  "
+                  :width="100"
+                />
+              </div>
+              <span
+                v-if="scope.row.status === 'exception'"
+                class="nstc-file-reload"
+                @click="reUploadAction(scope.$index)"
+                >重新上传</span
+              >
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="left" width="100px">
+            <template slot-scope="scope">
+              <div class="nstc-file-upload-opt">
+                <!-- v-if="false" -->
+                <!--  -->
+                <img
+                  v-if="showViews"
+                  :src="lookDiabled"
+                  alt=""
+                  @click="lookFile(scope.$index)"
+                />
+                <img
+                  v-if="
+                    (scope.row.uuid || scope.row.filePath) && pattern === 'text'
+                  "
+                  :src="downloadSvg"
+                  alt=""
+                  @click="downLoadFile(scope.row)"
+                />
+                <!-- <img
+                  v-if="pattern !== 'text'"
+                  :src="deleteSvg"
+                  alt=""
+                  @click="deleteFile(scope.$index)"
+                /> -->
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form>
+    </div>
+    <DialogCustom
+      v-model="dialogShowFlag"
+      :show-footer="false"
+      :title="dialogTitle"
+      @confirm="handleConfirm"
+    >
+      <span>查看文件</span>
+    </DialogCustom>
+  </div>
+</template>
+
+<script>
+import lookSvg from './img/look.svg'
+import lookDiabled from './img/look-diabled.svg'
+import downloadSvg from './img/download.svg'
+import deleteSvg from './img/delete.svg'
+import inputUploadSvg from './img/inputUpload.svg'
+import addFile from './img/addFile.svg'
+import deleteFileSvg from './img/deleteFile.svg'
+import DialogCustom from '../NstcDialog/NstcDialog'
+// fileDownloadGdt
+
+import { parseTime } from '../../utils/parseTime'
+import auth from '../../utils/auth'
+import axios from 'axios'
+
+export default {
+  name: 'NstcFileUpload',
+  components: {
+    DialogCustom
+  },
+  filters: {
+    parseTimeFormat: function (val) {
+      if (val !== '' && val) {
+        return parseTime(new Date(val), '{y}-{m}-{d}')
+      } else {
+        return ''
+      }
+    }
+  },
+  props: {
+    attachmentMaxlength: {
+      type: String,
+      default: '64'
+    },
+    views: {
+      //是否浏览模式
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    pattern: {
+      type: String,
+      default: () => {
+        return 'normal'
+      }
+    },
+    url: {
+      type: String,
+      default: null
+    },
+    batchDownloadUrl: {
+      type: String,
+      default: null
+    },
+    httpMethod: {
+      type: String,
+      default: 'post'
+    },
+    showLength: {
+      type: Boolean,
+      default: true
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      lookSvg,
+      lookDiabled,
+      downloadSvg,
+      deleteSvg,
+      inputUploadSvg,
+      addFile,
+      deleteFileSvg,
+      showViews: false,
+      model: {
+        rules: {
+          attachmentName: {
+            type: 'string',
+            required: true,
+            message: '必填字段',
+            trigger: 'change'
+          }
+        },
+        tableData: []
+      },
+      fileList: [],
+      tableSelectionData: [],
+      tableSelectionData2: [],
+      fileTypeList: [{ label: '附件', value: 1 }],
+      tempFile: {
+        id: '',
+        attachmentName: '',
+        fileName: '',
+        remark: null,
+        fileType: 1,
+        type: '',
+        time: '',
+        user: '',
+        progress: 0,
+        uuid: '',
+        status: null,
+        fileObj: '',
+        percentage: 0
+      },
+      dialogTitle: '查看',
+      dialogShowFlag: false,
+      currentUploadIndex: null,
+      showProgress: true,
+      dialogShowDelete: false,
+      dialogDeleteTitle: '提示'
+    }
+  },
+  computed: {
+    tableData: {
+      get() {
+        this.value.map((item) => {
+          item.fileType = item.fileType == '' ? '' : Number(item.fileType)
+          item.status == null ? (item.status = 0) : ''
+          return item
+        })
+        this.model.tableData = this.value
+        console.log('this.model=====', this.model.tableData)
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    uploadFlag() {
+      return this.tableData.filter((i) => i.uuid).length !== 0
+    }
+  },
+  beforeUpdate() {
+    this.showProgress = false
+  },
+  updated() {
+    setTimeout(() => {
+      this.showProgress = true
+    }, 1)
+  },
+  methods: {
+    beforeUpload(file, row) {
+      console.log(file, row)
+      // if(!row.attachmentName) {
+      //   this.$message({
+      //       type: "warning",
+      //       message: "请先输入附件名称再上传",
+      //     });
+      //     return false
+      // }
+    },
+    checkValidate() {
+      this.$refs['form'].validate((res) => {
+        return res
+      })
+    },
+    cancel(i) {
+      this.tableData[i].percentage = 0
+      console.log('111')
+    },
+    /**
+     * 判断当前是不是文档模式
+     * 1， pattern 等于 text
+     * 2   上传成功
+     */
+    textFlag(uuid, filePath) {
+      console.log(uuid, filePath)
+      if (this.pattern === 'text') {
+        return true
+      } else {
+        return !!uuid || !!filePath
+      }
+    },
+
+    /**
+     * 新增文件
+     */
+    add() {
+      this.tableData.unshift(
+        JSON.parse(
+          JSON.stringify({
+            id: new Date().getTime(),
+            attachmentName: '',
+            fileName: '',
+            remark: null,
+            fileType: 1,
+            type: '',
+            time: '',
+            user: '',
+            progress: 0,
+            uuid: '',
+            status: null,
+            fileObj: '',
+            percentage: 0
+          })
+        )
+      )
+    },
+
+    /**
+     * 表格选择变化
+     */
+    handleSelectionChange(data) {
+      this.tableSelectionData = data
+    },
+
+    /**
+     * 查看文件
+     */
+    lookFile() {
+      // this.dialogShowFlag = true;
+    },
+
+    /**
+     * 下载文件
+     */
+    downLoadFile(data) {
+      console.log(data)
+      // const aEl = document.createElement('a')
+      let uuid = data.uuid || data.filePath
+      const p = encodeURIComponent(uuid)
+      const n = encodeURIComponent(data.fileName)
+
+      axios({
+        method: this.httpMethod,
+        url: `${this.url}/download/${p}/${n}`,
+        // 这里可以在header中加一些东西，比如token
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${auth.getCookieToken()}`,
+          timestamp: Date.now(),
+          OperationDesc: 'yYarJp',
+          requestKey: Math.round(Math.random() * 1000000000)
+        },
+        responseType: 'blob'
+      })
+        .then((res) => {
+          console.log('response: ', res)
+          let blob = new Blob([res.data], {
+            type: 'application/octet-stream;charset=UTF-8'
+          })
+          let fileName = decodeURI(
+            res.headers['content-disposition'].split(';')[1].split('=')[1]
+          )
+          if (window.navigator.msSaveBlob) {
+            // ie
+            window.navigator.msSaveOrOpenBlob(blob, fileName)
+            return
+          }
+          let elink = document.createElement('a')
+          elink.style.display = 'none'
+          elink.href = window.URL.createObjectURL(blob)
+          elink.download = data.fileName
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href)
+          document.body.removeChild(elink)
+        })
+        .catch((error) => {
+          console.log('response: ', error)
+        })
+    },
+
+    /**
+     * 删除文件
+     */
+    deleteFile(index) {
+      this.$confirmTip({
+        type: 'info',
+        title: '确认删除该文件？',
+        info: '',
+        button: {
+          ok: '提交',
+          cancel: '取消'
+        }
+      }).then(() => {
+        this.tableData.splice(index, 1)
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      })
+    },
+
+    /**
+     * 弹框确认事件
+     */
+    handleConfirm() {},
+
+    /**
+     * 批量下载
+     */
+    batchDownload() {
+      if (this.tableSelectionData.length === 1) {
+        // 单条下载
+        this.downLoadFile(this.tableSelectionData[0])
+      } else if (this.tableSelectionData.length > 1) {
+        const files = []
+        // 判断是否有文件未上传
+        console.log('this.tableSelectionData====', this.tableSelectionData)
+        let isNoUpload = this.tableSelectionData.some((item) => {
+          !item.uuid == true
+        })
+        console.log('文件判断=======', isNoUpload)
+        if (isNoUpload) {
+          // 阻断下载
+          this.$message({
+            type: 'warning',
+            message: '勾选文件中有文件未上传'
+          })
+          return
+        }
+        this.tableSelectionData.map((item) => {
+          files.push({
+            uuid: item.uuid || item.filePath,
+            fileName: item.fileName
+          })
+        })
+
+        axios({
+          url: this.batchDownloadUrl,
+          method: 'POST',
+          data: JSON.stringify(files),
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${auth.getCookieToken()}`,
+            timestamp: Date.now(),
+            OperationDesc: 'yYarJp',
+            requestKey: Math.round(Math.random() * 1000000000)
+          },
+          responseType: 'blob'
+        })
+          .then((res) => {
+            let blob = new Blob([res.data], {
+              type: 'application/octet-stream;charset=UTF-8'
+            })
+            let fileName = decodeURI(
+              res.headers['content-disposition'].split(';')[1].split('=')[1]
+            )
+            if (window.navigator.msSaveBlob) {
+              // ie
+              window.navigator.msSaveOrOpenBlob(blob, fileName)
+              return
+            }
+            let elink = document.createElement('a')
+            elink.style.display = 'none'
+            elink.href = window.URL.createObjectURL(blob)
+            elink.download = '批量下载.zip'
+            document.body.appendChild(elink)
+            elink.click()
+            URL.revokeObjectURL(elink.href)
+            document.body.removeChild(elink)
+          })
+          .catch((error) => {
+            console.log('response: ', error)
+          })
+      } else {
+        this.$message({
+          type: 'warning',
+          message: '请选择要下载的附件'
+        })
+      }
+    },
+
+    /**
+     * 批量删除
+     */
+    batchDelete() {
+      if (this.tableSelectionData.length !== 0) {
+        this.dialogShowDelete = true
+        this.$confirmTip({
+          type: 'error',
+          title: '确认要删除所选附件吗？',
+          info: '删除后数据不可恢复',
+          button: {
+            ok: '提交',
+            cancel: '取消'
+          }
+        }).then(() => {
+          this.tableData = this.tableData.filter((i) => {
+            return !this.tableSelectionData.includes(i)
+          })
+          setTimeout(() => {
+            this.tableSelectionData = []
+          }, 30)
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+        })
+      } else {
+        this.$message({
+          type: 'warning',
+          message: '请选择要删除的附件'
+        })
+      }
+    },
+    handleConfirmDelete() {
+      this.tableData = this.tableData.filter((i) => {
+        return !this.tableSelectionData.includes(i)
+      })
+      setTimeout(() => {
+        this.tableSelectionData = []
+      }, 30)
+      this.dialogShowDelete = false
+      this.$message({
+        type: 'success',
+        message: '删除成功!'
+      })
+    },
+
+    /**
+     * 获取文件类型
+     */
+    getFileTypeLabel(type) {
+      const t = this.fileTypeList.filter((i) => {
+        return Number(type) === Number(i.value)
+      })
+      if (t.length === 1) {
+        return t[0].label
+      } else {
+        return type
+      }
+    },
+
+    /**
+     * 附件上传
+     */
+    httpRequest(fileObj) {
+      const isLt2M = fileObj.file.size / 1024 / 1024 < 20
+      if (!isLt2M) {
+        this.$message({
+          message: '上传文件大小不能超过 20MB!',
+          type: 'warning'
+        })
+        this.tableData[this.currentUploadIndex].percentage = 75
+        this.tableData[this.currentUploadIndex].status = 'exception'
+        this.$emit('upload_over', {})
+        return
+      }
+      const that = this
+      const formData = new FormData()
+      this.tableData[this.currentUploadIndex].fileSize = fileObj.file.size
+      // this.tableData[this.currentUploadIndex].fileName = fileObj.file.name
+      this.tableData[this.currentUploadIndex].type = fileObj.file.type
+
+      formData.append('file', fileObj.file)
+      axios(`${this.url}/upload`, formData, {
+        onUploadProgress: (progressEvent) => {
+          let percent = ((progressEvent.loaded / progressEvent.total) * 100) | 0
+          // 调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
+          that.tableData[this.currentUploadIndex].percentage = percent
+        }
+      })
+        .then((res) => {
+          // 上传成功
+          // that.tableData[this.currentUploadIndex].percentage = 100
+          console.log('上传文件1111', res)
+          this.tableData[this.currentUploadIndex].time = parseTime(
+            res[0][`time`],
+            '{y}-{m}-{d} {h}:{i}:{s}'
+          )
+          this.tableData[this.currentUploadIndex].uuid = res[0][`uuid`]
+          this.tableData[this.currentUploadIndex].status = 'success'
+          this.tableData[this.currentUploadIndex].user = res[0][`user`]
+          this.tableData[this.currentUploadIndex].creator = res[0][`creator`]
+          res[0][`createTime`] = parseTime(
+            res[0][`createTime`],
+            '{y}-{m}-{d} {h}:{i}:{s}'
+          )
+          this.tableData[this.currentUploadIndex].createTime =
+            res[0][`createTime`]
+          this.$emit('upload_over', {})
+        })
+        .catch(() => {
+          // 上传失败
+          // this.resetUpload(this.currentUploadIndex)
+          that.tableData[this.currentUploadIndex].percentage = 75
+          this.tableData[this.currentUploadIndex].status = 'exception'
+          this.$emit('upload_over', {})
+        })
+      // setTimeout(function () {
+      //   //去调用了这个cancel()方法，没有完成请求的接口便会停止请求
+      //   self.cancel()
+      // }, 1)
+    },
+
+    /**
+     * 文件超出个数限制
+     */
+    handleExceed() {
+      this.$message({
+        type: 'error',
+        message: '最多只能选择一个文件'
+      })
+    },
+
+    /**
+     * 文件变化
+     * file, fileList
+     */
+    handleChange(file, fileLists, index, row) {
+      // if(!row.attachmentName) {
+      //     this.$message({
+      //       type: "warning",
+      //       message: "请先输入附件名称再上传",
+      //     });
+      //     return false
+      // }
+      this.tableData[index].fileObj = file
+      this.tableData[index].fileName = file.name
+      this.tableData[index].user = ''
+      this.tableData[index].percentage = 0
+      this.tableData[index].uuid = ''
+      if (fileLists.length > 1) {
+        fileLists.splice(0, 1)
+      }
+
+      this.tableSelectionData2 = []
+      this.tableSelectionData2.push(this.tableData[index])
+      this.validFile(index)
+    },
+
+    /**
+     * 获取当前上传的文件的index
+     */
+    getUploadIndex(index) {
+      this.currentUploadIndex = index
+    },
+
+    strLen(str) {
+      let len = 0
+      for (let i = 0; i < str.length; i++) {
+        let c = str.charCodeAt(i)
+        //单字节加1
+        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
+          len++
+        } else {
+          len += 3
+        }
+      }
+      return len
+    },
+
+    /**
+     * 校验文件上传
+     */
+    validFile(index) {
+      // if(this.tableSelectionData.length == 0) {
+      //   return this.$message.warning('请选择数据')
+      // }
+      let t = this.tableSelectionData2.filter((item) => {
+        // return this.strLen(item.fileName) > 60;
+        return item.fileName.length > 60
+      })
+      if (t.length) {
+        this.$message({
+          type: 'error',
+          message: '文件名不能超过64个字，请重新上传!'
+        })
+        // this.tableData[index].status = 'exception';
+        return null
+      }
+      let temp = this.tableSelectionData2.filter((item) => {
+        const names = item.fileName ? item.fileName.split('.') : []
+        let nameType = names.length ? names[names.length - 1] : ''
+        return ['exe', 'bin'].includes(nameType)
+      })
+      if (temp.length) {
+        this.$message({
+          type: 'error',
+          message: '暂不支持 .exe, .bin等格式文件格式上传！'
+        })
+        this.tableData[index].fileName = ''
+        return null
+      }
+      this.tableData[index].percentage = 50
+      this.submitFile()
+    },
+
+    /**
+     * 上传文件
+     */
+    submitFile() {
+      // 获得将要上传的文件
+      const uploadFileArr = []
+      this.tableSelectionData2.map((item) => {
+        // 没有上传文件 并且选择了文件
+        if (!item.uuid && item.fileObj) {
+          uploadFileArr.push({
+            ref_index: this.tableData.findIndex(
+              (objitem) => objitem.id === item.id
+            ),
+            data: item
+          })
+        }
+      })
+      // 执行
+      uploadFileArr.length &&
+        this.uploadAction(uploadFileArr).then(() => {
+          console.log('上传文件完成')
+        })
+    },
+
+    /**
+     * 文件上传动作
+     */
+    uploadAction(fileArr) {
+      let uploadedLength = 0
+      return new Promise((resolve) => {
+        // 启动上传
+        uploadedLength++
+        this.currentUploadIndex = fileArr[0].ref_index
+        this.$refs[
+          `nstc_g6_common_upload_index_${this.currentUploadIndex}`
+        ].submit()
+
+        // 监听上传完毕
+        this.$on('upload_over', () => {
+          if (uploadedLength === fileArr.length) {
+            resolve()
+          } else {
+            uploadedLength++
+            this.currentUploadIndex = fileArr[uploadedLength - 1].ref_index
+            this.$refs[
+              `nstc_g6_common_upload_index_${this.currentUploadIndex}`
+            ].submit()
+          }
+        })
+      })
+    },
+
+    /**
+     * 重置
+     */
+    resetUpload(index) {
+      this.$refs[`nstc_upload_index_${index}`].clearFiles()
+      this.tableData[index].fileName = ''
+      this.tableData[index].fileSize = ''
+      this.tableData[index].percentage = 0
+      this.tableData[index].fileType = 1
+      this.tableData[index].fileFormat = ''
+      this.tableData[index].remark = ''
+      this.tableData[index].state = '1'
+      this.tableData[index].createTime = ''
+      this.tableData[index].uuid = ''
+    },
+
+    /**
+     * 发生错误重新上传
+     */
+    reUploadAction(index) {
+      console.log('附件上传', index)
+      // this.tableData[index].percentage = 0;
+      // this.tableData[index].percentage = 50;
+      this.$refs[`nstc_g6_common_upload_index_${index}`].submit()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nstc-file-upload {
+  .input-upload {
+    height: 100%;
+  }
+
+  .cell {
+    padding: 0 8px !important;
+  }
+
+  &-head {
+    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+
+    .nstc-g6-common-btn-4 {
+      // border-color: $--color-danger !important;
+      color: #fb5555 !important;
+    }
+  }
+
+  &-table {
+    margin-top: 12px;
+
+    .is-success {
+      .el-icon-circle-check {
+        &:before {
+          content: '\e79c';
+        }
+      }
+    }
+
+    .is-exception {
+      .el-icon-circle-close {
+        &:before {
+          content: '\e79d';
+        }
+      }
+    }
+
+    th {
+      > .cell {
+        box-sizing: border-box;
+        padding-left: 5px !important;
+        text-align: left !important;
+      }
+    }
+
+    .el-table-column--selection {
+      > .cell {
+        text-align: center !important;
+      }
+    }
+
+    .input-upload {
+      display: flex;
+      align-items: center;
+      margin-right: 5px;
+    }
+  }
+
+  &-opt {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    img {
+      margin-right: 10px;
+      // &:hover {
+      //   cursor: pointer;
+      //   color: $baseColor;
+      // }
+    }
+  }
+
+  .nstc-el-progress-box {
+    width: 200px;
+    display: inline-block;
+  }
+
+  .nstc-file-reload {
+    color: #fb5555;
+    cursor: pointer;
+  }
+
+  .nstc-file-cancal {
+    color: #007aff;
+    cursor: pointer;
+  }
+
+  &-input-width {
+    max-width: 180px !important;
+
+    .el-input,
+    .el-select {
+      max-width: 180px !important;
+    }
+  }
+}
+</style>
+<style scoped>
+.nstc-file-upload /deep/ .cell {
+  padding: 0 8px 0 16px !important;
+}
+
+.nstc-file-upload .el-form-item {
+  margin-bottom: 0 !important;
+}
+</style>