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

package/dist/bkui-form-umd.js

@@ -1939,19 +1939,19 @@
           // 普通节点
           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: 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;
         }
       }
@@ -9821,13 +9821,14 @@
     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);
@@ -9860,9 +9861,10 @@
       // 清空所在组错误信息
       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);
         }
       });
@@ -10088,16 +10090,25 @@
           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: {
@@ -10111,19 +10122,27 @@
             }, 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)) {
@@ -10135,7 +10154,7 @@
     },
     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');
@@ -10161,12 +10180,12 @@
       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;
@@ -10206,11 +10225,11 @@
         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;
@@ -10221,12 +10240,47 @@
             val = item.label;
           }
         }
-        return val === '' ? '--' : String(val);
+        var value = val === '' ? '--' : val;
+        if (Object.prototype.toString.call(value) === '[Object Object]') {
+          value = JSON.stringify(value);
+        } else if (Array.isArray(value)) {
+          var isTrue = value.some(function (item) {
+            return item && _typeof(item) === 'object';
+          });
+          if (isTrue) {
+            value = JSON.stringify(value);
+          } else {
+            value = value.join(',');
+          }
+        } else {
+          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);
       // 注意顺序！！！
@@ -10235,13 +10289,15 @@
         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
@@ -10287,6 +10343,7 @@
         })]);
       };
       return h(registry.getBaseWidget('form-item'), {
+        key: this.key,
         props: this.formItemProps,
         style: _objectSpread2(_objectSpread2(_objectSpread2({}, this.layout.item || {}), this.layout.container || {}), {}, {
           // 表单项显示和隐藏状态
@@ -10295,9 +10352,9 @@
         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', {
@@ -10910,6 +10967,22 @@
   var TableWidget = Vue__default["default"].extend({
     name: 'TableWidget',
     props: props,
+    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: {
       // 单元格表单编辑
       handleCellValChange: function handleCellValChange(_ref) {
@@ -10921,36 +10994,40 @@
       },
       // 新增
       handleAddRow: function handleAddRow(index) {
-        var _this$$props$schema$i;
+        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) {
+        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,
-        _this = 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;
-      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指令
@@ -10977,11 +11054,7 @@
             scopedSlots: {
               default: function _default(props) {
                 return h(SchemaField, {
-                  props: {
-                    context: context,
-                    rootData: rootData,
-                    readonly: readonly,
-                    readonlyMode: readonlyMode,
+                  props: _objectSpread2(_objectSpread2({}, _this2.$props), {}, {
                     schema: mergeDeep(colField, {
                       'ui:props': {
                         // 默认不展示标题
@@ -10992,7 +11065,7 @@
                     }),
                     path: Path.getCurPath(path, "".concat(props.$index, ".").concat(key)),
                     value: props.row[key]
-                  },
+                  }),
                   on: {
                     input: function input(data) {
                       self.handleCellValChange(data);
@@ -11003,16 +11076,21 @@
             }
           });
         });
-        if (!_this.readonly && uiOptions.modifyRows !== false) {
+        if (!_this2.readonly && uiOptions.modifyRows !== false) {
           VNodeList.push(h(registry.getBaseWidget('table-column'), {
             props: {
               label: '操作',
-              width: 100
+              width: 100,
+              fixed: 'right'
             },
             scopedSlots: {
               default: function _default(props) {
+                var _schema$uiProps;
                 return h('div', {
-                  class: 'table-widget-actions'
+                  class: {
+                    'table-widget-actions': true,
+                    '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',
                   on: {
@@ -11050,7 +11128,7 @@
         },
         scopedSlots: {
           empty: function empty() {
-            return _this.readonly || uiOptions.modifyRows === false ? null : h('div', {
+            return _this2.readonly || uiOptions.modifyRows === false ? null : h('div', {
               style: {
                 color: '#3a84ff',
                 cursor: 'pointer'