CRM_14.0 bug修复

src/views/help/Index.vue

@@ -14,6 +14,9 @@ const defaultActiveId=ref(0)
 const isRightFold=ref(false)
 const helpDocument=ref({})
 const Content=ref('')
+let isFirstLoad=true
+
+let videoList=[]
 
 const businessCode = route.query.bus_code || ''
  
@@ -44,26 +47,56 @@ const menuChange=(data,node)=>{
     currentNodeKey.value = data.AnchorId
 }
 const getDocument=(id)=>{
-    apiGetHelpDocDetail({bus_code:businessCode,classify_id:id}).then(res=>{
-        if(res.code == 200){
-            helpDocument.value=res.data || {}
-            Content.value = helpDocument.value.Content + createBottomHref(helpDocument.value.Recommend)
-            nextTick(()=>{
-                getScrollTopList(helpDocument.value.Anchor || [])
-            })
+  apiGetHelpDocDetail({bus_code:businessCode,classify_id:id}).then(res=>{
+    if(res.code == 200){
+      helpDocument.value=res.data || {}
+      Content.value = helpDocument.value.Content + createBottomHref(helpDocument.value.Recommend)
+      if(!(helpDocument.value.Anchor && helpDocument.value.Anchor.length>0)) isRightFold.value=true
+      isRightFold.value=false
+      nextTick(()=>{
+        getScrollTopList(helpDocument.value.Anchor || [])
+        videoList=document.getElementsByTagName('video') || []
+        if(videoList && videoList.length>0){
+          for (let i = 0; i < videoList.length; i++) {
+            const element = videoList[i];
+            element.addEventListener('play',setVideosStatus(i))
+          }
         }
-    })
-    window.scrollTo(0, document.getElementById('operation-document-body').offsetTop)
+      })
+      window.scrollTo(0, document.getElementById('operation-document-body').offsetTop)
+    }else if(res.code == 4001){
+      helpDocument.value={}
+      isRightFold.value=true
+    }
+    if(isFirstLoad){
+      isFirstLoad=false
+      return
+    }
+
+  })
 }
+
+const setVideosStatus=(i)=>{
+  return ()=>{
+    // 暂停其他播放的视频，只能播放一个
+    for (let j = 0; j < videoList.length; j++) {
+      if(j==i) continue; 
+      if(!videoList[j].paused){
+        videoList[j].pause()
+      }
+    }
+  }
+}
+
 // 生成底部的两个链接
 const createBottomHref=(RecommendData)=>{
     if(!(RecommendData && RecommendData.length>0)) return ''
     
     let hrefStringBuiler='<ul style="margin-top:40px">'
     RecommendData.map(item =>{
-    if(item.Name){
-        hrefStringBuiler+=`<li><a href="${item.Url}" target="_blank" style="text-decoration: underline;">${item.Name}</a></li>`
-    }
+      if(item.Name){
+          hrefStringBuiler+=`<li><a href="${item.Url}" target="_blank" style="text-decoration: underline;">${item.Name}</a></li>`
+      }
     })
     return hrefStringBuiler+"</ul>"
 }
@@ -83,6 +116,13 @@ onMounted(() => {
 
 onUnmounted(() => {
     document.removeEventListener('scroll',scrollChange)
+    
+    if(videoList && videoList.length>0){
+      for (let i = 0; i < videoList.length; i++) {
+        const element = videoList[i];
+        element.removeEventListener('play',setVideosStatus(i))
+      }
+    }
 })
 
 const getScrollTopList=(list)=>{
@@ -169,17 +209,25 @@ const scrollChange=()=>{
       </div>
 
       <div class="document-body-center" id="document-body-center" :style="{'border-right':isRightFold?'none':'solid 1px #DCDFE6'}">
-        <div class="body-center-title">
-          <div class="body-center-title-text">{{ helpDocument.Title }}</div>
-          <div class="body-center-title-signature">最后更新时间：{{ helpDocument.Author }} {{ helpDocument.ModifyTime }}</div>
-        </div>
-        <div class="rich-text-box" id="rich-text-box" v-html="Content">
-        </div>
+        <template v-if="helpDocument.Title">
+          <div class="body-center-title">
+            <div class="body-center-title-text">{{ helpDocument.Title }}</div>
+            <div class="body-center-title-signature">最后更新时间：{{ helpDocument.Author }} {{ helpDocument.ModifyTime }}</div>
+          </div>
+          <div class="rich-text-box fr-view" id="rich-text-box" v-html="Content">
+          </div>
+        </template>
+        <template v-else>
+          <div class="nodata" style="text-align: center;">
+            <img src="~@/assets/img/nodata.png" style="width: 300px;"/>
+            <p>暂无信息</p>
+          </div>
+        </template>
       </div>
       <div class="document-body-right" :style="{'max-width': isRightFold?'0':'300px'}">
         <div class="body-right-box">
           <el-tree :data="helpDocument.Anchor" node-key="AnchorId" @current-change="menuChange" class="right-anchor-tree"
-          ref="rightTreeRef" :props="treeProp" :current-node-key="currentNodeKey" icon="none"
+          ref="rightTreeRef" :props="treeProp" :current-node-key="currentNodeKey" icon="none" empty-text="暂无数据"
            default-expand-all :expand-on-click-node="false" >
            <template #default="{ node, data }">
             <a @click="(e)=>navigate(e,'#'+data.Anchor)" class="custom-tree-node" 
@@ -315,6 +363,13 @@ const scrollChange=()=>{
 </style>
 <style lang="scss">
 
+// froala-editor 预览时的样式，如需使用在展示富文本的节点上加上 fr-view 的类
+@import '/public/froala_style.min.css';
+
+p[data-f-id="pbf"] {
+  display: none;
+}
+
 .el-scrollbar__wrap {
     overflow-x: hidden;
 }
@@ -365,37 +420,4 @@ background-color: transparent !important;
 .el-tree-node__expand-icon{
     display: none;
 }
-
-// froala富文本编辑器图片居中、居左、居右样式类
-img.fr-dib {
-  margin: 5px auto;
-  display: block;
-  float: none;
-  vertical-align: top;
-}
-img.fr-dib.fr-fil {
-  margin-left: 0;
-  text-align: left;
-}
-img.fr-dib.fr-fir {
-  margin-right: 0;
-  text-align: right;
-}
-
-// froala富文本编辑器 视频居中、居左、居右样式类
-.fr-video {
-  text-align: center;
-  position: relative;
-}
-.fr-video.fr-dvb {
-  display: block;
-  clear: both;
-}
-.fr-video.fr-dvb.fr-fvl {
-  text-align: left;
-}
-.fr-video.fr-dvb.fr-fvr {
-  text-align: right;
-}
-
 </style>

src/views/update/Index.vue

@@ -108,13 +108,13 @@ onMounted(()=>{
         </div>
     </div>
     <!-- 跳转帮助文档的按钮 -->
-    <!-- <Teleport to=".layout-header-other" v-if="beforeMounted">
+    <Teleport to=".layout-header-other" v-if="beforeMounted">
         <div class="update-header-btn" @click="goHelpDoc">
             <el-icon color="#FFF">
                 <QuestionFilled />
             </el-icon>
             帮助文档</div>
-    </Teleport> -->
+    </Teleport>
 </template>
 
 <style scoped lang="scss">