hrsass-components 2.4.2 → 2.4.4

package/lib/hrsass-components.js

@@ -65,7 +65,7 @@ var contentStyle = _interopDefault(require('!!raw-loader!tinymce/skins/content/d
 var SvgPanZoom = _interopDefault(require('svg-pan-zoom'));
 var saveSvgAsPng = require('save-svg-as-png');
 
-var version = "2.4.2";
+var version = "2.4.4";
 
 /**
  * 版本号
@@ -11882,6 +11882,22 @@ var index$6 = {
             _this3._reSetX(parent, map);
           }
         }
+        if (item.property.departmentLevel > level) {
+          var _dx = 0,
+            max = 0;
+          for (var i = level + 1; i <= item.property.departmentLevel; i++) {
+            if (map.has(i) && map.get(i) > max) {
+              max = map.get(i);
+            }
+          }
+          if (max !== 0) {
+            _dx = max + width + gutter;
+          }
+          if (_dx !== 0 && item.x < _dx) {
+            item.x = _dx;
+            item.pointX = _dx;
+          }
+        }
         if (map.has(level)) {
           if (item.x > map.get(level)) {
             map.set(level, item.x);
@@ -11895,21 +11911,21 @@ var index$6 = {
         //对比层级和level，进行高度计算和map维护
         if (item.property.departmentLevel > level) {
           item.y = (height + lineHeight * 2) * item.property.departmentLevel;
-          var max = item.x;
-          for (var i = level; i < item.property.departmentLevel; i++) {
-            if (map.has(i + 1)) {
-              if (item.x > map.get(i + 1)) {
-                map.set(i + 1, item.x);
+          var _max = item.x;
+          for (var _i = level; _i < item.property.departmentLevel; _i++) {
+            if (map.has(_i + 1)) {
+              if (item.x > map.get(_i + 1)) {
+                map.set(_i + 1, item.x);
               } else {
-                max = map.get(i + 1);
+                _max = map.get(_i + 1);
               }
             } else {
-              map.set(i + 1, item.x);
+              map.set(_i + 1, item.x);
             }
           }
-          if (max !== item.x) {
-            item.x = max + width + gutter;
-            item.pointX = max + width + gutter;
+          if (_max !== item.x) {
+            item.x = _max + width + gutter;
+            item.pointX = _max + width + gutter;
             _this3._reSetX(parent, map);
           }
         }
@@ -11963,7 +11979,9 @@ var index$6 = {
       return h("g", [data.map(function (item) {
         var children = item.children || [];
         var Comp = _this4._getComponent(type);
-        return h("g", [item.property.open && children.length > 0 && _this4._renderOrgChartLine(parseInt(item.property.departmentLevel || item.level) + 1, children), h(Comp, {
+        var departmentLevel = parseInt(item.property.departmentLevel) || 0;
+        var level = parseInt(item.level) || 0;
+        return h("g", [item.property.open && children.length > 0 && _this4._renderOrgChartLine((departmentLevel > level ? departmentLevel : level) + 1, children), h(Comp, {
           attrs: {
             data: item,
             width: width,
@@ -12038,33 +12056,56 @@ var index$6 = {
         }
       });
     },
+    // 计算导出图片的 scale
+    calcExportScale: function calcExportScale(svgWidth, svgHeight) {
+      // 屏幕宽高
+      var screenW = window.screen.width;
+      var screenH = window.screen.height;
+      // 目标导出宽度为屏幕宽度的2倍，最高不超过3倍
+      var targetW = screenW;
+      var scale = svgWidth / targetW;
+      // 如果svg很高，按高度再限制一次
+      var targetH = screenH * 1.5;
+      if (targetH * scale < svgHeight) {
+        scale = svgHeight / targetH;
+      }
+      // 限制scale范围，防止过大或过小
+      if (scale < 1) scale = 1;
+      if (scale > 3) scale = 3;
+      return Math.round(scale);
+    },
     exportSvg: function exportSvg(fileName) {
-      var _this6 = this;
-      var bBox = this.$refs.hrOrgChartSvg.getBBox(),
-        options = {
-          scale: 1,
-          width: bBox.width,
-          height: bBox.height,
-          top: bBox.y,
-          left: bBox.x
-        };
-      this.setState({
-        loading: true,
-        isDownload: true
-      });
-      saveSvgAsPng.svgAsDataUri(this.$refs.hrOrgChartSvg, options).then(function (url) {
-        var dataUrL = url.split('base64,')[1];
-        _this6.$axios.post('/business/org/Company/getOrgDiagram.data', {
-          'base64Str': dataUrL,
-          name: fileName || 'org.png'
-        }).then(function (res) {
-          window.open("".concat(process.env.VUE_APP_API_BASE_URL, "/file.nolog?method=download&fileId=").concat(res));
-          _this6.setState({
-            loading: false,
-            isDownload: false
-          });
-        });
-      });
+      var svg = this.$refs.hrOrgChartSvg;
+      var bBox = svg.getBBox();
+      var clonedSvg = svg.cloneNode(true);
+      clonedSvg.setAttribute('width', bBox.width);
+      clonedSvg.setAttribute('height', bBox.height);
+      clonedSvg.setAttribute('viewBox', "".concat(bBox.x, " ").concat(bBox.y, " ").concat(bBox.width, " ").concat(bBox.height));
+      var svgStr = new XMLSerializer().serializeToString(clonedSvg);
+      // 使用自适应scale
+      var scale = this.calcExportScale(bBox.width, bBox.height);
+      var options = {
+        scale: scale,
+        width: bBox.width,
+        height: bBox.height,
+        left: 0,
+        top: 0
+      };
+      this.svgToPng(svgStr, options, fileName);
+      // this.setState({
+      //     loading: true,
+      //     isDownload: true,
+      // })
+      // svgAsDataUri(this.$refs.hrOrgChartSvg, options).then(url => {
+      //     let dataUrL = url.split('base64,')[1]
+      //     this.$axios.post('/business/org/Company/getOrgDiagram.data', { 'base64Str': dataUrL, name: fileName || 'org.png' }).then(res => {
+      //         window.open(`${process.env.VUE_APP_API_BASE_URL}/file.nolog?method=download&fileId=${res}`);
+      //         this.setState({
+      //             loading: false,
+      //             isDownload: false
+      //         })
+      //     })
+      // });
       // saveSvgAsPng(this.$refs.hrOrgChartSvg, fileName || 'org.png', {
       //   scale: 1,
       //   width: bBox.width,
@@ -12073,6 +12114,99 @@ var index$6 = {
       //   left: bBox.x,
       // });
     },
+    svgToPng: function svgToPng(svgStr, options, fileName) {
+      var _this6 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var blob, url, imgData;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              blob = new Blob([svgStr], {
+                type: 'image/svg+xml'
+              });
+              _context.next = 3;
+              return _this6.blobToDataUrl(blob);
+            case 3:
+              url = _context.sent;
+              _context.next = 6;
+              return _this6.drawToCanvas(url, options);
+            case 6:
+              imgData = _context.sent;
+              _this6.downloadFile(imgData, fileName || 'org.png');
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }))();
+    },
+    blobToDataUrl: function blobToDataUrl(blob) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              return _context2.abrupt("return", new Promise(function (resolve, reject) {
+                var reader = new FileReader();
+                reader.onload = function () {
+                  resolve(reader.result);
+                };
+                reader.onerror = reject;
+                reader.readAsDataURL(blob);
+              }));
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }))();
+    },
+    drawToCanvas: function drawToCanvas(url, options) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              return _context3.abrupt("return", new Promise(function (resolve, reject) {
+                var img = new Image();
+                img.setAttribute('crossOrigin', 'anonymous');
+                img.onload = function () {
+                  var canvas = document.createElement('canvas');
+                  var ctx = canvas.getContext('2d');
+                  var scale = options.scale || 1;
+                  // 关键：用bBox的left/top做偏移，宽高用bBox的width/height
+                  var width = options.width * scale;
+                  var height = options.height * scale;
+                  canvas.width = width;
+                  canvas.height = height;
+                  // 填充白色背景（可选）
+                  ctx.fillStyle = "#fff";
+                  ctx.fillRect(0, 0, width, height);
+                  // 关键：drawImage的第二组参数，控制源区域
+                  ctx.drawImage(img, 0, 0, width, height // 目标区域（canvas全部）
+                  );
+                  canvas.toBlob(function (blob) {
+                    if (blob) {
+                      resolve(URL.createObjectURL(blob));
+                    } else {
+                      reject('Failed to convert canvas to blob');
+                    }
+                  }, 'image/png');
+                };
+                img.onerror = reject;
+                img.src = url;
+              }));
+            case 1:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }))();
+    },
+    downloadFile: function downloadFile(data, fileName) {
+      var a = document.createElement('a');
+      a.href = data;
+      a.download = fileName;
+      a.click();
+    },
     /**
      * 获取当前缩放比例
      */