@blueking/bkui-form 0.0.44 → 0.0.45

package/dist/bkui-form-umd.js

@@ -1826,6 +1826,7 @@
         crtInstance = _ref.instance; // 当前组件实例，用来条件表达式判断
       var _ref2 = widgetTree.widgetMap[targetPath] || {},
         operateInstance = _ref2.instance; // 需要执行操作的组件实例，可能为其他组件也可能为当前组件
+      if (!crtInstance || !operateInstance) return;
       var fullfill = true;
       var deps = [];
       if (reaction.source) {
@@ -9975,6 +9976,11 @@
       setState: function setState(key, value) {
         if (Reflect.has(this.state, key)) {
           this.state[key] = value;
+          // state变化
+          this.$emit('state-change', {
+            path: this.path,
+            state: this.state
+          });
         } else if (key === 'value') {
           // 特殊处理value设置
           this.$emit('input', {
@@ -11137,14 +11143,98 @@
 
   function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}var normalMerge=["attrs","props","domProps"],toArrayMerge=["class","style","directives"],functionalMerge=["on","nativeOn"],mergeJsxProps=function(a){return a.reduce(function(c,a){for(var b in a)if(!c[b])c[b]=a[b];else if(-1!==normalMerge.indexOf(b))c[b]=_extends({},c[b],a[b]);else if(-1!==toArrayMerge.indexOf(b)){var d=c[b]instanceof Array?c[b]:[c[b]],e=a[b]instanceof Array?a[b]:[a[b]];c[b]=[].concat(d,e);}else if(-1!==functionalMerge.indexOf(b)){for(var f in a[b])if(c[b][f]){var g=c[b][f]instanceof Array?c[b][f]:[c[b][f]],h=a[b][f]instanceof Array?a[b][f]:[a[b][f]];c[b][f]=[].concat(g,h);}else c[b][f]=a[b][f];}else if("hook"===b)for(var i in a[b])c[b][i]=c[b][i]?mergeFn(c[b][i],a[b][i]):a[b][i];else c[b]=a[b];return c},{})},mergeFn=function(a,b){return function(){a&&a.apply(this,arguments),b&&b.apply(this,arguments);}};var helper=mergeJsxProps;
 
+  var CommonGroupWrap = Vue__default["default"].extend({
+    name: 'CommonFieldGroupWrap',
+    inject: ['widgetTree'],
+    props: _objectSpread2(_objectSpread2({}, props), {}, {
+      // 组类型
+      type: {
+        type: String,
+        default: 'default',
+        validator: function validator(value) {
+          return ['default', 'normal', 'card'].includes(value);
+        }
+      },
+      // 是否显示组title
+      showTitle: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示border
+      border: {
+        type: Boolean,
+        default: false
+      },
+      verifiable: {
+        type: Boolean,
+        default: false
+      },
+      hideEmptyRow: {
+        type: Boolean,
+        default: false
+      },
+      description: {
+        type: String,
+        default: ''
+      },
+      tag: {
+        type: String,
+        default: 'div'
+      }
+    }),
+    data: function data() {
+      return {
+        state: {
+          // 组类型目前只支持visible
+          visible: true
+        }
+      };
+    },
+    created: function created() {
+      // 注册widget TreeNode
+      this.widgetTree.addWidgetNode(this.path, this, 'group');
+    },
+    mounted: function mounted() {
+      // 更新样式
+      this.$forceUpdate();
+    },
+    beforeDestroy: function beforeDestroy() {
+      this.widgetTree.removeWidgetNode(this.path, this);
+    },
+    methods: {
+      setState: function setState(key, value) {
+        if (Reflect.has(this.state, key)) {
+          this.state[key] = value;
+        } else {
+          console.warn("Group unsupported ".concat(key, " state, please check"));
+        }
+      }
+    },
+    render: function render(h) {
+      var _this$layout;
+      var groupContentStyle = _objectSpread2({}, (_this$layout = this.layout) === null || _this$layout === void 0 ? void 0 : _this$layout.container);
+      return h(this.tag, {
+        style: groupContentStyle
+      }, [this.$slots.default]);
+    }
+  });
+
   // 伪数组类型
   var KeyValueArrayWidget = Vue__default["default"].extend({
     name: 'KeyValueArrayWidget',
     props: _objectSpread2({}, props),
+    data: function data() {
+      return {
+        columns: {},
+        showTableHead: false
+      };
+    },
     mounted: function mounted() {
       var _this$value;
       var _this$schema$minItems = this.schema.minItems,
         minItems = _this$schema$minItems === void 0 ? 0 : _this$schema$minItems;
+      var uiOptions = Schema.getUiOptions(this.schema);
+      this.showTableHead = !!uiOptions.showTableHead;
       // 补全minItems项
       if (((_this$value = this.value) === null || _this$value === void 0 ? void 0 : _this$value.length) < minItems) {
         var data = Schema.getSchemaDefaultValue(this.schema.items);
@@ -11186,16 +11276,23 @@
         cursor: this.disabled ? 'not-allowed' : 'pointer',
         display: 'inline-block'
       };
+      var theadStyle = {
+        display: this.showTableHead ? '' : 'none'
+      };
+      var thStyle = {
+        fontSize: '14px',
+        textAlign: 'left',
+        fontWeight: 'normal',
+        color: '#63656E',
+        paddingLeft: '10px',
+        paddingRight: '10px'
+      };
+      var tdStyle = {
+        paddingLeft: '10px',
+        paddingRight: '10px'
+      };
       var properties = (_this$schema = this.schema) === null || _this$schema === void 0 ? void 0 : (_this$schema$items = _this$schema.items) === null || _this$schema$items === void 0 ? void 0 : _this$schema$items.properties;
       var props = orderProperties(Object.keys(properties || {}), (_this$schema2 = this.schema) === null || _this$schema2 === void 0 ? void 0 : (_this$schema2$items = _this$schema2.items) === null || _this$schema2$items === void 0 ? void 0 : _this$schema2$items['ui:order']);
-      // props为空时，表示只有一个项
-      var keysLen = Object.keys(properties || {}).length;
-      var defaultCols = properties ? new Array(keysLen).fill('1fr').concat('20px').join(' ') : '1fr 20px';
-      var defaultContainerLayout = _objectSpread2({}, this.layout.container || {
-        display: 'grid',
-        gridGap: '20px',
-        'grid-template-columns': defaultCols // 默认配置
-      });
       var self = this;
       var dealSchema = function dealSchema(schema) {
         return (
@@ -11231,6 +11328,11 @@
           on: {
             input: function input(data) {
               self.handleInput(data);
+            },
+            'state-change': function stateChange(_ref2) {
+              var path = _ref2.path,
+                state = _ref2.state;
+              _this.$set(_this.columns, path, state);
             }
           },
           style: {
@@ -11238,37 +11340,53 @@
           }
         });
       };
-      return h("div", [(_this$value2 = this.value) === null || _this$value2 === void 0 ? void 0 : _this$value2.map(function (_, index) {
-        var _this$schema4;
+      return h("table", [h("thead", {
+        "style": theadStyle
+      }, [h("tr", [props === null || props === void 0 ? void 0 : props.map(function (prop) {
+        var _this$schema3, _this$schema3$items, _this$columns$path;
+        var schemaItem = (_this$schema3 = _this.schema) === null || _this$schema3 === void 0 ? void 0 : (_this$schema3$items = _this$schema3.items) === null || _this$schema3$items === void 0 ? void 0 : _this$schema3$items.properties[prop];
+        var path = Path.getCurPath(_this.path, "0.".concat(prop));
+        return h("th", {
+          "style": _objectSpread2(_objectSpread2({}, thStyle), {}, {
+            display: ((_this$columns$path = _this.columns[path]) === null || _this$columns$path === void 0 ? void 0 : _this$columns$path.visible) === false ? 'none' : ''
+          })
+        }, [schemaItem === null || schemaItem === void 0 ? void 0 : schemaItem.title]);
+      }), h("th")])]), h("tbody", [(_this$value2 = this.value) === null || _this$value2 === void 0 ? void 0 : _this$value2.map(function (_, index) {
+        var _this$schema5;
         var groupPath = Path.getCurPath(_this.path, "".concat(index));
-        return h(FieldGroupWrap, helper([{}, {
+        return h(CommonGroupWrap, helper([{}, {
           "props": _objectSpread2(_objectSpread2({}, _this.$props), {}, {
             path: groupPath,
             value: Path.getPathVal(_this.rootData, groupPath),
             schema: _this.schema.items,
-            layout: _objectSpread2(_objectSpread2({}, _this.layout), {}, {
-              container: _objectSpread2({}, defaultContainerLayout)
-            })
+            tag: 'tr',
+            layout: _objectSpread2({}, _this.layout)
           })
         }]), [props !== null && props !== void 0 && props.length ? props.map(function (prop) {
-          var _this$schema3, _this$schema3$items;
-          var schemaItem = (_this$schema3 = _this.schema) === null || _this$schema3 === void 0 ? void 0 : (_this$schema3$items = _this$schema3.items) === null || _this$schema3$items === void 0 ? void 0 : _this$schema3$items.properties[prop];
+          var _this$schema4, _this$schema4$items, _this$columns$curPath;
+          var schemaItem = (_this$schema4 = _this.schema) === null || _this$schema4 === void 0 ? void 0 : (_this$schema4$items = _this$schema4.items) === null || _this$schema4$items === void 0 ? void 0 : _this$schema4$items.properties[prop];
           var curPath = Path.getCurPath(_this.path, "".concat(index, ".").concat(prop));
           var lastProp = curPath.split('.').pop();
           var layoutConfig = Layout.findLayoutByProp(lastProp, _this.layout.group || []) || {};
-          return renderSchemaField({
+          return h("td", {
+            "style": _objectSpread2(_objectSpread2({}, tdStyle), {}, {
+              display: ((_this$columns$curPath = _this.columns[curPath]) === null || _this$columns$curPath === void 0 ? void 0 : _this$columns$curPath.visible) === false ? 'none' : ''
+            })
+          }, [renderSchemaField({
             path: curPath,
             schema: dealSchema(schemaItem),
             layout: layoutConfig,
             required: Schema.isRequired(schemaItem, prop)
-          });
-        }) : renderSchemaField({
+          })]);
+        }) : h("td", [renderSchemaField({
           path: Path.getCurPath(_this.path, index),
-          schema: dealSchema(((_this$schema4 = _this.schema) === null || _this$schema4 === void 0 ? void 0 : _this$schema4.items) || {}),
+          schema: dealSchema(((_this$schema5 = _this.schema) === null || _this$schema5 === void 0 ? void 0 : _this$schema5.items) || {}),
           layout: {},
           required: false
-        }), h("span", {
-          "style": labelBtnStyle,
+        })]), h("td", [h("span", {
+          "style": _objectSpread2(_objectSpread2({}, labelBtnStyle), {}, {
+            marginBottom: '10px'
+          }),
           "on": {
             "click": function click() {
               return _this.handleRemoveItem(index);
@@ -11276,7 +11394,7 @@
           }
         }, [h("i", {
           "class": "bk-icon icon-minus-line"
-        })])]);
+        })])])]);
       }), h("span", {
         "on": {
           "click": this.handleAddItem
@@ -11284,7 +11402,7 @@
         "style": labelBtnStyle
       }, [h("i", {
         "class": "bk-icon icon-plus-line"
-      })])]);
+      })])])]);
     }
   });