分页控件调整

src/assets/styles/marker.less

@@ -17,6 +17,7 @@
   background-color: @color-background-light;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   line-height: 30px;
 
   .header-part {
@@ -32,6 +33,38 @@
       color: @color-text-act;
     }
   }
+  .header-page {
+    .page-total {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 5px;
+    }
+
+    .page-item {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 2px;
+      min-width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background-color: @color-background;
+      border-radius: 2px;
+      cursor: pointer;
+      &:hover {
+        background-color: shade(@color-background, 20%);
+      }
+    }
+    .page-cpage {
+      padding: 0 5px;
+      span {
+        margin: 0 1px;
+      }
+    }
+    .page-size {
+      padding: 0 10px;
+    }
+  }
   .header-step {
     color: @color-text-act;
   }
@@ -111,6 +144,43 @@
     }
   }
 }
+// marker-page
+.marker-page {
+  &-set {
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .ivu-input-number {
+      width: 80px;
+      min-width: 0;
+      border-color: @color-text;
+      background-color: @color-text-act;
+      input {
+        box-shadow: none;
+        background-color: @color-text-act;
+      }
+    }
+    > span:first-child {
+      width: 80px;
+      text-align: right;
+    }
+  }
+  &-btn {
+    height: 24px;
+    line-height: 24px;
+    padding: 0 10px;
+    background-color: @color-background-light;
+    border-radius: 5px;
+    margin-left: 5px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: @color-act1;
+      color: @color-text-act;
+    }
+  }
+}
 
 // .marker-body
 .marker-body {
@@ -594,99 +664,6 @@
     }
   }
 }
-// marker-page
-.marker-page {
-  &-shortcut {
-    margin-bottom: 20px;
-    text-align: center;
-    font-size: 0;
-    .shortcut-item {
-      display: inline-block;
-      vertical-align: top;
-      height: 26px;
-      line-height: 26px;
-      width: 64px;
-      text-align: center;
-      margin: 0 3px;
-      background-color: @color-background-light;
-      border-radius: 5px;
-      font-size: 14px;
-      cursor: pointer;
-
-      &:hover {
-        background-color: @color-act1;
-        color: @color-text-act;
-      }
-    }
-  }
-
-  &-set {
-    margin-bottom: 10px;
-    > * {
-      display: inline-block;
-      vertical-align: middle;
-    }
-    .ivu-input-number {
-      width: 80px;
-      min-width: 0;
-      border-color: @color-text;
-      background-color: @color-text-act;
-      input {
-        box-shadow: none;
-        background-color: @color-text-act;
-      }
-    }
-    > span:first-child {
-      width: 80px;
-      text-align: right;
-    }
-  }
-  &-btn {
-    height: 24px;
-    line-height: 24px;
-    padding: 0 10px;
-    background-color: @color-background-light;
-    border-radius: 5px;
-    margin-left: 5px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: @color-act1;
-      color: @color-text-act;
-    }
-  }
-
-  &-size {
-    > h4 {
-      width: 80px;
-      text-align: right;
-    }
-    .page-size-list {
-      margin: 10px 0;
-      font-size: 0;
-      white-space: normal;
-    }
-    .page-size-item {
-      display: inline-block;
-      vertical-align: top;
-      height: 26px;
-      line-height: 26px;
-      width: 40px;
-      text-align: center;
-      margin: 0 3px 6px;
-      background-color: @color-background-light;
-      border-radius: 5px;
-      font-size: 14px;
-      cursor: pointer;
-
-      &:hover,
-      &-act {
-        background-color: @color-act1;
-        color: @color-text-act;
-      }
-    }
-  }
-}
 
 // leader-progress
 .leader-progress {

src/modules/grading/leader/LeaderGrading.vue

@@ -24,7 +24,7 @@
         :cur-paper-or-task="curPaper"
         :levels="levels"
         :params-set="paramsSet"
-        :key="curPaper.id"
+        :key="curPaper.key"
         @on-leader-level="leaderSelectLevel"
         @on-code-search="serachPaperByCode"
         ref="GradeAction"
@@ -68,7 +68,7 @@
       <div :class="markerImageListClasses" v-if="papers.length">
         <div
           v-for="(paper, index) in papers"
-          :key="paper.id"
+          :key="paper.key"
           :class="[
             'marker-image-item',
             {
@@ -286,6 +286,7 @@ export default {
 
       const data = await paperList(datas);
       this.papers = data.data.map(paper => {
+        paper.key = this.$randomCode();
         paper.title = `NO.${paper.sn}`;
         paper.selected = false;
         return paper;

src/modules/grading/marker/MarkerGrading.vue

@@ -20,7 +20,7 @@
         :cur-paper-or-task="curPaper"
         :levels="levels"
         :params-set="paramsSet"
-        :key="curPaper.id"
+        :key="curPaper.key"
         @on-select-level="gradeCurPaper"
         @on-pass="passCurPaper"
         ref="GradeAction"
@@ -61,7 +61,7 @@
       <div :class="markerImageListClasses" v-if="papers.length">
         <div
           v-for="(paper, index) in papers"
-          :key="paper.id"
+          :key="paper.key"
           :class="[
             'marker-image-item',
             {
@@ -244,6 +244,7 @@ export default {
 
       const data = await markerTaskList(datas);
       this.papers = data.data.map(paper => {
+        paper.key = this.$randomCode();
         paper.title = `NO.${paper.sn}`;
         paper.selected = false;
         return paper;

src/modules/grading/marker/MarkerHeader.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="marker-header">
+    <!-- left action -->
     <div class="header-group">
       <div class="header-part">
         <Dropdown
@@ -27,76 +28,70 @@
       <div v-if="showStatistics" class="header-part" @click="toStatistics">
         <p>统计分析 <Icon type="ios-arrow-down"></Icon></p>
       </div>
-      <div class="header-part">
-        <Poptip
-          popper-class="marker-popper"
+    </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="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"
-          width="312"
           transfer
-          v-model="pageVisible"
+          trigger="click"
+          transfer-class-name="marker-dropdown"
+          @on-click="pageSizeChange"
         >
-          <p v-if="showPaperRelateCount">
-            当前页：<span>{{ page.current }}</span
-            >/<span>{{ page.totalPage }} </span>
-            <Icon type="ios-arrow-down"></Icon>
-          </p>
-          <p v-else>
-            <span>翻页操作</span>
-            <Icon type="ios-arrow-down"></Icon>
-          </p>
-
-          <div class="marker-page" slot="content">
-            <div class="marker-page-shortcut">
-              <div class="shortcut-item" @click="toFirstPage">首页</div>
-              <div class="shortcut-item" @click="toPrevPage">上一页</div>
-              <div class="shortcut-item" @click="toNextPage">下一页</div>
-              <div class="shortcut-item" @click="toLastPage">尾页</div>
-            </div>
-            <div class="marker-page-size">
-              <h4>每页张数：</h4>
-              <div class="page-size-list">
-                <div
-                  :class="[
-                    'page-size-item',
-                    { 'page-size-item-act': page.size === item }
-                  ]"
-                  v-for="item in pageSizeList"
-                  :key="item"
-                  @click="pageSizeChange(item)"
-                >
-                  {{ item }}
-                </div>
-              </div>
-            </div>
-            <div v-if="showPaperRelateCount" class="marker-page-set">
-              <span>当前页：</span>
-              <p>
-                <span>{{ page.current }}</span
-                >/<span>{{ page.totalPage }} </span>
-              </p>
-            </div>
-            <div v-if="showPaperRelateCount" class="marker-page-set">
-              <span>总张数：</span>
-              <p>
-                <span>{{ page.total }}</span>
-              </p>
-            </div>
-            <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>
+          <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"
@@ -258,6 +253,7 @@ export default {
     this.filter.workId = subjectId[0];
     this.filter.subject = subjectId[1];
     this.getAreaList();
+    document.addEventListener("keydown", this.keyEvent);
   },
   methods: {
     ...mapMutations("marker", ["setPage", "setAreas"]),
@@ -276,6 +272,29 @@ export default {
         this.$emit("area-change", areas[0]);
       }
     },
+    keyEvent(e) {
+      e.preventDefault();
+      if (!e.altKey && !e.shiftKey && !e.repeat) {
+        // 左右键切换分页
+        if (e.code === "ArrowLeft") {
+          if (e.ctrlKey) {
+            this.toFirstPage();
+          } else {
+            this.toPrevPage();
+          }
+          return;
+        }
+
+        if (e.code === "ArrowRight") {
+          if (e.ctrlKey) {
+            this.toLastPage();
+          } else {
+            this.toNextPage();
+          }
+          return;
+        }
+      }
+    },
     areaClick(val) {
       if (this.curArea.id === val) return;
       const curArea = this.areas.find(item => item.id === val);
@@ -304,6 +323,7 @@ export default {
       this.$emit("to-statistics");
     },
     pageNoSet() {
+      this.pageNo = this.pageNo || 1;
       this.setPage({ current: this.pageNo });
       this.pageSetChange();
     },
@@ -345,6 +365,9 @@ export default {
       this.$ls.clear();
       this.$router.push({ name: "Login" });
     }
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this.keyEvent);
   }
 };
 </script>

src/modules/mark/leader/LeaderMarking.vue

@@ -20,7 +20,7 @@
       <mark-action
         :cur-paper-or-task="curPaper"
         :levels="levels"
-        :key="curPaper.id"
+        :key="curPaper.key"
         @on-leader-level="leaderSelectLevel"
         @on-code-search="serachPaperByCode"
         @on-grade-change-search="searchGradeChangeList"
@@ -33,7 +33,7 @@
       <div :class="markerImageListClasses" v-if="papers.length">
         <div
           v-for="(paper, index) in papers"
-          :key="paper.id"
+          :key="paper.key"
           :class="[
             'marker-image-item',
             {
@@ -216,6 +216,7 @@ export default {
         data = await paperList(datas);
       }
       this.papers = data.data.map(paper => {
+        paper.key = this.$randomCode();
         paper.title = this.IS_ADMIN ? paper.examNumber : `NO.${paper.sn}`;
         return paper;
       });

src/modules/mark/marker/MarkerMarking.vue

@@ -22,7 +22,7 @@
         :levels="levels"
         :show-count="showPaperRelateCount"
         :params-set="paramsSet"
-        :key="curPaper.id"
+        :key="curPaper.key"
         @on-leader-level="gradingCurPaper"
         @on-select-score="scoreCurPaper"
         @on-pass="passCurPaper"
@@ -35,7 +35,7 @@
       <div :class="markerImageListClasses" v-if="papers.length">
         <div
           v-for="(paper, index) in papers"
-          :key="`${paper.id}-${paper.result}`"
+          :key="`${paper.key}-${paper.result}`"
           :class="[
             'marker-image-item',
             {
@@ -246,6 +246,7 @@ export default {
 
       const data = await requestAction(datas);
       this.papers = data.data.map(paper => {
+        paper.key = this.$randomCode();
         paper.title = `NO.${paper.sn}`;
         paper.score = paper.result;
         return paper;