mark-web/src/features/mark/Mark.vue

<template>
  <div class="my-container">
    <mark-header />
    <div class="tw-flex tw-gap-1">
      <mark-history :should-reload="shouldReloadHistory" />
      <mark-body @error="removeBrokenTask" />
      <mark-board-track v-if="showMarkBoardTrack" @submit="saveTaskToServer" />
      <mark-board-key-board
        v-if="showMarkBoardKeyBoard"
        @submit="saveTaskToServer"
      />
      <mark-board-mouse v-if="showMarkBoardMouse" @submit="saveTaskToServer" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import {
  clearMarkTask,
  getGroup,
  getSetting,
  getStatus,
  getTask,
  saveTask,
  updateUISetting,
} from "@/api/markPage";
import {
  findCurrentTaskMarkResult,
  removeCurrentMarkResult,
  store,
} from "./store";
import MarkHeader from "./MarkHeader.vue";
import MarkBody from "./MarkBody.vue";
import { useTimers } from "@/setups/useTimers";
import MarkHistory from "./MarkHistory.vue";
import MarkBoardTrack from "./MarkBoardTrack.vue";
import { ModeEnum, Setting } from "@/types";
import MarkBoardKeyBoard from "./MarkBoardKeyBoard.vue";
import MarkBoardMouse from "./MarkBoardMouse.vue";
import { isEmpty } from "lodash";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "Mark",
  components: {
    MarkHeader,
    MarkBody,
    MarkHistory,
    MarkBoardTrack,
    MarkBoardKeyBoard,
    MarkBoardMouse,
  },
  setup: () => {
    const { addInterval } = useTimers();

    async function updateMarkTask() {
      const settingRes = await clearMarkTask();
    }

    async function updateSetting() {
      const settingRes = await getSetting();
      // 初次使用时，重置并初始化uisetting
      if (isEmpty(settingRes.data.uiSetting)) {
        settingRes.data.uiSetting = {
          "answer.paper.scale": 1,
          "score.board.collapse": false,
          "normal.mode": "keyboard",
        } as Setting["uiSetting"];
      }
      store.setting = settingRes.data;
    }
    async function updateStatus() {
      const res = await getStatus();
      store.status = res.data;
    }
    async function updateGroups() {
      const res = await getGroup();
      store.groups = res.data;
    }
    async function updateTask() {
      const res = await getTask();
      if (res.data.libraryId) {
        store.tasks.push(res.data);
        if (!store.historyOpen) {
          // 回评中，不能替换task
          // TODO: 疑似替换多次引起重新渲染
          if (store.currentTask?.studentId !== store.tasks[0].studentId)
            store.currentTask = store.tasks[0];
        }

        // 如果是评完后，再取到的任务，则此时要更新一下status
        if (store.status.totalCount - store.status.markedCount === 0) {
          await updateStatus();
        }
      } else {
        store.message = res.data.message;
      }
    }

    // 5秒更新一次tasks
    addInterval(() => {
      // console.log("get task", store.tasks);
      if (store.tasks.length < (store.setting.prefetchCount ?? 3)) {
        updateTask();
      }
    }, 5 * 1000);

    // TODO: 后续改掉，不需要
    addInterval(() => {
      updateStatus();
    }, 5 * 60 * 1000);

    onMounted(async () => {
      await updateMarkTask();
      updateSetting();
      updateStatus();
      updateGroups();
      updateTask();
    });

    watch(
      () => [store.setting.uiSetting, store.setting.mode],
      () => {
        updateUISetting(store.setting.mode, store.setting.uiSetting);
      },
      { deep: true }
    );

    // 切换currentTask的同时，切换currentMarkResult
    watch(
      () => store.currentTask,
      () => {
        store.currentMarkResult = findCurrentTaskMarkResult();

        // 重置当前选择的quesiton和score
        store.currentQuestion = undefined;
        store.currentScore = undefined;
      }
    );

    const showMarkBoardTrack = computed(() => {
      return store.setting.mode === ModeEnum.TRACK;
    });

    const showMarkBoardKeyBoard = computed(() => {
      return (
        store.setting.mode === ModeEnum.COMMON &&
        store.setting.uiSetting["normal.mode"] === "keyboard"
      );
    });

    const showMarkBoardMouse = computed(() => {
      return (
        store.setting.mode === ModeEnum.COMMON &&
        store.setting.uiSetting["normal.mode"] === "mouse"
      );
    });

    const removeBrokenTask = () => {
      removeCurrentMarkResult();
      store.currentTask = undefined;
      store.tasks.shift();
    };

    const shouldReloadHistory = ref(0);

    const saveTaskToServer = async () => {
      const markResult = findCurrentTaskMarkResult();
      if (!markResult) return;

      if (
        markResult.scoreList.length !== store.currentTask?.questionList.length
      ) {
        message.error({ content: "还有题目没有评分", duration: 5 });
        return;
      }
      console.log("save task to server");
      const mkey = "save_task_key";
      message.loading({ content: "保存评卷任务...", key: mkey });
      const res = (await saveTask()) as any;
      updateStatus();
      if (res.data.success && store.currentTask) {
        message.success({ content: "保存成功", key: mkey, duration: 2 });
        if (!store.historyOpen) {
          removeCurrentMarkResult();
          store.currentTask = undefined;
          store.tasks.shift();
        } else {
          shouldReloadHistory.value = Date.now();
        }
      } else {
        if (markResult) {
          markResult.spent = Date.now() - markResult.spent;
        }
        console.log(res.data.message);
        message.error({ content: res.data.message, duration: 10 });
      }
    };

    return {
      store,
      updateTask,
      saveTaskToServer,
      showMarkBoardTrack,
      showMarkBoardKeyBoard,
      showMarkBoardMouse,
      shouldReloadHistory,
      removeBrokenTask,
    };
  },
});
</script>

<style scoped>
.my-container {
  width: 100%;
}
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>