@@ -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 20 px 20 px ;
& - content {
width : 0 ;
flex : 1 ;
& - box {
display : flex ;
justify - content : space - between ;
/deep/ table {
width : 100 % ;
border : 1 px solid ;
td {
. clause - item - content {
width : 0 ;
flex : 1 ;
/deep/ table {
width : 100 % ;
border : 1 px solid ;
td {
border : 1 px solid ;
}
}
/ deep / img {
max - width : 100 % ;
max - height : 500 px ;
}
}
/ deep / img {
max - width : 100 % ;
max - height : 500 px ;
}
}
& - operate {
. ant - btn {
margin - bottom : 15 px ;
. ant - btn : not ( : first - child ) {
margin - left : 15 px
}
}
danshihao