花名册-附件

src/api/sys/OSSService.js

@@ -144,12 +144,12 @@ export async function httpRequest (file, name, type) { // 阿里云OSS上传
   const fileName = filePath + name + '.' + exname
   console.log(fileName, '文件名')
 
-  client.multipartUpload(fileName, file.file, {
-    progress: function (p, checkpoint) {
+  await client.multipartUpload(fileName, file.file, {
+    progress: await function (p, checkpoint) {
       file.onProgress({percent: Math.floor(p * 100)}) // 触发el-upload组件的onProgress方法
     }
     // mime: type,
-  }).then(function (result) {
+  }).then(await function (result) {
     console.log(result)
     if (result.res.status === 200) {
       // file.onSuccess(result) // 触发el-upload组件的onSuccess方法
@@ -171,62 +171,39 @@ function getTemporaryByUrl (url) {
 }
 
 export async function openWindowOnUrl (row) {
-  var rowurl = ''
+  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') {
-    if (row.url !== null && row.url !== undefined && row.url !== '') {
+    await getTemporaryByUrl(row.url).then((data) => {
       // eslint-disable-next-line no-undef
-      onPreview(row.temporaryUrl)
-      return
-    } else {
-      await getTemporaryByUrl(row.raw.url).then((data) => {
-        // eslint-disable-next-line no-undef
-        onPreview(data.data)
-      })
-      return
-    }
-  }
-  if (row.url !== null && row.url !== undefined && row.url !== '') {
-    if (suffix === 'pdf') {
-      window.open('https://view.xdocin.com/xdoc?_xdoc=' + encodeURIComponent(row.temporaryUrl), '_blank')
-    } else if (suffix === 'rar' || suffix === 'zip' || suffix === 'jar' || suffix === '7z') {
-      window.open('http://ow365.cn/?i=30045&furl=' + encodeURIComponent(row.temporaryUrl), '_blank')
-    } else {
-      window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(row.temporaryUrl), '_blank')
-    }
-  } else if (row.raw.url !== null && row.raw.url !== undefined && row.raw.url !== '') {
-    await getTemporaryByUrl(row.raw.url).then((data) => {
-      rowurl = data.data
+      onPreview(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')
-    }
+    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')
-  if (row.id === null || row.id === undefined || row.id === '') {
-    await getTemporaryByUrl(row.raw.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)
-      })
-    })
-  } else {
-    const url = row.temporaryUrl // 完整的url则直接使用
+  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)
@@ -238,5 +215,5 @@ export async function toHref (row) {
       window.URL.revokeObjectURL(link.href)
       document.body.removeChild(link)
     })
-  }
+  })
 }

src/views/common/upLoadComponent.vue

@@ -0,0 +1,191 @@
+<!--文件上传组件-->
+<template>
+  <div>
+    <el-divider content-position="left"><i class="el-icon-document"></i> 附件</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 type="info" size="mini" >点击上传</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>
+      <vxe-table
+        border="inner"
+        auto-resize
+        resizable
+        :loading="loading"
+        size="small"
+        ref="uploadTable"
+        show-header-overflow
+        show-overflow
+        highlight-hover-row
+        :menu-config="{}"
+        :print-config="{}"
+        :sort-config="{remote:true}"
+        :data="dataListNew"
+        :checkbox-config="{}">
+        <vxe-column type="seq" width="40"></vxe-column>
+        <vxe-column title="文件名称" field="name">
+          <template slot-scope="scope">
+            <!--                <div v-if="ifName(scope.row) === true">-->
+            <!--                  <el-image-->
+            <!--                    style="width: 100px; height: 100px"-->
+            <!--                    :src="src"-->
+            <!--                    :preview-src-list="srcList" lazy>-->
+            <!--                  </el-image>-->
+            <!--                </div>-->
+            <!--                <div v-else>-->
+            <!--                  <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>-->
+            <!--                </div>-->
+            <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+          </template>
+        </vxe-column>
+        <vxe-column title="创建人" field="createBy.name"></vxe-column>
+        <vxe-column title="创建时间" field="createDate"></vxe-column>
+        <vxe-column title="操作" width="200px" fixed="right" align="center">
+          <template  slot-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.$rowIndex)">删除</el-button>
+          </template>
+        </vxe-column>
+      </vxe-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 {
+        loading: false,
+        progressFlag: false,
+        loadProgress: 0,
+        fileList: [],
+        dataList: [],
+        dataListNew: [],
+        url: '',
+        showViewer: false,
+        ossService: null,
+        auth: ''
+      }
+    },
+    watch: {
+    },
+    created () {
+      this.ossService = new OSSSerivce()
+    },
+    components: {
+      ElImageViewer
+    },
+    mounted () {
+      window.onPreview = this.onPreview
+    },
+    methods: {
+      newUpload (method, fileList) {
+        this.auth = method
+        this.dataList = JSON.parse(JSON.stringify(fileList))
+        this.dataListNew = JSON.parse(JSON.stringify(fileList))
+      },
+      async httpRequest (file) {
+        await httpRequest(file, fileName(file), 'projectRecords')
+      },
+      uploadVideoProcess (event, file, fileList) {
+        this.progressFlag = true // 显示进度条
+        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+        if (this.loadProgress >= 100) {
+          this.loadProgress = 100
+          setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条
+        }
+      },
+      changes (file, fileList) {
+        this.dataListNew = []
+        this.dataList.forEach((item) => {
+          this.dataListNew.push(item)
+        })
+        fileList.forEach((item) => {
+          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)
+        })
+        this.dataListNew.forEach(item => {
+          if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+            item.url = item.raw.url
+          }
+        })
+        beforeAvatarUpload(file)
+      },
+      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)
+        }
+      },
+      clearUpload () {
+        this.$refs.upload.uploadFiles = []
+      },
+      getDataList () {
+        return this.dataListNew
+      },
+      checkProgress () {
+        if (this.progressFlag === true) {
+          this.$message.warning('请等待文件上传完成再进行提交')
+          return true
+        }
+        return false
+      }
+    }
+  }
+</script>

src/views/modules/roster/RosterForm.vue

@@ -1034,8 +1034,10 @@
             </el-col>
           </el-row>
         </div>
-        <el-divider content-position="left"><i class="el-icon-document"></i> 附件</el-divider>
-
+<!--        附件-->
+        <UpLoadComponent
+          ref="uploadComponent">
+        </UpLoadComponent>
       </el-form>
       <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
       <span slot="footer" class="dialog-footer">
@@ -1054,6 +1056,7 @@
   import RosterService from '@/api/roster/RosterService'
   import OSSService from '@/api/sys/OSSService'
   import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+  import UpLoadComponent from '@/views/common/upLoadComponent'
   export default {
     data () {
       let checkIdCard = (rule, value, callback) => {
@@ -1188,7 +1191,8 @@
     },
     components: {
       SelectTree,
-      ElImageViewer
+      ElImageViewer,
+      UpLoadComponent
     },
     methods: {
       init (method, id) {
@@ -1271,14 +1275,12 @@
             this.rosterService.queryById(this.inputForm.id).then(({data}) => {
               this.inputForm = this.recover(this.inputForm, data)
               this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
+              this.$refs.uploadComponent.newUpload(method, this.inputForm.rosterFilesDTOList)
               this.loading = false
             })
           }
-          if (this.inputForm.rosterBankCardsDTOList.length === 0 ||
-                this.inputForm.rosterBankCardsDTOList === [] ||
-                  this.inputForm.rosterBankCardsDTOList === null ||
-                    this.inputForm.rosterBankCardsDTOList === undefined) {
-            this.inputForm.rosterBankCardsDTOList = []
+          if (method !== 'edit' && method !== 'view') {
+            this.$refs.uploadComponent.newUpload(method, [])
           }
         })
       },
@@ -1287,7 +1289,12 @@
         this.$refs['inputForm'].validate((valid) => {
           if (valid) {
             this.loading = true
+            if (this.$refs.uploadComponent.checkProgress()) {
+              this.loading = false
+              return
+            }
             this.checkMoment()
+            this.inputForm.rosterFilesDTOList = this.$refs.uploadComponent.getDataList()
             this.rosterService.save(this.inputForm).then(({data}) => {
               this.close()
               this.$message.success(data)
@@ -1300,6 +1307,7 @@
         })
       },
       close () {
+        this.$refs.uploadComponent.clearUpload()
         this.$refs.inputForm.resetFields()
         this.visible = false
       },