插入模板

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

@@ -1322,6 +1322,28 @@ export default {
       };
       this.content_group_row_list = content_group_row_list || [];
     },
+
+    /**
+     * 插入模板数据
+     * @param {Object} param
+     * @param {Object} param.row_list - 模板组件列表
+     * @param {Array} param.content_group_row_list - 内容分组行列表
+     */
+    insertTemplateData_CreateCanvas({ row_list = [], content_group_row_list = [] }) {
+      const curId = this.getCurSettingId();
+      // 如果无选中组件，则插入到最后
+      if (!curId) {
+        this.data.row_list.push(...row_list);
+        this.content_group_row_list.push(...content_group_row_list);
+        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);
+    },
     /**
      * @description 复制组件
      * @param {object} data 组件数据

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

@@ -213,6 +213,15 @@ export default {
     loadTemplateData_Create({ data, content_group_row_list }) {
       this.$refs.createCanvas.loadTemplateData_CreateCanvas({ data, content_group_row_list });
     },
+    /**
+     * 插入模板数据
+     * @param {Object} param
+     * @param {Object} param.row_list - 模板组件列表
+     * @param {Array} param.content_group_row_list - 内容分组行列表
+     */
+    insertTemplateData_Create({ row_list, content_group_row_list }) {
+      this.$refs.createCanvas.insertTemplateData_CreateCanvas({ row_list, content_group_row_list });
+    },
   },
 };
 </script>

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

@@ -117,7 +117,7 @@ import CharacterStructurePreview from '../preview/components/character_structure
 export const bookTypeOption = [
   {
     value: 'base',
-    label: '基础组件',
+    label: '基础',
     children: [
       // {
       //   value: 'stem',
@@ -240,7 +240,7 @@ export const bookTypeOption = [
     children: [
       {
         value: 'article',
-        label: '文章组件',
+        label: '文章',
         icon: '',
         component: Article,
         set: ArticleSetting,
@@ -256,7 +256,7 @@ export const bookTypeOption = [
       },
       {
         value: 'select',
-        label: '选择组件',
+        label: '选择',
         icon: '',
         component: SelectPage,
         set: SelectSetting,
@@ -264,7 +264,7 @@ export const bookTypeOption = [
       },
       {
         value: 'matching',
-        label: '连线组件',
+        label: '连线',
         icon: '',
         component: MatchingPage,
         set: MatchingSetting,
@@ -272,7 +272,7 @@ export const bookTypeOption = [
       },
       {
         value: 'sort',
-        label: '排序组件',
+        label: '排序',
         icon: '',
         component: SortPage,
         set: SortSetting,
@@ -288,7 +288,7 @@ export const bookTypeOption = [
       },
       {
         value: 'fill',
-        label: '填空组件',
+        label: '填空',
         icon: '',
         component: FillPage,
         set: FillSetting,
@@ -296,7 +296,7 @@ export const bookTypeOption = [
       },
       {
         value: 'record_input',
-        label: '录音组件',
+        label: '录音',
         icon: '',
         component: RecordInput,
         set: RecordInputSetting,
@@ -304,7 +304,7 @@ export const bookTypeOption = [
       },
       {
         value: 'new_word',
-        label: '生词组件',
+        label: '生词',
         icon: '',
         component: NewWord,
         set: NewWordSetting,
@@ -312,7 +312,7 @@ export const bookTypeOption = [
       },
       {
         value: 'notes',
-        label: '注释组件',
+        label: '注释',
         icon: '',
         component: Notes,
         set: NotesSetting,
@@ -328,7 +328,7 @@ export const bookTypeOption = [
       // },
       {
         value: 'character',
-        label: '汉字组件',
+        label: '汉字',
         icon: '',
         component: Character,
         set: CharacterSetting,
@@ -352,7 +352,7 @@ export const bookTypeOption = [
       },
       // {
       //   value: 'write',
-      //   label: '书写组件',
+      //   label: '书写',
       //   icon: '',
       //   component: Write,
       //   set: WriteSetting,
@@ -360,7 +360,7 @@ export const bookTypeOption = [
       // },
       // {
       //   value: 'math',
-      //   label: '公式组件',
+      //   label: '公式',
       //   icon: '',
       //   component: Math,
       //   set: MathSetting,
@@ -368,7 +368,7 @@ export const bookTypeOption = [
       // },
       {
         value: 'input',
-        label: '输入框组件',
+        label: '输入框',
         icon: '',
         component: Input,
         set: InputSetting,
@@ -376,7 +376,7 @@ export const bookTypeOption = [
       },
       {
         value: 'judge',
-        label: '判断组件',
+        label: '判断',
         icon: '',
         component: Judge,
         set: JudgeSetting,
@@ -400,7 +400,7 @@ export const bookTypeOption = [
       },
       {
         value: 'pinyin_base',
-        label: '拼音组件',
+        label: '拼音',
         icon: '',
         component: PinyinBase,
         set: PinyinBaseSetting,

src/views/personal_workbench/edit_task/edit/UseTemplate.vue

@@ -11,7 +11,8 @@
         <span>选择模板</span>
       </div>
       <div class="operator">
-        <span class="link" @click="useTemplate">使用模板</span>
+        <span class="link" @click="insertTemplate">插入模板内容</span>
+        <span class="link" @click="useTemplate">替换模板内容</span>
       </div>
     </header>
 
@@ -19,7 +20,7 @@
       <div v-loading="loading" class="template-list">
         <div class="search">
           <el-input v-model="name" placeholder="请输入模板名称" @keyup.enter.native="searchTemplateList">
-            <el-select slot="prepend" v-model="storage_type" style="width: 100px">
+            <el-select slot="prepend" v-model="storage_type" style="width: 100px" @change="searchTemplateList">
               <el-option v-for="{ label, value } in storageTypeList" :key="value" :label="label" :value="value" />
             </el-select>
           </el-input>
@@ -225,6 +226,21 @@ export default {
       });
       this.dialogClose();
     },
+    /**
+     * 插入模板内容
+     */
+    insertTemplate() {
+      if (!this.curSelectId) {
+        this.$message.warning('请选择模板课件');
+        return;
+      }
+      this.$emit('insertTemplate', {
+        row_list: this.data.row_list,
+        content_group_row_list: this.data_content_group_row_list,
+        temporaryCoursewareID: this.curSelectId,
+      });
+      this.dialogClose();
+    },
   },
 };
 </script>

src/views/personal_workbench/edit_task/edit/index.vue

@@ -56,7 +56,11 @@
     </div>
 
     <CreatePage ref="create" class="edit-task__content" @goBackPreview="goBackPreview" />
-    <UseTemplate :visible.sync="visibleTemplate" @useTemplate="handleUseTemplate" />
+    <UseTemplate
+      :visible.sync="visibleTemplate"
+      @useTemplate="handleUseTemplate"
+      @insertTemplate="handleInsertTemplate"
+    />
   </div>
 </template>
 
@@ -276,6 +280,18 @@ export default {
       this.temporaryCoursewareID = temporaryCoursewareID;
       this.visibleTemplate = false;
     },
+    /**
+     * 处理插入模板事件
+     * @param {Object} param
+     * @param {Object} param.row_list - 模板组件列表
+     * @param {Array} param.content_group_row_list - 内容分组行列表
+     * @param {string} param.temporaryCoursewareID - 临时课件ID
+     */
+    handleInsertTemplate({ row_list, content_group_row_list, temporaryCoursewareID }) {
+      this.$refs.create.insertTemplateData_Create({ row_list, content_group_row_list });
+      this.temporaryCoursewareID = temporaryCoursewareID;
+      this.visibleTemplate = false;
+    },
     goBackTemplateList() {
       if (this.type === 'personal') {
         this.$router.push({ path: '/personal_workbench/template_list' });