SEEC-II-FrontEnd/src/views/student/Code/ProjectDetail/Test/FunctionalTestDetail.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.passAll" />
      </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 class="gap-section">
          <div class="page-section">
            <a class="button is-small is-info" @click="showLog = !showLog">{{
              showLog ? "收起控制台信息" : "查看控制台输出"
            }}</a>
            <div class="console-section" v-if="showLog">
              {{ testDetail.consoleOutput }}
            </div>
          </div>
        </div>
        <div
          v-for="item in testDetail.detail"
          :key="item.id"
          class="gap-section"
        >
          <div class="page-section">
            <div>
              <pass-tag :pass="item.pass" />
              <strong style="padding-left: 10px">
                页面测试用例 : #{{ item.id }}
              </strong>
            </div>
            <div v-if="!item.pass" class="code-section">
              {{ item.message }} <br />
            </div>
          </div>
        </div>
      </div>
    </page-body>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader";
import PageBody from "@/components/PageBody/index";
import { getFunctionalDetail } 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,
      showLog: false
    };
  },
  mixins: [timeMixins],
  mounted() {
    const { functionalTestId } = this.$route.params;
    this.testDetailLoading = true;
    getFunctionalDetail(functionalTestId).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;
}

.console-section {
  padding: $default-margin-between $default-margin-between * 1.5;
  background-color: #2d3044;
  color: #cacff1;
  white-space: pre-line;
}
</style>