[update] 上传组件增加已上传文件的下载功能

2021-09-15 18:26:51 +08:00
parent 4b23889e16
commit 95aceef30b
1 changed files with 143 additions and 5 deletions
@@ -26,6 +26,25 @@
        </a-button>
      </template>
    </a-upload>
+<!--     :show-upload-list="showUploadList"-->
+    <!-- 增加上传文件的下载和查看的按钮，主要思想是生成相应的元素，用定位的思想定位到原来的文件列表中 -->
+    <template v-if="showOtherIcon">
+      <div class="file-list-html">
+        <template v-for="(item,index) in fileList">
+          <div :key="index" class="file-item" :class="{'show': item.status === 'done'}">
+          <span class="file-item-btn" @click.prevent.stop="myDownload(item)">
+            <a-icon type="download" />
+            下载
+          </span>
+            <span class="file-item-btn" @click.prevent.stop="myPreview(item)">
+            <a-icon type="eye" />
+            查看
+          </span>
+          </div>
+        </template>
+      </div>
+
+    </template>
  </div>
 </template>

@@ -33,9 +52,10 @@

 import Vue from 'vue'
 import {ACCESS_TOKEN} from '@/store/mutation-types'
-import {getFileAccessHttpUrl} from '@/api/manage'
+import {getFileAccessHttpUrl, downloadFile} from '@/api/manage'
 import {getFileInfo} from '@/api/api'

+// eslint-disable-next-line no-undef
 const Base64 = require('js-base64').Base64

 const FILE_TYPE_ALL = 'all'
@@ -120,6 +140,14 @@ export default {
      required: false,
      default: true
    },
+    /**
+     * 是否显示下载和查看按钮
+     **/
+    showOtherIcon: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
  },
  watch: {
    value: {
@@ -197,7 +225,7 @@ export default {
        // 获取每一个文件的信息，组成fileList
        // 突然想判断现在的fileList 中是否是历史的信息，如果是的话则先进行匹配
        let isHistory = this.fileList.find(file => file.response.status === 'history' && (file.response.result || {}).id === arr[a])
-        console.log("isHistory===", isHistory)
+        console.log('isHistory===', isHistory)
        if (isHistory) {
          fileList.push(isHistory)
        } else {
@@ -217,6 +245,7 @@ export default {
        }
      }
      this.fileList = [...fileList]
+      this.showOtherIcon && this.actionsClass()
    },
    handlePathChange() {
      let uploadFiles = this.fileList
@@ -345,7 +374,10 @@ export default {
      console.log(file)
    },
    handlePreview(file) {
-      console.log(file)
+      if (this.showOtherIcon) {
+        return
+      }
+      // eslint-disable-next-line no-unreachable
      if (file && file.url) {
        const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
        let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
@@ -371,6 +403,41 @@ export default {
          resolve(result)
        })
      })
+    },
+    // 修改删除按钮的样式，增加文字说明
+    actionsClass(){
+      this.$nextTick(()=>{
+        let content = document.getElementsByClassName('ant-upload-list-item-card-actions')
+        for (let i = 0; i < content.length; i++) {
+          if ( content[i].childNodes.length > 0){
+            // content[i].innerHTML = '<a-icon type="delete" />'
+            content[i].childNodes[0].childNodes[0].innerHTML = ' <svg class="delete-icon" viewBox=\'64 64 896 896\' data-icon=\'delete\' width=\'1em\' height=\'1em\' fill=\'currentColor\'\n' +
+              '                aria-hidden=\'true\' focusable=\'false\' className=\'\'>\n' +
+              '             <path\n' +
+              '               d=\'M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z\'></path>\n' +
+              '           </svg><span class="delete-span">删除</span>'
+          }
+        }
+      })
+    },
+    /**
+     * 单个文件的下载功能
+     * @param file
+     */
+    myDownload(file) {
+      downloadFile(`sys/common/download/${file.response.result.id}`, file.name)
+    },
+    /**
+     * 单个文件的预览功能
+     * @param file
+     */
+    myPreview(file) {
+      if (file && file.url) {
+        const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+        let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+        // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
+        window.open(url)
+      }
    }
  },
  mounted() {
@@ -382,9 +449,9 @@ export default {
 }
 </script>

-<style lang="less">
+<style lang="less" scoped>
 .uploadty-disabled {
-  .ant-upload-list-item {
+  /deep/.ant-upload-list-item {
    .anticon-close {
      display: none;
    }
@@ -394,4 +461,75 @@ export default {
    }
  }
 }
+// 新增的文件操作按钮的样式
+/deep/.file-list-html{
+  position: absolute!important;
+  top: 45px!important;
+  right: 60px!important;
+  height: auto!important;
+  z-index:2!important;
+}
+
+
+/deep/.file-item {
+  height: 30px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  transition: opacity 1s;
+  opacity: 0;
+  &.show{
+    opacity: 1;
+    transition: opacity 2s;
+  }
+  & > span {
+    vertical-align: middle;
+  }
+  .file-item-btn {
+    display: inline-block;
+    margin-left: 10px;
+    color: #808080;
+    cursor: pointer;
+  }
+}
+
+
+// 左侧文件名称的样式
+/deep/.ant-upload-list-item-name{
+  width: calc(100% - 150px) !important;
+  height: 23px !important;
+  text-align: left;
+  line-height: 23px;
+  padding-right: 10px !important;
+  text-overflow: ellipsis !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+}
+// 删除按钮的样式
+/deep/.ant-upload-list-item-card-actions{
+  opacity: 1!important;
+  color: #808080;
+  cursor: pointer!important;
+}
+// 删除按钮 样式的修改
+/deep/.delete-icon,
+/deep/.delete-span{
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: -4px;
+  cursor: pointer!important;
+  color: #808080;
+}
+
+// 单显hover隐掉
+/deep/.ant-upload-list-item-info:hover {
+  background: none !important;
+;
+}
+
+/deep/.ant-upload-list-item-name:hover {
+  cursor: pointer;
+}
+
+
 </style>