作业设计--常规作业

src/renderer/src/components/FileUpload/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      ref="fileUpload"
+      multiple
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :limit="limit"
+      :on-progress="handlePPTUploadProgress"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+    >
+      <!-- 上传按钮 -->
+      <el-button type="primary">选取文件</el-button>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      的文件
+    </div>
+    <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ file.name }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, nextTick,computed, watch, getCurrentInstance } from 'vue'
+import { getToken } from "@/utils/auth";
+
+const props = defineProps({
+  modelValue: [String, Object, Array],
+  // 数量限制
+  limit: {
+    type: Number,
+    default: 5,
+  },
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5,
+  },
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: {
+    type: Array,
+    default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+  },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const number = ref(0);
+const uploadList = ref([]);
+const baseUrl = import.meta.env.VITE_APP_BASE_API; 
+// const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址 
+const uploadFileUrl = ref("http://27.128.240.72:7865/dev-api/common/upload"); // 上传文件服务器地址 
+const headers = ref({ Authorization: "Bearer " + getToken() });
+const fileList = ref([]);
+const showTip = computed(
+  () => props.isShowTip && (props.fileType || props.fileSize)
+);
+console.log("uploadFileUrl", uploadFileUrl);
+watch(() => props.modelValue, val => {
+  if (val) {
+    let temp = 1;
+    // 首先将值转为数组
+    const list = Array.isArray(val) ? val : props.modelValue.split(',');
+    // 然后将数组转为对象数组
+    fileList.value = list.map(item => {
+      if (typeof item === "string") {
+        item = { name: item, url: item };
+      }
+      item.uid = item.uid || new Date().getTime() + temp++;
+      return item;
+    });
+  } else {
+    fileList.value = [];
+    return [];
+  }
+},{ deep: true, immediate: true });
+
+// 上传前校检格式和大小
+const handleBeforeUpload = (file) =>{
+  // 校检文件类型
+  if (props.fileType.length) {
+    const fileName = file.name.split('.');
+    const fileExt = fileName[fileName.length - 1];
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+    if (!isTypeOk) {
+      proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
+      return false;
+    }
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  console.log('正在上传文件，请稍候……');
+  proxy.$modal.loading("正在上传文件，请稍候...");
+  number.value++;
+  return true;
+}
+
+// 文件个数超出
+function handleExceed() {
+  console.log('文件个数超出');
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+}
+/**文件上传中处理 */
+const handlePPTUploadProgress = (event, file, fileList) =>{
+  // this.uploadPPT.isUploading = true;
+  console.log('文件上传中'+file);
+};
+
+// 上传失败
+function handleUploadError(err) {
+  console.log('上传失败');
+  proxy.$modal.msgError("上传文件失败");
+}
+
+// 上传成功回调
+function handleUploadSuccess(res, file) {
+  console.log('上传成功');
+  if (res.code === 200) {
+    uploadList.value.push({ name: res.fileName, url: res.url });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy.$modal.closeLoading();
+    proxy.$modal.msgError(res.msg);
+    proxy.$refs.fileUpload.handleRemove(file);
+    uploadedSuccessfully();
+  }
+}
+
+// 删除文件
+function handleDelete(index) {
+  fileList.value.splice(index, 1);
+  emit("update:modelValue", fileList.value);
+}
+
+// 上传结束处理
+function uploadedSuccessfully() {
+  console.log('上传结束'+ number.value);
+  console.log('上传结束uploadList.value.length'+ uploadList.value.length);
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit("update:modelValue", fileList.value);
+    proxy.$modal.closeLoading();
+  }
+}
+
+// 获取文件名称
+function getFileName(name) {
+  if (name.lastIndexOf("/") > -1) {
+    return name.slice(name.lastIndexOf("/") + 1);
+  } else {
+    return "";
+  }
+}
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+  let strs = "";
+  separator = separator || ",";
+  for (let i in list) {
+    if (list[i].url) {
+      strs += list[i].url + separator;
+    }
+  }
+  return strs != '' ? strs.substr(0, strs.length - 1) : '';
+}
+</script>
+
+<style scoped lang="scss">
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+  padding-left: 10px;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

src/renderer/src/views/classTask/classTask.vue

@@ -325,7 +325,7 @@ const escapeHtmlQuotes = (str) => {
   // 后端已replace双引号, 故前端不用在处理
   const regex1 = /\\+/g;  // 匹配多个反斜杠
   let result = str.replace(regex1, '\\');
-
+  result = str.replace(/(?<!\\)\n/g, '<br />');    //替换\n而不替换\\n 为 \\n
   return result;
 }
 const pollingST = ref(null) //轮询定时器标识

src/renderer/src/views/classTask/container/item-dialog-score.vue

@@ -88,8 +88,11 @@
                       <el-col :span="6" style="padding: 10px">
                         <!-- <span>学生答案：{{ stuItem.feedcontent }}</span> -->
                         <span>学生答案：
-                          <span v-if="stuItem.feedcontent !=''" style="background-color: red; color: white; padding: 0 5px; border-radius: 5px;">
+                          <span 
-                            {{ formatFeedContent(stuItem, quItem) }} 
+                            v-if="stuItem.feedcontent !=''" 
+                            style="background-color: red; color: white; padding: 0 5px; border-radius: 5px;"
+                            v-html="formatFeedContent(stuItem, quItem)"
+                          >
                           </span>
                         </span>
                       </el-col>

src/renderer/src/views/classTask/container/item-dialog.vue

@@ -443,6 +443,9 @@ const getStudentClassWorkDataDetail = (row) => {
           // <el-table-column label="参考答案" prop="rightanswer"
           //新增了 复合题、主观题（背景+小题目） 题目标题优化一下
           wevalres.rows[w].worktitle = wevalres.rows[w].worktitle.replace(/!@#\$%/g, '')
+
+          // 将feedcontent中的\r替换为<br />
+          wevalres.rows[w].feedcontent = wevalres.rows[w].feedcontent.replace(/(?<!\\)\n/g, '<br />');    //替换\n而不替换\\n 为 \\n
         }
       }
       classWorkAnalysis.activeStudentQuizlist = wevalres.rows
@@ -523,6 +526,7 @@ const escapeHtmlQuotes = (str) => {
   // 后端已replace双引号, 故前端不用在处理
   const regex1 = /\\+/g;  // 匹配多个反斜杠
   let result = str.replace(regex1, '\\');
+  result = str.replace(/(?<!\\)\n/g, '<br />');    //替换\n而不替换\\n 为 \\n
 
   return result;
 }

src/renderer/src/views/classTask/container/newTask/taskTypeView.vue

@@ -140,63 +140,13 @@
                         </div>
                       </template>
                     </template>
-                    <!-- <template v-if="classWorkForm.worktype =='常规作业'">
+                    <template v-if="classWorkForm.worktype =='常规作业'">
-                      <div class="upload-homework" v-loading="fileLoading">
+                      <div v-loading="fileLoading" class="upload-homework">
                         <FileUpload v-model="fileHomeworkList" :fileSize="800" :fileType="['mp3','mp4','doc','docx','xlsx','xls','pdf','ppt','pptx','jpg','jpeg','gif','png','txt']"/>
                       </div>
-                    </template> -->
-                  </div>
-                </div>
-                <!-- <div v-if="classWorkForm.activeIndex==3">
-                  <el-row>
-                    <el-col :span="20">
-                      <el-form-item label="查找筛选条件">
-                        本节课、本单元，其他单元
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="4" style="text-align: right;">
-                      <el-button @click="handleQueryFromEntpCourseWork" icon="Search">更多</el-button>
-                    </el-col>
-                  </el-row>
-                  <div :style="{ 'overflow': 'auto'}">
-                    <template v-for="(item, index) in workResource.classWorkList" :key="item.id">
-                      <template v-if="item.classid > 0">
-                        <div style="margin-bottom: 30px; padding-left: 15px">
-                          <div style="font-size: 1.2em; font-weight: bold">{{ item.worktype }}</div>
-                          <div style="display: flex; justify-content: space-between;">
-                            <div style="color: silver; display: flex">
-                              <el-image :src="item.edituserheadimgurl" style="height: 30px; width: 30px; border-radius: 50%;"></el-image>
-                              <div style="margin-top: 5px; margin-left: 10px">{{ item.editusername }} 来自{{ item.parententpname }} {{ item.entpname }}</div>
-                            </div>
-                            <div style="color: silver; margin-right: 15px; padding-top: 5px">{{item.workdate}}</div>
-                          </div>
-                          <div style="font-size: 1em; margin-top: 10px; margin-bottom: 10px; display: flex">
-                            <div style="max-width: 100%;word-wrap: break-word;">{{ item.workcontent }}</div>
-                            <div v-if="item.entpcourseworklistarray.length>0" style="margin-top: -5px; margin-left: 15px">
-                              <el-button v-if="item.expanded==false" style="margin-right: 4px" @click="handleClassWorkResNodeClick(index)">展开</el-button>
-                              <el-button v-if="item.expanded==true" @click="handleClassWorkResNodeClick(index)">缩回</el-button>
-                            </div>
-                          </div>
-                        </div>
-                        <template v-if="item.expanded == true">
-                          <template v-for="(qitem, qindex) in item.quizlist" :key="qitem.id">
-                            <el-row style="margin-bottom: 20px; border: 1px dotted; padding: 20px" >
-                              <el-col :span="22">
-                                <div v-html="qitem.titleFormat" style="overflow: hidden; text-overflow: ellipsis"></div>
-                                <div v-html="qitem.workdescFormat" style="overflow: hidden; text-overflow: ellipsis; margin-top: 6px;"></div>
-                              </el-col>
-                              <el-col :span="2"><el-button type="primary" @click="handleClassWorkQuizAdd('classworklist', qitem.id)"><el-icon><CirclePlus /></el-icon> 添加</el-button></el-col>
-                            </el-row>
-                          </template>
-                        </template>
-                        <div style="display: flex; justify-content: end; margin-left: 15px; margin-right: 15px">
-                          <el-button @click="handleClassWorkPackAdd(index)" icon="FolderAdd">添加到作业</el-button>
-                        </div>
-                        <el-divider />
-                      </template>
                     </template>
                   </div>
-                </div> -->
+                </div>
               </el-col>
 
               <!-- 右侧选中的作业资源 -->
@@ -295,6 +245,7 @@ import { useGetHomework } from '@/hooks/useGetHomework'
 import { processList } from '@/hooks/useProcessList'
 import { getCurrentTime } from '@/utils/date'
 import FlowChart from "@/components/Flowchart/index.vue";
+import FileUpload from "@/components/FileUpload/index.vue";
 
 
 
@@ -397,14 +348,18 @@ let classWorkForm =  reactive({
 }); // 提交的作业内容
 const chooseWorkLists = ref([]); // 框架梳理、？课堂展示
 const whiteboardObj = ref(''); // 作业资源 - 课堂展示 白板
-// 课堂展示
+// 课堂展示-------
 const boardLoading = ref(false);
 const question = ref(''); // 课堂展示 
 const prevReadMsg = reactive({
   visible: false,
   type: ""
 });// 预览msg
+// 框架梳理----------
 const flowData = ref({})// 框架梳理
+//常规作业----------
+const fileLoading = ref(false); // 常规作业loading
+const fileHomeworkList = ref([]);// 常规作业
 
 /***
  * 作业类型切换
@@ -1073,6 +1028,10 @@ watch(() => props.bookobj.levelSecondId, (newVal) => {
     }
 
   }
+  .upload-homework{
+    padding: 20px;
+    box-sizing: border-box;
+  }
 
 }
 </style>