msyj-admin-local/src/modules/mark/MarkDetail.vue

<template>
  <div :class="compClasses">
    <div class="part-box-head">
      <Form ref="FilterForm" label-position="left" inline>
        <FormItem>
          <Select
            v-model="filter.questionId"
            @on-change="areaChange"
            placeholder="请选择考区"
          >
            <Option
              v-for="area in areas"
              :key="area.id"
              :value="area.id"
              :label="area.areaName"
            ></Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button
            size="small"
            class="btn-form-search"
            type="primary"
            @click="toPage(1)"
            >查询</Button
          >
        </FormItem>
      </Form>
    </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 }
        ]"
      >
        <mark-action
          :cur-paper-or-task="curPaper"
          :levels="levels"
          :user-role="curUserRoleType"
          @on-leader-level="leaderSelectLevel"
          @on-code-search="serachPaperByCode"
          @on-grade-change-search="searchGradeChangeList"
          v-if="curPaper.id"
          ref="GradeAction"
        ></mark-action>
      </div>
      <!-- detail-papers -->
      <div :class="detailPapersClasses">
        <div class="detail-papers-carousel" v-if="!IS_ADMIN">
          <grade-history-paper
            :question-id="filter.questionId"
            stage="SCORE"
            @on-paper-click="toViewCarouselPaper"
            v-if="filter.questionId"
            ref="GradeHistoryPaper"
          ></grade-history-paper>
        </div>
        <div class="detail-papers-list" v-if="papers.length">
          <div :class="imageViewClasses">
            <div
              :class="[
                'image-view',
                { 'image-view-act': curPaperIndex === index }
              ]"
              v-for="(image, index) in papers"
              :key="index"
            >
              <h5 class="image-view-title">{{ image.title }}</h5>
              <div class="image-view-contain">
                <img
                  :src="image.thumbSrc"
                  :alt="image.title"
                  @click="toReview(index)"
                />
              </div>
            </div>
          </div>
          <div class="part-page" v-if="total > size">
            <Page
              :current="current"
              :total="total"
              :page-size="size"
              show-total
              show-elevator
              @on-change="toPage"
            ></Page>
          </div>
        </div>
        <div class="detail-papers-list" v-else>
          <p class="detail-papers-none">暂无数据</p>
        </div>
      </div>
    </div>

    <!-- image-preview -->
    <image-preview
      :class="imagePreviewClasses"
      :image-list="papers"
      :init-index="curPaperIndex"
      @on-paper-change="selectPaper"
      @on-page-prev="prevPage"
      @on-page-next="nextPage"
      @on-close="isFullscreenMarking = false"
      header-hide
      ref="ImagePreview"
      v-if="papers.length"
    ></image-preview>
    <!-- carousel paper review -->
    <image-preview
      :class="imagePreviewClasses"
      :image-list="carouselPapers"
      :init-index="curCarouselPaperIndex"
      @on-paper-change="selectCarouselPaper"
      @on-close="carouseImagePreviewClose"
      loop
      header-hide
      ref="CarouselPapersPreview"
      v-if="carouselPapers.length"
    ></image-preview>
  </div>
</template>

<script>
import {
  paperList,
  changeLevelPaperList,
  levelStatData,
  areaList,
  workLevelList,
  taskSnSearch,
  markStepChangeLevel
} from "@/api";
import ImagePreview from "@/components/common/ImagePreview";
import GradeStep from "../grading/components/GradeStep";
import GradeHistoryPaper from "../grading/components/GradeHistoryPaper";
import MarkAction from "./components/MarkAction";
// 三种情况：
// 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
// 管理员：试卷列表，操作盘
// 科组长：操作记录，试卷列表，操作盘（改档）

// TIP:不考虑评卷员的情况
// 评卷员：操作记录，试卷列表，操作盘（打分）

export default {
  name: "mark-detail",
  components: {
    ImagePreview,
    GradeStep,
    GradeHistoryPaper,
    MarkAction
  },
  data() {
    return {
      filter: {
        questionId: "",
        sort: "score,desc",
        level: "",
        isSample: false
      },
      workId: this.$route.params.workId,
      subjectId: this.$route.params.subjectId,
      subject: "",
      curUserRoleType: "",
      applyChangeLevelStatus: 1, // 改档申请处理状态
      current: 1,
      size: 6,
      total: 0,
      totalPage: 1,
      curStep: null,
      steps: [],
      levels: [],
      areas: [],
      papers: [],
      curPaper: {},
      curPaperIndex: 0,
      // carousel paper review,
      carouselPapers: [],
      curCarouselPaperIndex: 0,
      beforeCarouselCurPaperIndex: 0,
      isFullscreenMarking: false
    };
  },
  computed: {
    compClasses() {
      return [
        "mark-detail",
        "grading-detail",
        { "grading-operation": this.IS_MARK_LEADER }
      ];
    },
    bodyClasses() {
      return [
        "detail-body",
        { "detail-body-2": this.curUserRoleType === "ADMIN" }
      ];
    },
    detailPapersClasses() {
      return [
        "detail-papers",
        {
          [`detail-papers-col-${1 + this.size / 2}`]:
            this.curUserRoleType !== "ADMIN"
        }
      ];
    },
    imageViewClasses() {
      return ["image-view-list", `image-view-list-${this.size / 2}`];
    },
    IS_ADMIN() {
      return this.curUserRoleType === "ADMIN";
    },
    IS_MARK_LEADER() {
      return this.curUserRoleType === "MARK_LEADER";
    },
    imagePreviewClasses() {
      return this.IS_ADMIN
        ? "grading-detail-image-preview"
        : "grading-operation-image-preview";
    }
  },
  mounted() {
    this.subject = this.subjectId.split("-")[1];
    this.curUserRoleType = this.$ls.get("user", { role: "" }).role;
    if (this.curUserRoleType === "ADMIN") this.size = 8;
    this.initData();
  },
  methods: {
    async initData() {
      this.getWorkLevels();

      await this.getAreaList();
      this.filter.questionId = this.areas[0].id;
      this.getStepLevels();
    },
    async getList() {
      let data = [];
      if (this.curStep.type === "done") {
        const datas = {
          ...this.filter,
          level: this.curStep.name,
          page: this.current - 1,
          size: this.size
        };

        data = await paperList(datas);
      } else {
        const datas = {
          workId: this.workId,
          subject: this.subject,
          questionId: this.filter.questionId,
          status: this.applyChangeLevelStatus,
          page: this.current - 1,
          size: this.size
        };
        data = await changeLevelPaperList(datas);
      }
      this.papers = data.data.map(paper => {
        paper.title = paper.examNumber;
        return paper;
      });
      this.total = data.totalCount;
      this.totalPage = data.pageCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    async getStepLevels() {
      const data = await levelStatData(this.subjectId, this.filter.questionId);
      const undoIndex = data.findIndex(item => item.id === null);
      let otherStep = [];
      if (undoIndex !== -1) {
        const undo = { ...data[undoIndex] };
        data.splice(undoIndex, 1);
        otherStep.push({
          name: "改档",
          count: undo.shift,
          type: "shift"
        });
      }
      let levelStep = data.map(item => {
        return {
          ...item,
          name: item.id,
          type: "done"
        };
      });
      this.steps = { levelStep, otherStep };
      if (!this.curStep) this.curStep = levelStep[0];
    },
    async getWorkLevels() {
      const data = await workLevelList(this.workId);
      this.levels = data.map(item => {
        return {
          id: item.id,
          name: item.code,
          minScore: item.minScore,
          maxScore: item.maxScore
        };
      });
    },
    async getAreaList() {
      const data = await areaList({
        workId: this.workId,
        subject: this.subject
      });
      this.areas = data.map(item => {
        return {
          id: item.id,
          areaName: item.areaName,
          areaCode: item.areaCode
        };
      });
    },
    async stepChange(step) {
      this.applyChangeLevelStatus = 1;
      this.curStep = step;
      this.current = 1;
      await this.getList();
      if (this.papers.length) {
        this.selectPaper(0);
      } else {
        this.curPaper = {};
      }
    },
    areaChange() {
      this.getStepLevels();
      this.toPage(1);
    },
    selectPaper(index) {
      this.curPaperIndex = index;
      this.curPaper = { ...this.papers[index] };
    },
    toReview(index) {
      this.isFullscreenMarking = true;
      this.selectPaper(index);
      this.$refs.ImagePreview.open();
    },
    async prevPage() {
      if (this.current === 1) {
        this.$Message.warning("当前已经是第一条数据了");
        return;
      }
      this.current--;
      await this.getList();
      this.selectPaper(this.papers.length - 1);
      if (this.papers.length) this.$refs.ImagePreview.initData();
    },
    async nextPage() {
      if (this.current === this.totalPage) {
        if (this.current > 1) {
          this.current--;
        } else {
          this.$Message.warning("当前已经是最后一条数据了");
          this.$refs.ImagePreview.cancel();
          this.$refs.CarouselPapersPreview &&
            this.$refs.CarouselPapersPreview.cancel();
        }
      }
      // 下一页时，继续获取当前页数据。
      await this.getList();
      this.selectPaper(0);
      if (this.papers.length) this.$refs.ImagePreview.initData();
    },
    toNext() {
      this.$refs.ImagePreview.showNext();
    },
    updateHistory() {
      this.$refs.GradeHistoryPaper.updatePapers();
    },
    async serachPaperByCode(params) {
      const data = await taskSnSearch(
        params.codeType,
        params.code,
        this.filter.questionId
      );
      if (!data) {
        this.$Message.error("没有查找到结果！");
        return;
      }
      data.title = data.examNumber;
      this.papers = [data];
      this.total = 1;
    },
    searchGradeChangeList(applyChangeLevelStatus) {
      this.applyChangeLevelStatus = applyChangeLevelStatus;
      this.toPage(1);
    },
    leaderSelectLevel(levelInfo) {
      const content = `确定申请由${levelInfo.curLevel}档改为${levelInfo.selectedLevel}并打回给所有老师吗？`;
      this.$Modal.confirm({
        content,
        onOk: async () => {
          await markStepChangeLevel({
            subjectId: this.subjectId,
            paperId: levelInfo.paperId,
            level: levelInfo.selectedLevel
          });
          this.$Message.success("申请改档成功！");
          this.getStepLevels();
          this.updateHistory();
          this.toNext();
        }
      });
    },
    // paper carousel
    toViewCarouselPaper(paperIndex, papers) {
      this.isFullscreenMarking = true;
      this.beforeCarouselCurPaperIndex = this.curPaperIndex;
      this.curPaperIndex = null;
      this.carouselPapers = papers;
      this.selectCarouselPaper(paperIndex);
      this.$nextTick(() => {
        this.$refs.CarouselPapersPreview.open();
      });
    },
    selectCarouselPaper(index) {
      this.curCarouselPaperIndex = index;
      this.curPaper = { ...this.carouselPapers[index] };
    },
    carouseImagePreviewClose() {
      this.isFullscreenMarking = false;
      this.selectPaper(this.beforeCarouselCurPaperIndex);
    }
  }
};
</script>