帮助中心配置 添加编辑文章 完成

src/views/system_manage/assistance_center/assistanceDocAdd.vue

@@ -1,3 +1,269 @@
+<script setup>
+import {assistanceDocInterence} from "@/api/api.js"
+import {createBottomHref} from "./utils/common"
+import { ref, reactive, watch, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+const route = useRoute()
+const router = useRouter()
+const froalaConfig = {
+    toolbarButtons: [
+        "insertImage",
+        "insertVideo",
+        "embedly",
+        "insertFile",
+        "textColor",
+        "bold",
+        "italic",
+        "underline",
+        "strikeThrough",
+        "subscript",
+        "superscript",
+        "fontFamily",
+        "fontSize",
+        "color",
+        "inlineClass",
+        "inlineStyle",
+        "paragraphStyle",
+        "lineHeight",
+        "paragraphFormat",
+        "align",
+        "formatOL",
+        "formatUL",
+        "outdent",
+        "indent",
+        "quote",
+        "insertTable",
+        "emoticons",
+        "fontAwesome",
+        "specialCharacters",
+        "insertHR",
+        "selectAll",
+        "clearFormatting",
+        "html",
+        "undo",
+        "redo"
+    ],
+    height:"calc(100vh - 230px)",
+    fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
+    fontSizeDefaultSelection: "16",
+    theme: "dark", //主题
+    placeholderText: "请输入内容",
+    language: "zh_cn", //国际化
+    imageUploadURL: import.meta.env.VITE_APP_API_URL + "/report/uploadImg", //上传url
+    videoUploadURL: import.meta.env.VITE_APP_API_URL + "/report/uploadImg", //上传url
+    fileUploadURL: import.meta.env.VITE_APP_API_URL + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
+    imageEditButtons:['imageAlign', 'imageCaption', 'imageRemove',  '-', 'imageDisplay',  'imageSize'],
+    quickInsertButtons: ["image","video","hr"], //快速插入项
+    quickInsertEnabled:false, // 是否启用快速插入功能
+    toolbarVisibleWithoutSelection: false, //是否开启 不选中模式
+    toolbarSticky: false, //操作栏是否自动吸顶
+    saveInterval: 0,
+}
+
+let classifyList = ref([])
+let addDocForm = reactive({
+    Title:"",
+    ClassifyId:"",
+    Author:"",
+    Status:1,
+    Content:'',
+    AnchorData:[],
+    RecommendData:[{Name:"",Url:""},{Name:"",Url:""}],
+})
+const addDocRules = reactive({
+    Title:{required:true,message:'文章标题不能为空',trigger:'blur'},
+    ClassifyId:{required:true,message:'文章所属分类不能为空',trigger:'change'},
+    Author:{required:true,message:'文章作者不能为空',trigger:'blur'}
+})
+let anchorData = ref([])
+let isSubmiting = ref(false)
+let autoSaveTimer = ref(null)
+let modifyTime = ref('')
+let contentChange = ref(false)
+
+watch(addDocForm,()=>{
+    contentChange.value=true
+},{deep:true})
+
+function getClassifyData(){
+    assistanceDocInterence.getAssistanceClassifyList().then(res=>{
+        if(res.Ret == 200){
+        classifyList.value = res.Data?.AllNodes||[]
+        }
+    })
+}
+function init(){
+    getClassifyData()
+    if(route.query.DocId){
+        assistanceDocInterence.getAssistanceDoc({DocId:route.query.DocId}).then(res=>{
+          if(res.Ret == 200){
+            Object.assign(addDocForm,{
+                Id:res.Data.Id,
+                Title:res.Data.Title,
+                ClassifyId:res.Data.ClassifyId,
+                Author:res.Data.Author,
+                Status:res.Data.Status,
+                Content:res.Data.Content,
+                RecommendData:res.Data.Recommend || [{Name:"",Url:""},{Name:"",Url:""}]
+            })
+            modifyTime.value=res.Data.ModifyTime
+            if((!autoSaveTimer.value) && addDocForm.Id){
+              autoSaveTimer.value=setInterval(()=>{
+                saveDocument('保存',true)
+              },6000)
+            }
+          }
+        })
+    }else{
+        addDocForm.Content=""
+    }
+}
+init()
+onUnmounted(()=>{
+    clearInterval(autoSaveTimer.value)
+    autoSaveTimer.value=null
+})
+
+// 生成锚点
+function generateAnchor(){
+    anchorData.value=[]
+    searchTitleTag(0,1)
+}
+// 搜索标题标签h1,h2
+function searchTitleTag(searchPosition,firstLevel){
+    let frontH1Posiiton,nextH1Posiiton,H2Posiiton=0
+    let frontH1RightPosiiton,H2RightPosiiton=0
+    let backH1Posiiton,backH2Posiiton=0
+    // 本次搜索第一个h1的位置
+    frontH1Posiiton = addDocForm.Content.indexOf('<h1',searchPosition)
+    // 右闭合标签
+    frontH1RightPosiiton = addDocForm.Content.indexOf('>',frontH1Posiiton)
+
+    if(frontH1Posiiton == -1) return 
+
+    let anchorText=`id="doc_anchor_${firstLevel}"`
+    // console.log(frontH1Posiiton,firstLevel,'firstLevel');
+    addDocForm.Content = addDocForm.Content.substring(0, frontH1Posiiton+3) 
+                                +" "+anchorText + addDocForm.Content.substring(frontH1RightPosiiton);
+    // 再次获取右闭合标签
+    frontH1RightPosiiton = addDocForm.Content.indexOf('>',frontH1Posiiton)
+    // 对应的</h1>的位置 原本用的</h1>，后来发现> 和 </h1>之间会掺其他标签
+    backH1Posiiton = addDocForm.Content.indexOf('<',frontH1RightPosiiton)
+    // 获取标题
+    let AnchorTitle = addDocForm.Content.substring(frontH1RightPosiiton+1,backH1Posiiton)
+
+    anchorData.push({
+        AnchorId:`${firstLevel}`,
+        Anchor:`doc_anchor_${firstLevel}`,
+        AnchorName:AnchorTitle,
+        Child:[]})
+    // 本次搜索下一个h1的位置
+    nextH1Posiiton = addDocForm.Content.indexOf('<h1',backH1Posiiton)==-1?
+                        addDocForm.Content.length:addDocForm.Content.indexOf('<h1',backH1Posiiton)
+    // 从第一个h1的位置开始查找h2标签
+    H2Posiiton = addDocForm.Content.indexOf('<h2',backH1Posiiton)
+
+    let secondLevel=1
+    while (!(H2Posiiton==-1 || H2Posiiton>nextH1Posiiton)) {
+        // 右闭合标签
+        H2RightPosiiton = addDocForm.Content.indexOf('>',H2Posiiton)
+
+        // 找到了，并且位置小于下一个h1的位置 
+        let anchorTextH2=`id="doc_anchor_${firstLevel}_${secondLevel}"`
+        // console.log(H2Posiiton,secondLevel,'secondLevel');
+        addDocForm.Content = addDocForm.Content.substring(0, H2Posiiton+3) 
+                                +" "+anchorTextH2 + addDocForm.Content.substring(H2RightPosiiton);
+        // 再次获取右闭合标签
+        H2RightPosiiton = addDocForm.Content.indexOf('>',H2Posiiton)
+        // 对应的</h2>的位置  原本用的</h2>，后来发现> 和 </h2>之间会掺其他标签
+        backH2Posiiton = addDocForm.Content.indexOf('<',H2RightPosiiton)
+        // 获取标题
+        let AnchorTitleLevelTwo = addDocForm.Content.substring(H2RightPosiiton+1,backH2Posiiton)
+        anchorData[firstLevel-1].Child.push(
+            {AnchorId:`${firstLevel}_${secondLevel}`,
+            Anchor:`doc_anchor_${firstLevel}_${secondLevel}`,
+            AnchorName:AnchorTitleLevelTwo,
+            Child:[]
+        })
+        // nextH1Posiiton 和 secondLevel 随之增加
+        // nextH1Posiiton +=anchorTextH2.length+1
+        // 更新nextH1Posiiton位置
+        nextH1Posiiton = addDocForm.Content.indexOf('<h1',backH1Posiiton)==-1?
+                        addDocForm.Content.length:addDocForm.Content.indexOf('<h1',backH1Posiiton)
+        secondLevel++
+        H2Posiiton = addDocForm.Content.indexOf('<h2',backH2Posiiton)
+    }
+    // 结束一轮 <h1></h1>标签的寻找
+    if(addDocForm.Content.indexOf('<h1',backH1Posiiton+4)!=-1){
+        // 如果有下一个h1的标签，说明寻找还没结束，继续寻找
+        firstLevel++
+        searchTitleTag(nextH1Posiiton,firstLevel)
+    }
+}
+function previewDocument(){
+    if(isSubmiting.value) return 
+    if(!addDocForm.Content){
+        ElMessage.error("文章内容不能为空")
+        return
+    }
+    let bottomLink = createBottomHref(addDocForm.RecommendData)
+    sessionStorage.setItem("documentDoc",addDocForm.Content+bottomLink)
+    let { href } = router.resolve({ path: "/assistanceDocDetail" });
+    window.open(href, "_blank");
+}
+let addDocFormRef = ref(null)
+function saveDocument(type,isAuto){
+    if(isSubmiting.value) return 
+    addDocFormRef.value?.validate(valid=>{
+        if(valid){
+        if(!addDocForm.Content){
+            ElMessage.error("文章内容不能为空")
+            return
+        }
+        if(!isAuto) isSubmiting.value=true
+        if(type=="发布") addDocForm.Status=2
+
+        generateAnchor()
+        addDocForm.AnchorData = anchorData.value
+        //保存
+        assistanceDocInterence.addAssistanceDoc({...addDocForm,IsChange:contentChange.value}).then(res=>{
+            if(res.Ret == 200){
+            contentChange.value=false
+
+            !isAuto && ElMessage({
+                type:'success',
+                message:'操作成功',
+                duration:1000
+            })
+            if(type=="发布"){
+                setTimeout(()=>{
+                    router.back()
+                },1000)
+            }else{
+                isSubmiting.value=false
+                modifyTime.value=res.Data.ModifyTime
+                if(!addDocForm.Id){
+                //新增
+                setTimeout(()=>{
+                    router.replace("/assistanceDocAdd?DocId="+res.Data.HelpDocId)
+                    addDocForm.Id = res.Data.HelpDocId
+                    if((!autoSaveTimer) && addDocForm.Id){
+                    autoSaveTimer=setInterval(()=>{
+                        saveDocument('保存',true)
+                    },6000)
+                    }
+                },1000)
+                }
+            }
+            }
+        }).catch(()=>{
+            isSubmiting.value=false
+        })
+        }
+    })
+}
+</script>
 <template>
   <div class="assistance-edit-container">
     <div class="edit-container-rich-text">
@@ -6,7 +272,7 @@
         ref="froalaEditor"
         :tag="'textarea'"
         :config="froalaConfig"
-        v-model="addDocForm.Content"
+        v-model:value="addDocForm.Content"
       ></froala>
     </div>
     <div class="right-area">
@@ -20,7 +286,7 @@
           <el-button type="primary" class="document-options-button" @click="saveDocument('发布')" v-loading="isSubmiting">发布</el-button>
         </div>
         <div class="document-options-form">
-          <el-form :model="addDocForm" ref="addDocForm" :rules="addDocRules">
+          <el-form :model="addDocForm" ref="addDocFormRef" :rules="addDocRules" label-position="top">
             <el-form-item label="文章标题" prop="Title">
               <el-input v-model="addDocForm.Title" placeholder="请输入文章标题"></el-input>
             </el-form-item>
@@ -47,307 +313,6 @@
   </div>
 </template>
 
-<script>
-import {assistanceDocInterence} from "@/api/api.js"
-import {createBottomHref} from "./utils/common"
-  export default {
-    name:"assistanceDocAdd",
-    data() {
-      const that = this;
-      return {
-        editor: null,
-        froalaConfig: {
-          toolbarButtons: [
-            "insertImage",
-            "insertVideo",
-            "embedly",
-            "insertFile",
-            "textColor",
-            "bold",
-            "italic",
-            "underline",
-            "strikeThrough",
-            "subscript",
-            "superscript",
-            "fontFamily",
-            "fontSize",
-            "color",
-            "inlineClass",
-            "inlineStyle",
-            "paragraphStyle",
-            "lineHeight",
-            "paragraphFormat",
-            "align",
-            "formatOL",
-            "formatUL",
-            "outdent",
-            "indent",
-            "quote",
-            "insertTable",
-            "emoticons",
-            "fontAwesome",
-            "specialCharacters",
-            "insertHR",
-            "selectAll",
-            "clearFormatting",
-            "html",
-            "undo",
-            "redo"
-          ],
-          height:"calc(100vh - 230px)",
-          fontSize: ["12", "14", "16", "18", "20", "24", "28", "32", "36", "40"],
-          fontSizeDefaultSelection: "16",
-          theme: "dark", //主题
-          placeholderText: "请输入内容",
-          language: "zh_cn", //国际化
-          imageUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-          videoUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-          fileUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
-          imageEditButtons:['imageAlign', 'imageCaption', 'imageRemove',  '-', 'imageDisplay',  'imageSize'],
-          quickInsertButtons: ["image","video","hr"], //快速插入项
-          quickInsertEnabled:false, // 是否启用快速插入功能
-          toolbarVisibleWithoutSelection: false, //是否开启 不选中模式
-          // disableRightClick:true,//是否屏蔽右击
-          toolbarSticky: false, //操作栏是否自动吸顶
-          // zIndex:99999,
-          saveInterval: 0,
-          /* 				saveParam: 'content',
-            saveURL: process.env.API_ROOT+'/report/saveReportContent',
-            saveMethod: 'POST',
-            saveParams: {}, */
-          events: {
-            //this.editor 定义在vue data 中
-            initialized: function () {
-              that.editor = this;
-            },
-            keyup: function (e, editor) {
-              //添加事件，在每次按键按下时，都记录一下最后停留位置
-              that.$nextTick(function () {
-                that.lastEditRange = getSelection().getRangeAt(0);
-              });
-            },
-            click: function (e, editor) {
-              //添加事件，在每次鼠标点击时，都记录一下最后停留位置
-              that.$nextTick(function () {
-                that.lastEditRange = getSelection().getRangeAt(0);
-              });
-            },
-          },
-        },
-        classifyList:[],
-        addDocForm:{
-          Title:"",
-          ClassifyId:"",
-          Author:"",
-          Status:1,
-          Content:'',
-          AnchorData:[],
-          RecommendData:[{Name:"",Url:""},{Name:"",Url:""}],
-        },
-        addDocRules:{
-          Title:{required:true,message:'文章标题不能为空',trigger:'blur'},
-          ClassifyId:{required:true,message:'文章所属分类不能为空',trigger:'change'},
-          Author:{required:true,message:'文章作者不能为空',trigger:'blur'}
-        },
-        anchorData:[],
-        isSubmiting:false,
-        autoSaveTimer:null,
-        modifyTime:'',
-        contentChange:false
-      }
-    },
-    watch:{
-      addDocForm:{
-        handler:function(){
-          console.log('内容改变');
-          this.contentChange=true
-        },
-        deep:true
-      }
-    },
-    created() {
-      this.getClassifyData()
-      if(this.$route.query.DocId){
-        assistanceDocInterence.getAssistanceDoc({DocId:this.$route.query.DocId}).then(res=>{
-          if(res.Ret == 200){
-            this.addDocForm={
-              Id:res.Data.Id,
-              Title:res.Data.Title,
-              ClassifyId:res.Data.ClassifyId,
-              Author:res.Data.Author,
-              Status:res.Data.Status,
-              Content:res.Data.Content,
-              RecommendData:res.Data.Recommend || [{Name:"",Url:""},{Name:"",Url:""}]
-            }
-            this.modifyTime=res.Data.ModifyTime
-            if((!this.autoSaveTimer) && this.addDocForm.Id){
-              this.autoSaveTimer=setInterval(()=>{
-                this.saveDocument('保存',true)
-              },6000)
-            }
-          }
-        })
-      }
-    },
-    destroyed(){
-      clearInterval(this.autoSaveTimer)
-      this.autoSaveTimer=null
-    },
-    mounted(){
-      this.addDocForm.Content=""
-    },
-    methods: {
-      getClassifyData(){
-        assistanceDocInterence.getAssistanceClassifyList().then(res=>{
-          if(res.Ret == 200){
-            this.classifyList = res.Data?res.Data.AllNodes||[]:[]
-          }
-        })
-      },
-      // 生成锚点
-      generateAnchor(){
-        this.anchorData=[]
-        // 搜索富文本中的h1和h2标签 当做一级和二级的锚点
-        this.searchTitleTag(0,1)
-        // console.log(this.addDocForm.Content,this.anchorData);
-      },
-      // 搜索标题标签h1,h2
-      searchTitleTag(searchPosition,firstLevel){
-        let frontH1Posiiton,nextH1Posiiton,H2Posiiton=0
-        let frontH1RightPosiiton,H2RightPosiiton=0
-        let backH1Posiiton,backH2Posiiton=0
-        // 本次搜索第一个h1的位置
-        frontH1Posiiton = this.addDocForm.Content.indexOf('<h1',searchPosition)
-        // 右闭合标签
-        frontH1RightPosiiton = this.addDocForm.Content.indexOf('>',frontH1Posiiton)
-
-        if(frontH1Posiiton == -1) return 
-
-        let anchorText=`id="doc_anchor_${firstLevel}"`
-        // console.log(frontH1Posiiton,firstLevel,'firstLevel');
-        this.addDocForm.Content = this.addDocForm.Content.substring(0, frontH1Posiiton+3) 
-                                  +" "+anchorText + this.addDocForm.Content.substring(frontH1RightPosiiton);
-        // 再次获取右闭合标签
-        frontH1RightPosiiton = this.addDocForm.Content.indexOf('>',frontH1Posiiton)
-        // 对应的</h1>的位置 原本用的</h1>，后来发现> 和 </h1>之间会掺其他标签
-        backH1Posiiton = this.addDocForm.Content.indexOf('<',frontH1RightPosiiton)
-        // 获取标题
-        let AnchorTitle = this.addDocForm.Content.substring(frontH1RightPosiiton+1,backH1Posiiton)
-
-        this.anchorData.push({
-          AnchorId:`${firstLevel}`,
-          Anchor:`doc_anchor_${firstLevel}`,
-          AnchorName:AnchorTitle,
-          Child:[]})
-        // 本次搜索下一个h1的位置
-        nextH1Posiiton = this.addDocForm.Content.indexOf('<h1',backH1Posiiton)==-1?
-                          this.addDocForm.Content.length:this.addDocForm.Content.indexOf('<h1',backH1Posiiton)
-        // 从第一个h1的位置开始查找h2标签
-        H2Posiiton = this.addDocForm.Content.indexOf('<h2',backH1Posiiton)
-
-        let secondLevel=1
-        while (!(H2Posiiton==-1 || H2Posiiton>nextH1Posiiton)) {
-          // 右闭合标签
-          H2RightPosiiton = this.addDocForm.Content.indexOf('>',H2Posiiton)
-
-          // 找到了，并且位置小于下一个h1的位置 
-          let anchorTextH2=`id="doc_anchor_${firstLevel}_${secondLevel}"`
-          // console.log(H2Posiiton,secondLevel,'secondLevel');
-          this.addDocForm.Content = this.addDocForm.Content.substring(0, H2Posiiton+3) 
-                                    +" "+anchorTextH2 + this.addDocForm.Content.substring(H2RightPosiiton);
-          // 再次获取右闭合标签
-          H2RightPosiiton = this.addDocForm.Content.indexOf('>',H2Posiiton)
-          // 对应的</h2>的位置  原本用的</h2>，后来发现> 和 </h2>之间会掺其他标签
-          backH2Posiiton = this.addDocForm.Content.indexOf('<',H2RightPosiiton)
-          // 获取标题
-          let AnchorTitleLevelTwo = this.addDocForm.Content.substring(H2RightPosiiton+1,backH2Posiiton)
-          this.anchorData[firstLevel-1].Child.push(
-            {AnchorId:`${firstLevel}_${secondLevel}`,
-            Anchor:`doc_anchor_${firstLevel}_${secondLevel}`,
-            AnchorName:AnchorTitleLevelTwo,
-            Child:[]
-          })
-          // nextH1Posiiton 和 secondLevel 随之增加
-          // nextH1Posiiton +=anchorTextH2.length+1
-          // 更新nextH1Posiiton位置
-          nextH1Posiiton = this.addDocForm.Content.indexOf('<h1',backH1Posiiton)==-1?
-                          this.addDocForm.Content.length:this.addDocForm.Content.indexOf('<h1',backH1Posiiton)
-          secondLevel++
-          H2Posiiton = this.addDocForm.Content.indexOf('<h2',backH2Posiiton)
-        }
-        // 结束一轮 <h1></h1>标签的寻找
-        if(this.addDocForm.Content.indexOf('<h1',backH1Posiiton+4)!=-1){
-          // 如果有下一个h1的标签，说明寻找还没结束，继续寻找
-          firstLevel++
-          this.searchTitleTag(nextH1Posiiton,firstLevel)
-        }
-      },
-      previewDocument(){
-        if(this.isSubmiting) return 
-        if(!this.addDocForm.Content){
-          this.$message.error("文章内容不能为空")
-          return
-        }
-        let bottomLink = createBottomHref(this.addDocForm.RecommendData)
-        
-        sessionStorage.setItem("documentDoc",this.addDocForm.Content+bottomLink)
-        let { href } = this.$router.resolve({ path: "/assistanceDocDetail" });
-        window.open(href, "_blank");
-      },
-      saveDocument(type,isAuto){
-        if(this.isSubmiting) return 
-        this.$refs.addDocForm.validate(valid=>{
-          if(valid){
-            if(!this.addDocForm.Content){
-              this.$message.error("文章内容不能为空")
-              return
-            }
-            if(!isAuto) this.isSubmiting=true
-            if(type=="发布") this.addDocForm.Status=2
-
-            this.generateAnchor()
-            this.addDocForm.AnchorData = this.anchorData
-            //保存
-            assistanceDocInterence.addAssistanceDoc({...this.addDocForm,IsChange:this.contentChange}).then(res=>{
-              if(res.Ret == 200){
-                this.contentChange=false
-
-                !isAuto && this.$message({
-                  type:'success',
-                  message:'操作成功',
-                  duration:1000
-                })
-                if(type=="发布"){
-                  setTimeout(()=>{
-                    this.$router.back()
-                  },1000)
-                }else{
-                  this.isSubmiting=false
-                  this.modifyTime=res.Data.ModifyTime
-                  if(!this.addDocForm.Id){
-                    //新增
-                    setTimeout(()=>{
-                      this.$router.replace("/assistanceDocAdd?DocId="+res.Data.HelpDocId)
-                      this.addDocForm.Id = res.Data.HelpDocId
-                      if((!this.autoSaveTimer) && this.addDocForm.Id){
-                        this.autoSaveTimer=setInterval(()=>{
-                          this.saveDocument('保存',true)
-                        },6000)
-                      }
-                    },1000)
-                  }
-                }
-              }
-            }).catch(()=>{
-              this.isSubmiting=false
-            })
-          }
-        })
-      }
-    },
-  }
-</script>
-
 <style lang="scss" scoped>
   .assistance-edit-container{
     display: flex;