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

<template>
  <div>
    <page-header
      :loading="detailLoading"
      :routes="[
        { name: '代码作业', path: 'code' },
        { name: '项目列表', path: `code/${$route.params.homeworkId}` },
        { name: '项目详情' }
      ]"
      :tab-list="[
        {
          name: '构建',
          path: `code/${$route.params.homeworkId}/${$route.params.projectId}`
        },
        {
          name: '部署',
          path: `code/${$route.params.homeworkId}/${
            $route.params.projectId
          }/deploy`
        },
        {
          name: '测试',
          path: `code/${$route.params.homeworkId}/${
            $route.params.projectId
          }/test`
        }
      ]"
    >
      <template slot="title">
        {{ projectDetail.name }}
      </template>
      <template slot="content">
        <strong>git 地址 : </strong>
        <a :href="projectDetail.url" target="_blank">{{ projectDetail.url }}</a>
        <a
          style="margin-left:10px;"
          class="button is-small"
          v-clipboard:copy="projectDetail.url"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          >复制地址</a
        >
      </template>
    </page-header>
    <page-body>
      <router-view
        :project-detail="projectDetail"
        :detail-loading="detailLoading"
      />
    </page-body>
  </div>
</template>

<script>
import { getProjectDetail } from "@/api/codehw";
import PageHeader from "@/components/PageHeader";
import PageBody from "@/components/PageBody/index";
export default {
  components: {
    PageBody,
    PageHeader
  },
  data() {
    return {
      projectDetail: {},
      detailLoading: false
    };
  },
  methods: {
    onCopy() {
      this.$toast.open({
        message: "复制成功",
        type: "is-success"
      });
    },
    onError() {
      this.$toast.open({
        message: "复制失败",
        type: "is-danger"
      });
    }
  },
  async mounted() {
    const { projectId } = this.$route.params;
    this.detailLoading = true;
    const detail = await getProjectDetail(projectId);
    this.projectDetail = detail.data;
    this.detailLoading = false;
  }
};
</script>

<style lang="scss" scoped>
.top-nav-section {
  padding: 0 40px;
}
</style>