@blueking/bkui-form 0.0.42 → 0.0.43

package/dist/bkui-form-es.js

@@ -634,16 +634,25 @@ function mergeDeep(target) {
   }
   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) {
@@ -836,7 +845,6 @@ var Registry = /*#__PURE__*/function () {
           key = _ref2[0],
           value = _ref2[1];
         if (_this[props].has(key)) {
-          console.warn('repeat key', key);
           return;
         }
         _this[props].set(key, value);
@@ -1535,6 +1543,10 @@ var props$1 = {
     type: Boolean,
     default: false
   },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
   readonlyMode: {
     type: String,
     default: 'value',
@@ -1661,7 +1673,6 @@ var SchemaField = Vue.extend({
   }
 });
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 // 组件对外暴露的上下文
 var getContext = function getContext(instance) {
   var context = instance.context,
@@ -1669,7 +1680,8 @@ var getContext = function getContext(instance) {
     validate = instance.validate,
     schema = instance.schema,
     rootData = instance.rootData,
-    widgetNode = instance.widgetNode;
+    widgetNode = instance.widgetNode,
+    getValue = instance.getValue;
   return {
     $self: instance,
     $context: context,
@@ -1678,11 +1690,33 @@ var getContext = function getContext(instance) {
     $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,
@@ -1691,7 +1725,9 @@ var executeExpression = function executeExpression(expression, instance) {
     $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,
@@ -1701,8 +1737,12 @@ var executeExpression = function executeExpression(expression, instance) {
     $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, '') // 去掉{{ }}
@@ -1718,6 +1758,9 @@ var executeExpression = function executeExpression(expression, instance) {
         _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);
@@ -1738,197 +1781,6 @@ var isExpression = function isExpression(expression) {
   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]) {
@@ -1960,7 +1812,7 @@ var subscribe = function subscribe(path, typeName, fn) {
  * @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; // 当前组件实例，用来条件表达式判断
@@ -2005,6 +1857,7 @@ var parsePath = function parsePath(path, instance) {
 };
 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)) {
@@ -2016,13 +1869,13 @@ var reactionRegister = function reactionRegister(path) {
       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));
         }
       });
     });
@@ -9756,7 +9609,7 @@ var validate = function validate(rule, instance) {
   };
 };
 // 设置表单项校验状态
-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') {
@@ -9789,7 +9642,7 @@ var setWidgetErrorTips = function setWidgetErrorTips(path, isError, errorMsg) {
  * 校验单个表单项
  * @param path 字段路径
  */
-var validateFormItem = function validateFormItem(path) {
+var validateFormItem = function validateFormItem(path, widgetTree) {
   var _instance$schema;
   // TODO 校验逻辑梳理
   var formItem = widgetTree.widgetMap[path];
@@ -9829,7 +9682,7 @@ var validateFormItem = function validateFormItem(path) {
     var errorsText = ajv.errorsText(schemaValidate.errors, {
       separator: '\n'
     });
-    setWidgetErrorTips(path, true, errorsText);
+    setWidgetErrorTips(path, true, errorsText, widgetTree);
     return {
       result: false,
       message: errorsText,
@@ -9858,7 +9711,7 @@ var validateFormItem = function validateFormItem(path) {
     _iterator.f();
   }
   if (isError) {
-    setWidgetErrorTips(path, true, errorMsg);
+    setWidgetErrorTips(path, true, errorMsg, widgetTree);
     return {
       result: false,
       message: errorMsg,
@@ -9874,24 +9727,24 @@ var validateFormItem = function validateFormItem(path) {
 /**
  * 校验整个表单
  */
-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);
       }
@@ -9934,8 +9787,8 @@ var validateSchema = /*#__PURE__*/function () {
  * 触发校验
  * @param path 字段路径
  */
-var dispatchValidate = function dispatchValidate(path) {
-  return validateFormItem(path);
+var dispatchValidate = function dispatchValidate(path, widgetTree) {
+  return validateFormItem(path, widgetTree);
 };
 
 // 事件订阅器
@@ -10025,6 +9878,7 @@ var _excluded$4 = ["url", "params"],
 var Widget = Vue.extend({
   name: 'Widget',
   props: props,
+  inject: ['widgetTree'],
   data: function data() {
     return {
       loading: false,
@@ -10043,10 +9897,10 @@ var Widget = Vue.extend({
   },
   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;
@@ -10064,7 +9918,7 @@ var Widget = Vue.extend({
         if (!deepEquals(newValue, oldValue)) {
           setTimeout(function () {
             reactionDispatch(_this.path, 'valChange');
-            dispatchValidate(_this.path);
+            dispatchValidate(_this.path, _this.widgetTree);
           }, 0);
         }
       }
@@ -10096,17 +9950,17 @@ var Widget = Vue.extend({
       }
     });
     // 注册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: {
@@ -10225,7 +10079,14 @@ var Widget = Vue.extend({
     }
   },
   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);
@@ -10255,6 +10116,7 @@ var Widget = Vue.extend({
             path: self.path,
             value: value
           });
+          reactionDispatch(self.path, 'effect/update');
         }]),
         click: function click() {
           reactionDispatch(self.path, 'effect/click');
@@ -10274,7 +10136,10 @@ var Widget = Vue.extend({
     // 渲染删除按钮（用于数组类型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'
@@ -10395,10 +10260,12 @@ var NumberField = Vue.extend({
 
 var messages = {
   'zh-CN': {
-    add: '添加'
+    add: '添加',
+    required: '必填项'
   },
   'en-US': {
-    add: 'Add'
+    add: 'Add',
+    required: 'Required'
   }
 };
 function locale(item) {
@@ -10437,6 +10304,7 @@ var ArrayWidget = Vue.extend({
     },
     // 添加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);
@@ -10447,6 +10315,7 @@ var ArrayWidget = Vue.extend({
     },
     // 删除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);
@@ -10457,7 +10326,13 @@ var ArrayWidget = Vue.extend({
     }
   },
   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);
@@ -10481,18 +10356,24 @@ var ArrayWidget = Vue.extend({
     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();
@@ -10500,7 +10381,9 @@ var ArrayWidget = Vue.extend({
       }
     }, [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]));
   }
 });
 
@@ -10911,6 +10794,7 @@ var getRowDefaultData = function getRowDefaultData() {
 var TableWidget = Vue.extend({
   name: 'TableWidget',
   props: props,
+  inject: ['widgetTree'],
   watch: {
     value: {
       immediate: true,
@@ -10920,9 +10804,9 @@ var TableWidget = Vue.extend({
         (_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');
         });
       }
     }
@@ -10969,7 +10853,19 @@ var TableWidget = Vue.extend({
     }
     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支持的数据类型，配置将不会生效
@@ -11091,6 +10987,7 @@ var TableWidget = Vue.extend({
 
 var FieldGroupWrap = Vue.extend({
   name: 'FieldGroupWrap',
+  inject: ['widgetTree'],
   props: _objectSpread2(_objectSpread2({}, props), {}, {
     // 组类型
     type: {
@@ -11117,6 +11014,10 @@ var FieldGroupWrap = Vue.extend({
     hideEmptyRow: {
       type: Boolean,
       default: false
+    },
+    description: {
+      type: String,
+      default: ''
     }
   }),
   data: function data() {
@@ -11130,14 +11031,14 @@ var FieldGroupWrap = Vue.extend({
   },
   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) {
@@ -11160,9 +11061,9 @@ var FieldGroupWrap = Vue.extend({
   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',
@@ -11175,7 +11076,10 @@ var FieldGroupWrap = Vue.extend({
     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'
@@ -11202,7 +11106,14 @@ var FieldGroupWrap = Vue.extend({
       }],
       "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", {
@@ -11210,7 +11121,7 @@ var FieldGroupWrap = Vue.extend({
     }, [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()]);
   }
 });
 
@@ -11233,12 +11144,12 @@ var KeyValueArrayWidget = Vue.extend({
   },
   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);
@@ -11261,7 +11172,7 @@ var KeyValueArrayWidget = Vue.extend({
       _this$value2;
     var labelBtnStyle = {
       'font-size': '16px',
-      color: '#979ba5',
+      color: this.disabled ? '#c4c6cc' : '#979ba5',
       cursor: this.disabled ? 'not-allowed' : 'pointer',
       display: 'inline-block'
     };
@@ -11440,10 +11351,7 @@ var CollapseGroupWidget = Vue.extend({
   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,
@@ -11462,6 +11370,10 @@ var CollapseGroupWidget = Vue.extend({
     verifiable: {
       type: Boolean,
       default: false
+    },
+    collapseStyle: {
+      type: String,
+      default: 'normal' // normal: 修改后的样式参看BCS，default: 组件样式
     }
   }),
   data: function data() {
@@ -11472,7 +11384,6 @@ var CollapseGroupWidget = Vue.extend({
   render: function render(h) {
     var _this$schema,
       _this = this;
-    var collapseStyle = {};
     var collapseTitleStyle = {
       background: '#f5f7fa',
       'border-radius': '2px',
@@ -11505,9 +11416,9 @@ var CollapseGroupWidget = Vue.extend({
           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), {}, {
@@ -11531,7 +11442,7 @@ var CollapseGroupWidget = Vue.extend({
     return h(FieldGroupWrap, {
       props: _objectSpread2({}, groupWrapProps)
     }, [h(registry.getBaseWidget('collapse'), {
-      style: collapseStyle,
+      class: this.collapseStyle,
       props: {
         value: this.activeName
       },
@@ -11640,6 +11551,114 @@ var InputWidget = Vue.extend({
   }
 });
 
+var UploadWidget = Vue.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;
@@ -11670,6 +11689,197 @@ function styleInject(css, ref) {
 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: {
@@ -11685,7 +11895,8 @@ var defaultOptions = {
     switcher: SwitcherWidget,
     color: ColorWidget,
     bfInput: InputWidget,
-    input: 'bk-input'
+    input: 'bk-input',
+    bfUpload: UploadWidget
   },
   fields: {
     object: ObjectField,
@@ -11717,7 +11928,8 @@ function createForm() {
     data: function data() {
       return {
         rootData: {},
-        formKey: 'bk-ui-form'
+        formKey: 'bk-ui-form',
+        widgetTree: new WidgetTree()
       };
     },
     watch: {
@@ -11742,8 +11954,11 @@ function createForm() {
           registryGlobalRules(value);
         }
       },
-      value: function value() {
-        this.initFormData();
+      value: {
+        handler: function handler() {
+          this.initFormData();
+        },
+        deep: true
       }
     },
     beforeCreate: function beforeCreate() {
@@ -11765,9 +11980,15 @@ function createForm() {
           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) {
@@ -11810,6 +12031,11 @@ function createForm() {
           }
         }
       })]);
+    },
+    provide: function provide() {
+      return {
+        widgetTree: this.widgetTree
+      };
     }
   });
 }