Merge branch 'master' of http://60.205.254.193:3000/GCLS/GCLS_Page_Textbook

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

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

@@ -55,6 +55,7 @@ export default {
   components: {
     FillDescribe,
   },
+  inject: ['property'],
   props: {
     // 课件id
     coursewareId: {
@@ -130,15 +131,18 @@ export default {
       },
       deep: true,
     },
-    fileList: {
+    property: {
       handler(val) {
-        this.content = {
-          file_list: val,
-          file_id_list: this.fileIdList,
-          file_info_list: this.fileInfoList,
-        };
+        if (val.isGetContent) {
+          this.content = {
+            file_list: this.fileList,
+            file_id_list: this.fileIdList,
+            file_info_list: this.fileInfoList,
+          };
+        }
       },
       deep: true,
+      immediate: true,
     },
   },
   methods: {

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

@@ -9,6 +9,9 @@ const mixin = {
       snGenerationMethodList,
       viewMethodList,
       audioViewMethodList,
+      property: {
+        isGetContent: false, // 是否已获取内容
+      },
     };
   },
   props: {
@@ -34,16 +37,15 @@ const mixin = {
       id: this.id,
       deleteComponent: this.deleteComponent,
       handleComponentMove: this.handleComponentMove,
+      property: this.property,
     };
   },
   inject: ['courseware_id'],
   created() {
     GetCoursewareComponentContent({ courseware_id: this.courseware_id, component_id: this.id }).then(({ content }) => {
       if (content) {
-        this.$nextTick(() => {
-          // 数据加载完成后的操作
-          this.data = JSON.parse(content);
-        });
+        this.data = JSON.parse(content);
+        this.property.isGetContent = true;
       }
     });
   },

src/views/book/courseware/create/components/createCanvas.vue

@@ -227,29 +227,29 @@ export default {
 
         if (type === 'left' && j > 0) {
           const prevGrid = row.width_list[j - 1];
-          const prevWidth = Number(prevGrid.replace('%', ''));
-          const width = Number(row.width_list[j].replace('%', ''));
+          const prevWidth = Number(prevGrid.replace('fr', ''));
+          const width = Number(row.width_list[j].replace('fr', ''));
           const max = prevWidth + width - 10;
           if (prevWidth + offsetX < 10 || prevWidth + offsetX > max || width - offsetX > max || width - offsetX < 10) {
             return;
           }
           // 计算拖动的距离与总宽度的比例
           const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
-          row.width_list[j + 1] = `${prevWidth + ratio}%`;
-          row.width_list[j] = `${width - ratio}%`;
+          row.width_list[j + 1] = `${prevWidth + ratio}fr`;
+          row.width_list[j] = `${width - ratio}fr`;
           this.$forceUpdate();
         }
         if (type === 'right' && j < row.col_list.length - 1) {
           let nextGrid = row.width_list[j + 1];
-          const nextWidth = Number(nextGrid.replace('%', ''));
-          const width = Number(row.width_list[j].replace('%', ''));
+          const nextWidth = Number(nextGrid.replace('fr', ''));
+          const width = Number(row.width_list[j].replace('fr', ''));
           const max = nextWidth + width - 10;
           if (nextWidth - offsetX < 10 || nextWidth - offsetX > max || width + offsetX > max || width + offsetX < 10) {
             return;
           }
           const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
-          row.width_list[j + 1] = `${nextWidth - ratio}%`;
-          row.width_list[j] = `${width + ratio}%`;
+          row.width_list[j + 1] = `${nextWidth - ratio}fr`;
+          row.width_list[j] = `${width + ratio}fr`;
           this.$forceUpdate();
         }
       };
@@ -263,11 +263,11 @@ export default {
       let col = this.data.row_list[i].col_list[j];
       let grid_template_columns = '0';
       col.grid_list.forEach(({ width }, i) => {
-        const w = `calc(${width} - ${(16 * (col.grid_list.length - 1)) / col.grid_list.length}px)`;
+        const w = `${width}`;
         if (i === col.grid_list.length - 1) {
           grid_template_columns += ` ${w} 0`;
         } else {
-          grid_template_columns += ` ${w} 16px`;
+          grid_template_columns += ` ${w} `;
         }
       });
       col.grid_template_columns = grid_template_columns;
@@ -293,7 +293,7 @@ export default {
           const delW = width_list[j];
           width_list.splice(j, 1);
           this.data.row_list[i].width_list = width_list.map((item) => {
-            return `${Number(item.replace('%', '')) + Number(delW.replace('%', '') / width_list.length)}%`;
+            return `${Number(item.replace('fr', '')) + Number(delW.replace('fr', '') / width_list.length)}fr`;
           });
         }
 
@@ -305,7 +305,7 @@ export default {
         // 如果删除后还有 grid 则重新计算 grid 的 row 和 width
         if (gridList?.length > 0) {
           let delNum = gridList.filter(({ row }) => row === delRow).length;
-          let diff = Number(delW.replace('%', '')) / delNum;
+          let diff = Number(delW.replace('fr', '')) / delNum;
           if (delNum === 0) {
             // 删除 grid 后面的 row 都减 1
             gridList.forEach((item) => {
@@ -316,7 +316,7 @@ export default {
           } else {
             gridList.forEach((item) => {
               if (item.row === delRow) {
-                item.width = `${Number(item.width.replace('%', '')) + diff}%`;
+                item.width = `${Number(item.width.replace('fr', '')) + diff}fr`;
               }
             });
           }
@@ -368,10 +368,9 @@ export default {
 
       // 计算 grid_template_columns
       let gridTemCols = '';
-      let rowOneNum = grid.filter((item) => item.row === 1).length;
       grid.forEach((item) => {
         if (item.row === 1) {
-          gridTemCols += `calc(${item.width} - ${((rowOneNum - 1) * 16) / rowOneNum}px) 8px 8px `;
+          gridTemCols += `${item.width} 8px 8px `;
         }
       });
 
@@ -500,12 +499,12 @@ export default {
       let col = row.col_list;
       if (col.length <= 1) {
         return {
-          gridTemplateColumns: '0 100% 0',
+          gridTemplateColumns: '0 100fr 0',
         };
       }
       let str = row.width_list
         .map((item) => {
-          return `calc(${item} - ${(16 * (row.width_list.length - 1)) / row.width_list.length}px)`;
+          return `${item}`;
         })
         .join(' 16px ');
       let gridTemplateColumns = `0 ${str} 0`;
@@ -533,7 +532,7 @@ export default {
         grid.splice(this.curGrid, 0, {
           id,
           grid_area: letter,
-          width: '100%',
+          width: '100fr',
           height: 'auto',
           row: rowNum,
           type: this.curType,
@@ -551,7 +550,7 @@ export default {
         grid.splice(this.curGrid, 0, {
           id,
           grid_area: letter,
-          width: '100%',
+          width: '100fr',
           height: 'auto',
           row: rowNum,
           type: this.curType,
@@ -561,13 +560,13 @@ export default {
         let w = 0;
         grid.forEach((item, i) => {
           if (item.row === rowNum && i !== this.curGrid) {
-            let width = Number(item.width.replace('%', ''));
+            let width = Number(item.width.replace('fr', ''));
             let diff = width / allRowNum;
-            item.width = `${width - diff}%`;
+            item.width = `${width - diff}fr`;
             w += diff;
           }
         });
-        grid[this.curGrid].width = `${w}%`;
+        grid[this.curGrid].width = `${w}fr`;
       }
     },
     /**
@@ -582,22 +581,22 @@ export default {
 
       let w = 0;
       row.width_list.forEach((item, i) => {
-        let itemW = Number(item.replace('%', ''));
+        let itemW = Number(item.replace('fr', ''));
         let rowW = itemW / (row.width_list.length + 1);
         w += rowW;
-        row.width_list[i] = `${itemW - rowW}%`;
+        row.width_list[i] = `${itemW - rowW}fr`;
       });
-      row.width_list.splice(this.curCol, 0, `${w}%`);
+      row.width_list.splice(this.curCol, 0, `${w}fr`);
 
       col.splice(this.curCol, 0, {
-        width: '100%',
+        width: '100fr',
         height: 'auto',
         grid_list: [
           {
             id,
             grid_area: letter,
             row: 1,
-            width: '100%',
+            width: '100fr',
             height: 'auto',
             type: this.curType,
           },
@@ -612,16 +611,16 @@ export default {
       const letter = `L${getRandomNumber(6)}`;
 
       this.data.row_list.splice(this.curRow + 1, 0, {
-        width_list: ['100%'],
+        width_list: ['100fr'],
         col_list: [
           {
-            width: '100%',
+            width: '100fr',
             height: 'auto',
             grid_list: [
               {
                 id,
                 grid_area: letter,
-                width: '100%',
+                width: '100fr',
                 height: 'auto',
                 row: 1,
                 type: this.curType,

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

@@ -7,7 +7,6 @@ import {
 
 export function getAudioData() {
   return {
-    id: '',
     type: 'audio',
     title: '音频',
     single_size: 100, // 单位MB

src/views/book/courseware/preview/index.vue

@@ -174,15 +174,10 @@ export default {
       let col = row.col_list;
       if (col.length <= 1) {
         return {
-          gridTemplateColumns: '100%',
+          gridTemplateColumns: '100fr',
         };
       }
-      let str = row.width_list
-        .map((item) => {
-          return `calc(${item} - ${(16 * (row.width_list.length - 1)) / row.width_list.length}px)`;
-        })
-        .join(' 16px ');
-      let gridTemplateColumns = `${str}`;
+      let gridTemplateColumns = row.width_list.join(' ');
 
       return {
         gridAutoFlow: 'column',
@@ -232,7 +227,7 @@ export default {
         } else {
           let filter = grid.filter((item) => item.row === row);
           let find = filter.findIndex((item) => item.grid_area === grid_area);
-          let needNum = (maxCol - filter.length) * 3; // 需要的数量
+          let needNum = maxCol - filter.length; // 需要的数量
 
           let str = '';
           if (filter.length === 1) {
@@ -250,10 +245,9 @@ export default {
 
       // 计算 grid_template_columns
       let gridTemplateColumns = '';
-      let rowOneNum = grid.filter((item) => item.row === 1).length;
       grid.forEach((item) => {
         if (item.row === 1) {
-          gridTemplateColumns += `calc(${item.width} - ${((rowOneNum - 1) * 16) / rowOneNum}px) `;
+          gridTemplateColumns += `${item.width} `;
         }
       });
 
@@ -358,11 +352,12 @@ export default {
 
         .row {
           display: grid;
-          row-gap: 16px;
+          gap: 16px;
 
           .col {
             display: grid;
             gap: 16px;
+            overflow: auto;
           }
         }
       }