[新增]老师查看学生文档内容

mock/modules/assignment/index.js

@@ -7,6 +7,7 @@ const DocumentSerializer = require("../../serializers/assignment/DocumentSeriali
 const DocumentResultSerializer = require("../../serializers/assignment/DocumentResultSerializer");
 const codeProcedureSerializer = require("../../serializers/assignment/CodeProcedureSerializer");
 const groupSerializer = require("../../serializers/course/GroupSerializer");
+const DocumentContentSerializer = require("../../serializers/assignment/DocumentContentSerializer");
 
 //新建代码作业
 router.route("/course/:courseId/code").post((req, res) => {
@@ -178,4 +179,11 @@ router.route("/student/document/:documentId/result").get((req, res) => {
   });
 });
 
+router.route("/teacher/document/:documentId/content").get((req, res) => {
+  res.send({
+    code: 0,
+    data: DocumentContentSerializer()
+  });
+});
+
 module.exports = router;

mock/serializers/assignment/DocumentContentSerializer.js

@@ -0,0 +1,18 @@
+const makeId = require("../../util/makeId");
+const groupSerializer = require("../course/GroupSerializer");
+const dayjs = require("dayjs");
+const makeLongMarkdown = require("../../util/makeLongMarkdown");
+
+/**
+ * @description 生成文档作业内容
+ * @returns {DocumentContentSerializerype}
+ */
+module.exports = () => {
+  return {
+    id: makeId(),
+    name: "购物车web项目",
+    group: groupSerializer(),
+    lastUpdateAt: dayjs("2018-10-21").unix(),
+    content: makeLongMarkdown()
+  };
+};

src/api/assignment.js

@@ -258,3 +258,12 @@ export const getUnsubmittedDocGroupsByDocId = documentId => {
     `${ASSIGNMENT_MODULE}/teacher/document/${documentId}/unsubmitted/groups`
   );
 };
+
+/**
+ * 老师查看小组文档作业的内容
+ * @param documentId
+ * @return {Promise<data:DocumentContentSerializerType>}
+ */
+export const getDocContentByDocId = documentId => {
+  return request(`${ASSIGNMENT_MODULE}/teacher/document/${documentId}/content`);
+};

src/views/teacher/Document/docContent.vue

@@ -13,27 +13,89 @@
       <template slot="title">
         文档内容
       </template>
+      <template slot="content">
+        题目名称：{{ contentResult.name }}
+      </template>
+      <template slot="extraContent">
+        小组成员：<span
+          v-for="member in contentResult.group.members"
+          :key="member.id"
+          >{{ member.username }}&emsp;</span
+        >
+      </template>
     </page-header>
-    <page-body> <div class="data-table">文档内容</div> </page-body>
+    <page-body>
+      <div class="data-table">
+        <div style="text-align: right">
+          上次修改时间：{{ displayUnixTime(contentResult.lastUpdateAt) }}
+        </div>
+        <hr />
+        <div v-if="fetchLoading"><page-section-loading show /></div>
+        <div v-else 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
+    PageHeader,
+    VueMarkdown,
+    PageSectionLoading
   },
   data() {
     return {
-      docId: null
+      docId: null,
+      contentResult: {
+        content: "",
+        group: "",
+        lastUpdateAt: "",
+        name: ""
+      },
+      fetchLoading: false
     };
   },
   created() {
     this.docId = this.$route.query.assignId;
   },
-  mounted() {}
+  mounted() {
+    this.fetchLoading = true;
+    getDocContentByDocId(this.docId).then(res => {
+      this.contentResult = res.data;
+      this.fetchLoading = 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>