注释关联跳转

src/icons/svg/match.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1791453697372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4886" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M485.49 591.35l102-102a36 36 0 0 0-50.9-50.9l-102 102a36 36 0 0 0 50.9 50.9z m412.9-465.7c-79.2-79.2-207.9-79.2-287.1 0l-178.9 178.9a36 36 0 0 0 50.9 50.9l178.9-178.9a131.05 131.05 0 0 1 223.7 92.6 129.78 129.78 0 0 1-38.4 92.6l-178.9 178.9a36 36 0 0 0 51 50.9l178.9-178.9c79.1-79.1 79.1-207.9-0.1-287z m-357.7 542.9l-178.8 178.9a131 131 0 1 1-185.3-185.2l178.9-178.9a36 36 0 0 0-50.9-50.9l-178.9 178.8a203 203 0 0 0 287 287.1l178.9-178.9a36 36 0 1 0-50.9-50.9z" p-id="4887"></path></svg>

src/views/book/courseware/create/components/question/notes/Notes.vue

@@ -91,6 +91,17 @@
             />
           </template>
         </el-table-column>
+        <el-table-column prop="match_jump" label="关联跳转" width="300">
+          <template slot-scope="scope">
+            <template v-if="scope.row.match_jump.type === 'outer' && scope.row.match_jump.con">
+              已关联：{{ scope.row.match_jump.con }}
+            </template>
+            <template v-else-if="scope.row.match_jump.type === 'inner' && scope.row.match_jump.source_courseware_name">
+              已关联：{{ scope.row.match_jump.source_courseware_name }}
+            </template>
+            <div class="match-btn" @click="handleMatch(scope.row)"><SvgIcon icon-class="match" /><span>关联</span></div>
+          </template>
+        </el-table-column>
 
         <el-table-column label="操作" width="150">
           <template slot-scope="scope">
@@ -108,6 +119,44 @@
         :translations="data.multilingual"
         @SubmitTranslation="handleMultilingualTranslation"
       />
+      <el-dialog
+        v-if="dialogFlag"
+        :visible.sync="dialogFlag"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        :modal="false"
+        width="600px"
+        class="Notes-edit-dialog"
+        title="关联跳转"
+      >
+        <div class="check-box">
+          <el-form ref="form" :model="matchObj" label-width="80px">
+            <el-form-item label="类型">
+              <el-radio-group v-model="matchObj.type">
+                <el-radio label="outer">外部跳转</el-radio>
+                <el-radio label="inner">内部跳转</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="关联链接" v-if="matchObj.type === 'outer'">
+              <el-input v-model="matchObj.con"></el-input>
+            </el-form-item>
+            <el-form-item label="关联节点" v-else>
+              <el-cascader
+                v-model="matchObj.source_courseware_id_list"
+                :options="courseware_node_list"
+                :show-all-levels="false"
+                @change="handleChangeCourseware"
+                clearable
+                :ref="refId"
+              />
+            </el-form-item>
+          </el-form>
+          <div class="btn-box">
+            <el-button type="info" size="small" @click="cancleDialog">取消</el-button>
+            <el-button type="primary" size="small" @click="sureMatch">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
     </template>
   </ModuleBase>
 </template>
@@ -115,7 +164,7 @@
 <script>
 import { isEnable } from '@/views/book/courseware/data/common';
 import ModuleMixin from '../../common/ModuleMixin';
-import { PinyinBuild_OldFormat } from '@/api/book';
+import { ChapterGetBookChapterStruct, PinyinBuild_OldFormat } from '@/api/book';
 import UploadPicture from '../new_word/components/UploadPicture.vue';
 
 import { getNotesData, getOption } from '@/views/book/courseware/data/notes';
@@ -130,6 +179,11 @@ export default {
       data: getNotesData(),
       multilingualText: '',
       refreshKey: '',
+      dialogFlag: false,
+      matchObj: null,
+      activeMatchRow: null,
+      courseware_node_list: [],
+      refId: 'Notes-' + Math.random().toString(36).substring(2, 12),
     };
   },
   watch: {
@@ -146,7 +200,56 @@ export default {
       deep: true,
     },
   },
+  created() {
+    this.getBookChapterStructExpandList();
+  },
   methods: {
+    /**
+     * 得到教材章节结构展开列表
+     */
+    getBookChapterStructExpandList() {
+      ChapterGetBookChapterStruct({
+        book_id: this.$route.query.project_id,
+        node_deep_mode: 0,
+        is_contain_producer: 'false',
+        is_contain_auditor: 'false',
+      }).then(({ nodes }) => {
+        this.courseware_node_list = nodes;
+        nodes.forEach((item) => {
+          item.label = item.name;
+          item.pid = '';
+          item.nodexIndex = 0;
+          item.isLeaf = item.is_leaf === 'true';
+          item.value = item.id;
+          if (item.nodes) {
+            item.children = item.nodes;
+            item.lists = item.nodes;
+            this.handleData(item, 1);
+          }
+        });
+      });
+    },
+    // 递归
+    handleData(data, nodeIndex) {
+      if (data.nodes) {
+        data.nodes.forEach((item) => {
+          item.label = item.name;
+          item.pid = data.id;
+          item.nodexIndex = nodeIndex;
+          item.isLeaf = item.is_leaf === 'true';
+          item.value = item.id;
+          if (item.nodes) {
+            item.children = item.nodes;
+            item.lists = item.nodes;
+            this.handleData(item, nodeIndex + 1);
+          }
+        });
+      }
+    },
+    handleChangeCourseware(val) {
+      this.matchObj.source_courseware_id = val[val.length - 1];
+      this.matchObj.source_courseware_name = this.$refs[this.refId].getCheckedNodes()[0].pathLabels.join('/');
+    },
     // 删除行
     handleDelete(index) {
       this.data.option.splice(index, 1);
@@ -174,6 +277,9 @@ export default {
           name: item.con.replace(/<[^>]*>?/gm, ''),
           id: Math.random().toString(36).substring(2, 12),
         });
+        if (!item.hasOwnProperty('match_jump')) {
+          this.$set(item, 'match_jump', { type: 'outer', con: '', source_courseware_id_list: [] });
+        }
       });
       this.data.mind_map.node_list = node_list;
     },
@@ -316,6 +422,23 @@ export default {
       this.data.option[index].file_list[0] = '';
       this.data.file_id_list = this.data.file_id_list.filter((item) => item !== file_id);
     },
+    // 点击关联按钮
+    handleMatch(row) {
+      this.matchObj = JSON.parse(JSON.stringify(row.match_jump));
+      this.activeMatchRow = row;
+      this.dialogFlag = true;
+    },
+    // 确定关联
+    sureMatch() {
+      this.dialogFlag = false;
+      this.activeMatchRow.match_jump = JSON.parse(JSON.stringify(this.matchObj));
+      this.matchObj = null;
+    },
+    cancleDialog() {
+      this.dialogFlag = false;
+      this.matchObj = null;
+      this.activeMatchRow = null;
+    },
   },
 };
 </script>
@@ -360,9 +483,45 @@ export default {
     margin: 0;
   }
 }
+
+.match-btn {
+  display: flex;
+  column-gap: 12px;
+  align-items: center;
+  width: 233px;
+  padding: 4px 12px;
+  font-size: 14px;
+  color: #1d2129;
+  cursor: pointer;
+  background-color: #f2f3f5;
+}
 </style>
 <style lang="scss">
 .tox .tox-editor-header {
   z-index: 3 !important;
 }
+
+.Notes-edit-dialog {
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  .check-box {
+    padding: 24px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 25%);
+
+    .btn-box {
+      display: block;
+      text-align: right;
+
+      .el-button {
+        padding: 2px 12px;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
 </style>

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

@@ -32,6 +32,12 @@ export function getOption() {
     note: '', // 注释
     file_list: [''], // 图片
     notesColor: '#8206BF', // 在课文中预览的注释颜色
+    match_jump: {
+      type: 'outer',
+      con: '',
+      source_courseware_id_list: [],
+      source_courseware_name:''
+    }
   };
 }
 export function getNotesProperty() {

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -74,6 +74,13 @@
                         ></span
                         ><span
                           class="NPC-notes-con-text"
+                          :class="[
+                            item.match_jump &&
+                            ((item.match_jump.type === 'outer' && item.match_jump.con) ||
+                              (item.match_jump.type === 'inner' && item.match_jump.source_courseware_name))
+                              ? 'NPC-notes-con-text-cursor'
+                              : '',
+                          ]"
                           :style="{
                             color:
                               data.unified_attrib && data.unified_attrib.text_color
@@ -82,6 +89,7 @@
                             fontSize:
                               data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                           }"
+                          @click="handleMatchJump(item)"
                           v-html="convertText(sanitizeHTML(item.con))"
                         ></span
                         ><span
@@ -113,12 +121,20 @@
                   <span
                     v-else
                     class="NPC-notes-con-text NPC-notes-con-texts"
+                    :class="[
+                      item.match_jump &&
+                      ((item.match_jump.type === 'outer' && item.match_jump.con) ||
+                        (item.match_jump.type === 'inner' && item.match_jump.source_courseware_name))
+                        ? 'NPC-notes-con-text-cursor'
+                        : '',
+                    ]"
                     :style="{
                       color:
                         data.unified_attrib && data.unified_attrib.text_color ? data.unified_attrib.text_color : '',
                       fontSize:
                         data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                     }"
+                    @click="handleMatchJump(item)"
                     v-html="convertText(sanitizeHTML(item.con))"
                   ></span>
                   <span v-if="showLang" class="multilingual">
@@ -262,6 +278,21 @@ export default {
 
       return noTextContentData;
     },
+    handleMatchJump(item) {
+      if (
+        item.match_jump &&
+        ((item.match_jump.type === 'outer' && item.match_jump.con) ||
+          (item.match_jump.type === 'inner' && item.match_jump.source_courseware_name))
+      ) {
+        if (item.match_jump.type === 'outer' && item.match_jump.con) {
+          // 外部跳转
+          window.open(`${item.match_jump.con}`);
+        } else if (item.match_jump.type === 'inner' && item.match_jump.source_courseware_name) {
+          // 内部跳转
+          console.log(item.match_jump.source_courseware_id);
+        }
+      }
+    },
   },
 };
 </script>
@@ -360,6 +391,12 @@ export default {
             margin-left: 5px;
           }
 
+          .pinyin-text {
+            > span {
+              display: block;
+            }
+          }
+
           .NPC-notes-con-number {
             font-family: 'robot';
             font-size: 14px;
@@ -392,6 +429,10 @@ export default {
                 width: 100%;
               }
             }
+
+            &-cursor {
+              cursor: pointer;
+            }
           }
         }