标注中的文本错误bug、上一条、下一条的bug

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue_node",
   "version": "4.3.1",
-  "description": "vue+node后台管理系统",
+  "description": "数据标注",
   "author": "XiaoMing",
   "scripts": {
     "dev": "vue-cli-service serve",

src/settings.js

@@ -6,7 +6,7 @@ module.exports = {
   /**
    默认标题
    */
-  title: 'Node后台管理',
+  title: '数据标注',
   /**
    是否显示悬浮设置图标
    */

src/views/data_mark/dataMark/markPage.vue

@@ -256,13 +256,22 @@ export default {
     handleCurrentChange(val) {
       // this.queryParams.id = val.id
       // this.loading = true
-      document.getElementById('text-container').innerHTML = ''
-      const flag = this.dataList.findIndex(item => {
-        return item.id === val.id
-      })
-      if (flag !== -1) {
-        const newData = this.dataList[flag]
-        this.setNewData(newData)
+      const isSave = this.ifCompare(JSON.stringify(this.markRelationList), this.markData.markInfo)
+      if (!isSave) {
+        this.$confirm('标注内容未保存，请保存后再继续', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {}).catch(() => {})
+      } else {
+        document.getElementById('text-container').innerHTML = ''
+        const flag = this.dataList.findIndex(item => {
+          return item.id === val.id
+        })
+        if (flag !== -1) {
+          const newData = this.dataList[flag]
+          this.setNewData(newData)
+        }
       }
     },
     changeParentLabel() {
@@ -435,14 +444,32 @@ export default {
       const selectMarkItem = this.markTextList.find(list => list.mark_id === this.selectMarkedId)
       // console.log('item', item)
 
-      // const textContainer = document.getElementById('text-container')
+      const textContainer = document.getElementById('text-container')
       const bigContainer = document.getElementById(this.selectMarkedId)
 
       const textSpan = bigContainer.firstElementChild.innerText
+
       const markEl = new Mark(bigContainer)
-      markEl.unmark()
-      bigContainer.insertAdjacentText('beforebegin', textSpan)
-      bigContainer.remove()
+
+      let newText = ''
+      textContainer.childNodes.forEach((node, index) => {
+        // 如果是 div 元素，则只提取其内部文本内容
+        if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'div' && node.firstElementChild.innerText === textSpan) {
+          const nowNodeValue = textContainer.childNodes[index - 1].nodeValue
+          newText = nowNodeValue + textSpan
+          textContainer.childNodes[index - 1].nodeValue = newText
+          const nextNode = textContainer.childNodes[index + 1]
+
+          nextNode.parentNode.removeChild(nextNode)
+          if (nextNode.nodeType === Node.TEXT_NODE) {
+            textContainer.childNodes[index - 1].nodeValue = newText + nextNode.nodeValue
+            markEl.unmark()
+            bigContainer.remove()
+          }
+        }
+      })
+      // bigContainer.insertAdjacentText('beforebegin', textSpan)
+      // bigContainer.remove()
 
       this.markTextList.splice(
         this.markTextList?.findIndex((t) => t.mark_id === this.selectMarkedId),
@@ -609,76 +636,87 @@ export default {
 
     // 上一条
     handlePrev() {
-      const flag = this.dataList.findIndex(item => {
-        return item.id === this.markData.id
-      })
-      if (flag !== -1 && flag === 0) {
-        if (this.queryParams.page === 1) {
-          this.$message({
-            message: '已经是第一条数据',
-            type: 'warning'
-          })
+      const isSave = this.ifCompare(JSON.stringify(this.markRelationList), this.markData.markInfo)
+      if (!isSave) {
+        this.$confirm('标注内容未保存，请保存后再继续', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {}).catch(() => {})
+      } else {
+        const flag = this.dataList.findIndex(item => {
+          return item.id === this.markData.id
+        })
+        if (flag !== -1 && flag === 0) {
+          if (this.queryParams.page === 1) {
+            this.$message({
+              message: '已经是第一条数据',
+              type: 'warning'
+            })
+          } else {
+            this.loading = true
+            this.queryParams.page = this.queryParams.page - 1
+            getDataListApi(this.queryParams).then((response) => {
+              this.dataList = response.data
+              this.total = response.total
+              this.handlePNChange('previous')
+              this.loading = false
+            })
+          }
         } else {
-          this.loading = true
-          this.queryParams.page = this.queryParams.page - 1
-          getDataListApi(this.queryParams).then((response) => {
-            this.dataList = response.data
-            this.total = response.total
-            this.handlePNChange('previous')
-            this.loading = false
-          })
+          this.handlePNChange('previous')
         }
-      } else {
-        this.handlePNChange('previous')
       }
-
-      // const isSave = JSON.stringify(this.markRelationList) === this.markData.markInfo
-      // if (!isSave) {
-      //   this.$confirm(`标注内容未保存，是否保存`, '提示', {
-      //     confirmButtonText: '确定',
-      //     cancelButtonText: '取消',
-      //     type: 'warning'
-      //   }).then(() => {
-      //     this.handleSave()
-      //   })
-      // } else {
-      //   this.loading = true
-      //   this.queryParams.page = this.queryParams.page - 1
-      //   getDataListApi(this.queryParams).then((response) => {
-      //     this.dataList = response.data
-      //     this.total = response.total
-      //     this.handlePNChange('previous')
-      //     this.loading = false
-      //   })
-      // }
     },
 
     // 下一条
     handleNext() {
-      const flag = this.dataList.findIndex(item => {
-        return item.id === this.markData.id
-      })
-      if (flag !== -1 && flag === this.dataList.length - 1) {
-        if (Math.ceil(this.total / this.queryParams.size) === this.queryParams.page) {
-          this.$message({
-            message: '已经是最后一条数据',
-            type: 'warning'
-          })
+      const isSave = this.ifCompare(JSON.stringify(this.markRelationList), this.markData.markInfo)
+      if (!isSave) {
+        this.$confirm('标注内容未保存，请保存后再继续', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {}).catch(() => {})
+      } else {
+        const flag = this.dataList.findIndex(item => {
+          return item.id === this.markData.id
+        })
+        if (flag !== -1 && flag === this.dataList.length - 1) {
+          if (Math.ceil(this.total / this.queryParams.size) === this.queryParams.page) {
+            this.$message({
+              message: '已经是最后一条数据',
+              type: 'warning'
+            })
+          } else {
+            this.loading = true
+            this.queryParams.page = this.queryParams.page + 1
+            getDataListApi(this.queryParams).then((response) => {
+              this.dataList = response.data
+              this.total = response.total
+              this.handlePNChange('next')
+              this.loading = false
+            })
+          }
         } else {
-          this.loading = true
-          this.queryParams.page = this.queryParams.page + 1
-          getDataListApi(this.queryParams).then((response) => {
-            this.dataList = response.data
-            this.total = response.total
-            this.handlePNChange('next')
-            this.loading = false
-          })
+          this.handlePNChange('next')
         }
-      } else {
-        this.handlePNChange('next')
       }
     },
 
+    // 比较两个对象是否全等
+    ifCompare(object1, object2) {
+      var o1keys = Object.keys(object1)
+      var o2keys = Object.keys(object2)
+      if (o2keys.length !== o1keys.length) return false
+      for (let i = 0; i <= o1keys.length - 1; i++) {
+        const key = o1keys[i]
+        if (!o2keys.includes(key)) return false
+        if (object2[key] !== object1[key]) return false
+      }
+      return true
+    },
+
     // 清空标记
     clearMark() {
       this.$confirm(`是否清空该数据的所有标记内容？该操作不可逆`, '提示', {
@@ -707,15 +745,16 @@ export default {
         this.$modal.msgSuccess('保存成功')
         getDataListApi(this.queryParams).then((response) => {
           this.dataList = response.data
+          // console.log('this.markRelationList', this.markRelationList)
+
+          this.markData.markInfo = JSON.stringify(this.markRelationList)
+          // this.handleNext()
         })
-        this.handleNext()
       })
     },
 
     // 删除该条关系
     handleDeleteRelation(row) {
-      console.log('row', row)
-
       const delIndex = this.markRelationList.findIndex(item => {
         return item === row
       })

vue.config.js

@@ -6,7 +6,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const name = defaultSettings.title || '后台管理' // page title
+const name = defaultSettings.title || '数据标注' // page title
 
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
@@ -48,7 +48,7 @@ module.exports = {
         '@': resolve('src')
       }
     },
-    devtool:'source map'
+    devtool: 'source map'
   },
   chainWebpack(config) {
     // it can improve the speed of the first screen, it is recommended to turn on preload