[update] 文档拆分的弹框拆分出来

public/ueditor/ueditor.config.js

@@ -20,7 +20,9 @@
      * 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
      * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
      */
-    var URL = window.UEDITOR_HOME_URL || getUEBasePath();
+
+  window.UEDITOR_HOME_URL = "/public/ueditor/"
+  var URL = window.UEDITOR_HOME_URL || getUEBasePath();
 
     /**
      * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。

src/common/lang/en-us.js

@@ -399,7 +399,14 @@ module.exports = {
       selectDirectoryTerms: 'Please Select the directory location to add terms',
       documentSplitTemplate: 'Document Split Template',
       mergeTerms: 'Determine Merger Terms',
-      pleaseUploadSplitFile: 'Please Upload Split File'
+      pleaseUploadSplitFile: 'Please Upload Split File',
+      text: 'Text',
+      picture: 'Picture',
+      table: 'Table',
+      addQuantity: 'Add Quantity',
+      enterQuantity: 'Please enter quantity',
+      numberRows: 'Number of rows',
+      numberColumns: 'Number of columns'
     },
     comparison: {
       releaseSituation: 'Release situation',

src/common/lang/zh-cn.js

@@ -399,7 +399,14 @@ module.exports = {
       selectDirectoryTerms: '请选择添加条款的目录位置',
       documentSplitTemplate: '文档拆分模板',
       mergeTerms: '确定合并条款',
-      pleaseUploadSplitFile: '请上传拆分文件'
+      pleaseUploadSplitFile: '请上传拆分文件',
+      text: '文本',
+      picture: '图片',
+      table: '表格',
+      addQuantity: '添加数量',
+      enterQuantity: '请输入数量',
+      numberRows: '行数',
+      numberColumns: '列数',
     },
     comparison: {
       releaseSituation: '发布情况',

src/components/customField/TableData.vue

@@ -28,12 +28,12 @@
           </a>
         </tempalte>
       <span slot="detailClick" slot-scope="text, record">
-          <a class="textName" :title="text" @click="detailClick(record)">
+          <a class="text-name" :title="text" @click="detailClick(record)">
             {{text}}
           </a>
         </span>
       <span slot="detail" slot-scope="text">
-          <span class="textName" :title="text">
+          <span class="text-name" :title="text">
             {{text}}
           </span>
         </span>
@@ -47,6 +47,9 @@
            {{text}}
           </span>
         </span>
+        <span slot="showContent" slot-scope="text, record" class="item-solt">
+            <span class="content-show" href="javascript:;" @click="showContent(text,record)">{{record.iterms_conditions&&record.iterms_conditions!=='null'?record.iterms_conditions.replace(/<.*?>/ig, ' ') : ''}}</span>
+        </span>
     </a-table>
   </div>
 </template>
@@ -192,7 +195,7 @@ export default {
         align: 'left',
         ellipsis: true,
         width: 215
-      },
+      }
       // {
       //   title: this.$t('operation'),
       //   align: 'center',
@@ -275,6 +278,12 @@ export default {
               this.columns[index].scopedSlots = {
                 customRender: 'urlClick'
               }
+            } else if (res.db_field_name === 'iterms_conditions') {
+              // 拆分文档详情页的条款内容点击可预览
+              this.columns[index].width = 500
+              this.columns[index].scopedSlots = {
+                customRender: 'showContent'
+              }
             } else {
               this.columns[index].scopedSlots = {
                 customRender: 'detailText'
@@ -348,6 +357,9 @@ export default {
     },
     urlClick (item) {
       window.open(item)
+    },
+    showContent (item) {
+      this.$emit('showContent', item)
     }
   }
 }
@@ -358,7 +370,7 @@ export default {
   margin-right: 10px;
 }
 
-.textName {
+.text-name {
   width: 100%;
   overflow: hidden;
   display: -webkit-box;
@@ -370,4 +382,8 @@ export default {
   text-justify: inter-ideograph;
   word-break: break-all;
 }
+
+.item-solt {
+  cursor: pointer;
+}
 </style>

src/components/splitUpload/SplitAddClauseUploadImage.vue

@@ -0,0 +1,198 @@
+<template>
+  <a-modal
+    v-model="visible"
+    :maskClosable="false"
+    :footer="[]"
+    :title="title"
+    @cancel="handlePreImgCancel">
+    <a-upload-dragger
+      :accept="accept"
+      :disabled="disabled"
+      class="split-upload-list"
+      name="file"
+      :file-list="myFileList"
+      :multiple="true"
+      :action='uploadAction'
+      :headers="headers"
+      :list-type="listType"
+      @preview="preview"
+      :before-upload="beforeUpload"
+      :remove="remove"
+      @change="handleChange">
+      <p>
+        <a-icon class="action-upload" type="cloud-upload" />
+      </p>
+      <p class="ant-upload-text" style="font-size: 14px;line-height: 30px;margin-left: 5px;">{{this.$t('clickUpload')}}</p>
+    </a-upload-dragger>
+  </a-modal>
+</template>
+
+<script>
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+export default {
+  name: 'SplitAddClauseUploadImage',
+  props: [
+    'disabled',
+    'accept',
+    'title',
+    'listType'
+  ],
+  data () {
+    return {
+      visible: false,
+      uploadAction: window._CONFIG.domianURL + '/split/sarFileSplitItems/upload',
+      downLoadFileUrl: window._CONFIG.domianPreviewURL + '/sys/common/static',
+      fileList: [],
+      myFileList: [],
+      headers: '',
+      previewImage: {},
+      uploadFileFlag: 0
+    }
+  },
+  created () {
+    const token = Vue.ls.get(ACCESS_TOKEN)
+    this.headers = { 'X-Access-Token': token }
+    this.containerId = 'container-ty-' + new Date().getTime()
+  },
+  methods: {
+    open () {
+      this.visible = true
+    },
+    perentHandleFunc (data) {
+      this.myFileList = data
+      if (data && data.length > 0) {
+        this.myFileList.forEach((res) => {
+          res.name = res.fileName
+          res.uid = res.id
+        })
+      } else {
+        this.myFileList = []
+      }
+    },
+    beforeUpload (file) {
+      let fileFlag = false
+      // console.log('accept',this.accept,file)
+      this.fileTypeSatus = false
+      const fileTypes = this.accept.split('/')
+      const fileNowTypes = file.type.split('/')
+      fileFlag = (fileTypes[0] === fileNowTypes[0])
+      // console.log('filetype',fileFlag)
+      if (!fileFlag) {
+        this.$message.warning(this.$t('fileFormatIncorrect'))
+        this.fileTypeSatus = false
+      } else {
+        // let thisFileType = this.thisFileType.replace(/\s+/g, "");
+        if (this.uploadFileFlag < 20) {
+          this.uploadFileFlag++
+        }
+
+        this.fileTypeSatus = true
+        this.$message.destroy()
+        // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
+        this.errorMessage = file.name + '文件大小超出1000MB限制, 请压缩或降低文件质量!'
+      }
+    },
+    remove () {
+      this.fileTypeSatus = true
+    },
+    handleChange (info) {
+      const { file, fileList } = info
+      const status = info.file.status
+      info.fileList.forEach((val, index) => {
+        if (val.response && !val.response.result) {
+          this.$message.error(val.response.message)
+          info.fileList.splice(index, 1)
+        }
+      })
+      if (this.fileTypeSatus) {
+        if (file.size > 1000000000) {
+          this.$message.error(this.errorMessage)
+        } else {
+          if (status === 'error') {
+            this.uploadFileFlag--
+            this.$emit('uploadSuccess', this.fileList)
+            this.$message.destroy()
+            this.$message.error(`${info.file.name} ` + this.$t('fileUploadFailed'))
+          } else if (status === 'removed') {
+            this.uploadFileFlag--
+            this.myFileList = info.fileList
+            this.fileList = []
+            this.myFileList.forEach((res) => {
+              if (res.response) {
+                this.fileList.push(res.response.result)
+              } else {
+                this.fileList.push(res)
+              }
+            })
+            this.$emit('uploadSuccess', this.fileList, fileList)
+            if (this.uploadFileFlag === 0) {
+              this.visible = false
+            }
+            if (this.myFileList.length > 0) {
+              this.$message.destroy()
+              this.$message.success(`${info.file.name} ` + this.$t('deletedSuccessfully'))
+            }
+          } else if (status === 'done') {
+            this.uploadFileFlag--
+            this.fileList = []
+            this.myFileList = info.fileList
+            console.log('listLength11111', info.fileList.length)
+            if (info.fileList.length > 20) {
+              this.$message.destroy()
+              this.$message.error(this.$t('uploadMaximumATime'))
+              info.fileList.splice(20)
+              this.myFileList = info.fileList
+              this.myFileList.forEach((res) => {
+                if (res.response) {
+                  this.fileList.push(res.response.result)
+                } else {
+                  this.fileList.push(res)
+                }
+              })
+            } else {
+              this.myFileList.forEach((res) => {
+                if (res.response) {
+                  this.fileList.push(res.response.result)
+                } else {
+                  this.fileList.push(res)
+                }
+              })
+              // console.log('file111111',this.fileList,fileList,file,this.uploadFileFlag)
+              this.$emit('uploadSuccess', file, this.fileList, fileList)
+              if (this.uploadFileFlag === 0) {
+                this.visible = false
+              }
+              // console.log('uplossss',this.fileList,fileList)
+              if (this.myFileList.length > 0) {
+                this.$message.destroy()
+                this.$message.success(`${info.file.name} ` + this.$t('uploadSuccessful'))
+              }
+            }
+          } else if (status === 'uploading') {
+            // this.uploadFileFlag++
+            this.myFileList = info.fileList
+            // this.$message.success(`${info.file.name} 文件上传成功。`);
+          }
+        }
+      }
+    },
+    resetFileList () {
+      this.myFileList = []
+      this.fileList = []
+    },
+    preview (file) {
+      // console.log('file111',file)
+      this.previewImage = file.response.path
+    },
+    handlePreImgCancel () {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/uEditor/UEditor.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script>
-import '@/../public/ueditor/ueditor.config.js'
+import '../../../public/ueditor/ueditor.config.js'
-import '@/../public/ueditor/ueditor.all.js'
+import '../../../public/ueditor/ueditor.all.js'
-import '@/../public/ueditor/lang/zh-cn/zh-cn.js'
+import '../../../public/ueditor/lang/zh-cn/zh-cn.js'
-import '@/../public/ueditor/lang/en/en.js'
+import '../../../public/ueditor/lang/en/en.js'
 
 export default {
   name: 'UEditor',
@@ -62,7 +62,7 @@ export default {
     }
   },
   mounted () {
-    UEDITOR_CONFIG.UEDITOR_HOME_URL = '../../public/ueditor/'
+    UEDITOR_CONFIG.UEDITOR_HOME_URL = '../../../public/ueditor/'
     // 初始化UE
     this.editor = UE.delEditor('editor')
     this.editor = UE.getEditor('editor', this.config)

src/views/documentTool/modules/SplitAddForm.vue

@@ -4,8 +4,7 @@
     :title="formTitle"
     placement="right"
     :visible="visible"
-    :after-visible-change="afterVisibleChange"
+    @close="splitCancel"
-    @close="onClose"
     width="900"
   >
     <a-spin :spinning="loading">
@@ -123,20 +122,6 @@
                     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 === '9' || item.field_show_type === 'sel_user'">
-                <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">
-                  <PersonnelSelection :query="item"
-                                      v-if="visible"
-                                      :personneQuery="formInline"
-                                      @change="PersonnelSelectionChange"
-                                      :disabled="disabled"
-                                      v-model="formInline[item.db_field_name]"/>
-                </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>
@@ -198,14 +183,14 @@
               </div>
             </a-col>
           </a-row>
-          <upload-file ref="uploadFile" :accept="accept" @change="uploadFileChange" :return-url="false"></upload-file>
+          <upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
 
-          <span class="con-divider">{{$t('clauseContent')}}</span>
+          <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')}}
+              {{$t('add')}}
             </div>
           </div>
           <a-row :gutter="24" class="split-content-row" id="split-content" v-for="(item, index) in contentList" :key="index">
@@ -219,7 +204,7 @@
                 <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-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>
@@ -232,234 +217,50 @@
         <a-button @click="splitCancel">{{$t('cancel')}}</a-button>
       </div>
     </a-spin>
-    <!--  图片预览  -->
+    <!--  类型选择弹框  -->
-    <a-modal
+    <split-detail-add-type-check
-      :title="titlePreImg"
+      ref="splitDetailAddTypeCheck"
-      class="split-img"
+      @addTextOk="addTextOk"
-      :visible="preImgVisible"
+      @addTableOk="addTableOk"
-      :confirm-loading="confirmLoading"
+      @addImageOk="addImageOk"
-      @ok="handleOk"
-      @cancel="handlePreImgCancel"
-      :footer="false"
     >
-      <img :src="itemSrc" alt="">
+    </split-detail-add-type-check>
-    </a-modal>
+    <!--  编辑表格弹框 -->
-    <!--        类型选择弹框-->
+    <split-detail-add-table ref="splitDetailAddTable" @editOk="editTableOk"></split-detail-add-table>
-    <a-modal
-      :title="$t('Add')"
-      class="split-title"
-      :visible="addConVisible"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <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('text')}}</span>
-          <span class="title-flex title-pic" :class="{'title-flex-active':selected==='IMG'}" @click="selectTitle('IMG')">{{$t('picture')}}</span>
-          <span class="title-flex title-table" :class="{'title-flex-active':selected==='TABLE'}" @click="selectTitle('TABLE')">{{$t('table')}}</span>
-        </div>
-        <div class="title-num" v-if="selectedNum">
-          <a-form>
-            <a-form-model
-              class="number-content"
-              :model="numberForm"
-              :rules="validatorRules"
-              ref="numberForm"
-            >
-              <a-form-model-item :label="$t('addQuantity')" prop="textNumber">
-                <a-row :gutter="24">
-                  <a-col :span="24">
-                    <a-input-number  class="title-num-edit box-input" :min="0" :max="100" v-model="numberForm.textNumber" :placeholder="$t('enterQuantity')" :formatter="limitNumber" :parser="limitNumber" ></a-input-number>
-                  </a-col>
-                </a-row>
-              </a-form-model-item>
-            </a-form-model>
-          </a-form>
-        </div>
-      </div>
-    </a-modal>
-    <!--  上传图片弹框  -->
-    <split-upload v-if="splitVisible"  ref="uploadFile2" :disabled="disabled" :title="titleImg" :listType='listType' :splitVisible="splitVisible" :accept="accept" @coloseHandle="coloseHandle" @uploadSuccess="uploadSuccess1"></split-upload>
-    <!--  输入表格行数列数  -->
-    <a-modal
-      :title="titleColRow"
-      class="split-col-title"
-      :visible="tableColVisible"
-      :confirm-loading="confirmLoading"
-      @ok="handleColOk"
-      @cancel="handleColCancel"
-    >
-      <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
-        <a-form-model
-          class="number-content"
-          :model="rowColForm"
-          :rules="validatorRowColRules"
-          ref="numberRowColForm"
-        >
-          <a-form-model-item :label="$t('numberRows')" prop="rowCount">
-            <!--                    <a-form-item :label="$t('numberRows')">-->
-            <a-input-number class="box-input" v-model="rowColForm.rowCount" :min="1" :max="100"  :placeholder="$t('pleaseEnter')+$t('numberRows')" :formatter="limitNumber" :parser="limitNumber" style="width: 100%"  />
-            <!--                    </a-form-item>-->
-          </a-form-model-item>
-          <a-form-model-item :label="$t('numberColumns')" prop="colCount">
-            <!--                    <a-form-item :label="$t('numberColumns')">-->
-            <a-input-number class="box-input" v-model="rowColForm.colCount" :min="1" :max="100"  :placeholder="$t('pleaseEnter')+$t('numberColumns')" :formatter="limitNumber" :parser="limitNumber" style="width: 100%" />
-            <!--                    </a-form-item>-->
-          </a-form-model-item>
-        </a-form-model>
-      </a-form>
-    </a-modal>
-    <!--  表格弹框  -->
-    <a-modal
-      :title="titleTable"
-      class="split-table-title"
-      :visible="tableVisible"
-      :confirm-loading="confirmLoading"
-      @ok="handleOkTable"
-      @cancel="handleCancelTable"
-      width="700"
-    >
-      <u-editor v-if="tableVisible" :content="ueContent" :config=config ref="ueditor" @editor-onChange="uEditorChange"></u-editor>
-    </a-modal>
   </a-drawer>
 </template>
 
 <script>
 import UploadFile from '@/components/UploadFile'
 import StandardSelection from '@/components/selection/StandardSelection'
-import SplitUpload from '@/components/splitUpload/SplitUpload'
+// 类型选择弹框
-import UEditor from '@/components/uEditor/UEditor'
+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,
-    SplitUpload,
+    SplitDetailAddTypeCheck
-    UEditor
   },
   data () {
     return {
       formTitle: '',
-      titleTable: this.$t('table'),
-      titleColRow: this.$t('tableRowsColumns'),
       title: this.$t('newClause'),
       titlePreImg: '',
       contentList: [],
-      selected: 'TEXT',
-      selectedNum: true,
       confirmLoading: false,
       visible: false,
-      addConVisible: false,
-      form: {},
       addIndex: '',
-      accept: 'image/*',
-      listType: 'picture',
       disabled: false,
       splitVisible: false,
-      tableVisible: false,
-      preImgVisible: false, // 图片预览
       itemSrc: '', // 预览图片
-      ueContent: '',
-      // UE编辑器配置
-      config: {
-        // 可以在此处定义工具栏的内容
-        toolbars: [
-          [
-            'undo', // 撤销
-            'redo', // 重做
-            'bold', // 加粗
-            'italic', // 斜体
-            'underline', // 下划线
-            'strikethrough', // 删除线
-            'subscript', // 下标
-            'superscript', // 上标
-            'fontborder', // 字符边框
-            'fontfamily', // 字体
-            'fontsize', // 字号
-            'forecolor', // 字体颜色
-            // 'backcolor', // 背景色
-            'paragraph', // 段落格式
-            'customstyle', // 自定义标题
-            'indent', // 首行缩进
-            'justifyleft', // 居左对齐
-            'fullscreen', // 全屏
-            'justifyright', // 居右对齐
-            'justifycenter', // 居中对齐
-            'justifyjustify', // 两端对齐
-            'lineheight', // 行间距,
-            'rowspacingtop', // 段前距
-            'rowspacingbottom', // 段后距
-            'directionalityltr', // 从左向右输入
-            'directionalityrtl', // 从右向左输入
-            'cleardoc', // 清空文档
-            'formatmatch', // 格式刷
-            'removeformat', // 清除格式
-            'source', // 源代码
-            'blockquote', // 引用
-            'pasteplain', // 纯文本粘贴模式
-            'selectall', // 全选
-            'horizontal', // 分隔线
-            'time', // 时间
-            'date', // 日期
-            'link', // 超链接
-            'unlink', // 取消链接
-            // 'background', // 背景
-            // 'simpleupload', // 单图上传
-            'imagenone', // 默认
-            'imageleft', // 左浮动
-            'imageright', // 右浮动
-            'imagecenter', // 居中
-            'touppercase', // 字母大写
-            'tolowercase', // 字母小写
-            'emotion', // 表情
-            'spechars', // 特殊字符
-            'searchreplace', // 查询替换
-            'insertunorderedlist', // 无序列表
-            'insertorderedlist', // 有序列表
-            'pagebreak', // 分页
-            'insertframe', // 插入Iframe
-            'charts', // 图表
-            'edittip ', // 编辑提示
-            'autotypeset', // 自动排版
-            'drafts', // 从草稿箱加载
-            'inserttable', // 插入表格
-            'deletetable', // 删除表格,
-            'insertparagraphbeforetable', // ”表格前插入行”
-            'insertrow', // 前插入行
-            'insertcol', // 前插入列
-            'mergeright', // 右合并单元格
-            'mergedown', // 下合并单元格
-            'deleterow', // 删除行
-            'deletecol', // 删除列
-            'splittorows', // 拆分成行
-            'splittocols', // 拆分成列
-            'splittocells', // 完全拆分单元格
-            'inserttitle', // 插入标题
-            'deletecaption', // 删除表格标题,
-            'mergecells', // 合并多个单元格
-            'edittable', // 表格属性
-            'edittd' // 单元格属性
-          ]
-        ],
-        autoHeightEnabled: false,
-        autoFloatEnabled: false,
-        initialContent: '', // 初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
-        autoClearinitialContent: true, // 是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
-        initialFrameWidth: 650,
-        elementPathEnabled: false,
-        initialFrameHeight: 300,
-        maximumWords: 4000,
-        BaseUrl: '',
-        UEDITOR_HOME_URL: '/ueditor/',
-        editTableIndex: 1
-
-      },
-      tableColVisible: false,
       formInline: {},
       isFormInline: false,
       dataList: [],
@@ -471,22 +272,7 @@ export default {
       token: Vue.ls.get(ACCESS_TOKEN),
       submitFlag: false,
       deleteIds: [],
-      numberForm: {},
-      validatorRules: {
-        textNumber: [
-          { required: true, message: this.$t('enterQuantity'), trigger: 'blur' }
-        ]
-      },
       numberFlag: false,
-      rowColForm: {},
-      validatorRowColRules: {
-        colCount: [
-          { required: true, message: this.$t('pleaseEnter') + this.$t('numberRows'), trigger: 'blur' }
-        ],
-        rowCount: [
-          { required: true, message: this.$t('pleaseEnter') + this.$t('numberColumns'), trigger: 'blur' }
-        ]
-      },
       itemVal: {},
       contentTrees: '',
       isTableEdit: false
@@ -516,15 +302,6 @@ export default {
       default: ''
     }
   },
-  watch: {
-    selected (val) {
-      if (this.selected === 'TEXT') {
-        this.selectedNum = true
-      } else {
-        this.selectedNum = false
-      }
-    }
-  },
   mounted () {
     this.loadData()
     this.loadFormInfo()
@@ -552,28 +329,22 @@ export default {
         }
       })
     },
-    onClose () {
-      this.$emit('closeVisible', false)
-    },
     // 增加按钮
     splitAdd (val) {
-      this.addConVisible = true
       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
-      this.tableVisible = true
+      console.log('&&&&&&&&&&&&&&&&&&&&&&&', item.itemContent)
-      this.isTableEdit = true
+      this.$refs.splitDetailAddTable.open(item.itemContent)
-      this.ueContent = item.itemContent
+      this.$refs.splitDetailAddTable.isTableEdit = true
-      this.$nextTick(() => {
-        this.$refs.ueditor.setContent(item.itemContent)
-      })
     },
     // 删除按钮
     splitDelete (item, index) {
@@ -658,48 +429,44 @@ export default {
       this.visible = false
       this.$emit('closeVisible', false)
     },
-    // 确定增加的类型
+    // 增加文本类型成功
-    handleOk () {
+    addTextOk (number) {
-      if (this.selected === 'TEXT') { // 文本类型
+      for (let i = this.contentList.length; i > this.addIndex; i--) {
-        // console.log('contentList111111',this.contentList)
+        this.contentList[i + number - 1] = this.contentList[i - 1]
-        this.$refs.numberForm.validate(valid => {
-          if (valid) {
-            if (!this.numberFlag) {
-              this.numberFlag = true
-              for (let i = this.contentList.length; i > this.addIndex; i--) {
-                this.contentList[i + this.numberForm.textNumber - 1] = this.contentList[i - 1]
-              }
-              for (let j = 0; j < this.numberForm.textNumber; j++) {
-                this.contentList[++this.addIndex] = {
-                  id: '',
-                  type: 'TEXT',
-                  itemContent: ''
-                }
-              }
-              this.addConVisible = false
-              this.numberFlag = false
-              this.numberForm.textNumber = null
-              // console.log('contentList',this.contentList)
-            }
-          }
-        })
-      } else if (this.selected === 'IMG') { // 图片类型
-        // this.$refs.uploadFile2.visible=true
-        this.splitVisible = true
-        this.addConVisible = false
-      } else if (this.selected === 'TABLE') { // 表格类型
-        this.tableColVisible = true
-        this.addConVisible = false
       }
+      for (let j = 0; j < number; j++) {
+        this.contentList[++this.addIndex] = {
+          id: '',
+          type: 'TEXT',
+          itemContent: ''
+        }
+      }
+      this.contentList = JSON.parse(JSON.stringify(this.contentList))
     },
-    handleCancel () {
+    // 增加表格类型成功
-      this.addConVisible = false
+    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))
     },
-    selectTitle (val) {
+    // 编辑表格类型成功
-      this.selected = val
+    editTableOk (ueContent) {
+      console.log(ueContent)
+      this.contentList[this.addIndex] = {
+        id: '',
+        type: 'TABLE',
+        itemContent: ueContent[0]
+      }
+      this.contentList = JSON.parse(JSON.stringify(this.contentList))
     },
-    // 上传文件
+    // 增加图片类型成功
-    uploadSuccess1 (file, data, imgs, uploadFileFlag) {
+    addImageOk (file, data, imgs) {
       for (let i = this.contentList.length; i > this.addIndex; i--) {
         this.contentList[i] = this.contentList[i - 1]
       }
@@ -709,96 +476,7 @@ export default {
         itemContent: file.response.result.url,
         thumbUrl: window._CONFIG.domianURL + '/sys/split/file/getImage?fileUrl=' + file.response.result.url.split('fileUrl=')[1]
       }
-      if (uploadFileFlag === 0) {
+      this.contentList = JSON.parse(JSON.stringify(this.contentList))
-        this.splitVisible = false
-      }
-    },
-    // 关闭预览图片
-    handlePreImgCancel () {
-      this.preImgVisible = false
-    },
-    // 表格确认按钮
-    handleOkTable () {
-      let ueContent = []
-      ueContent = this.ueContent.match(/<table.{0,}?.+?>{0,}?<\/table>/g) || []
-      // console.log('uuuuuu',ueContent)
-      if (ueContent && ueContent.length > 1) {
-        this.$message.warning(this.$t('oneTableAdded'))
-      } else if (!ueContent || ueContent.length < 1) {
-        this.$message.warning(this.$t('addATable'))
-      } if (ueContent && ueContent.length === 1) {
-        this.tableVisible = false
-        if (this.isTableEdit) {
-          this.contentList[this.addIndex] = {
-            id: '',
-            type: 'TABLE',
-            itemContent: ueContent[0]
-          }
-        } else {
-          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.isTableEdit = false
-      }
-    },
-    // 表格取消按钮
-    handleCancelTable () {
-      this.tableVisible = false
-      this.isTableEdit = false
-    },
-    // 获取表格内容
-    uEditorChange (val) {
-      this.ueContent = val
-    },
-    // 取消行数列数按钮
-    handleColCancel () {
-      this.tableColVisible = false
-      this.rowColForm.rowCount = ''
-      this.rowColForm.colCount = ''
-    },
-    // 确定行数列数按钮
-    handleColOk () {
-      this.$refs.numberRowColForm.validate(valid => {
-        if (valid) {
-          this.tableColVisible = false
-          this.tableVisible = true
-          if (this.rowColForm.rowCount > 0 && this.rowColForm.colCount > 0) {
-            const tableList = []
-            let tableStr = ''
-            tableStr = '<table class="word-table" border="1" cellpadding="0" cellspacing="0">'
-            for (let r = 0; r < this.rowColForm.rowCount; r++) {
-              const rowTableList = []
-              tableStr += '<tr>'
-              for (let c = 0; c < this.rowColForm.colCount; c++) {
-                tableStr += `<td></td>`
-                const tableItem = {}
-                tableItem.id = ''
-                tableItem.rowNum = r + 1
-                tableItem.colNum = c + 1
-                tableItem.content = ''
-                rowTableList.push(tableItem)
-              }
-              tableStr += `</tr>`
-              tableList.push(rowTableList)
-            }
-            tableStr += `</table>`
-            this.ueContent = tableStr
-
-            this.$nextTick(() => {
-              this.$refs.ueditor.setContent(this.ueContent)
-            })
-            this.rowColForm.rowCount = ''
-            this.rowColForm.colCount = ''
-          }
-        }
-      })
-      // console.log('cont1111',this.addIndex,this.contentList)
     },
     onChange (item) {
       if (this.queryParam[item] && this.queryParam[item].length > 0) {
@@ -978,7 +656,7 @@ export default {
           margin-top: 9px;
         }
       }
-      .itemModel {
+      .item-model {
         width: calc(100% - 130px);
         display: inline-block;
         margin-top: 2px;
@@ -1011,8 +689,8 @@ export default {
           height: 32px;
         }
         .item-table{
-          table{
+          /deep/ table{
-            width: 100%!important;
+            width: 100% !important;
           }
         }
 

src/views/documentTool/modules/SplitClauseDetail.vue

@@ -0,0 +1,37 @@
+<template>
+  <a-modal
+    :title="$t('docTool.split.clauseContent')"
+    :visible="contentVisible"
+    :confirm-loading="confirmLoading"
+    :footer="false"
+    @cancel="handleCancel"
+  >
+    <p v-html="contentValue"></p>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'SplitClauseDetail',
+  data () {
+    return {
+      contentVisible: false,
+      confirmLoading: false,
+      contentValue: ''
+    }
+  },
+  methods: {
+    open (val) {
+      this.contentVisible = true
+      this.contentValue = val
+    },
+    handleCancel () {
+      this.contentVisible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/documentTool/modules/SplitDetail.vue

@@ -18,7 +18,7 @@
           >
             <template #title="{ key: treeKey, title, record }">
               <a-dropdown :trigger="['contextmenu']">
-                    <span v-if="title.indexOf(searchValue) >= -1 && title.length <= 18" :title="title"
+                <span v-if="title.indexOf(searchValue) >= -1 && title.length <= 18" :title="title"
                           class="expand-title">
                       {{ title.substr(0, title.indexOf(searchValue)) }}<span style="color: #f50">{{ searchValue }}</span>
                       {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
@@ -35,11 +35,10 @@
                       {{ title.indexOf(searchValue) + searchValue.length > 18 ? searchValue.substr(0, 18 - title.indexOf(searchValue)) : searchValue
                   }}</span>{{ title.indexOf(searchValue) + searchValue.length > 18 ? '...' : title.substr(title.indexOf(searchValue) + searchValue.length, 18 - title.indexOf(searchValue) - searchValue.length) + '...'
                   }}
-
+                </span>
-                    </span>
                 <span v-else :title="title">
-                      {{ title && title.length > 18 ? title.slice(0, 17) + '...' : title }}
+                  {{ title && title.length > 18 ? title.slice(0, 17) + '...' : title }}
-                    </span>
+                </span>
                 <template #overlay>
                   <a-menu v-if="$route.query.createBy === userData.username || administrators"
                           @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey, record)">
@@ -72,9 +71,9 @@
                     :menuId="menuId" @resetSearch="resetSearch" @queryParams="queryParamsValues" />
           </div>
           <div class="table-operator">
-            <div class="operator-text" @click="handleCopyManage"
+            <div class="operator-text" @click="handleCopyManage">
-                 v-if="$route.query.createBy === userData.username || administrators"
+<!--              v-if="$route.query.createBy === userData.username || administrators"-->
-                 v-has="'split:sarFileSplitItems:copy'">
+<!--              v-has="'split:sarFileSplitItems:copy'"-->
               <a-icon type="copy" />
               {{ $t('copy') }}
             </div>
@@ -140,67 +139,12 @@
         </div>
       </div>
       <!--  条款详情  -->
-      <a-modal
+      <split-clause-detail ref="splitClauseDetail"></split-clause-detail>
-        :title="$t('docTool.split.clauseContent')"
-        :visible="contentVisible"
-        :confirm-loading="confirmLoading"
-        :footer="false"
-        @cancel="handleCancel"
-      >
-        <p v-html="contentValue"></p>
-      </a-modal>
       <!--  添加节点  -->
-      <a-modal
+      <split-detail-node-add ref="splitDetailNodeAdd" @ok="nodeAddOk" @update="nodeUpdateOk"></split-detail-node-add>
-        class="add-menus"
-        :title="menuTitle"
-        :visible="menuRightVisible"
-        :confirm-loading="confirmLoading"
-        @cancel="handleCancelMenuRight"
-        @ok="hideModalMenuRight"
-      >
-        <a-form-model
-          v-if="menuRightVisible"
-          class="split-click-right-form"
-          ref="ruleForm"
-          :model="form"
-          :rules="rules"
-          :label-col="labelCol"
-          :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('clauseNo')" :maxLength="200" />
-          </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('clauseName')" :maxLength="200" />
-          </a-form-model-item>
-          <a-form-model-item :label="$t('serialNumber')" prop="displaySeq">
-            <a-input-number v-model="form.displaySeq" :min="1" :max="99999"
-                            class="box-input"
-                            :placeholder="$t('pleaseEnter')+$t('serialNumber')"
-                            :formatter="limitNumber"
-                            :parser="limitNumber" style="width: 100%" />
-          </a-form-model-item>
-        </a-form-model>
-      </a-modal>
       <!--  批量设置弹框  -->
-      <a-modal
+      <split-detail-batch-setting ref="splitDetailBatchSetting" @ok="batchSettingOk"></split-detail-batch-setting>
-        class="show-setting"
+      <split-add-form ref="splitForm" :flag="'4'"
-        :title="$t('docTool.split.batchSetting')"
-        :visible="batSetVisible"
-        :confirm-loading="confirmLoading"
-        @ok="modalOk"
-        @cancel="batSetCancel"
-        style="width: 1000px;height: auto"
-      >
-        <add-form
-          ref="fileForm"
-          @submitFormData="submitFormData"
-          :flag="'4'"
-          v-if="batSetVisible&&ids"
-          :url="urlBatSet">
-        </add-form>
-      </a-modal>
-      <split-add-form ref="splitForm" :formTitle="formTitle" :flag="'4'"
                       :url="url" :infoId="infoId" :menuId="menuId" :itemId="itemId" @closeVisible="closeVisible"
                       @sumber="sumber"></split-add-form>
 
@@ -211,11 +155,18 @@
 <script>
 import Search from '@/components/customField/Search'
 import TableData from '@/components/customField/TableData'
-import AddForm from '@/components/customField/AddForm'
+// 条款添加
+import SplitAddForm from './SplitAddForm'
+// 条款内容弹框
+import SplitClauseDetail from './SplitClauseDetail'
+// 添加左侧树节点弹框
+import SplitDetailNodeAdd from './SplitDetailNodeAdd'
+// 批量设置弹框
+import SplitDetailBatchSetting from './SplitDetailBatchSetting'
 import Vue from 'vue'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { mapGetters } from 'vuex'
-import { postAction, getAction, putAction, downloadFile } from '@/api/manage'
+import { postAction, getAction, downloadFile } from '@/api/manage'
 import moment from 'moment'
 
 export default {
@@ -223,13 +174,14 @@ export default {
   components: {
     Search,
     TableData,
-    AddForm
+    SplitAddForm,
+    SplitClauseDetail,
+    SplitDetailNodeAdd,
+    SplitDetailBatchSetting
   },
   data () {
     return {
       userData: {},
-      labelCol: { span: 6 },
-      wrapperCol: { span: 16 },
       contentVisible: false, // 条款内容弹框显示
       selectedRowKeys: [],
       selectedRows: [],
@@ -246,26 +198,10 @@ export default {
       confirmLoading: false,
       nodeTreeItem: null, // 右键菜单
       tmpStyle: '', // 右键菜单位置
-      menuTitle: this.$t('add'),
-      menuRightVisible: false,
-      form: {},
-      rules: {
-        name: [
-          // { required: true, message: this.$t('PleaseEnter') + this.$t('clauseNo'), trigger: 'blur' },
-        ],
-        itemName: [
-          { required: true, message: this.$t('pleaseEnter') + this.$t('docTool.split.clauseName'), trigger: 'blur' }
-        ],
-        displaySeq: [
-          { required: true, message: this.$t('pleaseEnter') + this.$t('serialNumber'), trigger: 'blur' }
-          // { min: 1, max: 99999, message: this.$t('cantExeed') + '99999' + this.$t('characters'), trigger: 'blur' },
-        ]
-      },
       infoId: '',
       menuId: '',
       itemId: '',
       itemVal: {},
-      isEdit: false,
       // 操作栏
       operationList: [
         {
@@ -282,17 +218,9 @@ export default {
         searchList: 'split/sarFileSplitItems/queryCondition', // 搜索字段
         tableList: 'split/sarFileSplitItems/getSplitItemsByPage', // 表格数据
         getAddForm: 'split/sarFileSplitItems/getForm', // 表单的字段
-        addInfo: '/jero-boot/split/sarFileSplitItems/addSplitItems', // 新增
-        updateInfo: '/jero-boot/split/sarFileSplitItems/updateSplitItems', // 编辑
         getDocumentInfo: 'split/sarFileSplitItems/getSplitItemsById',
         importZipUrl: '/split/sarFileSplitItems/importSplitItems' // 导入
       },
-      urlBatSet: {
-        getAddForm: 'split/sarFileSplitItems/getBatchSetForm',
-        addInfo: '/jero-boot/split/sarFileSplitItems/batchSet'
-      },
-      batSetVisible: false, // 批量设置弹框显示
-      ids: '',
       token: Vue.ls.get(ACCESS_TOKEN),
       uploadMenuId: '',
       deleteNode: false,
@@ -321,12 +249,7 @@ export default {
     ...mapGetters(['userInfo']),
     // 显示条款内容弹框
     showContent (val) {
-      this.contentVisible = true
+      this.$refs.splitClauseDetail.open(val)
-      this.contentValue = val
-    },
-    // 关闭条款内容弹框
-    handleCancel () {
-      this.contentVisible = false
     },
     generateList (data) {
       for (let i = 0; i < data.length; i++) {
@@ -463,7 +386,6 @@ export default {
       const queryParam = {
         menu_id: this.menuId,
         info_id: this.infoId
-
       }
       this.parameter.info_id = this.infoId
       this.parameter.menu_id = this.menuId
@@ -471,22 +393,26 @@ export default {
     },
     // 树形新增
     orgAdd () {
-      this.menuTitle = this.$t('add')
+      this.$refs.splitDetailNodeAdd.add(this.nodeItem, this.infoId)
-      this.isEdit = false
-      this.form = {}
-      this.menuRightVisible = true
     },
     // 树形修改
     orgEdit () {
-      this.menuTitle = this.$t('edit')
+      this.$refs.splitDetailNodeAdd.edit(this.nodeItem, this.infoId)
-      this.isEdit = true
+    },
-      this.form.id = this.nodeItem.id
+    // 添加节点完成后的回调
-      this.form.pid = this.nodeItem.pid
+    nodeAddOk () {
-      this.form.name = this.nodeItem.name
+      this.expandedKeys.push(this.nodeItem.id)
-      this.form.itemName = this.nodeItem.itemName
+      this.loadMenuData()
-      this.form.displaySeq = this.nodeItem.displaySeq
+      const queryParam = {
-      this.form = { ...this.form }
+        menu_id: this.menuId,
-      this.menuRightVisible = true
+        info_id: this.infoId
+      }
+      this.$refs.splitDetailTable.$emit('searchQuery', JSON.parse(JSON.stringify(queryParam)))
+    },
+    // 修改节点完成后的回调
+    nodeUpdateOk (expandId) {
+      this.onExpand(expandId)
+      this.loadMenuData()
     },
     // 树形删除
     orgDelete () {
@@ -570,71 +496,6 @@ export default {
       this.uploadMenuId = ''
       this.selectedKeys = []
     },
-    handleCancelMenuRight () {
-      this.menuRightVisible = false
-    },
-    // 增加条款确定
-    hideModalMenuRight () {
-      const expandId = []
-      expandId.push(this.form.pid)
-      if (!this.isEdit) {
-        const params = {
-          infoId: this.infoId,
-          pid: this.nodeItem.id,
-          ...this.form
-        }
-        this.$refs.ruleForm.validate(valid => {
-          if (valid) {
-            if (!this.flag) {
-              this.flag = true
-              postAction(`split/sarFileSplitMenu/addMenu`, params).then(res => {
-                if (res.success) {
-                  this.menuRightVisible = false
-                  this.$message.success(this.$t('operationSuccessful'))
-                  // this.onExpand(expandId)
-                  this.form = {}
-                  this.expandedKeys.push(this.nodeItem.id)
-                  // console.log('expandedKeys1111',this.expandedKeys)
-                  this.loadMenuData()
-                  const queryParam = {
-                    menu_id: this.menuId,
-                    info_id: this.infoId
-                  }
-                  this.$refs.splitDetailTable.$emit('searchQuery', JSON.parse(JSON.stringify(queryParam)))
-                } else {
-                  this.$message.warning(this.$t('operationFailed'))
-                }
-              }).finally(() => {
-                this.flag = false
-                this.menuRightVisible = false
-              })
-            }
-          }
-        })
-      } else {
-        const params = {
-          info_id: this.infoId,
-          ...this.form
-        }
-        if (!this.flag) {
-          this.flag = true
-          // console.log('parms',params)
-          putAction(`split/sarFileSplitMenu/updateMenu`, params).then(res => {
-            if (res.success) {
-              this.$message.success(this.$t('operationSuccessful'))
-              this.onExpand(expandId)
-              this.form = {}
-              this.loadMenuData()
-            } else {
-              this.$message.warning(this.$t('operationFailed'))
-            }
-          }).finally(() => {
-            this.flag = false
-            this.menuRightVisible = false
-          })
-        }
-      }
-    },
     // 复制按钮
     handleCopyManage (record) {
       const ids = []
@@ -679,17 +540,21 @@ export default {
     // 新增
     handleAddManage () {
       // console.log('this.menuId',this.menuId)
-      if (this.menuId) {
+      this.$nextTick(() => {
-        this.formTitle = this.$t('add')
+        this.$refs.splitForm.add()
-        this.itemId = ''
+        this.$refs.splitForm.formTitle = this.$t('add')
-        this.addVisible = true
+      })
-        this.$nextTick(() => {
+      // if (this.menuId) {
-          this.$refs.splitForm.add()
+      //   this.formTitle = this.$t('add')
-          this.$refs.splitForm.formTitle = this.$t('add')
+      //   this.itemId = ''
-        })
+      //   this.addVisible = true
-      } else {
+      //   this.$nextTick(() => {
-        this.$message.warning(this.$t('docTool.split.selectDirectoryTerms'))
+      //     this.$refs.splitForm.add()
-      }
+      //     this.$refs.splitForm.formTitle = this.$t('add')
+      //   })
+      // } else {
+      //   this.$message.warning(this.$t('docTool.split.selectDirectoryTerms'))
+      // }
     },
     // 关闭新增弹框
     closeVisible (val) {
@@ -788,43 +653,21 @@ export default {
     },
     // 批量设置
     handleManage () {
-      this.ids = this.selectedRowKeys.join(',')
+      const ids = this.selectedRowKeys.join(',')
       if (this.selectedRowKeys && this.selectedRowKeys.length < 1) {
         this.$message.warning(this.$t('selectLeastOne'))
       } else {
-        this.batSetVisible = true
+        this.$refs.splitDetailBatchSetting.open(ids)
       }
     },
-    // 批量设置确定
+    // 批量设置完成的回调
-    modalOk () {
+    batchSettingOk () {
-      this.$refs.fileForm.submit()
+      this.selectClear()
-    },
+      const queryParam = {
-    // 批量设置取消
+        menu_id: this.menuId,
-    batSetCancel () {
+        info_id: this.infoId
-      this.batSetVisible = false
-    },
-    submitFormData (formInline) {
-      let url = ''
-      if (this.formInline.id) {
-        url = this.url.updateInfo
-      } else {
-        url = this.url.addInfo
       }
-      formInline.ids = this.ids
+      this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
-      postAction(url, formInline).then((res) => {
-        if (res.data.success) {
-          this.$message.success(this.$t('operationSuccessful'))
-          this.batSetVisible = false
-          this.selectClear()
-          const queryParam = {
-            menu_id: this.menuId,
-            info_id: this.infoId
-          }
-          this.$refs.splitDetailTable.$emit('searchGetData', JSON.parse(JSON.stringify(queryParam)))
-        } else {
-          this.$message.warning(this.$t('operationFailed'))
-        }
-      })
     },
     // 批量删除
     handleBatCancel () {
@@ -997,16 +840,6 @@ export default {
           }
         }
       }
-    },
-    // 正则替换小数点
-    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
-      }
     }
   },
   beforeDestroy () {

src/views/documentTool/modules/SplitDetailAddTable.vue

@@ -0,0 +1,173 @@
+<template>
+  <a-modal
+    :title="title"
+    class="split-table-title"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    @ok="handleOkTable"
+    @cancel="handleCancelTable"
+    :width="700"
+  >
+    <u-editor :content="ueContent" :config="config" ref="ueditor" @editor-onChange="uEditorChange"></u-editor>
+  </a-modal>
+</template>
+
+<script>
+import UEditor from '@/components/uEditor/UEditor'
+export default {
+  name: 'SplitDetailAddTable',
+  components: { UEditor },
+  data () {
+    return {
+      title: this.$t('docTool.split.table'),
+      visible: false,
+      confirmLoading: false,
+      ueContent: '',
+      // UE编辑器配置
+      config: {
+        // 可以在此处定义工具栏的内容
+        toolbars: [
+          [
+            'undo', // 撤销
+            'redo', // 重做
+            'bold', // 加粗
+            'italic', // 斜体
+            'underline', // 下划线
+            'strikethrough', // 删除线
+            'subscript', // 下标
+            'superscript', // 上标
+            'fontborder', // 字符边框
+            'fontfamily', // 字体
+            'fontsize', // 字号
+            'forecolor', // 字体颜色
+            // 'backcolor', // 背景色
+            'paragraph', // 段落格式
+            'customstyle', // 自定义标题
+            'indent', // 首行缩进
+            'justifyleft', // 居左对齐
+            'fullscreen', // 全屏
+            'justifyright', // 居右对齐
+            'justifycenter', // 居中对齐
+            'justifyjustify', // 两端对齐
+            'lineheight', // 行间距,
+            'rowspacingtop', // 段前距
+            'rowspacingbottom', // 段后距
+            'directionalityltr', // 从左向右输入
+            'directionalityrtl', // 从右向左输入
+            'cleardoc', // 清空文档
+            'formatmatch', // 格式刷
+            'removeformat', // 清除格式
+            'source', // 源代码
+            'blockquote', // 引用
+            'pasteplain', // 纯文本粘贴模式
+            'selectall', // 全选
+            'horizontal', // 分隔线
+            'time', // 时间
+            'date', // 日期
+            'link', // 超链接
+            'unlink', // 取消链接
+            // 'background', // 背景
+            // 'simpleupload', // 单图上传
+            'imagenone', // 默认
+            'imageleft', // 左浮动
+            'imageright', // 右浮动
+            'imagecenter', // 居中
+            'touppercase', // 字母大写
+            'tolowercase', // 字母小写
+            'emotion', // 表情
+            'spechars', // 特殊字符
+            'searchreplace', // 查询替换
+            'insertunorderedlist', // 无序列表
+            'insertorderedlist', // 有序列表
+            'pagebreak', // 分页
+            'insertframe', // 插入Iframe
+            'charts', // 图表
+            'edittip ', // 编辑提示
+            'autotypeset', // 自动排版
+            'drafts', // 从草稿箱加载
+            'inserttable', // 插入表格
+            'deletetable', // 删除表格,
+            'insertparagraphbeforetable', // ”表格前插入行”
+            'insertrow', // 前插入行
+            'insertcol', // 前插入列
+            'mergeright', // 右合并单元格
+            'mergedown', // 下合并单元格
+            'deleterow', // 删除行
+            'deletecol', // 删除列
+            'splittorows', // 拆分成行
+            'splittocols', // 拆分成列
+            'splittocells', // 完全拆分单元格
+            'inserttitle', // 插入标题
+            'deletecaption', // 删除表格标题,
+            'mergecells', // 合并多个单元格
+            'edittable', // 表格属性
+            'edittd' // 单元格属性
+          ]
+        ],
+        autoHeightEnabled: false,
+        autoFloatEnabled: false,
+        initialContent: '', // 初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
+        autoClearinitialContent: true, // 是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
+        initialFrameWidth: 650,
+        elementPathEnabled: false,
+        initialFrameHeight: 300,
+        maximumWords: 4000,
+        BaseUrl: '',
+        UEDITOR_HOME_URL: '/ueditor/',
+        editTableIndex: 1
+      },
+      isTableEdit: false
+    }
+  },
+  methods: {
+    open (tableStr) {
+      console.log('$$$$$$$$$$$$', tableStr)
+      this.visible = true
+      this.ueContent = tableStr
+      this.$nextTick(() => {
+        this.$refs.ueditor.setContent(this.ueContent)
+      })
+    },
+    // 表格确认按钮
+    handleOkTable () {
+      let ueContent = []
+      ueContent = this.ueContent.match(/<table.{0,}?.+?>{0,}?<\/table>/g) || []
+      if (ueContent && ueContent.length > 1) {
+        this.$message.warning(this.$t('oneTableAdded'))
+      } else if (!ueContent || ueContent.length < 1) {
+        this.$message.warning(this.$t('addATable'))
+      } if (ueContent && ueContent.length === 1) {
+        console.log(ueContent)
+        console.log(this.isTableEdit)
+        if (this.isTableEdit) {
+          this.$emit('editOk', ueContent)
+        } else {
+          this.$emit('addOk', ueContent)
+        }
+        this.close()
+      }
+    },
+    // 表格取消按钮
+    handleCancelTable () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.isTableEdit = false
+      this.ueContent = ''
+      this.$nextTick(() => {
+        this.$refs.ueditor.execCommand()
+      })
+    },
+    // 获取表格内容
+    uEditorChange (val) {
+      console.log('--------------uEditorChange------------', val)
+      this.ueContent = val
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/documentTool/modules/SplitDetailAddTypeCheck.vue

@@ -0,0 +1,278 @@
+<template>
+  <a-modal
+    :title="$t('add')"
+    class="split-title"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <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>
+      </div>
+      <!--   选择文本类型时，需要填写个数  -->
+      <div class="title-num" v-if="selected==='TEXT'">
+        <a-form>
+          <a-form-model
+            class="number-content"
+            :model="numberForm"
+            :rules="validatorRules"
+            ref="numberForm"
+          >
+            <a-form-model-item :label="$t('docTool.split.addQuantity')" prop="textNumber">
+              <a-input-number
+                style="width: 100%"
+                :min="0"
+                :max="100"
+                v-model="numberForm.textNumber"
+                :placeholder="$t('docTool.split.enterQuantity')"
+                :formatter="limitNumber"
+                :parser="limitNumber"
+              ></a-input-number>
+            </a-form-model-item>
+          </a-form-model>
+        </a-form>
+      </div>
+      <!--   选择表格时，需要填写行列数  -->
+      <div class="title-num" v-if="selected==='TABLE'">
+        <a-form>
+          <a-form-model
+            class="number-content"
+            :model="rowColForm"
+            :rules="validatorRowColRules"
+            ref="numberRowColForm"
+          >
+            <a-form-model-item :label="$t('docTool.split.numberRows')" prop="rowCount">
+              <a-input-number
+                style="width: 100%"
+                v-model="rowColForm.rowCount"
+                :min="1"
+                :max="100"
+                :placeholder="$t('pleaseEnter')+$t('docTool.split.numberRows')"
+                :formatter="limitNumber"
+                :parser="limitNumber"
+              />
+            </a-form-model-item>
+            <a-form-model-item :label="$t('docTool.split.numberColumns')" prop="colCount">
+              <a-input-number
+                style="width: 100%"
+                v-model="rowColForm.colCount"
+                :min="1"
+                :max="100"
+                :placeholder="$t('pleaseEnter')+$t('docTool.split.numberColumns')"
+                :formatter="limitNumber"
+                :parser="limitNumber"
+              />
+            </a-form-model-item>
+          </a-form-model>
+        </a-form>
+      </div>
+    </div>
+    <!--  上传图片弹框  -->
+    <split-add-clause-upload-image
+      ref="uploadFile"
+      :disabled="disabled"
+      :title="titleImg"
+      :listType="listType"
+      :accept="accept"
+      @uploadSuccess="uploadSuccess">
+    </split-add-clause-upload-image>
+    <!--  表格弹框  -->
+    <split-detail-add-table ref="splitDetailAddTable" @addOk="tableAddOk"></split-detail-add-table>
+  </a-modal>
+</template>
+
+<script>
+// 上传图片弹框
+import SplitAddClauseUploadImage from '../../../components/splitUpload/SplitAddClauseUploadImage'
+// 编辑表格的弹框
+import SplitDetailAddTable from './SplitDetailAddTable'
+export default {
+  name: 'SplitDetailAddTypeCheck',
+  components: { SplitAddClauseUploadImage, SplitDetailAddTable },
+  watch: {
+    selected (val) {
+      if (this.selected === 'TEXT') {
+        this.selectedNum = true
+      } else {
+        this.selectedNum = false
+      }
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false,
+      selected: 'TEXT',
+      selectedNum: true,
+      numberForm: {},
+      validatorRules: {
+        textNumber: [
+          { required: true, message: this.$t('docTool.split.enterQuantity'), trigger: 'blur' }
+        ]
+      },
+      // 文件上传弹框相关
+      splitVisible: false,
+      disabled: false,
+      titleImg: this.$t('uploadPictures'),
+      listType: 'picture',
+      accept: 'image/*',
+      // 表格行列相关数据
+      rowColForm: {},
+      validatorRowColRules: {
+        colCount: [
+          { required: true, message: this.$t('pleaseEnter') + this.$t('docTool.split.numberRows'), trigger: 'blur' }
+        ],
+        rowCount: [
+          { required: true, message: this.$t('pleaseEnter') + this.$t('docTool.split.numberColumns'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open () {
+      this.visible = true
+    },
+    selectTitle (val) {
+      this.selected = val
+      if (val === 'TEXT') {
+        this.$nextTick(() => {
+          this.$refs.numberForm.clearValidate()
+        })
+      } else if (val === 'TABLE') {
+        this.$nextTick(() => {
+          this.$refs.numberRowColForm.clearValidate()
+        })
+      }
+    },
+    // 上传文件
+    uploadSuccess (file, data, imgs) {
+      this.$emit('addImageOk', file, data, imgs)
+    },
+    // 确定增加的类型
+    handleOk () {
+      if (this.confirmLoading) {
+        return
+      }
+      if (this.selected === 'TEXT') { // 文本类型
+        this.$refs.numberForm.validate(valid => {
+          if (valid) {
+            this.confirmLoading = true
+            this.$emit('addTextOk', this.numberForm.textNumber)
+            this.visible = false
+            this.confirmLoading = false
+            this.numberForm.textNumber = null
+          }
+        })
+      } else if (this.selected === 'IMG') { // 图片类型
+        this.$refs.uploadFile.open()
+        this.visible = false
+      } else if (this.selected === 'TABLE') { // 表格类型
+        this.$refs.numberRowColForm.validate(valid => {
+          if (valid) {
+            if (this.rowColForm.rowCount > 0 && this.rowColForm.colCount > 0) {
+              const tableList = []
+              let tableStr = ''
+              tableStr = '<table class="word-table" border="1" cellpadding="0" cellspacing="0">'
+              for (let r = 0; r < this.rowColForm.rowCount; r++) {
+                const rowTableList = []
+                tableStr += '<tr>'
+                for (let c = 0; c < this.rowColForm.colCount; c++) {
+                  tableStr += `<td></td>`
+                  const tableItem = {}
+                  tableItem.id = ''
+                  tableItem.rowNum = r + 1
+                  tableItem.colNum = c + 1
+                  tableItem.content = ''
+                  rowTableList.push(tableItem)
+                }
+                tableStr += `</tr>`
+                tableList.push(rowTableList)
+              }
+              tableStr += `</table>`
+              this.$nextTick(() => {
+                this.$refs.splitDetailAddTable.isTableEdit = false
+                this.$refs.splitDetailAddTable.open(tableStr)
+              })
+              this.visible = false
+              this.rowColForm = {}
+            }
+          }
+        })
+      }
+    },
+    handleCancel () {
+      this.visible = false
+    },
+    // 添加表格的回调
+    tableAddOk (ueContent) {
+      this.$emit('addTableOk', ueContent)
+    },
+    // 正则替换小数点
+    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-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;
+      }
+    }
+  }
+}
+
+.number-content{
+  .ant-form-item{
+    display: flex;
+    .ant-form-item-control-wrapper{
+      flex: 1;
+      .title-num-edit{
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/documentTool/modules/SplitDetailBatchSetting.vue

@@ -0,0 +1,85 @@
+<template>
+  <a-modal
+    class="show-setting"
+    :title="$t('docTool.split.batchSetting')"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    style="width: 1000px;height: auto"
+  >
+    <add-form
+      ref="fileForm"
+      @submitFormData="submitFormData"
+      :flag="'4'"
+      :url="urlBatSet">
+    </add-form>
+  </a-modal>
+</template>
+
+<script>
+import AddForm from '@/components/customField/AddForm'
+import { postAction } from '@/api/manage'
+
+export default {
+  name: 'SplitDetailBatchSetting',
+  components: { AddForm },
+  data () {
+    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'
+      }
+    }
+  },
+  methods: {
+    open (ids) {
+      this.ids = ids
+      this.visible = true
+    },
+    // 批量设置确定
+    handleOk () {
+      this.$refs.fileForm.submit()
+    },
+    // 表单提交
+    submitFormData (formInline) {
+      if (this.confirmLoading) {
+        return
+      }
+      this.confirmLoading = true
+      let url = ''
+      if (this.formInline.id) {
+        url = this.url.updateInfo
+      } else {
+        url = this.url.addInfo
+      }
+      formInline.ids = this.ids
+      postAction(url, 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>
+
+</style>

src/views/documentTool/modules/SplitDetailNodeAdd.vue

@@ -0,0 +1,159 @@
+<template>
+  <a-modal
+    class="add-menus"
+    :title="title"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <a-form-model
+      class="split-click-right-form"
+      ref="ruleForm"
+      :model="form"
+      :rules="rules"
+      :label-col="labelCol"
+      :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-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-form-model-item>
+      <a-form-model-item :label="$t('serialNumber')" prop="displaySeq">
+        <a-input-number v-model="form.displaySeq" :min="1" :max="99999"
+                        class="box-input"
+                        :placeholder="$t('pleaseEnter')+$t('serialNumber')"
+                        :formatter="limitNumber"
+                        :parser="limitNumber" style="width: 100%" />
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+import { postAction, putAction } from '@/api/manage'
+export default {
+  name: 'SplitDetailNodeAdd',
+  data () {
+    return {
+      title: this.$t('add'),
+      visible: false,
+      confirmLoading: false,
+      labelCol: { span: 6 },
+      wrapperCol: { span: 16 },
+      form: {},
+      rules: {
+        name: [
+          // { required: true, message: this.$t('PleaseEnter') + this.$t('clauseNo'), trigger: 'blur' },
+        ],
+        itemName: [
+          { required: true, message: this.$t('pleaseEnter') + this.$t('docTool.split.clauseName'), trigger: 'blur' }
+        ],
+        displaySeq: [
+          { required: true, message: this.$t('pleaseEnter') + this.$t('serialNumber'), trigger: 'blur' }
+          // { min: 1, max: 99999, message: this.$t('cantExeed') + '99999' + this.$t('characters'), trigger: 'blur' },
+        ]
+      },
+      isEdit: false,
+      nodeItem: {},
+      infoId: ''
+    }
+  },
+  methods: {
+    add (nodeItem, infoId) {
+      this.title = this.$t('add')
+      this.isEdit = false
+      this.form = {}
+      this.visible = true
+      this.nodeItem = nodeItem
+      this.infoId = infoId
+    },
+    edit (nodeItem, infoId) {
+      this.title = this.$t('edit')
+      this.isEdit = true
+      this.nodeItem = nodeItem
+      this.form.id = nodeItem.id
+      this.form.pid = nodeItem.pid
+      this.form.name = nodeItem.name
+      this.form.itemName = nodeItem.itemName
+      this.form.displaySeq = nodeItem.displaySeq
+      this.infoId = infoId
+      this.visible = true
+    },
+    handleCancel () {
+      this.visible = false
+    },
+    // 增加节点确定
+    handleOk () {
+      if (this.confirmLoading) {
+        return
+      }
+      const expandId = []
+      expandId.push(this.form.pid)
+      if (!this.isEdit) {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            this.confirmLoading = true
+            const params = {
+              infoId: this.infoId,
+              pid: this.nodeItem.id,
+              ...this.form
+            }
+            postAction(`split/sarFileSplitMenu/addMenu`, params).then(res => {
+              if (res.success) {
+                this.$message.success(this.$t('operationSuccessful'))
+                // this.onExpand(expandId)
+                this.form = {}
+                this.visible = false
+                this.$emit('ok')
+              } else {
+                this.$message.warning(this.$t('operationFailed'))
+              }
+            }).finally(() => {
+              this.confirmLoading = false
+            })
+          }
+        })
+      } else {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            this.confirmLoading = true
+            const params = {
+              info_id: this.infoId,
+              ...this.form
+            }
+            putAction(`split/sarFileSplitMenu/updateMenu`, params).then(res => {
+              if (res.success) {
+                this.$message.success(this.$t('operationSuccessful'))
+                this.form = {}
+                this.visible = false
+                this.$emit('update', expandId)
+              } else {
+                this.$message.warning(this.$t('operationFailed'))
+              }
+            }).finally(() => {
+              this.confirmLoading = false
+            })
+          }
+        })
+      }
+    },
+    // 正则替换小数点
+    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>
+
+</style>