调整组织架构的那个啥宽度

fhKeeper/formulahousekeeper/timesheet/src/common/js/tensile.js

@@ -0,0 +1,102 @@
+export default {
+    data() {
+      return {
+        defaultDragArr: [{
+          // 目前只有 LR 模式；也就是left right； 左右拉扯模式
+          type: 'LR',
+          domClass: {
+            // 中间分割线的名字
+            resize: 'line-line',
+            // 左侧盒子的名字
+            left: 'box-left',
+            // 右侧盒子的名字
+            right: 'box-right',
+            // 父级的名字
+            box: 'box-father',
+          },
+          otherInfo: {
+            // 限制左边栏最低宽度
+            leftWidth: 324
+          }
+        }]
+      }
+    },
+    methods: {
+      // 处理参数 进行dom节点选中
+      handleBoxInfo(boxInfo) {
+        for (const key in boxInfo)
+          if (Object.hasOwnProperty.call(boxInfo, key))
+            boxInfo[key] = document.getElementsByClassName(boxInfo[key])
+        return boxInfo
+      },
+      // 左右拉伸盒子处理函数
+      dragControllerDiv(boxInfo, otherInfo, cb) {
+        const {
+          leftWidth: oLeftWidth
+        } = otherInfo;
+        const {
+          resize,
+          left,
+          right,
+          box
+        } = this.handleBoxInfo(JSON.parse(JSON.stringify(boxInfo)))
+        console.dir(left)
+        const getOffsetLeftAndClientWidth = arr => arr.map(dom => [
+          dom[0].offsetLeft || 0,
+          dom[0].clientWidth || 0
+        ])
+        for (let i = 0; i < resize.length; i++) {
+          resize[i].onmousedown = (e) => {
+            const [
+              [leftOffset],
+              [, resizeWidth],
+              [rightLeftOffset, rightLeftWidth],
+              [boxLeftOffset]
+            ] = getOffsetLeftAndClientWidth([left, resize, right, box])
+            // 父级盒子距离右侧屏幕的margin宽度
+            const rightAllMargin = window.innerWidth - rightLeftWidth - rightLeftOffset
+  
+            const startX = e.clientX;
+            // 这里设置选中时候的 偏移 量
+            resize[i].left = resize[i].offsetLeft;
+            const boxWidth = window.innerWidth - box[i].clientWidth;
+            document.onmousemove = (e) => {
+              const endX = e.clientX;
+              // 分割线到左边的距离 + 鼠标位移了多少 - 屏幕宽度减去父级盒子宽度后的结果 - 左盒子到屏幕左侧的长度（此刻不会计算margin属性） + 分割线长度并居中恰好1.5倍（但是计算了右侧的margin则变为0.25倍）（确认拉伸时候鼠标对齐分割线） + 父级盒子距离左侧屏幕的margin宽度 + 父级盒子距离右侧屏幕的margin宽度
+              let leftWidth = resize[i].left + (endX - startX) - boxWidth - leftOffset + (resizeWidth * 0.25) + boxLeftOffset + rightAllMargin;
+              const maxT = box[i].clientWidth - (resize[i].offsetWidth - boxWidth);
+              if (leftWidth < oLeftWidth) leftWidth = oLeftWidth;
+              if (leftWidth > maxT - 50) leftWidth = maxT;
+  
+              // resize[i].style.flex = leftWidth;
+              for (let j = 0; j < left.length; j++) {
+                left[j].style.flex = `0 0 ${leftWidth}px`;
+                right[j].style.flex = `1`;
+              }
+            }
+            this.eventOnmouseup(resize, i, cb)
+            return false;
+          }
+        }
+      },
+      eventOnmouseup(resize, i, cb) {
+        document.onmouseup = () => {
+          document.onmousemove = null;
+          document.onmouseup = null;
+          resize[i].releaseCapture && resize[i].releaseCapture();
+          cb && cb()
+        }
+        resize[i].setCapture && resize[i].setCapture();
+      },
+      initDrag(dragArr = this.defaultDragArr) {
+        /* 
+          dragArr: [{ domClass, otherInfo, fn }]
+          type: LR // 左右拉扯（flex布局才能成功） 
+        */
+        const fn = item => ({
+          'LR': this.dragControllerDiv
+        } [item.type] || (() => {}));
+        this.$nextTick(() => dragArr.forEach((item) => fn(item)(item.domClass, item.otherInfo)))
+      }
+    },
+  }