SEEC-II-FrontEnd/src/views/teacher/Document/docContent.vue

<template>
  <div>
    <page-header
      :loading="loadingDocContent"
      :routes="[
        { name: '文档作业', path: 'document' },
        {
          name: `作业详情`,
          path: `document/${docId}`
        },
        { name: `文档内容`, path: `${$route.path}` }
      ]"
    >
      <template slot="title">
        文档内容
      </template>
      <template slot="content">
        题目名称：{{ contentResult.name }} <br />
        <br />
        小组成员：<span
          v-for="member in contentResult.group.members"
          :key="member.id"
          >{{ member.username }}&emsp;</span
        >
      </template>
      <template slot="extraContent">
        上次修改时间：{{ displayUnixTime(contentResult.lastUpdateAt) }}
      </template>
    </page-header>
    <page-body>
      <div class="data-table">
        <page-section-loading :show="loadingDocContent" />
        <div v-if="!loadingDocContent" class="page-section">
          <div v-if="contentResult.content" class="content">
            <vue-markdown>{{ contentResult.content }}</vue-markdown>
          </div>
        </div>
      </div>
    </page-body>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader";
import PageBody from "@/components/PageBody/index";
import { getDocContentByDocId } from "@/api/assignment";
import VueMarkdown from "vue-markdown";
import PageSectionLoading from "@/components/PageBody/PageSectionLoading/index";
import timeMixins from "@/mixins/time";
export default {
  mixins: [timeMixins],
  components: {
    PageBody,
    PageHeader,
    VueMarkdown,
    PageSectionLoading
  },
  data() {
    return {
      docId: null,
      contentResult: {
        content: "",
        group: "",
        lastUpdateAt: "",
        name: ""
      },
      loadingDocContent: false
    };
  },
  created() {
    this.docId = this.$route.query.assignId;
  },
  mounted() {
    this.loadingDocContent = true;
    getDocContentByDocId(this.docId).then(res => {
      this.contentResult = res.data;
      this.loadingDocContent = false;
    });
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/scss/app";
.right-part {
  margin-bottom: -1.5rem;
  margin-right: -1.5rem;
  background: white;
  border-top: 1px solid #eff2f7;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  box-shadow: $default-shadow;
}

.action-button {
  width: 100%;
  border-radius: 0;
}
</style>