update 文档拆分-编辑-批量编辑、编辑
This commit is contained in:
赵霄
@@ -14,16 +14,33 @@
|
||||
<div class="form-flex-box">
|
||||
<template v-for="(item, index) in dataList">
|
||||
<div :key="index"
|
||||
class="box-title-text form-flex-item-half"
|
||||
:class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
|
||||
class="box-title-text form-flex-item"
|
||||
v-if="!hiddenFieldList.includes(item.dbFieldName)">
|
||||
<div class="title-text">
|
||||
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
|
||||
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
|
||||
</div>
|
||||
<a-form-model-item class="item-model" :prop="item.dbFieldName">
|
||||
<!--条文解读-->
|
||||
<template v-if="item.dbFieldName === 'interpretation_articles'">
|
||||
<div class="unscramble-item"
|
||||
v-for="(unscramble, unscrambleIndex) in interpretationArticlesList"
|
||||
:key="unscrambleIndex + 'interpretation_articles'">
|
||||
<div class="unscramble-item-content">
|
||||
<!--文本-->
|
||||
<a-input type="textarea" :maxLength="500" v-model="unscramble.itemContent"/>
|
||||
</div>
|
||||
<div class="unscramble-item-operate">
|
||||
<a-button @click="handleAddUnscramble(unscrambleIndex)">{{ $t('newlyAdded') }}</a-button>
|
||||
<a-button @click="handleDeleteUnscramble(unscrambleIndex, unscramble)"
|
||||
:disabled="unscrambleIndex === interpretationArticlesList.length - 1">
|
||||
{{ $t('delete') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 1, 日期单选 -->
|
||||
<a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
|
||||
<a-date-picker v-else-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
|
||||
class="box-input"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||||
@@ -150,7 +167,7 @@
|
||||
<div class="clause-item" v-for="(clause, index) in contentList" :key="index + 'clause'">
|
||||
<div class="clause-item-content">
|
||||
<!--文本-->
|
||||
<a-input type="textarea" :maxLength="1000" v-model="clause.itemContent" v-if="clause.type === TypeOfClauseItem.TEXT.value"/>
|
||||
<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="">
|
||||
@@ -194,7 +211,9 @@ import {
|
||||
} from '../../../../api/documentToolApi.js'
|
||||
import UserSelection from '../../../../components/selection/UserSelection.vue'
|
||||
import JMultipleDatePicker from '../../../../components/JMultipleDatePicker.vue'
|
||||
import { FieldType, TypeOfClauseItem } from '../../../../enums/commonEnums'
|
||||
import { FieldType, TypeOfClauseItem, YesOrNoEnum } from '../../../../enums/commonEnums'
|
||||
import { getAction } from '../../../../api/manage'
|
||||
import { getFormDictTreeList } from '../../../../api/api'
|
||||
|
||||
export default {
|
||||
name: 'SplitAddForm',
|
||||
@@ -230,7 +249,8 @@ export default {
|
||||
deleteIds: [],
|
||||
itemVal: {},
|
||||
contentTrees: '',
|
||||
isTableEdit: false
|
||||
isTableEdit: false,
|
||||
interpretationArticlesList: [] // 条文解读数据
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@@ -251,16 +271,43 @@ export default {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 是否长期有效，是的话新认证实施日期、已认证实施日期、新注册实施日期为多选，否则为单选
|
||||
'formInline.is_long_effect': {
|
||||
handler (value) {
|
||||
const indexArr = []
|
||||
// 新认证实施日期
|
||||
indexArr[0] = this.dataList.findIndex(tt => tt.dbFieldName === 'new_cer_implement_date')
|
||||
// 已认证实施日期
|
||||
indexArr[1] = this.dataList.findIndex(tt => tt.dbFieldName === 'cer_implement_date')
|
||||
// 新注册实施日期
|
||||
indexArr[2] = this.dataList.findIndex(tt => tt.dbFieldName === 'new_register_implement_date')
|
||||
delete this.formInline.new_cer_implement_date
|
||||
delete this.formInline.cer_implement_date
|
||||
delete this.formInline.new_register_implement_date
|
||||
if (value === YesOrNoEnum.YES.value) {
|
||||
indexArr.forEach(index => {
|
||||
this.$set(this.dataList[index], 'fieldShowType', FieldType.DATE_MORE.value)
|
||||
})
|
||||
} else if (value === YesOrNoEnum.NO.value) {
|
||||
indexArr.forEach(index => {
|
||||
this.$set(this.dataList[index], 'fieldShowType', FieldType.DATE_SINGLE.value)
|
||||
})
|
||||
}
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
add () {
|
||||
this.visible = true
|
||||
this.formInline = {}
|
||||
this.contentList = []
|
||||
this.type = 'add'
|
||||
this.getForm()
|
||||
this.visible = true
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
@@ -291,12 +338,37 @@ export default {
|
||||
this.dataList = res.result
|
||||
this.ruleList = res.result
|
||||
this.integrateData()
|
||||
this.getOptionsData()
|
||||
callBack && callBack()
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 处理需要通过接口获取的下拉数据
|
||||
*/
|
||||
getOptionsData () {
|
||||
const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
|
||||
formList.forEach(item => {
|
||||
if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
|
||||
// 展示类型是树选择，且有接口的
|
||||
if (item.fieldHref) {
|
||||
getAction(item.fieldHref).then(res => {
|
||||
if (res.success) {
|
||||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||||
}
|
||||
})
|
||||
} else if (item.dictId) {
|
||||
getFormDictTreeList({ dictId: item.dictId }).then(res => {
|
||||
if (res.success) {
|
||||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 设置表单校验信息
|
||||
*/
|
||||
@@ -366,6 +438,18 @@ export default {
|
||||
getDocSplitEditFormData({ id: this.itemVal.id }).then(res => {
|
||||
if (res.success) {
|
||||
this.formInline = Object.assign({}, res.result)
|
||||
// 是否长期有效默认选否
|
||||
if (!this.formInline.is_long_effect) {
|
||||
this.formInline.is_long_effect = YesOrNoEnum.NO.value
|
||||
}
|
||||
// 条文解读数据处理
|
||||
if (this.formInline.interpretationArticlesList && this.formInline.interpretationArticlesList.length > 0) {
|
||||
this.interpretationArticlesList = this.formInline.interpretationArticlesList
|
||||
} else {
|
||||
this.interpretationArticlesList = [{
|
||||
itemContent: null
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -536,6 +620,7 @@ export default {
|
||||
}
|
||||
})
|
||||
formData.itemValEOList = contentList
|
||||
formData.interpretationArticlesList = this.interpretationArticlesList
|
||||
formData.delItemIds = this.deleteIds.join(',')
|
||||
submitFunc(formData).then(res => {
|
||||
if (res.success) {
|
||||
@@ -552,60 +637,21 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 保存
|
||||
splitSave () {
|
||||
this.$refs.ruleForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
if (!this.submitFlag) {
|
||||
this.submitFlag = true
|
||||
let submitFunc
|
||||
if (this.formInline.id) {
|
||||
submitFunc = editClause
|
||||
} else {
|
||||
submitFunc = addClause
|
||||
}
|
||||
const params = JSON.parse(JSON.stringify(this.formInline))
|
||||
Object.keys(params).forEach(res => {
|
||||
if (params[res] instanceof Array) {
|
||||
params[res] = params[res].join(',')
|
||||
}
|
||||
})
|
||||
params.info_id = this.infoId
|
||||
params.menu_id = this.menuId
|
||||
if (this.formInline.id) {
|
||||
params.menu_id = this.itemVal.menu_id
|
||||
}
|
||||
const contentList = JSON.parse(JSON.stringify(this.contentList))
|
||||
contentList.forEach((item, index) => {
|
||||
if (item.type === 'IMG') {
|
||||
this.$delete(item, 'thumbUrl')
|
||||
}
|
||||
})
|
||||
params.itemValEOList = contentList
|
||||
params.delItemIds = this.deleteIds.join(',')
|
||||
submitFunc(params).then((res) => {
|
||||
if (res.data.success) {
|
||||
this.loading = false
|
||||
this.$message.success(this.$t('operationSuccessful'))
|
||||
this.visible = false
|
||||
// this.$emit('closeVisible',false)
|
||||
this.$emit('sumber')
|
||||
} else {
|
||||
this.$message.warning(this.$t('operationFailed'))
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
}).finally(() => {
|
||||
this.visible = false
|
||||
this.$emit('closeVisible', false)
|
||||
this.loading = false
|
||||
this.submitFlag = false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
/**
|
||||
* 新增一条条文解读
|
||||
* @param index
|
||||
*/
|
||||
handleAddUnscramble (index) {
|
||||
this.interpretationArticlesList.splice(index + 1, 0, { id: '', itemContent: null })
|
||||
},
|
||||
/**
|
||||
* 删除条文解读
|
||||
*/
|
||||
handleDeleteUnscramble (index, item) {
|
||||
this.interpretationArticlesList.splice(index, 1)
|
||||
if (item.id) {
|
||||
this.deleteIds.push(item.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -764,8 +810,8 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-flex-item-half {
|
||||
width: 50%;
|
||||
.form-flex-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
@@ -782,6 +828,10 @@ export default {
|
||||
&-content {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-operate {
|
||||
@@ -795,4 +845,34 @@ export default {
|
||||
.clause-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/deep/ .ant-select-tree-dropdown {
|
||||
max-height: 50vh !important;
|
||||
}
|
||||
|
||||
.unscramble-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&-content {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-operate {
|
||||
|
||||
.ant-btn {
|
||||
margin-left: 15px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unscramble-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user