ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 文档拆分

Browse Source
This commit is contained in:
赵霄
2023-09-21 17:28:13 +08:00
parent d4c30733c4
commit a609348cbf
10 changed files with 922 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/documentToolApi.js
+46 -4
View File
@@ -3,12 +3,40 @@ import { getAction, postAction } from './manage'
// 文档拆分-发布
const releaseSplitStandard = (params) => postAction('', params)
// 文档拆分详情-表头
const getDocSplitTableHeader = (params) => getAction('', params)
// 文档拆分详情-查询条件
const getDocSplitSearch = (params) => getAction('', params)
// 文档拆分-拆分已入库文本-拆分
const addDocSplit = (params) => postAction('/split/sarFileSplitInfo/add', params)
// 文档拆分编辑-表头
const getDocSplitTableHeader = (params) => getAction('', params)
// 文档拆分编辑-查询条件
const getDocSplitSearch = (params) => getAction('', params)
// 文档拆分编辑-表单字段
const getDocSplitEditForm = (params) => getAction('/split/sarFileSplitItems/getForm', params)
// 文档拆分编辑-表单值
const getDocSplitEditFormData = (params) => getAction('/split/sarFileSplitItems/getSplitItemsById', params)
// 文档拆分编辑-新增条款
const addClause = (params) => postAction('/split/sarFileSplitItems/addSplitItems', params)
// 文档拆分编辑-编辑条款
const editClause = (params) => postAction('/split/sarFileSplitItems/updateSplitItems', params)
// 文档拆分编辑-获取条款内容
const getEditClauseContent = (params) => getAction('/split/sarFileSplitItemsVal/getItemsValList', params)
// 文档拆分编辑-删除树节点
const deleteClauseTreeNode = (params) => getAction('/split/sarFileSplitMenu/deleteMenu', params)
// 文档拆分编辑-树节点下移
const moveUpOrDownClauseTreeNode = (params) => postAction('/split/sarFileSplitMenu/moveUpOrDown', params)
// 文档拆分编辑-批量复制
const batchCopyClause = (params) => getAction('/split/sarFileSplitItems/batchCopyItems', params)
// 文档拆分编辑-合并条款
const merageClause = (params) => getAction('/split/sarFileSplitItems/batchMergeItems', params)
// 文档拆分编辑-批量编辑-新增
const addBatchEditClause = (params) => postAction('/split/sarFileSplitItems/addSplitItems', params)
// 文档拆分编辑-批量编辑-编辑
const editBatchEditClause = (params) => postAction('/split/sarFileSplitItems/updateSplitItems', params)
// 文档拆分编辑-批量编辑-获取表单
const getFormForBatchEditClause = (params) => getAction('/split/sarFileSplitItems/getBatchSetForm', params)
// 文档拆分编辑-批量编辑-获取表单内容
const getFormDataForBatchEditClause = (params) => getAction('/split/sarFileSplitItems/batchSet', params)
// 文档拆分编辑-获取左侧树数据
const getClauseTreeData = (params) => getAction('/split/sarFileSplitMenu/getSplitMenusByInfoId', params)
// 文档对比-发布/撤回
const withdrawPublication = (params) => postAction('/compare/sarFileCompareInfo/changeState', params)
@@ -43,6 +71,20 @@ export {
getDocSplitTableHeader,
getDocSplitSearch,
addDocSplit,
getDocSplitEditForm,
getDocSplitEditFormData,
addClause,
editClause,
getEditClauseContent,
deleteClauseTreeNode,
moveUpOrDownClauseTreeNode,
batchCopyClause,
merageClause,
addBatchEditClause,
editBatchEditClause,
getFormForBatchEditClause,
getFormDataForBatchEditClause,
getClauseTreeData,
// 文档比对
withdrawPublication,
src/views/documentTool/documentSplit/DocumentSplit.vue
+1 -1
View File
@@ -242,7 +242,7 @@ export default {
infoId: record.id,
infoNumber: record.serialNumber,
createBy: record.createBy,
standardName: 'GB 7258-2020 机动车运行安全'
standardName: record.title
}
})
},
src/views/documentTool/documentSplit/DocumentSplitDetail.vue
+59 -48
View File
@@ -6,21 +6,22 @@
<a-input-search class="tree-search" v-model="searchValue" :placeholder="$t('nodeQuickLookup')" @search="onSearch" />
<div class="page-tree-box page-tree-box-has-search">
<a-spin :spinning="loading">
<a-tree :show-line="true" :show-icon="false" :tree-data="treeData" :selected-keys="selectedKeys">
<a-tree :show-line="true" :show-icon="false" :tree-data="treeData"
:replace-fields="{key: 'id', title: 'name'}" :selected-keys="selectedKeys">
<template #title="record">
<div class="tree-operate-node"
@mouseenter="handleTreeMouseover(record.key)"
@mouseleave="handleTreeMouseout(record.key)"
@mouseenter="handleTreeMouseover(record.id)"
@mouseleave="handleTreeMouseout(record.id)"
@click="handleSelectTreeNode(record)">
<a-icon class="parent-node-icon" type="folder" v-if="record.dataRef.children && record.dataRef.children.length > 0" />
<a-tooltip>
<template #title>
{{ record.title }}
{{ record.name }}
</template>
<span class="tree-node-custom-title">{{ record.title }}</span>
<span class="tree-node-custom-title">{{ record.name }}</span>
</a-tooltip>
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.key !== mouseInNodeKey}">
<div class="tree-operate-node-btn-box" :class="{'tree-operate-node-btn-box-hide': record.id !== mouseInNodeKey}">
<!--新增-->
<a-button icon="plus"
class="tree-operate-node-btn"
@@ -182,17 +183,25 @@
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
import JTable from '../../../components/jero/JTable.vue'
// 条款添加
import SplitAddForm from '../modules/SplitAddForm.vue'
import SplitAddForm from './modules/SplitAddForm.vue'
// 条款内容弹框
import SplitClauseDetail from '../modules/SplitClauseDetail.vue'
import SplitClauseDetail from './modules/SplitClauseDetail.vue'
// 添加左侧树节点弹框
import SplitDetailNodeAdd from '../modules/SplitDetailNodeAdd.vue'
import SplitDetailNodeAdd from './modules/SplitDetailNodeAdd.vue'
// 批量设置弹框
import SplitDetailBatchSetting from '../modules/SplitDetailBatchSetting.vue'
import SplitDetailBatchSetting from './modules/SplitDetailBatchSetting.vue'
import { mapGetters } from 'vuex'
import { postAction, getAction } from '../../../api/manage.js'
import { getAction } from '../../../api/manage.js'
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin.js'
import { getDocSplitTableHeader, getDocSplitSearch } from '../../../api/documentToolApi.js'
import {
getDocSplitTableHeader,
getDocSplitSearch,
deleteClauseTreeNode,
moveUpOrDownClauseTreeNode,
batchCopyClause,
merageClause,
getClauseTreeData
} from '../../../api/documentToolApi.js'
import Search from '../../../components/customField/Search.vue'
export default {
@@ -305,9 +314,12 @@ export default {
* @param dataRef
*/
handleSelectTreeNode ({ dataRef }) {
this.selectedKeys = [dataRef.key]
this.filters.nodeCode = dataRef.nodeCode
this.loadData(1)
this.selectedKeys = [dataRef.id]
this.menuId = this.selectedKeys[0]
this.uploadMenuId = this.selectedKeys[0]
this.filters.info_id = this.infoId
this.filters.menu_id = this.menuId
this.loadData()
},
// 显示条款内容弹框
@@ -320,10 +332,11 @@ export default {
infoId: this.infoId
}
this.loading = true
getAction(`split/sarFileSplitMenu/getSplitMenusByInfoId`, params).then(res => {
getClauseTreeData(params).then(res => {
if (res.success) {
this.data = this.toTree(res.result)
this.treeData = [...this.data]
// this.treeData = res.result || []
}
}).finally(() => {
this.loading = false
@@ -364,22 +377,14 @@ export default {
clearMenu () {
this.nodeTreeItem = null
},
// 选择树节点
onSelect (selectedKeys) {
this.menuId = selectedKeys[0]
this.uploadMenuId = selectedKeys[0]
this.selectedKeys = selectedKeys
this.filters.info_id = this.infoId
this.filters.menu_id = this.menuId
this.loadData()
},
// 树形新增
orgAdd () {
this.$refs.splitDetailNodeAdd.add(this.nodeItem, this.infoId)
orgAdd (record) {
console.log(record)
this.$refs.splitDetailNodeAdd.add(record.dataRef, this.infoId)
},
// 树形修改
orgEdit () {
this.$refs.splitDetailNodeAdd.edit(this.nodeItem, this.infoId)
orgEdit (record) {
this.$refs.splitDetailNodeAdd.edit(record.dataRef, this.infoId)
},
// 添加节点完成后的回调
nodeAddOk () {
@@ -392,12 +397,12 @@ export default {
this.loadMenuData()
},
// 树形删除
orgDelete () {
orgDelete (record) {
this.$confirm({
content: this.$t('confirmDeleteNodes'),
onOk:
async () => {
getAction(`split/sarFileSplitMenu/deleteMenu`, { id: this.nodeItem.id }).then(res => {
deleteClauseTreeNode({ id: record.dataRef.id }).then(res => {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
this.loadMenuData()
@@ -410,17 +415,17 @@ export default {
})
},
// 树上移
orgMoveUp () {
orgMoveUp (record) {
const query = {
moveFlag: 'up',
infoId: this.infoId,
sarFileSplitMenu: {
id: this.nodeItem.id,
pId: this.nodeItem.pid,
displaySeq: this.nodeItem.displaySeq
id: record.dataRef.id,
pId: record.dataRef.pid,
displaySeq: record.dataRef.displaySeq
}
}
postAction(`split/sarFileSplitMenu/moveUpOrDown`, query).then(res => {
moveUpOrDownClauseTreeNode(query).then(res => {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
this.loadMenuData()
@@ -431,17 +436,17 @@ export default {
})
},
// 树下移
orgmoveDown () {
orgmoveDown (record) {
const query = {
moveFlag: 'down',
infoId: this.infoId,
SarFileSplitMenu: {
id: this.nodeItem.id,
pId: this.nodeItem.pid,
displaySeq: this.nodeItem.displaySeq
id: record.dataRef.id,
pId: record.dataRef.pid,
displaySeq: record.dataRef.displaySeq
}
}
postAction(`split/sarFileSplitMenu/moveUpOrDown`, query).then(res => {
moveUpOrDownClauseTreeNode(query).then(res => {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
this.loadMenuData()
@@ -474,7 +479,7 @@ export default {
title: this.$t('confirmReplication'),
content: '',
onOk: () => {
getAction('/split/sarFileSplitItems/batchCopyItems', params).then((res) => {
batchCopyClause(params).then((res) => {
if (res.data.success) {
this.$message.success(this.$t('operationSuccessful'))
this.onClearSelected()
@@ -491,12 +496,18 @@ export default {
}
},
// 新增
handleAddManage () {
handleAdd () {
// console.log('this.menuId',this.menuId)
this.$nextTick(() => {
this.$refs.splitForm.add()
this.$refs.splitForm.formTitle = this.$t('add')
})
if (this.menuId) {
this.formTitle = this.$t('add')
this.itemId = ''
this.addVisible = true
this.$nextTick(() => {
this.$refs.modalForm.add()
})
} else {
this.$message.warning(this.$t('selectDirectoryTerms'))
}
},
// 合并条款
handleMergeManage () {
@@ -508,7 +519,7 @@ export default {
title: this.$t('docTool.split.mergeTerms'),
content: '',
onOk: () => {
getAction('/split/sarFileSplitItems/batchMergeItems', { ids: ids }).then(res => {
merageClause({ ids: ids }).then(res => {
if (res.data.success) {
this.$message.success(this.$t('operationSuccessful'))
this.onClearSelected()
src/views/documentTool/documentSplit/modules/SplitAddForm.vue
+783
View File
@@ -0,0 +1,783 @@
<template>
<a-drawer
:title="formTitle"
placement="right"
:visible="visible"
@close="splitCancel"
width="900"
class="custom-drawer-style">
<div class="custom-drawer-style-scroll">
<a-spin :spinning="loading">
<a-form>
<a-form-model
class="split-content"
:model="formInline"
:rules="rules"
ref="splitEditForm"
>
<a-row :gutter="24">
<a-col :span="12" v-for="(item,index) in dataList" :key="index">
<div class="box-title-text" v-if="item.field_show_type === '1' || item.field_show_type === '11'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-input class="box-input"
:disabled="disabled"
v-model="formInline[item.db_field_name]"
:placeholder="$t('pleaseEnter')+item.db_field_txt" />
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '2'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-input-number class="box-input"
:placeholder="$t('pleaseEnter')+item.db_field_txt"
:disabled="disabled"
:min="0"
v-model="formInline[item.db_field_name]" :max="99999999" />
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '3'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<j-dict-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
@input="handleInput(item.db_field_name)"
:placeholder="$t('pleaseSelect')+item.db_field_txt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field" />
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '4'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model-multi" :prop="item.db_field_name">
<j-multi-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+item.db_field_txt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field" />
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '5'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-date-picker class="box-input"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:getCalendarContainer="(trigger) => trigger.parentNode"
v-model="formInline[item.db_field_name]"
:disabled="disabled"
style="width: 100%" />
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '6'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-range-picker class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
@change="onChange(item.db_field_name)"></a-range-picker>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '7'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-button type="primary" class="button-text"
@click="clickButtonToUpload(item)">
{{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||
formInline[item.db_field_name] === null) ? $t('clickUpload') : $t('viewUploadedFiles')
}}
</a-button>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '8'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-textarea
:placeholder="$t('pleaseEnter')+item.db_field_txt"
:disabled="disabled"
v-model="formInline[item.db_field_name]" :rows="4" />
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '10'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<standard-selection :query="item"
:disabled="disabled"
:standard="formInline"
v-model="formInline[item.db_field_name]" />
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === 'RADIO'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<j-dict-select-tag v-model="formInline[item.db_field_name]"
:disabled="disabled"
class="box-input"
@input="handleInput(item.db_field_name)"
:placeholder="$t('pleaseSelect')+item.db_field_txt"
:type="'radio'" :triggerChange="false" :dictCode="item.dict_field" />
</a-form-model-item>
</div>
<div class="box-title-text" :title="item.db_field_txt" v-else-if="item.field_show_type === '0'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-tree-select
tree-node-filter-prop="title"
v-model="formInline[item.db_field_name]"
class="box-input"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
style="width: 100%"
:tree-data="item.tree"
tree-checkable
:placeholder="$t('pleaseSelect')+item.db_field_txt"
@change="changeTree"
/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === 'CHECKBOX'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{ item.db_field_txt }}</span>
</div>
<a-form-model-item class="item-model-multi" :prop="item.db_field_name">
<j-multi-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+item.db_field_txt"
:type="'checkbox'"
:triggerChange="false" :dictCode="item.dict_field" />
</a-form-model-item>
</div>
</a-col>
</a-row>
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
<span class="con-divider">{{ $t('docTool.split.clauseContent') }}</span>
<a-divider dashed />
<div class="table-operator">
<div class="operator-text" @click="splitAdd('-1')">
<a-icon type="plus" />
{{ $t('add') }}
</div>
</div>
<a-row :gutter="24" class="split-content-row" id="split-content" v-for="(item, index) in contentList" :key="index">
<div class="split-row">
<div class="row-left">
<a-textarea v-if="item.type==='TEXT'"
v-model="item.itemContent"
:show-count="true"
:maxlength="1000"
:placeholder="$t('pleaseEnter')+$t('content')" />
<viewer>
<img v-if="item.type==='IMG'" :src="item.thumbUrl?item.thumbUrl:item.itemContent" alt="">
</viewer>
<!-- <img v-if="item.type==='IMG'" :src="item.thumbUrl?item.thumbUrl:item.itemContent" alt="" @click="preImg(item)">-->
<div v-if="item.type==='TABLE'" v-html="item.itemContent" class="item-table"></div>
</div>
<div class="row-right">
<a-button class="row-btn-add" @click="splitAdd(index)">{{ $t('add') }}</a-button>
<a-button class="row-btn-edit" @click="splitEdit(index,item)" v-if="item.type==='TABLE'">{{ $t('edit') }}</a-button>
<a-button @click="splitDelete(item,index)">{{ $t('delete') }}</a-button>
</div>
</div>
</a-row>
</a-form-model>
</a-form>
</a-spin>
</div>
<div class="custom-drawer-style-bottom-btn">
<a-button type="primary" class="footer-btn-save" @click="splitSave">{{ $t('preservation') }}</a-button>
<a-button @click="splitCancel">{{ $t('cancel') }}</a-button>
</div>
<!-- 类型选择弹框 -->
<split-detail-add-type-check
ref="splitDetailAddTypeCheck"
@addTextOk="addTextOk"
@addTableOk="addTableOk"
@addImageOk="addImageOk"
>
</split-detail-add-type-check>
<!-- 编辑表格弹框 -->
<split-detail-add-table ref="splitDetailAddTable" @editOk="editTableOk"></split-detail-add-table>
</a-drawer>
</template>
<script>
import UploadFile from '../../../../components/UploadFile.vue'
import StandardSelection from '../../../../components/selection/StandardSelection.vue'
// 类型选择弹框
import SplitDetailAddTypeCheck from './SplitDetailAddTypeCheck.vue'
import SplitDetailAddTable from './SplitDetailAddTable.vue'
import { getDocSplitEditForm, getDocSplitEditFormData, addClause, editClause, getEditClauseContent } from '../../../../api/documentToolApi.js'
export default {
name: 'SplitAddForm',
components: {
SplitDetailAddTable,
UploadFile,
StandardSelection,
SplitDetailAddTypeCheck
},
data () {
return {
formTitle: this.$t('newlyAdded'),
contentList: [],
visible: false,
addIndex: '',
disabled: false,
formInline: {},
isFormInline: false,
dataList: [],
ruleList: [],
rules: {},
uploadName: '',
type: 'add',
loading: false,
submitFlag: false,
deleteIds: [],
itemVal: {},
contentTrees: '',
isTableEdit: false
}
},
props: {
url: {
type: Object,
default: () => {
return {}
}
},
flag: {
type: String,
default: ''
},
infoId: {
type: String,
default: ''
},
menuId: {
type: String,
default: ''
},
itemId: {
type: String,
default: ''
}
},
methods: {
loadData () {
this.loading = true
getEditClauseContent({ itemId: this.itemId }).then(res => {
if (res.success) {
this.contentList = [...res.result]
this.contentList.forEach(item => {
const imgData = item.itemContent.split('fileUrl=')[1]
item.thumbUrl = window._CONFIG.domianURL + '/sys/split/file/getImage?fileUrl=' + imgData
})
}
}).finally(() => {
this.loading = false
})
},
// 获取表单信息
loadFormInfo () {
getDocSplitEditFormData({ id: this.itemId }).then(res => {
if (res.success) {
this.formInline = [...res.result]
}
})
},
// 增加按钮
splitAdd (val) {
if (val === '-1') {
this.addIndex = this.contentList.length - 1
} else {
this.addIndex = val
}
this.$refs.splitDetailAddTypeCheck.open()
},
// 编辑按钮
splitEdit (index, item) {
// console.log('item',item)
this.addIndex = index
console.log('&&&&&&&&&&&&&&&&&&&&&&&', item.itemContent)
this.$refs.splitDetailAddTable.open(item.itemContent)
this.$refs.splitDetailAddTable.isTableEdit = true
},
// 删除按钮
splitDelete (item, index) {
if (item.id) {
this.deleteIds.push(item.id)
}
for (let i = index; i < this.contentList.length - 1; i++) {
this.contentList[index] = this.contentList[index + 1]
}
this.contentList.pop()
},
// 保存
splitSave () {
this.$refs.splitEditForm.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
})
}
}
})
},
// 取消
splitCancel () {
this.visible = false
this.$emit('closeVisible', false)
},
// 增加文本类型成功
addTextOk (number) {
for (let i = this.contentList.length; i > this.addIndex; i--) {
this.contentList[i + number - 1] = this.contentList[i - 1]
}
for (let j = 0; j < number; j++) {
this.contentList[++this.addIndex] = {
id: '',
type: 'TEXT',
itemContent: ''
}
}
this.contentList = JSON.parse(JSON.stringify(this.contentList))
},
// 增加表格类型成功
addTableOk (ueContent) {
for (let i = this.contentList.length; i > this.addIndex; i--) {
this.contentList[i + ueContent.length - 1] = this.contentList[i - 1]
}
this.contentList[++this.addIndex] = {
id: '',
type: 'TABLE',
itemContent: ueContent[0]
}
this.contentList = JSON.parse(JSON.stringify(this.contentList))
},
// 编辑表格类型成功
editTableOk (ueContent) {
console.log(ueContent)
this.contentList[this.addIndex] = {
id: '',
type: 'TABLE',
itemContent: ueContent[0]
}
this.contentList = JSON.parse(JSON.stringify(this.contentList))
},
// 增加图片类型成功
addImageOk (file, data, imgs) {
for (let i = this.contentList.length; i > this.addIndex; i--) {
this.contentList[i] = this.contentList[i - 1]
}
this.contentList[++this.addIndex] = {
id: '',
type: 'IMG',
itemContent: file.response.result.url,
thumbUrl: window._CONFIG.domianURL + '/sys/split/file/getImage?fileUrl=' + file.response.result.url.split('fileUrl=')[1]
}
this.contentList = JSON.parse(JSON.stringify(this.contentList))
},
onChange (item) {
if (this.queryParam[item] && this.queryParam[item].length > 0) {
const startDate = item + '_start'
const endDate = item + '_end'
this.queryParam[startDate] = this.queryParam[item][0]
this.queryParam[endDate] = this.queryParam[item][1]
} else {
this.queryParam[item] = []
}
},
// 点击点击上传按钮
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 }
},
handleInput (value) {
this.$nextTick(() => {
this.formInline = { ...this.formInline }
this.$refs.splitEditForm.validateField([value])
})
},
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)
},
getForm (callBack) {
this.loading = true
const params = {
flag: this.flag,
type: this.type
}
getDocSplitEditForm(params).then((res) => {
if (res.success) {
this.dataList = res.result
this.ruleList = res.result
this.integrateData()
callBack && callBack()
}
}).finally(() => {
this.loading = false
})
},
edit (item) {
this.visible = true
this.type = 'edit'
this.itemVal = item
this.getForm(() => {
getDocSplitEditFormData({ id: item.id }).then((res) => {
if (res.success) {
this.formInline = res.result
}
})
})
},
add () {
this.getForm()
this.loadData()
this.loadFormInfo()
this.visible = true
this.formInline = {}
this.contentList = []
this.type = 'add'
},
// 树结果选择
changeTree (value, label, extra) {
// console.log('changeValue',value, label, extra)
const labelValues = label
labelValues.shift()
this.contentTrees = labelValues.join(',')
},
// 正则替换小数点
limitNumber (value) {
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(/\./g, '') : 0
} else {
return 0
}
}
}
}
</script>
<style scoped lang="less">
.split-content {
.box-title-text {
line-height: 1.4;
display: flex;
.title-text {
width: 114px;
text-align: right;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 42px;
line-height: 42px;
.Required {
color: red;
margin-right: 4px;
}
.title-text-text {
margin-top: 9px;
}
}
.item-model {
width: calc(100% - 130px);
display: inline-block;
margin-top: 2px;
}
}
.con-divider {
font-size: 16px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85)
}
.table-operator {
margin-bottom: 20px;
text-align: right;
}
}
.split-content-row {
.split-row {
display: flex;
justify-content: space-between;
margin: 0 20px 20px;
.row-left {
flex: 1;
/*border:1px solid #9e9e9e;*/
img {
cursor: pointer;
width: 32px;
height: 32px;
}
.item-table {
/deep/ table {
width: 100% !important;
}
}
}
.row-right {
min-width: 150px;
margin-left: 20px;
.row-btn-add, .row-btn-edit {
margin-right: 20px;
}
}
}
}
.split-form-footer {
margin-top: 20px;
text-align: center;
position: fixed;
bottom: 0px;
right: 0;
width: 900px;
padding-bottom: 10px;
background: #FFFFFF;
.footer-btn-save {
margin-right: 20px;
}
}
.split-title {
.title-wraper {
.title-top {
display: flex;
justify-content: space-around;
.title-flex {
width: 75px;
height: 35px;
text-align: center;
border-radius: 5px;
border: 1px solid #d9d9d9;
padding: 7px;
cursor: pointer;
}
.title-flex-active {
background: #00B3BE;
border-color: #00B3BE;
color: #FFFFFF;
}
}
.title-num {
margin: 20px 20px 0;
line-height: 32px;
.title-num-add {
min-width: 70px;
}
.title-num-edit {
flex: 1;
}
}
}
}
.split-img {
margin-top: 20px;
text-align: center;
img {
}
}
.box-input {
/*min-width: 200px;*/
display: inline-block;
height: 38px;
margin-top: 2px;
}
.button-text {
height: 38px;
width: calc(100% - 100px);
line-height: 38px;
background: #fff;
border: 1px #00B3BE solid;
color: #00B3BE;
}
/deep/ .ant-select-tree {
width: auto;
height: 300px;
overflow: auto;
position: absolute;
/*background: #fff;*/
}
/deep/ .ant-select-tree-dropdown {
min-height: 320px;
}
</style>
src/views/documentTool/modules/SplitClauseDetail.vue → src/views/documentTool/documentSplit/modules/SplitClauseDetail.vue
View File
src/views/documentTool/modules/SplitDetailAddTable.vue → src/views/documentTool/documentSplit/modules/SplitDetailAddTable.vue
+1 -1
View File
@@ -13,7 +13,7 @@
</template>
<script>
import UEditor from '@/components/uEditor/UEditor'
import UEditor from '../../../../components/uEditor/UEditor.vue'
export default {
name: 'SplitDetailAddTable',
components: { UEditor },
src/views/documentTool/modules/SplitDetailAddTypeCheck.vue → src/views/documentTool/documentSplit/modules/SplitDetailAddTypeCheck.vue
+20 -11
View File
@@ -9,9 +9,15 @@
>
<div class="title-wraper">
<div class="title-top">
<span class="title-flex title-text-flex" :class="{'title-flex-active':selected==='TEXT'}" @click="selectTitle('TEXT')">{{$t('docTool.split.text')}}</span>
<span class="title-flex title-pic" :class="{'title-flex-active':selected==='IMG'}" @click="selectTitle('IMG')">{{$t('docTool.split.picture')}}</span>
<span class="title-flex title-table" :class="{'title-flex-active':selected==='TABLE'}" @click="selectTitle('TABLE')">{{$t('docTool.split.table')}}</span>
<span class="title-flex title-text-flex"
:class="{'title-flex-active':selected==='TEXT'}"
@click="selectTitle('TEXT')">{{ $t('docTool.split.text') }}</span>
<span class="title-flex title-pic"
:class="{'title-flex-active':selected==='IMG'}"
@click="selectTitle('IMG')">{{ $t('docTool.split.picture') }}</span>
<span class="title-flex title-table"
:class="{'title-flex-active':selected==='TABLE'}"
@click="selectTitle('TABLE')">{{ $t('docTool.split.table') }}</span>
</div>
<!-- 选择文本类型时，需要填写个数 -->
<div class="title-num" v-if="selected==='TEXT'">
@@ -87,9 +93,10 @@
<script>
// 上传图片弹框
import SplitAddClauseUploadImage from '../../../components/splitUpload/SplitAddClauseUploadImage'
import SplitAddClauseUploadImage from '../../../../components/splitUpload/SplitAddClauseUploadImage.vue'
// 编辑表格的弹框
import SplitDetailAddTable from './SplitDetailAddTable'
import SplitDetailAddTable from './SplitDetailAddTable.vue'
export default {
name: 'SplitDetailAddTypeCheck',
components: { SplitAddClauseUploadImage, SplitDetailAddTable },
@@ -226,7 +233,7 @@ export default {
</script>
<style scoped lang="less">
.split-title{
.split-title {
.title-wraper {
.title-top {
display: flex;
@@ -245,7 +252,7 @@ export default {
.title-flex-active {
background: #00B3BE;
border-color: #00B3BE;
color:#FFFFFF;
color: #FFFFFF;
}
}
@@ -264,12 +271,14 @@ export default {
}
}
.number-content{
.ant-form-item{
.number-content {
.ant-form-item {
display: flex;
.ant-form-item-control-wrapper{
.ant-form-item-control-wrapper {
flex: 1;
.title-num-edit{
.title-num-edit {
width: 100%;
}
}
src/views/documentTool/modules/SplitDetailBatchSetting.vue → src/views/documentTool/documentSplit/modules/SplitDetailBatchSetting.vue
+11 -16
View File
@@ -10,16 +10,17 @@
>
<add-form
ref="fileForm"
:get-form-func="getFormFunc"
:get-document-info-func="getFormDataFunc"
@submitFormData="submitFormData"
:flag="'4'"
:url="urlBatSet">
:flag="'4'">
</add-form>
</a-modal>
</template>
<script>
import AddForm from '@/components/customField/AddForm'
import { postAction } from '@/api/manage'
import AddForm from '../../../../components/customField/AddForm.vue'
import { addBatchEditClause, editBatchEditClause, getFormForBatchEditClause, getFormDataForBatchEditClause } from '../../../../api/documentToolApi.js'
export default {
name: 'SplitDetailBatchSetting',
@@ -28,14 +29,8 @@ export default {
return {
visible: false, // 批量设置弹框显示
confirmLoading: false,
url: {
addInfo: '/jero-boot/split/sarFileSplitItems/addSplitItems', // 新增
updateInfo: '/jero-boot/split/sarFileSplitItems/updateSplitItems', // 编辑
},
urlBatSet: {
getAddForm: 'split/sarFileSplitItems/getBatchSetForm',
addInfo: '/jero-boot/split/sarFileSplitItems/batchSet'
}
getFormFunc: getFormForBatchEditClause,
getFormDataFunc: getFormDataForBatchEditClause
}
},
methods: {
@@ -53,14 +48,14 @@ export default {
return
}
this.confirmLoading = true
let url = ''
let submitFunc
if (this.formInline.id) {
url = this.url.updateInfo
submitFunc = editBatchEditClause
} else {
url = this.url.addInfo
submitFunc = addBatchEditClause
}
formInline.ids = this.ids
postAction(url, formInline).then((res) => {
submitFunc(formInline).then((res) => {
if (res.data.success) {
this.$message.success(this.$t('operationSuccessful'))
this.visible = false
src/views/documentTool/modules/SplitDetailNodeAdd.vue → src/views/documentTool/documentSplit/modules/SplitDetailNodeAdd.vue
+1 -1
View File
@@ -33,7 +33,7 @@
</template>
<script>
import { postAction, putAction } from '@/api/manage'
import { postAction, putAction } from '../../../../api/manage.js'
export default {
name: 'SplitDetailNodeAdd',
data () {
src/views/documentTool/modules/SplitAddForm.vue
-777
View File
@@ -1,777 +0,0 @@
<template>
<a-drawer
class="split-table-drawer"
:title="formTitle"
placement="right"
:visible="visible"
@close="splitCancel"
width="900"
>
<a-spin :spinning="loading">
<a-form>
<a-form-model
class="split-content"
:model="formInline"
:rules="rules"
ref="splitEditForm"
>
<a-row :gutter="24">
<a-col :span="12" v-for="(item,index) in dataList" :key="index">
<div class="box-title-text" v-if="item.field_show_type === '1' || item.field_show_type === '11'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-input class="box-input"
:disabled="disabled"
v-model="formInline[item.db_field_name]"
:placeholder="$t('pleaseEnter')+item.db_field_txt"/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '2'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-input-number class="box-input"
:placeholder="$t('pleaseEnter')+item.db_field_txt"
:disabled="disabled"
:min="0"
v-model="formInline[item.db_field_name]" :max="99999999"/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '3'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<j-dict-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
@input="handleInput(item.db_field_name)"
:placeholder="$t('pleaseSelect')+item.db_field_txt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '4'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model-multi" :prop="item.db_field_name">
<j-multi-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+item.db_field_txt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '5'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-date-picker class="box-input"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:getCalendarContainer="(trigger) => trigger.parentNode"
v-model="formInline[item.db_field_name]"
:disabled="disabled"
style="width: 100%"/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '6'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-range-picker class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
@change="onChange(item.db_field_name)"></a-range-picker>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '7'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-button type="primary" class="button-text"
@click="clickButtonToUpload(item)">
{{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||
formInline[item.db_field_name] === null) ? $t('clickUpload') : $t('viewUploadedFiles')
}}
</a-button>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '8'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-textarea
:placeholder="$t('pleaseEnter')+item.db_field_txt"
:disabled="disabled"
v-model="formInline[item.db_field_name]" :rows="4"/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === '10'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<standard-selection :query="item"
:disabled="disabled"
:standard="formInline"
v-model="formInline[item.db_field_name]"/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === 'RADIO'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<j-dict-select-tag v-model="formInline[item.db_field_name]"
:disabled="disabled"
class="box-input"
@input="handleInput(item.db_field_name)"
:placeholder="$t('pleaseSelect')+item.db_field_txt"
:type="'radio'" :triggerChange="false" :dictCode="item.dict_field"/>
</a-form-model-item>
</div>
<div class="box-title-text" :title="item.db_field_txt" v-else-if="item.field_show_type === '0'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model" :prop="item.db_field_name">
<a-tree-select
tree-node-filter-prop="title"
v-model="formInline[item.db_field_name]"
class="box-input"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
style="width: 100%"
:tree-data="item.tree"
tree-checkable
:placeholder="$t('pleaseSelect')+item.db_field_txt"
@change="changeTree"
/>
</a-form-model-item>
</div>
<div class="box-title-text" v-else-if="item.field_show_type === 'CHECKBOX'">
<div class="title-text">
<span class="required" v-if="item.field_must_input === 1">*</span>
<span class="title-text-text" :title="item.db_field_txt">{{item.db_field_txt}}</span>
</div>
<a-form-model-item class="item-model-multi" :prop="item.db_field_name">
<j-multi-select-tag class="box-input" v-model="formInline[item.db_field_name]"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+item.db_field_txt"
:type="'checkbox'"
:triggerChange="false" :dictCode="item.dict_field"/>
</a-form-model-item>
</div>
</a-col>
</a-row>
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
<span class="con-divider">{{$t('docTool.split.clauseContent')}}</span>
<a-divider dashed />
<div class="table-operator">
<div class="operator-text" @click="splitAdd('-1')">
<a-icon type="plus" />
{{$t('add')}}
</div>
</div>
<a-row :gutter="24" class="split-content-row" id="split-content" v-for="(item, index) in contentList" :key="index">
<div class="split-row">
<div class="row-left">
<a-textarea v-if="item.type==='TEXT'" v-model="item.itemContent" :show-count="true" :maxlength="1000" :placeholder="$t('pleaseEnter')+$t('content')" />
<viewer>
<img v-if="item.type==='IMG'" :src="item.thumbUrl?item.thumbUrl:item.itemContent" alt="">
</viewer>
<!-- <img v-if="item.type==='IMG'" :src="item.thumbUrl?item.thumbUrl:item.itemContent" alt="" @click="preImg(item)">-->
<div v-if="item.type==='TABLE'" v-html="item.itemContent" class="item-table"></div>
</div>
<div class="row-right">
<a-button class="row-btn-add" @click="splitAdd(index)">{{$t('add')}}</a-button>
<a-button class="row-btn-edit" @click="splitEdit(index,item)" v-if="item.type==='TABLE'">{{$t('edit')}}</a-button>
<a-button @click="splitDelete(item,index)">{{$t('delete')}}</a-button>
</div>
</div>
</a-row>
</a-form-model>
</a-form>
<div class="split-form-footer">
<a-button type="primary" class="footer-btn-save" @click="splitSave">{{$t('preservation')}}</a-button>
<a-button @click="splitCancel">{{$t('cancel')}}</a-button>
</div>
</a-spin>
<!-- 类型选择弹框 -->
<split-detail-add-type-check
ref="splitDetailAddTypeCheck"
@addTextOk="addTextOk"
@addTableOk="addTableOk"
@addImageOk="addImageOk"
>
</split-detail-add-type-check>
<!-- 编辑表格弹框 -->
<split-detail-add-table ref="splitDetailAddTable" @editOk="editTableOk"></split-detail-add-table>
</a-drawer>
</template>
<script>
import UploadFile from '@/components/UploadFile'
import StandardSelection from '@/components/selection/StandardSelection'
// 类型选择弹框
import SplitDetailAddTypeCheck from './SplitDetailAddTypeCheck'
import axios from 'axios'
import { getAction } from '@/api/manage'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'
import SplitDetailAddTable from './SplitDetailAddTable'
export default {
name: 'SplitAddForm',
components: {
SplitDetailAddTable,
UploadFile,
StandardSelection,
SplitDetailAddTypeCheck
},
data () {
return {
formTitle: '',
title: this.$t('newClause'),
contentList: [],
visible: false,
addIndex: '',
disabled: false,
formInline: {},
isFormInline: false,
dataList: [],
ruleList: [],
rules: {},
uploadName: '',
type: 'add',
loading: false,
token: Vue.ls.get(ACCESS_TOKEN),
submitFlag: false,
deleteIds: [],
itemVal: {},
contentTrees: '',
isTableEdit: false
}
},
props: {
url: {
type: Object,
default: () => {
return {}
}
},
flag: {
type: String,
default: ''
},
infoId: {
type: String,
default: ''
},
menuId: {
type: String,
default: ''
},
itemId: {
type: String,
default: ''
}
},
mounted () {
this.loadData()
this.loadFormInfo()
},
methods: {
loadData () {
this.loading = true
getAction(`split/sarFileSplitItemsVal/getItemsValList`, { itemId: this.itemId }).then(res => {
if (res.success) {
this.contentList = [...res.result]
this.contentList.forEach(item => {
const imgData = item.itemContent.split('fileUrl=')[1]
item.thumbUrl = window._CONFIG.domianURL + '/sys/split/file/getImage?fileUrl=' + imgData
})
}
}).finally(() => {
this.loading = false
})
},
// 获取表单信息
loadFormInfo () {
getAction(`split/sarFileSplitItems/getSplitItemsById`, { id: this.itemId }).then(res => {
if (res.success) {
this.formInline = [...res.result]
}
})
},
// 增加按钮
splitAdd (val) {
if (val === '-1') {
this.addIndex = this.contentList.length - 1
} else {
this.addIndex = val
}
this.$refs.splitDetailAddTypeCheck.open()
},
// 编辑按钮
splitEdit (index, item) {
// console.log('item',item)
this.addIndex = index
console.log('&&&&&&&&&&&&&&&&&&&&&&&', item.itemContent)
this.$refs.splitDetailAddTable.open(item.itemContent)
this.$refs.splitDetailAddTable.isTableEdit = true
},
// 删除按钮
splitDelete (item, index) {
if (item.id) {
this.deleteIds.push(item.id)
}
for (let i = index; i < this.contentList.length - 1; i++) {
this.contentList[index] = this.contentList[index + 1]
}
this.contentList.pop()
},
// 保存
splitSave () {
this.$refs.splitEditForm.validate(valid => {
if (valid) {
this.loading = true
if (!this.submitFlag) {
this.submitFlag = true
let url = ''
if (this.formInline.id) {
url = this.url.updateInfo
} else {
url = this.url.addInfo
}
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(',')
axios({
url: url,
method: 'post',
data: params,
headers: {
'X-Access-Token': this.token
}
})
.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
})
}
}
})
},
// 取消
splitCancel () {
this.visible = false
this.$emit('closeVisible', false)
},
// 增加文本类型成功
addTextOk (number) {
for (let i = this.contentList.length; i > this.addIndex; i--) {
this.contentList[i + number - 1] = this.contentList[i - 1]
}
for (let j = 0; j < number; j++) {
this.contentList[++this.addIndex] = {
id: '',
type: 'TEXT',
itemContent: ''
}
}
this.contentList = JSON.parse(JSON.stringify(this.contentList))
},
// 增加表格类型成功
addTableOk (ueContent) {
for (let i = this.contentList.length; i > this.addIndex; i--) {
this.contentList[i + ueContent.length - 1] = this.contentList[i - 1]
}
this.contentList[++this.addIndex] = {
id: '',
type: 'TABLE',
itemContent: ueContent[0]
}
this.contentList = JSON.parse(JSON.stringify(this.contentList))
},
// 编辑表格类型成功
editTableOk (ueContent) {
console.log(ueContent)
this.contentList[this.addIndex] = {
id: '',
type: 'TABLE',
itemContent: ueContent[0]
}
this.contentList = JSON.parse(JSON.stringify(this.contentList))
},
// 增加图片类型成功
addImageOk (file, data, imgs) {
for (let i = this.contentList.length; i > this.addIndex; i--) {
this.contentList[i] = this.contentList[i - 1]
}
this.contentList[++this.addIndex] = {
id: '',
type: 'IMG',
itemContent: file.response.result.url,
thumbUrl: window._CONFIG.domianURL + '/sys/split/file/getImage?fileUrl=' + file.response.result.url.split('fileUrl=')[1]
}
this.contentList = JSON.parse(JSON.stringify(this.contentList))
},
onChange (item) {
if (this.queryParam[item] && this.queryParam[item].length > 0) {
const startDate = item + '_start'
const endDate = item + '_end'
this.queryParam[startDate] = this.queryParam[item][0]
this.queryParam[endDate] = this.queryParam[item][1]
} else {
this.queryParam[item] = []
}
},
// 点击点击上传按钮
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 }
},
handleInput (value) {
this.$nextTick(() => {
this.formInline = { ...this.formInline }
this.$refs.splitEditForm.validateField([value])
})
},
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)
},
getForm (callBack) {
this.loading = true
const params = {
flag: this.flag,
type: this.type
}
getAction(this.url.getAddForm, params).then((res) => {
if (res.success) {
this.dataList = res.result
this.ruleList = res.result
this.integrateData()
callBack && callBack()
}
})
},
edit (item) {
this.visible = true
this.type = 'edit'
this.itemVal = item
this.getForm(() => {
getAction(this.url.getDocumentInfo, { id: item.id }).then((res) => {
if (res.success) {
this.formInline = res.result
}
})
})
},
add () {
this.getForm()
this.visible = true
this.formInline = {}
this.contentList = []
this.type = 'add'
},
// 树结果选择
changeTree (value, label, extra) {
// console.log('changeValue',value, label, extra)
const labelValues = label
labelValues.shift()
this.contentTrees = labelValues.join(',')
},
// 正则替换小数点
limitNumber (value) {
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(/\./g, '') : 0
} else {
return 0
}
}
}
}
</script>
<style scoped lang="less">
.split-table-drawer{
.split-content{
.box-title-text {
line-height: 1.4;
display: flex;
.title-text {
width: 114px;
text-align: right;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 42px;
line-height: 42px;
.Required {
color: red;
margin-right: 4px;
}
.title-text-text {
margin-top: 9px;
}
}
.item-model {
width: calc(100% - 130px);
display: inline-block;
margin-top: 2px;
}
}
.con-divider{
font-size: 16px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85)
}
.table-operator{
margin-bottom: 20px;
text-align: right;
}
}
.split-content-row{
.split-row{
display: flex;
justify-content: space-between;
margin: 0 20px 20px;
.row-left{
flex: 1;
/*border:1px solid #9e9e9e;*/
img{
cursor: pointer;
width: 32px;
height: 32px;
}
.item-table{
/deep/ table{
width: 100% !important;
}
}
}
.row-right{
min-width: 150px;
margin-left: 20px;
.row-btn-add, .row-btn-edit{
margin-right: 20px;
}
}
}
}
.split-form-footer{
margin-top: 20px;
text-align: center;
position: fixed;
bottom:0px;
right: 0;
width: 900px;
padding-bottom:10px;
background: #FFFFFF;
.footer-btn-save{
margin-right: 20px;
}
}
}
.split-title{
.title-wraper {
.title-top {
display: flex;
justify-content: space-around;
.title-flex {
width: 75px;
height: 35px;
text-align: center;
border-radius: 5px;
border: 1px solid #d9d9d9;
padding: 7px;
cursor: pointer;
}
.title-flex-active {
background: #00B3BE;
border-color: #00B3BE;
color:#FFFFFF;
}
}
.title-num {
margin: 20px 20px 0;
line-height: 32px;
.title-num-add {
min-width: 70px;
}
.title-num-edit {
flex: 1;
}
}
}
}
.split-img{
margin-top: 20px;
text-align: center;
img{
}
}
.box-input {
/*min-width: 200px;*/
display: inline-block;
height: 38px;
margin-top: 2px;
}
.button-text {
height: 38px;
width: calc(100% - 100px);
line-height: 38px;
background: #fff;
border: 1px #00B3BE solid;
color: #00B3BE;
}
/deep/ .ant-select-tree {
width: auto;
height: 300px;
overflow: auto;
position: absolute;
/*background: #fff;*/
}
/deep/ .ant-select-tree-dropdown {
min-height: 320px;
}
</style>