附件组件，直接复制过来，有待测试

src/api/sys/OSSService.js

@@ -0,0 +1,234 @@
+import OSS from 'ali-oss'
+import { Message } from 'element-ui'
+import request from '@/utils/httpRequest'
+
+export default class OSSSerive {
+  saveMsg (param) {
+    return request({
+      url: '/oss/file/saveMsg',
+      method: 'post',
+      data: param
+    })
+  }
+  findFileList (attachmentId) {
+    return request({
+      url: '/oss/file/findFileList',
+      method: 'get',
+      params: {attachmentId: attachmentId}
+    })
+  }
+  getTemporaryUrl (url) {
+    return request({
+      url: '/oss/file/getTemporaryUrl',
+      method: 'get',
+      params: {url: url}
+    })
+  }
+  getFileSizeByUrl (url) {
+    return request({
+      url: '/oss/file/getFileSizeByUrl',
+      method: 'get',
+      params: {url: url}
+    })
+  }
+  deleteMsgById (id) {
+    return request({
+      url: '/oss/file/deleteMsgById',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  downLoadAttach (url) {
+    return request({
+      url: '/oss/file/downLoadAttach',
+      method: 'get',
+      responseType: 'blob',
+      params: {file: url}
+    })
+  }
+}
+
+export const client = new OSS({
+  region: 'oss-cn-hangzhou', // oss地址
+  accessKeyId: 'LTAI5tQDWoM9c1WyJNPs86rX', // 通过阿里云控制台创建的AccessKey ID。
+  accessKeySecret: '84dDIx4edT1n78KUOqqSmDZ35pchJv', // 通过阿里云控制台创建的AccessKey Secret。
+  bucket: 'xgxm-test', // 仓库名字
+  // bucket: 'xg-pg', // 仓库名字
+  useFetch: true, // 支持上传大于100KB的文件
+  secure: false // 返回的url为https
+})
+
+export const headers = {
+  // 指定该Object被下载时网页的缓存行为。
+  'Cache-Control': 'no-cache',
+  // 指定该Object被下载时的名称。
+  'Content-Disposition': 'inline',
+  // 指定该Object被下载时的内容编码格式。
+  'Content-Encoding': 'UTF-8',
+  // 指定过期时间。
+  Expires: 'Wed, 08 Jul 2023 16:57:01 GMT',
+  // 指定Object的存储类型。
+  'x-oss-storage-class': 'Standard',
+  // 指定Object的访问权限。
+  // 'x-oss-object-acl': 'private',
+  // 设置Object的标签，可同时设置多个标签。
+  'x-oss-tagging': 'Tag1=1&Tag2=2',
+  // 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
+  'x-oss-forbid-overwrite': 'true'
+  // 'secure': 'true'
+}
+
+export function onChange (file, files) {
+  // console.log(file, 'file', files, 'Filest')
+  return files
+}
+
+// eslint-disable-next-line no-unused-vars
+export function handleUploadSuccess (response, file, fileS) {
+  // console.log(response, file, fileS, 'response, file, fileList')
+}
+
+export function handleRemove (e, files) {
+  return files
+}
+
+export function fileName (file) {
+  // console.log('文件名称处理')
+  const tmpcnt = file.file.name.lastIndexOf('.')
+  let fileName = file.file.name.substring(0, tmpcnt)
+  // 将单引号‘’都转换成'，将双引号“”都转换成"
+  fileName = fileName.replace(/’|‘/g, '\'').replace(/“|”/g, '')
+  // 将中括号【】转换成[]，将大括号｛｝转换成{}
+  fileName = fileName.replace(/【/g, '(').replace(/】/g, ')').replace(/｛/g, '(').replace(/｝/g, ')')
+  fileName = fileName.replace(/\[/g, '(').replace(/]/g, ')').replace(/{/g, '(').replace(/}/g, ')')
+  // 将逗号，转换成,，将：转换成:
+  fileName = fileName.replace(/，/g, ',').replace(/：/g, ':')
+  // 将中文——转换为英文-
+  fileName = fileName.replace(/—/g, '-')
+  fileName = fileName.replace(/……/g, '')
+  fileName = fileName.replace(/±/g, '')
+  fileName = fileName.replace(/#/g, '')
+  fileName = fileName.replace(/%/g, '')
+  fileName = fileName.replace(/Π/g, '')
+  fileName = fileName.replace(/π/g, '')
+  fileName = fileName.replace(/·/g, '.')
+  // console.log('文件名处理结果', fileName)
+  return fileName
+}
+
+export function beforeAvatarUpload (file, fileList, maxValue) {
+  // 文件大小校验
+  const isLt2M = file.size / 1024 / 1024 < maxValue
+  if (!isLt2M) {
+    fileList.splice(fileList.length - 1, 1)
+    // console.log('文件大小不能超过 ' + maxValue + ' MB!')
+  }
+  return isLt2M
+}
+
+export function exnameFix (file, isShow, names) {
+  // console.log('格式校验')
+  const tmpcnt = file.name.lastIndexOf('.')
+  const exname = file.name.substring(tmpcnt + 1) // 获取后缀名
+  if (names.indexOf(exname) < 0) {
+    if (isShow === '1') {
+      Message.error('不支持的格式!')
+    }
+    return false
+  }
+  return true
+}
+
+export async function httpRequest (file, name, type, maxValue) { // 阿里云OSS上传
+  if (!beforeAvatarUpload(file.file, [], maxValue)) {
+    return
+  }
+  // console.log('开始上传')
+  // 判断扩展名
+  const tmpcnt = file.file.name.lastIndexOf('.') // 获取.的下标
+  const exname = file.file.name.substring(tmpcnt + 1) // 获取后缀名
+  // console.log(exname, '后缀名')
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = now.getMonth() + 1
+  const day = now.getDate() > 10 ? now.getDate() : '0' + now.getDate()
+  const filePath = '/attachment-file/assess/' + type + '/' + year + '/' + month + '/' + day + '/' + now.getTime()
+  // console.log(filePath, '文件存储路径')
+  const fileName = filePath + name + '.' + exname
+  // console.log(fileName, '文件名')
+
+  await client.multipartUpload(fileName, file.file, {
+	  // eslint-disable-next-line no-unused-vars
+    progress: await function (p, checkpoint) {
+      file.onProgress({percent: Math.floor(p * 100)}) // 触发el-upload组件的onProgress方法
+    }
+    // mime: type,
+  }).then(await function (result) {
+    // console.log(result)
+    if (result.res.status === 200) {
+      // file.onSuccess(result) // 触发el-upload组件的onSuccess方法
+      file.file.url = fileName
+    }
+	  // eslint-disable-next-line handle-callback-err,no-unused-vars
+  }).catch(function (err) {
+    // console.log(err)
+    file.onError('上传失败') // 触发el-upload组件的onError方法，此方法会移除文件列表
+  })
+}
+
+// eslint-disable-next-line no-unused-vars
+function getTemporaryByUrl (url) {
+  return request({
+    url: '/oss/file/getTemporaryUrl',
+    method: 'get',
+    params: {url: url}
+  })
+}
+
+export async function openWindowOnUrl (row) {
+  if (row.url === undefined || row.url === null || row.url === '') {
+    // Message.error('没有获取到文件的url')
+    return
+  }
+  let rowUrl = ''
+  let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+  if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+    await getTemporaryByUrl(row.url).then((data) => {
+      // eslint-disable-next-line no-undef
+      onPreview(data.data)
+    })
+    return
+  }
+  await getTemporaryByUrl(row.url).then((data) => {
+    rowUrl = data.data
+  })
+  if (suffix === 'pdf') {
+    window.open('https://view.xdocin.com/xdoc?_xdoc=' + encodeURIComponent(rowUrl), '_blank')
+  } else if (suffix === 'rar' || suffix === 'zip' || suffix === 'jar' || suffix === '7z') {
+    window.open('http://ow365.cn/?i=30045&furl=' + encodeURIComponent(rowUrl), '_blank')
+  } else {
+    window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(rowUrl), '_blank')
+  }
+}
+
+export async function toHref (row) {
+  if (row.url === null || row.url === undefined || row.url === '') {
+    // Message.error('没有获取到文件的url')
+    return
+  }
+  const link = document.createElement('a')
+  await getTemporaryByUrl(row.url).then((data) => {
+    const url = data.data // 完整的url则直接使用
+    // 这里是将url转成blob地址，
+    fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
+      link.href = URL.createObjectURL(blob)
+      link.download = row.name || '' // 下载文件的名字
+      // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字
+      document.body.appendChild(link)
+      link.click()
+      // 在资源下载完成后 清除 占用的缓存资源
+      window.URL.revokeObjectURL(link.href)
+      document.body.removeChild(link)
+    })
+  })
+}

src/views/common/UpLoadComponent.vue

@@ -0,0 +1,383 @@
+<!--文件上传组件-->
+<template>
+  <div>
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
+    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
+               :limit="999" :http-request="httpRequest"
+               multiple
+               :on-exceed="(files, fileList) =>{
+                      $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+                     }"
+               :show-file-list="false"
+               :on-change="changes"
+               :on-progress="uploadVideoProcess"
+               :file-list="fileList">
+      <el-button :loading="loading" type="primary" size="mini" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" :disabled="auth==='view'&&uploadFlag===false">点击上传</el-button>
+    </el-upload>
+    <div style="height: calc(100% - 80px);margin-top: 10px">
+      <!-- 进度条 -->
+      <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
+      <el-table
+        ref="uploadTable"
+        v-loading="loading"
+        :key="tableKey"
+        :data="dataListNew">
+        <el-table-column type="seq" width="40"></el-table-column>
+        <el-table-column label="文件名称" prop="name" align="center">
+          <template scope="scope">
+            <div v-if="ifName(scope.row) === true">
+              <el-image
+                style="width: 30px; height: 30px;padding-top: 4px"
+                :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]"
+              ></el-image>
+            </div>
+            <div v-else>
+              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
+        <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
+        <el-table-column label="文件大小" prop="size" align="center">
+          <template slot-scope="scope">
+            {{getSize(scope.row.size)}}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200px" fixed="right" align="center">
+          <template  scope="scope">
+            <el-button type="text"  icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
+            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
+<!--            <el-button v-if="createBy===scope.row.createBy.name" type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false">删除2</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
+  </div>
+</template>
+
+<script>
+  // eslint-disable-next-line no-unused-vars
+  import OSSSerivce, {
+    httpRequest,
+    // eslint-disable-next-line no-unused-vars
+    handleRemove,
+    fileName,
+    // eslint-disable-next-line no-unused-vars
+    beforeAvatarUpload,
+    // eslint-disable-next-line no-unused-vars
+    openWindowOnUrl,
+    // eslint-disable-next-line no-unused-vars
+    toHref
+  } from '@/api/sys/OSSService'
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  import moment from 'moment'
+  export default {
+    data () {
+      return {
+        progressFlag: false,
+        loadProgress: 0,
+        fileList: [],
+        dataList: [],
+        dataListNew: [],
+        url: '',
+        showViewer: false,
+        ossService: null,
+        auth: '',
+        directory: 'public',
+        maxValue: 300,
+        tableKey: '',
+        fileLoading: true,
+        dividerName: '',
+        uploadFlag: false,
+        delFlag: false,
+        createBy: '',
+        showDivider: true,
+        loading: false,
+        dataListLength: ''
+      }
+    },
+    watch: {
+    },
+    created () {
+      this.ossService = new OSSSerivce()
+    },
+    components: {
+      ElImageViewer
+    },
+    mounted () {
+      window.onPreview = this.onPreview
+    },
+    methods: {
+      /**
+       * dividerName: 组件中divider的名称赋值
+       * showDivider: ‘附件‘Divider是否展示
+       *     注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       **/
+      setDividerName (dividerName, showDivider) {
+        if (this.commonJS.isNotEmpty(dividerName)) {
+          this.dividerName = dividerName
+        }
+        if (this.commonJS.isNotEmpty(showDivider)) {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        } else {
+          this.showDivider = true
+        }
+      },
+      /**
+       * 文件上传组件初始化
+       * @param auth
+       *    auth的值为"view"时,不可上传/编辑文件
+       *    auth为其他值时,可上传/编辑文件
+       * @param fileList  要显示到文件上传列表中的文件。
+       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+       * @param directory  要存放到oss的哪个文件夹下。
+       *    注：值为空时，默认存放到"public"文件夹
+       * @param maxValue  上传文件允许的最大值，单位：MB
+       *    注：值为空时，默认值为300MB
+       * @param dividerName  组件中divider的名称
+       *    注：值为空时，默认值为‘附件’
+       * @param uploadFlag  ‘上传文件’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+       * @param delFlag  ‘删除’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+       * @param showDivider  ‘附件‘Divider是否展示
+       *    注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       */
+      async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
+        await this.fileLoadingFalse()
+        if (this.commonJS.isEmpty(fileList)) {
+          this.fileLoading = true
+        } else {
+          this.dataListLength = fileList.length
+        }
+        if (this.commonJS.isEmpty(dividerName)) {
+          this.dividerName = '附件'
+        } else {
+          this.dividerName = dividerName
+        }
+        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+          this.directory = directory
+        } else {
+          this.directory = 'public'
+        }
+        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+          this.maxValue = maxValue
+        } else {
+          this.maxValue = 300
+        }
+        this.auth = auth
+        if (this.commonJS.isEmpty(uploadFlag)) {
+          this.uploadFlag = false
+        } else {
+          if (uploadFlag !== true && uploadFlag !== false) {
+            this.uploadFlag = false
+          } else {
+            this.uploadFlag = uploadFlag
+          }
+        }
+        if (this.commonJS.isEmpty(delFlag)) {
+          this.delFlag = false
+        } else {
+          if (delFlag !== true && delFlag !== false) {
+            this.delFlag = false
+            this.createBy = delFlag
+          } else {
+            this.delFlag = delFlag
+          }
+        }
+        for await (let item of fileList) {
+          await this.ossService.getFileSizeByUrl(item.url).then((data) => {
+            item.lsUrl = data.data.url
+            item.size = data.data.size
+            this.dataList.push(item)
+            this.dataListNew.push(item)
+            if (this.dataListNew.length === fileList.length) {
+              this.fileLoading = true
+            }
+          })
+        }
+        // this.dataList = JSON.parse(JSON.stringify(fileList))
+        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
+        if (this.commonJS.isEmpty(showDivider)) {
+          this.showDivider = true
+        } else {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        }
+      },
+      async httpRequest (file) {
+        await httpRequest(file, fileName(file), this.directory, this.maxValue)
+      },
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => {
+            this.progressFlag = false
+          }, 1000) // 一秒后关闭进度条
+        }
+      },
+      getSize (value) {
+        if (this.commonJS.isEmpty(value)) {
+          return '0 B'
+        } else {
+          let val = parseInt(value)
+          if (this.commonJS.isEmpty(val)) {
+            return '0 B'
+          }
+          if (isNaN(val)) {
+            return '0 B'
+          }
+          if (val === 0) {
+            return '0 B'
+          }
+          let k = 1024
+          let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
+          let i = Math.floor(Math.log(val) / Math.log(k))
+          return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
+        }
+      },
+      async changes (file, fileList) {
+        // if (file.status !== 'ready') {
+        //   return
+        // }
+        if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+          this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+          return
+        }
+        this.dataListNew = []
+        this.dataList.forEach((item) => {
+          this.dataListNew.push(item)
+        })
+        for (let item of fileList) {
+          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item.createBy = {
+            id: '',
+            name: ''
+          }
+          item.createBy.id = this.$store.state.user.id
+          item.createBy.name = this.$store.state.user.name
+          this.dataListNew.push(item)
+        }
+        for await (let item of this.dataListNew) {
+          if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+            item.url = item.raw.url
+            if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+              await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                item.lsUrl = data.data
+              })
+            }
+          }
+        }
+        this.tableKey = Math.random()
+      },
+      showFile (row) {
+        openWindowOnUrl(row)
+      },
+      onPreview (url) {
+        this.url = url
+        this.showViewer = true
+      },
+      // 关闭查看器
+      closeViewer () {
+        this.url = ''
+        this.showViewer = false
+      },
+      toHref (row) {
+        toHref(row)
+      },
+      deleteById (row, index) {
+        this.dataListNew.splice(index, 1)
+        if (row.id !== null && row.id !== '' && row.id !== undefined) {
+          this.dataList.splice(index, 1)
+          // this.ossService.deleteMsgById(row.id)
+        } else {
+          let num
+          if (this.dataList.length > 0) {
+            num = this.dataList.length - 1
+          } else {
+            num = 0
+          }
+          this.$refs.upload.uploadFiles.splice(index - num, 1)
+        }
+      },
+      /**
+       * 关闭dialog时使用  清除el-upload中上传的文件
+       */
+      clearUpload () {
+        this.$refs.upload.uploadFiles = []
+        this.dataList = []
+        this.dataListNew = []
+        this.createBy = ''
+      },
+      /**
+       * 获取当前文件列表中的文件数据
+       */
+      getDataList () {
+        return this.dataListNew
+      },
+      /**
+       * 判断进度条是否结束，附件是否加载完成
+       * @returns {boolean}
+       */
+      checkProgress () {
+        if (this.progressFlag === true) {
+          this.$message.warning('请等待附件上传完成再进行操作')
+          return true
+        }
+        if (this.fileLoading === false) {
+          this.$message.warning('请等待附件加载完成再进行操作')
+          if (this.dataListLength === this.dataListNew.length) {
+            this.fileLoading = true
+          }
+          return true
+        }
+        return false
+      },
+      ifName (row) {
+        if (this.commonJS.isEmpty(row.name)) {
+          row.name = '---'
+          return false
+        }
+        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+          return true
+        } else {
+          return false
+        }
+      },
+      fileLoadingFalse () {
+        this.fileLoading = false
+      },
+      // 开启/关闭页面的加载中状态
+      changeLoading (loading) {
+        if (this.commonJS.isNotEmpty(loading)) {
+          this.loading = loading
+        } else {
+          this.loading = false
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  .el-divider__text {
+    font-size: 16px;
+    font-weight: bold;
+  }
+</style>

src/views/common/UpLoadComponentCcpm.vue

@@ -0,0 +1,384 @@
+<!--文件上传组件-->
+<template>
+  <div>
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
+    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
+               :limit="999" :http-request="httpRequest"
+               multiple
+               :on-exceed="(files, fileList) =>{
+                      $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+                     }"
+               :show-file-list="false"
+               :on-change="changes"
+               :on-progress="uploadVideoProcess"
+               :file-list="fileList">
+      <el-button :loading="loading" type="primary" size="mini" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" :disabled="auth==='view'&&uploadFlag===false">点击上传</el-button>
+    </el-upload>
+    <div style="height: calc(100% - 80px);margin-top: 10px">
+      <!-- 进度条 -->
+      <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
+      <el-table
+        ref="uploadTable"
+        v-loading="loading"
+        :key="tableKey"
+        :data="dataListNew">
+        <el-table-column type="seq" width="40"></el-table-column>
+        <el-table-column label="文件名称" prop="name" align="center">
+          <template scope="scope">
+            <div v-if="ifName(scope.row) === true">
+              <el-image
+                style="width: 30px; height: 30px;padding-top: 4px"
+                :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]"
+              ></el-image>
+            </div>
+            <div v-else>
+              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
+        <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
+<!--        <el-table-column label="文件大小" prop="size" align="center">-->
+<!--          <template slot-scope="scope">-->
+<!--            {{getSize(scope.row.size)}}-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+        <el-table-column label="操作" width="200px" fixed="right" align="center">
+          <template  scope="scope">
+            <el-button type="text"  icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
+            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
+<!--            <el-button v-if="createBy===scope.row.createBy.name" type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false">删除2</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
+  </div>
+</template>
+
+<script>
+  // eslint-disable-next-line no-unused-vars
+  import OSSSerivce, {
+    httpRequest,
+    // eslint-disable-next-line no-unused-vars
+    handleRemove,
+    fileName,
+    // eslint-disable-next-line no-unused-vars
+    beforeAvatarUpload,
+    // eslint-disable-next-line no-unused-vars
+    openWindowOnUrl,
+    // eslint-disable-next-line no-unused-vars
+    toHref
+  } from '@/api/sys/OSSService'
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  import moment from 'moment'
+  export default {
+    data () {
+      return {
+        progressFlag: false,
+        loadProgress: 0,
+        fileList: [],
+        dataList: [],
+        dataListNew: [],
+        url: '',
+        showViewer: false,
+        ossService: null,
+        auth: '',
+        directory: 'public',
+        maxValue: 300,
+        tableKey: '',
+        fileLoading: true,
+        dividerName: '',
+        uploadFlag: false,
+        delFlag: false,
+        createBy: '',
+        showDivider: true,
+        loading: false,
+        dataListLength: ''
+      }
+    },
+    watch: {
+    },
+    created () {
+      this.ossService = new OSSSerivce()
+    },
+    components: {
+      ElImageViewer
+    },
+    mounted () {
+      window.onPreview = this.onPreview
+    },
+    methods: {
+      /**
+       * dividerName: 组件中divider的名称赋值
+       * showDivider: ‘附件‘Divider是否展示
+       *     注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       **/
+      setDividerName (dividerName, showDivider) {
+        if (this.commonJS.isNotEmpty(dividerName)) {
+          this.dividerName = dividerName
+        }
+        if (this.commonJS.isNotEmpty(showDivider)) {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        } else {
+          this.showDivider = true
+        }
+      },
+      /**
+       *  此组件目前仅供ccpm的附件查看
+       * 文件上传组件初始化
+       * @param auth
+       *    auth的值为"view"时,不可上传/编辑文件
+       *    auth为其他值时,可上传/编辑文件
+       * @param fileList  要显示到文件上传列表中的文件。
+       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+       * @param directory  要存放到oss的哪个文件夹下。
+       *    注：值为空时，默认存放到"public"文件夹
+       * @param maxValue  上传文件允许的最大值，单位：MB
+       *    注：值为空时，默认值为300MB
+       * @param dividerName  组件中divider的名称
+       *    注：值为空时，默认值为‘附件’
+       * @param uploadFlag  ‘上传文件’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+       * @param delFlag  ‘删除’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+       * @param showDivider  ‘附件‘Divider是否展示
+       *    注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       */
+      async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
+        await this.fileLoadingFalse()
+        if (this.commonJS.isEmpty(fileList)) {
+          this.fileLoading = true
+        } else {
+          this.dataListLength = fileList.length
+        }
+        if (this.commonJS.isEmpty(dividerName)) {
+          this.dividerName = '附件'
+        } else {
+          this.dividerName = dividerName
+        }
+        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+          this.directory = directory
+        } else {
+          this.directory = 'public'
+        }
+        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+          this.maxValue = maxValue
+        } else {
+          this.maxValue = 300
+        }
+        this.auth = auth
+        if (this.commonJS.isEmpty(uploadFlag)) {
+          this.uploadFlag = false
+        } else {
+          if (uploadFlag !== true && uploadFlag !== false) {
+            this.uploadFlag = false
+          } else {
+            this.uploadFlag = uploadFlag
+          }
+        }
+        if (this.commonJS.isEmpty(delFlag)) {
+          this.delFlag = false
+        } else {
+          if (delFlag !== true && delFlag !== false) {
+            this.delFlag = false
+            this.createBy = delFlag
+          } else {
+            this.delFlag = delFlag
+          }
+        }
+        for await (let item of fileList) {
+          // await this.ossService.getFileSizeByUrl(item.url).then((data) => {
+          //   item.lsUrl = data.data.url
+          //   item.size = data.data.size
+          // })
+          this.dataList.push(item)
+          this.dataListNew.push(item)
+          if (this.dataListNew.length === fileList.length) {
+            this.fileLoading = true
+          }
+        }
+        // this.dataList = JSON.parse(JSON.stringify(fileList))
+        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
+        if (this.commonJS.isEmpty(showDivider)) {
+          this.showDivider = true
+        } else {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        }
+      },
+      async httpRequest (file) {
+        await httpRequest(file, fileName(file), this.directory, this.maxValue)
+      },
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => {
+            this.progressFlag = false
+          }, 1000) // 一秒后关闭进度条
+        }
+      },
+      getSize (value) {
+        if (this.commonJS.isEmpty(value)) {
+          return '0 B'
+        } else {
+          let val = parseInt(value)
+          if (this.commonJS.isEmpty(val)) {
+            return '0 B'
+          }
+          if (isNaN(val)) {
+            return '0 B'
+          }
+          if (val === 0) {
+            return '0 B'
+          }
+          let k = 1024
+          let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
+          let i = Math.floor(Math.log(val) / Math.log(k))
+          return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
+        }
+      },
+      async changes (file, fileList) {
+        // if (file.status !== 'ready') {
+        //   return
+        // }
+        if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+          this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+          return
+        }
+        this.dataListNew = []
+        this.dataList.forEach((item) => {
+          this.dataListNew.push(item)
+        })
+        for (let item of fileList) {
+          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item.createBy = {
+            id: '',
+            name: ''
+          }
+          item.createBy.id = this.$store.state.user.id
+          item.createBy.name = this.$store.state.user.name
+          this.dataListNew.push(item)
+        }
+        for await (let item of this.dataListNew) {
+          if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+            item.url = item.raw.url
+            if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+              await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                item.lsUrl = data.data
+              })
+            }
+          }
+        }
+        this.tableKey = Math.random()
+      },
+      showFile (row) {
+        openWindowOnUrl(row)
+      },
+      onPreview (url) {
+        this.url = url
+        this.showViewer = true
+      },
+      // 关闭查看器
+      closeViewer () {
+        this.url = ''
+        this.showViewer = false
+      },
+      toHref (row) {
+        toHref(row)
+      },
+      deleteById (row, index) {
+        this.dataListNew.splice(index, 1)
+        if (row.id !== null && row.id !== '' && row.id !== undefined) {
+          this.dataList.splice(index, 1)
+          // this.ossService.deleteMsgById(row.id)
+        } else {
+          let num
+          if (this.dataList.length > 0) {
+            num = this.dataList.length - 1
+          } else {
+            num = 0
+          }
+          this.$refs.upload.uploadFiles.splice(index - num, 1)
+        }
+      },
+      /**
+       * 关闭dialog时使用  清除el-upload中上传的文件
+       */
+      clearUpload () {
+        this.$refs.upload.uploadFiles = []
+        this.dataList = []
+        this.dataListNew = []
+        this.createBy = ''
+      },
+      /**
+       * 获取当前文件列表中的文件数据
+       */
+      getDataList () {
+        return this.dataListNew
+      },
+      /**
+       * 判断进度条是否结束，附件是否加载完成
+       * @returns {boolean}
+       */
+      checkProgress () {
+        if (this.progressFlag === true) {
+          this.$message.warning('请等待附件上传完成再进行操作')
+          return true
+        }
+        if (this.fileLoading === false) {
+          this.$message.warning('请等待附件加载完成再进行操作')
+          if (this.dataListLength === this.dataListNew.length) {
+            this.fileLoading = true
+          }
+          return true
+        }
+        return false
+      },
+      ifName (row) {
+        if (this.commonJS.isEmpty(row.name)) {
+          row.name = '---'
+          return false
+        }
+        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+          return true
+        } else {
+          return false
+        }
+      },
+      fileLoadingFalse () {
+        this.fileLoading = false
+      },
+      // 开启/关闭页面的加载中状态
+      changeLoading (loading) {
+        if (this.commonJS.isNotEmpty(loading)) {
+          this.loading = loading
+        } else {
+          this.loading = false
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  .el-divider__text {
+    font-size: 16px;
+    font-weight: bold;
+  }
+</style>

src/views/common/UpLoadComponentDialog.vue

@@ -0,0 +1,90 @@
+<!--文件上传组件-->
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :close-on-click-modal="false"
+      v-dialogDrag
+      width="1400px"
+      height="500px"
+      @close="close"
+      append-to-body
+      @keyup.enter.native=""
+      :visible.sync="visible">
+      <UpLoadComponentV2 ref="upLoadComponentV2"></UpLoadComponentV2>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
+      <el-button size="small" type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button>
+    </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+  import UpLoadComponentV2 from './UpLoadComponentV2'
+  export default {
+    data () {
+      return {
+        visible: false,
+        title: '',
+        index: ''
+      }
+    },
+    computed: {
+    },
+    watch: {
+    },
+    created () {
+    },
+    components: {
+      UpLoadComponentV2
+    },
+    mounted () {
+    },
+    methods: {
+      /**
+       * 文件上传组件初始化
+       * @param auth
+       *    auth的值为"view"时,不可上传/编辑文件
+       *    auth为其他值时,可上传/编辑文件
+       * @param fileList  要显示到文件上传列表中的文件。
+       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+       * @param directory  要存放到oss的哪个文件夹下。
+       *    注：值为空时，默认存放到"public"文件夹
+       * @param maxValue  上传文件允许的最大值，单位：MB
+       *    注：值为空时，默认值为300MB
+       * @param dividerName  组件中divider的名称
+       *    注：值为空时，默认值为‘附件’
+       * @param uploadFlag  ‘上传文件’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+       * @param delFlag  ‘删除’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+       * @param showDivider  ‘附件‘Divider是否展示
+       *    注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       */
+      newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider, index) {
+        this.index = index
+        this.title = '附件'
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs.upLoadComponentV2.newUpload(auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider)
+        })
+      },
+      doSubmit () {
+        if (!this.$refs.upLoadComponentV2.checkProgress()) {
+          this.$emit('getUpload', this.$refs.upLoadComponentV2.getDataList(), this.index)
+          this.close()
+        }
+      },
+      close () {
+        this.$refs.upLoadComponentV2.clearUpload()
+        this.visible = false
+      }
+    }
+  }
+</script>

src/views/common/UpLoadComponentV2.1.vue

@@ -0,0 +1,729 @@
+<!--文件上传组件-->
+<template>
+  <div>
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
+    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
+               :limit="999" :http-request="httpRequest"
+               multiple
+               :on-exceed="(files, fileList) =>{
+                      $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+                     }"
+               :show-file-list="false"
+               :on-change="changes"
+               :on-progress="uploadVideoProcess"
+               :file-list="fileList">
+      <el-button :loading="loading" type="primary" size="mini" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" @click="clickHandel" :disabled="auth==='view'&&uploadFlag===false">点击上传</el-button>
+    </el-upload>
+    <el-button v-if="showSign" :loading="loading" type="info" size="mini" style="float: right;" @click="clickSign">签章</el-button>
+    <div style="height: calc(100% - 80px);margin-top: 10px">
+      <!-- 进度条 -->
+      <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
+      <el-table
+        ref="uploadTable"
+        :key="tableKey"
+        v-loading="loading"
+        :data="dataListNew">
+        <el-table-column type="seq" width="40"></el-table-column>
+        <el-table-column label="文件名称" prop="name" align="center">
+          <template scope="scope">
+            <div v-if="ifName(scope.row) === true">
+              <el-image
+                style="width: 30px; height: 30px;padding-top: 4px"
+                :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]"
+              ></el-image>
+            </div>
+            <div v-else>
+              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
+        <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
+        <el-table-column label="文件大小" prop="size" align="center">
+          <template slot-scope="scope">
+            {{getSize(scope.row.size)}}
+          </template>
+        </el-table-column>
+        <el-table-column label="文件类型" prop="fileType" align="center">
+          <template slot="header" scope="scope">
+            <span style="color:red;font-size: 20px">* </span><span>文件类型</span>
+          </template>
+          <template slot-scope="scope">
+            <el-select v-if="auth !== 'view'" size="small" v-model="scope.row.fileType" placeholder="请选择">
+              <el-option
+                v-for="item in $dictUtils.getDictList('cw_project_report_file_type')"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <span v-else>{{$dictUtils.getDictLabel("cw_project_report_file_type", scope.row.fileType, '')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="盖章类型" prop="sealType" align="center">
+          <template slot="header" scope="scope">
+            <span style="color:red;font-size: 20px">* </span><span>盖章类型</span>
+          </template>
+          <template slot-scope="scope">
+            <el-select v-if="auth !== 'view'" @change="sealTypeChange(scope)" size="small" v-model="scope.row.sealType" placeholder="请选择">
+              <el-option
+                v-for="item in $dictUtils.getDictList('cw_seal_type')"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <span v-else>{{$dictUtils.getDictLabel("cw_seal_type", scope.row.sealType, '')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remarks" align="center">
+          <template slot-scope="scope">
+            <el-input size="small" v-if="auth !== 'view'" v-model="scope.row.remarks" placeholder="请输入"></el-input>
+            <span v-else>{{commonJS.isEmpty(scope.row.remarks)?'':scope.row.remarks}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200px" fixed="right" align="center">
+          <template  scope="scope">
+            <el-button type="text"  icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
+            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
+            <!--<el-button size="small" type="text" icon="el-icon-edit"
+                     @click="handleUpdate(scope.row, scope.$index)"
+            >{{ scope.row.btn || "修改" }}</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
+
+  </div>
+</template>
+
+<script>
+  // eslint-disable-next-line no-unused-vars
+  import OSSSerivce, {
+    httpRequest,
+    // eslint-disable-next-line no-unused-vars
+    handleRemove,
+    fileName,
+    // eslint-disable-next-line no-unused-vars
+    beforeAvatarUpload,
+    // eslint-disable-next-line no-unused-vars
+    openWindowOnUrl,
+    // eslint-disable-next-line no-unused-vars
+    toHref
+  } from '@/api/sys/OSSService'
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  import moment from 'moment'
+  export default {
+    data () {
+      return {
+        progressFlag: false,
+        loadProgress: 0,
+        fileList: [],
+        dataList: [],
+        dataListNew: [],
+        url: '',
+        showViewer: false,
+        ossService: null,
+        auth: '',
+        directory: 'public',
+        maxValue: 300,
+        tableKey: '',
+        fileLoading: true,
+        dividerName: '',
+        uploadFlag: false,
+        delFlag: false,
+        createBy: '',
+        showDivider: true,
+        fileType: '',
+        sealType: '',
+        remarks: '',
+        showSign: false,
+        loading: false,
+        dataListLength: ''
+      }
+    },
+    watch: {
+    },
+    created () {
+      this.ossService = new OSSSerivce()
+    },
+    components: {
+      ElImageViewer,
+      fileTypeComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.$dictUtils.getDictLabel('cw_project_report_file_type', this.value, '')
+            }
+          })
+        },
+        props: ['options', 'value']
+      },
+      fileTypeComponentB: {
+        data () {
+          return { fileType: '' }
+        },
+        props: ['options', 'value'],
+        mounted () {
+          this.fileType = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-select',
+            {
+              attrs: {
+                placeholder: '请选择',
+                value: this.$dictUtils.getDictLabel('cw_project_report_file_type', this.fileType, ''),
+                size: 'small',
+                clearable: true
+              },
+              props: ['value'],
+              on: {
+                change: (value) => {
+                  this.fileType = value
+                  this.$emit('updateFileType', value)
+                }
+              }
+            },
+            [
+              this.options.map((item) => {
+                let { label, value } = item
+                return h('el-option', {
+                  props: {
+                    label,
+                    value: parseInt(value),
+                    key: value
+                  }
+                })
+              })
+            ]
+          )
+        }
+      },
+      sealTypeComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.$dictUtils.getDictLabel('cw_seal_type', this.value, '')
+            }
+          })
+        },
+        props: ['options', 'value']
+      },
+      sealTypeComponentB: {
+        data () {
+          return { sealType: '' }
+        },
+        props: ['options', 'value', 'scope'],
+        mounted () {
+          this.sealType = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-select',
+            {
+              attrs: {
+                placeholder: '请选择',
+                value: this.$dictUtils.getDictLabel('cw_seal_type', this.sealType, ''),
+                size: 'small',
+                clearable: true
+              },
+              props: ['value'],
+              on: {
+                change: (value) => {
+                  let suffix = this.scope.row.name.substring(this.scope.row.name.lastIndexOf('.') + 1)
+                  if (parseInt(value) === 1) {
+                    if (suffix === 'pdf' || suffix === 'doc' || suffix === 'docx') {
+                      this.sealType = value
+                      this.$emit('updateSealType', value)
+                    } else {
+                      this.$message.error('只有“pdf、doc、docx”格式文件的盖章类型可以是“电子章”')
+                      this.sealType = ''
+                      this.$emit('updateSealType', '')
+                    }
+                  } else {
+                    this.sealType = value
+                    this.$emit('updateSealType', value)
+                  }
+                }
+              }
+            },
+            [
+              this.options.map((item) => {
+                let { label, value } = item
+                return h('el-option', {
+                  props: {
+                    label,
+                    value: parseInt(value),
+                    key: value
+                  }
+                })
+              })
+            ]
+          )
+        }
+      },
+      remarksComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.value
+            }
+          })
+        },
+        props: ['value']
+      },
+      remarksComponentB: {
+        data () {
+          return { remarks: '' }
+        },
+        props: ['value'],
+        mounted () {
+          this.remarks = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-input',
+            {
+              attrs: {
+                placeholder: '请输入',
+                value: this.remarks,
+                size: 'small',
+                clearable: true
+              },
+              props: ['value'],
+              on: {
+                input: (value) => {
+                  this.remarks = value
+                  this.$emit('updateRemarks', value)
+                }
+              }
+            }
+          )
+        }
+      }
+    },
+    mounted () {
+      window.onPreview = this.onPreview
+    },
+    methods: {
+      /**
+       * dividerName: 组件中divider的名称赋值
+       * showDivider: ‘附件‘Divider是否展示
+       *     注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       **/
+      setDividerName (dividerName, showDivider) {
+        if (this.commonJS.isNotEmpty(dividerName)) {
+          this.dividerName = dividerName
+        }
+        if (this.commonJS.isNotEmpty(showDivider)) {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        } else {
+          this.showDivider = true
+        }
+      },
+      /**
+       * 文件上传组件初始化
+       * @param auth
+       *    auth的值为"view"时,不可上传/编辑文件
+       *    auth为其他值时,可上传/编辑文件
+       * @param fileList  要显示到文件上传列表中的文件。
+       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+       * @param directory  要存放到oss的哪个文件夹下。
+       *    注：值为空时，默认存放到"public"文件夹
+       * @param maxValue  上传文件允许的最大值，单位：MB
+       *    注：值为空时，默认值为300MB
+       * @param dividerName  组件中divider的名称
+       *    注：值为空时，默认值为‘附件’
+       * @param uploadFlag  ‘上传文件’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+       * @param delFlag  ‘删除’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+       * @param showDivider  ‘附件‘Divider是否展示
+       *    注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       * @param showSign ‘签章’按钮 是否展示
+       *    注：值为空时，默认值为false 不展示
+       *    showSign=audit的时候 ‘签章’按钮展示
+       */
+      async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider, showSign) {
+        if (this.commonJS.isEmpty(showSign)) {
+          this.showSign = false
+        } else {
+          if (showSign === 'audit') {
+            this.showSign = true
+          } else {
+            this.showSign = false
+          }
+        }
+        await this.fileLoadingFalse()
+        if (this.commonJS.isEmpty(fileList)) {
+          this.fileLoading = true
+        } else {
+          this.dataListLength = fileList.length
+        }
+        if (this.commonJS.isEmpty(dividerName)) {
+          this.dividerName = '附件'
+        } else {
+          this.dividerName = dividerName
+        }
+        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+          this.directory = directory
+        } else {
+          this.directory = 'public'
+        }
+        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+          this.maxValue = maxValue
+        } else {
+          this.maxValue = 300
+        }
+        this.auth = auth
+        if (this.commonJS.isEmpty(uploadFlag)) {
+          this.uploadFlag = false
+        } else {
+          if (uploadFlag !== true && uploadFlag !== false) {
+            this.uploadFlag = false
+          } else {
+            this.uploadFlag = uploadFlag
+          }
+        }
+        if (this.commonJS.isEmpty(delFlag)) {
+          this.delFlag = false
+        } else {
+          if (delFlag !== true && delFlag !== false) {
+            this.delFlag = false
+            this.createBy = delFlag
+          } else {
+            this.delFlag = delFlag
+          }
+        }
+        for await (let item of fileList) {
+          if (item.url) {
+            await this.ossService.getFileSizeByUrl(item.url).then((data) => {
+              item.lsUrl = data.data.url
+              item.size = data.data.size
+              this.dataList.push(item)
+              this.dataListNew.push(item)
+              if (this.dataListNew.length === fileList.length) {
+                this.fileLoading = true
+              }
+            })
+          }
+        }
+        // this.dataList = JSON.parse(JSON.stringify(fileList))
+        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
+        if (this.commonJS.isEmpty(showDivider)) {
+          this.showDivider = true
+        } else {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        }
+      },
+      async httpRequest (file) {
+        await httpRequest(file, fileName(file), this.directory, this.maxValue)
+      },
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => {
+            this.progressFlag = false
+          }, 1000) // 一秒后关闭进度条
+        }
+      },
+      getSize (value) {
+        if (this.commonJS.isEmpty(value)) {
+          return '0 B'
+        } else {
+          let val = parseInt(value)
+          if (this.commonJS.isEmpty(val)) {
+            return '0 B'
+          }
+          if (isNaN(val)) {
+            return '0 B'
+          }
+          if (val === 0) {
+            return '0 B'
+          }
+          let k = 1024
+          let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
+          let i = Math.floor(Math.log(val) / Math.log(k))
+          return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
+        }
+      },
+      async changes (file, fileList) {
+        // if (file.status !== 'ready') {
+        //   return
+        // }
+        if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+          this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+          return
+        }
+        this.dataListNew = []
+        this.dataList.forEach((item) => {
+          this.dataListNew.push(item)
+        })
+        for (let item of fileList) {
+          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item.createBy = {
+            id: '',
+            name: ''
+          }
+          item.createBy.id = this.$store.state.user.id
+          item.createBy.name = this.$store.state.user.name
+          this.dataListNew.push(item)
+        }
+        for await (let item of this.dataListNew) {
+          if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+            item.url = item.raw.url
+            if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+              await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                item.lsUrl = data.data
+              })
+            }
+          }
+        }
+        this.tableKey = Math.random()
+      },
+      showFile (row) {
+        openWindowOnUrl(row)
+      },
+      onPreview (url) {
+        this.url = url
+        this.showViewer = true
+      },
+      // 关闭查看器
+      closeViewer () {
+        this.url = ''
+        this.showViewer = false
+      },
+      toHref (row) {
+        toHref(row)
+      },
+      deleteById (row, index) {
+        this.dataListNew.splice(index, 1)
+        if (row.id !== null && row.id !== '' && row.id !== undefined) {
+          this.dataList.splice(index, 1)
+          // this.ossService.deleteMsgById(row.id)
+        } else {
+          let num
+          if (this.dataList.length > 0) {
+            num = this.dataList.length - 1
+          } else {
+            num = 0
+          }
+          this.$refs.upload.uploadFiles.splice(index - num, 1)
+        }
+      },
+      /**
+       * 关闭dialog时使用  清除el-upload中上传的文件
+       */
+      clearUpload () {
+        this.$refs.upload.uploadFiles = []
+        this.dataList = []
+        this.dataListNew = []
+        this.createBy = ''
+      },
+      /**
+       * 获取当前文件列表中的文件数据
+       */
+      getDataList () {
+        let _this = this
+        const waitForEach = function () {
+          return new Promise(function (resolve, reject) {
+            _this.dataListNew.forEach((item, index) => {
+              if (item.btnType === 'save') {
+                _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
+                _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                _this.dataListNew[index].btn = '修改'
+                _this.dataListNew[index].btnType = 'edit'
+                _this.dataListNew[index].fileType = _this.fileType
+                _this.dataListNew[index].sealType = _this.sealType
+                _this.dataListNew[index].remarks = _this.remarks
+              }
+            })
+            _this.tableKey = Math.random()
+            resolve(_this.dataListNew)
+          })
+        }
+        return waitForEach()
+      },
+      /**
+       * 判断进度条是否结束，附件是否加载完成
+       * @returns {boolean}
+       */
+      checkProgress () {
+        if (this.progressFlag === true) {
+          this.$message.warning('请等待附件上传完成再进行操作')
+          return true
+        }
+        if (this.fileLoading === false) {
+          this.$message.warning('请等待附件加载完成再进行操作')
+          if (this.dataListLength === this.dataListNew.length) {
+            this.fileLoading = true
+          }
+          return true
+        }
+        return false
+      },
+      ifName (row) {
+        if (this.commonJS.isEmpty(row.name)) {
+          row.name = '---'
+          return false
+        }
+        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+          return true
+        } else {
+          return false
+        }
+      },
+      fileLoadingFalse () {
+        this.fileLoading = false
+      },
+      /** 修改||保存按钮操作 */
+      handleUpdate: async function (row, rowIndex) {
+        if (row.btnType === 'edit' || this.commonJS.isEmpty(row.btnType)) {
+          let _this = this
+          const waitForEach = function () {
+            return new Promise(function (resolve, reject) {
+              _this.dataListNew.forEach((item, index) => {
+                if (item.btnType === 'save') {
+                  _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                  _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
+                  _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                  _this.dataListNew[index].btn = '修改'
+                  _this.dataListNew[index].btnType = 'edit'
+                  _this.dataListNew[index].fileType = _this.fileType
+                  _this.dataListNew[index].sealType = _this.sealType
+                  _this.dataListNew[index].remarks = _this.remarks
+                }
+              })
+              resolve()
+            })
+          }
+          waitForEach().then(() => {
+            this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentB'
+            this.dataListNew[rowIndex].sealTypeComponent = 'sealTypeComponentB'
+            this.dataListNew[rowIndex].remarksComponent = 'remarksComponentB'
+            this.dataListNew[rowIndex].btn = '保存'
+            this.dataListNew[rowIndex].btnType = 'save'
+          })
+        } else {
+          this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentA'
+          this.dataListNew[rowIndex].sealTypeComponent = 'sealTypeComponentA'
+          this.dataListNew[rowIndex].remarksComponent = 'remarksComponentA'
+          this.dataListNew[rowIndex].btn = '修改'
+          this.dataListNew[rowIndex].btnType = 'edit'
+          this.dataListNew[rowIndex].fileType = this.fileType
+          this.dataListNew[rowIndex].sealType = this.sealType
+          this.dataListNew[rowIndex].remarks = this.remarks
+        }
+        this.tableKey = Math.random()
+      },
+      updateFileType (fileType) {
+        this.fileType = fileType
+      },
+      updateSealType (sealType) {
+        this.sealType = sealType
+      },
+      updateRemarks (remarks) {
+        this.remarks = remarks
+      },
+      tableRowClassName ({ row, rowIndex }) {
+        row.index = rowIndex
+      },
+      // 行点击事件
+      tableRowClick (row, column) {
+        if (this.auth !== 'view') {
+          if (column.label !== '备注' && column.label !== '文件名称' && column.label !== '操作') {
+            let _this = this
+            const waitForEach = function () {
+              return new Promise(function (resolve, reject) {
+                _this.dataListNew.forEach((item, index) => {
+                  if (item.btnType === 'save') {
+                    _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                    _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
+                    _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                    _this.dataListNew[index].btn = '修改'
+                    _this.dataListNew[index].btnType = 'edit'
+                    _this.dataListNew[index].fileType = _this.fileType
+                    _this.dataListNew[index].sealType = _this.sealType
+                    _this.dataListNew[index].remarks = _this.remarks
+                  }
+                })
+                resolve()
+              })
+            }
+            waitForEach().then(() => {
+              this.fileType = this.dataListNew[row.index].fileType
+              this.sealType = this.dataListNew[row.index].sealType
+              this.remarks = this.dataListNew[row.index].remarks
+              this.dataListNew[row.index].fileTypeComponent = 'fileTypeComponentB'
+              this.dataListNew[row.index].sealTypeComponent = 'sealTypeComponentB'
+              this.dataListNew[row.index].remarksComponent = 'remarksComponentB'
+              this.dataListNew[row.index].btn = '保存'
+              this.dataListNew[row.index].btnType = 'save'
+            })
+            this.tableKey = Math.random()
+          }
+        }
+      },
+      // 点击上传文件按钮的时候，把未保存的文件保存一下
+      clickHandel () {
+        this.dataListNew.forEach((item, index) => {
+          if (item.btnType === 'save') {
+            this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+            this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
+            this.dataListNew[index].remarksComponent = 'remarksComponentA'
+            this.dataListNew[index].btn = '修改'
+            this.dataListNew[index].btnType = 'edit'
+            this.dataListNew[index].fileType = this.fileType
+            this.dataListNew[index].sealType = this.sealType
+            this.dataListNew[index].remarks = this.remarks
+          }
+        })
+      },
+      sealTypeChange (scope) {
+        let suffix = scope.row.name.substring(scope.row.name.lastIndexOf('.') + 1)
+        if (parseInt(scope.row.sealType) === 1) {
+          if (suffix !== 'pdf' && suffix !== 'doc' && suffix !== 'docx') {
+            this.$message.error('只有“pdf、doc、docx”格式文件的盖章类型可以是“电子章”')
+            scope.row.sealType = ''
+          }
+        }
+      },
+      // 点击签章按钮事件
+      clickSign () {
+        this.$emit('clickSign')
+      },
+      // 隐藏签章按钮
+      hideSign () {
+        this.showSign = false
+      },
+      // 开启/关闭页面的加载中状态
+      changeLoading (loading) {
+        if (this.commonJS.isNotEmpty(loading)) {
+          this.loading = loading
+        } else {
+          this.loading = false
+        }
+      }
+    }
+  }
+</script>

src/views/common/UpLoadComponentV2.vue

@@ -0,0 +1,684 @@
+<!--文件上传组件-->
+<template>
+  <div>
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
+    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
+               :limit="999" :http-request="httpRequest"
+               multiple
+               :on-exceed="(files, fileList) =>{
+                      $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+                     }"
+               :show-file-list="false"
+               :on-change="changes"
+               :on-progress="uploadVideoProcess"
+               :file-list="fileList">
+      <el-button :loading="loading" type="primary" size="mini" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" @click="clickHandel" :disabled="auth==='view'&&uploadFlag===false">点击上传</el-button>
+    </el-upload>
+    <div style="height: calc(100% - 80px);margin-top: 10px">
+      <!-- 进度条 -->
+      <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
+      <el-table
+        ref="uploadTable"
+        :key="tableKey"
+        @row-click="tableRowClick"
+        :row-class-name="tableRowClassName"
+        v-loading="loading"
+        :data="dataListNew">
+        <el-table-column type="seq" width="40"></el-table-column>
+        <el-table-column label="文件名称" prop="name" align="center">
+          <template scope="scope">
+            <div v-if="ifName(scope.row) === true">
+              <el-image
+                style="width: 30px; height: 30px;padding-top: 4px"
+                :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]"
+              ></el-image>
+            </div>
+            <div v-else>
+              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="auth !== 'view'" label="创建人" prop="createBy.name" align="center"></el-table-column>
+        <el-table-column v-if="auth !== 'view'" label="创建时间" prop="createDate" align="center"></el-table-column>
+        <el-table-column label="文件大小" prop="size" align="center">
+          <template slot-scope="scope">
+            {{getSize(scope.row.size)}}
+          </template>
+        </el-table-column>
+        <el-table-column label="文件类型" prop="fileType" align="center">
+          <template slot-scope="scope">
+            <component
+              :is="scope.row.fileTypeComponent || 'fileTypeComponentA'"
+              :options="$dictUtils.getDictList('cw_project_report_file_type')"
+              :value="scope.row.fileType"
+              @updateFileType="updateFileType"
+            ></component>
+          </template>
+        </el-table-column>
+        <el-table-column label="盖章类型" prop="sealType" align="center">
+          <template slot-scope="scope">
+            <component
+              :is="scope.row.sealTypeComponent || 'sealTypeComponentA'"
+              :options="$dictUtils.getDictList('cw_seal_type')"
+              :value="scope.row.sealType"
+              :scope="scope"
+              @updateSealType="updateSealType"
+            ></component>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remarks" align="center">
+          <template slot-scope="scope">
+            <component
+              :is="scope.row.remarksComponent || 'remarksComponentA'"
+              :value="scope.row.remarks"
+              @updateRemarks="updateRemarks"
+            ></component>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200px" fixed="right" align="center">
+          <template  scope="scope">
+            <el-button type="text"  icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
+            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
+            <!--<el-button size="small" type="text" icon="el-icon-edit"
+                     @click="handleUpdate(scope.row, scope.$index)"
+            >{{ scope.row.btn || "修改" }}</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
+
+  </div>
+</template>
+
+<script>
+  // eslint-disable-next-line no-unused-vars
+  import OSSSerivce, {
+    httpRequest,
+    // eslint-disable-next-line no-unused-vars
+    handleRemove,
+    fileName,
+    // eslint-disable-next-line no-unused-vars
+    beforeAvatarUpload,
+    // eslint-disable-next-line no-unused-vars
+    openWindowOnUrl,
+    // eslint-disable-next-line no-unused-vars
+    toHref
+  } from '@/api/sys/OSSService'
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  import moment from 'moment'
+  export default {
+    data () {
+      return {
+        progressFlag: false,
+        loadProgress: 0,
+        fileList: [],
+        dataList: [],
+        dataListNew: [],
+        url: '',
+        showViewer: false,
+        ossService: null,
+        auth: '',
+        directory: 'public',
+        maxValue: 300,
+        tableKey: '',
+        fileLoading: true,
+        dividerName: '',
+        uploadFlag: false,
+        delFlag: false,
+        createBy: '',
+        showDivider: true,
+        fileType: '',
+        sealType: '',
+        remarks: '',
+        loading: false
+      }
+    },
+    watch: {
+    },
+    created () {
+      this.ossService = new OSSSerivce()
+    },
+    components: {
+      ElImageViewer,
+      fileTypeComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.$dictUtils.getDictLabel('cw_project_report_file_type', this.value, '')
+            }
+          })
+        },
+        props: ['options', 'value']
+      },
+      fileTypeComponentB: {
+        data () {
+          return { fileType: '' }
+        },
+        props: ['options', 'value'],
+        mounted () {
+          this.fileType = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-select',
+            {
+              attrs: {
+                placeholder: '请选择',
+                value: this.$dictUtils.getDictLabel('cw_project_report_file_type', this.fileType, ''),
+                size: 'small',
+                clearable: true
+              },
+              props: ['value'],
+              on: {
+                change: (value) => {
+                  this.fileType = value
+                  this.$emit('updateFileType', value)
+                }
+              }
+            },
+            [
+              this.options.map((item) => {
+                let { label, value } = item
+                return h('el-option', {
+                  props: {
+                    label,
+                    value: parseInt(value),
+                    key: value
+                  }
+                })
+              })
+            ]
+          )
+        }
+      },
+      sealTypeComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.$dictUtils.getDictLabel('cw_seal_type', this.value, '')
+            }
+          })
+        },
+        props: ['options', 'value']
+      },
+      sealTypeComponentB: {
+        data () {
+          return { sealType: '' }
+        },
+        props: ['options', 'value', 'scope'],
+        mounted () {
+          this.sealType = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-select',
+            {
+              attrs: {
+                placeholder: '请选择',
+                value: this.$dictUtils.getDictLabel('cw_seal_type', this.sealType, ''),
+                size: 'small',
+                clearable: true
+              },
+              props: ['value'],
+              on: {
+                change: (value) => {
+                  let suffix = this.scope.row.name.substring(this.scope.row.name.lastIndexOf('.') + 1)
+                  if (parseInt(value) === 1) {
+                    if (suffix === 'pdf' || suffix === 'doc' || suffix === 'docx') {
+                      this.sealType = value
+                      this.$emit('updateSealType', value)
+                    } else {
+                      this.$message.error('只有“pdf、doc、docx”格式文件的盖章类型可以是“电子章”')
+                      this.sealType = ''
+                      this.$emit('updateSealType', '')
+                    }
+                  } else {
+                    this.sealType = value
+                    this.$emit('updateSealType', value)
+                  }
+                }
+              }
+            },
+            [
+              this.options.map((item) => {
+                let { label, value } = item
+                return h('el-option', {
+                  props: {
+                    label,
+                    value: parseInt(value),
+                    key: value
+                  }
+                })
+              })
+            ]
+          )
+        }
+      },
+      remarksComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.value
+            }
+          })
+        },
+        props: ['value']
+      },
+      remarksComponentB: {
+        data () {
+          return { remarks: '' }
+        },
+        props: ['value'],
+        mounted () {
+          this.remarks = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-input',
+            {
+              attrs: {
+                placeholder: '请输入',
+                value: this.remarks,
+                size: 'small',
+                clearable: true
+              },
+              props: ['value'],
+              on: {
+                input: (value) => {
+                  this.remarks = value
+                  this.$emit('updateRemarks', value)
+                }
+              }
+            }
+          )
+        }
+      }
+    },
+    mounted () {
+      window.onPreview = this.onPreview
+    },
+    methods: {
+      /**
+       * dividerName: 组件中divider的名称赋值
+       * showDivider: ‘附件‘Divider是否展示
+       *     注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       **/
+      setDividerName (dividerName, showDivider) {
+        if (this.commonJS.isNotEmpty(dividerName)) {
+          this.dividerName = dividerName
+        }
+        if (this.commonJS.isNotEmpty(showDivider)) {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        } else {
+          this.showDivider = true
+        }
+      },
+      /**
+       * 文件上传组件初始化
+       * @param auth
+       *    auth的值为"view"时,不可上传/编辑文件
+       *    auth为其他值时,可上传/编辑文件
+       * @param fileList  要显示到文件上传列表中的文件。
+       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+       * @param directory  要存放到oss的哪个文件夹下。
+       *    注：值为空时，默认存放到"public"文件夹
+       * @param maxValue  上传文件允许的最大值，单位：MB
+       *    注：值为空时，默认值为300MB
+       * @param dividerName  组件中divider的名称
+       *    注：值为空时，默认值为‘附件’
+       * @param uploadFlag  ‘上传文件’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+       * @param delFlag  ‘删除’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+       * @param showDivider  ‘附件‘Divider是否展示
+       *    注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       */
+      async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
+        await this.fileLoadingFalse()
+        if (this.commonJS.isEmpty(dividerName)) {
+          this.dividerName = '附件'
+        } else {
+          this.dividerName = dividerName
+        }
+        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+          this.directory = directory
+        } else {
+          this.directory = 'public'
+        }
+        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+          this.maxValue = maxValue
+        } else {
+          this.maxValue = 300
+        }
+        this.auth = auth
+        if (this.commonJS.isEmpty(uploadFlag)) {
+          this.uploadFlag = false
+        } else {
+          if (uploadFlag !== true && uploadFlag !== false) {
+            this.uploadFlag = false
+          } else {
+            this.uploadFlag = uploadFlag
+          }
+        }
+        if (this.commonJS.isEmpty(delFlag)) {
+          this.delFlag = false
+        } else {
+          if (delFlag !== true && delFlag !== false) {
+            this.delFlag = false
+            this.createBy = delFlag
+          } else {
+            this.delFlag = delFlag
+          }
+        }
+        if (this.commonJS.isEmpty(fileList)) {
+          this.fileLoading = true
+        }
+        for await (let item of fileList) {
+          await this.ossService.getFileSizeByUrl(item.url).then((data) => {
+            item.lsUrl = data.data.url
+            item.size = data.data.size
+            this.dataList.push(item)
+            this.dataListNew.push(item)
+            if (this.dataList.length === fileList.length) {
+              this.fileLoading = true
+            }
+          })
+        }
+        // this.dataList = JSON.parse(JSON.stringify(fileList))
+        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
+        if (this.commonJS.isEmpty(showDivider)) {
+          this.showDivider = true
+        } else {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        }
+      },
+      async httpRequest (file) {
+        await httpRequest(file, fileName(file), this.directory, this.maxValue)
+      },
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => {
+            this.progressFlag = false
+          }, 1000) // 一秒后关闭进度条
+        }
+      },
+      getSize (value) {
+        if (this.commonJS.isEmpty(value)) {
+          return '0 B'
+        } else {
+          let val = parseInt(value)
+          if (this.commonJS.isEmpty(val)) {
+            return '0 B'
+          }
+          if (isNaN(val)) {
+            return '0 B'
+          }
+          if (val === 0) {
+            return '0 B'
+          }
+          let k = 1024
+          let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
+          let i = Math.floor(Math.log(val) / Math.log(k))
+          return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
+        }
+      },
+      async changes (file, fileList) {
+        // if (file.status !== 'ready') {
+        //   return
+        // }
+        if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+          this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+          return
+        }
+        this.dataListNew = []
+        this.dataList.forEach((item) => {
+          this.dataListNew.push(item)
+        })
+        for (let item of fileList) {
+          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item.createBy = {
+            id: '',
+            name: ''
+          }
+          item.createBy.id = this.$store.state.user.id
+          item.createBy.name = this.$store.state.user.name
+          this.dataListNew.push(item)
+        }
+        for await (let item of this.dataListNew) {
+          if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+            item.url = item.raw.url
+            if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+              await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                item.lsUrl = data.data
+              })
+            }
+          }
+        }
+        this.tableKey = Math.random()
+      },
+      showFile (row) {
+        openWindowOnUrl(row)
+      },
+      onPreview (url) {
+        this.url = url
+        this.showViewer = true
+      },
+      // 关闭查看器
+      closeViewer () {
+        this.url = ''
+        this.showViewer = false
+      },
+      toHref (row) {
+        toHref(row)
+      },
+      deleteById (row, index) {
+        this.dataListNew.splice(index, 1)
+        if (row.id !== null && row.id !== '' && row.id !== undefined) {
+          this.dataList.splice(index, 1)
+          // this.ossService.deleteMsgById(row.id)
+        } else {
+          let num
+          if (this.dataList.length > 0) {
+            num = this.dataList.length - 1
+          } else {
+            num = 0
+          }
+          this.$refs.upload.uploadFiles.splice(index - num, 1)
+        }
+      },
+      /**
+       * 关闭dialog时使用  清除el-upload中上传的文件
+       */
+      clearUpload () {
+        this.$refs.upload.uploadFiles = []
+        this.dataList = []
+        this.dataListNew = []
+        this.createBy = ''
+      },
+      /**
+       * 获取当前文件列表中的文件数据
+       */
+      getDataList () {
+        let _this = this
+        const waitForEach = function () {
+          return new Promise(function (resolve, reject) {
+            _this.dataListNew.forEach((item, index) => {
+              if (item.btnType === 'save') {
+                _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
+                _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                _this.dataListNew[index].btn = '修改'
+                _this.dataListNew[index].btnType = 'edit'
+                _this.dataListNew[index].fileType = _this.fileType
+                _this.dataListNew[index].sealType = _this.sealType
+                _this.dataListNew[index].remarks = _this.remarks
+              }
+            })
+            _this.tableKey = Math.random()
+            resolve(_this.dataListNew)
+          })
+        }
+        return waitForEach()
+      },
+      /**
+       * 判断进度条是否结束，附件是否加载完成
+       * @returns {boolean}
+       */
+      checkProgress () {
+        if (this.progressFlag === true) {
+          this.$message.warning('请等待附件上传完成再进行操作')
+          return true
+        }
+        if (this.fileLoading === false) {
+          this.$message.warning('请等待附件加载完成再进行操作')
+          return true
+        }
+        return false
+      },
+      ifName (row) {
+        if (this.commonJS.isEmpty(row.name)) {
+          row.name = '---'
+          return false
+        }
+        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+          return true
+        } else {
+          return false
+        }
+      },
+      fileLoadingFalse () {
+        this.fileLoading = false
+      },
+      /** 修改||保存按钮操作 */
+      handleUpdate: async function (row, rowIndex) {
+        if (row.btnType === 'edit' || this.commonJS.isEmpty(row.btnType)) {
+          let _this = this
+          const waitForEach = function () {
+            return new Promise(function (resolve, reject) {
+              _this.dataListNew.forEach((item, index) => {
+                if (item.btnType === 'save') {
+                  _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                  _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
+                  _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                  _this.dataListNew[index].btn = '修改'
+                  _this.dataListNew[index].btnType = 'edit'
+                  _this.dataListNew[index].fileType = _this.fileType
+                  _this.dataListNew[index].sealType = _this.sealType
+                  _this.dataListNew[index].remarks = _this.remarks
+                }
+              })
+              resolve()
+            })
+          }
+          waitForEach().then(() => {
+            this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentB'
+            this.dataListNew[rowIndex].sealTypeComponent = 'sealTypeComponentB'
+            this.dataListNew[rowIndex].remarksComponent = 'remarksComponentB'
+            this.dataListNew[rowIndex].btn = '保存'
+            this.dataListNew[rowIndex].btnType = 'save'
+          })
+        } else {
+          this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentA'
+          this.dataListNew[rowIndex].sealTypeComponent = 'sealTypeComponentA'
+          this.dataListNew[rowIndex].remarksComponent = 'remarksComponentA'
+          this.dataListNew[rowIndex].btn = '修改'
+          this.dataListNew[rowIndex].btnType = 'edit'
+          this.dataListNew[rowIndex].fileType = this.fileType
+          this.dataListNew[rowIndex].sealType = this.sealType
+          this.dataListNew[rowIndex].remarks = this.remarks
+        }
+        this.tableKey = Math.random()
+      },
+      updateFileType (fileType) {
+        this.fileType = fileType
+      },
+      updateSealType (sealType) {
+        this.sealType = sealType
+      },
+      updateRemarks (remarks) {
+        this.remarks = remarks
+      },
+      tableRowClassName ({ row, rowIndex }) {
+        row.index = rowIndex
+      },
+      // 行点击事件
+      tableRowClick (row, column) {
+        if (this.auth !== 'view') {
+          if (column.label !== '备注' && column.label !== '文件名称' && column.label !== '操作') {
+            let _this = this
+            const waitForEach = function () {
+              return new Promise(function (resolve, reject) {
+                _this.dataListNew.forEach((item, index) => {
+                  if (item.btnType === 'save') {
+                    _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                    _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
+                    _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                    _this.dataListNew[index].btn = '修改'
+                    _this.dataListNew[index].btnType = 'edit'
+                    _this.dataListNew[index].fileType = _this.fileType
+                    _this.dataListNew[index].sealType = _this.sealType
+                    _this.dataListNew[index].remarks = _this.remarks
+                  }
+                })
+                resolve()
+              })
+            }
+            waitForEach().then(() => {
+              this.fileType = this.dataListNew[row.index].fileType
+              this.sealType = this.dataListNew[row.index].sealType
+              this.remarks = this.dataListNew[row.index].remarks
+              this.dataListNew[row.index].fileTypeComponent = 'fileTypeComponentB'
+              this.dataListNew[row.index].sealTypeComponent = 'sealTypeComponentB'
+              this.dataListNew[row.index].remarksComponent = 'remarksComponentB'
+              this.dataListNew[row.index].btn = '保存'
+              this.dataListNew[row.index].btnType = 'save'
+            })
+            this.tableKey = Math.random()
+          }
+        }
+      },
+      // 点击上传文件按钮的时候，把未保存的文件保存一下
+      clickHandel () {
+        this.dataListNew.forEach((item, index) => {
+          if (item.btnType === 'save') {
+            this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+            this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
+            this.dataListNew[index].remarksComponent = 'remarksComponentA'
+            this.dataListNew[index].btn = '修改'
+            this.dataListNew[index].btnType = 'edit'
+            this.dataListNew[index].fileType = this.fileType
+            this.dataListNew[index].sealType = this.sealType
+            this.dataListNew[index].remarks = this.remarks
+          }
+        })
+      },
+      // 开启/关闭页面的加载中状态
+      changeLoading (loading) {
+        if (this.commonJS.isNotEmpty(loading)) {
+          this.loading = loading
+        } else {
+          this.loading = false
+        }
+      }
+    }
+  }
+</script>

src/views/common/UpLoadComponentV3.1.vue

@@ -0,0 +1,594 @@
+<!--文件上传组件-->
+<template>
+  <div>
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
+    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
+               :limit="999" :http-request="httpRequest"
+               multiple
+               :on-exceed="(files, fileList) =>{
+                      $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+                     }"
+               :show-file-list="false"
+               :on-change="changes"
+               :on-progress="uploadVideoProcess"
+               :file-list="fileList">
+      <el-button :loading="loading" type="primary" size="mini" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" @click="clickHandel" :disabled="auth==='view'&&uploadFlag===false">点击上传</el-button>
+    </el-upload>
+    <div style="height: calc(100% - 80px);margin-top: 10px">
+      <!-- 进度条 -->
+      <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
+      <el-table
+        ref="uploadTable"
+        :key="tableKey"
+        v-loading="loading"
+        :data="dataListNew">
+        <el-table-column type="seq" width="40"></el-table-column>
+        <el-table-column label="文件名称" prop="name" align="center">
+          <template scope="scope">
+            <div v-if="ifName(scope.row) === true">
+              <el-image
+                style="width: 30px; height: 30px;padding-top: 4px"
+                :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]"
+              ></el-image>
+            </div>
+            <div v-else>
+              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
+        <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
+        <el-table-column label="文件大小" prop="size" align="center">
+          <template slot-scope="scope">
+            {{getSize(scope.row.size)}}
+          </template>
+        </el-table-column>
+        <el-table-column label="文件类型" prop="fileType" align="center">
+          <template slot="header" scope="scope">
+            <span style="color:red;font-size: 20px">* </span><span>文件类型</span>
+          </template>
+          <template slot-scope="scope">
+            <el-select v-if="auth !== 'view'" size="small" v-model="scope.row.fileType" placeholder="请选择">
+              <el-option
+                v-for="item in $dictUtils.getDictList('cw_project_report_archive_file_type')"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <span v-else>{{$dictUtils.getDictLabel("cw_project_report_archive_file_type", scope.row.fileType, '')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remarks" align="center">
+          <template slot-scope="scope">
+            <el-input size="small" v-if="auth !== 'view'" v-model="scope.row.remarks" placeholder="请输入"></el-input>
+            <span v-else>{{commonJS.isEmpty(scope.row.remarks)?'':scope.row.remarks}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200px" fixed="right" align="center">
+          <template  scope="scope">
+            <el-button type="text"  icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
+            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
+            <!--<el-button size="small" type="text" icon="el-icon-edit"
+                     @click="handleUpdate(scope.row, scope.$index)"
+            >{{ scope.row.btn || "修改" }}</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
+
+  </div>
+</template>
+
+<script>
+  // eslint-disable-next-line no-unused-vars
+  import OSSSerivce, {
+    httpRequest,
+    // eslint-disable-next-line no-unused-vars
+    handleRemove,
+    fileName,
+    // eslint-disable-next-line no-unused-vars
+    beforeAvatarUpload,
+    // eslint-disable-next-line no-unused-vars
+    openWindowOnUrl,
+    // eslint-disable-next-line no-unused-vars
+    toHref
+  } from '@/api/sys/OSSService'
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  import moment from 'moment'
+  export default {
+    data () {
+      return {
+        progressFlag: false,
+        loadProgress: 0,
+        fileList: [],
+        dataList: [],
+        dataListNew: [],
+        url: '',
+        showViewer: false,
+        ossService: null,
+        auth: '',
+        directory: 'public',
+        maxValue: 300,
+        tableKey: '',
+        fileLoading: true,
+        dividerName: '',
+        uploadFlag: false,
+        delFlag: false,
+        createBy: '',
+        showDivider: true,
+        fileType: '',
+        remarks: '',
+        loading: false
+      }
+    },
+    watch: {
+    },
+    created () {
+      this.ossService = new OSSSerivce()
+    },
+    components: {
+      ElImageViewer,
+      fileTypeComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.$dictUtils.getDictLabel('cw_project_report_archive_file_type', this.value, '')
+            }
+          })
+        },
+        props: ['options', 'value']
+      },
+      fileTypeComponentB: {
+        data () {
+          return { fileType: '' }
+        },
+        props: ['options', 'value'],
+        mounted () {
+          this.fileType = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-select',
+            {
+              attrs: {
+                placeholder: '请选择',
+                value: this.$dictUtils.getDictLabel('cw_project_report_archive_file_type', this.fileType, ''),
+                size: 'small',
+                clearable: true
+              },
+              props: ['options', 'value'],
+              on: {
+                change: (value) => {
+                  this.fileType = value
+                  this.$emit('updateFileType', value)
+                }
+              }
+            },
+            [
+              this.options.map((item) => {
+                let { label, value } = item
+                return h('el-option', {
+                  props: {
+                    label,
+                    value: parseInt(value),
+                    key: value
+                  }
+                })
+              })
+            ]
+          )
+        }
+      },
+      remarksComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.value
+            }
+          })
+        },
+        props: ['value']
+      },
+      remarksComponentB: {
+        data () {
+          return { remarks: '' }
+        },
+        props: ['value'],
+        mounted () {
+          this.remarks = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-input',
+            {
+              attrs: {
+                placeholder: '请输入',
+                value: this.remarks,
+                size: 'small',
+                clearable: true
+              },
+              props: ['value'],
+              on: {
+                input: (value) => {
+                  this.remarks = value
+                  this.$emit('updateRemarks', value)
+                }
+              }
+            }
+          )
+        }
+      }
+    },
+    mounted () {
+      window.onPreview = this.onPreview
+    },
+    methods: {
+      /**
+       * dividerName: 组件中divider的名称赋值
+       * showDivider: ‘附件‘Divider是否展示
+       *     注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       **/
+      setDividerName (dividerName, showDivider) {
+        if (this.commonJS.isNotEmpty(dividerName)) {
+          this.dividerName = dividerName
+        }
+        if (this.commonJS.isNotEmpty(showDivider)) {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        } else {
+          this.showDivider = true
+        }
+      },
+      /**
+       * 文件上传组件初始化
+       * @param auth
+       *    auth的值为"view"时,不可上传/编辑文件
+       *    auth为其他值时,可上传/编辑文件
+       * @param fileList  要显示到文件上传列表中的文件。
+       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+       * @param directory  要存放到oss的哪个文件夹下。
+       *    注：值为空时，默认存放到"public"文件夹
+       * @param maxValue  上传文件允许的最大值，单位：MB
+       *    注：值为空时，默认值为300MB
+       * @param dividerName  组件中divider的名称
+       *    注：值为空时，默认值为‘附件’
+       * @param uploadFlag  ‘上传文件’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+       * @param delFlag  ‘删除’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+       * @param showDivider  ‘附件‘Divider是否展示
+       *    注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       */
+      async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
+        await this.fileLoadingFalse()
+        if (this.commonJS.isEmpty(dividerName)) {
+          this.dividerName = '附件'
+        } else {
+          this.dividerName = dividerName
+        }
+        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+          this.directory = directory
+        } else {
+          this.directory = 'public'
+        }
+        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+          this.maxValue = maxValue
+        } else {
+          this.maxValue = 300
+        }
+        this.auth = auth
+        if (this.commonJS.isEmpty(uploadFlag)) {
+          this.uploadFlag = false
+        } else {
+          if (uploadFlag !== true && uploadFlag !== false) {
+            this.uploadFlag = false
+          } else {
+            this.uploadFlag = uploadFlag
+          }
+        }
+        if (this.commonJS.isEmpty(delFlag)) {
+          this.delFlag = false
+        } else {
+          if (delFlag !== true && delFlag !== false) {
+            this.delFlag = false
+            this.createBy = delFlag
+          } else {
+            this.delFlag = delFlag
+          }
+        }
+        if (this.commonJS.isEmpty(fileList)) {
+          this.fileLoading = true
+        }
+        for await (let item of fileList) {
+          await this.ossService.getFileSizeByUrl(item.url).then((data) => {
+            item.lsUrl = data.data.url
+            item.size = data.data.size
+            this.dataList.push(item)
+            this.dataListNew.push(item)
+            if (this.dataList.length === fileList.length) {
+              this.fileLoading = true
+            }
+          })
+        }
+        // this.dataList = JSON.parse(JSON.stringify(fileList))
+        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
+        if (this.commonJS.isEmpty(showDivider)) {
+          this.showDivider = true
+        } else {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        }
+      },
+      async httpRequest (file) {
+        await httpRequest(file, fileName(file), this.directory, this.maxValue)
+      },
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => {
+            this.progressFlag = false
+          }, 1000) // 一秒后关闭进度条
+        }
+      },
+      getSize (value) {
+        if (this.commonJS.isEmpty(value)) {
+          return '0 B'
+        } else {
+          let val = parseInt(value)
+          if (this.commonJS.isEmpty(val)) {
+            return '0 B'
+          }
+          if (isNaN(val)) {
+            return '0 B'
+          }
+          if (val === 0) {
+            return '0 B'
+          }
+          let k = 1024
+          let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
+          let i = Math.floor(Math.log(val) / Math.log(k))
+          return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
+        }
+      },
+      async changes (file, fileList) {
+        // if (file.status !== 'ready') {
+        //   return
+        // }
+        if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+          this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+          return
+        }
+        this.dataListNew = []
+        this.dataList.forEach((item) => {
+          this.dataListNew.push(item)
+        })
+        for (let item of fileList) {
+          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item.createBy = {
+            id: '',
+            name: ''
+          }
+          item.createBy.id = this.$store.state.user.id
+          item.createBy.name = this.$store.state.user.name
+          this.dataListNew.push(item)
+        }
+        for await (let item of this.dataListNew) {
+          if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+            item.url = item.raw.url
+            if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+              await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                item.lsUrl = data.data
+              })
+            }
+          }
+        }
+        this.tableKey = Math.random()
+      },
+      showFile (row) {
+        openWindowOnUrl(row)
+      },
+      onPreview (url) {
+        this.url = url
+        this.showViewer = true
+      },
+      // 关闭查看器
+      closeViewer () {
+        this.url = ''
+        this.showViewer = false
+      },
+      toHref (row) {
+        toHref(row)
+      },
+      deleteById (row, index) {
+        this.dataListNew.splice(index, 1)
+        if (row.id !== null && row.id !== '' && row.id !== undefined) {
+          this.dataList.splice(index, 1)
+          // this.ossService.deleteMsgById(row.id)
+        } else {
+          let num
+          if (this.dataList.length > 0) {
+            num = this.dataList.length - 1
+          } else {
+            num = 0
+          }
+          this.$refs.upload.uploadFiles.splice(index - num, 1)
+        }
+      },
+      /**
+       * 关闭dialog时使用  清除el-upload中上传的文件
+       */
+      clearUpload () {
+        this.$refs.upload.uploadFiles = []
+        this.dataList = []
+        this.dataListNew = []
+        this.createBy = ''
+      },
+      /**
+       * 获取当前文件列表中的文件数据
+       */
+      getDataList () {
+        let _this = this
+        const waitForEach = function () {
+          return new Promise(function (resolve, reject) {
+            _this.dataListNew.forEach((item, index) => {
+              if (item.btnType === 'save') {
+                _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                _this.dataListNew[index].btn = '修改'
+                _this.dataListNew[index].btnType = 'edit'
+                _this.dataListNew[index].fileType = _this.fileType
+                _this.dataListNew[index].remarks = _this.remarks
+              }
+            })
+            _this.tableKey = Math.random()
+            resolve(_this.dataListNew)
+          })
+        }
+        return waitForEach()
+      },
+      /**
+       * 判断进度条是否结束，附件是否加载完成
+       * @returns {boolean}
+       */
+      checkProgress () {
+        if (this.progressFlag === true) {
+          this.$message.warning('请等待附件上传完成再进行操作')
+          return true
+        }
+        if (this.fileLoading === false) {
+          this.$message.warning('请等待附件加载完成再进行操作')
+          return true
+        }
+        return false
+      },
+      ifName (row) {
+        if (this.commonJS.isEmpty(row.name)) {
+          row.name = '---'
+          return false
+        }
+        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+          return true
+        } else {
+          return false
+        }
+      },
+      fileLoadingFalse () {
+        this.fileLoading = false
+      },
+      /** 修改||保存按钮操作 */
+      handleUpdate: async function (row, rowIndex) {
+        if (row.btnType === 'edit' || this.commonJS.isEmpty(row.btnType)) {
+          let _this = this
+          const waitForEach = function () {
+            return new Promise(function (resolve, reject) {
+              _this.dataListNew.forEach((item, index) => {
+                if (item.btnType === 'save') {
+                  _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                  _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                  _this.dataListNew[index].btn = '修改'
+                  _this.dataListNew[index].btnType = 'edit'
+                  _this.dataListNew[index].fileType = _this.fileType
+                  _this.dataListNew[index].remarks = _this.remarks
+                }
+              })
+              resolve()
+            })
+          }
+          waitForEach().then(() => {
+            this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentB'
+            this.dataListNew[rowIndex].remarksComponent = 'remarksComponentB'
+            this.dataListNew[rowIndex].btn = '保存'
+            this.dataListNew[rowIndex].btnType = 'save'
+          })
+        } else {
+          this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentA'
+          this.dataListNew[rowIndex].remarksComponent = 'remarksComponentA'
+          this.dataListNew[rowIndex].btn = '修改'
+          this.dataListNew[rowIndex].btnType = 'edit'
+          this.dataListNew[rowIndex].fileType = this.fileType
+          this.dataListNew[rowIndex].remarks = this.remarks
+        }
+        this.tableKey = Math.random()
+      },
+      updateFileType (fileType) {
+        this.fileType = fileType
+      },
+      updateRemarks (remarks) {
+        this.remarks = remarks
+      },
+      tableRowClassName ({ row, rowIndex }) {
+        row.index = rowIndex
+      },
+      // 行点击事件
+      tableRowClick (row, column) {
+        if (this.auth !== 'view') {
+          if (column.label !== '备注' && column.label !== '文件名称' && column.label !== '操作') {
+            let _this = this
+            const waitForEach = function () {
+              return new Promise(function (resolve, reject) {
+                _this.dataListNew.forEach((item, index) => {
+                  if (item.btnType === 'save') {
+                    _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                    _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                    _this.dataListNew[index].btn = '修改'
+                    _this.dataListNew[index].btnType = 'edit'
+                    _this.dataListNew[index].fileType = _this.fileType
+                    _this.dataListNew[index].remarks = _this.remarks
+                  }
+                })
+                resolve()
+              })
+            }
+            waitForEach().then(() => {
+              this.fileType = this.dataListNew[row.index].fileType
+              this.remarks = this.dataListNew[row.index].remarks
+              this.dataListNew[row.index].fileTypeComponent = 'fileTypeComponentB'
+              this.dataListNew[row.index].remarksComponent = 'remarksComponentB'
+              this.dataListNew[row.index].btn = '保存'
+              this.dataListNew[row.index].btnType = 'save'
+            })
+            this.tableKey = Math.random()
+          }
+        }
+      },
+      // 点击上传文件按钮的时候，把未保存的文件保存一下
+      clickHandel () {
+        this.dataListNew.forEach((item, index) => {
+          if (item.btnType === 'save') {
+            this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+            this.dataListNew[index].remarksComponent = 'remarksComponentA'
+            this.dataListNew[index].btn = '修改'
+            this.dataListNew[index].btnType = 'edit'
+            this.dataListNew[index].fileType = this.fileType
+            this.dataListNew[index].remarks = this.remarks
+          }
+        })
+      },
+      // 开启/关闭页面的加载中状态
+      changeLoading (loading) {
+        if (this.commonJS.isNotEmpty(loading)) {
+          this.loading = loading
+        } else {
+          this.loading = false
+        }
+      }
+    }
+  }
+</script>

src/views/common/UpLoadComponentV3.vue

@@ -0,0 +1,593 @@
+<!--文件上传组件-->
+<template>
+  <div>
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
+    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
+               :limit="999" :http-request="httpRequest"
+               multiple
+               :on-exceed="(files, fileList) =>{
+                      $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+                     }"
+               :show-file-list="false"
+               :on-change="changes"
+               :on-progress="uploadVideoProcess"
+               :file-list="fileList">
+      <el-button :loading="loading" type="primary" size="mini" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" @click="clickHandel" :disabled="auth==='view'&&uploadFlag===false">点击上传</el-button>
+    </el-upload>
+    <div style="height: calc(100% - 80px);margin-top: 10px">
+      <!-- 进度条 -->
+      <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
+      <el-table
+        ref="uploadTable"
+        :key="tableKey"
+        @row-click="tableRowClick"
+        :row-class-name="tableRowClassName"
+        v-loading="loading"
+        :data="dataListNew">
+        <el-table-column type="seq" width="40"></el-table-column>
+        <el-table-column label="文件名称" prop="name" align="center">
+          <template scope="scope">
+            <div v-if="ifName(scope.row) === true">
+              <el-image
+                style="width: 30px; height: 30px;padding-top: 4px"
+                :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]"
+              ></el-image>
+            </div>
+            <div v-else>
+              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
+        <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
+        <el-table-column label="文件大小" prop="size" align="center">
+          <template slot-scope="scope">
+            {{getSize(scope.row.size)}}
+          </template>
+        </el-table-column>
+        <el-table-column label="文件类型" prop="fileType" align="center">
+          <template slot-scope="scope">
+            <component
+              :is="scope.row.fileTypeComponent || 'fileTypeComponentA'"
+              :options="$dictUtils.getDictList('cw_project_report_archive_file_type')"
+              :value="scope.row.fileType"
+              @updateFileType="updateFileType"
+            ></component>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remarks" align="center">
+          <template slot-scope="scope">
+            <component
+              :is="scope.row.remarksComponent || 'remarksComponentA'"
+              :value="scope.row.remarks"
+              @updateRemarks="updateRemarks"
+            ></component>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200px" fixed="right" align="center">
+          <template  scope="scope">
+            <el-button type="text"  icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
+            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
+            <!--<el-button size="small" type="text" icon="el-icon-edit"
+                     @click="handleUpdate(scope.row, scope.$index)"
+            >{{ scope.row.btn || "修改" }}</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
+
+  </div>
+</template>
+
+<script>
+  // eslint-disable-next-line no-unused-vars
+  import OSSSerivce, {
+    httpRequest,
+    // eslint-disable-next-line no-unused-vars
+    handleRemove,
+    fileName,
+    // eslint-disable-next-line no-unused-vars
+    beforeAvatarUpload,
+    // eslint-disable-next-line no-unused-vars
+    openWindowOnUrl,
+    // eslint-disable-next-line no-unused-vars
+    toHref
+  } from '@/api/sys/OSSService'
+  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  import moment from 'moment'
+  export default {
+    data () {
+      return {
+        progressFlag: false,
+        loadProgress: 0,
+        fileList: [],
+        dataList: [],
+        dataListNew: [],
+        url: '',
+        showViewer: false,
+        ossService: null,
+        auth: '',
+        directory: 'public',
+        maxValue: 300,
+        tableKey: '',
+        fileLoading: true,
+        dividerName: '',
+        uploadFlag: false,
+        delFlag: false,
+        createBy: '',
+        showDivider: true,
+        fileType: '',
+        remarks: '',
+        loading: false
+      }
+    },
+    watch: {
+    },
+    created () {
+      this.ossService = new OSSSerivce()
+    },
+    components: {
+      ElImageViewer,
+      fileTypeComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.$dictUtils.getDictLabel('cw_project_report_archive_file_type', this.value, '')
+            }
+          })
+        },
+        props: ['options', 'value']
+      },
+      fileTypeComponentB: {
+        data () {
+          return { fileType: '' }
+        },
+        props: ['options', 'value'],
+        mounted () {
+          this.fileType = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-select',
+            {
+              attrs: {
+                placeholder: '请选择',
+                value: this.$dictUtils.getDictLabel('cw_project_report_archive_file_type', this.fileType, ''),
+                size: 'small',
+                clearable: true
+              },
+              props: ['options', 'value'],
+              on: {
+                change: (value) => {
+                  this.fileType = value
+                  this.$emit('updateFileType', value)
+                }
+              }
+            },
+            [
+              this.options.map((item) => {
+                let { label, value } = item
+                return h('el-option', {
+                  props: {
+                    label,
+                    value: parseInt(value),
+                    key: value
+                  }
+                })
+              })
+            ]
+          )
+        }
+      },
+      remarksComponentA: {
+        render: function (h) {
+          return h('span', {
+            domProps: {
+              innerText: this.value
+            }
+          })
+        },
+        props: ['value']
+      },
+      remarksComponentB: {
+        data () {
+          return { remarks: '' }
+        },
+        props: ['value'],
+        mounted () {
+          this.remarks = this.value
+        },
+        render: function (h) {
+          return h(
+            'el-input',
+            {
+              attrs: {
+                placeholder: '请输入',
+                value: this.remarks,
+                size: 'small',
+                clearable: true
+              },
+              props: ['value'],
+              on: {
+                input: (value) => {
+                  this.remarks = value
+                  this.$emit('updateRemarks', value)
+                }
+              }
+            }
+          )
+        }
+      }
+    },
+    mounted () {
+      window.onPreview = this.onPreview
+    },
+    methods: {
+      /**
+       * dividerName: 组件中divider的名称赋值
+       * showDivider: ‘附件‘Divider是否展示
+       *     注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       **/
+      setDividerName (dividerName, showDivider) {
+        if (this.commonJS.isNotEmpty(dividerName)) {
+          this.dividerName = dividerName
+        }
+        if (this.commonJS.isNotEmpty(showDivider)) {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        } else {
+          this.showDivider = true
+        }
+      },
+      /**
+       * 文件上传组件初始化
+       * @param auth
+       *    auth的值为"view"时,不可上传/编辑文件
+       *    auth为其他值时,可上传/编辑文件
+       * @param fileList  要显示到文件上传列表中的文件。
+       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+       * @param directory  要存放到oss的哪个文件夹下。
+       *    注：值为空时，默认存放到"public"文件夹
+       * @param maxValue  上传文件允许的最大值，单位：MB
+       *    注：值为空时，默认值为300MB
+       * @param dividerName  组件中divider的名称
+       *    注：值为空时，默认值为‘附件’
+       * @param uploadFlag  ‘上传文件’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+       * @param delFlag  ‘删除’按钮是否禁用
+       *    注：值为空时，默认值为false
+       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+       * @param showDivider  ‘附件‘Divider是否展示
+       *    注：值为空时，默认值为true
+       *    showDivider=false时 ‘附件‘Divider隐藏
+       */
+      async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
+        await this.fileLoadingFalse()
+        if (this.commonJS.isEmpty(dividerName)) {
+          this.dividerName = '附件'
+        } else {
+          this.dividerName = dividerName
+        }
+        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+          this.directory = directory
+        } else {
+          this.directory = 'public'
+        }
+        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+          this.maxValue = maxValue
+        } else {
+          this.maxValue = 300
+        }
+        this.auth = auth
+        if (this.commonJS.isEmpty(uploadFlag)) {
+          this.uploadFlag = false
+        } else {
+          if (uploadFlag !== true && uploadFlag !== false) {
+            this.uploadFlag = false
+          } else {
+            this.uploadFlag = uploadFlag
+          }
+        }
+        if (this.commonJS.isEmpty(delFlag)) {
+          this.delFlag = false
+        } else {
+          if (delFlag !== true && delFlag !== false) {
+            this.delFlag = false
+            this.createBy = delFlag
+          } else {
+            this.delFlag = delFlag
+          }
+        }
+        if (this.commonJS.isEmpty(fileList)) {
+          this.fileLoading = true
+        }
+        for await (let item of fileList) {
+          await this.ossService.getFileSizeByUrl(item.url).then((data) => {
+            item.lsUrl = data.data.url
+            item.size = data.data.size
+            this.dataList.push(item)
+            this.dataListNew.push(item)
+            if (this.dataList.length === fileList.length) {
+              this.fileLoading = true
+            }
+          })
+        }
+        // this.dataList = JSON.parse(JSON.stringify(fileList))
+        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
+        if (this.commonJS.isEmpty(showDivider)) {
+          this.showDivider = true
+        } else {
+          if (showDivider === false) {
+            this.showDivider = false
+          } else {
+            this.showDivider = true
+          }
+        }
+      },
+      async httpRequest (file) {
+        await httpRequest(file, fileName(file), this.directory, this.maxValue)
+      },
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => {
+            this.progressFlag = false
+          }, 1000) // 一秒后关闭进度条
+        }
+      },
+      getSize (value) {
+        if (this.commonJS.isEmpty(value)) {
+          return '0 B'
+        } else {
+          let val = parseInt(value)
+          if (this.commonJS.isEmpty(val)) {
+            return '0 B'
+          }
+          if (isNaN(val)) {
+            return '0 B'
+          }
+          if (val === 0) {
+            return '0 B'
+          }
+          let k = 1024
+          let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
+          let i = Math.floor(Math.log(val) / Math.log(k))
+          return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
+        }
+      },
+      async changes (file, fileList) {
+        // if (file.status !== 'ready') {
+        //   return
+        // }
+        if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+          this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+          return
+        }
+        this.dataListNew = []
+        this.dataList.forEach((item) => {
+          this.dataListNew.push(item)
+        })
+        for (let item of fileList) {
+          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item.createBy = {
+            id: '',
+            name: ''
+          }
+          item.createBy.id = this.$store.state.user.id
+          item.createBy.name = this.$store.state.user.name
+          this.dataListNew.push(item)
+        }
+        for await (let item of this.dataListNew) {
+          if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+            item.url = item.raw.url
+            if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+              await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                item.lsUrl = data.data
+              })
+            }
+          }
+        }
+        this.tableKey = Math.random()
+      },
+      showFile (row) {
+        openWindowOnUrl(row)
+      },
+      onPreview (url) {
+        this.url = url
+        this.showViewer = true
+      },
+      // 关闭查看器
+      closeViewer () {
+        this.url = ''
+        this.showViewer = false
+      },
+      toHref (row) {
+        toHref(row)
+      },
+      deleteById (row, index) {
+        this.dataListNew.splice(index, 1)
+        if (row.id !== null && row.id !== '' && row.id !== undefined) {
+          this.dataList.splice(index, 1)
+          // this.ossService.deleteMsgById(row.id)
+        } else {
+          let num
+          if (this.dataList.length > 0) {
+            num = this.dataList.length - 1
+          } else {
+            num = 0
+          }
+          this.$refs.upload.uploadFiles.splice(index - num, 1)
+        }
+      },
+      /**
+       * 关闭dialog时使用  清除el-upload中上传的文件
+       */
+      clearUpload () {
+        this.$refs.upload.uploadFiles = []
+        this.dataList = []
+        this.dataListNew = []
+        this.createBy = ''
+      },
+      /**
+       * 获取当前文件列表中的文件数据
+       */
+      getDataList () {
+        let _this = this
+        const waitForEach = function () {
+          return new Promise(function (resolve, reject) {
+            _this.dataListNew.forEach((item, index) => {
+              if (item.btnType === 'save') {
+                _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                _this.dataListNew[index].btn = '修改'
+                _this.dataListNew[index].btnType = 'edit'
+                _this.dataListNew[index].fileType = _this.fileType
+                _this.dataListNew[index].remarks = _this.remarks
+              }
+            })
+            _this.tableKey = Math.random()
+            resolve(_this.dataListNew)
+          })
+        }
+        return waitForEach()
+      },
+      /**
+       * 判断进度条是否结束，附件是否加载完成
+       * @returns {boolean}
+       */
+      checkProgress () {
+        if (this.progressFlag === true) {
+          this.$message.warning('请等待附件上传完成再进行操作')
+          return true
+        }
+        if (this.fileLoading === false) {
+          this.$message.warning('请等待附件加载完成再进行操作')
+          return true
+        }
+        return false
+      },
+      ifName (row) {
+        if (this.commonJS.isEmpty(row.name)) {
+          row.name = '---'
+          return false
+        }
+        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+          return true
+        } else {
+          return false
+        }
+      },
+      fileLoadingFalse () {
+        this.fileLoading = false
+      },
+      /** 修改||保存按钮操作 */
+      handleUpdate: async function (row, rowIndex) {
+        if (row.btnType === 'edit' || this.commonJS.isEmpty(row.btnType)) {
+          let _this = this
+          const waitForEach = function () {
+            return new Promise(function (resolve, reject) {
+              _this.dataListNew.forEach((item, index) => {
+                if (item.btnType === 'save') {
+                  _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                  _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                  _this.dataListNew[index].btn = '修改'
+                  _this.dataListNew[index].btnType = 'edit'
+                  _this.dataListNew[index].fileType = _this.fileType
+                  _this.dataListNew[index].remarks = _this.remarks
+                }
+              })
+              resolve()
+            })
+          }
+          waitForEach().then(() => {
+            this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentB'
+            this.dataListNew[rowIndex].remarksComponent = 'remarksComponentB'
+            this.dataListNew[rowIndex].btn = '保存'
+            this.dataListNew[rowIndex].btnType = 'save'
+          })
+        } else {
+          this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentA'
+          this.dataListNew[rowIndex].remarksComponent = 'remarksComponentA'
+          this.dataListNew[rowIndex].btn = '修改'
+          this.dataListNew[rowIndex].btnType = 'edit'
+          this.dataListNew[rowIndex].fileType = this.fileType
+          this.dataListNew[rowIndex].remarks = this.remarks
+        }
+        this.tableKey = Math.random()
+      },
+      updateFileType (fileType) {
+        this.fileType = fileType
+      },
+      updateRemarks (remarks) {
+        this.remarks = remarks
+      },
+      tableRowClassName ({ row, rowIndex }) {
+        row.index = rowIndex
+      },
+      // 行点击事件
+      tableRowClick (row, column) {
+        if (this.auth !== 'view') {
+          if (column.label !== '备注' && column.label !== '文件名称' && column.label !== '操作') {
+            let _this = this
+            const waitForEach = function () {
+              return new Promise(function (resolve, reject) {
+                _this.dataListNew.forEach((item, index) => {
+                  if (item.btnType === 'save') {
+                    _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+                    _this.dataListNew[index].remarksComponent = 'remarksComponentA'
+                    _this.dataListNew[index].btn = '修改'
+                    _this.dataListNew[index].btnType = 'edit'
+                    _this.dataListNew[index].fileType = _this.fileType
+                    _this.dataListNew[index].remarks = _this.remarks
+                  }
+                })
+                resolve()
+              })
+            }
+            waitForEach().then(() => {
+              this.fileType = this.dataListNew[row.index].fileType
+              this.remarks = this.dataListNew[row.index].remarks
+              this.dataListNew[row.index].fileTypeComponent = 'fileTypeComponentB'
+              this.dataListNew[row.index].remarksComponent = 'remarksComponentB'
+              this.dataListNew[row.index].btn = '保存'
+              this.dataListNew[row.index].btnType = 'save'
+            })
+            this.tableKey = Math.random()
+          }
+        }
+      },
+      // 点击上传文件按钮的时候，把未保存的文件保存一下
+      clickHandel () {
+        this.dataListNew.forEach((item, index) => {
+          if (item.btnType === 'save') {
+            this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
+            this.dataListNew[index].remarksComponent = 'remarksComponentA'
+            this.dataListNew[index].btn = '修改'
+            this.dataListNew[index].btnType = 'edit'
+            this.dataListNew[index].fileType = this.fileType
+            this.dataListNew[index].remarks = this.remarks
+          }
+        })
+      },
+      // 开启/关闭页面的加载中状态
+      changeLoading (loading) {
+        if (this.commonJS.isNotEmpty(loading)) {
+          this.loading = loading
+        } else {
+          this.loading = false
+        }
+      }
+    }
+  }
+</script>