SEEC-II-FrontEnd/src/views/student/Code/ProjectDetail/Test/UnitTestDetail.vue

<template>
  <div>
    <page-header
      :loading="testDetailLoading"
      :routes="[
        { name: '代码作业', path: 'code' },
        { name: '项目列表', path: `code/${$route.params.homeworkId}` },
        {
          name: '项目详情',
          path: `code/${$route.params.homeworkId}/${
            $route.params.projectId
          }/test`
        },
        { name: '单元测试' }
      ]"
    >
      <template slot="title">
        单元测试 #{{ testDetail.id }}
      </template>
      <template slot="content">
        <pass-tag :pass="testDetail.isPassAll" />
      </template>
      <template slot="extraContent">
        <div class="tag">{{ displayUnixTime(testDetail.time) }}</div>
      </template>
    </page-header>
    <page-body>
      <div v-if="testDetailLoading"><page-section-loading show /></div>
      <div v-else>
        <div
          v-for="item in testDetail.detail"
          :key="item.id"
          class="gap-section"
        >
          <div class="page-section">
            <div>
              <pass-tag :pass="item.isPass" />
              <strong style="padding-left: 10px">
                页面测试用例 : #{{ item.id }}
              </strong>
            </div>
            <div class="code-section">{{ item.message }}</div>
          </div>
        </div>
      </div>
    </page-body>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader";
import PageBody from "@/components/PageBody/index";
import { getUnitTestDetail } from "@/api/codehw";
import timeMixins from "@/mixins/time";
import PassTag from "@/views/student/Code/ProjectDetail/components/PassTag";
import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
export default {
  components: { PageSectionLoading, PassTag, PageBody, PageHeader },
  data() {
    return {
      testDetail: { detail: [] },
      testDetailLoading: false
    };
  },
  mixins: [timeMixins],
  mounted() {
    const { unitTestId } = this.$route.params;
    this.testDetailLoading = true;
    getUnitTestDetail(unitTestId).then(value => {
      this.testDetail = value.data;
      this.testDetailLoading = false;
    });
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../../assets/scss/app";
.gap-section {
  padding-bottom: $default-margin-between;
}

.gap-section:last-child {
  padding-bottom: 0;
}

.code-section {
  margin: $default-margin-between -#{$default-margin-between} -#{$default-margin-between};
  padding: $default-margin-between;
  background-color: #2d3044;
  color: #cacff1;
}
</style>