@blueking/bkui-form 0.0.30 → 0.0.31

package/dist/bkui-form-es.js

@@ -2192,22 +2192,24 @@ var WidgetTree = /*#__PURE__*/function () {
     value: function removeWidgetNode(path, instance) {
       var node = this.widgetMap[path];
 
-      if (node !== null && node !== void 0 && 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) {
+        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];
+        if (node.instance === instance) {
+          delete this.widgetMap[path];
+        }
       }
     }
   }]);
@@ -10562,7 +10564,9 @@ var Widget = Vue.extend({
       })
     }, mergeDeep(uiVnodeData, {
       props: _objectSpread2(_objectSpread2({}, this.state), {}, {
-        datasource: this.datasource
+        datasource: this.datasource,
+        readonly: this.readonly,
+        readonlyMode: this.readonlyMode
       }),
       attrs: _objectSpread2({}, this.state)
     })));
@@ -11207,12 +11211,160 @@ var ButtonWidget = Vue.extend({
   }
 });
 
+// 获取表格单行默认值
+
+var getRowDefaultData = function getRowDefaultData() {
+  var properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var keys = Object.keys(properties);
+  var data = {};
+  keys.forEach(function (key) {
+    data[key] = Schema.getSchemaDefaultValue(properties[key]);
+  });
+  return [data];
+};
+
 var TableWidget = Vue.extend({
   name: 'TableWidget',
+  props: props,
+  methods: {
+    // 单元格表单编辑
+    handleCellValChange: function handleCellValChange(_ref) {
+      var path = _ref.path,
+          value = _ref.value;
+      var subPath = Path.getSubPath(this.path, path);
+      var newValue = Path.setPathValue(this.value, subPath, value);
+      this.$emit('input', newValue);
+    },
+    // 新增
+    handleAddRow: function handleAddRow(index) {
+      var _this$$props$schema$i;
+
+      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 newValue = this.value.slice(0);
+      newValue.splice(index, 1);
+      this.$emit('input', newValue);
+    }
+  },
   render: function render(h) {
+    var _schema$items,
+        _this = 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 getTableColumn = function getTableColumn() {
+      var VNodeList = columnsKey.map(function (key) {
+        var colField = schema.items.properties[key];
+        return h(registry.getBaseWidget('table-column'), {
+          props: {
+            label: colField.title
+          },
+          scopedSlots: {
+            default: function _default(props) {
+              return h(SchemaField, {
+                props: {
+                  context: context,
+                  rootData: rootData,
+                  readonly: readonly,
+                  readonlyMode: readonlyMode,
+                  schema: mergeDeep(colField, {
+                    'ui:props': {
+                      // 默认不展示标题
+                      showTitle: false,
+                      // 0.1 兼容formItem设置 labelWidth 0 不生效问题
+                      labelWidth: 0.1
+                    }
+                  }),
+                  path: Path.getCurPath(path, "".concat(props.$index, ".").concat(key)),
+                  value: props.row[key]
+                },
+                on: {
+                  input: function input(data) {
+                    self.handleCellValChange(data);
+                  }
+                }
+              }, [props.row]);
+            }
+          }
+        });
+      });
+
+      if (!_this.readonly) {
+        VNodeList.push(h(registry.getBaseWidget('table-column'), {
+          props: {
+            label: '操作',
+            width: 100
+          },
+          scopedSlots: {
+            default: function _default(props) {
+              return h('div', {
+                class: 'table-widget-actions'
+              }, [h('i', {
+                class: 'bk-icon icon-plus-circle action-btn',
+                on: {
+                  click: function click() {
+                    self.handleAddRow(props.$index);
+                  }
+                }
+              }), h('i', {
+                class: 'bk-icon icon-minus-circle action-btn',
+                on: {
+                  click: function click() {
+                    self.handleDelRow(props.$index);
+                  }
+                }
+              })]);
+            }
+          }
+        }));
+      }
+
+      return VNodeList;
+    };
+
     return h(registry.getBaseWidget('table'), {
-      props: _objectSpread2({}, this.$attrs)
-    });
+      props: _objectSpread2(_objectSpread2({}, schema['ui:component'].props || {}), {}, {
+        data: value
+      }),
+      on: {
+        input: function input(_ref2) {
+          var path = _ref2.path,
+              value = _ref2.value;
+          self.$emit('input', {
+            path: path,
+            value: value
+          });
+        }
+      },
+      scopedSlots: {
+        empty: function empty() {
+          return _this.readonly ? null : h('div', {
+            style: {
+              'color': '#3a84ff',
+              'cursor': 'pointer'
+            },
+            on: {
+              click: function click() {
+                self.handleAddRow(0);
+              }
+            }
+          }, '点击添加数据');
+        }
+      }
+    }, getTableColumn());
   }
 });