mark-web/src/features/arbitrate/ArbitrateMarkList.vue

<template>
  <div class="container tw-mt-2 tw-ml-1">
    <div v-for="(markDetail, index) of list" :key="index">
      <table class="tw-mb-4">
        <tr style="border-bottom: 1px dotted grey">
          <td>评卷员</td>
          <td>{{ markDetail.markerName }}</td>
        </tr>
        <tr>
          <td>时间</td>
          <td>
            {{
              markDetail.markTime &&
              $filters.datetimeFilter(markDetail.markTime)
            }}
          </td>
        </tr>
        <tr>
          <td>总分</td>
          <td>
            {{
              markDetail.totalScore === -1 ? "未选做" : markDetail.totalScore
            }}
          </td>
        </tr>
        <tr>
          <td>详情</td>
          <td>{{ markDetail.scoreList }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
import { store } from "@/features/mark/store";
import { getArbitrateList } from "@/api/arbitratePage";

interface MarkDetail {
  markerName: string;
  markTime: number;
  totalScore: number;
  scoreList: string;
}

let list = reactive([] as Array<MarkDetail>);

watch(
  () => store.currentTask,
  async () => {
    if (store.currentTask) {
      const res = await getArbitrateList(
        store.currentTask?.libraryId as unknown as string
      );
      list.splice(0);
      list.push(...res.data);
    } else {
      list.splice(0);
    }
  }
);
</script>

<style scoped>
.container {
  min-width: 200px;
}
.container table tr :first-child {
  width: 60px;
  font-weight: bold;
}
.container table tr td {
  max-width: 140px;
  word-wrap: break-word;
}
</style>