@jetlinks-web/components 2.4.25 → 2.5.0

package/es/EditTable/EditTable.js

@@ -17,22 +17,25 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
 /* Analyzed bindings: {
   "serial": "props",
   "validateRowKey": "props",
+  "readonly": "props",
   "FULL_SCREEN": "setup-maybe-ref",
   "RIGHT_MENU": "setup-maybe-ref",
   "TABLE_DATA_SOURCE": "setup-maybe-ref",
   "TABLE_ERROR": "setup-maybe-ref",
+  "TABLE_GROUP_ACTIVE": "setup-maybe-ref",
+  "TABLE_GROUP_ERROR": "setup-maybe-ref",
+  "TABLE_GROUP_OPTIONS": "setup-maybe-ref",
+  "TABLE_OPEN_GROUP": "setup-maybe-ref",
   "TABLE_TOOL": "setup-maybe-ref",
   "TABLE_WRAPPER": "setup-maybe-ref",
   "handleColumnsWidth": "setup-maybe-ref",
+  "useGroup": "setup-maybe-ref",
   "useResizeObserver": "setup-maybe-ref",
   "useValidate": "setup-maybe-ref",
-  "useFormContext": "setup-maybe-ref",
   "tableProps": "setup-maybe-ref",
-  "Header": "setup-const",
-  "Body": "setup-const",
+  "useFormContext": "setup-maybe-ref",
   "useFullscreen": "setup-maybe-ref",
   "provide": "setup-const",
-  "useAttrs": "setup-const",
   "useSlots": "setup-const",
   "ref": "setup-const",
   "reactive": "setup-const",
@@ -40,24 +43,35 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "computed": "setup-const",
   "watch": "setup-const",
   "bodyProps": "setup-maybe-ref",
-  "defaultProps": "setup-maybe-ref",
   "findIndex": "setup-maybe-ref",
   "get": "setup-maybe-ref",
   "sortBy": "setup-maybe-ref",
+  "Header": "setup-const",
+  "Body": "setup-const",
+  "Group": "setup-const",
+  "useLocaleReceiver": "setup-maybe-ref",
   "emit": "setup-const",
+  "contextLocale": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "slots": "setup-maybe-ref",
-  "attrs": "setup-maybe-ref",
   "myColumns": "setup-ref",
   "tableWrapper": "setup-ref",
   "tableBody": "setup-ref",
-  "horizontalScrollRef": "setup-ref",
-  "scrollMap": "setup-reactive-const",
   "tableStyle": "setup-reactive-const",
   "fields": "setup-const",
+  "defaultGroupId": "literal-const",
   "fieldsErrMap": "setup-ref",
+  "fieldsGroupError": "setup-ref",
+  "scrollDefaultWidth": "setup-ref",
   "sortData": "setup-reactive-const",
+  "groupActive": "setup-maybe-ref",
+  "groupOptions": "setup-maybe-ref",
+  "addGroup": "setup-maybe-ref",
+  "removeGroup": "setup-maybe-ref",
+  "updateGroupActive": "setup-maybe-ref",
+  "updateGroupOptions": "setup-maybe-ref",
   "_dataSource": "setup-ref",
+  "bodyDataSource": "setup-ref",
   "isFullscreen": "setup-maybe-ref",
   "toggle": "setup-maybe-ref",
   "rules": "setup-maybe-ref",
@@ -70,75 +84,81 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "removeFieldError": "setup-const",
   "addFieldError": "setup-const",
   "scrollWidth": "setup-ref",
-  "onHorizontalScroll": "setup-const",
   "onResize": "setup-const",
   "onScrollDown": "setup-const",
   "rightMenu": "setup-const",
   "scrollToById": "setup-const",
   "scrollToByIndex": "setup-const",
-  "getTableWrapperRef": "setup-const"
+  "getTableWrapperRef": "setup-const",
+  "groupDelete": "setup-const",
+  "groupEdit": "setup-const",
+  "getGroupActive": "setup-const"
 } */
-import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { class: "jetlinks-edit-table-extra" };
 const _hoisted_2 = { class: "jetlinks-edit-table" };
-const _hoisted_3 = {
-    key: 0,
-    class: "jetlinks-edit-table-horizontal-scroll"
-};
-import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_TOOL, TABLE_WRAPPER } from './consts';
+import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_GROUP_ACTIVE, TABLE_GROUP_ERROR, TABLE_GROUP_OPTIONS, TABLE_OPEN_GROUP, TABLE_TOOL, TABLE_WRAPPER } from './consts';
 import { handleColumnsWidth } from './utils';
-import { useResizeObserver, useValidate, useFormContext } from './hooks';
+import { useGroup, useResizeObserver, useValidate } from './hooks';
 import { tableProps } from 'ant-design-vue/lib/table';
-import Header from './Header.js';
-import Body from './Body.js';
+import { useFormContext } from './context';
 import { useFullscreen } from '@vueuse/core';
-import { provide, useAttrs, useSlots, ref, reactive, computed, watch } from 'vue';
-import { bodyProps, defaultProps } from "./props";
+import { provide, useSlots, ref, reactive, computed, watch } from 'vue';
+import { bodyProps } from "./props";
 import { findIndex, get, sortBy } from 'lodash-es';
+import Header from './Header.js';
+import Body from './Body.js';
+import Group from './group.js';
+import { useLocaleReceiver } from "../LocaleReciver";
+const defaultGroupId = 'group_1';
 const __sfc_main__ = Object.assign({
     name: 'JEditTable'
 }, {
     props: {
         ...tableProps(),
-        ...defaultProps(),
         ...bodyProps(),
         serial: {
             type: [Object, Boolean],
-            default: () => ({})
+            default: () => ({
+                width: 66,
+                title: ''
+            })
         },
         validateRowKey: {
             type: Boolean,
             default: false
         },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
     },
     emits: ['scrollDown', 'rightMenuClick', 'editChange', 'searchVisibleChange'],
     setup(__props, { expose: __expose, emit: __emit }) {
         const emit = __emit;
+        const [contextLocale] = useLocaleReceiver('EditTable');
         const props = __props;
         const slots = useSlots();
-        const attrs = useAttrs();
         const myColumns = ref([]);
         const tableWrapper = ref();
         const tableBody = ref();
-        const horizontalScrollRef = ref();
-        const scrollMap = reactive({
-            x: 0,
-            y: 0,
-            down: undefined
-        });
         const tableStyle = reactive({
             width: '100%',
             height: props.height
         });
         const fields = {};
         const fieldsErrMap = ref({});
+        const fieldsGroupError = ref({});
+        const scrollDefaultWidth = ref(17);
         const sortData = reactive({
             key: undefined,
             order: undefined,
             orderKeys: [],
             dataIndex: undefined
         });
+        const { groupActive, groupOptions, addGroup, removeGroup, updateGroupActive, updateGroupOptions } = useGroup(props.openGroup);
         const _dataSource = computed(() => {
+            const _options = new Map();
             const sortDataSource = sortData.key ?
                 sortBy(props.dataSource, (val) => {
                     if (!val.id)
@@ -148,15 +168,53 @@ const __sfc_main__ = Object.assign({
                 }) : props.dataSource;
             sortDataSource.forEach((item, index) => {
                 item.__dataIndex = index;
-                item.__serial = index + 1;
+                if (props.openGroup) {
+                    const _groupId = _optionalChain([item, 'access', _2 => _2.expands, 'optionalAccess', _3 => _3.groupId]);
+                    if (!_groupId) {
+                        item.expands.groupId = groupActive.value || defaultGroupId;
+                        item.expands.groupName = groupActive.label || (contextLocale.value.Group.one + '1');
+                    }
+                    const _optionsItem = _options.get(item.expands.groupId);
+                    if (!_optionsItem) {
+                        _options.set(item.expands.groupId, {
+                            value: _optionalChain([item, 'access', _4 => _4.expands, 'optionalAccess', _5 => _5.groupId]),
+                            label: _optionalChain([item, 'access', _6 => _6.expands, 'optionalAccess', _7 => _7.groupName]),
+                            effective: item.id ? 1 : 0,
+                            len: 1 // 分组数据总长度
+                        });
+                    }
+                    else {
+                        if (item.id) {
+                            _optionsItem.effective += 1;
+                        }
+                        _optionsItem.len += 1;
+                        _options.set(item.expands.groupId, _optionsItem);
+                    }
+                    item.__serial = _optionalChain([_optionsItem, 'optionalAccess', _8 => _8.len]) || 1;
+                }
+                else {
+                    item.__serial = index + 1;
+                }
             });
+            if (props.openGroup) {
+                updateGroupOptions([..._options.values()]);
+            }
             return sortDataSource;
         });
+        const bodyDataSource = computed(() => {
+            if (props.openGroup) {
+                return _dataSource.value.filter(item => {
+                    return item.expands.groupId === groupActive.value;
+                });
+            }
+            return _dataSource.value;
+        });
         useResizeObserver(tableWrapper, onResize);
         const { isFullscreen, toggle } = useFullscreen(tableWrapper);
         const { rules, validateItem, validate, errorMap } = useValidate(_dataSource, props.columns, props.rowKey, {
             onError: (err) => {
                 fieldsErrMap.value = {};
+                fieldsGroupError.value = {};
                 const errMap = {};
                 // 显示全部err红标
                 err.forEach((item, errIndex) => {
@@ -168,6 +226,10 @@ const __sfc_main__ = Object.assign({
                         }
                         errMap[_eventKey] = e.message;
                         if (errIndex === 0 && eIndex === 0) {
+                            if (props.openGroup) {
+                                const expands = _dataSource.value[e.__dataIndex].expands;
+                                updateGroupActive(expands.groupId, expands.groupName);
+                            }
                             setTimeout(() => {
                                 tableBody.value.scrollTo(e.__serial - 1);
                             }, 10);
@@ -188,9 +250,15 @@ const __sfc_main__ = Object.assign({
         provide(FULL_SCREEN, isFullscreen);
         provide(RIGHT_MENU, { click: rightMenu, getPopupContainer: () => tableWrapper.value });
         provide(TABLE_ERROR, fieldsErrMap);
+        provide(TABLE_GROUP_ERROR, fieldsGroupError);
         provide(TABLE_DATA_SOURCE, _dataSource);
+        provide(TABLE_OPEN_GROUP, props.openGroup);
         provide(TABLE_TOOL, {
             scrollTo: (record) => {
+                if (props.openGroup) {
+                    const expands = record.expands;
+                    updateGroupActive(expands.groupId, expands.groupName);
+                }
                 setTimeout(() => {
                     tableBody.value.scrollTo(record.__serial);
                 }, 10);
@@ -210,13 +278,10 @@ const __sfc_main__ = Object.assign({
                 sortData.orderKeys = [];
                 sortData.dataIndex = undefined;
             },
-            searchVisible: (v) => {
-                emit('searchVisibleChange', v);
-            },
-            scrollMap,
-            sortData,
-            columns: myColumns
+            sortData
         });
+        provide(TABLE_GROUP_OPTIONS, groupOptions);
+        provide(TABLE_GROUP_ACTIVE, groupActive);
         const addField = (key, field) => {
             fields[key] = field;
         };
@@ -237,57 +302,30 @@ const __sfc_main__ = Object.assign({
             fieldsErrMap.value[key] = message;
         }
         const scrollWidth = computed(() => {
-            let _width = 0;
-            if (props.dataSource.length * props.cellHeight) {
-                _width = 17;
-            }
-            if (_optionalChain([tableBody, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.getViewScrollRef]) && props.dataSource.length) {
-                const viewScrollDom = _optionalChain([tableBody, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.getViewScrollRef, 'call', _6 => _6()]);
-                const bodyContainer = viewScrollDom.querySelector('.jetlinks-edit-table-body-container');
-                _width = viewScrollDom.offsetWidth - bodyContainer.offsetWidth;
-            }
-            return _width;
+            return (props.dataSource.length * props.cellHeight) > props.height ? scrollDefaultWidth.value : 0;
         });
-        const onHorizontalScroll = () => {
-            if (!horizontalScrollRef.value)
-                return;
-            const { clientWidth, scrollLeft, scrollWidth } = horizontalScrollRef.value;
-            scrollMap.x = scrollLeft;
-            if (clientWidth + scrollLeft >= scrollWidth) {
-                scrollMap.down = 'right';
-            }
-            else if (scrollLeft === 0) {
-                scrollMap.down = undefined;
-            }
-            else {
-                scrollMap.down = 'left';
-            }
-        };
-        function onResize({ width = 0, height }) {
+        function onResize({ width = 0 }) {
             const _width = width - scrollWidth.value;
             tableStyle.width = width || '100%';
+            const viewportDom = document.querySelector('.jetlinks-edit-table-body-viewport');
+            const viewportDivDom = viewportDom.querySelector('div');
+            scrollDefaultWidth.value = viewportDom.offsetWidth - viewportDivDom.offsetWidth;
             let newColumns = [...props.columns];
             if (props.serial) {
-                const options = Object.assign({
-                    title: '序号',
-                    width: 66,
-                    fixed: 'left'
-                }, props.serial);
                 const serial = {
                     dataIndex: '__serial',
-                    title: options.title,
+                    title: props.serial.title || contextLocale.value.serial,
                     customRender: (customData) => {
-                        if (_optionalChain([props, 'access', _7 => _7.serial, 'optionalAccess', _8 => _8.customRender])) {
-                            return _optionalChain([props, 'access', _9 => _9.serial, 'optionalAccess', _10 => _10.customRender, 'call', _11 => _11(customData)]);
+                        if (_optionalChain([props, 'access', _9 => _9.serial, 'optionalAccess', _10 => _10.customRender])) {
+                            return _optionalChain([props, 'access', _11 => _11.serial, 'optionalAccess', _12 => _12.customRender, 'call', _13 => _13(customData)]);
                         }
                         return customData.index + 1;
                     },
-                    width: options.width,
-                    fixed: options.fixed
+                    width: _optionalChain([props, 'access', _14 => _14.serial, 'optionalAccess', _15 => _15.width])
                 };
                 newColumns = [serial, ...props.columns];
             }
-            myColumns.value = handleColumnsWidth(newColumns, _width, _optionalChain([props, 'access', _12 => _12.scroll, 'optionalAccess', _13 => _13.x]));
+            myColumns.value = handleColumnsWidth(newColumns, _width);
         }
         const onScrollDown = (len) => {
             emit('scrollDown', len);
@@ -305,6 +343,52 @@ const __sfc_main__ = Object.assign({
         const getTableWrapperRef = () => {
             return tableWrapper.value;
         };
+        const groupDelete = (id, index) => {
+            removeGroup(index);
+            Object.keys(fieldsErrMap.value).forEach(errorKey => {
+                const [index] = errorKey.split('-');
+                const dataSourceItem = _dataSource.value[index];
+                const groupId = _optionalChain([dataSourceItem, 'access', _16 => _16.expands, 'optionalAccess', _17 => _17.groupId]);
+                if (groupId === id) {
+                    removeFieldError(errorKey);
+                    removeField(errorKey);
+                }
+            });
+            emit('groupDelete', id);
+        };
+        const groupEdit = (record) => {
+            emit('groupEdit', record);
+        };
+        const getGroupActive = () => {
+            return groupActive.value;
+        };
+        watch(() => fieldsErrMap.value, (errorMap) => {
+            fieldsGroupError.value = {};
+            if (props.openGroup) {
+                const _errorObj = errorMap;
+                const groupErrorMap = {};
+                Object.keys(_errorObj).forEach(errorKey => {
+                    const [index] = errorKey.split('-');
+                    const dataSourceItem = _dataSource.value[index];
+                    const groupId = _optionalChain([dataSourceItem, 'access', _18 => _18.expands, 'optionalAccess', _19 => _19.groupId]);
+                    const groupError = groupErrorMap[groupId];
+                    const groupErrorItem = {
+                        [errorKey]: {
+                            message: _errorObj[errorKey],
+                            index,
+                            serial: dataSourceItem.__serial
+                        }
+                    };
+                    if (groupError) {
+                        groupError.push(groupErrorItem);
+                    }
+                    else {
+                        groupErrorMap[groupId] = [groupErrorItem];
+                    }
+                });
+                fieldsGroupError.value = groupErrorMap;
+            }
+        }, { deep: true });
         watch(() => scrollWidth.value, () => {
             onResize({ width: tableStyle.width });
         });
@@ -326,6 +410,7 @@ const __sfc_main__ = Object.assign({
             scrollToById,
             scrollToByIndex,
             getTableWrapperRef,
+            getGroupActive
         });
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock("div", {
@@ -349,14 +434,8 @@ const __sfc_main__ = Object.assign({
                     }, [
                         _createVNode(Header, {
                             columns: myColumns.value,
-                            style: _normalizeStyle({ width: tableStyle.width }),
-                            rowKey: _ctx.rowKey,
-                            searchColumns: _ctx.searchColumns
-                        }, null, 8 /* PROPS */, ["columns", "style", "rowKey", "searchColumns"]),
-                        _createElementVNode("div", {
-                            class: "jetlinks-edit-table-header-scroll-hidden",
-                            style: _normalizeStyle({ width: scrollWidth.value + 'px' })
-                        }, null, 4 /* STYLE */)
+                            style: _normalizeStyle({ width: tableStyle.width })
+                        }, null, 8 /* PROPS */, ["columns", "style"])
                     ], 4 /* STYLE */),
                     _createElementVNode("div", {
                         class: "jetlinks-edit-table-body",
@@ -365,13 +444,16 @@ const __sfc_main__ = Object.assign({
                         _createVNode(Body, {
                             ref_key: "tableBody",
                             ref: tableBody,
-                            dataSource: _dataSource.value,
+                            dataSource: bodyDataSource.value,
                             columns: myColumns.value,
                             cellHeight: _ctx.cellHeight,
                             height: _ctx.height,
                             disableMenu: _ctx.disableMenu,
                             rowKey: _ctx.rowKey,
+                            groupKey: _unref(groupActive).value,
+                            openGroup: _ctx.openGroup,
                             rowSelection: _ctx.rowSelection,
+                            readonly: __props.readonly,
                             onScrollDown: onScrollDown
                         }, _createSlots({ _: 2 /* DYNAMIC */ }, [
                             _renderList(_unref(slots), (_, name) => {
@@ -382,30 +464,21 @@ const __sfc_main__ = Object.assign({
                                     ])
                                 };
                             })
-                        ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["dataSource", "columns", "cellHeight", "height", "disableMenu", "rowKey", "rowSelection"]),
+                        ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["dataSource", "columns", "cellHeight", "height", "disableMenu", "rowKey", "groupKey", "openGroup", "rowSelection", "readonly"]),
                         _renderSlot(_ctx.$slots, "bodyExtra")
                     ], 4 /* STYLE */),
-                    (_optionalChain([_ctx, 'access', _14 => _14.scroll, 'optionalAccess', _15 => _15.x]))
-                        ? (_openBlock(), _createElementBlock("div", _hoisted_3, [
-                            _createElementVNode("div", {
-                                class: "jetlinks-edit-table-horizontal-scroll-viewport",
-                                ref_key: "horizontalScrollRef",
-                                ref: horizontalScrollRef,
-                                onScroll: onHorizontalScroll
-                            }, [
-                                _createElementVNode("div", {
-                                    style: _normalizeStyle({
-                                        width: _ctx.scroll.x + 'px',
-                                        minWidth: _ctx.scroll.x + 'px',
-                                        maxWidth: _ctx.scroll.x + 'px'
-                                    })
-                                }, null, 4 /* STYLE */)
-                            ], 544 /* NEED_HYDRATION, NEED_PATCH */),
-                            _createElementVNode("div", {
-                                class: "jetlinks-edit-table-horizontal-scroll-hidden",
-                                style: _normalizeStyle({ width: scrollWidth.value + 'px' })
-                            }, null, 4 /* STYLE */)
-                        ]))
+                    (_ctx.dataSource.length && _ctx.openGroup)
+                        ? (_openBlock(), _createBlock(Group, {
+                            key: 0,
+                            activeKey: _unref(groupActive).value,
+                            "onUpdate:activeKey": _cache[0] || (_cache[0] = $event => ((_unref(groupActive).value) = $event)),
+                            options: _unref(groupOptions),
+                            readonly: __props.readonly,
+                            onAdd: _unref(addGroup),
+                            onDelete: groupDelete,
+                            onEdit: groupEdit,
+                            onChange: _unref(updateGroupActive)
+                        }, null, 8 /* PROPS */, ["activeKey", "options", "readonly", "onAdd", "onChange"]))
                         : _createCommentVNode("v-if", true)
                 ])
             ], 2 /* CLASS */));

package/es/EditTable/FormItem.js

@@ -47,12 +47,11 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onFieldBlur": "setup-const",
   "onFieldChange": "setup-const"
 } */
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1741691309984"), n = n(), _popScopeId(), n);
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, Fragment as _Fragment } from "vue";
 const _hoisted_1 = { style: { "color": "#1d2129" } };
 const _hoisted_2 = {
     key: 0,
-    class: "table-form-error-target"
+    class: "jetlinks-table-form-error-target"
 };
 const _hoisted_3 = ["id"];
 import { onBeforeUnmount, computed, reactive, watch, provide } from "vue";
@@ -203,7 +202,7 @@ const __sfc_main__ = Object.assign({
                 _createElementVNode("div", {
                     id: eventKey.value,
                     style: { "position": "relative" },
-                    class: _normalizeClass({ 'edit-table-form-has-error': errorMap.message })
+                    class: _normalizeClass({ 'jetlinks-edit-table-form-has-error': errorMap.message })
                 }, [
                     _renderSlot(_ctx.$slots, "default")
                 ], 10 /* CLASS, PROPS */, _hoisted_3)