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

<template>
  <a-modal
    title="选择试卷的问题类型"
    v-model:visible="visible"
    @cancel="handleCancel"
    width="300px"
    :zIndex="6000"
    wrapClassName="profile-wrapper"
  >
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
    </template>
    <table class="group-table">
      <tr>
        <th>问题类型</th>
        <th class="tw-text-right" style="padding-right: 20px">操作</th>
      </tr>
      <tr v-for="(problem, index) in store.setting.problemTypes" :key="index">
        <td>{{ problem.name }}</td>
        <td class="tw-text-right">
          <qm-button type="primary" @click="chooseProblemType(problem.id)">
            选择
          </qm-button>
        </td>
      </tr>
    </table>
  </a-modal>
</template>

<script lang="ts">
// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
import { doProblemType, getStatus } from "@/api/markPage";
import { message } from "ant-design-vue";
import { ref, defineComponent } from "vue";
import { removeCurrentMarkResult, store } from "./store";

export default defineComponent({
  name: "MarkProblemDialog",
  emits: ["should-reload-history"],
  setup(props, { emit }) {
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const removeSubmitedTask = () => {
      removeCurrentMarkResult();

      if (!store.historyOpen) {
        store.tasks.shift();
        store.currentTask = undefined;
      }
      // 回评时，在MarkHistory中处理
      // else {
      // if (store.currentTask === store.historyTasks[0]) {
      //   store.currentTask = store.historyTasks[1];
      // } else {
      //   store.currentTask = store.historyTasks[0];
      // }
      // }
    };

    async function updateStatus() {
      const res = await getStatus();
      store.status = res.data;
    }

    const chooseProblemType = async (problemId: number) => {
      if (!store.currentTask) {
        message.warn({ content: "没有可以标记的任务", duration: 5 });
        return;
      }
      try {
        const res = await doProblemType(problemId);
        if (res?.data.success) {
          message.success({ content: "问题卷处理成功", duration: 3 });
          visible.value = false;
          removeSubmitedTask();
          if (store.historyOpen) {
            emit("should-reload-history");
          }
          updateStatus();
        } else {
          message.error({ content: res?.data.message || "错误", duration: 5 });
        }
      } catch (error) {
        console.log("问题卷处理失败", error);
        message.error({ content: "网络异常", duration: 5 });
        await new Promise((res) => setTimeout(res, 1500));
        window.location.reload();
      }
    };

    const handleCancel = () => {
      visible.value = false;
    };

    return {
      store,
      visible,
      showModal,
      chooseProblemType,
      handleCancel,
    };
  },
});
</script>

<style scoped>
.profile-wrapper .ant-modal-title {
  color: var(--app-main-text-color);
}
.profile-wrapper .anticon-close {
  vertical-align: text-top;
}
.group-table {
  width: 100%;

  border-collapse: separate;
  border-spacing: 0 0.5em;
}
.group-table th {
  color: var(--app-small-header-text-color);
}
.group-table tr td {
  color: var(--app-bold-text-color);
}
</style>