优化基础组件

src/api/book.js

@@ -114,7 +114,6 @@ export function GetCoursewareList_Chapter(data) {
  * 保存互动课件内容
  */
 export function SaveCoursewareContent(data) {
-  console.log(data);
   return http.post(`${process.env.VUE_APP_BookWebSI}?MethodName=book-courseware_manager-SaveCoursewareContent`, data);
 }
 

src/views/book/courseware/create/components/base/audio/Audio.vue

@@ -34,10 +34,8 @@ export default {
     };
   },
   methods: {
-    saveDate(file) {
-      this.data.id = this.id;
-      this.data.file_list.push(file);
-      this.data.file_id_list.push(file.file_id);
+    saveDate(content) {
+      if (content) this.data = content;
     },
   },
 };

src/views/book/courseware/create/components/base/common/UploadFile.vue

@@ -21,18 +21,23 @@
     <el-divider />
     <div class="upload-tip">{{ uploadTip }}</div>
     <ul slot="file-list" class="file-list">
-      <li v-for="(file, i) in file_list" :key="i">
+      <li v-for="(file, i) in content.file_list" :key="i">
         <div class="file-name">
           <span>
             <SvgIcon :icon-class="iconClass" size="12" />
             <span>{{ file.file_name ?? file.name }}</span>
             <!-- <span>({{ file.size }})</span> -->
           </span>
-          <span v-show="file.progress > 0"> {{ file.progress }}% </span>
-          <span v-show="file.file_id"> 完成 </span>
+          <span v-if="file.progress > 0 && file.progress < 100"> {{ file.progress }}% </span>
+          <span v-else-if="file.progress === 100 || file.file_id"> 完成 </span>
         </div>
         <SvgIcon icon-class="delete-black" size="12" @click="removeFile(file, i)" />
-        <SvgIcon v-show="moduleData.type == 'picture'" icon-class="mark" size="12" @click="viewDialog(file)" />
+        <SvgIcon
+          v-show="content.type === 'picture' && (file.progress === 100 || file.file_id)"
+          icon-class="mark"
+          size="12"
+          @click="viewDialog(file.file_id)"
+        />
       </li>
     </ul>
 
@@ -44,7 +49,6 @@
 import { fileUpload } from '@/api/app';
 import { conversionSize } from '@/utils/common';
 import FillDescribe from '../../common/FillDescribe';
-import { GetCoursewareComponentContent_View } from '@/api/book';
 
 export default {
   name: 'UploadFile',
@@ -91,35 +95,29 @@ export default {
     return {
       curFile: null,
       conversionSize,
-      file_id_list: [],
-      file_list: [],
       visible: false,
+      content: {},
     };
   },
   computed: {},
-  watch: {},
-  created() {
-    this.getCoursewareComponentContent_View();
+  watch: {
+    moduleData: {
+      handler(val) {
+        this.content = val;
+        this.$emit('saveDate', this.content);
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   methods: {
-    // 获取数据
-    getCoursewareComponentContent_View() {
-      GetCoursewareComponentContent_View({ courseware_id: this.coursewareId, component_id: this.componentId }).then(
-        ({ content }) => {
-          if (content) this.file_list = JSON.parse(content).file_list;
-        },
-      );
-    },
-
     // 显示自定义样式文件列表
     onFileChange(file, fileList) {
       this.afterSelectFile(file);
       fileList.forEach((file) => {
         if (!file.progress || file.progress <= 0) file.progress = 0;
-        if (!file.title) file.title = '';
-        if (!file.describe) file.describe = '';
       });
-      this.file_list.push(file);
+      this.content.file_list.push(file);
     },
 
     // 删除文件
@@ -131,10 +129,8 @@ export default {
       })
         .then(() => {
           this.$refs.upload.handleRemove(file);
-          if (this.file_list[i].file_id) {
-            this.file_list.splice(i, 1);
-            this.file_id_list.splice(i, 1);
-          }
+          this.content.file_list.splice(i, 1);
+          this.content.file_id_list.splice(i, 1);
         })
         .catch(() => {});
     },
@@ -142,10 +138,9 @@ export default {
     // 文件校验
     afterSelectFile(file) {
       const fileName = file.name;
-      console.log(this.moduleData.single_size);
-      let singleSizeTip = `文件[${fileName}]大小超过 ${conversionSize(this.moduleData.single_size)},被移除！`;
+      let singleSizeTip = `文件[${fileName}]大小超过 ${conversionSize(this.content.single_size)},被移除！`;
 
-      if (file.size > this.moduleData.single_size * 1024 * 1024) {
+      if (file.size > this.content.single_size * 1024 * 1024) {
         this.$message.error(singleSizeTip);
         this.$refs.upload.handleRemove(file);
         return false;
@@ -155,10 +150,10 @@ export default {
       let fileType = [];
       let typeTip = '';
 
-      if (this.moduleData.type === 'audio') {
+      if (this.content.type === 'audio') {
         fileType = ['mp3', 'acc', 'wma'];
         typeTip = '音频文件只能是 mp3、acc、wma 格式!';
-      } else if (this.moduleData.type === 'picture') {
+      } else if (this.content.type === 'picture') {
         fileType = ['jpg', 'png', 'jpeg'];
         typeTip = '图片文件只能是 jpg、png、jpeg 格式!';
       }
@@ -173,14 +168,14 @@ export default {
 
     // 上传文件
     uploadFiles() {
-      const files = (this.file_list || []).filter((file) => file.uid);
+      const files = (this.content.file_list || []).filter((file) => file.uid);
       if (files.length <= 0) {
         this.$message.error('没有需要上传的文件！');
         return false;
       }
       const totalSize = files.reduce((sum, cur) => sum + Number(cur.size || 0), 0);
-      if (totalSize > this.moduleData.total_size * 1024 * 1024) {
-        this.$message.error(`文件总大小不能超过${conversionSize(this.moduleData.total_size)}!`);
+      if (totalSize > this.content.total_size * 1024 * 1024) {
+        this.$message.error(`文件总大小不能超过${conversionSize(this.content.total_size)}!`);
         return false;
       }
 
@@ -190,32 +185,44 @@ export default {
         fileUpload('Mid', form, {
           handleUploadProgress: (progressEvent) => {
             let per = Number((progressEvent.progress * 100).toFixed(2) || 0);
-            let en = this.file_list.find((p) => p.uid === file.uid);
+            let en = this.content.file_list.find((p) => p.uid === file.uid);
             if (en) {
               en.progress = per;
               this.$forceUpdate();
             }
           },
         }).then(({ file_info_list }) => {
-          let file_index = this.file_list.findIndex((p) => p.uid === file.uid);
+          let file_index = this.content.file_list.findIndex((p) => p.uid === file.uid);
           if (file_index > -1) {
-            this.file_list[file_index] = file_info_list[0];
-            this.file_id_list.push(file_info_list[0].file_id);
-            this.$emit('saveDate', file_info_list[0]);
+            if (this.content.type === 'picture') {
+              this.content.file_info_list[file_index] = {
+                file_id: file_info_list[0].file_id,
+                file_name: file_info_list[0].file_name,
+                title: '',
+                intro: '',
+              };
+            }
+            this.content.file_list[file_index] = {
+              file_id: file_info_list[0].file_id,
+              file_name: file_info_list[0].file_name,
+              file_url: file_info_list[0].file_url,
+            };
+            this.content.file_id_list.push(file_info_list[0].file_id);
           }
         });
       });
     },
 
     // 显示弹窗
-    viewDialog(file) {
-      this.visible = true;
-      this.curFile = file;
+    viewDialog(file_id) {
+      if (file_id) this.visible = true;
+      this.curFile = this.content.file_info_list.find((file) => file.file_id === file_id);
     },
 
     // 给文件加介绍
     fillDescribeToFile(file) {
-      let en = this.file_list.find((p) => p.uid === file.uid);
+      console.log(file);
+      let en = this.content.file_info_list.find((p) => p.file_id === file.file_id);
       if (en) {
         Object.assign(en, file);
       }

src/views/book/courseware/create/components/base/picture/Picture.vue

@@ -35,11 +35,8 @@ export default {
   },
   computed: {},
   methods: {
-    saveDate(file) {
-      console.log('图片', this.data);
-      this.data.id = this.id;
-      this.data.file_list.push(file);
-      this.data.file_id_list.push(file.file_id);
+    saveDate(content) {
+      if (content) this.data = content;
     },
   },
 };

src/views/book/courseware/create/components/common/FillDescribe.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog :visible="visible" width="260px" top="38vh" :show-close="false" @close="dialogClose">
-    <el-input v-model="form.file_title" autocomplete="off" placeholder="标题" />
-    <el-input v-model="form.file_describe" type="textarea" placeholder="介绍" />
+    <el-input v-model="file.title" autocomplete="off" placeholder="标题" />
+    <el-input v-model="file.intro" type="textarea" placeholder="介绍" />
     <template slot="footer">
       <el-button size="medium" @click="dialogClose">取消</el-button>
       <el-button type="primary" size="medium" @click="confirm">确定</el-button>
@@ -24,29 +24,27 @@ export default {
   },
   data() {
     return {
-      form: {
-        uid: '',
-        file_title: '',
-        file_describe: '',
+      file: {
+        title: '',
+        intro: '',
       },
     };
   },
   watch: {
     fileData: {
       handler(val) {
-        Object.assign(this.form, val);
+        Object.assign(this.file, val);
       },
       deep: true,
     },
   },
   methods: {
     dialogClose() {
-      Object.assign(this.form, this.fileData);
       this.$emit('update:visible', false);
     },
     confirm() {
       this.$emit('update:visible', false);
-      this.$emit('fillDescribeToFile', this.form);
+      this.$emit('fillDescribeToFile', this.file);
     },
   },
 };

src/views/book/courseware/create/components/common/ModuleMixin.js

@@ -39,7 +39,12 @@ const mixin = {
   inject: ['courseware_id'],
   created() {
     GetCoursewareComponentContent({ courseware_id: this.courseware_id, component_id: this.id }).then(({ content }) => {
-      if (content) this.data = JSON.parse(content);
+      if (content) {
+        this.$nextTick(() => {
+          // 数据加载完成后的操作
+          this.data = JSON.parse(content);
+        });
+      }
     });
   },
   methods: {
@@ -61,7 +66,6 @@ const mixin = {
       this.componentMove({ ...data, id: this.id });
     },
     saveCoursewareComponentContent() {
-      console.log(JSON.stringify(this.data));
       SaveCoursewareComponentContent({
         courseware_id: this.courseware_id,
         component_id: this.id,

src/views/book/courseware/data/audio.js

@@ -14,6 +14,7 @@ export function getAudioData() {
       sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow 跟随
       view_method: audioViewMethodList[0].value, // 查看方式：independent独立 list列表 icon图标
     },
+    file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']
     // 内容中包含的文件列表,
     file_list: [],

src/views/book/courseware/data/picture.js

@@ -14,6 +14,7 @@ export function getPictureData() {
       sn_generation_method: snGenerationMethodList[0].value, // 序号生成方式：recalculate重新计算 follow跟随
       view_method: viewMethodList[0].value, // 查看方式：independent独立 list列表 icon图标
     },
+    file_info_list: [],
     file_id_list: [], // 文件 id['20032-121212', '20032-121216']
     // 内容中包含的文件列表,
     file_list: [],

src/views/book/courseware/preview/components/audio/Audio.vue

@@ -108,10 +108,8 @@ export default {
     },
     getCoursewareComponentContent_View() {
       GetCoursewareComponentContent_View({ courseware_id: this.coursewareId, component_id: this.componentId }).then(
-        (res) => {
-          this.data = JSON.parse(JSON.parse(res.replace(/\n/g, '').replace(/\t/g, '')).content);
-          // if (content) this.data = JSON.parse(content);
-          // console.log(JSON.parse(content));
+        ({ content }) => {
+          if (content) this.data = JSON.parse(content);
         },
       );
     },