@blueking/bkui-form 0.0.42 → 0.0.43

package/dist/bkui-form-umd.js

@@ -642,16 +642,25 @@
     }
     if (!sources.length) return target;
     var source = sources.shift();
-    if (isObj(target) && isObj(source)) {
-      for (var key in source) {
-        if (isObj(source[key])) {
-          if (!target[key]) Object.assign(target, _defineProperty({}, key, {}));
-          mergeDeep(target[key], source[key]);
-        } else {
-          Object.assign(target, _defineProperty({}, key, source[key]));
+    if (source === undefined) {
+      return target;
+    }
+    Object.entries(source).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      var targetValue = target[key];
+      if (isObj(value)) {
+        if (!(key in target)) {
+          target[key] = {};
+        } else if (!isObj(targetValue)) {
+          target[key] = {};
         }
+        mergeDeep(target[key], value);
+      } else {
+        target[key] = value;
       }
-    }
+    });
     return mergeDeep.apply(void 0, [target].concat(sources));
   }
   function isArguments(object) {
@@ -844,7 +853,6 @@
             key = _ref2[0],
             value = _ref2[1];
           if (_this[props].has(key)) {
-            console.warn('repeat key', key);
             return;
           }
           _this[props].set(key, value);
@@ -1543,6 +1551,10 @@
       type: Boolean,
       default: false
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     readonlyMode: {
       type: String,
       default: 'value',
@@ -1669,7 +1681,6 @@
     }
   });
 
-  /* eslint-disable @typescript-eslint/no-unused-vars */
   // 组件对外暴露的上下文
   var getContext = function getContext(instance) {
     var context = instance.context,
@@ -1677,7 +1688,8 @@
       validate = instance.validate,
       schema = instance.schema,
       rootData = instance.rootData,
-      widgetNode = instance.widgetNode;
+      widgetNode = instance.widgetNode,
+      getValue = instance.getValue;
     return {
       $self: instance,
       $context: context,
@@ -1686,11 +1698,33 @@
       $loadDataSource: loadDataSource,
       $validate: validate,
       $rootData: rootData,
-      $widgetNode: widgetNode
+      $widgetNode: widgetNode,
+      $getValue: getValue,
+      $getCookie: function $getCookie(name) {
+        var cookies = document.cookie.split(';');
+        var _iterator = _createForOfIteratorHelper(cookies),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var cookie = _step.value;
+            var _cookie$trim$split = cookie.trim().split('='),
+              _cookie$trim$split2 = _slicedToArray(_cookie$trim$split, 2),
+              key = _cookie$trim$split2[0],
+              value = _cookie$trim$split2[1];
+            if (key === name) return decodeURIComponent(value);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        return null;
+      }
     };
   };
   var executeExpression = function executeExpression(expression, instance) {
     var $dep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    var $args = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     var _getContext = getContext(instance),
       $self = _getContext.$self,
       $context = _getContext.$context,
@@ -1699,7 +1733,9 @@
       $loadDataSource = _getContext.$loadDataSource,
       $validate = _getContext.$validate,
       $rootData = _getContext.$rootData,
-      $widgetNode = _getContext.$widgetNode;
+      $widgetNode = _getContext.$widgetNode,
+      $getValue = _getContext.$getValue,
+      $getCookie = _getContext.$getCookie;
     var context = {
       $self: $self,
       $context: $context,
@@ -1709,8 +1745,12 @@
       $validate: $validate,
       $rootData: $rootData,
       $widgetNode: $widgetNode,
-      $dep: $dep
+      $dep: $dep,
+      $getValue: $getValue,
+      $getCookie: $getCookie,
+      $args: $args
     };
+    if (['boolean', 'number'].includes(_typeof(expression))) return expression;
     if (typeof expression === 'string') {
       if (!/^{{.+}}$/.test(expression.trim())) return expression; // 没有上下文时直接返回
       var expStr = expression.trim().replace(/(^{{)|(}}$)/g, '') // 去掉{{ }}
@@ -1726,6 +1766,9 @@
           _ref.$rootData;
           _ref.$widgetNode;
           _ref.$dep;
+          _ref.$getValue;
+          _ref.$getCookie;
+          _ref.$args;
         try {
           // eslint-disable-next-line no-eval
           return innerFuncs.includes(expStr) ? eval("".concat(expStr, "()")) : eval(expStr);
@@ -1746,197 +1789,6 @@
     return typeof expression === 'string' && /{{.*}}/.test(expression);
   };
 
-  var WidgetNode = /*#__PURE__*/function () {
-    function WidgetNode(config) {
-      _classCallCheck(this, WidgetNode);
-      this.id = void 0;
-      this.instance = void 0;
-      this.parent = void 0;
-      this.type = void 0;
-      this.index = void 0;
-      // todo
-      this.children = void 0;
-      var id = config.id,
-        instance = config.instance,
-        parent = config.parent,
-        index = config.index,
-        type = config.type,
-        _config$children = config.children,
-        children = _config$children === void 0 ? [] : _config$children;
-      this.id = id;
-      this.type = type;
-      this.index = index;
-      this.instance = instance;
-      this.parent = parent;
-      this.children = children;
-    }
-    // 当前node的值
-    return _createClass(WidgetNode, [{
-      key: "value",
-      get: function get() {
-        var _this$instance;
-        return (_this$instance = this.instance) === null || _this$instance === void 0 ? void 0 : _this$instance.value;
-      }
-      // 是否含有可见子节点
-    }, {
-      key: "isChildrenVisible",
-      get: function get() {
-        if (this.type === 'node') {
-          var _this$instance2;
-          return (_this$instance2 = this.instance) === null || _this$instance2 === void 0 ? void 0 : _this$instance2.state.visible;
-        }
-        return this.children.some(function (child) {
-          return child.isChildrenVisible;
-        });
-      }
-      /**
-       * 获取 parents
-       */
-    }, {
-      key: "parents",
-      get: function get() {
-        if (!this.parent) {
-          return [];
-        }
-        return [].concat(_toConsumableArray(this.parent.parents), [this.parent]);
-      }
-      // 第一个子节点
-    }, {
-      key: "firstChild",
-      get: function get() {
-        return this.children[0] || null;
-      }
-      // 最后一个子节点
-    }, {
-      key: "lastChild",
-      get: function get() {
-        return this.children[this.children.length - 1] || null;
-      }
-      // 指定属性下的同胞节点
-    }, {
-      key: "getSibling",
-      value: function getSibling(lastProp) {
-        var _this$parent;
-        var reg = new RegExp("".concat(Path.getPathLastProp(this.id) || '', "$"));
-        var id = this.id.replace(reg, lastProp);
-        return (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.children.find(function (node) {
-          return node.id === id;
-        });
-      }
-      // 获取所以同胞节点（不含自己）
-    }, {
-      key: "getSiblings",
-      value: function getSiblings() {
-        var _this$parent2,
-          _this = this;
-        return ((_this$parent2 = this.parent) === null || _this$parent2 === void 0 ? void 0 : _this$parent2.children.filter(function (node) {
-          return node.instance !== _this.instance;
-        })) || [];
-      }
-      /**
-       * 是否是叶子节点
-       */
-    }, {
-      key: "isLeaf",
-      get: function get() {
-        return !this.children.length;
-      }
-    }, {
-      key: "appendChild",
-      value: function appendChild(node) {
-        var _this$children;
-        var nodes = Array.isArray(node) ? node : [node];
-        var offset = node.index !== undefined ? node.index : this.children.length;
-        (_this$children = this.children).splice.apply(_this$children, [offset, 0].concat(_toConsumableArray(nodes)));
-        this.children.slice(offset).forEach(function (node, index) {
-          node.index = offset + index;
-        });
-        return nodes;
-      }
-    }, {
-      key: "removeChild",
-      value: function removeChild(node) {
-        var _this2 = this;
-        var nodes = Array.isArray(node) ? node : [node];
-        var removedChildIndex = [];
-        nodes.forEach(function (node) {
-          var index = node.index;
-          removedChildIndex.push(index);
-          _this2.children.splice(index, 1);
-        });
-        var minIndex = Math.min.apply(Math, removedChildIndex);
-        this.children.slice(minIndex).forEach(function (node, index) {
-          node.index = minIndex + index;
-        });
-        return nodes;
-      }
-    }]);
-  }();
-  var WidgetTree = /*#__PURE__*/function () {
-    function WidgetTree() {
-      _classCallCheck(this, WidgetTree);
-      this.widgetMap = {};
-    }
-    return _createClass(WidgetTree, [{
-      key: "addWidgetNode",
-      value: function addWidgetNode(path, instance, type, index) {
-        if (path === '') {
-          // 根节点
-          var node = new WidgetNode({
-            id: '',
-            type: type,
-            index: index,
-            parent: null,
-            instance: instance,
-            children: []
-          });
-          this.widgetMap[path] = node;
-        } else {
-          // 普通节点
-          var parentId = Path.getParentPath(path);
-          var parentNode = this.widgetMap[parentId];
-          var _node = new WidgetNode({
-            id: (instance === null || instance === void 0 ? void 0 : instance.path) || path,
-            type: type,
-            index: index,
-            parent: parentNode,
-            instance: instance,
-            children: []
-          });
-          if (!parentNode) {
-            console.warn('Unexpected parent id, please check widget node', _node);
-          } else {
-            parentNode.appendChild(_node);
-          }
-          this.widgetMap[path] = _node;
-        }
-      }
-    }, {
-      key: "removeWidgetNode",
-      value: function removeWidgetNode(path, instance) {
-        var node = this.widgetMap[path];
-        if (node) {
-          if (node.parent) {
-            var children = node.parent.children;
-            var index = children.findIndex(function (item) {
-              return item.instance === instance;
-            });
-            if (index > -1) {
-              children.splice(index, 1);
-              children.slice(index).forEach(function (node, i) {
-                node.index = index + i;
-              });
-            }
-          }
-          if (node.instance === instance) {
-            delete this.widgetMap[path];
-          }
-        }
-      }
-    }]);
-  }();
-  var widgetTree = new WidgetTree();
-
   var reactionsMap = {};
   var subscribe = function subscribe(path, typeName, fn) {
     if (!reactionsMap[path]) {
@@ -1968,7 +1820,7 @@
    * @param reaction 传入的reacion配置
    * @returns viod
    */
-  var resolveReaction = function resolveReaction(crtInsPath, targetPath, reaction) {
+  var resolveReaction = function resolveReaction(crtInsPath, targetPath, reaction, widgetTree) {
     return function () {
       var _ref = widgetTree.widgetMap[crtInsPath] || {},
         crtInstance = _ref.instance; // 当前组件实例，用来条件表达式判断
@@ -2013,6 +1865,7 @@
   };
   var reactionRegister = function reactionRegister(path) {
     var reactions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var widgetTree = arguments.length > 2 ? arguments[2] : undefined;
     var _ref3 = widgetTree.widgetMap[path] || {},
       instance = _ref3.instance;
     if (reactions && Array.isArray(reactions)) {
@@ -2024,13 +1877,13 @@
         subscribePaths.forEach(function (p) {
           var sourcePathItem = parsePath(p, instance);
           if (typeof reaction.lifetime === 'string') {
-            subscribe(sourcePathItem, "lifetime/".concat(reaction.lifetime), resolveReaction(path, targePath, reaction));
+            subscribe(sourcePathItem, "lifetime/".concat(reaction.lifetime), resolveReaction(path, targePath, reaction, widgetTree));
           }
           if (typeof reaction.effect === 'string') {
-            subscribe(sourcePathItem, "effect/".concat(reaction.effect), resolveReaction(path, targePath, reaction));
+            subscribe(sourcePathItem, "effect/".concat(reaction.effect), resolveReaction(path, targePath, reaction, widgetTree));
           }
           if (!reaction.lifetime && !reaction.effect) {
-            subscribe(sourcePathItem, 'valChange', resolveReaction(path, targePath, reaction));
+            subscribe(sourcePathItem, 'valChange', resolveReaction(path, targePath, reaction, widgetTree));
           }
         });
       });
@@ -9764,7 +9617,7 @@
     };
   };
   // 设置表单项校验状态
-  var setWidgetErrorTips = function setWidgetErrorTips(path, isError, errorMsg) {
+  var setWidgetErrorTips = function setWidgetErrorTips(path, isError, errorMsg, widgetTree) {
     var formItem = widgetTree.widgetMap[path];
     var instance = formItem.instance;
     if (formItem.type === 'node') {
@@ -9797,7 +9650,7 @@
    * 校验单个表单项
    * @param path 字段路径
    */
-  var validateFormItem = function validateFormItem(path) {
+  var validateFormItem = function validateFormItem(path, widgetTree) {
     var _instance$schema;
     // TODO 校验逻辑梳理
     var formItem = widgetTree.widgetMap[path];
@@ -9837,7 +9690,7 @@
       var errorsText = ajv.errorsText(schemaValidate.errors, {
         separator: '\n'
       });
-      setWidgetErrorTips(path, true, errorsText);
+      setWidgetErrorTips(path, true, errorsText, widgetTree);
       return {
         result: false,
         message: errorsText,
@@ -9866,7 +9719,7 @@
       _iterator.f();
     }
     if (isError) {
-      setWidgetErrorTips(path, true, errorMsg);
+      setWidgetErrorTips(path, true, errorMsg, widgetTree);
       return {
         result: false,
         message: errorMsg,
@@ -9882,24 +9735,24 @@
   /**
    * 校验整个表单
    */
-  var validateForm = function validateForm() {
+  var validateForm = function validateForm(widgetTree) {
     var isValid = true;
     Object.keys(widgetTree.widgetMap).forEach(function (path) {
       var _validateFormItem;
-      if (!((_validateFormItem = validateFormItem(path)) !== null && _validateFormItem !== void 0 && _validateFormItem.result)) isValid = false;
+      if (!((_validateFormItem = validateFormItem(path, widgetTree)) !== null && _validateFormItem !== void 0 && _validateFormItem.result)) isValid = false;
     });
     return isValid;
   };
   /**
    * 校验表单（抛出具体错误信息）
    */
-  var validateFormWithResult = function validateFormWithResult() {
+  var validateFormWithResult = function validateFormWithResult(widgetTree) {
     return new Promise(function (resolve, reject) {
       var result = Object.keys(widgetTree.widgetMap).filter(function (path) {
         var _widgetTree$widgetMap;
         return ((_widgetTree$widgetMap = widgetTree.widgetMap[path]) === null || _widgetTree$widgetMap === void 0 ? void 0 : _widgetTree$widgetMap.type) === 'node';
       }).reduce(function (pre, path) {
-        var validateResult = validateFormItem(path);
+        var validateResult = validateFormItem(path, widgetTree);
         if (!(validateResult !== null && validateResult !== void 0 && validateResult.result)) {
           pre.push(validateResult);
         }
@@ -9942,8 +9795,8 @@
    * 触发校验
    * @param path 字段路径
    */
-  var dispatchValidate = function dispatchValidate(path) {
-    return validateFormItem(path);
+  var dispatchValidate = function dispatchValidate(path, widgetTree) {
+    return validateFormItem(path, widgetTree);
   };
 
   // 事件订阅器
@@ -10033,6 +9886,7 @@
   var Widget = Vue__default["default"].extend({
     name: 'Widget',
     props: props,
+    inject: ['widgetTree'],
     data: function data() {
       return {
         loading: false,
@@ -10051,10 +9905,10 @@
     },
     computed: {
       widgetMap: function widgetMap() {
-        return widgetTree.widgetMap;
+        return this.widgetTree.widgetMap;
       },
       widgetNode: function widgetNode() {
-        return widgetTree.widgetMap[this.path];
+        return this.widgetTree.widgetMap[this.path];
       },
       parent: function parent() {
         var _this$widgetNode;
@@ -10072,7 +9926,7 @@
           if (!deepEquals(newValue, oldValue)) {
             setTimeout(function () {
               reactionDispatch(_this.path, 'valChange');
-              dispatchValidate(_this.path);
+              dispatchValidate(_this.path, _this.widgetTree);
             }, 0);
           }
         }
@@ -10104,17 +9958,17 @@
         }
       });
       // 注册widget TreeNode
-      widgetTree.addWidgetNode(this.path, this, 'node');
+      this.widgetTree.addWidgetNode(this.path, this, 'node');
     },
     mounted: function mounted() {
       // 注册联动
-      reactionRegister(this.path, this.widgetSchema['ui:reactions']);
+      reactionRegister(this.path, this.widgetSchema['ui:reactions'], this.widgetTree);
       // 首次联动
       reactionDispatch(this.path, 'valChange');
       reactionDispatch(this.path, 'lifetime/init');
     },
     beforeDestroy: function beforeDestroy() {
-      widgetTree.removeWidgetNode(this.path, this);
+      this.widgetTree.removeWidgetNode(this.path, this);
       reactionUnRegister(this.path);
     },
     methods: {
@@ -10233,7 +10087,14 @@
       }
     },
     render: function render(h) {
-      var _events$callbacks, _this$$scopedSlots$de, _this$$scopedSlots$de2, _this$$scopedSlots, _this$widgetSchema$ui5, _this$$scopedSlots$su, _this$$scopedSlots2;
+      var _events$callbacks,
+        _this$$scopedSlots$de,
+        _this$$scopedSlots$de2,
+        _this$$scopedSlots,
+        _this5 = this,
+        _this$widgetSchema$ui5,
+        _this$$scopedSlots$su,
+        _this$$scopedSlots2;
       var _Schema$getUiComponen = Schema.getUiComponent(this.widgetSchema),
         name = _Schema$getUiComponen.name,
         uiVnodeData = _objectWithoutProperties(_Schema$getUiComponen, _excluded2);
@@ -10263,6 +10124,7 @@
               path: self.path,
               value: value
             });
+            reactionDispatch(self.path, 'effect/update');
           }]),
           click: function click() {
             reactionDispatch(self.path, 'effect/click');
@@ -10282,7 +10144,10 @@
       // 渲染删除按钮（用于数组类型widget删除）
       var renderDelete = function renderDelete() {
         return h('span', {
-          class: ['bk-schema-form-group-delete'],
+          class: ['bk-schema-form-group-delete', {
+            disabled: _this5.disabled,
+            readonly: _this5.readonly
+          }],
           style: {
             right: '0px',
             top: '0px'
@@ -10403,10 +10268,12 @@
 
   var messages = {
     'zh-CN': {
-      add: '添加'
+      add: '添加',
+      required: '必填项'
     },
     'en-US': {
-      add: 'Add'
+      add: 'Add',
+      required: 'Required'
     }
   };
   function locale(item) {
@@ -10445,6 +10312,7 @@
       },
       // 添加item
       handleAddItem: function handleAddItem() {
+        if (this.disabled || this.readonly) return;
         var data = Schema.getSchemaDefaultValue(this.schema.items);
         var value = JSON.parse(JSON.stringify(this.value || []));
         value.push(data);
@@ -10455,6 +10323,7 @@
       },
       // 删除item
       handleDeleteItem: function handleDeleteItem(path) {
+        if (this.disabled || this.readonly) return;
         var index = Number(Path.getPathLastProp(path));
         var value = JSON.parse(JSON.stringify(this.value || []));
         value.splice(index, 1);
@@ -10465,7 +10334,13 @@
       }
     },
     render: function render(h) {
-      var _this = this;
+      var _this = this,
+        _self$value,
+        _this$schema,
+        _this$schema$uiProps,
+        _this$schema2,
+        _this$schema3,
+        _this$schema3$uiProp;
       var self = this;
       var arrVnodeList = (Array.isArray(this.value) ? this.value : []).map(function (_, index) {
         var curPath = Path.getCurPath(_this.path, index);
@@ -10489,18 +10364,24 @@
       var _Schema$getGroupWrap = Schema.getGroupWrap(this.schema),
         name = _Schema$getGroupWrap.name,
         vnode = _objectWithoutProperties(_Schema$getGroupWrap, _excluded$2);
+      var error = ((_self$value = self.value) === null || _self$value === void 0 ? void 0 : _self$value.length) === 0 && self.required;
       return h(name, mergeDeep({
         props: _objectSpread2(_objectSpread2({}, this.$props), {}, {
           layout: {},
           showTitle: true // 数组类型默认展示分组title
         }),
         style: _objectSpread2({}, this.layout.item || {})
-      }, vnode), [].concat(_toConsumableArray(arrVnodeList), [h(registry.getBaseWidget('form-item'), {
+      }, vnode), [].concat(_toConsumableArray(arrVnodeList), [!this.readonly ? h(registry.getBaseWidget('form-item'), {
         class: {
           'bk-schema-form-item-auto-height': true
         }
       }, [h('span', {
-        class: ['bk-schema-form-group-add'],
+        class: ['bk-schema-form-group-add', {
+          'error': error
+        }, (_this$schema = this.schema) === null || _this$schema === void 0 ? void 0 : (_this$schema$uiProps = _this$schema['ui:props']) === null || _this$schema$uiProps === void 0 ? void 0 : _this$schema$uiProps.size, {
+          disabled: this.disabled,
+          readonly: this.readonly
+        }],
         on: {
           click: function click() {
             self.handleAddItem();
@@ -10508,7 +10389,9 @@
         }
       }, [h('i', {
         class: ['bk-icon icon-plus-circle-shape mr5']
-      }), locale('add')])])]));
+      }), "".concat(locale('add')).concat(((_this$schema2 = this.schema) === null || _this$schema2 === void 0 ? void 0 : _this$schema2.title) || '')]), error && ((_this$schema3 = this.schema) === null || _this$schema3 === void 0 ? void 0 : (_this$schema3$uiProp = _this$schema3['ui:props']) === null || _this$schema3$uiProp === void 0 ? void 0 : _this$schema3$uiProp.size) === 'large' && h('p', {
+        class: ['bk-schema-form-item__error-tips']
+      }, [locale('required')])]) : null]));
     }
   });
 
@@ -10919,6 +10802,7 @@
   var TableWidget = Vue__default["default"].extend({
     name: 'TableWidget',
     props: props,
+    inject: ['widgetTree'],
     watch: {
       value: {
         immediate: true,
@@ -10928,9 +10812,9 @@
           (_this$value = this.value) === null || _this$value === void 0 ? void 0 : _this$value.forEach(function (_, index) {
             var path = "".concat(_this.path, ".").concat(index);
             // 销毁上一次的缓存
-            widgetTree.removeWidgetNode(path, null);
+            _this.widgetTree.removeWidgetNode(path, null);
             // 重新当前行的父节点
-            widgetTree.addWidgetNode(path, null, 'group');
+            _this.widgetTree.addWidgetNode(path, null, 'group');
           });
         }
       }
@@ -10977,7 +10861,19 @@
       }
       var uiOptions = Schema.getUiOptions(schema);
       var getTableColumn = function getTableColumn() {
-        var VNodeList = Object.keys(properties).map(function (key) {
+        // 表格列排序优先取 ui:order 属性里配置的顺序
+        var colKeys = Object.keys(properties);
+        var orders = (schemaItems === null || schemaItems === void 0 ? void 0 : schemaItems['ui:order']) || [];
+        var orderMap = new Map();
+        orders.forEach(function (key, index) {
+          orderMap.set(key, index);
+        });
+        colKeys.sort(function (a, b) {
+          var orderA = orderMap.has(a) ? orderMap.get(a) : Infinity;
+          var orderB = orderMap.has(b) ? orderMap.get(b) : Infinity;
+          return orderA - orderB;
+        });
+        var VNodeList = colKeys.map(function (key) {
           var _colField$uiProps, _colField$uiProps2;
           var colField = properties[key];
           // 仅支持基础数据类型的属性配置，render-header、sort-method、formatter等Function类型的属性不属于json支持的数据类型，配置将不会生效
@@ -11099,6 +10995,7 @@
 
   var FieldGroupWrap = Vue__default["default"].extend({
     name: 'FieldGroupWrap',
+    inject: ['widgetTree'],
     props: _objectSpread2(_objectSpread2({}, props), {}, {
       // 组类型
       type: {
@@ -11125,6 +11022,10 @@
       hideEmptyRow: {
         type: Boolean,
         default: false
+      },
+      description: {
+        type: String,
+        default: ''
       }
     }),
     data: function data() {
@@ -11138,14 +11039,14 @@
     },
     created: function created() {
       // 注册widget TreeNode
-      widgetTree.addWidgetNode(this.path, this, 'group');
+      this.widgetTree.addWidgetNode(this.path, this, 'group');
     },
     mounted: function mounted() {
       // 更新样式
       this.$forceUpdate();
     },
     beforeDestroy: function beforeDestroy() {
-      widgetTree.removeWidgetNode(this.path, this);
+      this.widgetTree.removeWidgetNode(this.path, this);
     },
     methods: {
       setState: function setState(key, value) {
@@ -11168,9 +11069,9 @@
     render: function render(h) {
       var _this$layout,
         _this$layout2,
+        _this = this,
         _this$schema,
-        _this$layout3,
-        _this = this;
+        _this$layout3;
       var schemaFormStyle = _objectSpread2({
         position: 'relative',
         border: this.border ? '1px solid #dcdee5' : 'none',
@@ -11183,7 +11084,10 @@
       var self = this;
       var renderDelete = function renderDelete() {
         return h('span', {
-          class: ['bk-schema-form-group-delete'],
+          class: ['bk-schema-form-group-delete', {
+            disabled: _this.disabled,
+            readonly: _this.readonly
+          }],
           style: {
             right: '10px',
             top: '10px'
@@ -11210,7 +11114,14 @@
         }],
         "style": schemaFormStyle
       }, [title && this.showTitle ? h("span", {
-        "class": ['bk-schema-form-group-title', this.type]
+        "directives": [{
+          name: "bk-tooltips",
+          value: this.description
+        }],
+        "class": ['bk-schema-form-group-title', this.type, {
+          'group-has-desc': !!this.description,
+          'is-required': this.required
+        }]
       }, [title, hasError ? h("span", {
         "class": "bk-schema-form-group__error-tips"
       }, [h("span", {
@@ -11218,7 +11129,7 @@
       }, [groupErrorTipsContent])]) : null]) : null, h("div", {
         "style": groupContentStyle,
         "class": "bk-schema-form-group-content"
-      }, [this.$slots.default]), this.removeable && renderDelete()]);
+      }, [this.$slots.default]), this.removeable && !this.readonly && renderDelete()]);
     }
   });
 
@@ -11241,12 +11152,12 @@
     },
     methods: {
       handleAddItem: function handleAddItem() {
-        if (this.disabled) return;
+        if (this.disabled || this.readonly) return;
         var data = Schema.getSchemaDefaultValue(this.schema.items);
         this.$emit('input', [].concat(_toConsumableArray(this.value), [data]));
       },
       handleRemoveItem: function handleRemoveItem(index) {
-        if (this.disabled) return;
+        if (this.disabled || this.readonly) return;
         var value = JSON.parse(JSON.stringify(this.value));
         value.splice(index, 1);
         this.$emit('input', value);
@@ -11269,7 +11180,7 @@
         _this$value2;
       var labelBtnStyle = {
         'font-size': '16px',
-        color: '#979ba5',
+        color: this.disabled ? '#c4c6cc' : '#979ba5',
         cursor: this.disabled ? 'not-allowed' : 'pointer',
         display: 'inline-block'
       };
@@ -11448,10 +11359,7 @@
     props: _objectSpread2(_objectSpread2({}, props), {}, {
       type: {
         type: String,
-        default: 'default',
-        validator: function validator(value) {
-          return ['default', 'normal', 'card'].includes(value);
-        }
+        default: 'default' // 'default', 'normal', 'card'
       },
       showTitle: {
         type: Boolean,
@@ -11470,6 +11378,10 @@
       verifiable: {
         type: Boolean,
         default: false
+      },
+      collapseStyle: {
+        type: String,
+        default: 'normal' // normal: 修改后的样式参看BCS，default: 组件样式
       }
     }),
     data: function data() {
@@ -11480,7 +11392,6 @@
     render: function render(h) {
       var _this$schema,
         _this = this;
-      var collapseStyle = {};
       var collapseTitleStyle = {
         background: '#f5f7fa',
         'border-radius': '2px',
@@ -11513,9 +11424,9 @@
             hideArrow: true,
             name: key
           },
-          class: ['mb15']
+          class: _this.collapseStyle === 'normal' ? ['mb15'] : []
         }, [h('div', {
-          style: collapseTitleStyle
+          style: _this.collapseStyle === 'normal' ? collapseTitleStyle : {}
         }, [h('i', {
           class: ['bk-icon icon-down-shape mr5'],
           style: _objectSpread2(_objectSpread2({}, collapseIconStyle), {}, {
@@ -11539,7 +11450,7 @@
       return h(FieldGroupWrap, {
         props: _objectSpread2({}, groupWrapProps)
       }, [h(registry.getBaseWidget('collapse'), {
-        style: collapseStyle,
+        class: this.collapseStyle,
         props: {
           value: this.activeName
         },
@@ -11648,6 +11559,114 @@
     }
   });
 
+  var UploadWidget = Vue__default["default"].extend({
+    name: 'UploadWidget',
+    props: {
+      value: {
+        type: Array,
+        default: function _default() {
+          return [];
+        }
+      },
+      isUploadSuccessed: {
+        type: String
+      },
+      responseHandler: {
+        type: String
+      }
+    },
+    methods: {
+      request: function request(options) {
+        var _this = this;
+        var xhr = new XMLHttpRequest();
+        options.fileObj.xhr = xhr;
+        var formData = new FormData();
+        options.data.forEach(function (item) {
+          formData.append(item.name, executeExpression(item.value, _this.$parent.$parent));
+        });
+        formData.append(options.fileName, options.fileObj.origin);
+        xhr.onreadystatechange = function () {
+          if (xhr.readyState === 4) {
+            var reponseText = _this.parseResponse(xhr.responseText || xhr.response);
+            if (xhr.status < 200 || xhr.status >= 300) {
+              options.fileObj.progress = 100 + '%';
+              options.fileObj.errorMsg = reponseText.message || '上传失败';
+              options.onError(options.fileObj, options.fileList, xhr.response);
+            } else {
+              options.onSuccess(reponseText, options.fileObj);
+            }
+            options.onDone(options.fileObj);
+          }
+        };
+        xhr.upload.addEventListener('progress', options.onProgress, false);
+        xhr.withCredentials = options.withCredentials;
+        xhr.open(options.method, options.url, true);
+        if (options.header) {
+          if (Array.isArray(options.header)) {
+            options.header.forEach(function (head) {
+              var headerKey = head.name;
+              var headerVal = executeExpression(head.value, _this.$parent.$parent);
+              xhr.setRequestHeader(headerKey, headerVal);
+            });
+          } else {
+            var headerKey = options.header.name;
+            var headerVal = executeExpression(options.header.value, this.$parent.$parent);
+            xhr.setRequestHeader(headerKey, headerVal);
+          }
+        }
+        xhr.send(formData);
+        return {
+          abort: function abort() {
+            xhr.abort();
+          }
+        };
+      },
+      parseResponse: function parseResponse(response) {
+        if (!response) {
+          return response || {};
+        }
+        try {
+          return JSON.parse(response);
+        } catch (error) {
+          return response || {};
+        }
+      },
+      handleResCode: function handleResCode(res) {
+        var successed = true;
+        if (this.isUploadSuccessed) {
+          successed = executeExpression(this.isUploadSuccessed, this.$parent.$parent, [], {
+            response: res
+          });
+        }
+        if (!successed) return;
+        if (this.responseHandler) {
+          var files = executeExpression(this.responseHandler, this.$parent.$parent, [], {
+            response: res
+          });
+          this.$emit('input', files);
+        }
+        return true;
+      },
+      handleSuccess: function handleSuccess(file, fileList) {
+        if (!this.responseHandler) {
+          this.$emit('input', fileList);
+        }
+      }
+    },
+    render: function render(h) {
+      return h(registry.getBaseWidget('upload'), {
+        props: _objectSpread2({
+          customRequest: this.request,
+          files: this.value,
+          handleResCode: this.handleResCode
+        }, this.$attrs),
+        on: {
+          'on-success': this.handleSuccess
+        }
+      });
+    }
+  });
+
   function styleInject(css, ref) {
     if ( ref === void 0 ) ref = {};
     var insertAt = ref.insertAt;
@@ -11678,6 +11697,197 @@
   var css_248z = "";
   styleInject(css_248z);
 
+  var WidgetNode = /*#__PURE__*/function () {
+    function WidgetNode(config) {
+      _classCallCheck(this, WidgetNode);
+      this.id = void 0;
+      this.instance = void 0;
+      this.parent = void 0;
+      this.type = void 0;
+      this.index = void 0;
+      // todo
+      this.children = void 0;
+      var id = config.id,
+        instance = config.instance,
+        parent = config.parent,
+        index = config.index,
+        type = config.type,
+        _config$children = config.children,
+        children = _config$children === void 0 ? [] : _config$children;
+      this.id = id;
+      this.type = type;
+      this.index = index;
+      this.instance = instance;
+      this.parent = parent;
+      this.children = children;
+    }
+    // 当前node的值
+    return _createClass(WidgetNode, [{
+      key: "value",
+      get: function get() {
+        var _this$instance;
+        return (_this$instance = this.instance) === null || _this$instance === void 0 ? void 0 : _this$instance.value;
+      }
+      // 是否含有可见子节点
+    }, {
+      key: "isChildrenVisible",
+      get: function get() {
+        if (this.type === 'node') {
+          var _this$instance2;
+          return (_this$instance2 = this.instance) === null || _this$instance2 === void 0 ? void 0 : _this$instance2.state.visible;
+        }
+        return this.children.some(function (child) {
+          return child.isChildrenVisible;
+        });
+      }
+      /**
+       * 获取 parents
+       */
+    }, {
+      key: "parents",
+      get: function get() {
+        if (!this.parent) {
+          return [];
+        }
+        return [].concat(_toConsumableArray(this.parent.parents), [this.parent]);
+      }
+      // 第一个子节点
+    }, {
+      key: "firstChild",
+      get: function get() {
+        return this.children[0] || null;
+      }
+      // 最后一个子节点
+    }, {
+      key: "lastChild",
+      get: function get() {
+        return this.children[this.children.length - 1] || null;
+      }
+      // 指定属性下的同胞节点
+    }, {
+      key: "getSibling",
+      value: function getSibling(lastProp) {
+        var _this$parent;
+        var reg = new RegExp("".concat(Path.getPathLastProp(this.id) || '', "$"));
+        var id = this.id.replace(reg, lastProp);
+        return (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.children.find(function (node) {
+          return node.id === id;
+        });
+      }
+      // 获取所以同胞节点（不含自己）
+    }, {
+      key: "getSiblings",
+      value: function getSiblings() {
+        var _this$parent2,
+          _this = this;
+        return ((_this$parent2 = this.parent) === null || _this$parent2 === void 0 ? void 0 : _this$parent2.children.filter(function (node) {
+          return node.instance !== _this.instance;
+        })) || [];
+      }
+      /**
+       * 是否是叶子节点
+       */
+    }, {
+      key: "isLeaf",
+      get: function get() {
+        return !this.children.length;
+      }
+    }, {
+      key: "appendChild",
+      value: function appendChild(node) {
+        var _this$children;
+        var nodes = Array.isArray(node) ? node : [node];
+        var offset = node.index !== undefined ? node.index : this.children.length;
+        (_this$children = this.children).splice.apply(_this$children, [offset, 0].concat(_toConsumableArray(nodes)));
+        this.children.slice(offset).forEach(function (node, index) {
+          node.index = offset + index;
+        });
+        return nodes;
+      }
+    }, {
+      key: "removeChild",
+      value: function removeChild(node) {
+        var _this2 = this;
+        var nodes = Array.isArray(node) ? node : [node];
+        var removedChildIndex = [];
+        nodes.forEach(function (node) {
+          var index = node.index;
+          removedChildIndex.push(index);
+          _this2.children.splice(index, 1);
+        });
+        var minIndex = Math.min.apply(Math, removedChildIndex);
+        this.children.slice(minIndex).forEach(function (node, index) {
+          node.index = minIndex + index;
+        });
+        return nodes;
+      }
+    }]);
+  }();
+  var WidgetTree = /*#__PURE__*/function () {
+    function WidgetTree() {
+      _classCallCheck(this, WidgetTree);
+      this.widgetMap = {};
+    }
+    return _createClass(WidgetTree, [{
+      key: "addWidgetNode",
+      value: function addWidgetNode(path, instance, type, index) {
+        if (path === '') {
+          // 根节点
+          var node = new WidgetNode({
+            id: '',
+            type: type,
+            index: index,
+            parent: null,
+            instance: instance,
+            children: []
+          });
+          this.widgetMap[path] = node;
+        } else {
+          // 普通节点
+          var parentId = Path.getParentPath(path);
+          var parentNode = this.widgetMap[parentId];
+          var _node = new WidgetNode({
+            id: (instance === null || instance === void 0 ? void 0 : instance.path) || path,
+            type: type,
+            index: index,
+            parent: parentNode,
+            instance: instance,
+            children: []
+          });
+          if (!parentNode) {
+            console.warn('Unexpected parent id, please check widget node', _node);
+          } else {
+            parentNode.appendChild(_node);
+          }
+          this.widgetMap[path] = _node;
+        }
+      }
+    }, {
+      key: "removeWidgetNode",
+      value: function removeWidgetNode(path, instance) {
+        var node = this.widgetMap[path];
+        if (node) {
+          if (node.parent) {
+            var children = node.parent.children;
+            var index = children.findIndex(function (item) {
+              return item.instance === instance;
+            });
+            if (index > -1) {
+              children.splice(index, 1);
+              children.slice(index).forEach(function (node, i) {
+                node.index = index + i;
+              });
+            }
+          }
+          if (node.instance === instance) {
+            delete this.widgetMap[path];
+          }
+        }
+      }
+    }]);
+  }();
+  // export default new WidgetTree();
+
   var defaultOptions = {
     namespace: 'bk',
     components: {
@@ -11693,7 +11903,8 @@
       switcher: SwitcherWidget,
       color: ColorWidget,
       bfInput: InputWidget,
-      input: 'bk-input'
+      input: 'bk-input',
+      bfUpload: UploadWidget
     },
     fields: {
       object: ObjectField,
@@ -11725,7 +11936,8 @@
       data: function data() {
         return {
           rootData: {},
-          formKey: 'bk-ui-form'
+          formKey: 'bk-ui-form',
+          widgetTree: new WidgetTree()
         };
       },
       watch: {
@@ -11750,8 +11962,11 @@
             registryGlobalRules(value);
           }
         },
-        value: function value() {
-          this.initFormData();
+        value: {
+          handler: function handler() {
+            this.initFormData();
+          },
+          deep: true
         }
       },
       beforeCreate: function beforeCreate() {
@@ -11773,9 +11988,15 @@
             this.$emit('change', newValue, oldValue);
           }
         },
-        validateForm: validateForm,
-        validateFormItem: validateFormItem,
-        validate: validateFormWithResult,
+        validateForm: function validateForm$1() {
+          return validateForm(this.widgetTree);
+        },
+        validateFormItem: function validateFormItem$1(path) {
+          return validateFormItem(path, this.widgetTree);
+        },
+        validate: function validate() {
+          return validateFormWithResult(this.widgetTree);
+        },
         validateSchema: validateSchema
       },
       render: function render(h) {
@@ -11818,6 +12039,11 @@
             }
           }
         })]);
+      },
+      provide: function provide() {
+        return {
+          widgetTree: this.widgetTree
+        };
       }
     });
   }