插入模板内容更新 id

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

@@ -72,6 +72,7 @@
                   :id="grid.id"
                   ref="component"
                   :key="`grid-${grid.id}`"
+                  :old-id="grid?.oldId"
                   :class="[grid.id]"
                   :data-row="i"
                   :data-col="j"
@@ -1330,19 +1331,47 @@ export default {
      * @param {Array} param.content_group_row_list - 内容分组行列表
      */
     insertTemplateData_CreateCanvas({ row_list = [], content_group_row_list = [] }) {
+      let contentGroupRowList = JSON.parse(JSON.stringify(content_group_row_list));
+
+      let rowList = row_list.map((row) => {
+        const oldRowID = row.row_id;
+        const newRowID = `R${getRandomNumber(6, true)}`;
+        row.row_id = newRowID;
+        // 更新内容分组行列表中的 row_id
+        for (let idx = 0; idx < contentGroupRowList.length; idx++) {
+          if (contentGroupRowList[idx].row_id === oldRowID) {
+            contentGroupRowList[idx] = { ...contentGroupRowList[idx], row_id: newRowID };
+          }
+        }
+
+        row.col_list = row.col_list.map((col) => {
+          col.col_id = `C${getRandomNumber(8, true)}`;
+
+          col.grid_list = col.grid_list.map((grid) => {
+            grid.oldId = grid.id;
+            grid.id = `ID-${getRandomNumber(12, true)}`;
+            grid.grid_area = `L${getRandomNumber(6, true)}`;
+            return grid;
+          });
+
+          return col;
+        });
+        return row;
+      });
+
       const curId = this.getCurSettingId();
       // 如果无选中组件，则插入到最后
       if (!curId) {
-        this.data.row_list.push(...row_list);
-        this.content_group_row_list.push(...content_group_row_list);
+        this.data.row_list.push(...rowList);
+        this.content_group_row_list.push(...contentGroupRowList);
         return;
       }
       // 插入到当前选中组件后面
       const attrs = this.findChildComponentByKey(`grid-${curId}`)?.$attrs;
       if (!attrs) return;
       const i = Number(attrs['data-row']);
-      this.data.row_list.splice(i + 1, 0, ...row_list);
-      this.content_group_row_list.splice(i + 1, 0, ...content_group_row_list);
+      this.data.row_list.splice(i + 1, 0, ...rowList);
+      this.content_group_row_list.splice(i + 1, 0, ...contentGroupRowList);
     },
     /**
      * @description 复制组件

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

@@ -30,6 +30,10 @@ const mixin = {
       type: String,
       required: true,
     },
+    oldId: {
+      type: String,
+      default: '',
+    },
     componentMove: {
       type: Function,
       required: true,
@@ -94,43 +98,43 @@ const mixin = {
       if (this.courseware_id === '' || this.id === '') return;
       let temporaryCoursewareID = this.getTemporaryCoursewareID();
       let coursewareID = temporaryCoursewareID || this.courseware_id;
-      ContentGetCoursewareComponentContent({ courseware_id: coursewareID, component_id: this.id }).then(
-        ({ content }) => {
-          if (content) {
-            this.data = JSON.parse(content);
-          } else {
-            const bookUnifiedAttr = this.getBookUnifiedAttr();
+      let component_id = temporaryCoursewareID.length > 0 ? this.oldId || this.id : this.id;
 
-            this.$set(this.data, 'unified_attrib', bookUnifiedAttr);
+      ContentGetCoursewareComponentContent({ courseware_id: coursewareID, component_id }).then(({ content }) => {
+        if (content) {
+          this.data = JSON.parse(content);
+        } else {
+          const bookUnifiedAttr = this.getBookUnifiedAttr();
 
-            // 初始化时，如果有 view_pinyin 则根据全教材设置配置设 view_pinyin 和 pinyin_position
-            if ('view_pinyin' in this.data.property) {
-              this.data.property.view_pinyin = bookUnifiedAttr?.view_pinyin ?? 'false';
-              this.data.property.pinyin_position = bookUnifiedAttr?.pinyin_position ?? 'top';
-            }
+          this.$set(this.data, 'unified_attrib', bookUnifiedAttr);
 
-            if ('frame_color' in this.data.property) {
-              // 框颜色初始化为主题色
-              this.data.property.frame_color = bookUnifiedAttr?.topic_color ?? '#F13232';
-            }
+          // 初始化时，如果有 view_pinyin 则根据全教材设置配置设 view_pinyin 和 pinyin_position
+          if ('view_pinyin' in this.data.property) {
+            this.data.property.view_pinyin = bookUnifiedAttr?.view_pinyin ?? 'false';
+            this.data.property.pinyin_position = bookUnifiedAttr?.pinyin_position ?? 'top';
+          }
 
-            if ('sn_background_color' in this.data.property) {
-              // 序号背景色
-              this.data.property.sn_background_color = bookUnifiedAttr?.topic_color ?? '#EA3232';
-            }
+          if ('frame_color' in this.data.property) {
+            // 框颜色初始化为主题色
+            this.data.property.frame_color = bookUnifiedAttr?.topic_color ?? '#F13232';
           }
 
-          this.property.isGetContent = true;
+          if ('sn_background_color' in this.data.property) {
+            // 序号背景色
+            this.data.property.sn_background_color = bookUnifiedAttr?.topic_color ?? '#EA3232';
+          }
+        }
 
-          this.$watch(
-            'data',
-            () => {
-              this.$emit('changeData');
-            },
-            { deep: true },
-          );
-        },
-      );
+        this.property.isGetContent = true;
+
+        this.$watch(
+          'data',
+          () => {
+            this.$emit('changeData');
+          },
+          { deep: true },
+        );
+      });
     },
     /**
      * @description 复制组件