作业布置：新增常规作业列表详情预览

2024-10-15 11:08:23 +08:00 · 2024-10-15 11:08:23 +08:00 · 5b818d2dd8
parent b0415ecafa
commit 5b818d2dd8
7 changed files with 264 additions and 12 deletions
--- a/src/renderer/src/views/classTask/classTask.vue
+++ b/src/renderer/src/views/classTask/classTask.vue
@ -60,7 +60,7 @@
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { listByDeadDate, listClassworkdata, listClassworkdataNew } from '@/api/classTask'

-import TaskItem from '@/views/classTask/container/task-item.vue'
+import TaskItem from '@/views/classTask/container/classTask/task-item.vue'
 // import ItemDialog from '@/views/classTask/container/item-dialog.vue'
 import { useToolState } from '@/store/modules/tool'
 import { getCurrentTime, getTomorrow } from '@/utils/date'
--- a/src/renderer/src/views/classTask/classTaskAssign.vue
+++ b/src/renderer/src/views/classTask/classTaskAssign.vue
@ -125,7 +125,7 @@
            </el-table-column>
          </el-table>
        </div>
-
+        <!-- 框架梳理 -->
        <div v-if="currentTag=='框架梳理'" :style="{'padding': '15px', 'overflow': 'auto'}">
          <div style="margin: 5px; background-color: white">
            <template v-for="(_item,index) in workConfObj.chooseWorkLists" :key="index">
@ -142,6 +142,58 @@
          </div>
        </div>
        <!-- TODO 课堂展示 、常规作业 预览待开发-->
+        <!-- 常规作业：包含多个格式（图片略缩图展示，点击放大；其他附件跳转另外弹窗查看） -->
+        <div v-if="currentTag=='常规作业'" :style="{'padding': '15px', 'overflow': 'auto'}">
+          <div style="margin: 5px; background-color: white">
+            <div v-if="workConfObj.teacherFeedContentList.length > 0">
+              <div class="image_list">
+                <div v-if="workConfObj.teachImageList.length > 0">
+                  <div style="margin-bottom: 5px;text-align: left;">
+                    <span style="color: red">温馨提示：点击图片可放大预览 </span>
+                  </div>
+                  <div style="display: flex; flex-wrap: nowrap; flex-direction: row;">
+                    <div v-for="(imageItem, index) in workConfObj.teachImageList" :key="index" style="margin: 0 15px;">
+                      <el-image
+                        style="width: 100px; height: 100px"
+                        :src="imageItem.url"
+                        :zoom-rate="1.2"
+                        :max-scale="7"
+                        :min-scale="0.2"
+                        :preview-src-list="
+                          workConfObj.teachImageList
+                            .filter(
+                              (item) =>
+                                item.name.indexOf('jpg') > -1 ||
+                                item.name.indexOf('jpeg') > -1 ||
+                                item.name.indexOf('png') > -1
+                            )
+                            .map((item) => item.url)
+                        "
+                        :initial-index="4"
+                        fit="contain"
+                      />
+                    </div>
+                    <!-- 其他类型附件 -->
+                    <div v-if="workConfObj.teachFileList.length > 0">
+                      <div style="margin: 10px 0;text-align: left; margin: auto 0; cursor: pointer;">
+                        <span style="color: #409eff" @click="openFile">预览其他类型附件！</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-else> 
+                  <div v-if="workConfObj.teachFileList.length > 0">
+                    <div style="margin: 10px 0;text-align: left; margin: auto 0; cursor: pointer;">
+                      <span style="color: #409eff" @click="openFile">预览其他类型附件！</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+

        <div slot="footer" class="dialog-footer" style="text-align: right; margin-top: 20px;">
          <div style="display: flex">
@ -244,6 +296,9 @@

      <!-- 预览框 -->
      <prevReadMsgDialog ref="prevReadMsgDialogRef" :bookobj="courseObj"/>
+      <!-- 其他附件预览框 acceptParams-->
+      <prevReadImgFileDialog ref="prevReadImgFileDialogRef"/>
+      
    </div>
  </div>
 </template>
@ -263,6 +318,7 @@ import { processList } from '@/hooks/useProcessList'
 import { uniqBy, groupBy } from 'lodash'
 import { getCurrentTime } from '@/utils/date'
 import prevReadMsgDialog from '@/views/classTask/container/newTask/prevReadMsg-Dialog.vue'
+import prevReadImgFileDialog from '@/views/classTask/container/classTask/prevReadImgFileDialog.vue'

 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore().user
@ -281,6 +337,7 @@ const props = defineProps({

 const isCollapse = ref(false)
 const prevReadMsgDialogRef = ref(null);// 预览框ref
+const prevReadImgFileDialogRef = ref(null);// 其他附件类型预览框ref

 const courseObj = reactive({
  // 课程相关参数: 教材id,单元id,章节id,课程名称
@ -308,6 +365,9 @@ const currentTag = ref('');// 当前作业类型
 const workConfObj = reactive({
  quizlist: [], // 习题list
  chooseWorkLists: [], // 框架梳理
+  teacherFeedContentList: [],//常规作业
+  teachFileList: [], // 常规作业文件list
+  teachImageList: [],// 常规作业图片list
 });

 // 推送相关
@ -514,7 +574,6 @@ let classtaskObj = reactive({
  // this.attainmentList = row.workcodesList?.attlist;
  // this.courseQualityList = row.workcodesList?.qualist;
  if (row.worktype == '框架梳理') {
-    //TODO 待完善 框架梳理 详情
    //包含 entpcourseworklistarray 内容
    var listCourseWork = [];
    for (var i=0; i < row.entpcourseworklistarray.length; i++) {
@ -573,20 +632,23 @@ let classtaskObj = reactive({
    })
  }

-  //TODO 待完善 常规作业、课堂展示
-  if(row.worktype == '常规作业' || row.worktype == '课堂展示'){
-    console.log(row,'常规作业-课堂展示');
-      // 老师布置的附件 workcodes ？？ 与批改哪里这个字段值不一样
+  //TODO 待完善 课堂展示
+  if(row.worktype == '常规作业'){
+    console.log(row,'常规作业');
+    workConfObj.teacherFeedContentList = [];
+    workConfObj.teachImageList = [];
+    workConfObj.teachFileList = [];
+
    if(row.workcodes != ''){
      const teachWorkFileList = JSON.parse(row.workcodes);
      teachWorkFileList&&teachWorkFileList.forEach(item => {
        if(item.name.indexOf('jpg') > -1 || item.name.indexOf('jpeg') > -1 || item.name.indexOf('png') > -1){
-          this.teachImageList.push(item);
+          workConfObj.teachImageList.push(item);
        }else{
-          this.teachFileList.push(item);
+          workConfObj.teachFileList.push(item);
        }
      })
-      this.teacherFeedContentList.push(teachWorkFileList);
+      workConfObj.teacherFeedContentList.push(teachWorkFileList);
    }
  }
 };
@ -1072,6 +1134,17 @@ const handleNewClassWorkDialog = () => {
 const prevRead = (item) => {
  proxy.$refs.prevReadMsgDialogRef.openDialog(item);
 }
+/**
+ * 常规作业：其他附件预览
+ */
+const openFile = () => {
+  const obj = {
+    teacherFeedContentList: workConfObj.teacherFeedContentList,//常规作业
+    teachFileList: workConfObj.teachFileList, // 常规作业文件list
+    teachImageList: workConfObj.teachImageList,// 常规作业图片list
+  }
+  proxy.$refs.prevReadImgFileDialogRef.acceptParams(obj);
+}

 // 作业说明编辑-确认
 const submitWorkTitle = () => {
--- a/src/renderer/src/views/classTask/container/classTask/item-dialog-score.vue
+++ b/src/renderer/src/views/classTask/container/classTask/item-dialog-score.vue
--- a/src/renderer/src/views/classTask/container/classTask/prevReadImgFileDialog.vue
+++ b/src/renderer/src/views/classTask/container/classTask/prevReadImgFileDialog.vue
@ -0,0 +1,179 @@
+<template>
+  <el-dialog
+    v-model="fileReadopen"
+    title="文件预览"
+    width="80%"
+    :style="{ height: '72vh' }"
+    append-to-body
+  >
+    <div class="file-read-dialog">
+      <div>
+        <!-- 老师附件 -->
+        <div v-if="teachFileList.length > 0">
+          <el-card style="max-width: 480px">
+            <template #header>
+              <div class="card-header">
+                <span>文件列表</span>
+              </div>
+            </template>
+            <div
+              v-for="item in teachFileList"
+              :key="item"
+              style="margin: 10px; display: flex; align-items: center"
+            >
+              <span style="margin-right: 10px">{{ item.name }}</span>
+              <el-button type="primary" @click="onFileRead(item)">预览</el-button>
+            </div>
+          </el-card>
+        </div>
+      </div>
+      <div style="width: 100%" :style="{ height: '72vh' }">
+        <div style="margin-left: 10px">
+          预览展示区域<span style="color: red; margin-left: 10px">
+            温馨提示：若预览失败，<span style="margin-left: 10px">{{ props.name }}</span
+            >可点击此处<a
+              :href="fileitem.url ? fileitem.url : ''"
+              target="_blank"
+              style="color: blue"
+              >下载！</a
+            ></span
+          >
+        </div>
+        <ReFilePreview
+          :name="fileitem.name"
+          :type="fileitem.type"
+          :file-type="fileitem.type"
+          :file-path="fileitem.url"
+          :text-content="textContent"
+        />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup name="prevReadImgFileDialogRef">
+import { ref, reactive } from 'vue'
+import ReFilePreview from '@/components/refile-preview/index.vue'
+
+const props = defineProps({})
+
+const fileReadopen = ref(false)
+
+// 老师常规作业、课堂展示布置题目附件list
+const teacherFeedContentList = ref([])
+const teachImageList = ref([])
+const teachFileList = ref([])
+
+
+// 确定的线上图片数据
+//#region 文件内容相关
+const fileitem = reactive({
+  name: '',
+  type: '',
+  url: ''
+})
+// 文件预览
+const onFileRead = (file) => {
+  textContent.value = '1'
+  //
+  fileitem.type = file.name.split('.').pop().toLowerCase()
+  fileitem.url = file.url
+  fileitem.name = file.name
+
+  // txt 读取
+  if (fileitem.type == 'txt') {
+    loadFileTextContent(fileitem.url)
+  }
+}
+
+// txt文件读取
+const textContent = ref('')
+const loadFileTextContent = async (url) => {
+  try {
+    const response = await fetch(url)
+    if (!response.ok) {
+      textContent.value = '文件读取失败,您可以点击上方链接跳到另外页面查看'
+      throw new Error('文件读取失败')
+    }
+    textContent.value = await response.text()
+  } catch (error) {
+    console.error('读取文件时出错:', error)
+    textContent.value = '文件读取失败,您可以点击上方链接跳到另外页面查看'
+  }
+}
+
+
+
+// 接收父组件传过来的参数
+const acceptParams = (params) => {
+  console.log(params)
+  fileReadopen.value = true;
+  teacherFeedContentList.value = params.teacherFeedContentList
+  teachImageList.value = params.teachImageList
+  teachFileList.value = params.teachFileList
+}
+
+
+
+
+// 初始化请求
+// onMounted(() => {})
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+  acceptParams
+})
+</script>
+
+<style scoped>
+
+
+.card-header{
+  text-align: left;
+}
+
+.image_list {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+}
+.file-read-dialog {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.score-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* margin-bottom: 20px; */
+}
+
+.score-circle {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: pink;
+  color: red;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  margin: 0 10px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.score-circle.active {
+  background-color: red;
+  color: white;
+}
+
+.card-header{
+  align-items: left;
+}
+</style>
--- a/src/renderer/src/views/classTask/container/classTask/task-item.vue
+++ b/src/renderer/src/views/classTask/container/classTask/task-item.vue
--- a/src/renderer/src/views/classTask/container/item-dialog.vue
+++ b/src/renderer/src/views/classTask/container/item-dialog.vue
@ -167,7 +167,7 @@ import useUserStore from '@/store/modules/user'
 import { ElMessage } from 'element-plus'
 import { getCurrentTime, getAfterMinutes } from '@/utils/date'
 import { processList } from '@/hooks/useProcessList'
-import ItemDialogScore from '@/views/classTask/container/item-dialog-score.vue'
+import ItemDialogScore from '@/views/classTask/container/classTask/item-dialog-score.vue'
 // zdg: 组件导入
 import quizStats from '@/views/classTask/container/quizStats.vue'
 import ClassOverview from '@/views/classTask/container/classOverview.vue'
--- a/src/renderer/src/views/classTask/teachClassTask.vue
+++ b/src/renderer/src/views/classTask/teachClassTask.vue
@ -152,7 +152,7 @@ import useUserStore from '@/store/modules/user'
 import { ElMessage } from 'element-plus'
 import { getCurrentTime, getAfterMinutes } from '@/utils/date'
 import { processList } from '@/hooks/useProcessList'
-import ItemDialogScore from '@/views/classTask/container/item-dialog-score.vue'
+import ItemDialogScore from '@/views/classTask/container/classTask/item-dialog-score.vue'
 // zdg: 组件导入
 import quizStats from '@/views/classTask/container/quizStats.vue'
 import ClassOverview from '@/views/classTask/container/classOverview.vue'