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

<template>
  <div>
    <page-header
      :loading="projectListLoading"
      :routes="[{ name: '代码作业', path: 'code' }, { name: '项目列表' }]"
    >
      <template slot="title">
        项目列表
      </template>
      <template slot="content">
        共有 {{ projectList.length }} 个项目
      </template>
    </page-header>
    <page-body>
      <div class="columns is-multiline is-desktop">
        <div v-if="projectListLoading" class="column is-4-desktop">
          <card loading />
        </div>
        <div
          v-else
          :key="item.projectId"
          v-for="item in projectList"
          class="column is-4"
        >
          <router-link :to="`${$route.path}/${item.id}`">
            <card hoverable>{{ item.name }}</card>
          </router-link>
        </div>
      </div>
    </page-body>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getProjectList } from "@/api/codehw";
import Card from "@/components/Card";
import PageHeader from "@/components/PageHeader";
import PageBody from "@/components/PageBody/index";
export default {
  components: {
    PageBody,
    PageHeader,
    Card
  },
  computed: {
    ...mapState({
      course: state => state.course.currentCourse
    })
  },
  data() {
    return {
      projectList: [],
      projectListLoading: false
    };
  },
  async mounted() {
    this.projectListLoading = true;
    const list = await getProjectList(this.$route.params.homeworkId);
    this.projectList = list.data;
    this.projectListLoading = false;
  }
};
</script>

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