增加快捷档位导航显示设置

src/assets/styles/marker.less

@@ -133,6 +133,46 @@
       }
     }
   }
+
+  .fast-nav{
+    padding: 5px 10px;
+
+    &-list{
+      font-size: 0;
+    }
+
+    &-item{
+      display: inline-block;
+      vertical-align: middle;
+      min-width: 30px;
+      text-align: center;
+      padding: 0 8px;
+      border-radius: 5px;
+      height: 30px;
+      line-height: 30px;
+      margin: 0 5px;
+      background: @color-background;
+      font-size: 14px;
+      cursor: pointer;
+
+      &.is-active,
+      &:hover {
+        background-color: @color-act1;
+        color: @color-text-act;
+      }
+
+      &.is-danger:hover{
+        background-color: @color-act2;
+      }
+    }
+
+    &-close{
+      border-radius: 50%;
+      padding: 0;
+      margin-left: 20px;
+    }
+
+  }
 }
 .header-step-dropdown {
   .header-step-item {

src/modules/grading/components/RibbonSetDialog.vue

@@ -18,6 +18,9 @@
       <FormItem v-if="ribbonSetModal.keyboardMark" label="需要回车提交">
         <i-switch v-model="ribbonSetModal.needEnterSubmit"></i-switch>
       </FormItem>
+      <FormItem label="显示快捷档位导航">
+        <i-switch v-model="ribbonSetModal.fastLevelNav"></i-switch>
+      </FormItem>
     </Form>
 
     <div slot="footer">

src/modules/grading/marker/MarkerHeader.vue

@@ -1,7 +1,43 @@
 <template>
   <div class="marker-header">
+    <!-- fast-level-nav -->
+    <div v-if="ribbonSet.fastLevelNav" class="header-group fast-nav">
+      <div class="fast-nav-list">
+        <div
+          v-for="step in steps.levelStep"
+          :key="step.name"
+          :class="[
+            'fast-nav-item',
+            { 'is-active': curStep.name === step.name }
+          ]"
+          @click="stepClick(step.name)"
+        >
+          {{ step.name }}
+          <span>({{ step.count }})</span>
+        </div>
+        <div
+          v-for="step in steps.otherStep"
+          :key="step.name"
+          :class="[
+            'fast-nav-item',
+            { 'is-active': curStep.name === step.name }
+          ]"
+          @click="stepClick(step.name)"
+        >
+          {{ step.name }}
+          <span>({{ step.count }})</span>
+        </div>
+        <div
+          class="fast-nav-item fast-nav-close is-danger"
+          title="关闭快捷档位导航"
+          @click="closeFastNav"
+        >
+          <Icon type="md-close" :size="18" />
+        </div>
+      </div>
+    </div>
     <!-- left action -->
-    <div class="header-group">
+    <div v-if="!ribbonSet.fastLevelNav" class="header-group">
       <div class="header-part">
         <Dropdown
           v-if="areas.length > 1"
@@ -30,7 +66,7 @@
       </div>
     </div>
     <!-- header-page -->
-    <div class="header-group header-page">
+    <div v-if="!ribbonSet.fastLevelNav" class="header-group header-page">
       <div class="page-total">共{{ page.total }}张</div>
       <div class="page-item" @click="toFirstPage" title="首页">
         <Icon type="ios-skip-backward" />
@@ -317,7 +353,8 @@ export default {
       "curSubject",
       "areas",
       "IS_MARK_LEADER",
-      "shortcutKeyStatus"
+      "shortcutKeyStatus",
+      "ribbonSet"
     ]),
     stageName() {
       return this.getStageName(
@@ -359,7 +396,7 @@ export default {
       .filter(item => item.key !== "examNumber");
   },
   methods: {
-    ...mapMutations("marker", ["setPage", "setAreas"]),
+    ...mapMutations("marker", ["setPage", "setAreas", "setRibbonSet"]),
     async getAreaList() {
       const data = await areaList(this.filter);
       const areas = data.map(item => {
@@ -496,6 +533,14 @@ export default {
         params: this.markFilter
       });
     },
+    closeFastNav() {
+      const userId = this.$ls.get("user", { id: "" }).id;
+      const cacheRibbonSet = window.localStorage.getItem("ribbonSet");
+      const ribbonSet = cacheRibbonSet ? JSON.parse(cacheRibbonSet) : {};
+      ribbonSet[userId] = { fastLevelNav: false };
+      this.setRibbonSet(ribbonSet[userId]);
+      window.localStorage.setItem("ribbonSet", JSON.stringify(ribbonSet));
+    },
     userClick(name) {
       if (!name) return;
       this[name]();

src/modules/grading/marker/store.js

@@ -16,7 +16,11 @@ const state = {
   areas: [],
   curArea: {},
   curSubject: {},
-  ribbonSet: { keyboardMark: false, needEnterSubmit: true },
+  ribbonSet: {
+    keyboardMark: false,
+    needEnterSubmit: true,
+    fastLevelNav: false
+  },
   curUserRoleType: "",
   IS_MARKER: false,
   IS_MARK_LEADER: false,