[update 分解单] 增加拖拽

src/components/StandardResolutionSheet.vue

@@ -1,8 +1,9 @@
 <template>
   <a-spin :spinning="loading">
-    <div class="sheet-box">
+    <!-- 拖拽中不能选中内容 -->
+    <div class="sheet-box" :class="{ disabledSelect: isDragging }" ref="sheetBoxRef">
       <!--标准目录-->
-      <div class="standard-catalogue part-common"
+      <div class="standard-catalogue part-common" ref="standardCatalogueRef" :style="`width: ${standardCatalogueRefX}px`"
            :class="isCatalogueExpand ? 'expand-catalogue' : 'no-expand-catalogue'">
         <div class="control-standard-catalogue-expand" @click="expandCatalogue">
           <a-icon :type="isCatalogueExpand ? 'left' : 'right'" />
@@ -19,9 +20,13 @@
             </template>
           </a-tree>
         </div>
+        <vue-draggable-resizable v-show="isCatalogueExpand" :draggable="true" :resizable="false" :w="6" axis="x" :x="standardCatalogueRefX" :z="2" class="draggable-border"
+                                 :onDrag="(...args) => onDragCallback(100, 500, ...args)" class-name-dragging="dragging"
+                                 @dragging="onDragging"
+                                 @dragstop="(...args) => onDragstop('standardCatalogueRef', ...args)"></vue-draggable-resizable>
       </div>
       <!--标准内容-->
-      <div class="sheet-container part-ml">
+      <div class="sheet-container part-ml" ref="sheetContainerRef" :style="`width: ${sheetContainerRefX}px;`">
         <!--标准名称-->
         <div class="standard-name">
           <a-tooltip placement="topLeft">
@@ -46,9 +51,13 @@
                  v-html="clause.item_content"></div>
           </div>
         </div>
+        <vue-draggable-resizable :draggable="true" :resizable="false" :w="6" axis="x" :x="sheetContainerRefX" :z="2" class="draggable-border"
+                                 :onDrag="(...args) => onDragCallback(100, null, ...args)" class-name-dragging="dragging"
+                                 @dragging="onDragging"
+                                 @dragstop="(...args) => onDragstop('sheetContainerRef', ...args)"></vue-draggable-resizable>
       </div>
       <!--条文标签-->
-      <div class="clause-label part-ml part-common" :class="{'hide-clause-label': !showClauseLabel || isContainerExpand}">
+      <div class="clause-label part-ml part-common" ref="clauseLabelRef" :style="`width: ${clauseLabelRefX}px`" :class="{'hide-clause-label': !showClauseLabel || isContainerExpand}">
         <div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
         <div class="has-title-part-content">
           <template v-for="clause in clauseField">
@@ -59,9 +68,13 @@
             </div>
           </template>
         </div>
+        <vue-draggable-resizable :draggable="true" :resizable="false" :w="6" axis="x" :x="clauseLabelRefX" :z="2" class="draggable-border"
+                                 :onDrag="(...args) => onDragCallback(100, 500, ...args)" class-name-dragging="dragging"
+                                 @dragging="onDragging"
+                                 @dragstop="(...args) => onDragstop('clauseLabelRef', ...args)"></vue-draggable-resizable>
       </div>
       <!--条文、条文标签切换-->
-      <div class="clause-label-change part-ml part-common" :class="{'no-expand-clause-label': !isClauseLabelExpand}">
+      <div class="clause-label-change part-ml part-common" ref="clauseLabelChangeRef" :class="{'no-expand-clause-label': !isClauseLabelExpand}">
         <div class="control-clause-label-expand" @click="expandClauseLabel">
           <a-icon :type="isClauseLabelExpand ? 'right' : 'left'" />
         </div>
@@ -93,9 +106,13 @@
 <script>
 import { getDocSplitEditForm, previewDocSplit } from '@api/documentToolApi'
 import { FieldType } from '@/enums/commonEnums'
+import VueDraggableResizable from 'vue-draggable-resizable'
 
 export default {
   name: 'StandardResolutionSheet',
+  components: {
+    VueDraggableResizable
+  },
   props: {
     // 是否文档拆分处查看
     horizontalOverstep: {
@@ -122,10 +139,52 @@ export default {
       clauseLabelInfo: {}, // 条文标签数据
       clauseLabelHideField: ['item_content'],
       needDictField: [FieldType.USER_SINGLE.value, FieldType.ORGAN_SINGLE.value, FieldType.STANDARD_MORE.value, FieldType.ORGAN_MORE.value, FieldType.OPTION_SINGLE.value, FieldType.OPTION_MORE.value, FieldType.TREE.value],
-      queryParams: {}
+      queryParams: {},
+      isDragging: false, // 是否拖拽中
+      standardCatalogueRefX: 280, // 标准目录默认宽度
+      sheetContainerRefX: 0, // 标准内容默认宽度
+      clauseLabelRefX: 400 // 条文标签默认宽度
     }
   },
+  mounted () {
+    // 容器实际剩余宽度 = 右侧内容宽度 - 内容中的间距
+    const boxWidth = this.$refs.sheetBoxRef.getBoundingClientRect().width - this.$refs.clauseLabelChangeRef.getBoundingClientRect().width - (16 * 3)
+    this.sheetContainerRefX = boxWidth - this.standardCatalogueRefX - this.clauseLabelRefX
+  },
   methods: {
+    /**
+     * 拖拽回调
+     * @param min - 拖拽最小宽度
+     * @param max - 拖拽最大宽度
+     * @param x - 当前宽度
+     * @return {boolean}
+     */
+    onDragCallback (min, max, x) {
+      if ((min !== null) && (x < min)) {
+        return false
+      }
+      if ((max !== null) && (x > max)) {
+        return false
+      }
+      return true
+    },
+    /**
+     * 拖拽中
+     */
+    onDragging () {
+      this.isDragging = true
+    },
+    /**
+     * 拖拽结束
+     * @param refName - ref名字用于获取dom改变宽度
+     * @param x - 当前宽度
+     */
+    onDragstop (refName, x) {
+      this.isDragging = false
+      // console.log(this.$refs[refName])
+      this[refName + 'X'] = x
+      // this.$refs[refName].style.width = x + 'px'
+    },
     /**
      * 获取条文标签字段
      */
@@ -200,8 +259,12 @@ export default {
     handleContainerExpand () {
       this.isContainerExpand = !this.isContainerExpand
       if (this.isContainerExpand) {
+        // 展开主要内容前：主要内容宽 = 当前宽度 + 条文标签宽度（未隐藏时） + 标准目录宽度（未隐藏时）
+        this.sheetContainerRefX = this.sheetContainerRefX + (this.showClauseLabel ? this.clauseLabelRefX : 0) + (this.isCatalogueExpand ? this.standardCatalogueRefX : 0)
         this.isCatalogueExpand = false
       } else {
+        // 收起主要内容前：主要内容宽 = 当前宽度 - 条文标签宽度（隐藏时） - 标准目录宽度（隐藏时）
+        this.sheetContainerRefX = this.sheetContainerRefX - (this.showClauseLabel ? this.clauseLabelRefX : 0) - (!this.isCatalogueExpand ? this.standardCatalogueRefX : 0)
         this.isCatalogueExpand = true
       }
     },
@@ -210,19 +273,31 @@ export default {
      * @param flag
      */
     handleClauseChange (flag) {
+      const beforeFlag = this.showClauseLabel
       this.showClauseLabel = flag
+      // 如果值改变了，就进行宽度调整
+      if (beforeFlag !== flag) {
+        // 主要内容宽 = 当前宽度 +(收起)|-(展开) 条文标签宽度
+        this.sheetContainerRefX = this.sheetContainerRefX + (this.clauseLabelRefX * (this.showClauseLabel ? -1 : 1))
+      }
     },
     /**
      * 展开或收起条文/条文标签面板
      */
     expandClauseLabel () {
       this.isClauseLabelExpand = !this.isClauseLabelExpand
+      // TODO 右侧切换条文和条文标签折叠宽度有改的话，需要修改这里的差值
+      // 根据展开或收起，给主要内容减少或增加宽度
+      const diff = Math.abs(130 - 45)
+      this.sheetContainerRefX = this.sheetContainerRefX + (diff * (this.isClauseLabelExpand ? -1 : 1))
     },
     /**
      * 展开或收起标准目录
      */
     expandCatalogue () {
       this.isCatalogueExpand = !this.isCatalogueExpand
+      // 主要内容宽 = 当前宽度 +(收起)|-(展开) 标准目录宽度
+      this.sheetContainerRefX = this.sheetContainerRefX + (this.standardCatalogueRefX * (this.isCatalogueExpand ? -1 : 1))
     }
   }
 }
@@ -232,10 +307,17 @@ export default {
 @import '~@assets/less/common.less';
 
 .sheet-box {
+  overflow-x: auto;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-between;
+
+  // 禁止flex自动扩充或收缩，拖拽必须要绝对单位
+  & > div {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
 }
 
 .part-ml {
@@ -273,6 +355,7 @@ export default {
   background-color: @primary-color;
   color: white;
   position: absolute;
+  z-index: 3;
   left: 100%;
   top: calc(50% - 52px);
 
@@ -288,22 +371,25 @@ export default {
 .expand-catalogue {
   width: 280px;
 }
-
+// 拖拽会设置行内样式，这里要覆盖行内样式
 .no-expand-catalogue {
-  width: 0;
+  width: 0 !important;
 }
 
 .sheet-container {
+  position: relative;
   height: 100%;
-  flex: 1;
-  width: 0;
+  width: 100%;
+  //flex: 1;
+  //width: 0;
   transition: width .2s linear;
 }
 
 .clause-label {
+  position: relative;
   width: 400px;
   height: 100%;
-  overflow: hidden;
+  //overflow: hidden;
   transition: width .2s linear;
 
   .clause-item {
@@ -334,7 +420,8 @@ export default {
 }
 
 .hide-clause-label {
-  width: 0;
+  width: 0 !important;
+  overflow: hidden;
   margin-left: 0;
 }
 
@@ -496,4 +583,29 @@ export default {
 /deep/ .ant-spin-container {
   height: 100%;
 }
+
+// 拖拽相关样式
+.draggable-border {
+  position: absolute;
+  top: 0;
+  left: -3px;
+  height: 100% !important;
+  cursor: col-resize;
+}
+// 拖拽的线
+.draggable-border.dragging::after {
+  content: '';
+  display: block;
+  position: absolute;
+  z-index: 9;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: @primary-color;
+}
+// 拖拽过程中禁止选中内容，防止拖拽过程中选中内容
+.disabledSelect {
+  user-select: none;
+}
 </style>