msyj-admin-org/src/modules/grading/GradingDetail.vue

<template>
  <div class="grading-detail">
    <grade-step @on-change="stepChange"></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>
      <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>
        </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>
          </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>
      </div>
      <div class="detail-part detail-action">
        <grade-action
          :paper="curPage"
          @on-confirm="gradeCurPaper"
          ref="GradeAction"
        ></grade-action>
      </div>
    </div>
    <div class="detail-body" v-else>
      <grade-analysis ref="GradeAnalysis"></grade-analysis>
    </div>

    <!-- image-preview -->
    <image-preview
      class="grading-detail-image-preview"
      :image-list="papers"
      :init-index="curPaperIndex"
      @on-prev="paperPrev"
      @on-next="paperNext"
      @page-prev="prevPage"
      @page-next="nextPage"
      header-hide
      ref="ImagePreview"
      v-if="papers.length"
    ></image-preview>
  </div>
</template>

<script>
import { paperPageList } from "@/api";
import ImagePreview from "@/components/common/ImagePreview";
import GradeStep from "./components/GradeStep";
import GradeStandardPaper from "./components/GradeStandardPaper";
import PaperCarousel from "./components/PaperCarousel";
import GradeAction from "./components/GradeAction";
import GradeAnalysis from "./components/GradeAnalysis";
// 三种情况：
// 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)

export default {
  name: "grading-detail",
  components: {
    ImagePreview,
    PaperCarousel,
    GradeStep,
    GradeStandardPaper,
    GradeAction,
    GradeAnalysis
  },
  data() {
    return {
      filter: {
        workId: this.$route.params.workId,
        subjectId: this.$route.params.subjectId,
        areaCode: ""
      },
      curUserRoleType: "",
      current: 1,
      size: 6,
      total: 0,
      totalPage: 1,
      curStep: {},
      curStandardGradeId: "",
      grades: [],
      papers: [],
      curPage: {},
      curPaperIndex: 0
    };
  },
  mounted() {
    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"
          };
        });
    },
    async getList() {
      const datas = {
        ...this.filter,
        page: this.current - 1,
        size: this.size
      };
      const data = await paperPageList(datas);
      this.papers = data.data.map(paper => {
        return {
          id: paper.id,
          title: paper.examNumber,
          url: paper.imgSrc,
          thumbUrl: paper.thumbSrc,
          missing: paper.missing,
          stage: paper.stage,
          style: {},
          deg: 0
        };
      });
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    pageSizeChange(size) {
      this.size = size;
      this.toPage(1);
    },
    stepChange(step) {
      this.curStep = step;
    },
    toReview(index) {
      this.curPage = { ...this.papers[index] };
      this.curPaperIndex = index;
      this.$refs.ImagePreview.open();
    },
    paperPrev(index) {
      this.curPage = { ...this.papers[index] };
      this.curPaperIndex = index;
    },
    paperNext(index) {
      this.curPage = { ...this.papers[index] };
      this.curPaperIndex = index;
    },
    prevPage() {
      if (this.current === 1) {
        this.$Message.warning("当前已经是第一条数据了");
        return;
      }
      this.current--;
      this.getList();
    },
    nextPage() {
      if (this.current === this.totalPage) {
        this.$Message.warning("当前已经是最后一条数据了");
        return;
      }
      this.current++;
      this.getList();
    },
    gradeCurPaper(grade) {
      // TODO:to grade

      if (this.curPaperIndex === this.size - 1) {
        this.nextPage();
        return;
      } else {
        this.paperNext(this.curPaperIndex + 1);
      }
    }
  }
};
</script>