stmms-web/src/features/mark/MarkBoardKeyBoard.vue

<template>
  <div
    v-if="store.currentTask"
    class="mark-board-track-container"
    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
  >
    <div class="tw-my-2 tw-flex">
      <a-dropdown class="tw-self-end">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="toggleKeyMouse">
              鼠标给分
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>
          键盘给分
          <DownOutlined style="display: inline-flex" />
        </a-button>
      </a-dropdown>
    </div>
    <div
      class="tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5 top-container tw-mb-4"
    >
      <div class="tw-flex tw-flex-col">
        <div class="tw-flex tw-items-center tw-gap-2">
          <img
            src="./images/totalscore.png"
            style="width: 13px; height: 16px"
          />
          总分
        </div>
        <div class="total-score tw-ml-5 tw-font-bold">
          <transition-group name="score-number-animation" tag="span">
            <span
              :key="
                store.currentTaskEnsured.markResult
                  ? store.currentTaskEnsured.markResult.markerScore + ''
                  : '0'
              "
              class="tw-inline-block"
              >{{
                store.currentTaskEnsured.markResult
                  ? store.currentTaskEnsured.markResult.markerScore
                  : ""
              }}</span
            >
          </transition-group>
        </div>
      </div>

      <div class="tw-flex tw-place-content-center tw-items-center tw-gap-2">
        <div class="tw-flex tw-flex-col tw-gap-1">
          <a-popconfirm
            v-if="store.setting.enableAllZero"
            title="确定给全零分？"
            :overlayStyle="{ width: '200px' }"
            @confirm="$emit('allZeroSubmit')"
          >
            <a-button
              type="primary"
              size="middle"
              class="all-zero-unselective-button"
            >
              <span>全零分</span>
            </a-button>
          </a-popconfirm>
          <!-- <a-popconfirm
            v-if="store.setting.selective"
            title="确定是未选做？"
            :overlayStyle="{ width: '200px' }"
            @confirm="$emit('unselectiveSubmit')"
          >
            <a-button
              type="primary"
              size="middle"
              class="all-zero-unselective-button"
            >
              <span>未选做</span>
            </a-button>
          </a-popconfirm> -->
        </div>

        <qm-button
          type="primary"
          shape="round"
          size="middle"
          style="height: 76px; border-radius: 10px; padding: 12px"
          @click="submit"
        >
          提交
        </qm-button>
      </div>
    </div>

    <div v-if="store.currentTaskEnsured.questionList">
      <template
        v-for="(question, index) in store.currentTaskEnsured.questionList"
        :key="index"
      >
        <div
          :id="'bq-' + question.mainNumber + '-' + question.subNumber"
          class="question tw-rounded tw-p-1 tw-mb-1 tw-cursor-pointer tw-relative"
          :class="{
            'current-question': isCurrentQuestion(question),
            disabled: notInActive(index),
          }"
          @click="willChooseQuestion(question, index)"
        >
          <div class="tw-flex tw-justify-between">
            <div>
              <div v-if="!!question.questionName">
                {{ question.questionName }}
              </div>
              <div v-else>
                {{ question.title }} {{ question.mainNumber }}-{{
                  question.subNumber
                }}
              </div>
              <div
                class="tw-text-center tw-text-3xl"
                :class="isCurrentQuestion(question) && 'current-score'"
              >
                {{
                  isCurrentQuestion(question)
                    ? scoreStr
                    : store.currentTask.markResult?.scoreList[index]
                }}
              </div>
            </div>
            <div>
              <div class="tw-text-center">
                间隔{{ question.intervalScore }}分
              </div>
              <div class="tw-flex tw-text-3xl" style="width: 80px">
                <span class="tw-flex-1">{{ question.minScore }}</span>
                <span class="tw-flex-1">~</span>
                <span class="tw-flex-1 tw-text-center">{{
                  question.maxScore
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="tw-mb-2">
          <div
            v-if="question.selective"
            class="tw-cursor-pointer tw-font-bold unselective"
            :class="{
              'current-score': question.hasSetUnselective,
            }"
            @click="setUnselect(question, index)"
          >
            未选做
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Question } from "@/types";
import { isNumber } from "lodash-es";
import { onMounted, onUnmounted, watch, computed } from "vue";
import { store } from "@/store/store";
import { keyMouse } from "./use/keyboardAndMouse";
import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
import { message } from "ant-design-vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { useRoute } from "vue-router";

const route = useRoute();

const props = defineProps<{ arbitrateIndex?: string }>();
const activeIndex = computed(() => {
  return (
    props.arbitrateIndex ? props.arbitrateIndex?.split(",") || [] : []
  ).map((indexStr: string) => Number(indexStr) - 1);
});
const notInActive = (index: number) => {
  return (
    activeIndex.value.indexOf(index) == -1 &&
    route.path === "/admin/exam/arbitrate/start"
  );
};

const emit = defineEmits(["submit", "allZeroSubmit", "unselectiveSubmit"]);

const { toggleKeyMouse } = keyMouse();
const { chooseQuestion } = autoChooseFirstQuestion();

/**
 * 当前题的输入串，初次是markResult.scoreList中score，然后接收输入字符，回车时判断是否合法，合法则赋值给markResult.scoreList
 * 切换到下一题，则重新开始
 *  */
let scoreStr = $ref("");
watch(
  () => [store.currentQuestion, store.setting.uiSetting["normal.mode"]],
  () => {
    console.log("store.currentQuestion?.score", store.currentQuestion?.score);
    if (isNumber(store.currentQuestion?.score)) {
      scoreStr = "" + store.currentQuestion?.score;
    } else {
      scoreStr = "";
    }
  },
  { immediate: true }
);
const willChooseQuestion = (question, index) => {
  if (notInActive(index)) {
    return;
  }
  chooseQuestion(question);
  scrollToQuestion(question);
};
const questionScoreSteps = $computed(() => {
  const question = store.currentQuestion;
  if (!question) return [];

  const remainScore = Math.round(question.maxScore * 100) / 100;
  const steps = [];
  for (
    let i = 0;
    i <= remainScore;
    i = Math.round(i * 100 + question.intervalScore * 100) / 100
  ) {
    steps.push(i);
  }
  if (
    Math.round(remainScore * 100) % Math.round(question.intervalScore * 100) !==
    0
  ) {
    steps.push(remainScore);
  }

  return steps;
});

function isCurrentQuestion(question: Question) {
  return (
    store.currentQuestion?.mainNumber === question.mainNumber &&
    store.currentQuestion?.subNumber === question.subNumber
  );
}

const questionScore = $computed(
  () =>
    store.currentTask &&
    store.currentQuestion &&
    store.currentTask.markResult.scoreList[store.currentQuestion.__index]
);

function numberKeyListener(event: KeyboardEvent) {
  // console.log(event);
  if (!store.currentQuestion || !store.currentTask) return;
  if (store.globalMask) return;

  function indexOfCurrentQuestion() {
    return store.currentTaskEnsured.questionList.findIndex(
      (q) =>
        q.mainNumber === store.currentQuestion?.mainNumber &&
        q.subNumber === store.currentQuestion.subNumber
    );
  }
  // 处理Enter跳下一题或submit
  if (event.key === "Enter") {
    const allScoreMarked = store.currentTask.markResult.scoreList.every((s) =>
      isNumber(s)
    );
    // 如果所有题已赋分，并且当前题赋分和输入串和当前题分数一致，则可以在任意题提交
    if (allScoreMarked && scoreStr === "" + questionScore) {
      submit();
      return;
    }

    if (scoreStr.length === 0) {
      void message.error({ content: "请输入分数", duration: 5 });
      console.log("请输入分数");
      return;
    }

    // 0 分
    // 整数分 (开始不为0)
    // 小数分 (开始和结束不为0，结束必须为1-9
    if (
      !(
        scoreStr === "0" ||
        /^0\.[1-9]\d*$/.test(scoreStr) ||
        /^[1-9]\d*$/.test(scoreStr) ||
        /^[1-9]\d*\.\d*[1-9]$/.test(scoreStr)
      )
    ) {
      void message.error({ content: "分数格式不正确", duration: 5 });
      console.log("分数格式不正确");
      return;
    }
    const score = parseFloat(scoreStr);
    // console.log(score);
    if (!isNumber(score)) {
      void message.error({ content: "非数字输入", duration: 5 });
      console.log("非数字输入");
      return;
    }
    if (!questionScoreSteps.includes(score)) {
      void message.error({ content: "输入的分数不在有效间隔内", duration: 5 });
      return;
    }
    const { __index } = store.currentQuestion;
    store.currentTask.markResult.scoreList[__index] = score;
    store.currentQuestion.hasSetUnselective = false;
    //
    // scoreStr = "";
    // console.log("give score", score);
    const idx = indexOfCurrentQuestion();
    if (idx + 1 < store.currentTask.questionList.length) {
      chooseQuestion(store.currentTask.questionList[idx + 1]);
    }
    return;
  }
  if (event.key === "ArrowLeft") {
    const idx = indexOfCurrentQuestion();
    if (idx > 0) {
      chooseQuestion(store.currentTask.questionList[idx - 1]);
    }
    event.preventDefault();
    return;
  }
  if (event.key === "ArrowRight") {
    const idx = indexOfCurrentQuestion();
    if (idx < store.currentTask.questionList.length - 1) {
      chooseQuestion(store.currentTask.questionList[idx + 1]);
    }
    event.preventDefault();
    return;
  }
  // 处理回退删除分数
  if (event.key === "Backspace") {
    if (scoreStr.length > 0) {
      scoreStr = scoreStr.slice(0, -1);
    } else {
      return;
    }
  }
  if (event.key === "Escape") {
    scoreStr = "";
  }

  // 此时不再接受任何非数字键
  if (".0123456789".includes(event.key)) {
    scoreStr += event.key;
  }
}
onMounted(() => {
  document.addEventListener("keydown", numberKeyListener);
});
onUnmounted(() => {
  document.removeEventListener("keydown", numberKeyListener);
});

const scrollToQuestion = (question: Question) => {
  const node = document.querySelector(
    `#q-${question.mainNumber}-${question.subNumber}`
  );
  node && node.scrollIntoView({ behavior: "smooth" });
};

watch(
  () => store.currentQuestion,
  () => {
    store.currentQuestion && scrollToQuestion(store.currentQuestion);
  }
);

function submit() {
  emit("submit");
}

const buttonHeightForSelective = $computed(() =>
  store.setting.selective && store.setting.enableAllZero ? "36px" : "76px"
);

function setUnselect(question: Question, index: number) {
  if (!question.hasSetUnselective) {
    const markResult = store.currentTask.markResult;
    markResult.scoreList[index] = null;
    store.currentScore = undefined;
    // scoreStr = "未选做";
    scoreStr = "";
  } else {
    scoreStr = "";
  }
  question.hasSetUnselective = !question.hasSetUnselective;
}
</script>

<style lang="less" scoped>
.unselective {
  width: 72px;

  height: 32px;
  font-size: var(--app-secondary-font-size);
  display: grid;
  place-content: center;
  background-color: var(--app-container-bg-color);

  border-radius: 30px;
}
.mark-board-track-container {
  max-width: 290px;
  min-width: 290px;
  padding: 20px;
  max-height: calc(100vh - 56px - 0px);
  overflow: auto;
  z-index: 1001;
  transition: margin-right 0.5s;
  color: var(--app-small-header-text-color);
}
.mark-board-track-container.show {
  margin-right: 0;
}
.mark-board-track-container.hide {
  margin-right: -290px;
}

.top-container {
  background-color: var(--app-container-bg-color);
}
.total-score {
  color: var(--app-main-text-color);
  font-size: 32px;
}
.question {
  min-width: 80px;
  padding: 10px;
  background-color: var(--app-container-bg-color);
  &.disabled {
    background-color: #f5f5f5 !important;
    // pointer-events: none;
    cursor: not-allowed !important;
    * {
      color: rgba(0, 0, 0, 0.25) !important;
    }
  }
}
.current-question {
  color: white;
  background-color: var(--app-score-color);
}

.current-score {
  background-color: var(--app-score-color);
  color: white;
}
.all-zero-unselective-button {
  height: v-bind(buttonHeightForSelective);
  border-radius: 10px;
  padding: 7px;
  background-color: #4db9ff;
  border: none;
}
</style>