SEEC-Portal-Front/src/components/TestCard.vue

<template>
  <el-card class="test" shadow="hover" @click="toTestInfo">

    <div :style="{borderBottom: type==='eval' ? '30px solid #f5b86e' : '30px solid #8dc9e2'}"
         style="float: right; width: 0; height: 0; position: absolute;right: 0;bottom: 0;border-left: 30px solid transparent;">
      <div v-if="type==='eval'" style="padding: 0 4px 0 4px; position: absolute; right: 0; bottom: -30px; color: white">
        E
      </div>
      <div v-else style="padding: 0 3px 0 3px; position: absolute; right: 0; bottom: -30px; color: white">
        C
      </div>
    </div>

    <el-row>
      <el-col :span="16">
        <el-col class="title">
          {{ title }}
        </el-col>
      </el-col>
      <el-col :span="8" class="status">
        <el-tag v-if="state==='NOT_STARTED'" size="small" type="info">未开始</el-tag>
        <el-tag v-else-if="state==='RUNNING_IN' && !isPublicTest" size="small" type="success">已参加</el-tag>
        <el-tag v-else-if="state==='RUNNING_NOT' && !isPublicTest" size="small">未参加</el-tag>
        <el-tag v-else-if="isPublicTest" size="small">开放中</el-tag>
        <el-tag v-else-if="state==='FINISHED'" size="small" type="danger">已结束</el-tag>
        <el-tag v-else-if="state==='CLOSED'" size="small" type="info">已关闭</el-tag>
      </el-col>
    </el-row>
    <el-row class="course" v-if="course!==''">
      {{ course }}
    </el-row>
    <el-row class="teacher">
      {{ teacherName }}
    </el-row>

    <el-row class="time">
      {{ startTime }}
    </el-row>
    <el-row class="time">
      {{ endTime }}
    </el-row>

    <el-row v-if="type==='eval'&&testVO['comment']!==''" class="comment">
      {{ testVO["comment"] }}
    </el-row>
  </el-card>
</template>

<script>
import {ElMessage} from "element-plus";
import store from "@/store";
import timeUtil from "@/utils/time";

export default {
  name: "TestCard",
  props: {
    testVO: Object,
    isPublicTest: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      teacher: Object,
    };
  },
  computed: {
    isLogin() {
      return store.state.user.token;
    },
    isCreator() {
      let result = null;
      switch (this.type) {
        case "eval":
          result = Number(this.testVO.course.teacherId) === Number(this.$store.state.user.id);
          break;
        case "coder":
          result = this.testVO.creator.username === this.$store.state.user.username;
          break;
        default:
          break;
      }
      return result;
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
    type() {
      if (this.testVO.examId) {
        return "eval";
      } else {
        return "coder";
      }
    },
    title() {
      if (this.type === "eval") {
        return this.testVO.examName;
      } else {
        return this.testVO.name;
      }
    },
    course() {
      if (this.type === "eval") {
        return "课程: " + this.testVO.course.name;
      } else {
        return "课程: " + this.testVO.course;
      }
    },
    teacherName() {
      return "教师: " + this.teacher;
    },
    startTime() {
      let start = "开始: ";
      switch (this.type) {
        case "eval":
          start += this.testVO.startTime.substring(0, 16);
          break;
        case "coder":
          start += timeUtil.timestampToTime(this.testVO.startAt);
          break;
        default:
          break;
      }
      return start;
    },
    endTime() {
      let end = "结束: ";
      switch (this.type) {
        case "eval":
          end += this.testVO.endTime.substring(0, 16);
          break;
        case "coder":
          end += timeUtil.timestampToTime(this.testVO.endAt);
          break;
        default:
          break;
      }
      return end;
    },
    state() {
      const now = new Date();
      if (this.type === "eval") {
        if (new Date(this.testVO.endTime) < now) {
          return "FINISHED";
        } else if (new Date(this.testVO.startTime) > now) {
          return "NOT_STARTED";
        } else if (this.testVO.isJoined) {
          return "RUNNING_IN";
        } else {
          return "RUNNING_NOT";
        }
      } else {
        if (this.testVO.status === "CLOSED") {
          return "CLOSED";
        } else if (this.testVO.startAt * 1000 > now) {
          return "NOT_STARTED";
        } else if (this.testVO.endAt * 1000 < now) {
          return "FINISHED";
        } else if (this.testVO.joined) {
          return "RUNNING_IN";
        } else {
          return "RUNNING_NOT";
        }
      }
    },
  },
  async mounted() {
    switch (this.type) {
      case "eval":
        this.teacher = (await this.$apis.getUserAPI(this.testVO.course["teacherId"])).data.data.name;
        break;
      case "coder":
        this.teacher = (await this.$apis.getNameByUsernameAPI(this.testVO.creator.username)).data.data;
        break;
      default:
        break;
    }
  },
  methods: {
    async toTestInfo() {
      const _this = this;
      // 未登录
      if (!this.isLogin) {
        ElMessage({
          showClose: true,
          message: "请先登录",
          type: "warning",
          duration: 1000,
        });
        await this.$router.push({name: "Auth", params: {login_to: "/portal"}});
        return;
      }
      // 已登录
      // 教师（拥有者）
      if (this.isCreator) {
        if (this.type === "eval") {
          this.toEvalExamPage(this.testVO.examId);
        } else {
          this.toCoderExamPage(this.testVO.id);
        }
      }
      // 其他教师
      else if (this.isTeacher) {
        this.$message.error("无权访问其他教师创建的课程");
      }
      // 学生
      else {
        if (this.testVO.isJoined || this.testVO.joined) {
          switch (_this.type) {
            case "coder":
              _this.toCoderExamPage(_this.testVO.id);
              break;
            case "eval":
              _this.toEvalExamPage(_this.testVO.examId, "student");
              break;
            default:
              break;
          }
        } else {
          let courseId;
          switch (this.type) {
            case "coder":
              courseId = (await this.$apis.getCourseByCoderId(this.testVO.courseId)).data.data.id;
              break;
            case "eval":
              courseId = (await this.$apis.getCourseByEvalId(this.testVO.course.id)).data.data.id;
              break;
            default:
              break;
          }
          const isSelected = (await this.$apis.checkCourseSelection(courseId, this.$store.state.user.id));
          if (isSelected) {
            switch (_this.type) {
              case "coder":
                _this.toCoderExamPage(_this.testVO.id);
                break;
              case "eval":
                _this.toEvalExamPage(_this.testVO.examId, "student");
                break;
              default:
                break;
            }
          } else {
            this.$router.push(`/course/${courseId}`);
          }
        }
      }
    },

    toEvalExamPage(examId, role="teacher") {
      this.$router.push(`/evalExam/${examId}/${role}/details`);
    },

    toCoderExamPage(examId) {
      this.$router.push(`/exam/${examId}`);
    }
  }
};
</script>

<style scoped>
.test {
  min-height: 180px;
  border-radius: 8px;
  height: calc(100% - 14px);
  position: relative;
  border: 1px solid #cccccc;
}

.test:hover {
  cursor: pointer;
  border: 1px solid #aaaaaa;
}

.title {
  font-weight: bold;
  font-size: medium;
}

.status {
  text-align: right;
}

.course {
  font-size: 10px;
  margin-top: 4px;
  color: #999999;
}

.teacher {
  font-size: 10px;
  margin-top: 4px;
  color: #999999;
}

.time {
  margin-top: 4px;
  font-size: 10px;
  /*margin-bottom: 16px;*/
  color: #999999;
}

.comment {
  background-color: #f6f6f6;
  color: #777777;
  margin-top: 10px;
  border-radius: 8px;
  padding: 10px;
  font-size: 10px;
  margin-bottom: 16px;
}
</style>