xg_total_process_master_cloud_vue/src/views/common/UpLoadComponentV3.1.vue

<!--文件上传组件-->
<template>
  <div :key="uploadKey">
    <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">
		<template v-if="auth==='view'&&uploadFlag===false" #tip>
			<el-button :loading="loading" type="primary" size="default" :disabled="true"> 点击上传 </el-button>
		</template>
		<template v-else #trigger>
			<el-button :loading="loading" type="primary" size="default"> 点击上传 </el-button>
		</template>
	</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 #default="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="createTime" align="center"></el-table-column>
        <el-table-column label="文件大小" prop="size" align="center">
          <template #default="scope">
            {{getSize(scope.row.size)}}
          </template>
        </el-table-column>
        <el-table-column label="文件类型" prop="fileType" align="center">
			<template #header="{ column }">
				<span style="color: red; font-size: 20px">*</span>
				<span>{{column.label}}</span>
			</template>
<!--          <template slot="header" scope="scope">-->
<!--            <span style="color:red;font-size: 20px">* </span><span>文件类型</span>-->
<!--          </template>-->
          <template #default="scope">
            <el-select v-if="auth !== 'view'" 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 #default="scope">
            <el-input 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  #default="scope">
            <el-button text type="primary"  icon="el-icon-edit"  @click="toHref(scope.row)" :disabled="false">下载</el-button>
            <el-button text type="primary"  icon="el-icon-delete"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
            <!--<el-button 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 {
		  uploadKey: '',
        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.url
            item.size = 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.createTime = 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
              })
            }
          }
        }
        this.tableKey = Math.random()
		  this.uploadKey = Math.random()
      },
      showFile (row) {
        openWindowOnUrl(row)
      },
      onPreview (url) {
        this.url = url
        this.showViewer = true
      },
      // 关闭查看器
      closeViewer () {
        this.url = ''
        this.showViewer = false
      },
      toHref (row) {
        toHref(row)
      },
      async deleteById (row, index) {
		  await this.dataListNew.splice(index, 1)
		  await this.dataList.splice(index, 1)
		  this.tableKey = Math.random()
		  this.uploadKey = Math.random()
      },
      /**
       * 关闭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()
			  _this.uploadKey = 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()
		  this.uploadKey = 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()
			  this.uploadKey = 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>