paper work tab - cache fixed

src/api/webApi/homework.js

@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+
+//
+// GET
+// /prod-api/front/homework/getHomeworks
+// 01 查询作业模板
+export function getHomeworks() {
+  return request({
+    url: '/front/homework/getHomeworks',
+    method: 'get'
+  })
+}
+
+//
+// GET
+// /prod-api/front/homework/getStudentHomeworks
+// 01 查询学生作业列表
+export function getStudentHomeworks() {
+  return request({
+    url: '/front/homework/getStudentHomeworks',
+    method: 'get'
+  })
+}
+
+//
+// GET
+// /prod-api/front/homework/getTeacherHomeworks
+// 01 查询老师发布作业列表
+export function getTeacherHomeworks() {
+  return request({
+    url: '/front/homework/getTeacherHomeworks',
+    method: 'get'
+  })
+}
+
+//
+// POST
+// /prod-api/front/homework/publicStudentHomework
+// 01 发布学生作业
+export function publicStudentHomework() {
+  return request({
+    url: '/front/homework/publicStudentHomework',
+    method: 'post'
+  })
+}
+
+//
+// POST
+// /prod-api/front/homework/saveHomeworks
+// 01 保存作业模板
+export function saveHomeworks() {
+  return request({
+    url: '/front/homework/saveHomeworks',
+    method: 'post'
+  })
+}

src/views/questioncenter/components/generate-tabs/paper-work-publish.vue

@@ -1,10 +1,46 @@
 <template>
-
+  <el-card>
+    <div class="mb10 fx-row fx-end-cen">
+      <el-button icon="el-icon-refresh" circle @click="handleQuery"></el-button>
+    </div>
+    <dynamic-table :rows="rows" :columns="columns"></dynamic-table>
+    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+                @pagination="getList"></pagination>
+  </el-card>
 </template>
 
 <script>
+import DynamicTable from '@/components/dynamic-table/index'
+import { getHomeworks } from '@/api/webApi/homework'
+
 export default {
-  name: 'paper-work-publish'
+  name: 'paper-work-publish',
+  components: { DynamicTable },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      columns: [],
+      rows: [],
+      total: 0
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    async getList() {
+      const res = await getHomeworks()
+      this.total = res.total || 0
+      this.rows = res.rows || []
+    }
+  }
 }
 </script>
 

src/views/questioncenter/generating.vue

@@ -2,17 +2,18 @@
   <div class="generating_container app-container">
     <el-card>
       <div class="header_top">
-        <div v-for="(tab,idx) in visibleTabs" :key="idx" class="pointer" :class="{'active-tab': idx== tabActive}"
+        <div v-for="(tab,idx) in visibleTabs" :key="idx" class="pointer"
+             :class="{'active-tab': tab.content==tabActive}"
              @click="handleTabChange(idx)">
           {{ tab.label }}
         </div>
       </div>
     </el-card>
     <!--  效果不好，每次tab切换时都会完全重新加载组件，没有缓存效果  -->
-    <!--<component v-if="currentTab" :is="currentTab.content"></component>-->
+    <!--    <component v-if="tabActive" :is="tabActive"></component>-->
     <!--  NOTE:类似延迟加载  -->
-    <component v-for="tab in visibleTabs" :key="tab.label" :is="tab.content"
-               v-if="tabVisited.includes(tab.content)" v-show="tab==currentTab"></component>
+    <component v-for="tab in visibleTabs" :is="tab.content" :key="tab.content"
+               v-if="tabVisited.includes(tab.content)" v-show="tab.content==tabActive"></component>
   </div>
 </template>
 <script>
@@ -38,72 +39,53 @@ export default {
   },
   data() {
     return {
-      tabs: [{
+      normalTabs: [{
         label: '手动组卷',
-        content: PaperByHand.name,
-        supportNormal: true,
-        supportPaperWork: false
+        content: PaperByHand.name
       }, {
         label: '组卷作业',
-        content: PaperByHand.name,
-        supportNormal: false,
-        supportPaperWork: true
+        content: PaperByHand.name
       }, {
         label: '智能组卷',
-        content: PaperByIntelligent.name,
-        supportNormal: true,
-        supportPaperWork: false
-      }, {
-        label: '组卷记录',
-        content: PaperRecord.name,
-        supportNormal: true,
-        supportPaperWork: false
+        content: PaperByIntelligent.name
+      }],
+      paperWorkTabs: [{
+        label: '组卷作业',
+        content: PaperByHand.name
       }, {
         label: '视频作业',
-        content: PaperWorkVideo.name,
-        supportPaperWork: true
+        content: PaperWorkVideo.name
       }, {
         label: '试卷作业',
-        content: PaperWorkPast.name,
-        supportPaperWork: true
+        content: PaperWorkPast.name
       }, {
         label: '发布作业',
-        content: PaperWorkPublish.name,
-        supportPaperWork: true
+        content: PaperWorkPublish.name
       }, {
         label: '检查作业',
-        content: PaperWorkHistory.name,
-        supportPaperWork: true
+        content: PaperWorkHistory.name
       }],
-      tabActive: 0,
+      visibleTabs: [],
+      tabActive: '',
       tabVisited: []
     }
   },
-  computed: {
-    visibleTabs() {
-      const sceneFilter = (tab) => this.isPaperWork ? tab.supportPaperWork : tab.supportNormal
-      return this.tabs.filter(sceneFilter)
-    },
-    currentTab() {
-      return this.visibleTabs[this.tabActive]
-    }
-  },
-  watch: {
-    currentTab: function(newVal) {
-      const key = newVal?.content
-      if (!key) return // safe check
-      if (this.tabVisited.includes(key)) return
-      this.tabVisited.push(key)
-    }
-  },
   created() {
+    // visibleTabs不能做成计算属性，否则因为依赖于路由会在任意跳转时刷新
+    this.visibleTabs = this.isPaperWork ? this.paperWorkTabs : this.normalTabs
+
     let query = this.$route.query
-    this.tabActive = query.tabActive * 1 || 0
-    this.tabVisited.push(this.currentTab.content)
+    const defaultActive = query.tabActive * 1 || 0
+    this.handleTabChange(defaultActive)
   },
   methods: {
     handleTabChange(idx) {
-      this.tabActive = idx
+      if (!(idx < this.visibleTabs.length)) return
+      const current = this.visibleTabs[idx]
+      this.tabActive = current.content
+      if (!this.tabVisited.includes(this.tabActive)) {
+        this.tabVisited.push(this.tabActive)
+      }
     }
   }
 }

src/views/questioncenter/paper.vue

@@ -126,11 +126,11 @@ export default {
     };
   },
   mounted() {
+    this.extraData = this.$route.query || {}
     this.getQuestionList();
   },
   watch: {
     $route() {
-      this.extraData = this.$route.query || {}
       this.getQuestionList();
     },
   },