chore: 优化考试页面

src/components/base/AppList.vue

@@ -102,7 +102,8 @@ export default {
     hasPagination: { type: Boolean, default: true },
     // 每页多少条数据
     limit: { type: Number, default: 10 },
-    pagationLayout: { type: String, default: 'total, prev, pager, next, sizes, jumper' }
+    pagationLayout: { type: String, default: 'total, prev, pager, next, sizes, jumper' },
+    isFilterChangeRoute: { type: Boolean, default: false }
   },
   data() {
     return {
@@ -124,6 +125,16 @@ export default {
       handler(data) {
         this.dataList = data
       }
+    },
+    $route: {
+      immediate: true,
+      handler(route) {
+        if (this.isFilterChangeRoute) {
+          this.params = Object.assign({}, this.remote.params, route.query)
+          this.page.currentPage = parseInt(route.query.page) || 1
+          this.page.size = parseInt(route.query['per-page']) || this.limit
+        }
+      }
     }
   },
   computed: {
@@ -132,7 +143,11 @@ export default {
     }
   },
   methods: {
-    fetchList(isReset) {
+    updateRoute(params) {
+      const query = Object.assign({}, this.$route.query, params)
+      this.$router.push({ path: this.$route.path, query })
+    },
+    fetchList(isReset, isInit) {
       /**
        * @param function httpRequest api接口
        * @param function beforeRequest 接口请求之前
@@ -154,10 +169,14 @@ export default {
       if (beforeRequest) {
         params = beforeRequest(params, isReset)
       }
-      for (const key in params) {
-        if (params[key] === '' || params[key] === undefined || params[key] === null) {
-          delete params[key]
-        }
+      // for (const key in params) {
+      //   if (params[key] === '' || params[key] === undefined || params[key] === null) {
+      //     delete params[key]
+      //   }
+      // }
+      if (this.isFilterChangeRoute && !isInit) {
+        this.updateRoute(params)
+        return
       }
       this.loading = true
       httpRequest(params)
@@ -181,6 +200,7 @@ export default {
     },
     // 重置
     reset() {
+      this.params = this.remote.params || {}
       // 清空筛选条件
       this.$refs.filterForm && this.$refs.filterForm.resetFields()
       // 初始化页码
@@ -203,7 +223,7 @@ export default {
     }
   },
   beforeMount() {
-    this.fetchList()
+    this.fetchList(false, true)
   }
 }
 </script>

src/components/layout/Main.vue

@@ -5,7 +5,7 @@
         <app-breadcrumb v-if="hasBreadcrumb"></app-breadcrumb>
       </div>
       <div class="app-main-container">
-        <router-view></router-view>
+        <router-view :key="$route.fullPath"></router-view>
       </div>
     </div>
   </section>

src/modules/exam/components/QuestionItem.vue

@@ -74,6 +74,7 @@ export default {
   },
   data() {
     return {
+      bc: null,
       questionData: {},
       showComment: false,
       comment: ''
@@ -98,6 +99,9 @@ export default {
     this.questionData = JSON.parse(JSON.stringify(this.question.item))
     // if (this.questionType === 3) console.log(this.questionData)
   },
+  destroyed() {
+    this.bc && this.bc.close()
+  },
   methods: {
     fetchComment() {
       const params = {
@@ -113,6 +117,8 @@ export default {
         } else {
           this.$message.success('提交点评失败')
         }
+        this.bc = new BroadcastChannel('exam')
+        this.bc.postMessage({ action: 'refetch' })
       })
     }
   }

src/modules/exam/views/Detail.vue

@@ -102,12 +102,14 @@ export default {
       multipleSelection: [], // 选择项
       dialogVisible: false,
       transferList: [],
-      transfer_exam_id: ''
+      transfer_exam_id: '',
+      bc: null
     }
   },
   computed: {
     tableOptions() {
       return {
+        isFilterChangeRoute: true,
         remote: {
           httpRequest: getExamPaperDetail,
           params: {
@@ -288,6 +290,15 @@ export default {
   mounted() {
     // 获取转移列表
     this.getTransferList()
+    this.bc = new BroadcastChannel('exam')
+    this.bc.onmessage = ({ data }) => {
+      if (data.action === 'refetch') {
+        this.$refs.list.refetch()
+      }
+    }
+  },
+  destroyed() {
+    this.bc && this.bc.close()
   }
 }
 </script>

src/modules/question/components/importQuestion.vue

@@ -28,7 +28,9 @@
     </div>
     <div style="text-align: center; margin-top: 15px">
       <el-button size="mini" @click="cancel">取消</el-button>
-      <el-button type="primary" size="mini" @click="submitUpload" style="margin-right: 5px"> 确认提交</el-button>
+      <el-button type="primary" size="mini" :disabled="submitLoading" @click="submitUpload" style="margin-right: 5px">
+        确认提交</el-button
+      >
     </div>
   </el-dialog>
 </template>
@@ -45,7 +47,8 @@ export default {
   },
   data() {
     return {
-      fileList: []
+      fileList: [],
+      submitLoading: false
     }
   },
   computed: {
@@ -64,12 +67,17 @@ export default {
       }
     },
     fetchFileUpload(data) {
-      importQuestion(this.activeProject.tag, { file: data.file, exam_id: this.id }).then(res => {
-        if (res.code === 0) {
-          this.$message.success('导入数据成功')
-          history.go(0)
-        }
-      })
+      this.submitLoading = true
+      importQuestion(this.activeProject.tag, { file: data.file, exam_id: this.id })
+        .then(res => {
+          if (res.code === 0) {
+            this.$message.success('导入数据成功')
+            history.go(0)
+          }
+        })
+        .finally(() => {
+          this.submitLoading = false
+        })
     },
     submitUpload() {
       this.$refs.upload.submit()