@blueking/bkui-form 0.0.44 → 0.0.45

package/dist/bkui-form-es.js

@@ -1818,6 +1818,7 @@ var resolveReaction = function resolveReaction(crtInsPath, targetPath, reaction,
       crtInstance = _ref.instance; // 当前组件实例，用来条件表达式判断
     var _ref2 = widgetTree.widgetMap[targetPath] || {},
       operateInstance = _ref2.instance; // 需要执行操作的组件实例，可能为其他组件也可能为当前组件
+    if (!crtInstance || !operateInstance) return;
     var fullfill = true;
     var deps = [];
     if (reaction.source) {
@@ -9967,6 +9968,11 @@ var Widget = Vue.extend({
     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', {
@@ -11129,14 +11135,98 @@ var FieldGroupWrap = Vue.extend({
 
 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.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.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);
@@ -11178,16 +11268,23 @@ var KeyValueArrayWidget = Vue.extend({
       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 (
@@ -11223,6 +11320,11 @@ var KeyValueArrayWidget = Vue.extend({
         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: {
@@ -11230,37 +11332,53 @@ var KeyValueArrayWidget = Vue.extend({
         }
       });
     };
-    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);
@@ -11268,7 +11386,7 @@ var KeyValueArrayWidget = Vue.extend({
         }
       }, [h("i", {
         "class": "bk-icon icon-minus-line"
-      })])]);
+      })])])]);
     }), h("span", {
       "on": {
         "click": this.handleAddItem
@@ -11276,7 +11394,7 @@ var KeyValueArrayWidget = Vue.extend({
       "style": labelBtnStyle
     }, [h("i", {
       "class": "bk-icon icon-plus-line"
-    })])]);
+    })])])]);
   }
 });