mark-web/src/components/mark/MarkBoardMouse.vue

<template>
  <div
    v-if="store.currentTask"
    style="
      max-width: 250px;
      min-width: 250px;
      border: 1px solid grey;
      padding-left: 6px;
      padding-right: 6px;
    "
  >
    <div>
      <h1 class="text-3xl text-center" @click="toggleKeyMouse">鼠标给分</h1>
    </div>
    <div>
      <h1 class="text-3xl text-center">
        总分：{{ store.currentMarkResult?.markerScore || 0 }}
      </h1>
    </div>
    <div>
      <div class="text-2xl text-center" @click="submit">提交</div>
    </div>

    <div v-if="store.currentTask && store.currentTask.questionList">
      <template
        v-for="(question, index) in store.currentTask?.questionList"
        :key="index"
      >
        <div class="question rounded p-1 mb-2">
          <div>
            <div>
              {{ question.title }} {{ question.mainNumber }}-{{
                question.subNumber
              }}
            </div>
            <div class="flex flex-wrap gap-1">
              <div
                v-for="(s, i) in question.maxScore + 1"
                :key="i"
                @click="chooseScore(question, s - 1)"
                class="single-score"
                :class="isCurrentScore(question, s - 1) && 'current-score'"
              >
                {{ s - 1 }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { Question } from "@/types";
import { isNumber } from "lodash";
import { defineComponent, watch } from "vue";
import { findCurrentTaskMarkResult, store } from "./store";

export default defineComponent({
  name: "MarkBoardMouse",
  emits: ["submit"],
  setup(props, { emit }) {
    function toggleKeyMouse() {
      if (store.setting.uiSetting["normal.mode"] === "keyboard") {
        store.setting.uiSetting["normal.mode"] = "mouse";
      } else {
        store.setting.uiSetting["normal.mode"] = "keyboard";
      }
    }
    const markResult = findCurrentTaskMarkResult();

    watch(
      () => store.currentTask,
      () => {
        store.currentQuestion = undefined;
        store.currentScore = undefined;
      }
    );
    function chooseScore(question: Question, score: number) {
      store.currentQuestion = question;
      store.currentQuestion.score = score;
    }
    function isCurrentScore(question: Question, score: number) {
      return question.score === score;
    }

    function submit() {
      const errors: any = [];
      store.currentTask?.questionList.forEach((question, index) => {
        if (!isNumber(question.score)) {
          errors.push({ question, index, error: "没有赋分不能提交" });
        }
      });
      if (errors.length === 0) {
        emit("submit");
      } else {
        console.log(errors);
      }
    }

    return {
      store,
      toggleKeyMouse,
      markResult,
      chooseScore,
      isCurrentScore,
      submit,
    };
  },
});
</script>

<style scoped>
.question {
  min-width: 80px;
  border: 1px solid grey;
}
.current-question {
  border: 1px solid yellowgreen;
  background-color: lightblue;
}
.single-score {
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;

  border: 1px solid black;
  border-radius: 5px;
}
.current-score {
  border: 1px solid yellowgreen;
  background-color: lightblue;
}
</style>