famous paper - preview/download oss file

src/views/questioncenter/components/famous-paper.vue

@@ -55,12 +55,11 @@
   </div>
 </template>
 <script>
-import { downloadRealPaper, paperGrade, papersCancelCollect, papersCollect, papersList } from '@/api/webApi/webQue.js'
+import { paperGrade, papersList } from '@/api/webApi/webQue.js'
 import { mapGetters } from 'vuex'
 import MxCondition from '@/components/MxCondition/mx-condition'
 import MxSearchGroup from '@/components/MxSearch/mx-search-group'
-import MxConst from "@/common/MxConst";
-import {downloadOssFile} from "@/utils/download-helper";
+import PaperActionsMixin from "@/views/questioncenter/components/paper-actions-mixin";
 
 export default {
   name: 'famous-paper',
@@ -68,6 +67,7 @@ export default {
     MxCondition,
     MxSearchGroup
   },
+  mixins: [PaperActionsMixin],
   data() {
     return {
       queryParams: {
@@ -93,43 +93,6 @@ export default {
     ...mapGetters(['period', 'isFrontTeacher'])
   },
   methods: {
-    _combineOssPath(item) {
-      const {osspath, filename} = item
-      return `${this.$ossBase}/${osspath}/${filename}`
-    },
-    _ossPreview(url) {
-      const pdfSuffixes = ['.pdf']
-      const msSuffixes = ['.doc','.ppt','.xls','.docx', 'pptx', '.xlsx']
-      if (pdfSuffixes.some(s => url.endsWith(s))) {
-        window.open('/pdfView/index.html?src=' + url)
-      } else if (msSuffixes.some(s => url.endsWith(s))) {
-        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url)
-      } else {
-        this.$message.error('格式错误，无法预览该格式文件！');
-      }
-    },
-    paperDownLoad(item) {
-      const {id: paperId, paperSource, filename} = item
-      if (paperSource == MxConst.enum.paper.paperSource.oss) {
-        const ossFullPath = this._combineOssPath(item)
-        downloadOssFile(ossFullPath, filename)
-        return
-      }
-      downloadRealPaper(paperId, this.period)
-    },
-    // 跳转到预览页面
-    toPreView(item) {
-      const {id: paperId, papername: paperName, paperSource} = item
-      if (paperSource == MxConst.enum.paper.paperSource.oss) {
-        const ossFullPath = this._combineOssPath(item)
-        this._ossPreview(ossFullPath)
-        return
-      }
-      this.$router.push({
-        path: '/question-center/bestPaper/preview',
-        query: { paperId, paperName }
-      })
-    },
     // 获取试卷列表
     getPaperList() {
       papersList({
@@ -145,26 +108,9 @@ export default {
     clickSuffix() {
       this.getPaperList()
     },
-    // 收藏
-    collect(item) {
-      item.collect = !item.collect
-      papersCollect({ paperId: item.id }).then((res) => {
-        this.msgSuccess('收藏成功')
-      })
-    },
-    // 取消收藏
-    cancelCollect(item) {
-      item.collect = !item.collect
-      papersCancelCollect({ paperId: item.id }).then((res) => {
-        this.msgSuccess('取消收藏成功')
-      })
-    },
     togglePage() {
       this.getPaperList()
     },
-    handleInvalidQuery() {
-      // todo
-    },
     handleQuery(model) {
       this.firedParams = model
       this.getPaperList()

src/views/questioncenter/components/history-paper.vue

@@ -16,11 +16,11 @@
             {{ item.papername }}
           </div>
           <div class="paper_opera">
-            <div class="view" @click="toPreView(item.id, item.papername)">
+            <div class="view" @click="toPreView(item)">
               <img src="@/assets/images/icon_view.png" alt=""/>
               <span>预览</span>
             </div>
-            <div class="btn" @click="paperDownLoad(item.id)">下载</div>
+            <div class="btn" @click="paperDownLoad(item)">下载</div>
             <div class="pointer ml20">
               <div @click="collect(item)" v-if="!item.collect">
                 <img class="mr10" src="@/assets/images/icon_shoucang_n.png" alt=""/>
@@ -51,6 +51,7 @@ import { downloadRealPaper, papersCancelCollect, papersCollect, papersList } fro
 import { mapGetters } from 'vuex'
 import MxCondition from '@/components/MxCondition/mx-condition'
 import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+import PaperActionsMixin from "@/views/questioncenter/components/paper-actions-mixin";
 
 export default {
   name: 'history-paper',
@@ -58,6 +59,7 @@ export default {
     MxCondition,
     MxSearchGroup
   },
+  mixins: [PaperActionsMixin],
   props: {
     queryYear: ''
   },
@@ -87,23 +89,10 @@ export default {
     ...mapGetters(['period', 'isFrontTeacher'])
   },
   methods: {
-    handleInvalidQuery() {
-      // todo
-    },
     handleQuery(model) {
       this.firedParams = model
       this.getPaperListByYear()
     },
-    paperDownLoad(paperId) {
-      downloadRealPaper(paperId, this.period)
-    },
-    // 跳转到预览页面
-    toPreView(paperId, paperName) {
-      this.$router.push({
-        path: '/question-center/bestPaper/preview',
-        query: { paperId, paperName }
-      })
-    },
     clickSearch() {
       this.getPaperListByYear()
     },
@@ -121,20 +110,6 @@ export default {
     },
     togglePage() {
       this.getPaperListByYear()
-    },
-    // 收藏
-    collect(item) {
-      item.collect = !item.collect
-      papersCollect({ paperId: item.id }).then((res) => {
-        this.msgSuccess('收藏成功')
-      })
-    },
-    // 取消收藏
-    cancelCollect(item) {
-      item.collect = !item.collect
-      papersCancelCollect({ paperId: item.id }).then((res) => {
-        this.msgSuccess('取消收藏成功')
-      })
     }
   }
 }

src/views/questioncenter/components/paper-actions-mixin.js

@@ -0,0 +1,59 @@
+import {downloadRealPaper, papersCancelCollect, papersCollect} from "@/api/webApi/webQue";
+import MxConst from "@/common/MxConst";
+import {downloadOssFile} from "@/utils/download-helper";
+
+export default {
+  methods: {
+    _combineOssPath(item) {
+      const {osspath, filename} = item
+      return `${this.$ossBase}/${osspath}/${filename}`
+    },
+    _ossPreview(url) {
+      const pdfSuffixes = ['.pdf']
+      const msSuffixes = ['.doc','.ppt','.xls','.docx', 'pptx', '.xlsx']
+      if (pdfSuffixes.some(s => url.endsWith(s))) {
+        window.open('/pdfView/index.html?src=' + url)
+      } else if (msSuffixes.some(s => url.endsWith(s))) {
+        window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url)
+      } else {
+        this.$message.error('格式错误，无法预览该格式文件！');
+      }
+    },
+    paperDownLoad(item) {
+      const {id: paperId, paperSource, filename} = item
+      if (paperSource == MxConst.enum.paper.paperSource.oss) {
+        const ossFullPath = this._combineOssPath(item)
+        downloadOssFile(ossFullPath, filename)
+        return
+      }
+      downloadRealPaper(paperId, this.period)
+    },
+    // 跳转到预览页面
+    toPreView(item) {
+      const {id: paperId, papername: paperName, paperSource} = item
+      if (paperSource == MxConst.enum.paper.paperSource.oss) {
+        const ossFullPath = this._combineOssPath(item)
+        this._ossPreview(ossFullPath)
+        return
+      }
+      this.$router.push({
+        path: '/question-center/bestPaper/preview',
+        query: { paperId, paperName }
+      })
+    },
+    // 收藏
+    collect(item) {
+      item.collect = !item.collect
+      papersCollect({ paperId: item.id }).then((res) => {
+        this.msgSuccess('收藏成功')
+      })
+    },
+    // 取消收藏
+    cancelCollect(item) {
+      item.collect = !item.collect
+      papersCancelCollect({ paperId: item.id }).then((res) => {
+        this.msgSuccess('取消收藏成功')
+      })
+    }
+  }
+}