@blueking/bkui-form 1.0.1-beta.1 → 1.0.1-beta.3

package/esm/adapter/widget/TableWidget.ts.js

@@ -0,0 +1,205 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { defineComponent, h } from 'vue';
+import register from '../../core/register.ts.js';
+import { mergeDeep } from '../../util/index.ts.js';
+import Schema from '../../core/schema.ts.js';
+import Path from '../../core/path.ts.js';
+import props from '../field/FieldProps.ts.js';
+import SchemaField from '../field/SchemaField.tsx.js';
+import widgetTree from '../../core/widgetTree.ts.js';
+// @todo widgetTree添加单行node，内置导入、导出功能
+// 获取表格单行默认值
+const getRowDefaultData = (properties = {})=>{
+    const keys = Object.keys(properties);
+    const data = {};
+    keys.forEach((key)=>{
+        data[key] = Schema.getSchemaDefaultValue(properties[key]);
+    });
+    return [
+        data
+    ];
+};
+export default defineComponent({
+    name: 'TableWidget',
+    props: _object_spread_props(_object_spread({}, props), {
+        // 当前值
+        modelValue: {
+            type: Array
+        }
+    }),
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler () {
+                var _this_modelValue;
+                (_this_modelValue = this.modelValue) === null || _this_modelValue === void 0 ? void 0 : _this_modelValue.forEach((_, index)=>{
+                    const path = `${this.path}.${index}`;
+                    // 销毁上一次的缓存
+                    widgetTree.removeWidgetNode(path, null);
+                    // 重新当前行的父节点
+                    widgetTree.addWidgetNode(path, null, 'group');
+                });
+            }
+        }
+    },
+    methods: {
+        // 单元格表单编辑
+        handleCellValChange ({ path, value }) {
+            const subPath = Path.getSubPath(this.path, path);
+            const newValue = Path.setPathValue(this.modelValue, subPath, value);
+            this.$emit('update:modelValue', newValue);
+        },
+        // 新增
+        handleAddRow (index) {
+            var _this_schema_uiprops, _this_modelValue, _this_$props_schema_items;
+            if ((_this_schema_uiprops = this.schema['ui:props']) === null || _this_schema_uiprops === void 0 ? void 0 : _this_schema_uiprops.disabled) return;
+            const newValue = ((_this_modelValue = this.modelValue) === null || _this_modelValue === void 0 ? void 0 : _this_modelValue.slice(0)) || [];
+            newValue.splice(index + 1, 0, ...getRowDefaultData((_this_$props_schema_items = this.$props.schema.items) === null || _this_$props_schema_items === void 0 ? void 0 : _this_$props_schema_items.properties));
+            this.$emit('update:modelValue', newValue);
+        },
+        // 删除
+        handleDelRow (index) {
+            var _this_schema_uiprops, _this_modelValue;
+            if ((_this_schema_uiprops = this.schema['ui:props']) === null || _this_schema_uiprops === void 0 ? void 0 : _this_schema_uiprops.disabled) return;
+            const newValue = ((_this_modelValue = this.modelValue) === null || _this_modelValue === void 0 ? void 0 : _this_modelValue.slice(0)) || [];
+            newValue.splice(index, 1);
+            this.$emit('update:modelValue', newValue);
+        }
+    },
+    render () {
+        const self = this;
+        const { schema, path, modelValue } = this;
+        const schemaItems = schema.items;
+        let properties = {};
+        if (schemaItems === null || schemaItems === void 0 ? 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);
+        }
+        const uiOptions = Schema.getUiOptions(schema);
+        const getTableColumns = ()=>{
+            const columnList = Object.keys(properties).map((field)=>{
+                const colField = properties[field];
+                // 仅支持基础数据类型的属性配置，render-header、sort-method、formatter等Function类型的属性不属于json支持的数据类型，配置将不会生效
+                const colProps = colField['ui:props'] || {};
+                return _object_spread_props(_object_spread({}, colProps), {
+                    label: colField === null || colField === void 0 ? void 0 : colField.title,
+                    field,
+                    render: ({ row, index })=>h(SchemaField, _object_spread_props(_object_spread({}, this.$props), {
+                            schema: mergeDeep(colField, {
+                                'ui:props': {
+                                    // 默认不展示标题
+                                    showTitle: false,
+                                    // 0.1 兼容formItem设置 labelWidth 0 不生效问题
+                                    labelWidth: 0.1
+                                }
+                            }),
+                            path: Path.getCurPath(path, `${index}.${field}`),
+                            modelValue: row[field],
+                            'onUpdate:modelValue' (data) {
+                                self.handleCellValChange(data);
+                            }
+                        }))
+                });
+            });
+            if (!this.readonly && uiOptions.modifyRows !== false) {
+                columnList.push({
+                    label: '操作',
+                    width: 100,
+                    fixed: 'right',
+                    render: ({ index })=>{
+                        var _schema_uiprops;
+                        return h('div', {
+                            class: {
+                                'table-widget-actions': true,
+                                'is-disabled': (_schema_uiprops = schema['ui:props']) === null || _schema_uiprops === void 0 ? void 0 : _schema_uiprops.disabled
+                            }
+                        }, {
+                            default: ()=>[
+                                    h('i', {
+                                        class: 'bk-form-icon icon-plus-line action-btn',
+                                        onClick () {
+                                            self.handleAddRow(index);
+                                        }
+                                    }),
+                                    h('i', {
+                                        class: 'bk-form-icon icon-minus-line action-btn',
+                                        onClick () {
+                                            self.handleDelRow(index);
+                                        }
+                                    })
+                                ]
+                        });
+                    }
+                });
+            }
+            return columnList;
+        };
+        return h(register.getBaseWidget('table'), _object_spread_props(_object_spread({}, schema['ui:component'] || {}), {
+            data: modelValue,
+            columns: getTableColumns()
+        }), {
+            empty: ()=>this.readonly || uiOptions.modifyRows === false ? null : h('div', {
+                    style: {
+                        color: '#3a84ff',
+                        cursor: 'pointer'
+                    },
+                    onClick: ()=>{
+                        self.handleAddRow(0);
+                    }
+                }, '点击添加数据')
+        });
+    }
+});