formiojs-eorion 0.1.6 → 0.1.8

package/Formio.js

@@ -1724,7 +1724,7 @@ Formio.projectUrlSet = false;
 Formio.plugins = [];
 Formio.cache = {};
 Formio.Providers = _providers.default;
-Formio.version = '0.1.6';
+Formio.version = '0.1.8';
 Formio.pathType = '';
 Formio.events = new _EventEmitter.default();
 Formio.cdn = new _CDN.default();

package/components/CustomTabs/Tabs.js

@@ -26,8 +26,8 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/es.array.find-index.js");
-require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.object.get-prototype-of.js");
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -294,12 +294,20 @@ var CustomTabsComponent = /*#__PURE__*/function (_NestedComponent) {
   }, {
     key: "handleTabsValidation",
     value: function handleTabsValidation() {
+      var _this11 = this;
       if (!this.refs[this.tabLinkKey] || !this.refs[this.tabLinkKey].length || !this.tabs.length) {
         return;
       }
       // 切换tab时，刷新taskCalendar组件，修复taskCalendar在tab中高度错乱的问题
-      if (this.tabs[this.currentTab] && this.tabs[this.currentTab].length > 0 && this.tabs[this.currentTab][0].type === 'taskCalendar') {
-        this.tabs[this.currentTab][0].refresh(new Date().getTime());
+      if (this.tabs[this.currentTab] && this.tabs[this.currentTab].length > 0) {
+        this.tabs[this.currentTab].forEach(function (item, index) {
+          if (['echarts', 'taskCalendar'].includes(item.type)) {
+            _this11.tabs[_this11.currentTab][index].refresh(new Date().getTime());
+          }
+          if (['data_china_grid_row', 'data_china_grid'].includes(item.type)) {
+            _this11.tabs[_this11.currentTab][index].resetSparkLine();
+          }
+        });
       }
       this.clearErrorClasses(this.refs[this.tabLinkKey]);
       var invalidTabsIndexes = this.tabs.reduce(function (invalidTabs, tab, tabIndex) {

package/components/DataChinaGrid/Data.js

@@ -135,6 +135,62 @@ var DataChinaGrid = /*#__PURE__*/function (_Component) {
     value: function getValue() {
       return this.component.field;
     }
+  }, {
+    key: "resetSparkLine",
+    value: function resetSparkLine() {
+      var self = this;
+      var container = this.element.querySelector('.data-container');
+      if (self.component['enable-sparkline']) {
+        if (self.isLoadingSparkLine) {
+          return true;
+        }
+        self.isLoadingSparkLine = true;
+        var sparkLineType = this.component['sparkLine-type'] || 'line';
+        var fillColor;
+        if (self.component['sparkLine-fill-color']) {
+          switch (sparkLineType) {
+            case 'line':
+              fillColor = self.component['sparkLine-fill-color'].split(',')[0];
+              break;
+            case 'pie':
+            case 'donut':
+            case 'bar':
+              fillColor = self.component['sparkLine-fill-color'].split(',');
+              break;
+          }
+        }
+        // values
+        container.querySelector('.sparkline-container').innerHTML = "<span class=\"line\">".concat(self.parseTpl(self.component['sparkLine-value'], {
+          data: self.rootValue
+        }), "</span>");
+        try {
+          // @ts-ignore
+          $(container).find('.line').peity(sparkLineType, {
+            fill: fillColor,
+            height: self.component['sparkLine-height'],
+            max: self.component['sparkLine-max-value-count'],
+            min: 0,
+            stroke: self.component['sparkLine-stroke-color'],
+            strokeWidth: 2,
+            width: self.component['sparkLine-width']
+          });
+          self.isLoadingSparkLine = false;
+        } catch (e) {
+          container.querySelectorAll(".line").forEach(function (e) {
+            return peity(e, sparkLineType, {
+              fill: fillColor,
+              height: self.component['sparkLine-height'],
+              max: self.component['sparkLine-max-value-count'],
+              min: 0,
+              stroke: self.component['sparkLine-stroke-color'],
+              strokeWidth: 2,
+              width: self.component['sparkLine-width']
+            });
+          });
+          self.isLoadingSparkLine = false;
+        }
+      }
+    }
 
     /**
      * Set the value of the component into the dom elements.
@@ -145,9 +201,16 @@ var DataChinaGrid = /*#__PURE__*/function (_Component) {
   }, {
     key: "setValue",
     value: function setValue(value) {
+      var _this3 = this;
       var self = this;
       try {
         var container = this.element.querySelector('.data-container');
+        try {
+          var customStyle = JSON.parse(this.component["custom-style"] || {});
+          _lodash.default.forEach(customStyle, function (value, key) {
+            _this3.refs.dataContainer.style[key] = value;
+          });
+        } catch (e) {}
         // 标题设置
         var element = container.querySelector('.title-container');
         element.innerHTML = self.parseTpl(self.component['title-content'], {
@@ -172,56 +235,7 @@ var DataChinaGrid = /*#__PURE__*/function (_Component) {
           });
         }
         // 图标
-        if (self.component['enable-sparkline']) {
-          if (self.isLoadingSparkLine) {
-            return true;
-          }
-          self.isLoadingSparkLine = true;
-          var sparkLineType = this.component['sparkLine-type'] || 'line';
-          var fillColor;
-          if (self.component['sparkLine-fill-color']) {
-            switch (sparkLineType) {
-              case 'line':
-                fillColor = self.component['sparkLine-fill-color'].split(',')[0];
-                break;
-              case 'pie':
-              case 'donut':
-              case 'bar':
-                fillColor = self.component['sparkLine-fill-color'].split(',');
-                break;
-            }
-          }
-          // values
-          container.querySelector('.sparkline-container').innerHTML = "<span class=\"line\">".concat(self.parseTpl(self.component['sparkLine-value'], {
-            data: self.rootValue
-          }), "</span>");
-          try {
-            // @ts-ignore
-            $(container).find('.line').peity(sparkLineType, {
-              fill: fillColor,
-              height: self.component['sparkLine-height'],
-              max: self.component['sparkLine-max-value-count'],
-              min: 0,
-              stroke: self.component['sparkLine-stroke-color'],
-              strokeWidth: 2,
-              width: self.component['sparkLine-width']
-            });
-            self.isLoadingSparkLine = false;
-          } catch (e) {
-            container.querySelectorAll(".line").forEach(function (e) {
-              return peity(e, sparkLineType, {
-                fill: fillColor,
-                height: self.component['sparkLine-height'],
-                max: self.component['sparkLine-max-value-count'],
-                min: 0,
-                stroke: self.component['sparkLine-stroke-color'],
-                strokeWidth: 2,
-                width: self.component['sparkLine-width']
-              });
-            });
-            self.isLoadingSparkLine = false;
-          }
-        }
+        self.resetSparkLine();
       } catch (e) {
         console.log(e);
       }

package/components/DataChinaGrid/editForm/Data.edit.display.js

@@ -277,6 +277,15 @@ var _default = [{
       defaultValue: ''
     }]
   }]
+}, {
+  type: 'textarea',
+  label: '自定义样式',
+  key: 'custom-style',
+  editor: 'ace',
+  input: true,
+  defaultValue: {},
+  tooltip: '自定义的style:json格式,ex:{"border":"none","border-radius":"30px"}',
+  weight: 2
 }, {
   type: 'input',
   label: 'BackgroundColor',

package/components/DataChinaGridRow/Data.js

@@ -136,6 +136,65 @@ var DataChinaGridRow = /*#__PURE__*/function (_Component) {
     value: function getValue() {
       return this.component.field;
     }
+  }, {
+    key: "resetSparkLine",
+    value: function resetSparkLine() {
+      var self = this;
+      var container = this.element.querySelector('.data-container');
+      if (self.component['enable-sparkline']) {
+        if (self.isLoadingSparkLine) {
+          return true;
+        }
+        self.isLoadingSparkLine = true;
+        var sparkLineType = this.component['sparkLine-type'] || 'line';
+        var fillColor;
+        if (self.component['sparkLine-fill-color']) {
+          switch (sparkLineType) {
+            case 'line':
+              fillColor = self.component['sparkLine-fill-color'].split(',')[0];
+              break;
+            case 'pie':
+            case 'donut':
+            case 'bar':
+              fillColor = self.component['sparkLine-fill-color'].split(',');
+              break;
+          }
+        }
+        // values
+        container.querySelector('.sparkline-container').innerHTML = "<span class=\"line\">".concat(self.parseTpl(self.component['sparkLine-value'], {
+          data: self.rootValue
+        }), "</span>");
+        // 宽度计算
+        var parentWidth = container.querySelector('#sparkline-container-parent').offsetWidth;
+        parentWidth = parentWidth * self.component['sparkLine-width'];
+        try {
+          // @ts-ignore
+          (0, _jquery.default)(container).find('.line').peity(sparkLineType, {
+            fill: fillColor,
+            height: self.component['sparkLine-height'],
+            max: self.component['sparkLine-max-value-count'],
+            min: 0,
+            stroke: self.component['sparkLine-stroke-color'],
+            strokeWidth: 2,
+            width: parentWidth
+          });
+          self.isLoadingSparkLine = false;
+        } catch (e) {
+          container.querySelectorAll(".line").forEach(function (e) {
+            return peity(e, sparkLineType, {
+              fill: fillColor,
+              height: self.component['sparkLine-height'],
+              max: self.component['sparkLine-max-value-count'],
+              min: 0,
+              stroke: self.component['sparkLine-stroke-color'],
+              strokeWidth: 2,
+              width: parentWidth
+            });
+          });
+          self.isLoadingSparkLine = false;
+        }
+      }
+    }
 
     /**
      * Set the value of the component into the dom elements.
@@ -146,9 +205,16 @@ var DataChinaGridRow = /*#__PURE__*/function (_Component) {
   }, {
     key: "setValue",
     value: function setValue(value) {
+      var _this3 = this;
       var self = this;
       try {
         var container = this.element.querySelector('.data-container');
+        try {
+          var customStyle = JSON.parse(this.component["custom-style"] || {});
+          _lodash.default.forEach(customStyle, function (value, key) {
+            _this3.refs.dataContainer.style[key] = value;
+          });
+        } catch (e) {}
         // 标题设置
         var element = container.querySelector('.title-container');
         element.innerHTML = self.parseTpl(self.component['title-content'], {
@@ -173,59 +239,7 @@ var DataChinaGridRow = /*#__PURE__*/function (_Component) {
           });
         }
         // 图标
-        if (self.component['enable-sparkline']) {
-          if (self.isLoadingSparkLine) {
-            return true;
-          }
-          self.isLoadingSparkLine = true;
-          var sparkLineType = this.component['sparkLine-type'] || 'line';
-          var fillColor;
-          if (self.component['sparkLine-fill-color']) {
-            switch (sparkLineType) {
-              case 'line':
-                fillColor = self.component['sparkLine-fill-color'].split(',')[0];
-                break;
-              case 'pie':
-              case 'donut':
-              case 'bar':
-                fillColor = self.component['sparkLine-fill-color'].split(',');
-                break;
-            }
-          }
-          // values
-          container.querySelector('.sparkline-container').innerHTML = "<span class=\"line\">".concat(self.parseTpl(self.component['sparkLine-value'], {
-            data: self.rootValue
-          }), "</span>");
-          // 宽度计算
-          var parentWidth = container.querySelector('#sparkline-container-parent').offsetWidth;
-          parentWidth = parentWidth * self.component['sparkLine-width'];
-          try {
-            // @ts-ignore
-            (0, _jquery.default)(container).find('.line').peity(sparkLineType, {
-              fill: fillColor,
-              height: self.component['sparkLine-height'],
-              max: self.component['sparkLine-max-value-count'],
-              min: 0,
-              stroke: self.component['sparkLine-stroke-color'],
-              strokeWidth: 2,
-              width: parentWidth
-            });
-            self.isLoadingSparkLine = false;
-          } catch (e) {
-            container.querySelectorAll(".line").forEach(function (e) {
-              return peity(e, sparkLineType, {
-                fill: fillColor,
-                height: self.component['sparkLine-height'],
-                max: self.component['sparkLine-max-value-count'],
-                min: 0,
-                stroke: self.component['sparkLine-stroke-color'],
-                strokeWidth: 2,
-                width: parentWidth
-              });
-            });
-            self.isLoadingSparkLine = false;
-          }
-        }
+        self.resetSparkLine();
       } catch (e) {
         console.log(e);
       }

package/components/DataChinaGridRow/editForm/Data.edit.display.js

@@ -202,6 +202,15 @@ var _default = [{
     defaultValue: '#000000',
     label: '字体大小'
   }]
+}, {
+  type: 'textarea',
+  label: '自定义样式',
+  key: 'custom-style',
+  editor: 'ace',
+  input: true,
+  defaultValue: {},
+  tooltip: '自定义的style:json格式,ex:{"border":"none","border-radius":"30px"}',
+  weight: 3
 }, {
   type: 'panel',
   title: '统计图表',

package/components/echarts/ECharts.js

@@ -49,11 +49,8 @@ var ECharts = /*#__PURE__*/function (_FieldComponent) {
   _inherits(ECharts, _FieldComponent);
   var _super = _createSuper(ECharts);
   function ECharts(component, options, data) {
-    var _this;
     _classCallCheck(this, ECharts);
-    _this = _super.call(this, component, options, data);
-    _this.chartInstance = null;
-    return _this;
+    return _super.call(this, component, options, data);
   }
   _createClass(ECharts, [{
     key: "render",
@@ -71,11 +68,11 @@ var ECharts = /*#__PURE__*/function (_FieldComponent) {
   }, {
     key: "attach",
     value: function attach(element) {
-      var _this2 = this;
+      var _this = this;
       var refs = {};
       this.loadRefs(element, refs);
       setTimeout(function () {
-        _this2.setValue();
+        _this.setValue();
       }, 100);
       return _get(_getPrototypeOf(ECharts.prototype), "attach", this).call(this, element);
     }
@@ -116,17 +113,18 @@ var ECharts = /*#__PURE__*/function (_FieldComponent) {
   }, {
     key: "setValue",
     value: function setValue(value) {
-      if (!this.chartInstance) {
+      var canvas = this.element.querySelector('#echarts-container');
+      var chartInstance = echarts.getInstanceByDom(canvas);
+      if (!chartInstance) {
         // 初始化 ECharts 实例
-        var canvas = this.element.querySelector('#echarts-container');
-        this.chartInstance = echarts.init(canvas);
+        chartInstance = echarts.init(canvas);
       }
       var optionsStr = this.component["option-value"];
       optionsStr = this.parseTpl(optionsStr, {
         data: this.rootValue
       });
       // 使用配置项渲染图表
-      this.chartInstance.setOption(JSON.parse(optionsStr), true);
+      chartInstance.setOption(JSON.parse(optionsStr), true);
       return true;
     }
   }], [{

package/components/tabs/Tabs.js

@@ -26,8 +26,8 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/es.array.find-index.js");
-require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.object.get-prototype-of.js");
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -251,12 +251,17 @@ var TabsComponent = /*#__PURE__*/function (_NestedComponent) {
   }, {
     key: "handleTabsValidation",
     value: function handleTabsValidation() {
+      var _this9 = this;
       if (!this.refs[this.tabLinkKey] || !this.refs[this.tabLinkKey].length || !this.tabs.length) {
         return;
       }
       // 切换tab时，刷新taskCalendar组件，修复taskCalendar在tab中高度错乱的问题
-      if (this.tabs[this.currentTab] && this.tabs[this.currentTab].length > 0 && this.tabs[this.currentTab][0].type === 'taskCalendar') {
-        this.tabs[this.currentTab][0].refresh(new Date().getTime());
+      if (this.tabs[this.currentTab] && this.tabs[this.currentTab].length > 0) {
+        this.tabs[this.currentTab].forEach(function (item, index) {
+          if (['echarts', 'taskCalendar'].includes(item.type)) {
+            _this9.tabs[_this9.currentTab][index].refresh(new Date().getTime());
+          }
+        });
       }
       this.clearErrorClasses(this.refs[this.tabLinkKey]);
       var invalidTabsIndexes = this.tabs.reduce(function (invalidTabs, tab, tabIndex) {