公告多附件下载

src/views/notice/NoticeDetail.vue

@@ -19,10 +19,13 @@
             <div v-html="model.content"></div>
           </div>
         </div>
-        <div class="table-operator" v-if="path">
-          <a-button type="primary" icon="arrow-down" @click="download" class="down">
-            附件下载
-          </a-button>
+
+        <div class="down-class" v-show="fileList.length > 0">
+          <a-divider orientation="left">附件下载</a-divider>
+          <a-upload
+            :file-list="fileList"
+            :showUploadList="{showDownloadIcon: true, showRemoveIcon: false}">
+          </a-upload>
         </div>
       </div>
     </a-card>
@@ -80,6 +83,7 @@ export default {
       readCount: 0,
       unreadCount: 0,
       noticeRange: 1,
+      fileList: [],
       // 表头
       columns1: [
         {
@@ -138,12 +142,12 @@ export default {
     close () {
       this.$router.push({ path: '/notice/list', query: { noticeRange: this.noticeRange } })
     },
-    getDetail (id) {
-      noticeGet({ id: id }).then(res => {
+    async getDetail (id) {
+      await noticeGet({ id: id }).then(res => {
         this.model = res.data
         const fileArr = JSON.parse(res.data.file)
         if (fileArr.length > 0) {
-          this.path = fileArr[0].url
+          this.fileList = fileArr
         }
       })
     },
@@ -182,4 +186,8 @@ export default {
 .article-body {
   margin-top: 15px;
 }
+.down-class {
+  width: 50%;
+  margin-top: 20px;
+}
 </style>