实验台加分页

src/pages/record/trialReport/index.vue

@@ -301,6 +301,9 @@ export default {
       history.back()
     },
     exportPage () {
+      this.loadIns = Loading.service({
+        background: "#fff"
+      })
       const form = Object.assign(this.form, this.infoData)
       const list = JSON.parse(JSON.stringify(this.expData))
       list.map((e, i) => {
@@ -319,13 +322,15 @@ export default {
         experimentalData: list
       }).then(res => {
         util.downloadFileDirect(`实验报告.docx`, new Blob([res]))
-      }).catch(res => { })
+        this.loadIns.close()
+      }).catch(res => {
+        this.loadIns.close()
+      })
     },
     exportPage1 () { // 导出实验报告
-      this.loading = true;
       this.loadIns = Loading.service({
         background: "#fff"
-      });
+      })
       const edit = this.editing // 先保存编辑状态，因为导出前要重置为false，导出完成后再还原
       this.editing = false
       document.querySelector("#pdfDom").scrollTop = 0;
@@ -358,8 +363,7 @@ export default {
             }
           }
           this.editing = edit
-          this.loadIns.close();
-          this.loading = false;
+          this.loadIns.close()
           PDF.save(title + ".pdf");
         }
         );

src/pages/station/list/index.vue

@@ -23,8 +23,8 @@
           </div>
         </div>
 
-        <div class="curs">
-          <template v-if="products.length">
+        <template v-if="products.length">
+          <div class="curs">
             <div v-for="(item, i) in products" class="item" :title="item.goodsName" @click="toProduct(item)" :key="i">
               <div v-if="isZj || isSq" class="cover" :style="{ backgroundImage: 'url(/images/' + i + '.png)' }"></div>
               <div v-else class="cover" :style="{ backgroundImage: 'url(' + item.coverUrl + ')' }"></div>
@@ -34,12 +34,16 @@
                 <a v-else>进入实验</a>
               </div>
             </div>
-          </template>
-          <div class="empty flex-1" v-else>
-            <div>
-              <img src="@/assets/img/none.png" alt="">
-              <p>暂无数据</p>
-            </div>
+          </div>
+          <div class="pagination">
+            <el-pagination background :current-page="page" layout="total, prev, pager, next" :total="total"
+              :page-size="pageSize" @current-change="handleCurrentChange"></el-pagination>
+          </div>
+        </template>
+        <div class="empty flex-1" v-else>
+          <div>
+            <img src="@/assets/img/none.png" alt="">
+            <p>暂无数据</p>
           </div>
         </div>
       </div>
@@ -71,7 +75,7 @@ export default {
       isSq: Setting.isSq,
       keyword: this.$route.query.keyword || '',
       typeActive: +this.$route.query.typeActive || 0,
-      active: +this.$route.query.active || '',
+      active: this.$route.query.active ? +this.$route.query.active : '',
       searchTimer: null,
       types: [
         {
@@ -96,6 +100,9 @@ export default {
         },
       ],
       tabs: [],
+      page: +this.$route.query.page || 1,
+      pageSize: 12,
+      total: 0,
       products: [],
       loading: false,
 
@@ -107,7 +114,7 @@ export default {
   watch: {
     keyword: function () {
       clearTimeout(this.searchTimer)
-      this.searchTimer = setTimeout(this.getList, 500)
+      this.searchTimer = setTimeout(this.initData, 500)
     },
   },
   mounted () {
@@ -121,7 +128,7 @@ export default {
       this.selfBuildCourseType = res.selfBuildCourseType
       this.tabs = [
         ...this.defaultTabs,
-        ...res.data,
+        ...this[this.typeActive ? 'selfBuildCourseType' : 'defaultTypes'],
       ]
       this.getList()
     },
@@ -131,37 +138,54 @@ export default {
       // 最近使用
       if (this.active === -1) {
         const { list } = await this.$post(this.api.recentUse, {
+          pageNum: this.page,
+          pageSize: this.pageSize,
           courseType: this.typeActive,
           goodsName: this.keyword,
         })
-        this.products = list
+        this.products = list.records
+        this.total = list.total
         this.loading = false
       } else {
         if (this.typeActive) {
           // 我的课程
           const res = await this.$post(this.api.selfBuildCourse, {
+            pageNum: this.page,
+            pageSize: this.pageSize,
             curriculumType: this.active,
             curriculumName: this.keyword,
           })
-          this.products = res.courses
+          this.products = res.courses.records
+          this.total = res.courses.total
           this.loading = false
         } else {
           // 校本课程
-          const { data } = await this.$get(this.api.schoolCourse, {
+          const { data } = await this.$post(this.api.schoolCourse, {
+            pageNum: this.page,
+            pageSize: this.pageSize,
             authority: this.active,
             goodsName: this.keyword,
           })
-          this.products = data
+          this.products = data.records
+          this.total = data.total
           this.loading = false
         }
       }
     },
+    handleCurrentChange (val) {
+      this.page = val
+      this.getList()
+    },
+    initData () {
+      this.page = 1
+      this.getList()
+    },
     // 记录最近使用
     async addRecord (mallId) {
       await this.$post(`${this.api.recordRecentUsage}?mallId=${mallId}`)
     },
     toProduct (item) {
-      const params = `&keyword=${this.keyword}&active=${this.active}&typeActive=${this.typeActive}`
+      const params = `&keyword=${this.keyword}&active=${this.active}&typeActive=${this.typeActive}&page=${this.page}`
       if (this.typeActive) {
         this.$router.push(`/station/preview?courseId=${item.cid || ''}&curriculumName=${encodeURIComponent(item.goodsName || item.curriculumName)}&mallId=${item.mallId || ''}${params}`)
       } else {
@@ -201,12 +225,12 @@ export default {
         ...this[id ? 'selfBuildCourseType' : 'defaultTypes'],
       ]
       if (this.active !== '' && this.active !== -1) this.active = ''
-      this.getList()
+      this.initData()
     },
     // tab切换
     tab1Change (item) {
       this.active = item.classificationId
-      this.getList()
+      this.initData()
     },
   }
 };
@@ -314,6 +338,7 @@ export default {
 
   .inner {
     width: 1072px;
+    padding-bottom: 30px;
     margin: 0 auto;
   }
 

src/pages/station/preview/index.vue

@@ -450,7 +450,7 @@ export default {
         this.routes = [
           {
             name: '实验台',
-            path: `list?keyword=${this.$route.query.keyword || ''}&active=${this.$route.query.active || 0}&typeActive=${this.$route.query.typeActive || 0}`
+            path: `list?keyword=${this.$route.query.keyword || ''}&active=${this.$route.query.active || 0}&typeActive=${this.$route.query.typeActive || 0}&page=${this.$route.query.page || 1}`
           },
           {
             name: this.curriculumName

src/pages/station/product/index.vue

@@ -216,7 +216,7 @@ export default {
         this.routes = [
           {
             name: '实验台',
-            path: `list?keyword=${this.$route.query.keyword || ''}&active=${this.$route.query.active || ''}`
+            path: `list?keyword=${this.$route.query.keyword || ''}&active=${this.$route.query.active || 0}&typeActive=${this.$route.query.typeActive || 0}&page=${this.$route.query.page || 1}`
           },
           {
             name: e.mall.productName