detail action md

src/assets/styles/main.less

@@ -88,6 +88,7 @@
 
   &-title {
     font-size: 16px;
+    line-height: 32px;
     margin-bottom: 5px;
   }
   &-contain {

src/assets/styles/mark.less

@@ -139,29 +139,15 @@
   .detail-body {
     margin: -20px -20px 0;
     padding-top: 70px;
+
     min-height: 500px;
 
     &-2 {
-      .detail-standard {
-        display: none;
-      }
-      .detail-paper {
-        margin-left: 0;
+      .detail-papers-list {
+        width: 100%;
       }
     }
   }
-  .detail-carousel {
-    position: fixed;
-    top: 120px;
-    left: 0;
-    bottom: 0;
-    width: 300px;
-    padding: 15px 0;
-    // background-color: #fff;
-    z-index: 98;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
   .detail-action {
     position: fixed;
     top: 120px;
@@ -174,14 +160,57 @@
     overflow-x: hidden;
     overflow-y: auto;
   }
-  .detail-paper {
-    margin: 0 300px;
-    padding: 15px 0;
+  .detail-papers {
+    display: flex;
+    margin-right: 300px;
+
+    &-carousel {
+      padding: 0 0 15px 0;
+    }
+    &-list {
+      padding: 0 0 15px 0;
+    }
+
+    &-col-3 {
+      .detail-papers-carousel {
+        width: 33.33%;
+      }
+      .detail-papers-list {
+        width: 66.66%;
+      }
+    }
+    &-col-4 {
+      .detail-papers-carousel {
+        width: 25%;
+      }
+      .detail-papers-list {
+        width: 75%;
+      }
+    }
+    &-col-5 {
+      .detail-papers-carousel {
+        width: 20%;
+      }
+      .detail-papers-list {
+        width: 80%;
+      }
+    }
+    &-col-6 {
+      .detail-papers-carousel {
+        width: 16.66%;
+      }
+      .detail-papers-list {
+        width: 83.33%;
+      }
+    }
+
     .ivu-page {
       text-align: center;
     }
   }
   .detail-filter {
+    margin-right: 300px;
+    padding-top: 15px;
     text-align: center;
   }
   &-image-preview {
@@ -197,11 +226,14 @@
 
 // .paper-carousel
 .paper-carousel {
-  width: 300px;
+  width: 100%;
+  padding: 10px;
 
   .carousel-title {
     text-align: center;
-    margin-bottom: 10px;
+    height: 32px;
+    line-height: 32px;
+    margin-bottom: 5px;
     > h3 {
       font-size: 16px;
     }
@@ -229,6 +261,9 @@
     margin-bottom: 15px;
     text-align: left;
   }
+  .action-paper-state {
+    font-size: 26px;
+  }
 
   .action-paper-info {
     font-size: 16px;

src/components/common/ImagePreview/ImagePreview.vue

@@ -238,7 +238,7 @@ export default {
         if (this.loop) {
           this.curIndex = this.lastIndex - 1;
         } else {
-          this.$emit("page-prev");
+          this.$emit("on-page-prev");
           return;
         }
       } else {
@@ -252,7 +252,7 @@ export default {
         if (this.loop) {
           this.curIndex = 0;
         } else {
-          this.$emit("page-next");
+          this.$emit("on-page-next");
           return;
         }
       } else {

src/constants/apiTempData.js

@@ -0,0 +1,355 @@
+export const papers = [
+  {
+    id: 869,
+    sn: "111280874",
+    examNumber: "1901130044",
+    level: "B",
+    score: null,
+    redoLevel: null,
+    updatedOn: 1574665102000,
+    url:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/734/1?random=676176fc-24cd-407a-a7bc-fabc49bd2dbc",
+    thumbUrl:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/734/2?random=d8d100c5-ac64-4b5a-a2fe-bce2dd8aed0f",
+    markByLeader: false,
+    markedLogic: false,
+    areaCode: "1",
+    inspectScore: null,
+    inspectLevel: null,
+    inspector: null,
+    sheetSrc: null,
+    stage: "LEVEL",
+    test: 0,
+    paperTest: 0,
+    markResults: [],
+    arbitrated: false,
+    rejected: false,
+    manual: false,
+    sample: false,
+    tagged: true,
+    missing: false
+  },
+  {
+    id: 870,
+    sn: "111501421",
+    examNumber: "1901130045",
+    level: "A",
+    score: null,
+    redoLevel: null,
+    updatedOn: 1574665113000,
+    url:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/733/1?random=e2966291-ffba-4b19-985d-0cad9ae1b75b",
+    thumbUrl:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/733/2?random=5d16ebc7-0e52-493c-93fa-4850db5e2632",
+    markByLeader: false,
+    markedLogic: false,
+    areaCode: "1",
+    inspectScore: null,
+    inspectLevel: null,
+    inspector: null,
+    sheetSrc: null,
+    stage: "LEVEL",
+    test: 0,
+    paperTest: 0,
+    markResults: [],
+    arbitrated: false,
+    rejected: false,
+    manual: false,
+    sample: false,
+    tagged: true,
+    missing: false
+  },
+  {
+    id: 871,
+    sn: "111563006",
+    examNumber: "1901130046",
+    level: "C",
+    score: null,
+    redoLevel: null,
+    updatedOn: 1574753749000,
+    url:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/731/1?random=b305c27c-76d0-4477-a1ef-c9b8554a4671",
+    thumbUrl:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/731/2?random=dd1a4e72-9314-4429-a5e8-dacfa5275397",
+    markByLeader: false,
+    markedLogic: false,
+    areaCode: "1",
+    inspectScore: null,
+    inspectLevel: null,
+    inspector: null,
+    sheetSrc: null,
+    stage: "LEVEL",
+    test: 0,
+    paperTest: 0,
+    markResults: [],
+    arbitrated: false,
+    rejected: false,
+    manual: false,
+    sample: false,
+    tagged: true,
+    missing: false
+  },
+  {
+    id: 867,
+    sn: "111572727",
+    examNumber: "1901040084",
+    level: "B",
+    score: null,
+    redoLevel: null,
+    updatedOn: 1574665550000,
+    url:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/736/1?random=d90a96e7-1d1a-426b-8428-b5c980589fe1",
+    thumbUrl:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/736/2?random=dc754e3b-7a92-4a59-a34c-e67a09253e7b",
+    markByLeader: false,
+    markedLogic: false,
+    areaCode: "1",
+    inspectScore: null,
+    inspectLevel: null,
+    inspector: null,
+    sheetSrc: null,
+    stage: "LEVEL",
+    test: 0,
+    paperTest: 0,
+    markResults: [],
+    arbitrated: false,
+    rejected: false,
+    manual: false,
+    sample: false,
+    tagged: false,
+    missing: false
+  },
+  {
+    id: 868,
+    sn: "111086411",
+    examNumber: "1901130043",
+    level: "E",
+    score: null,
+    redoLevel: null,
+    updatedOn: 1577325078000,
+    url:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/735/1?random=e6ea4c48-e2d0-470e-a0db-5e7642cad923",
+    thumbUrl:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/735/2?random=4ddc167d-8bb3-443d-8d5d-6a725fab9950",
+    markByLeader: false,
+    markedLogic: false,
+    areaCode: "1",
+    inspectScore: null,
+    inspectLevel: null,
+    inspector: null,
+    sheetSrc: null,
+    stage: "LEVEL",
+    test: 0,
+    paperTest: 0,
+    markResults: [],
+    arbitrated: false,
+    rejected: false,
+    manual: false,
+    sample: false,
+    tagged: true,
+    missing: false
+  },
+  {
+    id: 874,
+    sn: "111191877",
+    examNumber: "1901130054",
+    level: "F",
+    score: null,
+    redoLevel: null,
+    updatedOn: 1574836896000,
+    url:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/737/1?random=68a6e70f-8983-4445-82dd-f71499ad7441",
+    thumbUrl:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/737/2?random=33db53ee-04b2-4d46-89bc-7bf276d839e2",
+    markByLeader: false,
+    markedLogic: false,
+    areaCode: "1",
+    inspectScore: null,
+    inspectLevel: null,
+    inspector: null,
+    sheetSrc: null,
+    stage: "LEVEL",
+    test: 0,
+    paperTest: 0,
+    markResults: [],
+    arbitrated: false,
+    rejected: false,
+    manual: false,
+    sample: false,
+    tagged: false,
+    missing: false
+  },
+  {
+    id: 873,
+    sn: "111965173",
+    examNumber: "1901130053",
+    level: "B",
+    score: null,
+    redoLevel: null,
+    updatedOn: 1577325083000,
+    url:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/738/1?random=9f788228-2213-4a46-9461-b222e310950b",
+    thumbUrl:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/738/2?random=7adb5c94-b42a-4a50-8920-aaa88134b3f3",
+    markByLeader: false,
+    markedLogic: false,
+    areaCode: "1",
+    inspectScore: null,
+    inspectLevel: null,
+    inspector: null,
+    sheetSrc: null,
+    stage: "LEVEL",
+    test: 0,
+    paperTest: 0,
+    markResults: [],
+    arbitrated: false,
+    rejected: false,
+    manual: false,
+    sample: false,
+    tagged: false,
+    missing: false
+  },
+  {
+    id: 872,
+    sn: "111039763",
+    examNumber: "1901130047",
+    level: "H",
+    score: null,
+    redoLevel: null,
+    updatedOn: 1573718404000,
+    url:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/732/1?random=b1cdc3f5-8cae-4e8e-ba92-e1df640ba001",
+    thumbUrl:
+      "http://127.0.0.1:9000/api/file/image/download/31/1/732/2?random=32b1cb60-a0d5-4253-9fb6-03863a88e2b2",
+    markByLeader: true,
+    markedLogic: false,
+    areaCode: "1",
+    inspectScore: null,
+    inspectLevel: null,
+    inspector: null,
+    sheetSrc: null,
+    stage: "LEVEL",
+    test: 0,
+    paperTest: 0,
+    markResults: [],
+    arbitrated: false,
+    rejected: false,
+    manual: false,
+    sample: true,
+    tagged: false,
+    missing: false
+  }
+];
+
+export const levels = [
+  {
+    name: "A",
+    range: [0, 9],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "B",
+    range: [10, 19],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "C",
+    range: [20, 29],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "D",
+    range: [30, 39],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "E",
+    range: [40, 49],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "F",
+    range: [50, 59],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "G",
+    range: [60, 69],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "H",
+    range: [70, 79],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "I",
+    range: [80, 89],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "J",
+    range: [90, 94],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  },
+  {
+    name: "K",
+    range: [95, 99],
+    gcount: 100,
+    gpercent: 10.1,
+    pt: 12,
+    count: 100,
+    percent: 8.1,
+    kdpt: 10
+  }
+];

src/constants/papers.json

@@ -1,226 +0,0 @@
-[
-  {
-    "id": 869,
-    "sn": "111280874",
-    "examNumber": "1901130044",
-    "level": "B",
-    "score": null,
-    "redoLevel": null,
-    "updatedOn": 1574665102000,
-    "url": "http://127.0.0.1:9000/api/file/image/download/31/1/734/1?random=676176fc-24cd-407a-a7bc-fabc49bd2dbc",
-    "thumbUrl": "http://127.0.0.1:9000/api/file/image/download/31/1/734/2?random=d8d100c5-ac64-4b5a-a2fe-bce2dd8aed0f",
-    "markByLeader": false,
-    "markedLogic": false,
-    "areaCode": "1",
-    "inspectScore": null,
-    "inspectLevel": null,
-    "inspector": null,
-    "sheetSrc": null,
-    "stage": "LEVEL",
-    "test": 0,
-    "paperTest": 0,
-    "markResults": [],
-    "arbitrated": false,
-    "rejected": false,
-    "manual": false,
-    "sample": false,
-    "tagged": true,
-    "missing": false
-  },
-  {
-    "id": 870,
-    "sn": "111501421",
-    "examNumber": "1901130045",
-    "level": "B",
-    "score": null,
-    "redoLevel": null,
-    "updatedOn": 1574665113000,
-    "url": "http://127.0.0.1:9000/api/file/image/download/31/1/733/1?random=e2966291-ffba-4b19-985d-0cad9ae1b75b",
-    "thumbUrl": "http://127.0.0.1:9000/api/file/image/download/31/1/733/2?random=5d16ebc7-0e52-493c-93fa-4850db5e2632",
-    "markByLeader": false,
-    "markedLogic": false,
-    "areaCode": "1",
-    "inspectScore": null,
-    "inspectLevel": null,
-    "inspector": null,
-    "sheetSrc": null,
-    "stage": "LEVEL",
-    "test": 0,
-    "paperTest": 0,
-    "markResults": [],
-    "arbitrated": false,
-    "rejected": false,
-    "manual": false,
-    "sample": false,
-    "tagged": true,
-    "missing": false
-  },
-  {
-    "id": 871,
-    "sn": "111563006",
-    "examNumber": "1901130046",
-    "level": "B",
-    "score": null,
-    "redoLevel": null,
-    "updatedOn": 1574753749000,
-    "url": "http://127.0.0.1:9000/api/file/image/download/31/1/731/1?random=b305c27c-76d0-4477-a1ef-c9b8554a4671",
-    "thumbUrl": "http://127.0.0.1:9000/api/file/image/download/31/1/731/2?random=dd1a4e72-9314-4429-a5e8-dacfa5275397",
-    "markByLeader": false,
-    "markedLogic": false,
-    "areaCode": "1",
-    "inspectScore": null,
-    "inspectLevel": null,
-    "inspector": null,
-    "sheetSrc": null,
-    "stage": "LEVEL",
-    "test": 0,
-    "paperTest": 0,
-    "markResults": [],
-    "arbitrated": false,
-    "rejected": false,
-    "manual": false,
-    "sample": false,
-    "tagged": true,
-    "missing": false
-  },
-  {
-    "id": 867,
-    "sn": "111572727",
-    "examNumber": "1901040084",
-    "level": "B",
-    "score": null,
-    "redoLevel": null,
-    "updatedOn": 1574665550000,
-    "url": "http://127.0.0.1:9000/api/file/image/download/31/1/736/1?random=d90a96e7-1d1a-426b-8428-b5c980589fe1",
-    "thumbUrl": "http://127.0.0.1:9000/api/file/image/download/31/1/736/2?random=dc754e3b-7a92-4a59-a34c-e67a09253e7b",
-    "markByLeader": false,
-    "markedLogic": false,
-    "areaCode": "1",
-    "inspectScore": null,
-    "inspectLevel": null,
-    "inspector": null,
-    "sheetSrc": null,
-    "stage": "LEVEL",
-    "test": 0,
-    "paperTest": 0,
-    "markResults": [],
-    "arbitrated": false,
-    "rejected": false,
-    "manual": false,
-    "sample": false,
-    "tagged": false,
-    "missing": false
-  },
-  {
-    "id": 868,
-    "sn": "111086411",
-    "examNumber": "1901130043",
-    "level": "A",
-    "score": null,
-    "redoLevel": null,
-    "updatedOn": 1577325078000,
-    "url": "http://127.0.0.1:9000/api/file/image/download/31/1/735/1?random=e6ea4c48-e2d0-470e-a0db-5e7642cad923",
-    "thumbUrl": "http://127.0.0.1:9000/api/file/image/download/31/1/735/2?random=4ddc167d-8bb3-443d-8d5d-6a725fab9950",
-    "markByLeader": false,
-    "markedLogic": false,
-    "areaCode": "1",
-    "inspectScore": null,
-    "inspectLevel": null,
-    "inspector": null,
-    "sheetSrc": null,
-    "stage": "LEVEL",
-    "test": 0,
-    "paperTest": 0,
-    "markResults": [],
-    "arbitrated": false,
-    "rejected": false,
-    "manual": false,
-    "sample": false,
-    "tagged": true,
-    "missing": false
-  },
-  {
-    "id": 874,
-    "sn": "111191877",
-    "examNumber": "1901130054",
-    "level": "A",
-    "score": null,
-    "redoLevel": null,
-    "updatedOn": 1574836896000,
-    "url": "http://127.0.0.1:9000/api/file/image/download/31/1/737/1?random=68a6e70f-8983-4445-82dd-f71499ad7441",
-    "thumbUrl": "http://127.0.0.1:9000/api/file/image/download/31/1/737/2?random=33db53ee-04b2-4d46-89bc-7bf276d839e2",
-    "markByLeader": false,
-    "markedLogic": false,
-    "areaCode": "1",
-    "inspectScore": null,
-    "inspectLevel": null,
-    "inspector": null,
-    "sheetSrc": null,
-    "stage": "LEVEL",
-    "test": 0,
-    "paperTest": 0,
-    "markResults": [],
-    "arbitrated": false,
-    "rejected": false,
-    "manual": false,
-    "sample": false,
-    "tagged": false,
-    "missing": false
-  },
-  {
-    "id": 873,
-    "sn": "111965173",
-    "examNumber": "1901130053",
-    "level": "A",
-    "score": null,
-    "redoLevel": null,
-    "updatedOn": 1577325083000,
-    "url": "http://127.0.0.1:9000/api/file/image/download/31/1/738/1?random=9f788228-2213-4a46-9461-b222e310950b",
-    "thumbUrl": "http://127.0.0.1:9000/api/file/image/download/31/1/738/2?random=7adb5c94-b42a-4a50-8920-aaa88134b3f3",
-    "markByLeader": false,
-    "markedLogic": false,
-    "areaCode": "1",
-    "inspectScore": null,
-    "inspectLevel": null,
-    "inspector": null,
-    "sheetSrc": null,
-    "stage": "LEVEL",
-    "test": 0,
-    "paperTest": 0,
-    "markResults": [],
-    "arbitrated": false,
-    "rejected": false,
-    "manual": false,
-    "sample": false,
-    "tagged": false,
-    "missing": false
-  },
-  {
-    "id": 872,
-    "sn": "111039763",
-    "examNumber": "1901130047",
-    "level": "B",
-    "score": null,
-    "redoLevel": null,
-    "updatedOn": 1573718404000,
-    "url": "http://127.0.0.1:9000/api/file/image/download/31/1/732/1?random=b1cdc3f5-8cae-4e8e-ba92-e1df640ba001",
-    "thumbUrl": "http://127.0.0.1:9000/api/file/image/download/31/1/732/2?random=32b1cb60-a0d5-4253-9fb6-03863a88e2b2",
-    "markByLeader": true,
-    "markedLogic": false,
-    "areaCode": "1",
-    "inspectScore": null,
-    "inspectLevel": null,
-    "inspector": null,
-    "sheetSrc": null,
-    "stage": "LEVEL",
-    "test": 0,
-    "paperTest": 0,
-    "markResults": [],
-    "arbitrated": false,
-    "rejected": false,
-    "manual": false,
-    "sample": true,
-    "tagged": false,
-    "missing": false
-  }
-]

src/modules-part/example/views/DataManage.vue

@@ -55,7 +55,7 @@
       <Table
         ref="TableList"
         :columns="columns"
-        :data="grades"
+        :data="levels"
         disabled-hover
         border
       ></Table>
@@ -102,7 +102,7 @@ export default {
       current: 1,
       size: this.GLOBAL.pageSize,
       total: 0,
-      grades: [],
+      levels: [],
       curCourse: {},
       ABLE_TYPE,
       columns: [
@@ -170,7 +170,7 @@ export default {
         size: this.size
       };
       const data = await courseList(datas);
-      this.grades = data.list.map(item => {
+      this.levels = data.list.map(item => {
         return {
           id: item.id,
           name: item.name,

src/modules/grading/GradingDetail.vue

@@ -1,56 +1,73 @@
 <template>
   <div class="grading-detail">
-    <grade-step @on-change="stepChange"></grade-step>
+    <grade-step
+      :steps="steps"
+      @on-change="stepChange"
+      ref="GradeStep"
+    ></grade-step>
     <div class="detail-body" v-if="curStep.name !== 'analysis'">
-      <div class="detail-part detail-carousel">
-        <grade-standard-paper ref="GradeStandardPaper"></grade-standard-paper>
-        <paper-carousel
-          :papers="papers"
-          v-if="curUserRoleType !== 'ADMIN'"
-        ></paper-carousel>
+      <div class="detail-filter">
+        <Form ref="FilterForm" label-position="left" inline>
+          <FormItem>
+            <Select v-model="filter.areaCode" placeholder="请选择考区">
+              <Option value=""></Option>
+            </Select>
+          </FormItem>
+          <FormItem>
+            <Button type="primary" icon="ios-search" @click="toPage(1)"
+              >查询</Button
+            >
+          </FormItem>
+        </Form>
       </div>
-      <div class="detail-part detail-paper">
-        <div class="detail-filter">
-          <Form ref="FilterForm" label-position="left" inline>
-            <FormItem>
-              <Select v-model="filter.areaCode" placeholder="请选择考区">
-                <Option value=""></Option>
-              </Select>
-            </FormItem>
-            <FormItem>
-              <Button type="primary" icon="ios-search" @click="toPage(1)"
-                >查询</Button
-              >
-            </FormItem>
-          </Form>
+      <!-- detail-papers -->
+      <div :class="detailPapersClasses">
+        <div class="detail-papers-carousel">
+          <grade-standard-paper ref="GradeStandardPaper"></grade-standard-paper>
+          <paper-carousel
+            :papers="papers"
+            v-if="!IS_ADMIN"
+            ref="PaperCarousel"
+          ></paper-carousel>
         </div>
-        <div class="detail-paper-list image-view-list image-view-list-3">
-          <div class="image-view" v-for="(image, index) in papers" :key="index">
-            <h5 class="image-view-title">{{ image.title }}</h5>
-            <div class="image-view-contain" @click="toReview(index)">
-              <img :src="image.thumbUrl" :alt="image.title" />
+        <div class="detail-papers-list">
+          <div :class="imageViewClasses">
+            <div
+              class="image-view"
+              v-for="(image, index) in papers"
+              :key="index"
+            >
+              <h5 class="image-view-title">{{ image.title }}</h5>
+              <div class="image-view-contain" @click="toReview(index)">
+                <img :src="image.thumbUrl" :alt="image.title" />
+              </div>
             </div>
           </div>
-        </div>
-        <div class="part-page">
-          <Page
-            :current="current"
-            :total="total"
-            :page-size="size"
-            show-total
-            show-elevator
-            :show-sizer="curUserRoleType === 'MARKER'"
-            :page-size-opts="[4, 6, 8]"
-            @on-page-size-change="pageSizeChange"
-            @on-change="toPage"
-          ></Page>
+          <div class="part-page">
+            <Page
+              :current="current"
+              :total="total"
+              :page-size="size"
+              show-total
+              show-elevator
+              :show-sizer="IS_MARKER"
+              :page-size-opts="[4, 6, 8]"
+              @on-page-size-change="pageSizeChange"
+              @on-change="toPage"
+            ></Page>
+          </div>
         </div>
       </div>
-      <div class="detail-part detail-action">
+      <!-- detail-aciton -->
+      <div class="detail-action">
         <grade-action
           :paper="curPage"
+          :levels="levels"
+          :step="curStep"
+          :user-role="curUserRoleType"
           @on-confirm="gradeCurPaper"
           ref="GradeAction"
+          v-if="curPage.id && curStep.name"
         ></grade-action>
       </div>
     </div>
@@ -65,8 +82,8 @@
       :init-index="curPaperIndex"
       @on-prev="paperPrev"
       @on-next="paperNext"
-      @page-prev="prevPage"
-      @page-next="nextPage"
+      @on-page-prev="prevPage"
+      @on-page-next="nextPage"
       header-hide
       ref="ImagePreview"
       v-if="papers.length"
@@ -75,6 +92,7 @@
 </template>
 
 <script>
+import { papers, levels } from "@/constants/apiTempData";
 import { paperPageList } from "@/api";
 import ImagePreview from "@/components/common/ImagePreview";
 import GradeStep from "./components/GradeStep";
@@ -84,9 +102,9 @@ import GradeAction from "./components/GradeAction";
 import GradeAnalysis from "./components/GradeAnalysis";
 // 三种情况：
 // 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
-// 管理员：查询，试卷信息，定档信息，评卷记录
-// 科组长：查询，试卷信息，定档信息，选择档位，评卷记录
-// 评卷员：试卷信息，选择档位
+// 管理员：标准卷，试卷列表，操作盘
+// 科组长：标准卷，操作记录，试卷列表，操作盘（定档，标准卷，打回）
+// 评卷员：标准卷，操作记录，试卷列表，操作盘（只分档）
 
 export default {
   name: "grading-detail",
@@ -105,41 +123,88 @@ export default {
         subjectId: this.$route.params.subjectId,
         areaCode: ""
       },
-      curUserRoleType: "",
+      curUserRoleType: "MARKER",
       current: 1,
       size: 6,
       total: 0,
       totalPage: 1,
       curStep: {},
       curStandardGradeId: "",
-      grades: [],
+      steps: [],
+      levels: levels,
       papers: [],
       curPage: {},
       curPaperIndex: 0
     };
   },
+  computed: {
+    detailPapersClasses() {
+      return ["detail-papers", `detail-papers-col-${1 + this.size / 2}`];
+    },
+    imageViewClasses() {
+      return ["image-view-list", `image-view-list-${this.size / 2}`];
+    },
+    IS_ADMIN() {
+      return this.curUserRoleType === "ADMIN";
+    },
+    IS_MARKER() {
+      return this.curUserRoleType === "MARKER";
+    },
+    IS_MARK_LEADER() {
+      return this.curUserRoleType === "MARK_LEADER";
+    }
+  },
   mounted() {
-    this.curUserRoleType = this.$ls.get("user", { role: "" }).role;
+    // this.curUserRoleType = this.$ls.get("user", { role: "" }).role;
     this.initData();
   },
   methods: {
     initData() {
-      this.papers = "#"
-        .repeat(this.size)
-        .split("")
-        .map((item, index) => {
-          return {
-            id: index,
-            subjectName: "素描",
-            title: "2020105133",
-            score: "95",
-            grade: "A",
-            url:
-              "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
-            thumbUrl:
-              "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
-          };
-        });
+      this.papers = papers.slice(0, this.size).map((item, index) => {
+        return {
+          ...item,
+          title: item.examNumber,
+          score: "95",
+          grade: "A"
+        };
+      });
+      const levelStep = levels.map(item => {
+        return {
+          ...item,
+          type: "done",
+          typeName: "已评"
+        };
+      });
+      // TODO:后台获取的数据是已经拼装好的，试卷信息中也会携带试卷各种状态信息
+      // 所以操作盘只需要根据试卷信息来动态展示即可
+      this.steps = [
+        ...levelStep,
+        {
+          name: "待评",
+          type: "undo",
+          typeName: "待评",
+          gcount: 100,
+          gpercent: 10.1,
+          pt: 12,
+          count: 100,
+          percent: 8.1,
+          kdpt: 10
+        },
+        {
+          name: "打回",
+          type: "refuse",
+          typeName: "打回",
+          gcount: 100,
+          gpercent: 10.1,
+          pt: 12,
+          count: 100,
+          percent: 8.1,
+          kdpt: 10
+        }
+      ];
+      this.$refs.GradeStep.selectStep(this.steps[0]);
+      this.curPage = { ...this.papers[0] };
+      this.curPaperIndex = 0;
     },
     async getList() {
       const datas = {
@@ -168,7 +233,13 @@ export default {
     },
     pageSizeChange(size) {
       this.size = size;
-      this.toPage(1);
+      // this.toPage(1);
+      this.initData();
+      this.$nextTick(() => {
+        this.$refs.GradeStandardPaper.$refs.Carousel.handleResize();
+        this.$refs.PaperCarousel &&
+          this.$refs.PaperCarousel.$refs.Carousel.handleResize();
+      });
     },
     stepChange(step) {
       this.curStep = step;

src/modules/grading/components/GradeAction.vue

@@ -1,48 +1,62 @@
 <template>
   <div class="grade-action">
-    <div class="action-search">
-      <Select
-        v-model="filter.codeType"
-        placeholder="请选择密号类型"
-        style="margin-bottom: 10px;"
-      >
-        <Option
-          v-for="(val, key) in CODE_TYPE"
-          :key="key"
-          :value="key"
-          :label="val"
-        ></Option>
-      </Select>
+    <!-- 查询 -->
+    <div class="action-search" v-if="rights.search">
       <Input v-model.trim="filter.code" placeholder="请输入号码">
-        <Button type="primary" @click="search" slot="append">查询</Button>
+        <Select
+          v-model="filter.codeType"
+          placeholder="类型"
+          slot="prepend"
+          style="width: 100px"
+        >
+          <Option
+            v-for="(val, key) in CODE_TYPE"
+            :key="key"
+            :value="key"
+            :label="val"
+          ></Option>
+        </Select>
+        <Button icon="ios-search" slot="append" @click="search"></Button>
       </Input>
     </div>
-
-    <div class="action-paper-info">
-      <p>{{ curPaper.examNumber }}</p>
-      <p>No.{{ curPaper.sn }}</p>
+    <!-- 头部信息 ------ -->
+    <!-- 试卷状态 -->
+    <!-- 状态：已评，待评，打回，仲裁 -->
+    <div class="action-paper-state" v-if="rights.paperState">
+      <p class="paper-state-cont">{{ step.typeName }}</p>
     </div>
-
-    <div class="action-grade-info">
-      <h3 class="grade-info-name">{{ curGrade.name }}</h3>
+    <!-- 试卷信息 -->
+    <div class="action-paper-info" v-if="rights.paperInfo">
+      <p v-if="IS_ADMIN">{{ curPaper.examNumber }}</p>
+      <p>NO.{{ curPaper.sn }}</p>
+    </div>
+    <!-- 档位信息 -->
+    <!-- 已评（已评档位），打回（建议档位） -->
+    <div class="action-grade-info" v-if="rights.gradeInfo">
+      <h3 class="grade-info-name">{{ curLevel.name }}</h3>
       <p class="grade-info-range">
-        <span>{{ curGrade.range[0] }}</span>
+        <span>{{ curLevel.range[0] }}</span>
         <span>~</span>
-        <span>{{ curGrade.range[1] }}</span>
+        <span>{{ curLevel.range[1] }}</span>
       </p>
     </div>
-    <div class="action-grade-list">
+    <!-- 选择档位 -->
+    <div class="action-grade-list" v-if="rights.gradeList">
       <div
         class="action-grade-list-item"
-        v-for="(grade, index) in grades"
+        v-for="(level, index) in levels"
         :key="index"
       >
-        <p>{{ grade.name }}</p>
-        <p>{{ grade.range[0] }}~{{ grade.range[1] }}</p>
+        <p>{{ level.name }}</p>
+        <p>{{ level.range[0] }}~{{ level.range[1] }}</p>
       </div>
     </div>
+    <div class="action-grade-pass" v-if="rights.gradeList">
+      <Button type="primary" @click="toPass">跳过</Button>
+    </div>
 
-    <div class="action-grade-history">
+    <!-- 评卷记录 -->
+    <div class="action-grade-history" v-if="rights.gradeHis">
       <h3>评卷记录</h3>
       <div class="action-grade-list grade-history-list">
         <div
@@ -60,6 +74,19 @@
 
 <script>
 import { CODE_TYPE } from "@/constants/enumerate";
+// 三种情况：
+// 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
+// 管理员：查询，头部信息，评卷记录
+// 科组长：查询，头部信息，选择档位，评卷记录
+// 评卷员：头部信息，选择档位
+const initRights = {
+  search: false,
+  paperState: false,
+  paperInfo: false,
+  gradeInfo: false,
+  gradeList: false,
+  gradeHis: false
+};
 
 export default {
   name: "grade-action",
@@ -69,49 +96,128 @@ export default {
       default() {
         return {};
       }
+    },
+    levels: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    userRole: {
+      type: String,
+      default: "MARKER"
+    },
+    step: {
+      type: Object,
+      default() {
+        return {};
+      }
     }
   },
   data() {
     return {
+      rights: {
+        ...initRights
+      },
+      roleRight: {
+        ADMIN: {
+          done: ["search", "gradeHis", "paperState", "paperInfo", "gradeInfo"],
+          arbitrate: ["search", "gradeHis", "paperState", "paperInfo"]
+        },
+        MARK_LEADER: {
+          done: [
+            "search",
+            "gradeList",
+            "gradeHis",
+            "paperState",
+            "paperInfo",
+            "gradeInfo"
+          ],
+          arbitrate: [
+            "search",
+            "gradeList",
+            "gradeHis",
+            "paperState",
+            "paperInfo"
+          ]
+        },
+        MARKER: {
+          done: ["gradeList", "paperState", "paperInfo", "gradeInfo"],
+          undo: ["gradeList", "paperState", "paperInfo"],
+          refuse: ["gradeList", "paperState", "paperInfo", "gradeInfo"]
+        }
+      },
       filter: {
-        codeType: "",
+        codeType: "examNumber",
         code: ""
       },
       CODE_TYPE,
       curPaper: {
         examNumber: "2020105133",
-        sn: "2020105133"
+        sn: "2020105133",
+        level: ""
       },
       gradingHistory: [],
-      grades: [],
-      curGrade: {
+      curLevel: {
         name: "A",
         range: [95, 100]
       }
     };
   },
+  computed: {
+    IS_ADMIN() {
+      return this.userRole === "ADMIN";
+    },
+    IS_MARKER() {
+      return this.userRole === "MARKER";
+    },
+    IS_MARK_LEADER() {
+      return this.userRole === "MARK_LEADER";
+    }
+  },
+  watch: {
+    step(val) {
+      this.rebuildRight();
+    },
+    paper(val) {
+      this.rebuildRight();
+    }
+  },
   mounted() {
     this.initData();
+    this.rebuildRight();
   },
   methods: {
     initData() {
-      this.grades = "ABCDEFGHIJK".split("").map((item, index) => {
-        return {
-          id: index,
-          name: item,
-          range: [10, 50]
-        };
-      });
       this.gradingHistory = "ABCDEFGHIJK".split("").map((item, index) => {
         return {
           id: index,
-          name: "张珊",
+          name: `评卷员${index}`,
           value: item
         };
       });
     },
+    rebuildRight() {
+      this.rights = { ...initRights };
+      const rights = this.roleRight[this.userRole][this.step.type] || [];
+      rights.map(key => {
+        this.rights[key] = true;
+      });
+      if (this.paper.level) {
+        const paperLevel = this.levels.find(
+          level => level.name === this.paper.level
+        );
+        this.curLevel = {
+          name: paperLevel.name,
+          range: paperLevel.range
+        };
+      }
+    },
+    toPass() {
+      this.$emit("on-pass");
+    },
     search() {
-      this.$emit("code-search", this.filter);
+      this.$emit("on-code-search", this.filter);
     }
   }
 };

src/modules/grading/components/GradeStandardPaper.vue

@@ -4,15 +4,20 @@
       <h3>标准卷</h3>
       <Select v-model="curStandardGradeId">
         <Option
-          v-for="(grade, gindex) in grades"
+          v-for="(level, gindex) in levels"
           :key="gindex"
-          :value="grade.id"
-          :label="grade.name"
+          :value="level.id"
+          :label="level.name"
         ></Option>
       </Select>
     </div>
     <div class="carousel-body">
-      <Carousel v-model="curPaperIndex" arrow="always" dots="none">
+      <Carousel
+        v-model="curPaperIndex"
+        arrow="always"
+        dots="none"
+        ref="Carousel"
+      >
         <CarouselItem v-for="(paper, pindex) in papers" :key="pindex">
           <div class="image-view-contain">
             <img :src="paper.thumbUrl" :alt="paper.title" />
@@ -24,12 +29,14 @@
 </template>
 
 <script>
+import { papers } from "@/constants/apiTempData";
+
 export default {
   name: "grade-standard-paper",
   data() {
     return {
       curStandardGradeId: "",
-      grades: [],
+      levels: [],
       papers: [],
       curPaperIndex: 0
     };
@@ -39,21 +46,16 @@ export default {
   },
   methods: {
     initData() {
-      this.papers = "####".split("").map((item, index) => {
+      this.papers = papers.slice(4, 8).map((item, index) => {
         return {
-          id: index,
-          subjectName: "素描",
-          title: "2020105133",
+          ...item,
+          title: item.examNumber,
           score: "95",
-          grade: "A",
-          url:
-            "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
-          thumbUrl:
-            "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
+          grade: "A"
         };
       });
 
-      this.grades = "ABCDEFGHIJK".split("").map((item, index) => {
+      this.levels = "ABCDEFGHIJK".split("").map((item, index) => {
         return {
           id: index,
           name: item

src/modules/grading/components/GradeStep.vue

@@ -41,10 +41,7 @@ export default {
       type: Boolean,
       default: true
     },
-    curStepKey: {
-      type: String
-    },
-    steps2: {
+    steps: {
       type: Array,
       default() {
         return [];
@@ -53,29 +50,9 @@ export default {
   },
   data() {
     return {
-      steps: [],
       curStep: { name: "" }
     };
   },
-  watch: {
-    curStepKey(val) {
-      const curStep = this.steps.filter(step => step.name === val);
-      this.curStep = curStep || { name: "" };
-    }
-  },
-  mounted() {
-    this.steps = "ABCDEFGHIJK".split("").map(item => {
-      return {
-        name: item,
-        gcount: 100,
-        gpercent: 10.1,
-        pt: 12,
-        count: 100,
-        percent: 8.1,
-        kdpt: 10
-      };
-    });
-  },
   methods: {
     selectStep(step) {
       this.curStep = { ...step };

src/modules/grading/components/PaperCarousel.vue

@@ -6,7 +6,12 @@
       </slot>
     </div>
     <div class="carousel-body">
-      <Carousel v-model="curPaperIndex" arrow="always" dots="none">
+      <Carousel
+        v-model="curPaperIndex"
+        arrow="always"
+        dots="none"
+        ref="Carousel"
+      >
         <CarouselItem v-for="(paper, pindex) in papers" :key="pindex">
           <div class="image-view-contain">
             <img :src="paper.thumbUrl" :alt="paper.title" />

src/modules/inspection/InspectionGrading.vue

@@ -90,8 +90,8 @@
       :init-index="curPaperIndex"
       @on-prev="paperPrev"
       @on-next="paperNext"
-      @page-prev="prevPage"
-      @page-next="nextPage"
+      @on-page-prev="prevPage"
+      @on-page-next="nextPage"
       header-hide
       ref="ImagePreview"
       v-if="papers.length"
@@ -100,7 +100,8 @@
 </template>
 
 <script>
-import paperList from "@/constants/papers.json";
+import { papers } from "@/constants/apiTempData";
+
 import {
   inspectionCheckGradePageList,
   inspectionConfirmCheckGrade,
@@ -138,7 +139,7 @@ export default {
   },
   methods: {
     initData() {
-      this.papers = paperList.map((item, index) => {
+      this.papers = papers.map((item, index) => {
         return {
           ...item,
           orgGrade: "A",

src/modules/main/StudentScore.vue

@@ -71,6 +71,7 @@
               <image-action-list
                 :data="curStudent.scores"
                 :column-number="3"
+                loop
                 ref="ImageActionList"
               ></image-action-list>
             </td>
@@ -171,9 +172,9 @@ export default {
               score: "85",
               grade: "B",
               url:
-                "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
+                "http://127.0.0.1:9000/api/file/image/download/31/1/734/1?random=676176fc-24cd-407a-a7bc-fabc49bd2dbc",
               thumbUrl:
-                "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
+                "http://127.0.0.1:9000/api/file/image/download/31/1/734/2?random=d8d100c5-ac64-4b5a-a2fe-bce2dd8aed0f"
             },
             {
               id: "1",
@@ -182,9 +183,9 @@ export default {
               score: "90",
               grade: "A",
               url:
-                "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
+                "http://127.0.0.1:9000/api/file/image/download/31/1/733/1?random=e2966291-ffba-4b19-985d-0cad9ae1b75b",
               thumbUrl:
-                "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
+                "http://127.0.0.1:9000/api/file/image/download/31/1/733/2?random=5d16ebc7-0e52-493c-93fa-4850db5e2632"
             }
           ]
         },

src/modules/main/components/ImageActionList.vue

@@ -36,8 +36,10 @@
 
     <!-- image-preview -->
     <image-preview
+      :class="imagePreviewCls"
       :image-list="data"
       :init-index="curImageIndex"
+      :loop="loop"
       header-hide
       ref="ImagePreview"
       v-if="data.length"
@@ -68,6 +70,14 @@ export default {
     columnNumber: {
       type: Number,
       default: 5
+    },
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    imagePreviewCls: {
+      type: String,
+      default: ""
     }
   },
   data() {

src/modules/mark/MarkDetail.vue

@@ -2,47 +2,58 @@
   <div class="mark-detail grading-detail">
     <grade-step :show-analysis="false" @on-change="stepChange"></grade-step>
     <div :class="bodyClasses">
-      <div class="detail-part detail-carousel">
-        <paper-carousel :papers="papers" ref="PaperCarousel"></paper-carousel>
+      <div class="detail-filter">
+        <Form ref="FilterForm" label-position="left" inline>
+          <FormItem>
+            <Select v-model="filter.areaCode" placeholder="请选择考区">
+              <Option value=""></Option>
+            </Select>
+          </FormItem>
+          <FormItem>
+            <Button type="primary" icon="ios-search" @click="toPage(1)"
+              >查询</Button
+            >
+          </FormItem>
+        </Form>
       </div>
-      <div class="detail-part detail-paper">
-        <div class="detail-filter">
-          <Form ref="FilterForm" label-position="left" inline>
-            <FormItem>
-              <Select v-model="filter.areaCode" placeholder="请选择考区">
-                <Option value=""></Option>
-              </Select>
-            </FormItem>
-            <FormItem>
-              <Button type="primary" icon="ios-search" @click="toPage(1)"
-                >查询</Button
-              >
-            </FormItem>
-          </Form>
+      <!-- detail-papers -->
+      <div :class="detailPapersClasses">
+        <div
+          class="detail-papers-carousel"
+          v-if="this.curUserRoleType !== 'ADMIN'"
+        >
+          <paper-carousel :papers="papers" ref="PaperCarousel"></paper-carousel>
         </div>
-        <div :class="imageViewClasses">
-          <div class="image-view" v-for="(image, index) in papers" :key="index">
-            <h5 class="image-view-title">{{ image.title }}</h5>
-            <div class="image-view-contain" @click="toReview(index)">
-              <img :src="image.thumbUrl" :alt="image.title" />
+        <div class="detail-papers-list">
+          <div :class="imageViewClasses">
+            <div
+              class="image-view"
+              v-for="(image, index) in papers"
+              :key="index"
+            >
+              <h5 class="image-view-title">{{ image.title }}</h5>
+              <div class="image-view-contain" @click="toReview(index)">
+                <img :src="image.thumbUrl" :alt="image.title" />
+              </div>
             </div>
           </div>
-        </div>
-        <div class="part-page">
-          <Page
-            :current="current"
-            :total="total"
-            :page-size="size"
-            show-total
-            show-elevator
-            :show-sizer="curUserRoleType === 'MARKER'"
-            :page-size-opts="[4, 6, 8]"
-            @on-page-size-change="pageSizeChange"
-            @on-change="toPage"
-          ></Page>
+          <div class="part-page">
+            <Page
+              :current="current"
+              :total="total"
+              :page-size="size"
+              show-total
+              show-elevator
+              :show-sizer="curUserRoleType === 'MARKER'"
+              :page-size-opts="[4, 6, 8]"
+              @on-page-size-change="pageSizeChange"
+              @on-change="toPage"
+            ></Page>
+          </div>
         </div>
       </div>
-      <div class="detail-part detail-action">
+      <!-- detail-aciton -->
+      <div class="detail-action">
         <mark-action
           :paper="curPage"
           @on-confirm="gradeCurPaper"
@@ -58,8 +69,8 @@
       :init-index="curPaperIndex"
       @on-prev="paperPrev"
       @on-next="paperNext"
-      @page-prev="prevPage"
-      @page-next="nextPage"
+      @on-page-prev="prevPage"
+      @on-page-next="nextPage"
       header-hide
       ref="ImagePreview"
       v-if="papers.length"
@@ -75,6 +86,9 @@ import PaperCarousel from "../grading/components/PaperCarousel";
 import MarkAction from "./components/MarkAction";
 // 三种情况：
 // 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
+// 管理员：试卷列表，操作盘
+// 科组长：操作记录，试卷列表，操作盘（改档）
+// 评卷员：操作记录，试卷列表，操作盘（打分）
 
 export default {
   name: "mark-detail",
@@ -91,14 +105,14 @@ export default {
         subjectId: this.$route.params.subjectId,
         areaCode: ""
       },
-      curUserRoleType: "MARKER",
+      curUserRoleType: "ADMIN",
       current: 1,
-      size: 6,
+      size: 8,
       total: 0,
       totalPage: 1,
       curStep: {},
       curStandardGradeId: "",
-      grades: [],
+      levels: [],
       papers: [],
       curPage: {},
       curPaperIndex: 0
@@ -111,6 +125,15 @@ export default {
         { "detail-body-2": this.curUserRoleType === "ADMIN" }
       ];
     },
+    detailPapersClasses() {
+      return [
+        "detail-papers",
+        {
+          [`detail-papers-col-${1 + this.size / 2}`]:
+            this.curUserRoleType !== "ADMIN"
+        }
+      ];
+    },
     imageViewClasses() {
       return [
         "detail-paper-list",

src/modules/mark/components/MarkAction.vue

@@ -1,20 +1,21 @@
 <template>
   <div class="mark-action grade-action">
     <div class="action-search">
-      <Select
-        v-model="filter.codeType"
-        placeholder="请选择密号类型"
-        style="margin-bottom: 10px;"
-      >
-        <Option
-          v-for="(val, key) in CODE_TYPE"
-          :key="key"
-          :value="key"
-          :label="val"
-        ></Option>
-      </Select>
       <Input v-model.trim="filter.code" placeholder="请输入号码">
-        <Button type="primary" @click="search" slot="append">查询</Button>
+        <Select
+          v-model="filter.codeType"
+          placeholder="类型"
+          slot="prepend"
+          style="width: 100px"
+        >
+          <Option
+            v-for="(val, key) in CODE_TYPE"
+            :key="key"
+            :value="key"
+            :label="val"
+          ></Option>
+        </Select>
+        <Button icon="ios-search" slot="append" @click="search"></Button>
       </Input>
     </div>
 
@@ -26,20 +27,20 @@
     <p class="mark-info">{{ curMark }}</p>
 
     <div class="action-grade-info">
-      <h3 class="grade-info-name">{{ curGrade.name }}</h3>
+      <h3 class="grade-info-name">{{ curLevel.name }}</h3>
       <p class="grade-info-range">
-        <span>{{ curGrade.range[0] }}</span>
+        <span>{{ curLevel.range[0] }}</span>
         <span>~</span>
-        <span>{{ curGrade.range[1] }}</span>
+        <span>{{ curLevel.range[1] }}</span>
       </p>
     </div>
     <div class="action-grade-list action-mark-list">
       <div
         class="action-grade-list-item"
-        v-for="(grade, index) in grades"
+        v-for="(level, index) in levels"
         :key="index"
       >
-        <p>{{ grade }}</p>
+        <p>{{ level }}</p>
       </div>
     </div>
 
@@ -75,7 +76,7 @@ export default {
   data() {
     return {
       filter: {
-        codeType: "",
+        codeType: "examNumber",
         code: ""
       },
       CODE_TYPE,
@@ -84,8 +85,8 @@ export default {
         sn: "2020105133"
       },
       gradingHistory: [],
-      grades: [],
-      curGrade: {
+      levels: [],
+      curLevel: {
         name: "A",
         range: [5, 20]
       },
@@ -97,12 +98,12 @@ export default {
   },
   methods: {
     initData() {
-      let grades = [];
-      let [start, end] = this.curGrade.range;
+      let levels = [];
+      let [start, end] = this.curLevel.range;
       for (let i = start; i <= end; i++) {
-        grades.push(i);
+        levels.push(i);
       }
-      this.grades = grades;
+      this.levels = levels;
       this.gradingHistory = "ABCDEFGHIJK".split("").map((item, index) => {
         return {
           id: index,