xg_total_process_master_cloud_vue/src/views/common/UpLoadComponentV2.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>
      <AttachmentLib v-if="auth !== 'view'" :directory="directory" @onDownToOss="handleOnDownToOss">
      </AttachmentLib>

    </el-upload>
    <el-button v-if="showSign" :loading="loading" type="info" 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 #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_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 #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'" @change="sealTypeChange(scope)" 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 #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, fileList)"
              :disabled="auth === 'view' && delFlag === false && createBy !== scope.row.createBy.name">删除</el-button>

            <!--<el-button text type="primary" 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 AttachmentLib from './AttachmentLib.vue'
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: '',
      sealType: '',
      remarks: '',
      showSign: false,
      loading: false,
      dataListLength: ''
    }
  },
  watch: {
  },
  created() {
    this.ossService = new OSSSerivce()
  },
  components: {
    AttachmentLib,
    // 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 && item.url !== null && item.url !== undefined && item.url !== "") {
          await this.ossService.getFileSizeByUrl(item.url).then((data) => {
            item.lsUrl = data.url
            item.size = data.size
            this.dataList.push(item)
            this.dataListNew.push(item)
            this.fileList.push(item)
            if (this.dataListNew.length === fileList.length) {
              this.fileLoading = true
            }
          })
        } else {
          this.dataList.push(item)
          this.dataListNew.push(item)
          this.fileList.push(item)
          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
        }
      }
    },
    addMyAttachment(row) {
      this.$confirm(`确定收藏到个人资料库?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let inputForm = {
          classification: "",
          fileDescription: "",
          workAttachments: []
        }
        inputForm.workAttachments.push(row)
        this.ossService.downloadAndUploadToMyCollect({
          url: row.lsUrl,
          fileName: row.name,
          dir: this.directory,
          workCollectAccessoryDTO: {
            ...inputForm
          }
        }).then(res => {
          this.$message.success(`操作成功`);
        })
      });

    },
    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') {
        let fileListNamesList = []
        for (let fileItem of this.fileList) {
          fileListNamesList.push(fileItem.name)
        }
        if (fileListNamesList.indexOf(file.name) != -1) {
          this.$message.error(`${file.name}已存在，无法重复上传`)

          return
        } else {

          if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
            this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
            return
          }
          // this.dataListNew = []
          // this.dataList.forEach((item) => {
          //   this.dataListNew.push(item)
          // })
          var fileListNames = []
          for (let fileItem of this.fileList) {
            fileListNames.push(fileItem.name)
          }
          // for (let item of fileList) {


          let item1 = JSON.parse(JSON.stringify(file))
          // if (fileListNames.length === 0 || fileListNames.indexOf(item1.name) === -1) {
          this.fileList.push(item1)
          // }
          item1.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
          item1.createBy = {
            id: '',
            name: ''
          }
          item1.createBy.id = this.$store.state.user.id
          item1.createBy.name = this.$store.state.user.name
          this.dataListNew.push(item1)
          this.dataList.push(item1)
          // }
          for (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 !== {}) {
                this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
                  item.lsUrl = data
                })
              }
            }

          }
        }
      }
    },
    handleOnDownToOss(row, url) {
      this.ossService.getFileSizeByUrl(url).then((data) => {
        let file = {
          lsUrl: data.url,
          size: data.size,
          createBy: {
            id: this.$store.state.user.id,
            name: this.$store.state.user.name,
          },
          createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          name: row.fileName,
          percentage: 100,
          status: "success",
          url: url
        }
        this.dataList.push(file)
        this.dataListNew.push(file)
        this.fileList.push(file)
      })
    },
    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, fileList) {
      // this.$refs.upload.handleRemove(this.dataListNew[index])
      await this.dataListNew.splice(index, 1)
      await this.dataList.splice(index, 1)
      var newFileList = [];
      for (var i = 0; i < fileList.length; i++) {
        if (fileList[i].name !== row.name) {
          newFileList.push(fileList[i])
        }
      }
      this.fileList = newFileList;

    },
    /**
     * 关闭dialog时使用  清除el-upload中上传的文件
     */
    clearUpload() {
      this.$refs.upload.uploadFiles = []
      this.dataList = []
      this.dataListNew = []
      this.fileList = []
      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
      }

      const invalidFile = this.dataListNew.find(file => !file.url); // 找到第一个 URL 为空的文件
      if (invalidFile) {
        this.$message.warning(`${invalidFile.name}的URL为空，请检查后重新上传`)
        return true; // 只要有一个 url 为空，直接 return
      }
      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>