[update] 编辑条款/译文增加编辑角标

src/views/documentTool/documentSplit/modules/SplitAddForm.vue

@@ -196,6 +196,15 @@
               <a-button v-if="clause.type === TypeOfClauseItem.TABLE.value" @click="splitEdit(index,clause)">
                 {{ $t('edit') }}
               </a-button>
+              <!--  文本类型的编辑,编辑角标 -->
+              <a-button v-if="clause.type === TypeOfClauseItem.TEXT.value" @click="splitEditText(index,clause)">
+                {{ $t('edit') + $t('docTool.split.cornerMark') }}
+              </a-button>
+              <!--编辑译文文本，编辑角标-->
+              <a-button v-if="clause.type === TypeOfClauseItem.TEXT.value"
+                        @click="splitEditTextTranslation(index,clause)">
+                {{ $t('edit') + $t('docTool.split.translation') + $t('docTool.split.cornerMark') }}
+              </a-button>
               <!--编辑译文表格-->
               <a-button v-if="clause.type === TypeOfClauseItem.TABLE.value"
                         @click="splitEditTranslation(index,clause)">
@@ -263,6 +272,8 @@
     <split-detail-add-type-check ref="splitDetailAddTypeCheck" @ok="handleAddOk" />
     <!--  编辑表格弹框 -->
     <split-detail-add-table ref="splitDetailAddTable" @editOk="editTableOk" />
+    <!--  编辑文本弹框 -->
+    <split-detail-add-text ref="splitDetailAddText" @editOk="editTextOk" />
   </a-drawer>
 </template>
 
@@ -272,6 +283,7 @@ import StandardSelection from '../../../../components/selection/StandardSelectio
 // 类型选择弹框
 import SplitDetailAddTypeCheck from './SplitDetailAddTypeCheck.vue'
 import SplitDetailAddTable from './SplitDetailAddTable.vue'
+import SplitDetailAddText from './SplitDetailAddText'
 import {
   getDocSplitEditForm,
   getDocSplitEditFormData,
@@ -301,7 +313,8 @@ export default {
     UploadFile,
     StandardSelection,
     SplitDetailAddTypeCheck,
-    STreeSelect
+    STreeSelect,
+    SplitDetailAddText
   },
   data () {
     return {
@@ -833,6 +846,33 @@ export default {
       //   return `（${ClauseUsableRange.nameOfIndex(fieldUsableRange[0])}）`
       // }
       return ''
+    },
+    splitEditText (index, item) {
+      this.currentFieldObj = this.operateField.content
+      this.addIndex = index
+      this.$refs.splitDetailAddText.open(item.itemContent)
+      this.$refs.splitDetailAddText.isTextEdit = true
+    },
+    splitEditTextTranslation (index, item) {
+      this.currentFieldObj = this.operateField.translation
+      this.addIndex = index
+      this.$refs.splitDetailAddText.open(item.translation)
+      this.$refs.splitDetailAddText.isTextEdit = true
+    },
+    editTextOk (ueContent) {
+      console.log('-------ueContent', ueContent)
+      console.log('-------this.currentFieldObj', this.currentFieldObj)
+      // 如果内容和译文有一个有内容，就不进行覆盖
+      if (this.contentList[this.addIndex][this.operateField.content.field] || this.contentList[this.addIndex][this.operateField.translation.field]) {
+        this.contentList[this.addIndex][this.currentFieldObj.field] = ueContent
+      } else {
+        this.contentList[this.addIndex] = {
+          id: '',
+          type: 'TEXT',
+          [this.currentFieldObj.field]: ueContent
+        }
+      }
+      this.contentList = JSON.parse(JSON.stringify(this.contentList))
     }
   }
 }

src/views/documentTool/documentSplit/modules/SplitDetailAddText.vue

@@ -0,0 +1,99 @@
+<template>
+  <j-modal
+    :title="title"
+    class="split-table-title"
+    :visible="textVisible"
+    switchFullscreen
+    :confirm-loading="confirmLoading"
+    @ok="handleOkText"
+    @cancel="handleCancelText"
+    :width="700"
+  >
+    <u-editor :content="ueContent" :config="config" ref="ueditor" @editor-onChange="uEditorChange"></u-editor>
+  </j-modal>
+</template>
+
+<script>
+import UEditor from '../../../../components/uEditor/UEditor.vue'
+export default {
+  name: 'SplitDetailAddText',
+  components: { UEditor },
+  data () {
+    return {
+      title: this.$t('docTool.split.text'),
+      textVisible: false,
+      confirmLoading: false,
+      ueContent: '',
+      // UE编辑器配置
+      config: {
+        // 可以在此处定义工具栏的内容
+        toolbars: [
+          [
+            'subscript', // 下标
+            'superscript' // 上标
+          ]
+        ],
+        autoHeightEnabled: false,
+        autoFloatEnabled: false,
+        initialContent: '', // 初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
+        autoClearinitialContent: true, // 是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
+        initialFrameWidth: 650,
+        elementPathEnabled: false,
+        initialFrameHeight: 300,
+        maximumWords: 4000,
+        BaseUrl: '',
+        UEDITOR_HOME_URL: '/ueditor/',
+        editTableIndex: 1
+      },
+      isTextEdit: false
+    }
+  },
+  methods: {
+    open (str) {
+      console.log('$$$$$$$$$$$$', str)
+      this.textVisible = true
+      this.ueContent = str
+      this.$nextTick(() => {
+        this.$refs.ueditor.setContent(this.ueContent)
+      })
+    },
+    // 表格确认按钮
+    handleOkText () {
+      if (this.isTextEdit) {
+        let resultStr = ''
+        // 正则表达式匹配除了<sub>和</sub>，<sup>和</sup>之外的所有HTML标签
+        const regex = /<(?!(?:sub|sup|\/sub|\/sup)\b)[^>]*>/gi
+        resultStr = this.ueContent.replace(regex, '')
+        // 把空的sup标签或sub标签去掉
+        const regexTwo = /<sup><\/sup>|<sub><\/sub>/g
+        resultStr = resultStr.replace(regexTwo, '')
+        this.$emit('editOk', resultStr)
+      } else {
+        this.$emit('addOk', this.ueContent)
+      }
+      this.close()
+    },
+    // 表格取消按钮
+    handleCancelText () {
+      this.close()
+    },
+    close () {
+      this.textVisible = false
+      this.isTextEdit = false
+      this.ueContent = ''
+      this.$nextTick(() => {
+        this.$refs.ueditor.execCommand()
+      })
+    },
+    // 获取表格内容
+    uEditorChange (val) {
+      console.log('--------------uEditorChange------------', val)
+      this.ueContent = val
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>