grade -f

src/assets/styles/main.less

@@ -263,6 +263,7 @@
   min-height: 40px;
 
   .carousel-none {
+    color: @dark-color-lighter;
     font-size: @font-size-base;
     text-align: center;
     position: absolute;

src/assets/styles/mark.less

@@ -374,6 +374,21 @@
     }
   }
 }
+// grading-operation
+.grading-operation {
+  .detail-action-fullscreen {
+    top: 64px;
+  }
+  &-image-preview {
+    .ivu-modal-mask,
+    .ivu-modal-wrap {
+      left: 0;
+      bottom: 0;
+      top: 64px;
+      right: 290px;
+    }
+  }
+}
 
 // .grade-history-paper
 .grade-history-paper {
@@ -408,7 +423,7 @@
       line-height: 32px;
     }
     .ivu-select {
-      width: 80px;
+      width: 60px;
       min-width: auto;
     }
   }

src/modules/grading/GradingOperation.vue

@@ -1,28 +1,16 @@
 <template>
   <div class="grading-operation home">
-    <div class="home-header">
-      <view-header>
-        <h1 slot="logo">{{ curSubject.name }}</h1>
-      </view-header>
-    </div>
+    <view-header></view-header>
     <div class="home-body">
-      <div class="home-main home-main-nofooter grading-detail">
-        <grade-step
-          :steps="steps"
-          :init-step="curStep"
-          :show-analysis="false"
-          @on-change="stepChange"
-          ref="GradeStep"
-          v-if="steps.length"
-        ></grade-step>
-        <div class="detail-body">
-          <div class="detail-filter">
+      <div class="home-main grading-detail">
+        <div class="part-box-head grading-head">
+          <div class="part-box-head-left">
             <Form ref="FilterForm" label-position="left" inline>
               <FormItem>
                 <Select
                   v-model="filter.questionId"
                   @on-change="areaChange"
-                  placeholder="请选择考区"
+                  placeholder="选择考区"
                 >
                   <Option
                     v-for="area in areas"
@@ -33,12 +21,43 @@
                 </Select>
               </FormItem>
               <FormItem>
-                <Button type="primary" icon="ios-search" @click="toPage(1)"
+                <Button
+                  size="small"
+                  class="btn-form-search"
+                  type="primary"
+                  @click="toPage(1)"
                   >查询</Button
                 >
               </FormItem>
             </Form>
           </div>
+        </div>
+        <grade-step
+          :steps="steps"
+          :init-step="curStep"
+          :show-analysis="false"
+          @on-change="stepChange"
+          ref="GradeStep"
+          v-if="steps.levelStep"
+        ></grade-step>
+        <div class="detail-body clear-float">
+          <!-- detail-aciton -->
+          <div
+            :class="[
+              'detail-action',
+              { 'detail-action-fullscreen': isFullscreenMarking }
+            ]"
+          >
+            <grade-action
+              :cur-paper="curPaper"
+              :levels="levels"
+              :user-role="curUserRoleType"
+              @on-select-level="gradeCurPaper"
+              @on-pass="passCurPaper"
+              ref="GradeAction"
+              v-if="curPaper.id"
+            ></grade-action>
+          </div>
           <!-- detail-papers -->
           <div :class="detailPapersClasses">
             <div class="detail-papers-carousel">
@@ -54,7 +73,7 @@
                 v-if="filter.questionId"
               ></grade-history-paper>
             </div>
-            <div class="detail-papers-list">
+            <div class="detail-papers-list" v-if="papers.length">
               <div :class="imageViewClasses">
                 <div
                   :class="[
@@ -74,7 +93,7 @@
                   </div>
                 </div>
               </div>
-              <div class="part-page" v-if="total > size">
+              <div class="part-page">
                 <Page
                   :current="current"
                   :total="total"
@@ -87,31 +106,25 @@
                 ></Page>
               </div>
             </div>
-          </div>
-          <!-- detail-aciton -->
-          <div class="detail-action">
-            <grade-action
-              :cur-paper="curPaper"
-              :levels="levels"
-              :user-role="curUserRoleType"
-              @on-select-level="gradeCurPaper"
-              @on-pass="passCurPaper"
-              ref="GradeAction"
-              v-if="curPaper.id"
-            ></grade-action>
+            <div class="detail-papers-list" v-else>
+              <p class="detail-papers-none">暂无数据</p>
+            </div>
           </div>
         </div>
+
+        <view-footer></view-footer>
       </div>
     </div>
 
     <!-- image-preview -->
     <image-preview
-      class="grading-detail-image-preview"
+      class="grading-operation-image-preview"
       :image-list="papers"
       :init-index="curPaperIndex"
       @on-paper-change="selectPaper"
       @on-page-prev="prevPage"
       @on-page-next="nextPage"
+      @on-close="imagePreviewClose"
       header-hide
       ref="ImagePreview"
       v-if="papers.length"
@@ -119,10 +132,11 @@
 
     <!-- carousel paper review -->
     <image-preview
-      class="grading-detail-image-preview"
+      class="grading-operation-image-preview"
       :image-list="carouselPapers"
       :init-index="curCarouselPaperIndex"
       @on-paper-change="selectCarouselPaper"
+      @on-close="imagePreviewClose"
       loop
       header-hide
       ref="CarouselPapersPreview"
@@ -200,7 +214,8 @@ export default {
       curPaperIndex: 0,
       // carousel paper review,
       carouselPapers: [],
-      curCarouselPaperIndex: 0
+      curCarouselPaperIndex: 0,
+      isFullscreenMarking: false
     };
   },
   computed: {
@@ -242,7 +257,7 @@ export default {
 
       const data = await markerPaperList(datas);
       this.papers = data.data.map(paper => {
-        paper.title = paper.examNumber;
+        paper.title = `NO.${paper.sn}`;
         return paper;
       });
       this.total = data.totalCount;
@@ -274,20 +289,21 @@ export default {
           type: "reject"
         });
       }
-      let levelMenu = data.map(item => {
+      let levelStep = data.map(item => {
         return {
           ...item,
           name: item.id,
           type: "done"
         };
       });
-      this.steps = [...levelMenu, ...otherStep];
+      this.steps = { levelStep, otherStep };
+
       if (!this.curStep) {
         let curStep = {};
         if (undoIndex === -1) {
-          curStep = this.steps[0];
+          curStep = levelStep[0];
         } else {
-          curStep = this.steps[this.steps.length - 2];
+          curStep = otherStep[0];
         }
         this.curStep = curStep;
       }
@@ -340,9 +356,13 @@ export default {
       this.curPaper = { ...this.papers[index] };
     },
     toReview(index) {
+      this.isFullscreenMarking = true;
       this.selectPaper(index);
       this.$refs.ImagePreview.open();
     },
+    imagePreviewClose() {
+      this.isFullscreenMarking = false;
+    },
     async prevPage() {
       if (this.current === 1) {
         this.$Message.warning("当前已经是第一条数据了");
@@ -381,9 +401,12 @@ export default {
     },
     // paper carousel
     toViewCarouselPaper(paperIndex, papers) {
+      this.isFullscreenMarking = true;
       this.curCarouselPaperIndex = paperIndex;
       this.carouselPapers = papers;
-      this.$refs.CarouselPapersPreview.open();
+      this.$nextTick(() => {
+        this.$refs.CarouselPapersPreview.open();
+      });
     },
     selectCarouselPaper(index) {
       this.curCarouselPaperIndex = index;

src/modules/grading/components/GradeStep.vue

@@ -84,7 +84,9 @@ export default {
   computed: {
     levelStepStyles() {
       return {
-        marginRight: this.steps.otherStep.length * 82 + 20 + "px"
+        marginRight: this.steps.otherStep.length
+          ? this.steps.otherStep.length * 82 + 20 + "px"
+          : "0"
       };
     }
   },