[update 拆分] 译文改成多字段

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

@@ -174,7 +174,7 @@
         <div class="header-text">
           {{ $t('docTool.split.clauseContent') }}
           <!--新增条款项-->
-          <a-button type="primary" icon="plus" ghost @click="handleAddClauseContent(-1)">{{ $t('newlyAdded') }}</a-button>
+          <a-button type="primary" icon="plus" ghost @click="handleAddClauseContent(multiFieldEnums.content, -1)">{{ $t('newlyAdded') }}</a-button>
         </div>
         <template v-if="contentList && contentList.length > 0">
           <div class="clause-item" v-for="(clause, index) in contentList" :key="index + 'clause'">
@@ -195,11 +195,45 @@
             </div>
             <div class="clause-item-operate">
               <a-button @click="handleAddClauseContent(index)">{{ $t('newlyAdded') }}</a-button>
-              <a-button v-if="clause.type === TypeOfClauseItem.TABLE.value" @click="splitEdit(index,clause)">{{
+              <a-button v-if="clause.type === TypeOfClauseItem.TABLE.value" @click="splitEdit(multiFieldEnums.content,index,clause)">{{
                   $t('edit')
                 }}
               </a-button>
-              <a-button @click="handleDeleteClauseContent(index, clause)">{{ $t('delete') }}</a-button>
+              <a-button @click="handleDeleteClauseContent(multiFieldEnums.content, index, clause)">{{ $t('delete') }}</a-button>
+            </div>
+          </div>
+        </template>
+
+        <!--译文部分-->
+        <div class="header-text">
+          {{ $t('docTool.split.translation') }}
+          <!--新增条款项-->
+          <a-button type="primary" icon="plus" ghost @click="handleAddClauseContent(multiFieldEnums.translation, -1)">{{ $t('newlyAdded') }}</a-button>
+        </div>
+        <template v-if="translationList && translationList.length > 0">
+          <div class="clause-item" v-for="(clause, index) in translationList" :key="index + 'translation'">
+            <div class="clause-item-content">
+              <!--文本-->
+              <a-input type="textarea"
+                       :maxLength="500"
+                       v-model="clause.translation"
+                       v-if="clause.type === TypeOfClauseItem.TEXT.value" />
+              <!--图片-->
+              <viewer>
+                <img v-if="clause.type === TypeOfClauseItem.IMG.value"
+                     :src="clause.thumbUrl?clause.thumbUrl:clause.translation"
+                     alt="">
+              </viewer>
+              <!--表格-->
+              <div v-if="clause.type === TypeOfClauseItem.TABLE.value" v-html="clause.translation"></div>
+            </div>
+            <div class="clause-item-operate">
+              <a-button @click="handleAddClauseContent(index)">{{ $t('newlyAdded') }}</a-button>
+              <a-button v-if="clause.type === TypeOfClauseItem.TABLE.value" @click="splitEdit(multiFieldEnums.translation,index,clause)">{{
+                  $t('edit')
+                }}
+              </a-button>
+              <a-button @click="handleDeleteClauseContent(multiFieldEnums.translation, index, clause)">{{ $t('delete') }}</a-button>
             </div>
           </div>
         </template>
@@ -253,15 +287,32 @@ export default {
     return {
       FieldType,
       TypeOfClauseItem,
-      hiddenFieldList: ['item_content'], // 隐藏的字段
+      hiddenFieldList: ['item_content', 'translation'], // 隐藏的字段
       radioDictSelect: [], // 使用radio样式的数据字典单选
       disabledFieldList: [], // 禁用的字段
       specialPlaceholder: {}, // 特殊的placeholder
       optionsData: {}, // 通过接口获取的下拉数据
       title: this.$t('newlyAdded'),
+      // 多字段的数据枚举
+      multiFieldEnums: Object.freeze({
+        content: {
+          thisField: 'contentList',
+          dataField: 'itemContent',
+          index: 'contentAddIndex'
+        },
+        translation: {
+          thisField: 'translationList',
+          dataField: 'translation',
+          index: 'translationAddIndex'
+        }
+      }),
+      // 当前打开弹框时的对应字段枚举对象,回调时操作该字段
+      operateMultiFieldEnum: {},
       contentList: [], // 条款内容数据
+      translationList: [], // 译文内容数据
       visible: false,
-      addIndex: 0, // 新增条款的index
+      contentAddIndex: 0, // 新增条款的index
+      translationAddIndex: 0, // 新增译文的index
       disabled: false,
       formInline: {},
       isFormInline: false,
@@ -305,6 +356,7 @@ export default {
       this.visible = true
       this.formInline = {}
       this.contentList = []
+      this.translationList = []
       this.type = 'add'
       this.getForm()
     },
@@ -459,10 +511,12 @@ export default {
       this.loading = true
       getEditClauseContent({ id: this.itemVal.id }).then(res => {
         if (res.success) {
-          this.contentList = [...res.result]
+          Object.values(this.multiFieldEnums).forEach(enums => {
-          this.contentList.forEach(item => {
+            this[enums.thisField] = JSON.parse(JSON.stringify(res.result)).filter(item => item[enums.dataField])
-            const imgData = item.itemContent.split('fileName=')[1]
+            this[enums.thisField].forEach(item => {
-            item.thumbUrl = window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + imgData
+              const imgData = item[enums.dataField] ? item[enums.dataField].split('fileName=')[1] : ''
+              item.thumbUrl = window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + imgData
+            })
           })
         }
       }).finally(() => {
@@ -471,20 +525,23 @@ export default {
     },
     /**
      * 新增条款内容
+     * @param fieldEnum - 操作的对应枚举对象
      * @param index
      */
-    handleAddClauseContent (index) {
+    handleAddClauseContent (fieldEnum, index) {
+      // 记录操作的字段,弹框完成时用
+      this.operateMultiFieldEnum = fieldEnum
       if (index === -1) {
-        this.addIndex = this.contentList.length - 1
+        this[fieldEnum.indexField] = this[fieldEnum.thisField].length - 1
       } else {
-        this.addIndex = index
+        this[fieldEnum.indexField] = index
       }
       this.$refs.splitDetailAddTypeCheck.open()
     },
     // 增加条款内容成功
     handleAddOk (type, content) {
-      const headerArr = this.contentList.splice(0, this.addIndex + 1)
+      const headerArr = this[this.operateMultiFieldEnum.thisField].splice(0, this[this.operateMultiFieldEnum.indexField] + 1)
-      const footerArr = this.contentList.splice(-this.addIndex)
+      const footerArr = this[this.operateMultiFieldEnum.thisField].splice(-this[this.operateMultiFieldEnum.indexField])
       const insertArr = []
       switch (type) {
         case TypeOfClauseItem.TEXT.value:
@@ -492,7 +549,7 @@ export default {
             insertArr.push({
               id: '',
               type: TypeOfClauseItem.TEXT.value,
-              itemContent: ''
+              [this.operateMultiFieldEnum.dataField]: ''
             })
           }
           break
@@ -500,7 +557,7 @@ export default {
           insertArr[0] = {
             id: '',
             type: TypeOfClauseItem.IMG.value,
-            itemContent: content.file.response.result.url,
+            [this.operateMultiFieldEnum.dataField]: content.file.response.result.url,
             thumbUrl: window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + content.file.response.result.fileName
           }
           break
@@ -508,19 +565,21 @@ export default {
           insertArr[0] = {
             id: '',
             type: 'TABLE',
-            itemContent: content[0]
+            [this.operateMultiFieldEnum.dataField]: content[0]
           }
       }
-      this.contentList = [...headerArr, ...insertArr, ...footerArr]
+      this[this.operateMultiFieldEnum.thisField] = [...headerArr, ...insertArr, ...footerArr]
     },
     /**
      * 表格编辑
+     * @param fieldEnum - 操作的对应枚举对象
      * @param index
      * @param item
      */
-    splitEdit (index, item) {
+    splitEdit (fieldEnum, index, item) {
-      this.addIndex = index
+      this.operateMultiFieldEnum = fieldEnum
-      this.$refs.splitDetailAddTable.open(item.itemContent)
+      this[fieldEnum.indexField] = index
+      this.$refs.splitDetailAddTable.open(item[fieldEnum.dataField])
       this.$refs.splitDetailAddTable.isTableEdit = true
     },
     /**
@@ -528,12 +587,12 @@ export default {
      * @param ueContent
      */
     editTableOk (ueContent) {
-      this.contentList[this.addIndex] = {
+      this[this.operateMultiFieldEnum.thisField][this[this.operateMultiFieldEnum.indexField]] = {
         id: '',
         type: 'TABLE',
-        itemContent: ueContent[0]
+        [this.operateMultiFieldEnum.dataField]: ueContent[0]
       }
-      this.contentList = JSON.parse(JSON.stringify(this.contentList))
+      this[this.operateMultiFieldEnum.thisField] = JSON.parse(JSON.stringify(this[this.operateMultiFieldEnum.thisField]))
     },
     // 点击点击上传按钮
     clickButtonToUpload (item) {
@@ -564,11 +623,12 @@ export default {
     },
     /**
      * 删除条款内容
+     * @param fieldEnum - 操作的对应枚举对象
      * @param index
      * @param clause
      */
-    handleDeleteClauseContent (index, clause) {
+    handleDeleteClauseContent (fieldEnum, index, clause) {
-      this.contentList.splice(index, 1)
+      this[fieldEnum.thisField].splice(index, 1)
       if (clause.id) {
         this.deleteIds.push(clause.id)
       }
@@ -580,6 +640,7 @@ export default {
       this.visible = false
       this.formInline = {}
       this.contentList = []
+      this.translationList = []
       this.interpretationArticlesList = []
     },
     handleSave () {
@@ -614,12 +675,17 @@ export default {
           formData.info_id = this.infoId
           formData.menu_id = this.menuId
           const contentList = JSON.parse(JSON.stringify(this.contentList))
-          contentList.forEach((item, index) => {
+          const translationList = JSON.parse(JSON.stringify(this.translationList))
-            if (item.type === 'IMG') {
+          const resultList = []
-              delete item.thumbUrl
+          for (let i = 0; i < Math.max(contentList.length, translationList.length); i++) {
+            // 译文属性防止覆盖内容
+            if (contentList[i].itemContent) {
+              delete translationList[i].itemContent
             }
-          })
+            resultList.push({}, Object.assign(contentList[i], translationList[i]))
-          formData.itemValEOList = contentList
+            delete resultList[i].thumbUrl
+          }
+          formData.itemValEOList = resultList
           formData.interpretationArticlesList = this.interpretationArticlesList.filter(tt => !!tt.itemContent)
           formData.delItemIds = this.deleteIds.join(',')
           submitFunc(formData).then(res => {