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

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

@@ -172,47 +172,46 @@
 
         <!--条款内容部分-->
         <div class="header-text">
-          {{ $t('docTool.split.clauseContent') }}
+          {{ $t('docTool.split.clauseContent') }} / {{ $t('docTool.split.translation') }}
           <!--新增条款项-->
-          <a-button type="primary" icon="plus" ghost @click="handleAddClauseContent(multiFieldEnums.content, -1)">{{ $t('newlyAdded') }}</a-button>
+          <a-button type="primary" icon="plus" ghost @click="handleAddClauseContent(-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'">
-            <div class="clause-item-content">
-              <!--文本-->
-              <a-input type="textarea"
-                       :maxLength="500"
-                       v-model="clause.itemContent"
-                       v-if="clause.type === TypeOfClauseItem.TEXT.value" />
-              <!--图片-->
-              <viewer>
-                <img v-if="clause.type === TypeOfClauseItem.IMG.value"
-                     :src="clause.thumbUrl?clause.thumbUrl:clause.itemContent"
-                     alt="">
-              </viewer>
-              <!--表格-->
-              <div v-if="clause.type === TypeOfClauseItem.TABLE.value" v-html="clause.itemContent"></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.content,index,clause)">{{
-                  $t('edit')
-                }}
+              <a-button v-if="clause.type === TypeOfClauseItem.TABLE.value" @click="splitEdit(index,clause)">
+                {{ $t('edit') }}
               </a-button>
-              <a-button @click="handleDeleteClauseContent(multiFieldEnums.content, index, clause)">{{ $t('delete') }}</a-button>
+              <!--编辑译文表格-->
+              <a-button v-if="clause.type === TypeOfClauseItem.TABLE.value"
+                        @click="splitEditTranslation(index,clause)">
+                {{ $t('edit') + $t('docTool.split.translation') }}
+              </a-button>
+              <!--没有图片时，新增译文图片-->
+              <a-button v-if="clause.type === TypeOfClauseItem.IMG.value && !clause.translation"
+                        @click="splitEditTranslation(index,clause)">
+                {{ $t('newlyAdded') + $t('docTool.split.translation') + $t('docTool.split.picture') }}
+              </a-button>
+              <a-button @click="handleDeleteClauseContent(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">
+            <div class="clause-item-box">
+              <div class="clause-item-content">
+                <!--文本-->
+                <a-input type="textarea"
+                         :maxLength="500"
+                         v-model="clause.itemContent"
+                         v-if="clause.type === TypeOfClauseItem.TEXT.value" />
+                <!--图片-->
+                <viewer>
+                  <img v-if="clause.type === TypeOfClauseItem.IMG.value"
+                       :src="clause[operateField.content.tempUrlField] ? clause[operateField.content.tempUrlField] : clause.itemContent"
+                       alt="">
+                </viewer>
+                <!--表格-->
+                <div v-if="clause.type === TypeOfClauseItem.TABLE.value" v-html="clause.itemContent"></div>
+              </div>
+              <div class="clause-item-content" style="margin-left: 20px;">
               <!--文本-->
               <a-input type="textarea"
                        :maxLength="500"
@@ -221,19 +220,12 @@
               <!--图片-->
               <viewer>
                 <img v-if="clause.type === TypeOfClauseItem.IMG.value"
-                     :src="clause.thumbUrl?clause.thumbUrl:clause.translation"
+                     :src="clause[operateField.translation.tempUrlField] ? clause[operateField.translation.tempUrlField] : 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>
@@ -244,6 +236,15 @@
       <a-button type="primary" class="footer-btn-save" @click="handleSave">{{ $t('preservation') }}</a-button>
     </div>
 
+    <!--  上传图片弹框  -->
+    <split-add-clause-upload-image
+      ref="uploadImg"
+      :disabled="disabled"
+      :title="$t('uploadPictures')"
+      listType="picture"
+      accept=".png,.jpeg,.jpg,.gif"
+      @uploadSuccess="uploadSuccess">
+    </split-add-clause-upload-image>
     <!--  类型选择弹框  -->
     <split-detail-add-type-check ref="splitDetailAddTypeCheck" @ok="handleAddOk" />
     <!--  编辑表格弹框 -->
@@ -271,10 +272,12 @@ import { getAction } from '../../../../api/manage'
 import { getFormDictTreeList } from '../../../../api/api'
 import STreeSelect from '../../../../components/STreeSelect'
 import TreeSelection from '../../../../components/selection/TreeSelection'
+import SplitAddClauseUploadImage from '@comp/splitUpload/SplitAddClauseUploadImage'
 
 export default {
   name: 'SplitAddForm',
   components: {
+    SplitAddClauseUploadImage,
     TreeSelection,
     JMultipleDatePicker,
     SplitDetailAddTable,
@@ -293,26 +296,16 @@ export default {
       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,
-      contentAddIndex: 0, // 新增条款的index
-      translationAddIndex: 0, // 新增译文的index
+      addIndex: 0, // 新增条款的index
+      // 操作的字段
+      operateField: {
+        content: { field: 'itemContent', tempUrlField: 'itemContentThumbUrl' },
+        translation: { field: 'translation', tempUrlField: 'translationThumbUrl' }
+      },
+      // 当前操作的字段,保存上面对象，方便扩展（用于回调使用）
+      currentFieldObj: {},
       disabled: false,
       formInline: {},
       isFormInline: false,
@@ -356,7 +349,6 @@ export default {
       this.visible = true
       this.formInline = {}
       this.contentList = []
-      this.translationList = []
       this.type = 'add'
       this.getForm()
     },
@@ -511,12 +503,14 @@ export default {
       this.loading = true
       getEditClauseContent({ id: this.itemVal.id }).then(res => {
         if (res.success) {
-          Object.values(this.multiFieldEnums).forEach(enums => {
-            this[enums.thisField] = JSON.parse(JSON.stringify(res.result)).filter(item => item[enums.dataField])
-            this[enums.thisField].forEach(item => {
-              const imgData = item[enums.dataField] ? item[enums.dataField].split('fileName=')[1] : ''
-              item.thumbUrl = window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + imgData
-            })
+          this.contentList = [...res.result]
+          this.contentList.forEach(item => {
+            const imgData = item.itemContent.split('fileName=')[1]
+            const imgDataTranslation = item.itemContent.split('fileName=')[1]
+            if (item.type === TypeOfClauseItem.IMG.value) {
+              item[this.operateField.content.tempUrlField] = window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + imgData
+              item[this.operateField.translation.tempUrlField] = window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + imgDataTranslation
+            }
           })
         }
       }).finally(() => {
@@ -525,23 +519,21 @@ export default {
     },
     /**
      * 新增条款内容
-     * @param fieldEnum - 操作的对应枚举对象
      * @param index
      */
-    handleAddClauseContent (fieldEnum, index) {
-      // 记录操作的字段,弹框完成时用
-      this.operateMultiFieldEnum = fieldEnum
+    handleAddClauseContent (index) {
+      this.currentFieldObj = this.operateField.content
       if (index === -1) {
-        this[fieldEnum.indexField] = this[fieldEnum.thisField].length - 1
+        this.addIndex = this.contentList.length - 1
       } else {
-        this[fieldEnum.indexField] = index
+        this.addIndex = index
       }
       this.$refs.splitDetailAddTypeCheck.open()
     },
     // 增加条款内容成功
     handleAddOk (type, content) {
-      const headerArr = this[this.operateMultiFieldEnum.thisField].splice(0, this[this.operateMultiFieldEnum.indexField] + 1)
-      const footerArr = this[this.operateMultiFieldEnum.thisField].splice(-this[this.operateMultiFieldEnum.indexField])
+      const headerArr = this.contentList.splice(0, this.addIndex + 1)
+      const footerArr = this.contentList.splice(-this.addIndex)
       const insertArr = []
       switch (type) {
         case TypeOfClauseItem.TEXT.value:
@@ -549,7 +541,7 @@ export default {
             insertArr.push({
               id: '',
               type: TypeOfClauseItem.TEXT.value,
-              [this.operateMultiFieldEnum.dataField]: ''
+              [this.currentFieldObj.field]: ''
             })
           }
           break
@@ -557,29 +549,53 @@ export default {
           insertArr[0] = {
             id: '',
             type: TypeOfClauseItem.IMG.value,
-            [this.operateMultiFieldEnum.dataField]: content.file.response.result.url,
-            thumbUrl: window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + content.file.response.result.fileName
+            [this.currentFieldObj.field]: content.file.response.result.url,
+            [this.currentFieldObj.tempUrlField]: window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + content.file.response.result.fileName
           }
           break
         case TypeOfClauseItem.TABLE.value:
           insertArr[0] = {
             id: '',
             type: 'TABLE',
-            [this.operateMultiFieldEnum.dataField]: content[0]
+            [this.currentFieldObj.field]: content[0]
           }
       }
-      this[this.operateMultiFieldEnum.thisField] = [...headerArr, ...insertArr, ...footerArr]
+      this.contentList = [...headerArr, ...insertArr, ...footerArr]
     },
     /**
-     * 表格编辑
-     * @param fieldEnum - 操作的对应枚举对象
+     * 译文编辑
      * @param index
      * @param item
      */
-    splitEdit (fieldEnum, index, item) {
-      this.operateMultiFieldEnum = fieldEnum
-      this[fieldEnum.indexField] = index
-      this.$refs.splitDetailAddTable.open(item[fieldEnum.dataField])
+    splitEditTranslation (index, item) {
+      this.currentFieldObj = this.operateField.translation
+      this.addIndex = index
+      // 图片
+      if (item.type === TypeOfClauseItem.IMG.value) {
+        this.$refs.uploadImg.open()
+      } else if (item.type === TypeOfClauseItem.TABLE.value) {
+        this.$refs.splitDetailAddTable.open(item.translation)
+        this.$refs.splitDetailAddTable.isTableEdit = true
+      }
+    },
+    // 译文上传图片
+    uploadSuccess (file, data, imgs) {
+      Object.assign(this.contentList[this.addIndex], {
+        type: TypeOfClauseItem.IMG.value,
+        [this.currentFieldObj.field]: file.response.result.url,
+        [this.currentFieldObj.tempUrlField]: window._CONFIG.domianURL + '/sys/split/file/getImage?fileName=' + file.response.result.fileName
+      })
+      this.$forceUpdate()
+    },
+    /**
+     * 表格编辑
+     * @param index
+     * @param item
+     */
+    splitEdit (index, item) {
+      this.currentFieldObj = this.operateField.content
+      this.addIndex = index
+      this.$refs.splitDetailAddTable.open(item.itemContent)
       this.$refs.splitDetailAddTable.isTableEdit = true
     },
     /**
@@ -587,12 +603,12 @@ export default {
      * @param ueContent
      */
     editTableOk (ueContent) {
-      this[this.operateMultiFieldEnum.thisField][this[this.operateMultiFieldEnum.indexField]] = {
+      this.contentList[this.addIndex] = {
         id: '',
         type: 'TABLE',
-        [this.operateMultiFieldEnum.dataField]: ueContent[0]
+        [this.currentFieldObj.field]: ueContent[0]
       }
-      this[this.operateMultiFieldEnum.thisField] = JSON.parse(JSON.stringify(this[this.operateMultiFieldEnum.thisField]))
+      this.contentList = JSON.parse(JSON.stringify(this.contentList))
     },
     // 点击点击上传按钮
     clickButtonToUpload (item) {
@@ -623,12 +639,11 @@ export default {
     },
     /**
      * 删除条款内容
-     * @param fieldEnum - 操作的对应枚举对象
      * @param index
      * @param clause
      */
-    handleDeleteClauseContent (fieldEnum, index, clause) {
-      this[fieldEnum.thisField].splice(index, 1)
+    handleDeleteClauseContent (index, clause) {
+      this.contentList.splice(index, 1)
       if (clause.id) {
         this.deleteIds.push(clause.id)
       }
@@ -640,7 +655,6 @@ export default {
       this.visible = false
       this.formInline = {}
       this.contentList = []
-      this.translationList = []
       this.interpretationArticlesList = []
     },
     handleSave () {
@@ -675,17 +689,13 @@ export default {
           formData.info_id = this.infoId
           formData.menu_id = this.menuId
           const contentList = JSON.parse(JSON.stringify(this.contentList))
-          const translationList = JSON.parse(JSON.stringify(this.translationList))
-          const resultList = []
-          for (let i = 0; i < Math.max(contentList.length, translationList.length); i++) {
-            // 译文属性防止覆盖内容
-            if (contentList[i].itemContent) {
-              delete translationList[i].itemContent
+          contentList.forEach((item, index) => {
+            if (item.type === 'IMG') {
+              delete item[this.operateField.content.tempUrlField]
+              delete item[this.operateField.translation.tempUrlField]
             }
-            resultList.push({}, Object.assign(contentList[i], translationList[i]))
-            delete resultList[i].thumbUrl
-          }
-          formData.itemValEOList = resultList
+          })
+          formData.itemValEOList = contentList
           formData.interpretationArticlesList = this.interpretationArticlesList.filter(tt => !!tt.itemContent)
           formData.delItemIds = this.deleteIds.join(',')
           submitFunc(formData).then(res => {
@@ -936,30 +946,33 @@ export default {
 }
 
 .clause-item {
-  display: flex;
-  justify-content: space-between;
   margin: 0 0 20px 20px;
 
-  &-content {
-    width: 0;
-    flex: 1;
+  &-box {
+    display: flex;
+    justify-content: space-between;
 
-    /deep/ table {
-      width: 100%;
-      border: 1px solid;
-      td {
+    .clause-item-content {
+      width: 0;
+      flex: 1;
+
+      /deep/ table {
+        width: 100%;
         border: 1px solid;
+        td {
+          border: 1px solid;
+        }
+      }
+      /deep/ img {
+        max-width: 100%;
+        max-height: 500px;
       }
-    }
-    /deep/ img {
-      max-width: 100%;
-      max-height: 500px;
     }
   }
 
   &-operate {
-
-    .ant-btn {
+    margin-bottom: 15px;
+    .ant-btn:not(:first-child) {
       margin-left: 15px
     }
   }