mark-web/src/components/inspect/MarkBoardInspect.vue

<template>
  <div
    v-if="store.currentTask"
    :style="{ display: store.MarkBoardTrackCollapse ? 'none' : 'block' }"
    class="mark-board-track-container"
  >
    <div>
      <h1 class="tw-text-3xl tw-text-center">试卷总分：{{ markerScore }}</h1>
    </div>

    <div v-if="groups">
      <template v-for="(groupNumber, index) in groups" :key="index">
        <div class="mb-2">
          <div
            class="tw-flex tw-justify-between"
            @mouseover="addFocusTrack(groupNumber)"
            @mouseleave="removeFocusTrack"
          >
            分组 {{ groupNumber }}
            <div>
              打回
              <input
                type="checkbox"
                @click="groupClicked(groupNumber)"
                :checked="groupChecked(groupNumber)"
              />
            </div>
          </div>
          <div v-if="questions">
            <template v-for="(question, index) in questions" :key="index">
              <div
                v-if="question.groupNumber === groupNumber"
                class="question tw-rounded tw-flex tw-mb-1"
                @mouseover="
                  addFocusTrack(
                    undefined,
                    question.mainNumber,
                    question.subNumber
                  )
                "
                @mouseleave="removeFocusTrack"
              >
                <div class="tw-flex-1">
                  {{ question.title }} {{ question.mainNumber }}-{{
                    question.subNumber
                  }}
                </div>
                <div class="tw-flex-1 tw-text-center">
                  {{ question.score || 0 }}
                </div>
                <div>
                  打回
                  <input
                    type="checkbox"
                    @change="questionCheckChanged(question)"
                    :checked="questionChecked(question)"
                  />
                </div>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>

    <div class="tw-flex tw-justify-center">
      <div v-if="store.currentTask.inspectTime > 0" @click="reject">打回</div>
      <div v-else-if="checkedQuestions.length === 0" @click="inspect">复核</div>
      <div v-else @click="reject">打回</div>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: "MarkBoardInspect",
  emits: ["inspect", "reject"],
  setup(props, { emit }) {
    let checkedQuestions = reactive([] as Array<Question>);

    watch(
      () => store.currentTask,
      () => {
        checkedQuestions.splice(0);
      }
    );
    const groups = computed(() => {
      const gs = store.currentTask?.questionList.map((q) => q.groupNumber);
      return [...new Set(gs)].sort((a, b) => a - b);
    });

    const questions = computed(() => {
      const qs = store.currentTask?.questionList;
      return qs;
    });

    const markerScore = computed(() =>
      questions.value?.map((q) => q.score || 0).reduce((acc, s) => acc + s)
    );

    function addToCheckedQuestion(question: Question) {
      checkedQuestions.push(question);
    }
    function removeCheckedQuestion(question: Question) {
      const idx = checkedQuestions.indexOf(question);
      checkedQuestions.splice(idx, 1);
    }
    function groupChecked(groupNumber: number) {
      return (
        checkedQuestions.filter((q) => q.groupNumber === groupNumber).length ===
        questions.value?.filter((q) => q.groupNumber === groupNumber).length
      );
    }

    function questionChecked(question: Question) {
      return checkedQuestions.includes(question);
    }

    function questionCheckChanged(question: Question) {
      const checked = questionChecked(question);
      if (checked) {
        removeCheckedQuestion(question);
      } else {
        addToCheckedQuestion(question);
      }
    }

    function groupClicked(groupNumber: number) {
      if (groupChecked(groupNumber)) {
        checkedQuestions
          .filter((q) => q.groupNumber === groupNumber)
          .forEach((q) => {
            const idx = checkedQuestions.indexOf(q);
            checkedQuestions.splice(idx, 1);
          });
      } else {
        questions.value
          ?.filter((q) => q.groupNumber === groupNumber)
          .forEach((q) => {
            if (!questionChecked(q)) checkedQuestions.push(q);
          });
      }
    }

    function addFocusTrack(
      groupNumber: number,
      mainNumber: number,
      subNumber: string
    ) {
      store.focusTracks.splice(0);

      if (groupNumber) {
        questions.value
          ?.filter((q) => q.groupNumber === groupNumber)
          ?.map((q) => q.trackList)
          .reduce((acc, ts) => acc.concat(ts))
          .forEach((t) => {
            store.focusTracks.push(t);
          });
      } else {
        questions.value
          ?.map((q) => q.trackList)
          .reduce((acc, ts) => acc.concat(ts))
          .filter((t) => {
            if (mainNumber) {
              return t.mainNumber === mainNumber && t.subNumber === subNumber;
            } else {
              return false;
            }
          })
          .forEach((t) => {
            store.focusTracks.push(t);
          });
      }
      // console.log(store.focusTracks);
    }

    function removeFocusTrack() {
      store.focusTracks.splice(0);
    }

    function reject() {
      emit("reject", checkedQuestions);
    }

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

    return {
      store,
      markerScore,
      groups,
      checkedQuestions,
      questions,
      groupChecked,
      questionChecked,
      questionCheckChanged,
      groupClicked,
      addFocusTrack,
      removeFocusTrack,
      reject,
      inspect,
    };
  },
});
</script>

<style scoped>
.mark-board-track-container {
  max-width: 250px;
  min-width: 250px;
  border-left: 1px solid grey;
  padding-left: 6px;
  padding-right: 6px;
}
.question {
  min-width: 100px;
  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>