评卷员可以标记试卷

src/api.js

@@ -342,6 +342,9 @@ export const paperSelectLevelBatch = (taskIds, result, stage) => {
 export const paperTaskPass = taskId => {
   return $post(`/api/marktasks/${taskId}/skip`, {});
 };
+export const markTask = ({ markTaskId, isMark }) => {
+  return $post(`/api/marktasks/mark_task`, { markTaskId, isMark });
+};
 // grade or mark history
 export const markHistoryList = (paperId, stage) => {
   return $get(`/api/papers/${paperId}/marktasks`, { stage });

src/assets/styles/marker.less

@@ -388,15 +388,6 @@
       color: @color-text-act;
     }
   }
-  .image-rotate {
-    height: 26px;
-    font-size: 26px;
-    margin-right: -5px;
-    cursor: pointer;
-    &:hover {
-      color: @color-text-act;
-    }
-  }
   .image-action {
     .ivu-btn {
       width: 26px;
@@ -409,6 +400,22 @@
         color: @color-text-act;
       }
     }
+
+    &-li {
+      display: inline-block;
+      vertical-align: top;
+      margin-left: 5px;
+      height: 26px;
+      font-size: 26px;
+      cursor: pointer;
+
+      &:hover {
+        color: @color-text-act;
+      }
+    }
+    .mark-act {
+      color: @warning-color;
+    }
   }
 }
 .marker-image-none {

src/modules/grading/marker/MarkerImageView.vue

@@ -33,8 +33,13 @@
             {{ image.title }}
           </div>
         </div>
-        <div class="image-rotate" @click="toRotate">
-          <Icon type="md-refresh-circle" />
+        <div class="image-action">
+          <div class="image-action-li" @click="toMark">
+            <Icon :class="{ 'mark-act': image.isMark }" type="md-bookmark" />
+          </div>
+          <div class="image-action-li" @click="toRotate">
+            <Icon type="md-refresh-circle" />
+          </div>
         </div>
       </slot>
     </div>
@@ -43,6 +48,7 @@
 
 <script>
 import ImageViewContain from "@/components/ImageViewContain";
+import { markTask } from "@/api";
 
 export default {
   name: "marker-image-view",
@@ -80,9 +86,11 @@ export default {
         level: "",
         score: "",
         deg: 0,
+        isMark: false,
         sample: false,
         selected: false
       },
+      loading: false,
       image: {}
     };
   },
@@ -97,6 +105,17 @@ export default {
 
       this.$refs.ImageViewContain.resizeImage(image.deg);
     },
+    async toMark() {
+      if (this.loading) return;
+      this.loading = true;
+      const res = await markTask({
+        markTaskId: this.image.id,
+        isMark: !this.image.isMark
+      }).catch(() => {});
+      this.loading = false;
+      if (!res) return;
+      this.image.isMark = !this.image.isMark;
+    },
     toSelect() {
       if (this.image.sample) return;
       this.image.selected = !this.image.selected;