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

2023-10-17 17:45:19 +08:00
parent c185a29c01
commit 4436670c21
8 changed files with 721 additions and 239 deletions
@@ -93,9 +93,8 @@
            {{ $t('export') }}
          </a-button>
          <!--批量删除-->
-          <a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'split:sarFileSplitItems:delete'">{{
-              $t('batchDelete')
-            }}
+          <a-button type="primary" icon="delete" ghost @click="batchDel">
+            {{ $t('batchDelete') }}
          </a-button>
          <!--模板下载-->
          <a-button type="primary"
@@ -106,11 +105,11 @@
            {{ $t('templateDownload') }}
          </a-button>
          <!--批量复制-->
-          <a-button type="primary" ghost @click="handleCopy" v-has="'split:sarFileSplitItems:copy'">
+          <a-button type="primary" ghost @click="handleBatchCopy" v-has="'split:sarFileSplitItems:copy'">
            {{ $t('docTool.split.batchCopy') }}
          </a-button>
          <!--批量编辑-->
-          <a-button type="primary" ghost @click="handleManage" v-has="'split:sarFileSplitItems:batchUpdate'">
+          <a-button type="primary" ghost @click="handleBatchEdit" v-has="'split:sarFileSplitItems:batchUpdate'">
            {{ $t('docTool.split.batchEdit') }}
          </a-button>
          <!--合并条款-->
@@ -129,6 +128,7 @@
            :pagination="ipagination"
            :scroll="{x: '100%'}"
            :operation-list="operationList"
+            :loading="loading"
            @change="tableOnChange"
            @operationClick="operationClick">

@@ -153,16 +153,16 @@
      </div>
    </div>

-    <!--  条款详情  -->
+    <!--条款详情-->
    <split-clause-detail ref="splitClauseDetail"/>
-    <!--  添加节点  -->
+    <!--添加节点-->
    <split-detail-node-add ref="splitDetailNodeAdd" @ok="nodeAddOk"/>
-    <!--  批量设置弹框  -->
-    <split-detail-batch-setting ref="splitDetailBatchSetting" @ok="batchSettingOk"/>
+    <!--批量编辑-->
+    <split-detail-batch-edit-drawer ref="batchEditDrawer" @ok="modalFormOk"/>
    <!--条款添加-->
    <split-add-form ref="modalForm" :flag="'4'"
                    :url="url" :infoId="infoId" :menuId="menuId" :itemId="itemId"
-                    @sumber="sumber"/>
+                    @sumber="modalFormOk"/>
  </internal-detail-page>
 </template>

@@ -175,8 +175,6 @@ import SplitAddForm from './modules/SplitAddForm.vue'
 import SplitClauseDetail from './modules/SplitClauseDetail.vue'
 // 添加左侧树节点弹框
 import SplitDetailNodeAdd from './modules/SplitDetailNodeAdd.vue'
-// 批量设置弹框
-import SplitDetailBatchSetting from './modules/SplitDetailBatchSetting.vue'
 import { mapGetters } from 'vuex'
 import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin.js'
 import {
@@ -186,10 +184,13 @@ import {
  moveUpOrDownClauseTreeNode,
  batchCopyClause,
  merageClause,
-  getClauseTreeData
+  getClauseTreeData,
+  copyClause
 } from '../../../api/documentToolApi.js'
 import Search from '../../../components/customField/Search.vue'
 import { isHasPermission } from '../../../utils/hasPermission.js'
+import SplitDetailBatchEditDrawer from './modules/SplitDetailBatchEditDrawer.vue'
+import { postAction } from '../../../api/manage'

 export default {
  name: 'DocumentSplitDetail',
@@ -199,8 +200,8 @@ export default {
    SplitAddForm,
    SplitClauseDetail,
    SplitDetailNodeAdd,
-    SplitDetailBatchSetting,
-    Search
+    Search,
+    SplitDetailBatchEditDrawer
  },
  mixins: [ConfigurableTableMixin],
  data () {
@@ -241,7 +242,7 @@ export default {
        // 复制
        {
          text: this.$t('copy'),
-          clickEvent: 'handleEdit'
+          clickEvent: 'handleCopy'
          // has: 'split:sarFileSplitItems:update'
        },
        // 删除
@@ -425,47 +426,49 @@ export default {
        }
      })
    },
+    handleCopy ({ id }) {
+      this.$confirm({
+        title: this.$t('confirmReplication'),
+        content: '',
+        onOk: () => {
+          this.loading = true
+          copyClause({ id }).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.loadData()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.loading = false
+          })
+        }
+      })
+    },
    /**
     * 批量复制
     */
-    handleCopy () {
+    handleBatchCopy () {
      if (!this.selectedRowKeys || this.selectedRowKeys.length === 0) {
        this.$message.warning(this.$t('selectLeastOne'))
        return
      }
-      const ids = []
-      const infoIds = []
-      const menuIds = []
-      this.selectedRows.forEach(item => {
-        ids.push(item.id)
-        infoIds.push(item.info_id)
-        menuIds.push(item.menu_id)
+      this.$confirm({
+        title: this.$t('confirmReplication'),
+        content: '',
+        onOk: () => {
+          batchCopyClause({ ids: this.selectedRowKeys.join(',') }).then((res) => {
+            if (res.success) {
+              this.$message.success(this.$t('operationSuccessful'))
+              this.onClearSelected()
+              this.loadMenuData()
+              this.loadData()
+            } else {
+              this.$message.warning(this.$t('operationFailed'))
+            }
+          })
+        }
      })
-      const params = {
-        ids: ids.join(','),
-        infoIds: infoIds.join(','),
-        menuids: menuIds.join(',')
-      }
-      if (menuIds && menuIds.length > 0) {
-        this.$confirm({
-          title: this.$t('confirmReplication'),
-          content: '',
-          onOk: () => {
-            batchCopyClause(params).then((res) => {
-              if (res.data.success) {
-                this.$message.success(this.$t('operationSuccessful'))
-                this.onClearSelected()
-                this.loadMenuData()
-                this.loadData()
-              } else {
-                this.$message.warning(this.$t('operationFailed'))
-              }
-            })
-          }
-        })
-      } else if (menuIds.length === 0) {
-        this.$message.warning(this.$t('pleaseSelectData'))
-      }
    },
    // 新增
    handleAdd () {
@@ -504,31 +507,48 @@ export default {
        }
      })
    },
-    // 批量设置
-    handleManage () {
-      const ids = this.selectedRowKeys.join(',')
-      if (this.selectedRowKeys && this.selectedRowKeys.length < 1) {
+    /**
+     * 批量编辑
+     */
+    handleBatchEdit () {
+      if (!this.selectedRowKeys || this.selectedRowKeys.length === 0) {
        this.$message.warning(this.$t('selectLeastOne'))
-      } else {
-        this.$refs.splitDetailBatchSetting.open(ids)
+        return
      }
-    },
-    // 批量设置完成的回调
-    batchSettingOk () {
-      this.onClearSelected()
-      this.loadData()
-    },
-    // 保存成功
-    sumber () {
-      this.loadData()
-      this.loadMenuData()
+      this.$refs.batchEditDrawer.open(this.selectedRowKeys.join(','))
    },
    onSearch () {
      this.loadMenuData()
+    },
+    /**
+     * 删除
+     * @param id
+     */
+    handleDelete (id) {
+      if (!this.url.delete) {
+        this.$message.error('请设置url.delete属性!')
+        return
+      }
+      const that = this
+      this.$confirm({
+        title: this.$t('confirmDeletion'),
+        content: this.$t('areYouSure'),
+        onOk: () => {
+          postAction(that.url.delete, { id: id }).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              // 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
+              if (that.ipagination.current > 1 && ((that.ipagination.current - 1) * that.ipagination.pageSize) + 1 === that.ipagination.total) {
+                that.ipagination.current -= 1
+              }
+              that.loadData()
+            } else {
+              that.$message.warning(res.message)
+            }
+          })
+        }
+      })
    }
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', {}, false)
  }
 }
 </script>
@@ -14,16 +14,33 @@
          <div class="form-flex-box">
            <template v-for="(item, index) in dataList">
              <div :key="index"
-                   class="box-title-text form-flex-item-half"
-                   :class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
+                   class="box-title-text form-flex-item"
                   v-if="!hiddenFieldList.includes(item.dbFieldName)">
                <div class="title-text">
                  <span class="required" v-if="item.fieldMustInput === '1'">*</span>
                  <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
                </div>
                <a-form-model-item class="item-model" :prop="item.dbFieldName">
+                  <!--条文解读-->
+                  <template v-if="item.dbFieldName === 'interpretation_articles'">
+                    <div class="unscramble-item"
+                         v-for="(unscramble, unscrambleIndex) in interpretationArticlesList"
+                         :key="unscrambleIndex + 'interpretation_articles'">
+                      <div class="unscramble-item-content">
+                        <!--文本-->
+                        <a-input type="textarea" :maxLength="500" v-model="unscramble.itemContent"/>
+                      </div>
+                      <div class="unscramble-item-operate">
+                        <a-button @click="handleAddUnscramble(unscrambleIndex)">{{ $t('newlyAdded') }}</a-button>
+                        <a-button @click="handleDeleteUnscramble(unscrambleIndex, unscramble)"
+                                  :disabled="unscrambleIndex === interpretationArticlesList.length - 1">
+                          {{ $t('delete') }}
+                        </a-button>
+                      </div>
+                    </div>
+                  </template>
                  <!--   1, 日期单选  -->
-                  <a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
+                  <a-date-picker v-else-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
                                 class="box-input"
                                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
                                 :getCalendarContainer="(trigger) => trigger.parentNode"
@@ -150,7 +167,7 @@
          <div class="clause-item" v-for="(clause, index) in contentList" :key="index + 'clause'">
            <div class="clause-item-content">
              <!--文本-->
-              <a-input type="textarea" :maxLength="1000" v-model="clause.itemContent" v-if="clause.type === TypeOfClauseItem.TEXT.value"/>
+              <a-input type="textarea" :maxLength="500" v-model="clause.itemContent" v-if="clause.type === TypeOfClauseItem.TEXT.value"/>
              <!--图片-->
              <viewer>
                <img v-if="clause.type === TypeOfClauseItem.IMG.value" :src="clause.thumbUrl?clause.thumbUrl:clause.itemContent" alt="">
@@ -194,7 +211,9 @@ import {
 } from '../../../../api/documentToolApi.js'
 import UserSelection from '../../../../components/selection/UserSelection.vue'
 import JMultipleDatePicker from '../../../../components/JMultipleDatePicker.vue'
-import { FieldType, TypeOfClauseItem } from '../../../../enums/commonEnums'
+import { FieldType, TypeOfClauseItem, YesOrNoEnum } from '../../../../enums/commonEnums'
+import { getAction } from '../../../../api/manage'
+import { getFormDictTreeList } from '../../../../api/api'

 export default {
  name: 'SplitAddForm',
@@ -230,7 +249,8 @@ export default {
      deleteIds: [],
      itemVal: {},
      contentTrees: '',
-      isTableEdit: false
+      isTableEdit: false,
+      interpretationArticlesList: [] // 条文解读数据
    }
  },
  props: {
@@ -251,16 +271,43 @@ export default {
      default: ''
    }
  },
+  watch: {
+    // 是否长期有效，是的话新认证实施日期、已认证实施日期、新注册实施日期为多选，否则为单选
+    'formInline.is_long_effect': {
+      handler (value) {
+        const indexArr = []
+        // 新认证实施日期
+        indexArr[0] = this.dataList.findIndex(tt => tt.dbFieldName === 'new_cer_implement_date')
+        // 已认证实施日期
+        indexArr[1] = this.dataList.findIndex(tt => tt.dbFieldName === 'cer_implement_date')
+        // 新注册实施日期
+        indexArr[2] = this.dataList.findIndex(tt => tt.dbFieldName === 'new_register_implement_date')
+        delete this.formInline.new_cer_implement_date
+        delete this.formInline.cer_implement_date
+        delete this.formInline.new_register_implement_date
+        if (value === YesOrNoEnum.YES.value) {
+          indexArr.forEach(index => {
+            this.$set(this.dataList[index], 'fieldShowType', FieldType.DATE_MORE.value)
+          })
+        } else if (value === YesOrNoEnum.NO.value) {
+          indexArr.forEach(index => {
+            this.$set(this.dataList[index], 'fieldShowType', FieldType.DATE_SINGLE.value)
+          })
+        }
+        this.$forceUpdate()
+      }
+    }
+  },
  methods: {
    /**
     * 新增
     */
    add () {
+      this.visible = true
      this.formInline = {}
      this.contentList = []
      this.type = 'add'
      this.getForm()
-      this.visible = true
    },
    /**
     * 编辑
@@ -291,12 +338,37 @@ export default {
          this.dataList = res.result
          this.ruleList = res.result
          this.integrateData()
+          this.getOptionsData()
          callBack && callBack()
        }
      }).finally(() => {
        this.loading = false
      })
    },
+    /**
+     * 处理需要通过接口获取的下拉数据
+     */
+    getOptionsData () {
+      const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
+      formList.forEach(item => {
+        if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
+          // 展示类型是树选择，且有接口的
+          if (item.fieldHref) {
+            getAction(item.fieldHref).then(res => {
+              if (res.success) {
+                this.$set(this.optionsData, item.dbFieldName, res.result)
+              }
+            })
+          } else if (item.dictId) {
+            getFormDictTreeList({ dictId: item.dictId }).then(res => {
+              if (res.success) {
+                this.$set(this.optionsData, item.dbFieldName, res.result)
+              }
+            })
+          }
+        }
+      })
+    },
    /**
     * 设置表单校验信息
     */
@@ -366,6 +438,18 @@ export default {
      getDocSplitEditFormData({ id: this.itemVal.id }).then(res => {
        if (res.success) {
          this.formInline = Object.assign({}, res.result)
+          // 是否长期有效默认选否
+          if (!this.formInline.is_long_effect) {
+            this.formInline.is_long_effect = YesOrNoEnum.NO.value
+          }
+          // 条文解读数据处理
+          if (this.formInline.interpretationArticlesList && this.formInline.interpretationArticlesList.length > 0) {
+            this.interpretationArticlesList = this.formInline.interpretationArticlesList
+          } else {
+            this.interpretationArticlesList = [{
+              itemContent: null
+            }]
+          }
        }
      })
    },
@@ -536,6 +620,7 @@ export default {
            }
          })
          formData.itemValEOList = contentList
+          formData.interpretationArticlesList = this.interpretationArticlesList
          formData.delItemIds = this.deleteIds.join(',')
          submitFunc(formData).then(res => {
            if (res.success) {
@@ -552,60 +637,21 @@ export default {
        }
      })
    },
-
-    // 保存
-    splitSave () {
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          if (!this.submitFlag) {
-            this.submitFlag = true
-            let submitFunc
-            if (this.formInline.id) {
-              submitFunc = editClause
-            } else {
-              submitFunc = addClause
-            }
-            const params = JSON.parse(JSON.stringify(this.formInline))
-            Object.keys(params).forEach(res => {
-              if (params[res] instanceof Array) {
-                params[res] = params[res].join(',')
-              }
-            })
-            params.info_id = this.infoId
-            params.menu_id = this.menuId
-            if (this.formInline.id) {
-              params.menu_id = this.itemVal.menu_id
-            }
-            const contentList = JSON.parse(JSON.stringify(this.contentList))
-            contentList.forEach((item, index) => {
-              if (item.type === 'IMG') {
-                this.$delete(item, 'thumbUrl')
-              }
-            })
-            params.itemValEOList = contentList
-            params.delItemIds = this.deleteIds.join(',')
-            submitFunc(params).then((res) => {
-              if (res.data.success) {
-                this.loading = false
-                this.$message.success(this.$t('operationSuccessful'))
-                this.visible = false
-                // this.$emit('closeVisible',false)
-                this.$emit('sumber')
-              } else {
-                this.$message.warning(this.$t('operationFailed'))
-              }
-            }).catch((error) => {
-              console.log(error)
-            }).finally(() => {
-              this.visible = false
-              this.$emit('closeVisible', false)
-              this.loading = false
-              this.submitFlag = false
-            })
-          }
-        }
-      })
+    /**
+     * 新增一条条文解读
+     * @param index
+     */
+    handleAddUnscramble (index) {
+      this.interpretationArticlesList.splice(index + 1, 0, { id: '', itemContent: null })
+    },
+    /**
+     * 删除条文解读
+     */
+    handleDeleteUnscramble (index, item) {
+      this.interpretationArticlesList.splice(index, 1)
+      if (item.id) {
+        this.deleteIds.push(item.id)
+      }
    }
  }
 }
@@ -764,8 +810,8 @@ export default {
  flex-wrap: wrap;
 }

-.form-flex-item-half {
-  width: 50%;
+.form-flex-item {
+  width: 100%;
 }

 .header-text {
@@ -782,6 +828,10 @@ export default {
  &-content {
    width: 0;
    flex: 1;
+
+    table {
+      width: 100%;
+    }
  }

  &-operate {
@@ -795,4 +845,34 @@ export default {
 .clause-item:last-child {
  margin-bottom: 0;
 }
+
+/deep/ .ant-select-tree-dropdown {
+  max-height: 50vh !important;
+}
+
+.unscramble-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &-content {
+    width: 0;
+    flex: 1;
+
+    table {
+      width: 100%;
+    }
+  }
+
+  &-operate {
+
+    .ant-btn {
+      margin-left: 15px
+    }
+  }
+}
+
+.unscramble-item:last-child {
+  margin-bottom: 0;
+}
 </style>
@@ -0,0 +1,477 @@
+<template>
+  <a-drawer
+    :title="title"
+    placement="right"
+    :visible="visible"
+    @close="handleCancel"
+    width="900"
+    class="custom-drawer-style">
+
+    <div class="custom-drawer-style-scroll">
+      <a-spin :spinning="confirmLoading">
+        <a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
+          <div class="form-flex-box">
+            <template v-for="(item, index) in dataList">
+              <div :key="index"
+                   class="box-title-text form-flex-item"
+                   :class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
+                   v-if="!hiddenFieldList.includes(item.dbFieldName)">
+                <div class="title-text">
+                  <span class="required" v-if="item.fieldMustInput === '1'">*</span>
+                  <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
+                </div>
+                <a-form-model-item class="item-model" :prop="item.dbFieldName">
+                  <!--条文解读-->
+                  <template v-if="item.dbFieldName === 'interpretation_articles'">
+                    <div class="unscramble-item"
+                         v-for="(unscramble, unscrambleIndex) in interpretationArticlesList"
+                         :key="unscrambleIndex + 'interpretation_articles'">
+                      <div class="unscramble-item-content">
+                        <!--文本-->
+                        <a-input type="textarea" :maxLength="500" v-model="unscramble.itemContent"/>
+                      </div>
+                      <div class="unscramble-item-operate">
+                        <a-button @click="handleAddUnscramble(unscrambleIndex)">{{ $t('newlyAdded') }}</a-button>
+                        <a-button @click="handleDeleteUnscramble(unscrambleIndex, unscramble)">{{ $t('delete') }}</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <!--   1, 日期单选  -->
+                  <a-date-picker v-else-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
+                                 class="box-input"
+                                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                 :getCalendarContainer="(trigger) => trigger.parentNode"
+                                 format="YYYY-MM-DD"
+                                 value-format="YYYY-MM-DD"
+                                 v-model="formInline[item.dbFieldName]"
+                                 :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                 style="width: 100%"/>
+                  <!--   2, 单选用户  -->
+                  <user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
+                                  :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                  v-model="formInline[item.dbFieldName]"
+                                  :filedName="item.dbFieldName"
+                                  @nameChange="userSelectNameChange"
+                                  :nameStr="formInline[item.dbFieldName + '_dictText']"
+                                  type="radio"
+                                  :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"/>
+                  <!--   3, 单选组织机构  -->
+                  <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
+                                   v-model="formInline[item.dbFieldName]"
+                                   :backDepart="true"/>
+                  <!--   4, 日期多选  -->
+                  <j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
+                                          class="box-input"
+                                          v-model="formInline[item.dbFieldName]"
+                                          :fieldName="item.dbFieldName"
+                                          :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"/>
+                  <!--   5, 多行文本  -->
+                  <a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
+                              :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
+                              :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                              :maxLength="500"
+                              v-model="formInline[item.dbFieldName]" :rows="4"/>
+                  <!--   6, 标准多选  -->
+                  <standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
+                                      :source="flag"
+                                      :disabledSourceSearch="true"
+                                      :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                      v-model="formInline[item.dbFieldName]"/>
+                  <!--   7, 多选组织机构  -->
+                  <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
+                                   v-model="formInline[item.dbFieldName]"
+                                   :multi="true"
+                                   :backDepart="true"
+                                   :treeOpera="true"/>
+                  <!--   8, 上传文件  -->
+                  <a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
+                            @click="clickButtonToUpload(item)">
+                    {{
+                      (formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
+                        || formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
+                        ? $t('uploadFile.clickUpload')
+                        : $t('uploadFile.viewUploadedFiles')
+                    }}
+                  </a-button>
+                  <!--   9, 文本框  -->
+                  <a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value"
+                           class="box-input"
+                           :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                           v-model="formInline[item.dbFieldName]"
+                           :maxLength="50"
+                           :placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt"/>
+                  <!--   10, 下拉单选（数据字典）  -->
+                  <j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
+                                     class="box-input"
+                                     v-model="formInline[item.dbFieldName]"
+                                     :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                     :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                     :type="'select'"
+                                     :triggerChange="false"
+                                     :dictCode="item.dictField"/>
+                  <!--   11, 下拉多选（数据字典）  -->
+                  <j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
+                                      class="box-input"
+                                      v-model="formInline[item.dbFieldName]"
+                                      :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                      :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                      :type="'select'"
+                                      :triggerChange="false"
+                                      :dictCode="item.dictField"/>
+                  <!--   12, 树选择       -->
+                  <a-tree-select
+                    v-else-if="item.fieldShowType === FieldType.TREE.value"
+                    v-model="formInline[item.dbFieldName]"
+                    :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                    style="width: 100%"
+                    :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                    :tree-data="optionsData[item.dbFieldName]"
+                    tree-checkable
+                    treeCheckStrictly
+                    :label-in-value="false"
+                    :placeholder="$t('pleaseSelect')+item.dbFieldTxt"/>
+                  <!--  14, 年份选择 -->
+                  <j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
+                          show-type="year"
+                          :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                          v-model="formInline[item.dbFieldName]"
+                          :default-value="defaultValue[item.dbFieldName]"
+                          date-format="YYYY"
+                          :placeholder="$t('pleaseSelect')+item.dbFieldTxt"/>
+                  <!--   15, 树选择（单选）       -->
+                  <a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
+                                 v-model="formInline[item.dbFieldName]"
+                                 :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                                 style="width: 100%"
+                                 :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                 :tree-data="optionsData[item.dbFieldName]"
+                                 :label-in-value="false"
+                                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"/>
+                </a-form-model-item>
+              </div>
+            </template>
+          </div>
+          <upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
+        </a-form-model>
+      </a-spin>
+    </div>
+
+    <div class="custom-drawer-style-bottom-btn">
+      <!--保存-->
+      <a-button type="primary" class="footer-btn-save" @click="handleSave">{{ $t('preservation') }}</a-button>
+      <!--取消-->
+      <a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import JMultipleDatePicker from '../../../../components/JMultipleDatePicker.vue'
+import UploadFile from '../../../../components/UploadFile.vue'
+import StandardSelection from '../../../../components/selection/StandardSelection.vue'
+import UserSelection from '../../../../components/selection/UserSelection.vue'
+import { getDocSplitEditForm, editBatchEditClause } from '../../../../api/documentToolApi'
+import { FieldType, YesOrNoEnum } from '../../../../enums/commonEnums'
+import { getFormDictTreeList } from '../../../../api/api'
+import { getAction } from '../../../../api/manage'
+
+export default {
+  name: 'SplitDetailBatchEditDrawer',
+  components: { UserSelection, StandardSelection, UploadFile, JMultipleDatePicker },
+  data () {
+    return {
+      FieldType,
+      title: this.$t('docTool.split.batchEdit'),
+      visible: false,
+      confirmLoading: false,
+      disabled: false,
+      formInline: {},
+      isFormInline: false,
+      dataList: [],
+      ruleList: [],
+      rules: {},
+      uploadName: '',
+      type: 'add',
+      hiddenFieldList: ['item_num', 'item_title', 'item_content'], // 隐藏的字段
+      disabledFieldList: [], // 禁用的字段
+      specialPlaceholder: {}, // 特殊的placeholder
+      optionsData: {}, // 通过接口获取的下拉数据
+      interpretationArticlesList: [] // 条文解读数据
+    }
+  },
+  watch: {
+    // 是否长期有效，是的话新认证实施日期、已认证实施日期、新注册实施日期为多选，否则为单选
+    'formInline.is_long_effect': {
+      handler (value) {
+        console.log('是否长期有效', value)
+        const indexArr = []
+        // 新认证实施日期
+        indexArr[0] = this.dataList.findIndex(tt => tt.dbFieldName === 'new_cer_implement_date')
+        // 已认证实施日期
+        indexArr[1] = this.dataList.findIndex(tt => tt.dbFieldName === 'cer_implement_date')
+        // 新注册实施日期
+        indexArr[2] = this.dataList.findIndex(tt => tt.dbFieldName === 'new_register_implement_date')
+        delete this.formInline.new_cer_implement_date
+        delete this.formInline.cer_implement_date
+        delete this.formInline.new_register_implement_date
+        if (value === YesOrNoEnum.YES.value) {
+          indexArr.forEach(index => {
+            this.$set(this.dataList[index], 'fieldShowType', FieldType.DATE_MORE.value)
+          })
+        } else if (value === YesOrNoEnum.NO.value) {
+          indexArr.forEach(index => {
+            this.$set(this.dataList[index], 'fieldShowType', FieldType.DATE_SINGLE.value)
+          })
+        }
+        this.$forceUpdate()
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    open (ids) {
+      this.visible = true
+      this.formInline = {}
+      this.formInline.ids = ids
+      this.getForm()
+    },
+    /**
+     * 获取表单字段
+     * @param callBack
+     */
+    getForm (callBack) {
+      this.loading = true
+      const params = {
+        flag: this.flag,
+        type: this.type
+      }
+      getDocSplitEditForm(params).then((res) => {
+        if (res.success) {
+          const indexArr = []
+          // 新认证实施日期
+          indexArr[0] = res.result.findIndex(tt => tt.dbFieldName === 'new_cer_implement_date')
+          // 已认证实施日期
+          indexArr[1] = res.result.findIndex(tt => tt.dbFieldName === 'cer_implement_date')
+          // 新注册实施日期
+          indexArr[2] = res.result.findIndex(tt => tt.dbFieldName === 'new_register_implement_date')
+          // 条文解读数据处理
+          this.interpretationArticlesList = [
+            { id: '', itemContent: null }
+          ]
+          // 是否长期有效默认选否
+          this.formInline = Object.assign(this.formInline, { is_long_effect: YesOrNoEnum.NO.value })
+          this.dataList = res.result
+          this.ruleList = res.result
+          this.integrateData()
+          this.getOptionsData()
+          callBack && callBack()
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 处理需要通过接口获取的下拉数据
+     */
+    getOptionsData () {
+      const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
+      formList.forEach(item => {
+        if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
+          // 展示类型是树选择，且有接口的
+          if (item.fieldHref) {
+            getAction(item.fieldHref).then(res => {
+              if (res.success) {
+                this.$set(this.optionsData, item.dbFieldName, res.result)
+              }
+            })
+          } else if (item.dictId) {
+            getFormDictTreeList({ dictId: item.dictId }).then(res => {
+              if (res.success) {
+                this.$set(this.optionsData, item.dbFieldName, res.result)
+              }
+            })
+          }
+        }
+      })
+    },
+    /**
+     * 设置表单校验信息
+     */
+    integrateData () {
+      this.isFormInline = false
+      const rules = {}
+      this.ruleList.forEach((res, index) => {
+        const rule = []
+        if (res.field_must_input === 1) {
+          if (res.field_show_type === '1') {
+            rule.push({
+              required: true,
+              message: res.db_field_txt + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            })
+          } else if (res.field_show_type === '4' || res.field_show_type === '6' ||
+            res.field_show_type === '5' || res.field_show_type === '7'
+          ) {
+            rule.push({
+              required: true,
+              message: res.db_field_txt + this.$t('cannotEmpty'),
+              trigger: 'change'
+            })
+          } else if (res.field_show_type === '2') {
+            rule.push({
+              required: true,
+              message: res.db_field_txt + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            })
+          } else if (res.field_show_type === '8' || res.field_show_type === '9' || res.field_show_type === '10' || res.field_show_type === '11') {
+            rule.push({
+              required: true,
+              message: res.db_field_txt + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            })
+          } else if (res.field_show_type === '3') {
+            rule.push({
+              required: true,
+              message: res.db_field_txt + this.$t('cannotEmpty'),
+              trigger: 'change'
+            })
+          }
+        }
+        if (res.field_show_type === '1' ||
+          res.field_show_type === '8' || res.field_show_type === '9' || res.field_show_type === '10' ||
+          res.field_show_type === '11') {
+          rule.push({
+            max: res.db_length,
+            message: res.db_field_txt + this.$t('cantExeed') + res.db_length + this.$t('characters'),
+            trigger: 'blur'
+          })
+        }
+        if (rule.length > 0) {
+          rules[res.db_field_name] = rule
+        }
+      })
+      this.$set(this, 'rules', rules)
+      // console.log('rules',this.rules)
+      this.isFormInline = true
+      this.loading = false
+      // console.log('this.column',this.column)
+    },
+    // 点击点击上传按钮
+    clickButtonToUpload (item) {
+      this.$refs.uploadFile.open(this.formInline[item.db_field_name])
+      this.uploadName = item.db_field_name
+    },
+    // 文件上传改变后的回调
+    uploadFileChange (data) {
+      const attIdList = []
+      if (data && data.length > 0) {
+        data.map(item => {
+          attIdList.push(item.id || data.name)
+        })
+      }
+      /** 赋值给当前对应的表单文件 */
+      this.formInline[this.uploadName] = attIdList.join(',')
+      this.formInline = { ...this.formInline }
+    },
+    handleSave () {
+      if (this.confirmLoading) {
+        return
+      }
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.confirmLoading = true
+          // 处理请求参数
+          const formData = JSON.parse(JSON.stringify(this.formInline))
+          // 处理动态表单多选的值
+          Object.keys(formData).forEach(res => {
+            if (formData[res] instanceof Array) {
+              if (formData[res][0] instanceof Object) {
+                // 说明是树选择
+                formData[res] = formData[res].map(item => item.value).join(',')
+              } else {
+                formData[res] = formData[res].join(',')
+              }
+            }
+          })
+          // 处理条文解读数据
+          formData.interpretationArticlesList = this.interpretationArticlesList
+          editBatchEditClause(formData).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.formInline = {}
+    },
+    /**
+     * 新增一条条文解读
+     * @param index
+     */
+    handleAddUnscramble (index) {
+      this.interpretationArticlesList.splice(index + 1, 0, { id: '', itemContent: null })
+    },
+    /**
+     * 删除条文解读
+     */
+    handleDeleteUnscramble (index, item) {
+      this.interpretationArticlesList.splice(index, 1)
+      if (item.id) {
+        this.deleteIds.push(item.id)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.form-flex-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.form-flex-item {
+  width: 100%;
+}
+
+/deep/ .ant-select-tree-dropdown {
+  max-height: 50vh !important;
+}
+
+.unscramble-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &-content {
+    width: 0;
+    flex: 1;
+
+    table {
+      width: 100%;
+    }
+  }
+
+  &-operate {
+
+    .ant-btn {
+      margin-left: 15px
+    }
+  }
+}
+
+.unscramble-item:last-child {
+  margin-bottom: 0;
+}
+</style>
@@ -1,97 +0,0 @@
-<template>
-  <j-modal
-    class="show-setting"
-    :title="$t('docTool.split.batchSetting')"
-    :visible="visible"
-    :confirm-loading="confirmLoading"
-    switchFullscreen
-    @ok="handleOk"
-    @cancel="handleCancel"
-    style="width: 1000px;height: auto"
-  >
-    <add-form
-      ref="fileForm"
-      :get-form-func="getFormFunc"
-      :get-document-info-func="getFormDataFunc"
-      @submitFormData="submitFormData"
-      :flag="'4'">
-    </add-form>
-  </j-modal>
-</template>
-
-<script>
-import AddForm from '../../../../components/customField/AddForm.vue'
-import { addBatchEditClause, editBatchEditClause, getFormForBatchEditClause, getFormDataForBatchEditClause } from '../../../../api/documentToolApi.js'
-
-export default {
-  name: 'SplitDetailBatchSetting',
-  components: { AddForm },
-  data () {
-    return {
-      visible: false, // 批量设置弹框显示
-      confirmLoading: false,
-      getFormFunc: getFormForBatchEditClause,
-      getFormDataFunc: getFormDataForBatchEditClause
-    }
-  },
-  methods: {
-    open (ids) {
-      this.ids = ids
-      this.visible = true
-    },
-    // 批量设置确定
-    handleOk () {
-      this.$refs.fileForm.submit()
-    },
-    // 表单提交
-    submitFormData (formInline) {
-      if (this.confirmLoading) {
-        return
-      }
-      this.confirmLoading = true
-      let submitFunc
-      if (this.formInline.id) {
-        submitFunc = editBatchEditClause
-      } else {
-        submitFunc = addBatchEditClause
-      }
-      formInline.ids = this.ids
-      submitFunc(formInline).then((res) => {
-        if (res.data.success) {
-          this.$message.success(this.$t('operationSuccessful'))
-          this.visible = false
-          this.$emit('ok')
-        } else {
-          this.$message.warning(this.$t('operationFailed'))
-        }
-      }).finally(() => {
-        this.confirmLoading = false
-      })
-    },
-    // 批量设置取消
-    handleCancel () {
-      this.visible = false
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.show-setting {
-  .ant-modal {
-    min-width: 700px;
-  }
-
-  .ant-select-dropdown--multiple {
-    max-height: 39vh !important;
-  }
-
-  .ant-modal-body {
-    overflow-y: visible !important;
-  }
-
-  .ant-modal-footer {
-    text-align: center;
-  }
-}
-</style>
@@ -16,11 +16,11 @@
      :wrapper-col="wrapperCol">
      <!--条款号-->
      <a-form-model-item :label="$t('docTool.split.clauseNo')" prop="name">
-        <a-input class="box-input" v-model="form.name" :placeholder="$t('pleaseEnter')+$t('docTool.split.clauseNo')" :maxLength="200" />
+        <a-input class="box-input" v-model="form.name" :placeholder="$t('pleaseEnter')+$t('docTool.split.clauseNo')" :maxLength="50" />
      </a-form-model-item>
      <!--条款名称-->
      <a-form-model-item :label="$t('docTool.split.clauseName')" prop="itemName">
-        <a-input class="box-input" v-model="form.itemName" :placeholder="$t('pleaseEnter')+$t('docTool.split.clauseName')" :maxLength="200" />
+        <a-input class="box-input" v-model="form.itemName" :placeholder="$t('pleaseEnter')+$t('docTool.split.clauseName')" :maxLength="50" />
      </a-form-model-item>
      <!--序号-->
      <a-form-model-item :label="$t('serialNumber')" prop="displaySeq">