切换分组

src/api/markPage.ts

@@ -137,3 +137,10 @@ export async function changeUserInfo(name: string, password?: string) {
 export async function doLogout() {
   window.location.href = "/mark/logout";
 }
+
+/** 评卷用户选择分组 */
+export async function doSwitchGroup(markerId: number) {
+  const form = new FormData();
+  form.append("markerId", "" + markerId);
+  return httpApp.post("/mark/subjectSelect", form);
+}

src/devLogin.ts

@@ -7,7 +7,7 @@ import {
 } from "@/devLoginParams";
 
 export async function initLogin() {
-  // if (document.cookie.includes("stmms_cookie")) return;
+  if (document.cookie.includes("stmms_cookie")) return;
   const f = new FormData();
   f.append("loginType", isAdmin ? "admin-login" : "mark-login");
   f.append("loginName", loginName);

src/features/mark/MarkHeader.vue

@@ -111,15 +111,20 @@
       <AlertOutlined class="icon-font icon-font-size-20" />
     </div>
     <div
-      @click="switchGroupDialog"
-      class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap"
+      @click="openSwitchGroupModal"
+      class="tw-flex tw-place-content-center tw-cursor-pointer"
       style="max-width: 8%"
       :title="group?.title"
     >
-      {{ group?.title }}
+      <div
+        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-mr-1"
+      >
+        {{ group?.title }}
+      </div>
       <DownOutlined
-        v-if="!store.setting.forceMode"
-        style="font-size: 12px; display: inline-flex"
+        v-if="store.groups.length > 1"
+        style="font-size: 12px; display: inline-block"
+        class="tw-self-center"
       />
     </div>
     <div
@@ -139,6 +144,7 @@
     </div>
   </div>
   <MarkChangeProfile ref="changeProfileRef" />
+  <MarkSwitchGroupDialog ref="switchGroupRef" />
 </template>
 
 <script lang="ts">
@@ -158,6 +164,7 @@ import {
 } from "@ant-design/icons-vue";
 import { ModeEnum } from "@/types";
 import MarkChangeProfile from "./MarkChangeProfile.vue";
+import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";
 
 export default defineComponent({
   name: "MarkHeader",
@@ -172,6 +179,7 @@ export default defineComponent({
     AlertOutlined,
     QuestionCircleOutlined,
     MarkChangeProfile,
+    MarkSwitchGroupDialog,
   },
   setup() {
     const modeName = computed(() =>
@@ -231,11 +239,6 @@ export default defineComponent({
       return store.setting.uiSetting["answer.paper.scale"] < 1;
     });
 
-    async function switchGroupDialog() {
-      const groups = await getGroups();
-      console.log(groups);
-    }
-
     async function updateHistoryTask({
       pageNumber = 1,
       pageSize = 10,
@@ -268,11 +271,17 @@ export default defineComponent({
     const changeProfileRef = ref(null);
 
     const openProfileModal = () => {
-      console.log(changeProfileRef.value);
       // @ts-ignore
       changeProfileRef.value?.showModal();
     };
 
+    const switchGroupRef = ref(null);
+
+    const openSwitchGroupModal = () => {
+      // @ts-ignore
+      switchGroupRef.value?.showModal();
+    };
+
     return {
       store,
       modeName,
@@ -287,10 +296,11 @@ export default defineComponent({
       lessThanOneScale,
       updateHistoryTask,
       toggleHistory,
-      switchGroupDialog,
       logout,
       changeProfileRef,
       openProfileModal,
+      switchGroupRef,
+      openSwitchGroupModal,
     };
   },
 });

src/features/mark/MarkSwitchGroupDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <a-modal
+    title="切换分组"
+    v-model:visible="visible"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <table class="group-table">
+      <tr>
+        <th>分组号</th>
+        <th>分组名</th>
+        <th>进度</th>
+        <td class="tw-text-right">操作</td>
+      </tr>
+      <tr
+        v-for="(group, index) in store.groups"
+        :key="index"
+        :class="isCurrentGroup(group.number) && 'current-group'"
+      >
+        <td>{{ group.number }}</td>
+        <td>{{ group.title }}</td>
+        <td>{{ (group.markedCount / group.totalCount).toFixed(1) }}%</td>
+        <td class="tw-text-right">
+          <QmButton type="primary" @click="chooseGroup(group.markerId)"
+            >选择</QmButton
+          >
+        </td>
+      </tr>
+    </table>
+  </a-modal>
+</template>
+<script lang="ts">
+import { doSwitchGroup, getGroups } from "@/api/markPage";
+import QmButton from "@/components/QmButton.vue";
+import { message } from "ant-design-vue";
+import { ref, defineComponent, onUpdated } from "vue";
+import { store } from "./store";
+
+export default defineComponent({
+  components: { QmButton },
+  name: "MarkSwitchGroupDialog",
+  setup() {
+    const visible = ref<boolean>(false);
+
+    onUpdated(async () => {
+      const groups = await getGroups();
+      store.groups = groups.data;
+    });
+
+    const showModal = () => {
+      visible.value = true;
+    };
+
+    const isCurrentGroup = (groupNumber: number) => {
+      return groupNumber === store.setting.groupNumber;
+    };
+
+    const chooseGroup = async (markerId: number) => {
+      const res = await doSwitchGroup(markerId).then((res) => {
+        if (res.data.success) {
+          window.location.reload();
+        } else {
+          message.error({ content: res.data.message || "错误", duration: 5 });
+        }
+      });
+    };
+
+    const handleOk = () => {
+      // confirmLoading.value = true;
+      // changeUserInfo(user.name, user.password)
+      //   .then(() => doLogout())
+      //   .finally(() => {
+      //     visible.value = false;
+      //     confirmLoading.value = false;
+      //   });
+    };
+
+    const handleCancel = () => {
+      // user.name = store.setting.userName;
+      // user.password = "";
+      // user.confirmPassword = "";
+    };
+
+    return {
+      store,
+      visible,
+      showModal,
+      isCurrentGroup,
+      chooseGroup,
+      handleOk,
+      handleCancel,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.group-table {
+  width: 100%;
+}
+
+.current-group {
+  background-color: lightblue;
+}
+</style>