档位快捷栏调整

src/assets/styles/marker.less

@@ -8,17 +8,20 @@
 // marker-header
 .marker-header {
   position: fixed;
-  height: 40px;
-  padding: 5px 0;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 9;
-  background-color: @color-background-light;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  line-height: 30px;
+
+  .header-main{
+    height: 40px;
+    padding: 5px 0;
+    line-height: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: @color-background-light;
+  }
 
   .header-part {
     display: inline-block;
@@ -102,7 +105,7 @@
   .header-user {
     display: inline-block;
     vertical-align: top;
-    width: 280px;
+    width: 281px;
     border-left: 1px solid @color-background;
     margin: -5px 0;
     padding: 5px 10px;
@@ -135,14 +138,12 @@
   }
 
   .fast-nav{
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 400px;
-    padding: 5px 10px;
+    padding: 4px 10px 5px;
     background-color: @color-background-light;
-    z-index: 9;
+    margin-right: 280px;
+    border-top: 1px solid  @color-background-light2;
+    border-right: 1px solid  @color-background;
+    text-align: center;
 
     &-list{
       font-size: 0;
@@ -281,6 +282,10 @@
   padding: 5px;
   background: @color-background;
   z-index: 7;
+  
+  &-low{
+    top: 80px;
+  }
 }
 .marker-image-list {
   height: 100%;

src/modules/grading/components/RibbonSetDialog.vue

@@ -61,6 +61,7 @@ export default {
       this.modalIsShow = true;
     },
     submit() {
+      const lastFastLevelNav = this.ribbonSet.fastLevelNav;
       const userId = this.$ls.get("user", { id: "" }).id;
       const cacheRibbonSet = window.localStorage.getItem("ribbonSet");
       const ribbonSet = cacheRibbonSet ? JSON.parse(cacheRibbonSet) : {};
@@ -68,6 +69,12 @@ export default {
       this.setRibbonSet(this.ribbonSetModal);
       window.localStorage.setItem("ribbonSet", JSON.stringify(ribbonSet));
       this.cancel();
+      if (lastFastLevelNav !== this.ribbonSetModal.fastLevelNav) {
+        setTimeout(() => {
+          const resizeEvent = new Event("resize");
+          window.dispatchEvent(resizeEvent);
+        });
+      }
     }
   }
 };

src/modules/grading/leader/LeaderGrading.vue

@@ -68,7 +68,9 @@
       </div>
     </div>
 
-    <div class="marker-body">
+    <div
+      :class="['marker-body', { 'marker-body-low': ribbonSet.fastLevelNav }]"
+    >
       <div :class="markerImageListClasses" v-if="papers.length">
         <div
           v-for="(paper, index) in papers"
@@ -269,7 +271,8 @@ export default {
       "setCurArea",
       "setCurSubject",
       "setCurUserRoleType",
-      "clearState"
+      "clearState",
+      "ribbonSet"
     ]),
     initData() {
       this.getParamsSetInfo();

src/modules/grading/marker/MarkerGrading.vue

@@ -59,7 +59,9 @@
       </div>
     </div>
 
-    <div class="marker-body">
+    <div
+      :class="['marker-body', { 'marker-body-low': ribbonSet.fastLevelNav }]"
+    >
       <div :class="markerImageListClasses" v-if="papers.length">
         <div
           v-for="(paper, index) in papers"
@@ -225,7 +227,8 @@ export default {
       "setCurArea",
       "setCurStep",
       "setCurUserRoleType",
-      "clearState"
+      "clearState",
+      "ribbonSet"
     ]),
     async initData() {
       await this.getParamsSetInfo();

src/modules/grading/marker/MarkerHeader.vue

@@ -1,11 +1,277 @@
 <template>
   <div class="marker-header">
+    <div class="header-main">
+      <!-- left action -->
+      <div class="header-group">
+        <div class="header-part">
+          <Dropdown
+            v-if="areas.length > 1"
+            placement="bottom"
+            transfer
+            trigger="click"
+            transfer-class-name="marker-dropdown"
+            @on-click="areaClick"
+          >
+            <span class="el-dropdown-link">
+              {{ curArea.areaName }} <Icon type="ios-arrow-down"></Icon>
+            </span>
+            <DropdownMenu slot="list">
+              <DropdownItem
+                v-for="area in areas"
+                :key="area.id"
+                :name="area.id"
+                >{{ area.areaName }}</DropdownItem
+              >
+            </DropdownMenu>
+          </Dropdown>
+          <p v-else>{{ curArea.areaName }}</p>
+        </div>
+        <div v-if="showStatistics" class="header-part" @click="toStatistics">
+          <p>统计分析 <Icon type="ios-arrow-down"></Icon></p>
+        </div>
+      </div>
+      <!-- header-page -->
+      <div class="header-group header-page">
+        <div v-if="showPaperRelateCount" class="page-total">
+          共{{ page.total }}张
+        </div>
+        <div class="page-item" @click="toFirstPage" title="首页">
+          <Icon type="ios-skip-backward" />
+        </div>
+        <div class="page-item" @click="toPrevPage" title="上一页">
+          <Icon type="md-arrow-dropleft" />
+        </div>
+        <Poptip
+          v-if="showPaperRelateCount"
+          popper-class="marker-popper"
+          placement="bottom"
+          trigger="hover"
+          transfer
+        >
+          <div class="page-item page-cpage">
+            <span>{{ page.current }}</span>
+            <span>/</span><span>{{ page.totalPage }}</span>
+          </div>
+          <div class="marker-page" slot="content">
+            <div class="marker-page-set">
+              <span>页面跳转：</span>
+              <InputNumber
+                size="small"
+                :min="1"
+                :max="page.totalPage"
+                :step="1"
+                :precision="0"
+                v-model="pageNo"
+              ></InputNumber>
+              <div class="marker-page-btn" @click="pageNoSet">跳转</div>
+            </div>
+          </div>
+        </Poptip>
+        <div class="page-item" @click="toNextPage" title="下一页">
+          <Icon type="md-arrow-dropright" />
+        </div>
+        <div class="page-item" @click="toLastPage" title="尾页">
+          <Icon type="ios-skip-forward" />
+        </div>
+        <div class="page-item page-size">
+          <Dropdown
+            placement="bottom"
+            transfer
+            trigger="click"
+            transfer-class-name="marker-dropdown"
+            @on-click="pageSizeChange"
+          >
+            <span class="el-dropdown-link">
+              {{ page.size }}张/页 <Icon type="ios-arrow-down"></Icon>
+            </span>
+            <DropdownMenu slot="list">
+              <DropdownItem
+                v-for="item in pageSizeList"
+                :key="item"
+                :name="item"
+                >{{ item }}</DropdownItem
+              >
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+      </div>
+      <!-- right action -->
+      <div class="header-group">
+        <div
+          v-if="showSelectAll"
+          class="header-part header-selection"
+          @click="toSelectAll"
+        >
+          <div
+            :class="[
+              'image-checkbox',
+              {
+                'image-selected': allSelected
+              }
+            ]"
+          >
+            <Icon v-if="allSelected" type="md-checkmark" />
+          </div>
+          全选
+        </div>
+        <Poptip
+          v-if="IS_MARK_LEADER"
+          popper-class="marker-popper"
+          placement="bottom"
+          trigger="click"
+          transfer
+        >
+          <div class="header-part header-filter">
+            筛选 <Icon type="ios-arrow-down"></Icon>
+          </div>
+          <div
+            class="header-filter-body dark-mark"
+            slot="content"
+            @keydown.stop
+          >
+            <!-- 查询标记 -->
+            <div class="filter-part">
+              <h4 class="filter-part-title">查询标记试卷</h4>
+              <div class="filter-part-body">
+                <Select
+                  class="filter-select"
+                  v-model="markFilter.markerId"
+                  placeholder="评卷员"
+                >
+                  <Option
+                    v-for="item in markers"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  ></Option>
+                </Select>
+                <Button
+                  type="primary"
+                  size="small"
+                  class="filter-btn"
+                  @click="searchMarkFilter"
+                  >查询</Button
+                >
+              </div>
+            </div>
+            <!-- 查询密号 -->
+            <div class="filter-part">
+              <h4 class="filter-part-title">密号查询试卷</h4>
+              <div class="filter-part-body">
+                <Select
+                  class="filter-select"
+                  v-model="codeFilter.codeType"
+                  placeholder="密号类型"
+                >
+                  <Option
+                    v-for="item in codeTypes"
+                    :key="item.key"
+                    :value="item.key"
+                    :label="item.val"
+                  ></Option>
+                </Select>
+                <Input
+                  class="filter-input"
+                  v-model.trim="codeFilter.code"
+                  placeholder="输入密号"
+                  clearable
+                >
+                </Input>
+                <Button
+                  type="primary"
+                  size="small"
+                  class="filter-btn"
+                  @click="searchCodeFilter"
+                  >查询</Button
+                >
+              </div>
+            </div>
+          </div>
+        </Poptip>
+        <div class="header-part header-step">
+          <Dropdown
+            placement="bottom"
+            transfer
+            trigger="click"
+            transfer-class-name="marker-dropdown header-step-dropdown"
+            @on-click="stepClick"
+          >
+            <span class="el-dropdown-link">
+              <i>{{ curStep.name }}</i>
+              <i v-if="showPaperRelateCount">：{{ curStep.count }} </i>
+              <Icon type="ios-arrow-down"></Icon>
+            </span>
+            <DropdownMenu slot="list">
+              <DropdownItem
+                class="header-step-item"
+                v-for="step in steps.otherStep"
+                :key="step.type"
+                :name="step.name"
+              >
+                <i>{{ step.name }}</i>
+                <i v-if="showPaperRelateCount">（{{ step.count }}）</i>
+              </DropdownItem>
+              <DropdownItem
+                class="header-step-item"
+                v-for="step in steps.levelStep"
+                :key="step.name"
+                :name="step.name"
+              >
+                <i>{{ step.name }}</i>
+                <i v-if="showPaperRelateCount && IS_MARK_LEADER__SCORE">
+                  （{{ step.count }}）
+                </i>
+                <i v-if="showPaperRelateCount && !IS_MARK_LEADER__SCORE">
+                  （{{ step.count }} / {{ step.gcount }}）
+                </i>
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+        <div v-if="IS_MARK_LEADER" class="header-part" @click="toProgress">
+          <p>{{ stageName }}进度 <Icon type="ios-arrow-down"></Icon></p>
+        </div>
+        <div
+          v-if="showStandard && paramsSet.showSample"
+          class="header-part"
+          @click="toStandard"
+        >
+          <p>标准卷 <Icon type="ios-arrow-down"></Icon></p>
+        </div>
+        <div
+          class="header-part header-history"
+          id="header-history"
+          @click="toHistory"
+        >
+          <p>操作记录 <Icon type="ios-arrow-down"></Icon></p>
+        </div>
+        <div class="header-user" id="header-user">
+          <Dropdown
+            placement="bottom"
+            transfer
+            trigger="click"
+            transfer-class-name="marker-dropdown"
+            @on-click="userClick"
+          >
+            <div class="user-name">
+              <Icon type="md-person" size="16" /> {{ username }}
+              <Icon type="ios-arrow-down"></Icon>
+            </div>
+            <DropdownMenu slot="list">
+              <DropdownItem class="color-default-hover" name="toResetPwd"
+                >修改密码</DropdownItem
+              >
+              <DropdownItem class="color-error-hover" name="logout">
+                退出登录
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+
     <!-- fast-level-nav -->
-    <div
-      v-if="ribbonSet.fastLevelNav"
-      class="header-group fast-nav"
-      :style="fastLevelNavStyles"
-    >
+    <div v-if="ribbonSet.fastLevelNav" class="header-group fast-nav">
       <div class="fast-nav-list">
         <div
           v-for="step in steps.levelStep"
@@ -40,269 +306,6 @@
         </div>
       </div>
     </div>
-    <!-- left action -->
-    <div class="header-group">
-      <div class="header-part">
-        <Dropdown
-          v-if="areas.length > 1"
-          placement="bottom"
-          transfer
-          trigger="click"
-          transfer-class-name="marker-dropdown"
-          @on-click="areaClick"
-        >
-          <span class="el-dropdown-link">
-            {{ curArea.areaName }} <Icon type="ios-arrow-down"></Icon>
-          </span>
-          <DropdownMenu slot="list">
-            <DropdownItem
-              v-for="area in areas"
-              :key="area.id"
-              :name="area.id"
-              >{{ area.areaName }}</DropdownItem
-            >
-          </DropdownMenu>
-        </Dropdown>
-        <p v-else>{{ curArea.areaName }}</p>
-      </div>
-      <div v-if="showStatistics" class="header-part" @click="toStatistics">
-        <p>统计分析 <Icon type="ios-arrow-down"></Icon></p>
-      </div>
-    </div>
-    <!-- header-page -->
-    <div class="header-group header-page">
-      <div v-if="showPaperRelateCount" class="page-total">
-        共{{ page.total }}张
-      </div>
-      <div class="page-item" @click="toFirstPage" title="首页">
-        <Icon type="ios-skip-backward" />
-      </div>
-      <div class="page-item" @click="toPrevPage" title="上一页">
-        <Icon type="md-arrow-dropleft" />
-      </div>
-      <Poptip
-        v-if="showPaperRelateCount"
-        popper-class="marker-popper"
-        placement="bottom"
-        trigger="hover"
-        transfer
-      >
-        <div class="page-item page-cpage">
-          <span>{{ page.current }}</span>
-          <span>/</span><span>{{ page.totalPage }}</span>
-        </div>
-        <div class="marker-page" slot="content">
-          <div class="marker-page-set">
-            <span>页面跳转：</span>
-            <InputNumber
-              size="small"
-              :min="1"
-              :max="page.totalPage"
-              :step="1"
-              :precision="0"
-              v-model="pageNo"
-            ></InputNumber>
-            <div class="marker-page-btn" @click="pageNoSet">跳转</div>
-          </div>
-        </div>
-      </Poptip>
-      <div class="page-item" @click="toNextPage" title="下一页">
-        <Icon type="md-arrow-dropright" />
-      </div>
-      <div class="page-item" @click="toLastPage" title="尾页">
-        <Icon type="ios-skip-forward" />
-      </div>
-      <div class="page-item page-size">
-        <Dropdown
-          placement="bottom"
-          transfer
-          trigger="click"
-          transfer-class-name="marker-dropdown"
-          @on-click="pageSizeChange"
-        >
-          <span class="el-dropdown-link">
-            {{ page.size }}张/页 <Icon type="ios-arrow-down"></Icon>
-          </span>
-          <DropdownMenu slot="list">
-            <DropdownItem
-              v-for="item in pageSizeList"
-              :key="item"
-              :name="item"
-              >{{ item }}</DropdownItem
-            >
-          </DropdownMenu>
-        </Dropdown>
-      </div>
-    </div>
-    <!-- right action -->
-    <div class="header-group">
-      <div
-        v-if="showSelectAll"
-        class="header-part header-selection"
-        @click="toSelectAll"
-      >
-        <div
-          :class="[
-            'image-checkbox',
-            {
-              'image-selected': allSelected
-            }
-          ]"
-        >
-          <Icon v-if="allSelected" type="md-checkmark" />
-        </div>
-        全选
-      </div>
-      <Poptip
-        v-if="IS_MARK_LEADER"
-        popper-class="marker-popper"
-        placement="bottom"
-        trigger="click"
-        transfer
-      >
-        <div class="header-part header-filter">
-          筛选 <Icon type="ios-arrow-down"></Icon>
-        </div>
-        <div class="header-filter-body dark-mark" slot="content" @keydown.stop>
-          <!-- 查询标记 -->
-          <div class="filter-part">
-            <h4 class="filter-part-title">查询标记试卷</h4>
-            <div class="filter-part-body">
-              <Select
-                class="filter-select"
-                v-model="markFilter.markerId"
-                placeholder="评卷员"
-              >
-                <Option
-                  v-for="item in markers"
-                  :key="item.id"
-                  :value="item.id"
-                  :label="item.name"
-                ></Option>
-              </Select>
-              <Button
-                type="primary"
-                size="small"
-                class="filter-btn"
-                @click="searchMarkFilter"
-                >查询</Button
-              >
-            </div>
-          </div>
-          <!-- 查询密号 -->
-          <div class="filter-part">
-            <h4 class="filter-part-title">密号查询试卷</h4>
-            <div class="filter-part-body">
-              <Select
-                class="filter-select"
-                v-model="codeFilter.codeType"
-                placeholder="密号类型"
-              >
-                <Option
-                  v-for="item in codeTypes"
-                  :key="item.key"
-                  :value="item.key"
-                  :label="item.val"
-                ></Option>
-              </Select>
-              <Input
-                class="filter-input"
-                v-model.trim="codeFilter.code"
-                placeholder="输入密号"
-                clearable
-              >
-              </Input>
-              <Button
-                type="primary"
-                size="small"
-                class="filter-btn"
-                @click="searchCodeFilter"
-                >查询</Button
-              >
-            </div>
-          </div>
-        </div>
-      </Poptip>
-      <div class="header-part header-step">
-        <Dropdown
-          placement="bottom"
-          transfer
-          trigger="click"
-          transfer-class-name="marker-dropdown header-step-dropdown"
-          @on-click="stepClick"
-        >
-          <span class="el-dropdown-link">
-            <i>{{ curStep.name }}</i>
-            <i v-if="showPaperRelateCount">：{{ curStep.count }} </i>
-            <Icon type="ios-arrow-down"></Icon>
-          </span>
-          <DropdownMenu slot="list">
-            <DropdownItem
-              class="header-step-item"
-              v-for="step in steps.otherStep"
-              :key="step.type"
-              :name="step.name"
-            >
-              <i>{{ step.name }}</i>
-              <i v-if="showPaperRelateCount">（{{ step.count }}）</i>
-            </DropdownItem>
-            <DropdownItem
-              class="header-step-item"
-              v-for="step in steps.levelStep"
-              :key="step.name"
-              :name="step.name"
-            >
-              <i>{{ step.name }}</i>
-              <i v-if="showPaperRelateCount && IS_MARK_LEADER__SCORE">
-                （{{ step.count }}）
-              </i>
-              <i v-if="showPaperRelateCount && !IS_MARK_LEADER__SCORE">
-                （{{ step.count }} / {{ step.gcount }}）
-              </i>
-            </DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </div>
-      <div v-if="IS_MARK_LEADER" class="header-part" @click="toProgress">
-        <p>{{ stageName }}进度 <Icon type="ios-arrow-down"></Icon></p>
-      </div>
-      <div
-        v-if="showStandard && paramsSet.showSample"
-        class="header-part"
-        @click="toStandard"
-      >
-        <p>标准卷 <Icon type="ios-arrow-down"></Icon></p>
-      </div>
-      <div
-        class="header-part header-history"
-        id="header-history"
-        @click="toHistory"
-      >
-        <p>操作记录 <Icon type="ios-arrow-down"></Icon></p>
-      </div>
-      <div class="header-user" id="header-user">
-        <Dropdown
-          placement="bottom"
-          transfer
-          trigger="click"
-          transfer-class-name="marker-dropdown"
-          @on-click="userClick"
-        >
-          <div class="user-name">
-            <Icon type="md-person" size="16" /> {{ username }}
-            <Icon type="ios-arrow-down"></Icon>
-          </div>
-          <DropdownMenu slot="list">
-            <DropdownItem class="color-default-hover" name="toResetPwd"
-              >修改密码</DropdownItem
-            >
-            <DropdownItem class="color-error-hover" name="logout">
-              退出登录
-            </DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </div>
-    </div>
 
     <!-- ResetPwd -->
     <reset-pwd ref="ResetPwd"></reset-pwd>
@@ -351,8 +354,7 @@ export default {
       markers: [],
       markFilter: {
         markerId: ""
-      },
-      fastLevelNavStyles: {}
+      }
     };
   },
   computed: {
@@ -393,14 +395,6 @@ export default {
         };
       })
       .filter(item => item.key !== "examNumber");
-
-    this.fastLevelNavStyles = {
-      right:
-        document.getElementById("header-history").offsetWidth +
-        document.getElementById("header-user").offsetWidth +
-        20 +
-        "px"
-    };
   },
   methods: {
     ...mapMutations("marker", ["setPage", "setAreas", "setRibbonSet"]),

src/modules/mark/leader/LeaderMarking.vue

@@ -32,7 +32,9 @@
       <grade-ribbon ref="GradeRibbon"></grade-ribbon>
     </div>
 
-    <div class="marker-body">
+    <div
+      :class="['marker-body', { 'marker-body-low': ribbonSet.fastLevelNav }]"
+    >
       <div :class="markerImageListClasses" v-if="papers.length">
         <div
           v-for="(paper, index) in papers"
@@ -155,7 +157,8 @@ export default {
       "steps",
       "curStep",
       "curArea",
-      "curSubject"
+      "curSubject",
+      "ribbonSet"
     ]),
     markerImageListClasses() {
       return ["marker-image-list", `marker-image-list-${this.page.size}`];

src/modules/mark/marker/MarkerMarking.vue

@@ -32,7 +32,9 @@
       <grade-ribbon ref="GradeRibbon"></grade-ribbon>
     </div>
 
-    <div class="marker-body">
+    <div
+      :class="['marker-body', { 'marker-body-low': ribbonSet.fastLevelNav }]"
+    >
       <div :class="markerImageListClasses" v-if="papers.length">
         <div
           v-for="(paper, index) in papers"
@@ -219,7 +221,8 @@ export default {
       "setCurArea",
       "setCurStep",
       "setCurUserRoleType",
-      "clearState"
+      "clearState",
+      "ribbonSet"
     ]),
     initData() {
       this.getParamsSetInfo();