档位快捷栏调整

src/assets/styles/marker.less

@@ -8,17 +8,21 @@
 // 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 +106,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,7 +139,13 @@
   }
 
   .fast-nav{
-    padding: 5px 10px;
+    padding: 4px 10px 5px;
+    background-color: @color-background-light;
+    margin-right: 280px;
+    border-top: 1px solid  @color-background-light2;
+    border-right: 1px solid  @color-background;
+    text-align: center;
+
 
     &-list{
       font-size: 0;
@@ -237,6 +247,10 @@
   padding: 5px;
   background: @color-background;
   z-index: 7;
+
+  &-low{
+    top: 80px;
+  }
 }
 .marker-image-list {
   height: 100%;
@@ -501,8 +515,8 @@
 .marker-action {
   position: fixed;
   width: 280px;
-  right: 0;
   top: 0;
+  right: 0;
   bottom: 0;
   z-index: 8;
   padding: 60px 0 50px;

src/modules/grading/components/RibbonSetDialog.vue

@@ -80,6 +80,7 @@ export default {
         this.ribbonSetModal.needEnterSubmit = 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) : {};
@@ -87,6 +88,13 @@ 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

@@ -52,7 +52,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"
@@ -276,7 +278,8 @@ export default {
       "setCurSubject",
       "setCurUserRoleType",
       "setShortcut",
-      "clearState"
+      "clearState",
+      "ribbonSet"
     ]),
     async initData() {
       this.dataReady = false;
@@ -581,7 +584,7 @@ export default {
       this.selectPaper(0);
     },
     serachMarkPaper(data) {
-      console.log(data);
+      // console.log(data);
       this.speFilter = { type: data.type, params: data.params };
       this.toPage(1);
     },

src/modules/grading/marker/MarkerGrading.vue

@@ -50,7 +50,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"
@@ -244,7 +246,8 @@ export default {
       "steps",
       "curStep",
       "curArea",
-      "curSubject"
+      "curSubject",
+      "ribbonSet"
     ]),
     markerImageListClasses() {
       return ["marker-image-list", `marker-image-list-${this.page.size}`];
@@ -455,7 +458,7 @@ export default {
     async getWorkLevels() {
       const data = await workLevelList(this.workId, this.curSubject.stage);
       this.levels = data || [];
-      console.log(this.levels);
+      // console.log(this.levels);
     },
     async pageSetChange() {
       await this.getList();

src/modules/grading/marker/MarkerHeader.vue

@@ -1,5 +1,268 @@
 <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 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
+          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="header-filter-body dark-mark" slot="content">
+            <div class="filter-part-body">
+              <span class="filter-label">页面跳转：</span>
+              <InputNumber
+                class="filter-input"
+                :min="1"
+                :max="page.totalPage"
+                :step="1"
+                :precision="0"
+                v-model="pageNo"
+              ></InputNumber>
+              <Button
+                type="primary"
+                size="small"
+                class="filter-btn"
+                @click="pageNoSet"
+                >跳转</Button
+              >
+            </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 | levelNameFilter }}</i>
+              <i>：{{ 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>（{{ step.count }}）</i>
+              </DropdownItem>
+              <DropdownItem
+                class="header-step-item"
+                v-for="step in steps.levelStep"
+                :key="step.name"
+                :name="step.name"
+              >
+                <i>{{ step.name | levelNameFilter }}</i>
+                <i v-if="!IS_MARK_LEADER__SCORE"
+                  >（{{ step.count }} / {{ step.gcount }}）</i
+                >
+                <i v-else>（{{ step.count }}）</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" class="header-part" @click="toStandard">
+          <p>标准卷 <Icon type="ios-arrow-down"></Icon></p>
+        </div>
+        <div class="header-part header-history" @click="toHistory">
+          <p>操作记录 <Icon type="ios-arrow-down"></Icon></p>
+        </div>
+        <div class="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">
       <div class="fast-nav-list">
@@ -36,262 +299,6 @@
         </div>
       </div>
     </div>
-    <!-- left action -->
-    <div v-if="!ribbonSet.fastLevelNav" 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 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" />
-      </div>
-      <div class="page-item" @click="toPrevPage" title="上一页">
-        <Icon type="md-arrow-dropleft" />
-      </div>
-      <Poptip
-        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="header-filter-body dark-mark" slot="content">
-          <div class="filter-part-body">
-            <span class="filter-label">页面跳转：</span>
-            <InputNumber
-              class="filter-input"
-              :min="1"
-              :max="page.totalPage"
-              :step="1"
-              :precision="0"
-              v-model="pageNo"
-            ></InputNumber>
-            <Button
-              type="primary"
-              size="small"
-              class="filter-btn"
-              @click="pageNoSet"
-              >跳转</Button
-            >
-          </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 | levelNameFilter }}</i>
-            <i>：{{ 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>（{{ step.count }}）</i>
-            </DropdownItem>
-            <DropdownItem
-              class="header-step-item"
-              v-for="step in steps.levelStep"
-              :key="step.name"
-              :name="step.name"
-            >
-              <i>{{ step.name | levelNameFilter }}</i>
-              <i v-if="!IS_MARK_LEADER__SCORE"
-                >（{{ step.count }} / {{ step.gcount }}）</i
-              >
-              <i v-else>（{{ step.count }}）</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" class="header-part" @click="toStandard">
-        <p>标准卷 <Icon type="ios-arrow-down"></Icon></p>
-      </div>
-      <div class="header-part header-history" @click="toHistory">
-        <p>操作记录 <Icon type="ios-arrow-down"></Icon></p>
-      </div>
-      <div class="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>

src/modules/mark/leader/LeaderMarking.vue

@@ -31,7 +31,9 @@
       <grade-ribbon v-if="curSubject.id" 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"
@@ -158,7 +160,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

@@ -31,7 +31,9 @@
       <grade-ribbon v-if="curSubject.id" 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"
@@ -200,7 +202,8 @@ export default {
       "steps",
       "curStep",
       "curArea",
-      "curSubject"
+      "curSubject",
+      "ribbonSet"
     ]),
     markerImageListClasses() {
       return ["marker-image-list", `marker-image-list-${this.page.size}`];