@blueking/bkui-form 0.0.40 → 0.0.41-beta.1

package/dist/bkui-form-es.js

@@ -1931,19 +1931,19 @@ var WidgetTree = /*#__PURE__*/function () {
         // 普通节点
         var parentId = Path.getParentPath(path);
         var parentNode = this.widgetMap[parentId];
-        if (!parentNode) {
-          console.warn('Unexpected parent id, add widget failed');
-          return;
-        }
         var _node = new WidgetNode({
-          id: instance.path,
+          id: (instance === null || instance === void 0 ? void 0 : instance.path) || path,
           type: type,
           index: index,
           parent: parentNode,
           instance: instance,
           children: []
         });
-        parentNode.appendChild(_node);
+        if (!parentNode) {
+          console.warn('Unexpected parent id, please check widget node', _node);
+        } else {
+          parentNode.appendChild(_node);
+        }
         this.widgetMap[path] = _node;
       }
     }
@@ -9813,13 +9813,14 @@ var setWidgetErrorTips = function setWidgetErrorTips(path, isError, errorMsg) {
   var widgetPaths = path.split('.');
   var fieldTitleBreadcrumb = [];
   widgetPaths.forEach(function (thePath, thePathIndex) {
+    var _theWidget$instance;
     var currentPaths = widgetPaths.slice(0, widgetPaths.length - thePathIndex);
     var widgetPath = currentPaths.join('.');
     var theWidget = widgetTree.widgetMap[widgetPath];
     // todo（判断path是否是数组索引）
     var isIndex = theWidget.instance.schema.type === 'array' || !theWidget.instance.schema.title;
     fieldTitleBreadcrumb.push(isIndex ? currentPaths.pop() : theWidget.instance.schema.title);
-    if (theWidget.instance.verifiable && theWidget.type === 'group') {
+    if ((_theWidget$instance = theWidget.instance) !== null && _theWidget$instance !== void 0 && _theWidget$instance.verifiable && theWidget.type === 'group') {
       if (isError) {
         var groupErrors = "".concat(fieldTitleBreadcrumb.reverse().join('-'), ": ").concat(errorMsg);
         theWidget.instance.setGroupErrorTips(path, groupErrors);
@@ -9852,9 +9853,10 @@ var validateFormItem = function validateFormItem(path) {
     // 清空所在组错误信息
     var widgetPaths = path.split('.');
     widgetPaths.forEach(function (thePath, thePathIndex) {
+      var _theWidget$instance2;
       var currentPaths = widgetPaths.slice(0, widgetPaths.length - thePathIndex).join('.');
       var theWidget = widgetTree.widgetMap[currentPaths];
-      if (theWidget.instance.verifiable && theWidget.type === 'group') {
+      if ((_theWidget$instance2 = theWidget.instance) !== null && _theWidget$instance2 !== void 0 && _theWidget$instance2.verifiable && theWidget.type === 'group') {
         theWidget.instance.removeGroupErrorTips(path);
       }
     });
@@ -10080,16 +10082,25 @@ var Widget = Vue.extend({
         readonly: this.readonly,
         error: this.error
       },
-      errorTips: ''
+      errorTips: '',
+      privateSchema: {},
+      key: ''
     };
   },
   computed: {
+    widgetMap: function widgetMap() {
+      return widgetTree.widgetMap;
+    },
     widgetNode: function widgetNode() {
       return widgetTree.widgetMap[this.path];
     },
     parent: function parent() {
       var _this$widgetNode;
       return (_this$widgetNode = this.widgetNode) === null || _this$widgetNode === void 0 ? void 0 : _this$widgetNode.parent;
+    },
+    // 当前widget schema数据
+    widgetSchema: function widgetSchema() {
+      return mergeDeep({}, this.schema, this.privateSchema);
     }
   },
   watch: {
@@ -10103,19 +10114,27 @@ var Widget = Vue.extend({
           }, 0);
         }
       }
+    },
+    widgetSchema: {
+      deep: true,
+      handler: function handler(newValue, oldValue) {
+        if (deepEquals(newValue, oldValue)) return;
+        this.resetDatasource();
+        this.key = new Date().getTime();
+      }
     }
   },
   created: function created() {
     var _this2 = this;
     // 表单项配置
-    var uiOptions = Schema.getUiOptions(this.schema);
+    var uiOptions = Schema.getUiOptions(this.widgetSchema);
     this.formItemProps = _objectSpread2(_objectSpread2({}, uiOptions), {}, {
       // schema配置不存在title时默认用属性名作为title
       label: uiOptions.showTitle ? uiOptions.label || Path.getPathLastProp(this.path) : '',
       required: this.required
     });
     // 设置widget初始化状态 ui:component优先级 > ui:props优先级
-    var vNodeData = Schema.getUiComponent(this.schema);
+    var vNodeData = Schema.getUiComponent(this.widgetSchema);
     var defaultProps = Object.assign({}, this.formItemProps, vNodeData.props || {});
     Object.keys(defaultProps).forEach(function (key) {
       if (Reflect.has(_this2.state, key)) {
@@ -10127,7 +10146,7 @@ var Widget = Vue.extend({
   },
   mounted: function mounted() {
     // 注册联动
-    reactionRegister(this.path, this.schema['ui:reactions']);
+    reactionRegister(this.path, this.widgetSchema['ui:reactions']);
     // 首次联动
     reactionDispatch(this.path, 'valChange');
     reactionDispatch(this.path, 'lifetime/init');
@@ -10153,12 +10172,12 @@ var Widget = Vue.extend({
     loadDataSource: function loadDataSource() {
       var _this3 = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _this3$schema, _this3$schema$uiComp, _this3$schema$uiComp$;
+        var _this3$widgetSchema, _this3$widgetSchema$u, _this3$widgetSchema$u2;
         var xhrConfig, url, params, reset, _this3$httpAdapter, _this3$httpAdapter$re, http, responseParse, remoteURL, requestParams;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              xhrConfig = (_this3$schema = _this3.schema) === null || _this3$schema === void 0 ? void 0 : (_this3$schema$uiComp = _this3$schema['ui:component']) === null || _this3$schema$uiComp === void 0 ? void 0 : (_this3$schema$uiComp$ = _this3$schema$uiComp.props) === null || _this3$schema$uiComp$ === void 0 ? void 0 : _this3$schema$uiComp$.remoteConfig;
+              xhrConfig = (_this3$widgetSchema = _this3.widgetSchema) === null || _this3$widgetSchema === void 0 ? void 0 : (_this3$widgetSchema$u = _this3$widgetSchema['ui:component']) === null || _this3$widgetSchema$u === void 0 ? void 0 : (_this3$widgetSchema$u2 = _this3$widgetSchema$u.props) === null || _this3$widgetSchema$u2 === void 0 ? void 0 : _this3$widgetSchema$u2.remoteConfig;
               if (!xhrConfig) {
                 _context.next = 18;
                 break;
@@ -10198,11 +10217,11 @@ var Widget = Vue.extend({
       return Path.getPathVal(this.rootData, path);
     },
     getReadonlyValue: function getReadonlyValue() {
-      var _this$schema$uiCompo,
-        _this$schema$uiCompo$,
+      var _this$widgetSchema$ui,
+        _this$widgetSchema$ui2,
         _this4 = this;
       var val = this.value;
-      if (((_this$schema$uiCompo = this.schema['ui:component']) === null || _this$schema$uiCompo === void 0 ? void 0 : (_this$schema$uiCompo$ = _this$schema$uiCompo.props) === null || _this$schema$uiCompo$ === void 0 ? void 0 : _this$schema$uiCompo$.type) === 'password') {
+      if (((_this$widgetSchema$ui = this.widgetSchema['ui:component']) === null || _this$widgetSchema$ui === void 0 ? void 0 : (_this$widgetSchema$ui2 = _this$widgetSchema$ui.props) === null || _this$widgetSchema$ui2 === void 0 ? void 0 : _this$widgetSchema$ui2.type) === 'password') {
         val = '******';
       } else if (this.datasource) {
         var _this$datasource;
@@ -10214,7 +10233,7 @@ var Widget = Vue.extend({
         }
       }
       var value = val === '' ? '--' : val;
-      if (Object.prototype.call(value) === '[Object Object]') {
+      if (Object.prototype.toString.call(value) === '[Object Object]') {
         value = JSON.stringify(value);
       } else if (Array.isArray(value)) {
         var isTrue = value.some(function (item) {
@@ -10229,11 +10248,31 @@ var Widget = Vue.extend({
         value = String(value);
       }
       return value;
+    },
+    getSchema: function getSchema() {
+      return this.widgetSchema;
+    },
+    setSchema: function setSchema(data) {
+      try {
+        this.privateSchema = JSON.parse(JSON.stringify(data));
+      } catch (err) {
+        console.warn(err);
+      }
+      return this.widgetSchema;
+    },
+    resetDatasource: function resetDatasource() {
+      var _this$widgetSchema, _this$widgetSchema$ui3, _this$widgetSchema$ui4;
+      var xhrConfig = (_this$widgetSchema = this.widgetSchema) === null || _this$widgetSchema === void 0 ? void 0 : (_this$widgetSchema$ui3 = _this$widgetSchema['ui:component']) === null || _this$widgetSchema$ui3 === void 0 ? void 0 : (_this$widgetSchema$ui4 = _this$widgetSchema$ui3.props) === null || _this$widgetSchema$ui4 === void 0 ? void 0 : _this$widgetSchema$ui4.remoteConfig;
+      if (xhrConfig) {
+        this.loadDataSource();
+      } else {
+        this.datasource = Schema.resolveDefaultDatasource(this.widgetSchema);
+      }
     }
   },
   render: function render(h) {
-    var _events$callbacks, _this$$scopedSlots$de, _this$$scopedSlots$de2, _this$$scopedSlots, _this$schema$uiCompo2, _this$$scopedSlots$su, _this$$scopedSlots2;
-    var _Schema$getUiComponen = Schema.getUiComponent(this.schema),
+    var _events$callbacks, _this$$scopedSlots$de, _this$$scopedSlots$de2, _this$$scopedSlots, _this$widgetSchema$ui5, _this$$scopedSlots$su, _this$$scopedSlots2;
+    var _Schema$getUiComponen = Schema.getUiComponent(this.widgetSchema),
       name = _Schema$getUiComponen.name,
       uiVnodeData = _objectWithoutProperties(_Schema$getUiComponen, _excluded2);
     // 注意顺序！！！
@@ -10242,13 +10281,15 @@ var Widget = Vue.extend({
       value: this.value
     });
     var self = this;
-    var widgetName = registry.getComponent(name) || name || Schema.getDefaultWidget(this.schema);
+    var widgetName = registry.getComponent(name) || name || Schema.getDefaultWidget(this.widgetSchema);
     var widgetEvents = ((_events$callbacks = events.callbacks) === null || _events$callbacks === void 0 ? void 0 : _events$callbacks[this.path]) || {};
     // 当前state属性优先级最高
     var renderWidget = (_this$$scopedSlots$de = (_this$$scopedSlots$de2 = (_this$$scopedSlots = this.$scopedSlots).default) === null || _this$$scopedSlots$de2 === void 0 ? void 0 : _this$$scopedSlots$de2.call(_this$$scopedSlots, {
       path: this.path
     })) !== null && _this$$scopedSlots$de !== void 0 ? _this$$scopedSlots$de : h(widgetName, mergeDeep({
-      props: _objectSpread2({}, widgetProps),
+      props: _objectSpread2(_objectSpread2({}, widgetProps), {}, {
+        schema: this.widgetSchema
+      }),
       attrs: _objectSpread2({}, uiVnodeData.props || {}),
       class: {
         pr20: this.removeable
@@ -10294,6 +10335,7 @@ var Widget = Vue.extend({
       })]);
     };
     return h(registry.getBaseWidget('form-item'), {
+      key: this.key,
       props: this.formItemProps,
       style: _objectSpread2(_objectSpread2(_objectSpread2({}, this.layout.item || {}), this.layout.container || {}), {}, {
         // 表单项显示和隐藏状态
@@ -10302,9 +10344,9 @@ var Widget = Vue.extend({
       class: {
         'bk-schema-form-item--error': this.state.error
       }
-    }, [this.state.readonly && this.readonlyMode === 'value' && ((_this$schema$uiCompo2 = this.schema['ui:component']) === null || _this$schema$uiCompo2 === void 0 ? void 0 : _this$schema$uiCompo2.name) !== 'table' ? renderReadonlyWidget : renderWidget, (_this$$scopedSlots$su = (_this$$scopedSlots2 = this.$scopedSlots).suffix) === null || _this$$scopedSlots$su === void 0 ? void 0 : _this$$scopedSlots$su.call(_this$$scopedSlots2, {
+    }, [this.state.readonly && this.readonlyMode === 'value' && ((_this$widgetSchema$ui5 = this.widgetSchema['ui:component']) === null || _this$widgetSchema$ui5 === void 0 ? void 0 : _this$widgetSchema$ui5.name) !== 'table' ? renderReadonlyWidget : renderWidget, (_this$$scopedSlots$su = (_this$$scopedSlots2 = this.$scopedSlots).suffix) === null || _this$$scopedSlots$su === void 0 ? void 0 : _this$$scopedSlots$su.call(_this$$scopedSlots2, {
       path: this.path,
-      schema: this.schema
+      schema: this.widgetSchema
     }), this.removeable && renderDelete(), this.state.error ? h('p', {
       class: 'bk-schema-form-item__error-tips'
     }, this.errorTips) : null, this.formItemProps.tips ? h('p', {
@@ -10917,21 +10959,21 @@ var getRowDefaultData = function getRowDefaultData() {
 var TableWidget = Vue.extend({
   name: 'TableWidget',
   props: props,
-  mounted: function mounted() {
-    var _this = this;
-    this.$nextTick(function () {
-      var fieldMap = _this.schema.items.properties;
-      _this.value.forEach(function (item, index) {
-        Object.keys(fieldMap).forEach(function (key) {
-          var config = fieldMap[key];
-          if (config['ui:rules']) {
-            var instance = _this.$refs[key + index];
-            // 注册widget TreeNode
-            widgetTree.addWidgetNode("".concat(_this.path, ".").concat(key), instance, 'node');
-          }
+  watch: {
+    value: {
+      immediate: true,
+      handler: function handler() {
+        var _this$value,
+          _this = this;
+        (_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);
+          // 重新当前行的父节点
+          widgetTree.addWidgetNode(path, null, 'group');
         });
-      });
-    });
+      }
+    }
   },
   methods: {
     // 单元格表单编辑
@@ -10944,39 +10986,40 @@ var TableWidget = Vue.extend({
     },
     // 新增
     handleAddRow: function handleAddRow(index) {
-      var _this$$props$schema$i;
-      if (this.schema['ui:props'].disabled) return;
+      var _this$schema$uiProps, _this$$props$schema$i;
+      if ((_this$schema$uiProps = this.schema['ui:props']) !== null && _this$schema$uiProps !== void 0 && _this$schema$uiProps.disabled) return;
       var newValue = this.value.slice(0);
       newValue.splice.apply(newValue, [index + 1, 0].concat(_toConsumableArray(getRowDefaultData((_this$$props$schema$i = this.$props.schema.items) === null || _this$$props$schema$i === void 0 ? void 0 : _this$$props$schema$i.properties))));
       this.$emit('input', newValue);
     },
     // 删除
     handleDelRow: function handleDelRow(index) {
-      if (this.schema['ui:props'].disabled) return;
+      var _this$schema$uiProps2;
+      if ((_this$schema$uiProps2 = this.schema['ui:props']) !== null && _this$schema$uiProps2 !== void 0 && _this$schema$uiProps2.disabled) return;
       var newValue = this.value.slice(0);
       newValue.splice(index, 1);
       this.$emit('input', newValue);
     }
   },
   render: function render(h) {
-    var _schema$items,
-      _this2 = this;
+    var _this2 = this;
     var self = this;
-    var _this$$props = this.$props,
-      schema = _this$$props.schema,
-      readonly = _this$$props.readonly,
-      readonlyMode = _this$$props.readonlyMode,
-      path = _this$$props.path,
-      context = _this$$props.context,
-      rootData = _this$$props.rootData,
-      value = _this$$props.value,
-      disabled = _this$$props.disabled;
-    var columnsKey = Object.keys(((_schema$items = schema.items) === null || _schema$items === void 0 ? void 0 : _schema$items.properties) || []);
+    var schema = this.schema,
+      path = this.path,
+      value = this.value;
+    var schemaItems = schema.items;
+    var properties = {};
+    if (schemaItems !== null && schemaItems !== void 0 && schemaItems.properties) {
+      properties = schemaItems === null || schemaItems === void 0 ? void 0 : schemaItems.properties;
+    } else {
+      // table类型目前只支持items的类型为对象的schema
+      console.warn('The current schema type is not supported table component', schemaItems);
+    }
     var uiOptions = Schema.getUiOptions(schema);
     var getTableColumn = function getTableColumn() {
-      var VNodeList = columnsKey.map(function (key) {
+      var VNodeList = Object.keys(properties).map(function (key) {
         var _colField$uiProps, _colField$uiProps2;
-        var colField = schema.items.properties[key];
+        var colField = properties[key];
         // 仅支持基础数据类型的属性配置，render-header、sort-method、formatter等Function类型的属性不属于json支持的数据类型，配置将不会生效
         var colProps = ((_colField$uiProps = colField['ui:props']) === null || _colField$uiProps === void 0 ? void 0 : _colField$uiProps.tableColumnProps) || {};
         // 内置表头部分需要显示tooltips的场景, tableHeaderTips的属性将会透传给v-bk-tooltips指令
@@ -10998,20 +11041,12 @@ var TableWidget = Vue.extend({
         }
         return h(registry.getBaseWidget('table-column'), {
           props: _objectSpread2({
-            label: colField.title,
-            minWidth: colField.minWidth,
-            width: colField.width
+            label: colField.title
           }, colProps),
           scopedSlots: {
             default: function _default(props) {
               return h(SchemaField, {
-                ref: key + props.$index,
-                props: {
-                  context: context,
-                  rootData: rootData,
-                  readonly: readonly,
-                  readonlyMode: readonlyMode,
-                  disabled: disabled,
+                props: _objectSpread2(_objectSpread2({}, _this2.$props), {}, {
                   schema: mergeDeep(colField, {
                     'ui:props': {
                       // 默认不展示标题
@@ -11022,7 +11057,7 @@ var TableWidget = Vue.extend({
                   }),
                   path: Path.getCurPath(path, "".concat(props.$index, ".").concat(key)),
                   value: props.row[key]
-                },
+                }),
                 on: {
                   input: function input(data) {
                     self.handleCellValChange(data);
@@ -11042,10 +11077,11 @@ var TableWidget = Vue.extend({
           },
           scopedSlots: {
             default: function _default(props) {
+              var _schema$uiProps;
               return h('div', {
                 class: {
                   'table-widget-actions': true,
-                  'is-disabled': schema['ui:props'].disabled
+                  'is-disabled': (_schema$uiProps = schema['ui:props']) === null || _schema$uiProps === void 0 ? void 0 : _schema$uiProps.disabled
                 }
               }, [h('i', {
                 class: 'bk-icon icon-plus-circle action-btn',