client-admin/src/render/views/Review/index.vue

<template>
  <div class="review">
    <div class="review-head">
      <h2 v-if="reviewStore.curTask" class="review-title">
        {{ reviewStore.curTask.subjectName }} -
        {{ reviewStore.curTask.examNumber }} - {{ reviewStore.curTask.name }}
      </h2>
      <h2 v-else class="review-title">-</h2>

      <div class="review-stat">
        <p class="color-success">
          <CheckCircleFilled />已处理：{{ progress.finishCount }}
        </p>
        <p class="color-error">
          <CloseCircleFilled />未处理：{{ progress.todoCount }}
        </p>
      </div>

      <div class="review-prev">
        <a-button
          v-if="reviewStore.tabKey === 'review'"
          :disabled="loading"
          @click="onPrevTask"
        >
          <template #icon><ArrowLeftOutlined /></template> 上一个
        </a-button>
      </div>
    </div>

    <!-- body -->
    <div class="review-body">
      <ReviewImage />

      <!-- ReviewMarkPan -->
      <ReviewMarkPan
        v-if="reviewStore.curTask"
        :task-info="{
          examNumber: reviewStore.curTask.examNumber,
          name: reviewStore.curTask.name,
        }"
        @mark="onMark"
      />
    </div>

    <!-- action -->
    <ReviewAction
      ref="reviewActionRef"
      @mark="onMark"
      @reset="onReset"
      @search="onSearch"
    />

    <!-- reset confirm -->
    <ResetConfirmDialog
      ref="resetConfirmDialogRef"
      :subject="resetSubject"
      @confirm="onResetConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, onMounted, watch } from "vue";
import {
  CheckCircleFilled,
  CloseCircleFilled,
  ArrowLeftOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

import {
  reviewTask,
  reviewTaskReset,
  reviewTaskSave,
  reviewProgress,
  reviewTaskRelease,
} from "@/ap/review";
import { ReviewTaskListItem } from "@/ap/types/review";
import { SubjectItem } from "@/ap/types/base";

import { useUserStore, useReviewStore } from "@/store";
import useLoading from "@/hooks/useLoading";

import ReviewAction from "./ReviewAction.vue";
import ReviewImage from "./ReviewImage.vue";
import ResetConfirmDialog from "./ResetConfirmDialog.vue";
import ReviewMarkPan from "./ReviewMarkPan.vue";

const userStore = useUserStore();
const reviewStore = useReviewStore();

defineOptions({
  name: "review",
});

// 任务相关
const searchModel = reactive({
  examId: userStore.curExam.id,
  subjectCode: "",
});

const { loading, setLoading } = useLoading();

async function getNextTask() {
  const res = await reviewTask(searchModel).catch(() => {});
  reviewStore.setInfo({ curTask: res || null });

  if (!reviewStore.curTask) {
    message.error("没有下一个了！");
    return;
  }
}

const reviewActionRef = ref();
async function onPrevTask() {
  reviewActionRef.value?.switchTab("history");
}

// 任务进度
const progress = ref({
  finishCount: 0,
  todoCount: 0,
});
async function updateProgress() {
  const res = await reviewProgress(searchModel);
  progress.value = res || {};
}

// actions
async function onMark(assignedSuspect: boolean) {
  if (!reviewStore.curTask) return;

  if (loading.value) return;
  loading.value = true;

  try {
    await reviewTaskSave({ id: reviewStore.curTask.id, assignedSuspect });
    if (reviewStore.tabKey === "history") {
      reviewActionRef.value?.updateTaskStatus(assignedSuspect);
      loading.value = false;
      return;
    }

    await getNextTask();
    await updateProgress();
  } catch (error) {
    console.log(error);
  }
  loading.value = false;
}

async function onSearch(subjectCode: string) {
  searchModel.subjectCode = subjectCode;
  await releaseTask();
  await getNextTask();
  await updateProgress();
}

const resetConfirmDialogRef = ref();
const resetSubject = ref<SubjectItem | null>(null);
async function onReset(data: SubjectItem | null) {
  resetSubject.value = data;
  resetConfirmDialogRef.value?.open();
}

async function onResetConfirm() {
  if (!searchModel.subjectCode) return;
  await releaseTask();
  await getNextTask();
  await updateProgress();
}

async function releaseTask() {
  if (!searchModel.subjectCode) return;
  await reviewTaskRelease(searchModel);
}

onMounted(async () => {
  reviewStore.resetInfo();
  await releaseTask();
});
onBeforeUnmount(async () => {
  await releaseTask();
});
</script>