完善页面切换

src/components/layout/components/AppMain.vue

@@ -4,9 +4,10 @@
   >
     <transition name="fade-transform" mode="out-in">
       <!-- :include="cachedViews" -->
-      <keep-alive>
+      <!-- <keep-alive>
         <router-view v-if="active" :key="key" />
-      </keep-alive>
+      </keep-alive> -->
+      <router-view :key="key" />
     </transition>
   </section>
 </template>

src/views/examManagement/examManagementList.vue

@@ -1,108 +1,106 @@
 <template>
   <div class="app-container" ref="tableBody">
-    <!-- 过滤条件栏目 -->
-    <div class="common-card" ref="filterCard">
-      <div class="filter-condition-box">
-        <span>考试类别：</span>
-        <ul>
-          <li
-            :class="{
-              checkedExamType: checkedExamType === item.code,
-              disableChoose: loading,
-              hoverColor: !loading,
-            }"
-            v-for="(item, index) in examType"
-            :key="index"
-            @click="handleExamQuestionTypeFun(item)"
+    <a-spin :spinning="loading">
+      <!-- 过滤条件栏目 -->
+      <div class="common-card" ref="filterCard">
+        <div class="filter-condition-box">
+          <span>考试类别：</span>
+          <ul>
+            <li
+              :class="{
+                checkedExamType: checkedExamType === item.code,
+              }"
+              v-for="(item, index) in examType"
+              :key="index"
+              @click="handleExamQuestionTypeFun(item)"
+            >
+              {{ item.title }}
+            </li>
+          </ul>
+        </div>
+        <div class="border-line"></div>
+        <div class="filter-other-box">
+          <span class="filter-other-title">其它选项：</span>
+          <span class="filter-other-item-title">工种：</span>
+          <a-select
+            v-model="engineeringWorkChooseValue"
+            @change="handleChangeEngineeringWorkValue"
           >
-            {{ item.title }}
-          </li>
-        </ul>
+            <a-select-option
+              v-for="(item, index) in engineeringWorkList"
+              :key="index"
+              :value="item.code"
+            >
+              {{ item.title }}
+            </a-select-option>
+          </a-select>
+        </div>
       </div>
-      <div class="border-line"></div>
-      <div class="filter-other-box">
-        <span class="filter-other-title">其它选项：</span>
-        <span class="filter-other-item-title">工种：</span>
-        <a-select
-          v-model="engineeringWorkChooseValue"
-          :disabled="loading"
-          @change="handleChangeEngineeringWorkValue"
-        >
-          <a-select-option
-            v-for="(item, index) in engineeringWorkList"
-            :key="index"
-            :value="item.code"
+      <!-- 表单 -->
+      <div class="common-card a-card-margin-top">
+        <!-- 清空、批量删除 -->
+        <div class="exam-edit-row">
+          <a-button
+            type="primary"
+            :disabled="!hasSelected"
+            @click="handleClearSelectDataFun"
           >
-            {{ item.title }}
-          </a-select-option>
-        </a-select>
-      </div>
-    </div>
-    <!-- 表单 -->
-    <div class="common-card a-card-margin-top">
-      <!-- 清空、批量删除 -->
-      <div class="exam-edit-row">
-        <a-button
-          type="primary"
-          :disabled="!hasSelected"
-          @click="handleClearSelectDataFun"
-        >
-          清空
-        </a-button>
-        <span v-if="hasSelected" class="exam-edit-checkedtxt">
-          {{ `已选择 ${selectedRowKeys.length} 项` }}
-        </span>
-        <a-button
-          class="exam-edit-delete"
-          type="primary"
-          :disabled="!hasSelected"
-          @click="handleDeleteSelectDataFun"
+            清空
+          </a-button>
+          <span v-if="hasSelected" class="exam-edit-checkedtxt">
+            {{ `已选择 ${selectedRowKeys.length} 项` }}
+          </span>
+          <a-button
+            class="exam-edit-delete"
+            type="primary"
+            :disabled="!hasSelected"
+            @click="handleDeleteSelectDataFun"
+          >
+            批量删除
+          </a-button>
+        </div>
+        <!-- 表单[自带分页功能] -->
+        <a-table
+          :columns="columns"
+          :data-source="tableData"
+          :row-key="(record) => record.id"
+          :scroll="{ y: tableHeight }"
+          :row-selection="{
+            selectedRowKeys: selectedRowKeys,
+            onChange: onSelectChange,
+          }"
+          :pagination="pagination"
+          @change="handleTableChange"
         >
-          批量删除
-        </a-button>
+          <template slot="status" slot-scope="text">
+            <span
+              :class="
+                text === '未开始'
+                  ? 'exam-status-green'
+                  : text === '正在考试'
+                  ? 'exam-status-yellow'
+                  : text === '已结束'
+                  ? 'exam-status-red'
+                  : ''
+              "
+              >{{ text }}</span
+            >
+          </template>
+          <template slot="action" slot-scope="text, record">
+            <a @click="toQuestionDetailFun(record)">详情</a>
+            <a-divider type="vertical" />
+            <a
+              :class="{
+                'exam-delete': true,
+                'exam-delete-disable': record.status !== '未开始',
+              }"
+              @click="deleteQuestionFun(record)"
+              >删除</a
+            >
+          </template>
+        </a-table>
       </div>
-      <!-- 表单[自带分页功能] -->
-      <a-table
-        :columns="columns"
-        :data-source="tableData"
-        :row-key="(record) => record.id"
-        :scroll="{ y: tableHeight }"
-        :row-selection="{
-          selectedRowKeys: selectedRowKeys,
-          onChange: onSelectChange,
-        }"
-        :loading="loading"
-        :pagination="pagination"
-        @change="handleTableChange"
-      >
-        <template slot="status" slot-scope="text">
-          <span
-            :class="
-              text === '未开始'
-                ? 'exam-status-green'
-                : text === '正在考试'
-                ? 'exam-status-yellow'
-                : text === '已结束'
-                ? 'exam-status-red'
-                : ''
-            "
-            >{{ text }}</span
-          >
-        </template>
-        <template slot="action" slot-scope="text, record">
-          <a @click="toQuestionDetailFun(record)">详情</a>
-          <a-divider type="vertical" />
-          <a
-            :class="{
-              'exam-delete': true,
-              'exam-delete-disable': record.status !== '未开始',
-            }"
-            @click="deleteQuestionFun(record)"
-            >删除</a
-          >
-        </template>
-      </a-table>
-    </div>
+    </a-spin>
   </div>
 </template>
 
@@ -406,19 +404,14 @@ export default {
         margin-left: @paddingMarginVal;
         color: @mainColorBlack65;
         cursor: pointer;
+        &:hover {
+          color: @mainColorBlueNormal;
+        }
       }
       .checkedExamType {
         color: @mainColorBlueNormal;
         font-weight: bold;
       }
-      .disableChoose {
-        cursor: no-drop;
-      }
-      .hoverColor {
-        &:hover {
-          color: @mainColorBlueNormal;
-        }
-      }
     }
   }
   .filter-other-box {

src/views/examQuestionManagement/examQuestionList.vue

@@ -1,93 +1,91 @@
 <template>
   <div class="app-container" ref="tableBody">
-    <!-- 过滤条件栏目 -->
-    <div class="common-card" ref="filterCard">
-      <div class="filter-condition-box">
-        <span>所属类目：</span>
-        <ul>
-          <li
-            :class="{
-              checkedExamQuestionType: checkedExamQuestionType === item.code,
-              disableChoose: loading,
-              hoverColor: !loading,
-            }"
-            v-for="(item, index) in examQuestionType"
-            :key="index"
-            @click="handleExamQuestionTypeFun(item)"
+    <a-spin :spinning="loading">
+      <!-- 过滤条件栏目 -->
+      <div class="common-card" ref="filterCard">
+        <div class="filter-condition-box">
+          <span>所属类目：</span>
+          <ul>
+            <li
+              :class="{
+                checkedExamQuestionType: checkedExamQuestionType === item.code,
+              }"
+              v-for="(item, index) in examQuestionType"
+              :key="index"
+              @click="handleExamQuestionTypeFun(item)"
+            >
+              {{ item.title }}
+            </li>
+          </ul>
+        </div>
+        <div class="border-line"></div>
+        <div class="filter-other-box">
+          <span class="filter-other-title">其它选项：</span>
+          <span class="filter-other-item-title">工种：</span>
+          <a-select
+            v-model="engineeringWorkChooseValue"
+            @change="handleChangeEngineeringWorkValue"
           >
-            {{ item.title }}
-          </li>
-        </ul>
+            <a-select-option
+              v-for="(item, index) in engineeringWorkList"
+              :key="index"
+              :value="item.code"
+            >
+              {{ item.title }}
+            </a-select-option>
+          </a-select>
+        </div>
       </div>
-      <div class="border-line"></div>
-      <div class="filter-other-box">
-        <span class="filter-other-title">其它选项：</span>
-        <span class="filter-other-item-title">工种：</span>
-        <a-select
-          v-model="engineeringWorkChooseValue"
-          :disabled="loading"
-          @change="handleChangeEngineeringWorkValue"
-        >
-          <a-select-option
-            v-for="(item, index) in engineeringWorkList"
-            :key="index"
-            :value="item.code"
+      <!-- 表单 -->
+      <div class="common-card a-card-margin-top">
+        <!-- 清空、批量删除 -->
+        <div class="exam-question-edit-row">
+          <a-button
+            type="primary"
+            :disabled="!hasSelected"
+            @click="handleClearSelectDataFun"
           >
-            {{ item.title }}
-          </a-select-option>
-        </a-select>
-      </div>
-    </div>
-    <!-- 表单 -->
-    <div class="common-card a-card-margin-top">
-      <!-- 清空、批量删除 -->
-      <div class="exam-question-edit-row">
-        <a-button
-          type="primary"
-          :disabled="!hasSelected || loading"
-          @click="handleClearSelectDataFun"
-        >
-          清空
-        </a-button>
-        <span v-if="hasSelected" class="exam-question-edit-checkedtxt">
-          {{ `已选择 ${selectedRowKeys.length} 项` }}
-        </span>
-        <a-button
-          class="exam-question-edit-delete"
-          type="primary"
-          :disabled="!hasSelected || loading"
-          @click="handleDeleteSelectDataFun"
+            清空
+          </a-button>
+          <span v-if="hasSelected" class="exam-question-edit-checkedtxt">
+            {{ `已选择 ${selectedRowKeys.length} 项` }}
+          </span>
+          <a-button
+            class="exam-question-edit-delete"
+            type="primary"
+            :disabled="!hasSelected"
+            @click="handleDeleteSelectDataFun"
+          >
+            批量删除
+          </a-button>
+        </div>
+        <!-- 表单[自带分页功能] -->
+        <a-table
+          :columns="columns"
+          :data-source="tableData"
+          :row-key="(record) => record.id"
+          :scroll="{ y: tableHeight }"
+          :row-selection="{
+            selectedRowKeys: selectedRowKeys,
+            onChange: onSelectChange,
+          }"
+          :pagination="pagination"
+          @change="handleTableChange"
         >
-          批量删除
-        </a-button>
+          <template slot="questionType" slot-scope="text, record">
+            <span>{{ record.questionTypeTxt }}</span>
+          </template>
+          <template slot="engineeringWork" slot-scope="text, record">
+            <span>{{ record.engineeringWorkTxt }}</span>
+          </template>
+          <template slot="action" slot-scope="text, record">
+            <a @click="toQuestionDetailFun(record)">详情</a>
+            <a-divider type="vertical" />
+            <a @click="deleteQuestionFun(record)">删除</a>
+          </template>
+        </a-table>
       </div>
-      <!-- 表单[自带分页功能] -->
-      <a-table
-        :columns="columns"
-        :data-source="tableData"
-        :row-key="(record) => record.id"
-        :scroll="{ y: tableHeight }"
-        :row-selection="{
-          selectedRowKeys: selectedRowKeys,
-          onChange: onSelectChange,
-        }"
-        :loading="loading"
-        :pagination="pagination"
-        @change="handleTableChange"
-      >
-        <template slot="questionType" slot-scope="text, record">
-          <span>{{ record.questionTypeTxt }}</span>
-        </template>
-        <template slot="engineeringWork" slot-scope="text, record">
-          <span>{{ record.engineeringWorkTxt }}</span>
-        </template>
-        <template slot="action" slot-scope="text, record">
-          <a @click="toQuestionDetailFun(record)">详情</a>
-          <a-divider type="vertical" />
-          <a @click="deleteQuestionFun(record)">删除</a>
-        </template>
-      </a-table>
-    </div>
+    </a-spin>
   </div>
 </template>
 
@@ -447,19 +445,14 @@ export default {
         margin-left: @paddingMarginVal;
         color: @mainColorBlack65;
         cursor: pointer;
+        &:hover {
+          color: @mainColorBlueNormal;
+        }
       }
       .checkedExamQuestionType {
         color: @mainColorBlueNormal;
         font-weight: bold;
       }
-      .disableChoose {
-        cursor: no-drop;
-      }
-      .hoverColor {
-        &:hover {
-          color: @mainColorBlueNormal;
-        }
-      }
     }
   }
   .filter-other-box {