update 文档拆分-编辑-批量编辑、编辑

This commit is contained in:
赵霄
2023-10-17 17:45:19 +08:00
parent c185a29c01
commit 4436670c21
8 changed files with 721 additions and 239 deletions
+8 -8
View File
@@ -29,13 +29,11 @@ const deleteClauseTreeNode = (params) => getAction('/split/sarFileSplitMenu/dele
// 文档拆分编辑-树节点下移
const moveUpOrDownClauseTreeNode = (params) => postAction('/split/sarFileSplitMenu/moveUpOrDown', params)
// 文档拆分编辑-批量复制
const batchCopyClause = (params) => getAction('/split/sarFileSplitItems/batchCopyItems', params)
const batchCopyClause = (params) => getAction('/laws/DocumentTool/documentSplit/copyBatchDocumentSplitDetail', params)
// 文档拆分编辑-合并条款
const merageClause = (params) => postAction('/laws/DocumentTool/documentSplit/mergeDocumentSplitDetail', params)
// 文档拆分编辑-批量编辑-新增
const addBatchEditClause = (params) => postAction('/split/sarFileSplitItems/addSplitItems', params)
// 文档拆分编辑-批量编辑-编辑
const editBatchEditClause = (params) => postAction('/split/sarFileSplitItems/updateSplitItems', params)
// 文档拆分编辑-批量编辑
const editBatchEditClause = (params) => postAction('/laws/DocumentTool/documentSplit/editBatchDocumentSplitDetail', params)
// 文档拆分编辑-批量编辑-获取表单
const getFormForBatchEditClause = (params) => getAction('/split/sarFileSplitItems/getBatchSetForm', params)
// 文档拆分编辑-批量编辑-获取表单内容
@@ -46,6 +44,8 @@ const getClauseTreeData = (params) => getAction('/split/sarFileSplitMenu/getSpli
const addClauseTreeNode = (params) => postAction('/split/sarFileSplitMenu/addMenu', params)
// 文档拆分-编辑-树节点编辑
const editClauseTreeNode = (params) => postAction('/split/sarFileSplitMenu/updateMenu', params)
// 文档拆分-编辑-复制
const copyClause = (params) => getAction('/laws/DocumentTool/documentSplit/copyDocumentSplitDetail', params)
// 文档对比-发布/撤回
const withdrawPublication = (params) => postAction('/compare/sarFileCompareInfo/changeState', params)
@@ -77,7 +77,7 @@ export {
releaseSplitStandard,
changePermission,
withdraw,
// 文档拆分-详情
getDocSplitTableHeader,
getDocSplitSearch,
@@ -91,14 +91,14 @@ export {
moveUpOrDownClauseTreeNode,
batchCopyClause,
merageClause,
addBatchEditClause,
editBatchEditClause,
getFormForBatchEditClause,
getFormDataForBatchEditClause,
getClauseTreeData,
addClauseTreeNode,
editClauseTreeNode,
copyClause,
// 文档比对
withdrawPublication,
getInitComparsionPageData,
+1
View File
@@ -415,6 +415,7 @@ module.exports = {
formatRequirementContentFour: '4.The table in the document is displayed in the form of a link in the exported excel. Click the link to jump to the specified sheet page',
changePermissions: 'Change permissions',
pleaseSelectUser: 'Please select a user',
longTermEffectiveness: 'Long-term effectiveness',
selectFileType: 'Please select a file type',
onlyWord: 'Only word files can be imported',
+2 -1
View File
@@ -418,7 +418,8 @@ module.exports = {
formatRequirementContentFour: '4.文档中的表格,在导出excel中以链接的形式展示,点击链接跳转到指定的sheet页面',
changePermissions: '更改权限',
pleaseSelectUser: '请选择一个用户',
longTermEffectiveness: '是否长期有效',
selectFileType: '请选择文件类型',
onlyWord: '只能导入word文件',
fileType: '文件类型',
@@ -93,9 +93,8 @@
{{ $t('export') }}
</a-button>
<!--批量删除-->
<a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'split:sarFileSplitItems:delete'">{{
$t('batchDelete')
}}
<a-button type="primary" icon="delete" ghost @click="batchDel">
{{ $t('batchDelete') }}
</a-button>
<!--模板下载-->
<a-button type="primary"
@@ -106,11 +105,11 @@
{{ $t('templateDownload') }}
</a-button>
<!--批量复制-->
<a-button type="primary" ghost @click="handleCopy" v-has="'split:sarFileSplitItems:copy'">
<a-button type="primary" ghost @click="handleBatchCopy" v-has="'split:sarFileSplitItems:copy'">
{{ $t('docTool.split.batchCopy') }}
</a-button>
<!--批量编辑-->
<a-button type="primary" ghost @click="handleManage" v-has="'split:sarFileSplitItems:batchUpdate'">
<a-button type="primary" ghost @click="handleBatchEdit" v-has="'split:sarFileSplitItems:batchUpdate'">
{{ $t('docTool.split.batchEdit') }}
</a-button>
<!--合并条款-->
@@ -129,6 +128,7 @@
:pagination="ipagination"
:scroll="{x: '100%'}"
:operation-list="operationList"
:loading="loading"
@change="tableOnChange"
@operationClick="operationClick">
@@ -153,16 +153,16 @@
</div>
</div>
<!-- 条款详情 -->
<!--条款详情-->
<split-clause-detail ref="splitClauseDetail"/>
<!-- 添加节点 -->
<!--添加节点-->
<split-detail-node-add ref="splitDetailNodeAdd" @ok="nodeAddOk"/>
<!-- 批量设置弹框 -->
<split-detail-batch-setting ref="splitDetailBatchSetting" @ok="batchSettingOk"/>
<!--批量编辑-->
<split-detail-batch-edit-drawer ref="batchEditDrawer" @ok="modalFormOk"/>
<!--条款添加-->
<split-add-form ref="modalForm" :flag="'4'"
:url="url" :infoId="infoId" :menuId="menuId" :itemId="itemId"
@sumber="sumber"/>
@sumber="modalFormOk"/>
</internal-detail-page>
</template>
@@ -175,8 +175,6 @@ import SplitAddForm from './modules/SplitAddForm.vue'
import SplitClauseDetail from './modules/SplitClauseDetail.vue'
// 添加左侧树节点弹框
import SplitDetailNodeAdd from './modules/SplitDetailNodeAdd.vue'
// 批量设置弹框
import SplitDetailBatchSetting from './modules/SplitDetailBatchSetting.vue'
import { mapGetters } from 'vuex'
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin.js'
import {
@@ -186,10 +184,13 @@ import {
moveUpOrDownClauseTreeNode,
batchCopyClause,
merageClause,
getClauseTreeData
getClauseTreeData,
copyClause
} from '../../../api/documentToolApi.js'
import Search from '../../../components/customField/Search.vue'
import { isHasPermission } from '../../../utils/hasPermission.js'
import SplitDetailBatchEditDrawer from './modules/SplitDetailBatchEditDrawer.vue'
import { postAction } from '../../../api/manage'
export default {
name: 'DocumentSplitDetail',
@@ -199,8 +200,8 @@ export default {
SplitAddForm,
SplitClauseDetail,
SplitDetailNodeAdd,
SplitDetailBatchSetting,
Search
Search,
SplitDetailBatchEditDrawer
},
mixins: [ConfigurableTableMixin],
data () {
@@ -241,7 +242,7 @@ export default {
// 复制
{
text: this.$t('copy'),
clickEvent: 'handleEdit'
clickEvent: 'handleCopy'
// has: 'split:sarFileSplitItems:update'
},
// 删除
@@ -425,47 +426,49 @@ export default {
}
})
},
handleCopy ({ id }) {
this.$confirm({
title: this.$t('confirmReplication'),
content: '',
onOk: () => {
this.loading = true
copyClause({ id }).then(res => {
if (res.success) {
this.$message.success(res.message)
this.loadData()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.loading = false
})
}
})
},
/**
* 批量复制
*/
handleCopy () {
handleBatchCopy () {
if (!this.selectedRowKeys || this.selectedRowKeys.length === 0) {
this.$message.warning(this.$t('selectLeastOne'))
return
}
const ids = []
const infoIds = []
const menuIds = []
this.selectedRows.forEach(item => {
ids.push(item.id)
infoIds.push(item.info_id)
menuIds.push(item.menu_id)
this.$confirm({
title: this.$t('confirmReplication'),
content: '',
onOk: () => {
batchCopyClause({ ids: this.selectedRowKeys.join(',') }).then((res) => {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
this.onClearSelected()
this.loadMenuData()
this.loadData()
} else {
this.$message.warning(this.$t('operationFailed'))
}
})
}
})
const params = {
ids: ids.join(','),
infoIds: infoIds.join(','),
menuids: menuIds.join(',')
}
if (menuIds && menuIds.length > 0) {
this.$confirm({
title: this.$t('confirmReplication'),
content: '',
onOk: () => {
batchCopyClause(params).then((res) => {
if (res.data.success) {
this.$message.success(this.$t('operationSuccessful'))
this.onClearSelected()
this.loadMenuData()
this.loadData()
} else {
this.$message.warning(this.$t('operationFailed'))
}
})
}
})
} else if (menuIds.length === 0) {
this.$message.warning(this.$t('pleaseSelectData'))
}
},
// 新增
handleAdd () {
@@ -504,31 +507,48 @@ export default {
}
})
},
// 批量设置
handleManage () {
const ids = this.selectedRowKeys.join(',')
if (this.selectedRowKeys && this.selectedRowKeys.length < 1) {
/**
* 批量编辑
*/
handleBatchEdit () {
if (!this.selectedRowKeys || this.selectedRowKeys.length === 0) {
this.$message.warning(this.$t('selectLeastOne'))
} else {
this.$refs.splitDetailBatchSetting.open(ids)
return
}
},
// 批量设置完成的回调
batchSettingOk () {
this.onClearSelected()
this.loadData()
},
// 保存成功
sumber () {
this.loadData()
this.loadMenuData()
this.$refs.batchEditDrawer.open(this.selectedRowKeys.join(','))
},
onSearch () {
this.loadMenuData()
},
/**
* 删除
* @param id
*/
handleDelete (id) {
if (!this.url.delete) {
this.$message.error('请设置url.delete属性!')
return
}
const that = this
this.$confirm({
title: this.$t('confirmDeletion'),
content: this.$t('areYouSure'),
onOk: () => {
postAction(that.url.delete, { id: id }).then((res) => {
if (res.success) {
that.$message.success(res.message)
// 判断当前删除的数据是否是最后一页的最后一条数据,如果是的话页码减一
if (that.ipagination.current > 1 && ((that.ipagination.current - 1) * that.ipagination.pageSize) + 1 === that.ipagination.total) {
that.ipagination.current -= 1
}
that.loadData()
} else {
that.$message.warning(res.message)
}
})
}
})
}
},
beforeDestroy () {
window.removeEventListener('resize', {}, false)
}
}
</script>
@@ -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>
@@ -0,0 +1,477 @@
<template>
<a-drawer
:title="title"
placement="right"
:visible="visible"
@close="handleCancel"
width="900"
class="custom-drawer-style">
<div class="custom-drawer-style-scroll">
<a-spin :spinning="confirmLoading">
<a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
<div class="form-flex-box">
<template v-for="(item, index) in dataList">
<div :key="index"
class="box-title-text form-flex-item"
:class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
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)">{{ $t('delete') }}</a-button>
</div>
</div>
</template>
<!-- 1, 日期单选 -->
<a-date-picker v-else-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
class="box-input"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:getCalendarContainer="(trigger) => trigger.parentNode"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
v-model="formInline[item.dbFieldName]"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
style="width: 100%"/>
<!-- 2, 单选用户 -->
<user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
:filedName="item.dbFieldName"
@nameChange="userSelectNameChange"
:nameStr="formInline[item.dbFieldName + '_dictText']"
type="radio"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"/>
<!-- 3, 单选组织机构 -->
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
v-model="formInline[item.dbFieldName]"
:backDepart="true"/>
<!-- 4, 日期多选 -->
<j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
class="box-input"
v-model="formInline[item.dbFieldName]"
:fieldName="item.dbFieldName"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"/>
<!-- 5, 多行文本 -->
<a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
:placeholder="$t('pleaseEnter')+item.dbFieldTxt"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:maxLength="500"
v-model="formInline[item.dbFieldName]" :rows="4"/>
<!-- 6, 标准多选 -->
<standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
:source="flag"
:disabledSourceSearch="true"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
v-model="formInline[item.dbFieldName]"/>
<!-- 7, 多选组织机构 -->
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
v-model="formInline[item.dbFieldName]"
:multi="true"
:backDepart="true"
:treeOpera="true"/>
<!-- 8, 上传文件 -->
<a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
@click="clickButtonToUpload(item)">
{{
(formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
|| formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
? $t('uploadFile.clickUpload')
: $t('uploadFile.viewUploadedFiles')
}}
</a-button>
<!-- 9, 文本框 -->
<a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value"
class="box-input"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
v-model="formInline[item.dbFieldName]"
:maxLength="50"
:placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt"/>
<!-- 10, 下拉单选数据字典 -->
<j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
class="box-input"
v-model="formInline[item.dbFieldName]"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'"
:triggerChange="false"
:dictCode="item.dictField"/>
<!-- 11, 下拉多选数据字典 -->
<j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
class="box-input"
v-model="formInline[item.dbFieldName]"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'"
:triggerChange="false"
:dictCode="item.dictField"/>
<!-- 12, 树选择 -->
<a-tree-select
v-else-if="item.fieldShowType === FieldType.TREE.value"
v-model="formInline[item.dbFieldName]"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
style="width: 100%"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:tree-data="optionsData[item.dbFieldName]"
tree-checkable
treeCheckStrictly
:label-in-value="false"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"/>
<!-- 14, 年份选择 -->
<j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
show-type="year"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
v-model="formInline[item.dbFieldName]"
:default-value="defaultValue[item.dbFieldName]"
date-format="YYYY"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"/>
<!-- 15, 树选择单选 -->
<a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
v-model="formInline[item.dbFieldName]"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
style="width: 100%"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:tree-data="optionsData[item.dbFieldName]"
:label-in-value="false"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"/>
</a-form-model-item>
</div>
</template>
</div>
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
</a-form-model>
</a-spin>
</div>
<div class="custom-drawer-style-bottom-btn">
<!--保存-->
<a-button type="primary" class="footer-btn-save" @click="handleSave">{{ $t('preservation') }}</a-button>
<!--取消-->
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
</div>
</a-drawer>
</template>
<script>
import JMultipleDatePicker from '../../../../components/JMultipleDatePicker.vue'
import UploadFile from '../../../../components/UploadFile.vue'
import StandardSelection from '../../../../components/selection/StandardSelection.vue'
import UserSelection from '../../../../components/selection/UserSelection.vue'
import { getDocSplitEditForm, editBatchEditClause } from '../../../../api/documentToolApi'
import { FieldType, YesOrNoEnum } from '../../../../enums/commonEnums'
import { getFormDictTreeList } from '../../../../api/api'
import { getAction } from '../../../../api/manage'
export default {
name: 'SplitDetailBatchEditDrawer',
components: { UserSelection, StandardSelection, UploadFile, JMultipleDatePicker },
data () {
return {
FieldType,
title: this.$t('docTool.split.batchEdit'),
visible: false,
confirmLoading: false,
disabled: false,
formInline: {},
isFormInline: false,
dataList: [],
ruleList: [],
rules: {},
uploadName: '',
type: 'add',
hiddenFieldList: ['item_num', 'item_title', 'item_content'], // 隐藏的字段
disabledFieldList: [], // 禁用的字段
specialPlaceholder: {}, // 特殊的placeholder
optionsData: {}, // 通过接口获取的下拉数据
interpretationArticlesList: [] // 条文解读数据
}
},
watch: {
// 是否长期有效,是的话新认证实施日期、已认证实施日期、新注册实施日期为多选,否则为单选
'formInline.is_long_effect': {
handler (value) {
console.log('是否长期有效', 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()
},
immediate: true
}
},
methods: {
open (ids) {
this.visible = true
this.formInline = {}
this.formInline.ids = ids
this.getForm()
},
/**
* 获取表单字段
* @param callBack
*/
getForm (callBack) {
this.loading = true
const params = {
flag: this.flag,
type: this.type
}
getDocSplitEditForm(params).then((res) => {
if (res.success) {
const indexArr = []
// 新认证实施日期
indexArr[0] = res.result.findIndex(tt => tt.dbFieldName === 'new_cer_implement_date')
// 已认证实施日期
indexArr[1] = res.result.findIndex(tt => tt.dbFieldName === 'cer_implement_date')
// 新注册实施日期
indexArr[2] = res.result.findIndex(tt => tt.dbFieldName === 'new_register_implement_date')
// 条文解读数据处理
this.interpretationArticlesList = [
{ id: '', itemContent: null }
]
// 是否长期有效默认选否
this.formInline = Object.assign(this.formInline, { is_long_effect: YesOrNoEnum.NO.value })
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)
}
})
}
}
})
},
/**
* 设置表单校验信息
*/
integrateData () {
this.isFormInline = false
const rules = {}
this.ruleList.forEach((res, index) => {
const rule = []
if (res.field_must_input === 1) {
if (res.field_show_type === '1') {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'blur'
})
} else if (res.field_show_type === '4' || res.field_show_type === '6' ||
res.field_show_type === '5' || res.field_show_type === '7'
) {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'change'
})
} else if (res.field_show_type === '2') {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'blur'
})
} else if (res.field_show_type === '8' || res.field_show_type === '9' || res.field_show_type === '10' || res.field_show_type === '11') {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'blur'
})
} else if (res.field_show_type === '3') {
rule.push({
required: true,
message: res.db_field_txt + this.$t('cannotEmpty'),
trigger: 'change'
})
}
}
if (res.field_show_type === '1' ||
res.field_show_type === '8' || res.field_show_type === '9' || res.field_show_type === '10' ||
res.field_show_type === '11') {
rule.push({
max: res.db_length,
message: res.db_field_txt + this.$t('cantExeed') + res.db_length + this.$t('characters'),
trigger: 'blur'
})
}
if (rule.length > 0) {
rules[res.db_field_name] = rule
}
})
this.$set(this, 'rules', rules)
// console.log('rules',this.rules)
this.isFormInline = true
this.loading = false
// console.log('this.column',this.column)
},
// 点击点击上传按钮
clickButtonToUpload (item) {
this.$refs.uploadFile.open(this.formInline[item.db_field_name])
this.uploadName = item.db_field_name
},
// 文件上传改变后的回调
uploadFileChange (data) {
const attIdList = []
if (data && data.length > 0) {
data.map(item => {
attIdList.push(item.id || data.name)
})
}
/** 赋值给当前对应的表单文件 */
this.formInline[this.uploadName] = attIdList.join(',')
this.formInline = { ...this.formInline }
},
handleSave () {
if (this.confirmLoading) {
return
}
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.confirmLoading = true
// 处理请求参数
const formData = JSON.parse(JSON.stringify(this.formInline))
// 处理动态表单多选的值
Object.keys(formData).forEach(res => {
if (formData[res] instanceof Array) {
if (formData[res][0] instanceof Object) {
// 说明是树选择
formData[res] = formData[res].map(item => item.value).join(',')
} else {
formData[res] = formData[res].join(',')
}
}
})
// 处理条文解读数据
formData.interpretationArticlesList = this.interpretationArticlesList
editBatchEditClause(formData).then(res => {
if (res.success) {
this.$message.success(res.message)
this.$emit('ok')
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
this.formInline = {}
},
/**
* 新增一条条文解读
* @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)
}
}
}
}
</script>
<style scoped lang="less">
.form-flex-box {
display: flex;
flex-wrap: wrap;
}
.form-flex-item {
width: 100%;
}
/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>
@@ -1,97 +0,0 @@
<template>
<j-modal
class="show-setting"
:title="$t('docTool.split.batchSetting')"
:visible="visible"
:confirm-loading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
style="width: 1000px;height: auto"
>
<add-form
ref="fileForm"
:get-form-func="getFormFunc"
:get-document-info-func="getFormDataFunc"
@submitFormData="submitFormData"
:flag="'4'">
</add-form>
</j-modal>
</template>
<script>
import AddForm from '../../../../components/customField/AddForm.vue'
import { addBatchEditClause, editBatchEditClause, getFormForBatchEditClause, getFormDataForBatchEditClause } from '../../../../api/documentToolApi.js'
export default {
name: 'SplitDetailBatchSetting',
components: { AddForm },
data () {
return {
visible: false, // 批量设置弹框显示
confirmLoading: false,
getFormFunc: getFormForBatchEditClause,
getFormDataFunc: getFormDataForBatchEditClause
}
},
methods: {
open (ids) {
this.ids = ids
this.visible = true
},
// 批量设置确定
handleOk () {
this.$refs.fileForm.submit()
},
// 表单提交
submitFormData (formInline) {
if (this.confirmLoading) {
return
}
this.confirmLoading = true
let submitFunc
if (this.formInline.id) {
submitFunc = editBatchEditClause
} else {
submitFunc = addBatchEditClause
}
formInline.ids = this.ids
submitFunc(formInline).then((res) => {
if (res.data.success) {
this.$message.success(this.$t('operationSuccessful'))
this.visible = false
this.$emit('ok')
} else {
this.$message.warning(this.$t('operationFailed'))
}
}).finally(() => {
this.confirmLoading = false
})
},
// 批量设置取消
handleCancel () {
this.visible = false
}
}
}
</script>
<style scoped lang="less">
.show-setting {
.ant-modal {
min-width: 700px;
}
.ant-select-dropdown--multiple {
max-height: 39vh !important;
}
.ant-modal-body {
overflow-y: visible !important;
}
.ant-modal-footer {
text-align: center;
}
}
</style>
@@ -16,11 +16,11 @@
:wrapper-col="wrapperCol">
<!--条款号-->
<a-form-model-item :label="$t('docTool.split.clauseNo')" prop="name">
<a-input class="box-input" v-model="form.name" :placeholder="$t('pleaseEnter')+$t('docTool.split.clauseNo')" :maxLength="200" />
<a-input class="box-input" v-model="form.name" :placeholder="$t('pleaseEnter')+$t('docTool.split.clauseNo')" :maxLength="50" />
</a-form-model-item>
<!--条款名称-->
<a-form-model-item :label="$t('docTool.split.clauseName')" prop="itemName">
<a-input class="box-input" v-model="form.itemName" :placeholder="$t('pleaseEnter')+$t('docTool.split.clauseName')" :maxLength="200" />
<a-input class="box-input" v-model="form.itemName" :placeholder="$t('pleaseEnter')+$t('docTool.split.clauseName')" :maxLength="50" />
</a-form-model-item>
<!--序号-->
<a-form-model-item :label="$t('serialNumber')" prop="displaySeq">