@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.21

package/lib/control/gantt/gantt.cjs

@@ -73,10 +73,12 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
     const isInited = vue.ref(false);
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     let overlay = null;
+    let linkOverlay = null;
     const sliderMove = vue.ref(false);
     const iBizRawItem = vue.resolveComponent("IBizRawItem");
     const iBizIcon = vue.resolveComponent("IBizIcon");
     let forbidClick = false;
+    let forbidOperation = false;
     const selection = [];
     const app = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.appContext.app;
     vue.onMounted(() => {
@@ -156,18 +158,90 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
     const locale = vue.computed(() => {
       return ibiz.i18n.getLang().toLowerCase();
     });
+    vue.watch([() => ganttRef.value, () => c.state.selectedData], ([table, newVal]) => {
+      if (forbidOperation || !table)
+        return;
+      vue.nextTick(() => {
+        var _a2, _b;
+        if (c.state.singleSelect) {
+          if (newVal[0]) {
+            (_a2 = ganttRef.value) == null ? void 0 : _a2.setSelected(newVal[0]);
+          } else {
+            (_b = ganttRef.value) == null ? void 0 : _b.setSelected();
+          }
+        } else {
+          selection.length = 0;
+          selection.push(...newVal);
+          newVal.forEach((item) => {
+            var _a3;
+            return (_a3 = ganttRef.value) == null ? void 0 : _a3.setChecked(item, true);
+          });
+        }
+      });
+    });
     const findNodeLayoutPanel = (id) => {
       var _a2;
       let layoutPanel;
       const nodeModel = c.getNodeModel(id);
       (_a2 = nodeModel == null ? void 0 : nodeModel.controlRenders) == null ? void 0 : _a2.forEach((renderItem) => {
-        if (renderItem.renderType === "LAYOUTPANEL") {
+        if (renderItem.renderType === "LAYOUTPANEL" && (renderItem.id || "").split("_")[0] !== "nodelinkrender") {
           layoutPanel = renderItem.layoutPanel;
         }
       });
       return layoutPanel;
     };
+    const findNodeLinkLayoutPanel = (id) => {
+      var _a2;
+      let layoutPanel;
+      const nodeModel = c.getNodeModel(id);
+      (_a2 = nodeModel == null ? void 0 : nodeModel.controlRenders) == null ? void 0 : _a2.find((renderItem) => {
+        if (renderItem.renderType === "LAYOUTPANEL" && (renderItem.id || "").split("_")[0] === "nodelinkrender") {
+          layoutPanel = renderItem.layoutPanel;
+          return true;
+        }
+        return false;
+      });
+      return layoutPanel;
+    };
+    let fullscreen = false;
+    const oldAllPopover = [];
+    const getAllPopover = () => {
+      var _a2;
+      const allPopover = {};
+      const elPopover = (_a2 = document.querySelector(".el-popover")) == null ? void 0 : _a2.parentElement;
+      if (elPopover)
+        Object.assign(allPopover, {
+          elPopover
+        });
+      return allPopover;
+    };
+    const popoverAppendTarget = (_popover, _target) => {
+      _popover.forEach((_element) => _element.parentElement !== _target && (_target == null ? void 0 : _target.append(_element)));
+    };
+    const popoverAppendGantt = () => {
+      var _a2;
+      const targetContainer = (_a2 = ganttRef.value) == null ? void 0 : _a2.getElementRefs().rootRef.value;
+      const allPopoverNode = Object.values(getAllPopover()).filter((_element) => {
+        return _element && _element.parentElement === document.body;
+      });
+      oldAllPopover.push(...allPopoverNode);
+      popoverAppendTarget(allPopoverNode, targetContainer);
+    };
+    const popoverAppendBody = () => {
+      const allPopoverNode = oldAllPopover.filter((_element) => !!_element);
+      oldAllPopover.length = 0;
+      popoverAppendTarget(allPopoverNode, document.body);
+    };
+    const handleFullscreenChange = (_state) => {
+      fullscreen = _state;
+      if (_state) {
+        popoverAppendGantt();
+      } else {
+        popoverAppendBody();
+      }
+    };
     const onCheck = (state, item) => {
+      forbidOperation = true;
       if (state) {
         selection.push(item);
       } else {
@@ -177,16 +251,21 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
         }
       }
       c.setSelection(selection);
+      setTimeout(() => {
+        forbidOperation = false;
+      }, 200);
     };
     const onNodeClick = (nodeData, evt) => {
       if (forbidClick || sliderMove.value) {
         sliderMove.value = false;
         return;
       }
+      forbidOperation = true;
       c.onTreeNodeClick(nodeData, evt);
       forbidClick = true;
       setTimeout(() => {
         forbidClick = false;
+        forbidOperation = false;
       }, 200);
     };
     const onNodeDbClick = (nodeData) => {
@@ -331,7 +410,10 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
       if (!contextMenuC.model.detoolbarItems) {
         return;
       }
-      await contextMenuC.calcButtonState(nodeData._deData || (nodeData.srfkey ? nodeData : void 0), nodeModel.appDataEntityId);
+      await contextMenuC.calcButtonState(nodeData._deData || (nodeData.srfkey ? nodeData : void 0), nodeModel.appDataEntityId, {
+        view: c.view,
+        ctrl: c
+      });
       const menuState = contextMenuC.state.buttonsState;
       const menus = calcContextMenuItems(contextMenuC.model.detoolbarItems, nodeData, evt, menuState);
       if (!menus.length) {
@@ -431,9 +513,11 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
       }, [item._text])])]);
     };
     const openPopover = (row, evt) => {
+      var _a2;
       if (overlay) {
         return;
       }
+      const appendTo = fullscreen && ((_a2 = ganttRef.value) == null ? void 0 : _a2.getElementRefs().rootRef.value);
       const panel = findNodeLayoutPanel(row._nodeId);
       const component = panel ? renderNodePanel(panel, row._deData) : renderNodeInfo(row);
       overlay = ibiz.overlay.createPopover((modal) => {
@@ -445,7 +529,8 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
         height: "auto",
         noArrow: true,
         placement: "bottom",
-        modalClass: ns.e("slider-popover")
+        modalClass: ns.e("slider-popover"),
+        appendTo
       });
       overlay == null ? void 0 : overlay.present(evt.target.children[0]);
     };
@@ -456,6 +541,7 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
     const renderSlider = () => {
       return vue.createVNode(vue.resolveComponent("x-gantt-slider"), {
         "allow-link": false,
+        "resize-mode": "dragonly",
         "move": c.state.sliderDraggable,
         "resize-left": c.state.sliderDraggable,
         "resize-right": c.state.sliderDraggable
@@ -528,6 +614,38 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
         c.saveColumnState();
       }
     };
+    const openLinkPathPopover = async (row, panelData, evt) => {
+      var _a2;
+      const panel = findNodeLinkLayoutPanel(row._nodeId);
+      if (linkOverlay || !panel) {
+        return;
+      }
+      const appendTo = fullscreen && ((_a2 = ganttRef.value) == null ? void 0 : _a2.getElementRefs().rootRef.value);
+      const component = renderNodePanel(panel, panelData);
+      linkOverlay = ibiz.overlay.createPopover((modal) => {
+        return vue.h(component, {
+          modal
+        });
+      }, void 0, {
+        width: "auto",
+        height: "auto",
+        noArrow: true,
+        autoClose: true,
+        modalClass: ns.e("link-path-popover"),
+        appendTo
+      });
+      linkOverlay == null ? void 0 : linkOverlay.present(evt.currentTarget);
+      await linkOverlay.onWillDismiss();
+      linkOverlay = null;
+    };
+    const handleClickLink = (_link, _event) => {
+      if (_link && _event) {
+        const curLink = c.state.links.find((_item) => _item._uuid === _link.id);
+        if (curLink) {
+          openLinkPathPopover(curLink._fromData, curLink._deData, _event);
+        }
+      }
+    };
     return {
       c,
       ns,
@@ -550,7 +668,9 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
       allowDrop,
       allowDrag,
       handleDrop,
-      onHeaderDragend
+      onHeaderDragend,
+      handleClickLink,
+      handleFullscreenChange
     };
   },
   render() {
@@ -566,6 +686,7 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
         "ref": "ganttRef",
         "data-id": "_id",
         "data": this.data,
+        "links": this.c.state.links,
         "row-height": 46,
         "expand-all": false,
         "headerDrag": true,
@@ -574,10 +695,17 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
         "children": "_children",
         "leaf": "_leaf",
         "expand-key": "_defaultExpand",
+        "link-props": {
+          fromKey: "_from",
+          toKey: "_to",
+          linkKey: "_uuid"
+        },
         "locale": this.locale,
+        "unit": this.c.state.unit,
         "draggable": {
           level: "all",
-          draggable: true
+          draggable: false,
+          draggableStateKey: "_draggable"
         },
         "allow-drop": this.allowDrop,
         "allow-drag": this.allowDrag,
@@ -590,6 +718,8 @@ const GanttControl = /* @__PURE__ */ vue.defineComponent({
         "onRowChecked": this.onCheck,
         "onHeaderDragend": this.onHeaderDragend,
         "onMoveSlider": this.onSliderMove,
+        "onClickLink": this.handleClickLink,
+        "onFullscreenChange": this.handleFullscreenChange,
         "primaryColor": this.ganttStyle.primaryColor,
         "headerStyle": {
           textColor: this.ganttStyle.textColor,

package/lib/control/gantt/gantt.css

@@ -1 +1 @@
-.ibiz-control-gantt{width:100%;height:100%}.ibiz-control-gantt .xg-root{--gantt-bg:var(--ibiz-color-bg-1);--gantt-bg-hover:var(--ibiz-color-disabled-border);--gantt-bg-active:var(--ibiz-color-disabled-border);--gantt-bg-checkmark:transparent;--gantt-bg-toolbar-item-hover:var(--ibiz-color-primary-light-default);--gantt-shadow:var(--ibiz-color-shadow);--gantt-shadow-toolbar-item:var(--ibiz-color-shadow);--gantt-border:var(--ibiz-color-tertiary-light-active);--gantt-border-hover:var(--ibiz-color-tertiary-light-active);--gantt-border-dashed:var(--ibiz-color-disabled-border);--gantt-border-toolbar-item:var(--ibiz-color-border);--gantt-border-separate-line:var(--ibiz-color-border);--gantt-text-0:var(--ibiz-color-text-0);--gantt-text-3:var(--ibiz-color-text-3);--gantt-white:var(--ibiz-color-white);--gantt-black:var(--ibiz-color-black);--gantt-color-primary:var(--ibiz-color-primary);--gantt-warning:var(--ibiz-color-warning)}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row{cursor:pointer}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row .xg-table-cell:not(:first-child)>div{padding:var(--ibiz-spacing-none)}.ibiz-control-gantt .xg-root .xg-table-cell>div{width:100%}.ibiz-control-gantt .xg-root .xg-table-cell>div .cell{height:100%}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.xg-slider-drag.xg-slider-level0{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider .xg-slider-block{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.is-no-width{display:none}.ibiz-control-gantt .xg-root .ibiz-control-gantt__slider--caption{position:sticky;left:8px}.ibiz-control-gantt .xg-root .is-exceeds-range .ibiz-control-gantt__slider::after{position:absolute;right:0;z-index:99;display:block;width:16px;height:100%;content:"";background-color:var(--ibiz-color-primary)}.ibiz-control-gantt--empty .xg-table-body{height:calc(100% - 86px)!important}.ibiz-control-gantt__slider{display:flex;align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-small)}.ibiz-control-gantt__slider--container-title .icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-gantt__slider--container-title .number{display:flex;align-items:center}.ibiz-control-gantt__slider--container-title .caption{margin:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-6);font-weight:var(--ibiz-font-weight-regular)}.ibiz-control-gantt__slider--container-content{display:flex;justify-content:space-between}.ibiz-control-gantt__slider--container-content .caption{margin:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-disabled-text)}.ibiz-control-gantt__slider--container-content .detail{display:flex;flex-direction:column;flex-grow:1;align-items:center}.ibiz-control-gantt__slider--caption{overflow:hidden;color:var(--ibiz-color-primary-text);text-overflow:ellipsis;white-space:nowrap}.ibiz-control-gantt__setting{display:flex;align-items:center}.ibiz-control-gantt__setting--icon{cursor:pointer;fill:var(--ibiz-color-primary)}.ibiz-control-gantt__slider-popover{z-index:300!important;width:auto;min-width:300px;padding:12px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column--ellipsis .ibiz-tree-grid-ex-field-column-text-container{min-width:0}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column-toolbar-container{flex-shrink:0}.ibiz-control-gantt .ibiz-tree-grid-ex-edit-column__editor{min-height:32px}.xg-view-toolbar-switch-action{--gantt-text-switch-item:var(--ibiz-color-text-3);--gantt-bg-hover-switch-item:var(--ibiz-color-bg-0)}
+.ibiz-control-gantt{width:100%;height:100%}.ibiz-control-gantt .xg-root{--gantt-bg:var(--ibiz-color-bg-1);--gantt-bg-hover:var(--ibiz-color-disabled-border);--gantt-bg-active:var(--ibiz-color-disabled-border);--gantt-bg-checkmark:transparent;--gantt-bg-toolbar-item-hover:var(--ibiz-color-primary-light-default);--gantt-shadow:var(--ibiz-color-shadow);--gantt-shadow-toolbar-item:var(--ibiz-color-shadow);--gantt-border:var(--ibiz-color-tertiary-light-active);--gantt-border-hover:var(--ibiz-color-tertiary-light-active);--gantt-border-dashed:var(--ibiz-color-disabled-border);--gantt-border-toolbar-item:var(--ibiz-color-border);--gantt-border-separate-line:var(--ibiz-color-border);--gantt-text-0:var(--ibiz-color-text-0);--gantt-text-3:var(--ibiz-color-text-3);--gantt-white:var(--ibiz-color-white);--gantt-black:var(--ibiz-color-black);--gantt-color-primary:var(--ibiz-color-primary);--gantt-warning:var(--ibiz-color-warning);--gantt-color-linking:var(--ibiz-color-primary);--gantt-link-path-hover:var(--ibiz-color-primary)}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row{cursor:pointer}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row .xg-table-cell:not(:first-child)>div{padding:var(--ibiz-spacing-none)}.ibiz-control-gantt .xg-root .xg-table-cell>div{width:100%}.ibiz-control-gantt .xg-root .xg-table-cell>div .cell{height:100%}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.xg-slider-drag.xg-slider-level0{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider .xg-slider-block{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.is-no-width{display:none}.ibiz-control-gantt .xg-root .ibiz-control-gantt__slider--caption{position:sticky;left:8px}.ibiz-control-gantt .xg-root .is-exceeds-range .ibiz-control-gantt__slider::after{position:absolute;right:0;z-index:99;display:block;width:16px;height:100%;content:"";background-color:var(--ibiz-color-primary)}.ibiz-control-gantt--empty .xg-table-body{height:calc(100% - 86px)!important}.ibiz-control-gantt__slider{display:flex;align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-small)}.ibiz-control-gantt__slider--container-title .icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-gantt__slider--container-title .number{display:flex;align-items:center}.ibiz-control-gantt__slider--container-title .caption{margin:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-6);font-weight:var(--ibiz-font-weight-regular)}.ibiz-control-gantt__slider--container-content{display:flex;justify-content:space-between}.ibiz-control-gantt__slider--container-content .caption{margin:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-disabled-text)}.ibiz-control-gantt__slider--container-content .detail{display:flex;flex-direction:column;flex-grow:1;align-items:center}.ibiz-control-gantt__slider--caption{overflow:hidden;color:var(--ibiz-color-primary-text);text-overflow:ellipsis;white-space:nowrap}.ibiz-control-gantt__setting{display:flex;align-items:center}.ibiz-control-gantt__setting--icon{cursor:pointer;fill:var(--ibiz-color-primary)}.ibiz-control-gantt__slider-popover{z-index:300!important;width:auto;min-width:300px;padding:12px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-gantt__link-path-popover{z-index:300!important;width:auto;min-width:300px;padding:12px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column--ellipsis .ibiz-tree-grid-ex-field-column-text-container{min-width:0}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column-toolbar-container{flex-shrink:0}.ibiz-control-gantt .ibiz-tree-grid-ex-edit-column__editor{min-height:32px}.xg-view-toolbar-switch-action{--gantt-text-switch-item:var(--ibiz-color-text-3);--gantt-bg-hover-switch-item:var(--ibiz-color-bg-0)}

package/lib/control/grid/grid/grid-control.util.cjs

@@ -73,6 +73,14 @@ function useITableEvent(c) {
       }
     }, 300);
   }
+  const allGridColumns = [];
+  core.recursiveIterate(
+    c.model,
+    (column) => {
+      allGridColumns.push(column);
+    },
+    { childrenFields: ["degridColumns"] }
+  );
   c.evt.on("onToggleRowExpansion", (event) => {
     const { row, expand } = event;
     if (tableRef.value) {
@@ -201,7 +209,7 @@ function useITableEvent(c) {
   }
   async function onRowClickDynamic(data, _column, event) {
     if (data.srfuf === runtime.Srfuf.CREATE) {
-      if (c.editShowMode === "row") {
+      if (c.editShowMode === "row" && !data.isGroupRow) {
         const row = c.findRowState(data);
         if (row)
           await c.switchRowEdit(row);
@@ -223,6 +231,11 @@ function useITableEvent(c) {
   }
   let forbidClick = false;
   async function onRowClick(data, _column, event) {
+    var _a;
+    if (data.isGroupRow) {
+      (_a = tableRef.value) == null ? void 0 : _a.store.loadOrToggle(data);
+      return;
+    }
     if (!event.shiftKey) {
       const index = c.findRowStateIndex(data);
       const isSelected = c.state.selectedData.includes(data);
@@ -258,40 +271,45 @@ function useITableEvent(c) {
     }, 200);
   }
   function onDbRowClick(data) {
-    if (data.srfuf === runtime.Srfuf.CREATE) {
+    if (data.srfuf === runtime.Srfuf.CREATE || data.isGroupRow)
       return;
-    }
     c.onDbRowClick(data);
   }
   function onSelectionChange(selection) {
     if (!forbidChange && !c.state.isLoading)
       c.setSelection(selection);
   }
+  const elSelection = vue.computed(() => {
+    const items = [];
+    const keys = c.state.selectedData.map((selected) => selected.srfkey);
+    if (tableRef.value)
+      core.recursiveIterate(
+        { children: tableRef.value.store.states.data.value },
+        (item) => {
+          if (keys.includes(item.srfkey))
+            items.push(item);
+        }
+      );
+    return items;
+  });
   vue.watch(
     [
       () => tableRef.value,
       () => c.state.isLoaded,
       () => c.state.selectedData
     ],
-    ([table, isLoaded, newVal]) => {
+    ([table, isLoaded, _newVal]) => {
       if (!isLoaded || !table)
         return;
-      if (c.state.singleSelect) {
-        if (newVal[0]) {
-          tableRef.value.setCurrentRow(newVal[0], true);
+      forbidChange = true;
+      setTimeout(() => {
+        if (c.state.singleSelect) {
+          table.setCurrentRow(elSelection.value[0]);
         } else {
-          tableRef.value.setCurrentRow();
+          table.store.states.selection.value = elSelection.value;
         }
-      } else {
-        forbidChange = true;
-        tableRef.value.clearSelection();
-        setTimeout(() => {
-          newVal.forEach(
-            (item) => tableRef.value.toggleRowSelection(item, true)
-          );
-          forbidChange = false;
-        });
-      }
+        forbidChange = false;
+      });
     }
   );
   function onSortChange(opts) {
@@ -336,9 +354,8 @@ function useITableEvent(c) {
     let activeClassName = "";
     if (c.state.selectedData.length > 0) {
       c.state.selectedData.forEach((data) => {
-        if (data === row) {
+        if (data === row || data.srfkey === row.srfkey)
           activeClassName = "current-row";
-        }
       });
     }
     const rowState = c.findRowState(row);
@@ -359,8 +376,7 @@ function useITableEvent(c) {
     _rowIndex,
     _columnIndex
   }) {
-    var _a;
-    const columnModel = (_a = c.model.degridColumns) == null ? void 0 : _a.find((gridColumn) => {
+    const columnModel = allGridColumns.find((gridColumn) => {
       return gridColumn.codeName === column.property;
     });
     if (columnModel && columnModel.headerSysCss && columnModel.headerSysCss.cssName) {
@@ -435,24 +451,19 @@ function useAppGridPagination(c) {
   }
   return { onPageChange, onPageSizeChange, onPageRefresh };
 }
-function useAppGridBase(c, props) {
+function useAppGridBase(c, props, tableRef) {
   const initSimpleData = () => {
-    if (!props.data) {
+    if (!props.data)
       return;
-    }
-    c.state.items = props.data;
+    const items = props.data.map((item) => new runtime.ControlVO(item));
+    c.state.items = items;
     if (c.runMode === "DESIGN") {
-      c.state.simpleData = props.data;
+      c.state.simpleData = items;
       c.state.total = props.data.length;
       c.state.curPage = 1;
       c.state.items = lodashEs.chunk(c.state.simpleData, c.state.size)[c.state.curPage - 1] || [];
     }
-    c.state.rows = c.state.items.map((item) => {
-      const row = new runtime.GridRowState(new runtime.ControlVO(item), c);
-      return row;
-    });
-    c.calcAggResult(c.state.items);
-    c.calcTotalData();
+    c.afterLoad({ isInitialLoad: true }, c.state.items);
   };
   const defaultSort = vue.computed(() => {
     var _a;
@@ -473,9 +484,8 @@ function useAppGridBase(c, props) {
   vue.watch(
     () => props.data,
     () => {
-      if (props.isSimple) {
+      if (props.isSimple)
         initSimpleData();
-      }
     },
     {
       deep: true
@@ -483,22 +493,31 @@ function useAppGridBase(c, props) {
   );
   const tableData = vue.computed(() => {
     const state = c.state;
-    if (c.model.enableGroup) {
+    if (c.state.enableGroup) {
+      const grouprowmode = c.controlParams.grouprowmode;
       const result = [];
       state.groups.forEach((item) => {
-        if (!item.children.length) {
+        if (!item.children.length)
           return;
+        if (grouprowmode === "NEWROW") {
+          result.push({
+            ...item,
+            srfkey: item.key,
+            tempsrfkey: item.key,
+            isGroupRow: true
+          });
+        } else {
+          const children = [...item.children];
+          const first = children.shift();
+          result.push({
+            tempsrfkey: (first == null ? void 0 : first.tempsrfkey) || item.caption,
+            srfkey: (first == null ? void 0 : first.srfkey) || item.caption,
+            isGroupData: true,
+            caption: item.caption,
+            first,
+            children
+          });
         }
-        const children = [...item.children];
-        const first = children.shift();
-        result.push({
-          tempsrfkey: (first == null ? void 0 : first.tempsrfkey) || item.caption,
-          srfkey: (first == null ? void 0 : first.srfkey) || item.caption,
-          isGroupData: true,
-          caption: item.caption,
-          first,
-          children
-        });
       });
       return result;
     }
@@ -590,6 +609,26 @@ function useAppGridBase(c, props) {
     rowIndex,
     columnIndex
   }) => {
+    var _a;
+    const spanMethodAttribute = (_a = c.model.controlAttributes) == null ? void 0 : _a.find((item) => {
+      return item.attrName === "span-method" && item.attrValue;
+    });
+    if (spanMethodAttribute) {
+      return runtime.ScriptFactory.execScriptFn(
+        {
+          ...c.getEventArgs(),
+          metadata: {
+            row,
+            column,
+            rowIndex,
+            columnIndex,
+            items: tableRef.value.store.states.data.value
+          }
+        },
+        spanMethodAttribute.attrValue,
+        { isAsync: false }
+      );
+    }
     const { property } = column;
     const { rowspankeys = [], colspankeys = [] } = c.controlParams;
     if (rowspankeys.length > 0 && rowspankeys.includes(property)) {
@@ -635,6 +674,16 @@ function useAppGridBase(c, props) {
         colspan
       };
     }
+    if (row.isGroupRow) {
+      const total = c.state.singleSelect ? renderColumns.value.length : renderColumns.value.length + 1;
+      const index = c.state.singleSelect ? 0 : 1;
+      if (columnIndex === index)
+        return { rowspan: 1, colspan: total };
+      return {
+        rowspan: 0,
+        colspan: 0
+      };
+    }
   };
   const headerDragend = (newWidth, oldWidth, column) => {
     const { property } = column;

package/lib/control/grid/grid/grid.cjs

@@ -20,10 +20,12 @@ function renderAttrs(model, params) {
   var _a;
   const attrs = {};
   (_a = model.controlAttributes) == null ? void 0 : _a.forEach((item) => {
-    if (item.attrName && item.attrValue) {
-      attrs[item.attrName] = runtime.ScriptFactory.execSingleLine(item.attrValue, {
-        ...params
-      });
+    if (item.attrName !== "span-method") {
+      if (item.attrName && item.attrValue) {
+        attrs[item.attrName] = runtime.ScriptFactory.execSingleLine(item.attrValue, {
+          ...params
+        });
+      }
     }
   });
   return attrs;
@@ -54,7 +56,7 @@ function renderFieldColumn(c, row) {
     controlRenders = []
   } = c.model;
   const panel = (_a = controlRenders.find((renderItem) => renderItem.renderType === "LAYOUTPANEL")) == null ? void 0 : _a.layoutPanel;
-  const columnType = (_b = c.model.userParam) == null ? void 0 : _b.columnType;
+  const columnType = (_b = c.model.userParam) == null ? void 0 : _b.columntype;
   if (panel) {
     content = vue.createVNode(vue.resolveComponent("iBizControlShell"), {
       "data": row.data,
@@ -96,7 +98,7 @@ function renderFieldColumn(c, row) {
       if (!grid.percentkeys.includes(fieldName)) {
         return "";
       }
-      const percentValue = Number(fieldValue.value);
+      const percentValue = Number(fieldValue);
       if (!Number.isNaN(percentValue)) {
         const {
           totalResult = {}
@@ -177,9 +179,14 @@ function renderColumn(c, model, renderColumns, index) {
       row
     }) => {
       let elRow = row;
-      if (row.isGroupData) {
+      if (elRow.isGroupRow)
+        return vue.createVNode("div", {
+          "class": "ibiz-grid-field-column"
+        }, [vue.createVNode("span", {
+          "class": "ibiz-grid-field-column__text"
+        }, [row.caption])]);
+      if (row.isGroupData)
         elRow = row.first;
-      }
       const rowState = c.findRowState(elRow);
       if (rowState) {
         if (model.columnType === "DEFGRIDCOLUMN" || model.columnType === "DEFTREEGRIDCOLUMN") {
@@ -315,10 +322,7 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
   }) {
     const c = vue3Util.useControlController((...args) => new runtime.GridController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
-    const {
-      zIndex
-    } = vue3Util.useUIStore();
-    c.state.zIndex = zIndex.increment();
+    vue3Util.useControlPopoverzIndex(c);
     const {
       sysCss
     } = c.model;
@@ -392,7 +396,7 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
       summaryMethod,
       spanMethod,
       headerDragend
-    } = gridControl_util.useAppGridBase(c, props);
+    } = gridControl_util.useAppGridBase(c, props, tableRef);
     const {
       renderPopover
     } = useRowEditPopover.useRowEditPopover(tableRef, c);
@@ -489,7 +493,6 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
         });
     };
     vue.onUnmounted(() => {
-      zIndex.decrement();
       if (cleanup !== core.NOOP)
         cleanup();
       if (cleanClick !== core.NOOP)
@@ -560,42 +563,45 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
       "controller": this.c
     }, {
       default: () => [vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-        "class": [this.ns.b(), this.ns.is("dynamic-grid", this.c.state.isAutoGrid), this.ns.is("show-header", !this.c.state.hideHeader), this.ns.is("enable-page", this.c.state.enablePagingBar), this.ns.is("enable-group", this.c.model.enableGroup), this.ns.is("single-select", state.singleSelect), this.ns.is("empty", state.items.length === 0), this.ns.is("enable-customized", this.c.model.enableCustomized)],
+        "class": [this.ns.b(), this.ns.is("dynamic-grid", this.c.state.isAutoGrid), this.ns.is("show-header", !this.c.state.hideHeader), this.ns.is("enable-page", this.c.state.enablePagingBar), this.ns.is("enable-group", this.c.state.enableGroup), this.ns.is("single-select", state.singleSelect), this.ns.is("empty", state.items.length === 0), this.ns.is("enable-customized", this.c.model.enableCustomized), this.ns.is("group-row-mode", this.c.controlParams.grouprowmode === "NEWROW")],
         "controller": this.c,
         "style": this.headerCssVars
       }, {
         default: () => [vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
+          "border": true,
           "ref": "tableRef",
+          "data": this.tableData,
+          "row-key": "tempsrfkey",
+          "tooltip-effect": "light",
           "class": this.ns.e("table"),
+          "scrollbar-always-on": true,
+          "onRowClick": this.onRowClick,
+          "span-method": this.spanMethod,
           "default-sort": this.defaultSort,
-          "border": true,
-          "show-header": !this.c.state.hideHeader,
           "show-summary": this.c.enableAgg,
+          "onSortChange": this.onSortChange,
+          "onRowDblclick": this.onDbRowClick,
           "summary-method": this.summaryMethod,
-          "highlight-current-row": state.singleSelect,
-          "row-class-name": this.handleRowClassName,
-          "header-cell-class-name": this.handleHeaderCellClassName,
-          "row-key": "tempsrfkey",
-          "data": this.tableData,
+          "onHeaderDragend": this.headerDragend,
           "default-expand-all": defaultExpandAll,
-          "span-method": this.spanMethod,
-          "onRowClick": this.onRowClick,
-          "onRowDblclick": this.onDbRowClick,
+          "show-header": !this.c.state.hideHeader,
+          "row-class-name": this.handleRowClassName,
+          "highlight-current-row": state.singleSelect,
+          "expandRowKeys": this.c.state.expandRowKeys,
           "onSelectionChange": this.onSelectionChange,
-          "onSortChange": this.onSortChange,
-          "onHeaderDragend": this.headerDragend,
-          "tooltip-effect": "light",
-          "scrollbar-always-on": true
+          "header-cell-class-name": this.handleHeaderCellClassName,
+          "onExpandChange": (row, expanded) => this.c.expandChange(row, expanded)
         }, this.$attrs, renderAttrs(this.c.model, {
           ...this.c.getEventArgs()
         })), {
           empty: this.renderNoData,
           default: () => {
             return [this.c.enableRowEditOrder && this.renderDragIconColumn(), !state.singleSelect && vue.createVNode(vue.resolveComponent("el-table-column"), {
-              "class-name": this.ns.e("selection"),
-              "type": "selection",
               "width": "55",
-              "align": "center"
+              "align": "center",
+              "type": "selection",
+              "reserve-selection": true,
+              "class-name": this.ns.e("selection")
             }, null), this.renderRowDetail(), this.renderColumns.map((model, index) => {
               return this.renderTableColumn(model, index);
             })];