mark-web/src/features/admin/confirmPaper/ConfirmPaper.vue

<template>
  <div class="mark confirm-paper">
    <div class="mark-header">
      <div v-if="student" class="mark-header-part">
        <div class="header-noun">
          <span>课程名称：</span>
          <span> {{ student.courseName }}（{{ student.courseCode }}）</span>
        </div>
        <div class="header-noun">
          <span>试卷编号：</span>
          <span>{{ student.paperNumber }}</span>
        </div>
        <div class="header-noun">
          <span>姓名：</span>
          <span>{{ student.studentName }}</span>
        </div>
        <div class="header-noun">
          <span>学号：</span>
          <span>{{ student?.studentCode }}</span>
        </div>
        <div v-if="studentIds.length > 1" class="header-noun">
          <span>进度：</span>
          <span> {{ currentIndex }}/{{ studentIds.length }} </span>
        </div>
      </div>
      <div class="mark-header-part">
        <div class="paper-menu">
          <span
            v-for="(u, index) in student?.sheetUrls"
            :key="index"
            :class="{ 'is-active': currentImage === index }"
            @click="currentImage = index"
          >
            {{ index + 1 }}
          </span>
        </div>
      </div>
    </div>

    <div class="mark-main">
      <div class="mark-body">
        <div
          v-if="student && currentImage !== 0"
          class="page-action page-prev"
          title="上一张"
          @click="switchImageArrow({ left: true })"
        >
          <ArrowLeftOutlined />
        </div>
        <div
          v-if="student && currentImage !== student.sheetUrls.length - 1"
          class="page-action page-next"
          title="上一张"
          @click="switchImageArrow({ right: true })"
        >
          <ArrowRightOutlined />
        </div>
        <div class="mark-body-container">
          <div v-if="!student" class="mark-body-none">
            <div>
              <img src="@/assets/image-none-task.png" />
              <p>暂无数据</p>
            </div>
          </div>
          <div
            v-else
            class="single-image-container"
            :style="{ width: answerPaperScale }"
          >
            <img
              draggable="false"
              :src="curImageUrl"
              :style="{
                transform:
                  (rotateDegree ? 'translate( 0,  calc(30vh))' : '') +
                  `rotate(${rotateDegree}deg)`,
              }"
              @click="switchImage"
              @contextmenu="showBigImage"
            />
          </div>
        </div>
        <ZoomPaper v-if="student" showRotate fixed @rotateRight="rotateRight" />
      </div>

      <div class="mark-board-track">
        <div class="paper-topics">
          <div
            v-for="group in answersComputed"
            :key="group.mainNumber"
            class="paper-topic"
          >
            <h2 class="paper-topic-title">
              {{ group.mainNumber }}、{{ group.mainTitle }} ({{
                group.subs.length
              }})
            </h2>
            <div class="paper-topic-body">
              <div
                v-for="question in group.subs"
                :key="question.subNumber"
                class="paper-topic-question"
              >
                <span class="question-number">{{ question.subNumber }} </span>
                <a-input
                  class="normal-input"
                  :class="{
                    'long-input': question.type
                      ? !['SINGLE', 'TRUE_OR_FALSE'].includes(question.type)
                      : !group.mainTitle.match(/单选|单项|判断/),
                  }"
                  :value="question.answer"
                  :maxLength="
                    (
                      question.type
                        ? ['MULTIPLE'].includes(question.type)
                        : group.mainTitle.match(/多选|多项|不定项/)
                    )
                      ? 100
                      : 1
                  "
                  @keydown="onPreventAnswerKey"
                  @input="changeAnswer($event, question)"
                  @blur="changeAnswer($event, question, '#')"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="board-tips">
          <p v-if="!allViewed">请先浏览完该学生的所有试卷</p>
        </div>
        <div :class="['board-footer', { 'is-simple': !isMultiStudent }]">
          <a-button
            class="board-submit"
            size="medium"
            type="primary"
            :disabled="!allViewed || !student?.upload"
            @click="saveStudentAnswer"
          >
            保存
          </a-button>
          <div v-if="isMultiStudent" class="student-switch">
            <a-button :disabled="isFirst" @click="getPreviousStudent">
              上一份
            </a-button>
            <a-button :disabled="isLast" @click="getNextStudent">
              下一份
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  studentObjectiveConfirmData,
  saveStudentObjectiveConfirmData,
} from "@/api/confirmPage";
import { message } from "ant-design-vue";
import { onMounted, watch } from "vue";
import "viewerjs/dist/viewer.css";
import Viewer from "viewerjs";
import { store } from "@/store/store";
import ZoomPaper from "@/components/ZoomPaper.vue";
import { useTimers } from "@/setups/useTimers";
import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons-vue";
import vls from "@/utils/storage";
import { StudentObjectiveInfo } from "@/types";

const { addTimeout } = useTimers();

const studentIds = $ref(vls.get("check-students", []));

onMounted(async () => {
  if (studentIds.length === 0) {
    void message.info("没有需要处理的考生，请返回。");
    return;
  }
  await getNextStudent();
});

let currentStudentId = $ref("");

const currentIndex = $computed(() => studentIds.indexOf(currentStudentId));
const isFirst = $computed(() => currentIndex === 0);
const isLast = $computed(() => currentIndex === studentIds.length - 1);
const isMultiStudent = $computed(() => studentIds.length > 1);

const curImageUrl = $computed(() =>
  student ? student.sheetUrls[currentImage].url : ""
);

let student: StudentObjectiveInfo | null = $ref(null);
/** 后台数据错误，停止整个页面的流程 */
let dataError = $ref(false);

const answersComputed = $computed(() => {
  let mains = student?.answers.map((v) => ({
    mainTitle: "",
    mainNumber: v.mainNumber,
    subs: [v],
  }));
  const mSet = new Set();
  mains = mains?.filter((v) => {
    if (!mSet.has(v.mainNumber)) {
      mSet.add(v.mainNumber);
      v.subs = [];
      return true;
    }
  });
  mains?.forEach((v) => {
    v.mainTitle = student?.titles[v.mainNumber] ?? "";
    v.subs =
      student?.answers.filter((v2) => v2.mainNumber === v.mainNumber) ?? [];
  });
  return mains;
});

async function getNextStudent() {
  if (isLast) return;
  student = await getStudent(studentIds[currentIndex + 1]);
}

async function getPreviousStudent() {
  if (isFirst) return;
  student = await getStudent(studentIds[currentIndex - 1]);
}

async function getStudent(studentId: string) {
  const res = await studentObjectiveConfirmData(studentId).catch(() => {
    dataError = true;
  });
  if (dataError) {
    void message.error(res.message, 24 * 60 * 60);
    throw new Error("取学生信息出错: " + res.message);
  }

  const stu = res.data;
  stu.sheetUrls = [
    { index: 1, url: "/1-1.jpg" },
    { index: 2, url: "/1-2.jpg" },
  ];
  currentStudentId = stu.studentId;
  currentImage = 0;
  browsedImageIndexes = [0];

  return stu;
}

const allowKey = [
  "Delete",
  "Backspace",
  "ArrowLeft",
  "ArrowRight",
  "#",
  "Shift",
  "[A-Za-z]",
];
const allowKeyRef = new RegExp(allowKey.join("|"));

function onPreventAnswerKey(e: KeyboardEvent) {
  console.log(e);
  if (!allowKeyRef.test(e.key)) {
    e.preventDefault();
  }
}

function changeAnswer(event: Event, question: string, defaultValue?: string) {
  const target = event.target as HTMLInputElement;
  student.answers = student.answers.map((v) => {
    if (
      v.mainNumber === question.mainNumber &&
      v.subNumber === question.subNumber
    ) {
      v.answer = target?.value.toUpperCase().trim() || defaultValue || "";
    }
    return v;
  });
}

let loading = false;
async function saveStudentAnswer() {
  if (!student) return;

  if (loading) return;
  loading = true;

  const data = {
    studentId: student.studentId,
    answers: student.answers.map((v) => v.answer || "#").join(","),
  };
  // if (!answers.match(/^(#*,*[A-Z]*)+$/g)) {
  //   void message.error("答案只能是#和大写英文字母");
  //   return;
  // }

  const res = await saveStudentObjectiveConfirmData(data).catch(() => false);
  loading = false;
  if (!res) {
    void message.error("保存失败，请刷新页面。");
  } else {
    void message.success("保存成功");
    await getNextStudent();
  }
}

//#region : 显示大图，供查看和翻转
let currentImage = $ref(0);
let browsedImageIndexes = $ref([0]);
let allViewed = $computed(() => {
  let indexes = Array.from(new Set(browsedImageIndexes));
  return indexes.length == (student?.sheetUrls || []).length;
});
watch(
  () => currentImage,
  () => {
    browsedImageIndexes.push(currentImage);
  }
);
function switchImageArrow({
  left = false,
  right = false,
}: {
  left?: boolean;
  right?: boolean;
}) {
  if (left) {
    if (currentImage > 0) {
      currentImage--;
    }
  }
  if (right) {
    if (currentImage < student.sheetUrls.length - 1) {
      currentImage++;
    }
  }
}

function switchImage(event: MouseEvent) {
  const image = event.target as HTMLImageElement;
  const layerX: number = (event as any).layerX;
  if (layerX * 2 < image.width) {
    if (currentImage > 0) {
      currentImage--;
    }
  } else {
    if (currentImage < student.sheetUrls.length - 1) {
      currentImage++;
    }
  }
}

const showBigImage = (event: MouseEvent) => {
  event.preventDefault();
  // console.log(event);
  let viewer: Viewer = null as unknown as Viewer;
  viewer && viewer.destroy();
  viewer = new Viewer((event.target as HTMLElement).parentElement, {
    // inline: true,
    viewed() {
      viewer.zoomTo(1);
    },
    hidden() {
      viewer.destroy();
    },
    zIndex: 1000000,
  });
  viewer.show();
};
//#endregion : 显示大图，供查看和翻转

//#region : 放大缩小和之后的滚动
const answerPaperScale = $computed(() => {
  // 放大、缩小不影响页面之前的滚动条定位
  let percentWidth = 0;
  let percentTop = 0;
  const container = document.querySelector<HTMLDivElement>(
    ".mark-body-container"
  );
  if (container) {
    const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
    percentWidth = scrollLeft / scrollWidth;
    percentTop = scrollTop / scrollHeight;
  }

  addTimeout(() => {
    if (container) {
      const { scrollWidth, scrollHeight } = container;
      container.scrollTo({
        left: scrollWidth * percentWidth,
        top: scrollHeight * percentTop,
      });
    }
  }, 10);
  const scale = store.setting.uiSetting["answer.paper.scale"];
  return scale * 100 + "%";
});
//#endregion : 放大缩小和之后的滚动

//#region rotateRight
let rotateDegree = $ref(0);
function rotateRight() {
  rotateDegree = (rotateDegree + 90) % 360;
}
//#endregion
</script>