homework paper

src/common/mx-const.js

@@ -123,16 +123,22 @@ export default {
     /// 1:在线作业,2:视频作业,3:试卷作业,4:文字作业
     homeworkTypes: [{
       label: '在线作业',
-      value: 1
+      value: 1,
+      usePaper: true,
     },{
       label: '视频作业',
-      value: 2
+      value: 2,
+      useVideo: true,
     },{
       label: '试卷作业',
-      value: 3
+      value: 3,
+      usePaper: true
     },{
       label: '文字作业',
       value: 4
-    },]
+    },],
+    aliIdType: {
+      AliIdResourcePerson: 5 // 个人资源库收藏
+    }
   }
 }

src/views/questioncenter/components/homework-paper.vue

@@ -0,0 +1,42 @@
+<template>
+  <mx-paper :options="options"></mx-paper>
+</template>
+
+<script>
+import MxPaper from '@/components/MxPaper/mx-paper'
+import PaperMixin from '@/components/MxPaper/mx-paper-mixin'
+import EventBus from '@/components/EventBus'
+
+export default {
+  mixins: [PaperMixin],
+  name: 'homework-paper',
+  components: { MxPaper },
+  props: ['params'],
+  data() {
+    return {
+      overrideOpts: {
+        customScoredAction: true,
+        customCommittedAction: true
+      }
+    }
+  },
+  mounted() {
+    EventBus.instance.$on('customScoredAction', () => this.innerLoadPaper())
+    EventBus.instance.$on('customCommittedAction', () => this.innerLoadPaper())
+    this.innerLoadPaper()
+  },
+  beforeDestroy() {
+    EventBus.instance.$off('customScoredAction')
+    EventBus.instance.$off('customCommittedAction')
+  },
+  methods: {
+    innerLoadPaper() {
+      this.loadPaper(this.params, this.overrideOpts)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/questioncenter/homework.vue

@@ -1,9 +1,37 @@
 <template>
   <div class="app-container">
     <el-card>
-      <dynamic-table :columns="columns" :rows="rows"></dynamic-table>
-      <pagination v-if="total>0" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      <div class="fx-row fx-end-cen mb10">
+        <el-button icon="el-icon-refresh" circle @click="queryParams.pageNum=1,getList()"></el-button>
+      </div>
+      <dynamic-table :columns="columns" :rows="rows">
+        <template #type="{display}">
+          {{ translateType(display) }}
+        </template>
+        <template #status="{row}">
+          {{ row.isDo ? '已完成' : '未完成' }}
+        </template>
+        <template #action="{row}">
+          <el-button v-if="useVideoAction(row)" type="text" icon="el-icon-video-camera"
+                     @click="handleVideo(row)">观看
+          </el-button>
+          <el-button v-if="usePaperAction(row)" type="text" icon="el-icon-edit"
+                     @click="handlePaper(row)">做题
+          </el-button>
+        </template>
+      </dynamic-table>
+      <pagination v-if="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                   @pagination="getList"></pagination>
+      <el-dialog v-if="videoOption.dialogVisible" :visible.sync="videoOption.dialogVisible" :title="videoOption.title"
+                 :close-on-click-modal="false" width="80%" @close="handleVideoClosed">
+        <mx-video :src="videoOption.src" :ali-id-type="videoOption.aliIdType"></mx-video>
+      </el-dialog>
+      <el-drawer v-if="paperOption.dialogVisible" :visible.sync="paperOption.dialogVisible" :title="paperOption.title"
+                 :close-on-click-modal="false" append-to-body size="100%" @close="handlePaperClose">
+        <div class="pl30 pr30">
+          <homework-paper :params="paperOption.params"></homework-paper>
+        </div>
+      </el-drawer>
     </el-card>
   </div>
 </template>
@@ -11,19 +39,44 @@
 <script>
 import DynamicTable from '@/components/dynamic-table/index'
 import { getStudentHomeworks } from '@/api/webApi/homework'
+import consts from '@/common/mx-const'
+import HomeworkPaper from '@/views/questioncenter/components/homework-paper'
 
 export default {
   name: 'homework',
-  components: { DynamicTable },
+  components: { HomeworkPaper, DynamicTable },
   data() {
     return {
       queryParams: {
         pageNum: 1,
         pageSize: 20
       },
-      columns: [],
+      columns: [
+        { prop: 'id', label: 'ID', width: '80px' },
+        { prop: 'type', label: '类型', width: '120px', slotBody: 'type' },
+        { prop: 'createTime', label: '创建时间', width: '180px' },
+        { prop: 'title', label: '标题' },
+        { prop: 'remark', label: '备注' },
+        { prop: 'status', label: '状态', width: '80px', slotBody: 'status' },
+        { prop: 'action', label: '操作', width: '120px', slotBody: 'action' }
+      ],
       rows: [],
-      total: 0
+      total: 0,
+      // dialog video
+      videoOption: {
+        dialogVisible: false,
+        title: '',
+        src: null,
+        aliIdType: consts.enum.aliIdType.AliIdResourcePerson
+      },
+      paperOption: {
+        dialogVisible: false,
+        params: {
+          id: '',
+          type: ''
+        },
+        title: ''
+      }
     }
   },
   mounted() {
@@ -34,6 +87,34 @@ export default {
       const res = await getStudentHomeworks(this.queryParams)
       this.rows = res.rows || res.data
       this.total = res.total || this.rows.length
+    },
+    translateType(type) {
+      const enumType = consts.enum.homeworkTypes.find(t => t.value == type)
+      return enumType?.label || type
+    },
+    usePaperAction(row) {
+      return consts.enum.homeworkTypes.find(t => t.value == row.type)?.usePaper
+    },
+    useVideoAction(row) {
+      return consts.enum.homeworkTypes.find(t => t.value == row.type)?.useVideo
+    },
+    handleVideo(row) {
+      this.videoOption.src = row.content
+      this.videoOption.title = row.title
+      this.videoOption.dialogVisible = true
+    },
+    handleVideoClosed() {
+      // 稍等，先让视频观看记录自动提交，再触发刷新，以获取到新的作业完成状态
+      setTimeout(() => this.getList(), 200)
+    },
+    handlePaper(row) {
+      this.paperOption.params.id = row.id
+      this.paperOption.params.type = row.type
+      this.paperOption.title = this.translateType(row.type)
+      this.paperOption.dialogVisible = true
+    },
+    handlePaperClose() {
+      setTimeout(() => this.getList(), 200)
     }
   }
 }