@ibiz-template/vue3-components 0.7.40-alpha.9 → 0.7.41-alpha.0

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

@@ -32,21 +32,9 @@ function useITableEvent(c) {
   const tableRef = vue.ref();
   let forbidChange = false;
   let isGridUISort = false;
-  let isCtrlDown = false;
-  let cleanKeyDown = core.NOOP;
-  let cleanKeyUp = core.NOOP;
   let cleanClick = core.NOOP;
   let cleanEnter = core.NOOP;
-  cleanKeyDown = core.listenJSEvent(window, "keydown", (e) => {
-    if (e.code === "ControlLeft" && !c.state.singleSelect) {
-      isCtrlDown = true;
-    }
-  });
-  cleanKeyUp = core.listenJSEvent(window, "keyup", (e) => {
-    if (e.code === "ControlLeft" && !c.state.singleSelect) {
-      isCtrlDown = false;
-    }
-  });
+  let cleanTab = core.NOOP;
   if (c.state.isAutoGrid) {
     if (c.editShowMode === "row") {
       cleanClick = core.listenJSEvent(window, "click", async (event) => {
@@ -100,7 +88,118 @@ function useITableEvent(c) {
       }
     }
   });
-  async function onRowClickDynamic(data, _column, _event) {
+  const editColumn = vue.computed(() => {
+    const columns = [];
+    core.recursiveIterate({ children: c.state.columnStates }, (columnState) => {
+      if (!columnState.uaColumn && !columnState.hidden) {
+        const model = c.columns[columnState.key].model;
+        if (model.enableRowEdit)
+          columns.push(model);
+      }
+    });
+    return columns;
+  });
+  const tabListener = (event) => {
+    var _a, _b;
+    const tableEl = tableRef.value.$el;
+    const currentElement = document.activeElement;
+    if (event.key === "Tab" && tableEl.contains(currentElement)) {
+      event.preventDefault();
+      const classList = [];
+      core.eventPath(event).forEach((e) => {
+        if (e && e.classList) {
+          classList.push(...e.classList);
+        }
+      });
+      const key = (_a = classList.filter((className) => className.startsWith("id-"))[0]) == null ? void 0 : _a.substring(3);
+      const columnName = (_b = classList.filter((className) => className.startsWith("defgridcolumn-"))[0]) == null ? void 0 : _b.substring(14);
+      const columnIndex = editColumn.value.findIndex(
+        (column) => column.id.toLowerCase() === (columnName == null ? void 0 : columnName.toLowerCase())
+      );
+      const rowIndex = c.state.rows.findIndex(
+        (item) => key && item.data.srfkey === key
+      );
+      const row = rowIndex !== -1 ? c.state.rows[rowIndex] : void 0;
+      const nextRow = rowIndex !== -1 ? c.state.rows[rowIndex + 1] : c.state.rows.find((_row) => _row.data.srfuf === runtime.Srfuf.UPDATE);
+      if (row) {
+        if (nextRow || columnIndex < editColumn.value.length - 1) {
+          Object.keys(row.editColStates).forEach((fieldName) => {
+            row.editColStates[fieldName].editable = false;
+          });
+        }
+        if (columnIndex < editColumn.value.length - 1) {
+          row.editColStates[editColumn.value[columnIndex + 1].id.toLowerCase()].editable = true;
+        } else if (nextRow) {
+          nextRow.editColStates[editColumn.value[0].id.toLowerCase()].editable = true;
+        }
+      } else {
+        const focusableElements = Array.from(
+          tableEl.querySelectorAll(
+            'tbody select, tbody textarea, tbody input:not([type="checkbox"])'
+          )
+        );
+        const currentIndex = focusableElements.indexOf(currentElement);
+        const nextElement = focusableElements[currentIndex + 1];
+        if (nextElement) {
+          nextElement.focus();
+        } else if (nextRow) {
+          nextRow.editColStates[editColumn.value[0].id.toLowerCase()].editable = true;
+        }
+      }
+    }
+  };
+  vue.watch(
+    () => tableRef.value,
+    (table) => {
+      const { enableRowEdit } = c.model;
+      if (table && enableRowEdit && c.editShowMode === "cell") {
+        cleanTab = core.listenJSEvent(window, "keydown", tabListener, {
+          capture: true
+        });
+      }
+    }
+  );
+  function handleCtrlSelect(data) {
+    const selection = [...c.state.selectedData];
+    const index = selection.findIndex((x) => x.srfkey === data.srfkey);
+    if (index !== -1) {
+      selection.splice(index, 1);
+      c.setSelection(selection);
+    } else {
+      c.setSelection([...selection, data]);
+    }
+  }
+  let lastSelectedIndex = null;
+  function handleShiftSelect(data) {
+    var _a;
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+    const index = c.findRowStateIndex(data);
+    const selection = [...c.state.selectedData];
+    const isSelected = selection.includes(data);
+    if (lastSelectedIndex !== null) {
+      const start = Math.min(lastSelectedIndex, index);
+      const end = Math.max(lastSelectedIndex, index);
+      if (isSelected) {
+        for (let i = start; i <= end; i++) {
+          const itemIndex = selection.indexOf(c.state.items[i]);
+          if (itemIndex !== -1) {
+            selection.splice(itemIndex, 1);
+          }
+        }
+      } else {
+        for (let i = start; i <= end; i++) {
+          if (!selection.includes(c.state.items[i])) {
+            selection.push(c.state.items[i]);
+          }
+        }
+      }
+      c.setSelection(selection);
+    } else {
+      c.setSelection([data]);
+    }
+    lastSelectedIndex = index;
+  }
+  async function onRowClickDynamic(data, _column, event) {
     if (data.srfuf === runtime.Srfuf.CREATE) {
       if (c.editShowMode === "row") {
         const row = c.findRowState(data);
@@ -109,46 +208,37 @@ function useITableEvent(c) {
       }
       return;
     }
-    if (isCtrlDown) {
-      const selection = [...c.state.selectedData];
-      const index = selection.findIndex((x) => x.srfkey === data.srfkey);
-      if (index !== -1) {
-        selection.splice(index, 1);
-        c.setSelection(selection);
-      } else {
-        c.setSelection([...selection, data]);
-      }
-      return;
-    }
+    if (event.ctrlKey && !c.state.singleSelect)
+      return handleCtrlSelect(data);
+    if (event.shiftKey && !c.state.singleSelect)
+      return handleShiftSelect(data);
     if (c.editShowMode === "row" && c.allowRowEdit) {
       const row = c.findRowState(data);
       if (row) {
         await c.switchRowEdit(row);
       }
     } else {
-      c.onRowClick(data);
+      await c.onRowClick(data);
     }
   }
-  async function onRowClick(data, _column, _event) {
-    if (c.state.isAutoGrid) {
-      await onRowClickDynamic(data, _column, _event);
-      return;
+  let forbidClick = false;
+  async function onRowClick(data, _column, event) {
+    if (!event.shiftKey) {
+      const index = c.findRowStateIndex(data);
+      const isSelected = c.state.selectedData.includes(data);
+      lastSelectedIndex = isSelected ? null : index;
     }
-    if (data.srfuf === runtime.Srfuf.CREATE) {
+    if (c.state.isAutoGrid) {
+      await onRowClickDynamic(data, _column, event);
       return;
     }
-    if (isCtrlDown) {
-      const selection = [...c.state.selectedData];
-      const index = selection.findIndex((x) => x.srfkey === data.srfkey);
-      if (index !== -1) {
-        selection.splice(index, 1);
-        c.setSelection(selection);
-      } else {
-        c.setSelection([...selection, data]);
-      }
+    if (data.srfuf === runtime.Srfuf.CREATE || forbidClick)
       return;
-    }
-    const target = _event.target;
+    if (event.ctrlKey && !c.state.singleSelect)
+      return handleCtrlSelect(data);
+    if (event.shiftKey && !c.state.singleSelect)
+      return handleShiftSelect(data);
+    const target = event.target;
     const { classList } = target.parentElement || {};
     if (classList && classList.contains("el-table-column--selection")) {
       tableRef.value.toggleRowSelection(data);
@@ -160,8 +250,12 @@ function useITableEvent(c) {
         await c.switchRowEdit(row, true);
       }
     } else {
-      c.onRowClick(data);
+      await c.onRowClick(data);
     }
+    forbidClick = true;
+    setTimeout(() => {
+      forbidClick = false;
+    }, 200);
   }
   function onDbRowClick(data) {
     if (data.srfuf === runtime.Srfuf.CREATE) {
@@ -170,9 +264,8 @@ function useITableEvent(c) {
     c.onDbRowClick(data);
   }
   function onSelectionChange(selection) {
-    if (!forbidChange) {
+    if (!forbidChange && !c.state.isLoading)
       c.setSelection(selection);
-    }
   }
   vue.watch(
     [
@@ -181,9 +274,8 @@ function useITableEvent(c) {
       () => c.state.selectedData
     ],
     ([table, isLoaded, newVal]) => {
-      if (!isLoaded || !table) {
+      if (!isLoaded || !table)
         return;
-      }
       if (c.state.singleSelect) {
         if (newVal[0]) {
           tableRef.value.setCurrentRow(newVal[0], true);
@@ -193,8 +285,12 @@ function useITableEvent(c) {
       } else {
         forbidChange = true;
         tableRef.value.clearSelection();
-        newVal.forEach((item) => tableRef.value.toggleRowSelection(item, true));
-        forbidChange = false;
+        setTimeout(() => {
+          newVal.forEach(
+            (item) => tableRef.value.toggleRowSelection(item, true)
+          );
+          forbidChange = false;
+        });
       }
     }
   );
@@ -312,10 +408,9 @@ function useITableEvent(c) {
     onSortChange,
     handleRowClassName,
     handleHeaderCellClassName,
-    cleanKeyDown,
-    cleanKeyUp,
     cleanClick,
-    cleanEnter
+    cleanEnter,
+    cleanTab
   };
 }
 function useAppGridPagination(c) {
@@ -416,11 +511,57 @@ function useAppGridBase(c, props) {
     }
     return state.rows.map((row) => row.data);
   });
+  const calcGroupColumns = (groupColumn) => {
+    const result = { ...groupColumn };
+    const columns = [];
+    const degridColumns = groupColumn.degridColumns || [];
+    degridColumns.forEach((column) => {
+      var _a, _b;
+      if (column.columnType === "GROUPGRIDCOLUMN") {
+        const children = calcGroupColumns(column);
+        if (children.degridColumns && children.degridColumns.length) {
+          columns.push(children);
+        }
+      } else {
+        const columnState = c.state.columnStates.find(
+          (item) => item.key === column.codeName
+        );
+        if (columnState && !columnState.hidden) {
+          const columnModel = ((_a = c.fieldColumns[columnState.key]) == null ? void 0 : _a.model) || ((_b = c.uaColumns[columnState.key]) == null ? void 0 : _b.model);
+          if (columnModel) {
+            columns.push(columnModel);
+          }
+        }
+      }
+    });
+    result.degridColumns = columns;
+    return result;
+  };
   const renderColumns = vue.computed(() => {
+    const columns = [];
     if (c.isMultistageHeader) {
-      return c.model.degridColumns || [];
+      const degridColumns = c.model.degridColumns || [];
+      degridColumns.forEach((column) => {
+        var _a, _b;
+        if (column.columnType === "GROUPGRIDCOLUMN") {
+          const groupColumn = calcGroupColumns(column);
+          if (groupColumn.degridColumns && groupColumn.degridColumns.length) {
+            columns.push(groupColumn);
+          }
+        } else {
+          const columnState = c.state.columnStates.find(
+            (item) => item.key === column.codeName
+          );
+          if (columnState && !columnState.hidden) {
+            const columnModel = ((_a = c.fieldColumns[columnState.key]) == null ? void 0 : _a.model) || ((_b = c.uaColumns[columnState.key]) == null ? void 0 : _b.model);
+            if (columnModel) {
+              columns.push(columnModel);
+            }
+          }
+        }
+      });
+      return columns;
     }
-    const columns = [];
     c.state.columnStates.forEach((item) => {
       var _a, _b;
       if (item.hidden) {
@@ -639,27 +780,33 @@ function useGridDraggable(tableRef, ns, c) {
     cleanups.push(cleanDragOver);
     cleanups.push(cleanDragEnd);
   };
+  const cleanup = () => {
+    cleanups.forEach((cleanupF) => {
+      cleanupF();
+    });
+  };
+  const setDragEvent = () => {
+    cleanup();
+    const grid = tableRef.value.$el;
+    if (grid) {
+      const rows = grid.getElementsByClassName("el-table__row");
+      rows.forEach((item) => {
+        setRowDragEvent(item);
+      });
+    }
+  };
   vue.watch(
     [() => tableRef.value, () => c.state.isLoaded],
     (table, isLoaded) => {
       if (!isLoaded || !table) {
         return;
       }
-      const grid = tableRef.value.$el;
-      if (grid) {
-        const rows = grid.getElementsByClassName("el-table__row");
-        rows.forEach((item) => {
-          setRowDragEvent(item);
-        });
-      }
+      setDragEvent();
     }
   );
   return {
-    cleanup: () => {
-      cleanups.forEach((cleanup) => {
-        cleanup();
-      });
-    }
+    cleanup,
+    setDragEvent
   };
 }
 

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

@@ -29,7 +29,7 @@ function renderAttrs(model, params) {
   return attrs;
 }
 function renderFieldColumn(c, row) {
-  var _a, _b;
+  var _a, _b, _c;
   const ns = vue3Util.useNamespace("grid-field-column");
   const fieldValue = row.data[c.fieldName];
   let actionToolbar;
@@ -54,6 +54,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;
   if (panel) {
     content = vue.createVNode(vue.resolveComponent("iBizControlShell"), {
       "data": row.data,
@@ -61,6 +62,12 @@ function renderFieldColumn(c, row) {
       "context": c.context,
       "params": c.params
     }, null);
+  } else if (columnType === "attachment") {
+    content = vue.createVNode(vue.resolveComponent("iBizAttachmentColumn"), {
+      "data": row.data,
+      "value": fieldValue,
+      "controller": c
+    }, null);
   } else {
     const showValue = c.formatValue(fieldValue);
     const tooltip = vue.computed(() => {
@@ -120,7 +127,7 @@ function renderFieldColumn(c, row) {
     }
   };
   return vue.createVNode("div", {
-    "class": [ns.b(), c.clickable(row) && ns.m("clickable"), ns.m(c.grid.overflowMode), (_b = c.model.cellSysCss) == null ? void 0 : _b.cssName, ns.is("has-action", !!c.model.deuiactionGroup)],
+    "class": [ns.b(), c.clickable(row) && ns.m("clickable"), ns.m(c.grid.overflowMode), (_c = c.model.cellSysCss) == null ? void 0 : _c.cssName, ns.is("has-action", !!c.model.deuiactionGroup)],
     "onClick": onCellClick
   }, [c.model.deuiactionGroup ? [vue.createVNode("div", {
     "class": ns.b("text-container")
@@ -129,7 +136,7 @@ function renderFieldColumn(c, row) {
   }, [actionToolbar])] : content]);
 }
 function renderColumn(c, model, renderColumns, index) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     codeName: columnName,
     width
@@ -140,7 +147,7 @@ function renderColumn(c, model, renderColumns, index) {
   const widthName = widthFlexGrow ? "min-width" : "width";
   const tempWidth = (columnState == null ? void 0 : columnState.columnWidth) || width;
   return vue.createVNode(vue.resolveComponent("el-table-column"), vue.mergeProps({
-    "className": (_a = model.columnType) == null ? void 0 : _a.toLowerCase(),
+    "className": "".concat((_a = model.columnType) == null ? void 0 : _a.toLowerCase(), " ").concat((_b = model.columnType) == null ? void 0 : _b.toLowerCase(), "-").concat(columnName),
     "label": model.caption,
     "prop": columnName
   }, {
@@ -156,8 +163,16 @@ function renderColumn(c, model, renderColumns, index) {
         return 1;
       return 0;
     },
-    "align": ((_b = model.align) == null ? void 0 : _b.toLowerCase()) || "center"
+    "align": ((_c = model.align) == null ? void 0 : _c.toLowerCase()) || "center"
   }), {
+    header: ({
+      column
+    }) => {
+      return vue.createVNode(vue.resolveComponent("iBizGridColumnHeader"), {
+        "key": column.property,
+        "controller": columnC
+      }, null);
+    },
     default: ({
       row
     }) => {
@@ -192,8 +207,10 @@ function renderChildColumn(c, model, renderColumns, index) {
   if (model.columnType === "GROUPGRIDCOLUMN") {
     const childColumns = ((_a = model.degridColumns) == null ? void 0 : _a.filter((item) => !item.hideDefault && !item.hiddenDataItem)) || [];
     const {
-      width
+      width,
+      codeName
     } = model;
+    const columnC = c.columns[codeName];
     const align = ((_b = model.align) == null ? void 0 : _b.toLowerCase()) || "center";
     return vue.createVNode(vue.resolveComponent("el-table-column"), {
       "prop": model.codeName,
@@ -201,6 +218,14 @@ function renderChildColumn(c, model, renderColumns, index) {
       "min-width": width,
       "align": align
     }, {
+      header: ({
+        column
+      }) => {
+        return vue.createVNode(vue.resolveComponent("iBizGridColumnHeader"), {
+          "key": column.property,
+          "controller": columnC
+        }, null);
+      },
       default: () => {
         return childColumns.map((column, index2) => {
           return renderChildColumn(c, column, renderColumns, index2);
@@ -213,49 +238,73 @@ function renderChildColumn(c, model, renderColumns, index) {
 const GridControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizGridControl",
   props: {
+    /**
+     * @description 表格模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
     /**
-     * 部件行数据默认激活模式
-     * - 0 不激活
-     * - 1 单击激活
-     * - 2 双击激活(默认值)
-     *
-     * @type {(number | 0 | 1 | 2)}
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
      */
     mdctrlActiveMode: {
       type: Number,
       default: void 0
     },
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
       type: Boolean,
       default: void 0
     },
+    /**
+     * @description 是否启用行编辑
+     */
     rowEditOpen: {
       type: Boolean,
       default: void 0
     },
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
     isSimple: {
       type: Boolean,
       required: false
     },
+    /**
+     * @description 简单模式下传入的数据
+     */
     data: {
       type: Array,
       required: false
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true
@@ -282,10 +331,9 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
       onSortChange,
       handleRowClassName,
       handleHeaderCellClassName,
-      cleanKeyDown = core.NOOP,
-      cleanKeyUp = core.NOOP,
       cleanClick = core.NOOP,
-      cleanEnter = core.NOOP
+      cleanEnter = core.NOOP,
+      cleanTab = core.NOOP
     } = gridControl_util.useITableEvent(c);
     const {
       onPageChange,
@@ -296,8 +344,14 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
       headerCssVars
     } = gridControl_util.useGridHeaderStyle(tableRef, ns);
     const {
-      cleanup = core.NOOP
+      cleanup = core.NOOP,
+      setDragEvent
     } = gridControl_util.useGridDraggable(tableRef, ns, c);
+    c.evt.on("onLoadSuccess", () => {
+      if (setDragEvent) {
+        setDragEvent();
+      }
+    });
     const renderNoData = () => {
       var _a;
       const {
@@ -405,23 +459,45 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
         }
       });
     };
+    const renderRowDetail = () => {
+      const {
+        navAppViewId,
+        navViewHeight
+      } = c.model;
+      if (navAppViewId && c.state.showRowDetail)
+        return vue.createVNode(vue.resolveComponent("el-table-column"), {
+          "type": "expand"
+        }, {
+          default: ({
+            row
+          }) => {
+            const {
+              context,
+              params
+            } = c.calcNavParams(row);
+            const style = {
+              height: navViewHeight ? "".concat(navViewHeight, "px") : "auto"
+            };
+            return vue.h(vue.resolveComponent("IBizViewShell"), {
+              style,
+              params,
+              context,
+              viewId: navAppViewId,
+              class: ns.b("row-detail-view")
+            });
+          }
+        });
+    };
     vue.onUnmounted(() => {
       zIndex.decrement();
-      if (cleanup !== core.NOOP) {
+      if (cleanup !== core.NOOP)
         cleanup();
-      }
-      if (cleanKeyDown !== core.NOOP) {
-        cleanKeyDown();
-      }
-      if (cleanKeyUp !== core.NOOP) {
-        cleanKeyUp();
-      }
-      if (cleanClick !== core.NOOP) {
+      if (cleanClick !== core.NOOP)
         cleanClick();
-      }
-      if (cleanEnter !== core.NOOP) {
+      if (cleanEnter !== core.NOOP)
         cleanEnter();
-      }
+      if (cleanTab !== core.NOOP)
+        cleanTab();
     });
     const isLodeMoreDisabled = vue.computed(() => {
       if (c.model.pagingMode !== 2) {
@@ -445,32 +521,33 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
-      sysCssName,
       tableRef,
       tableData,
+      sysCssName,
+      defaultSort,
       renderColumns,
-      renderTableColumn,
-      onDbRowClick,
+      headerCssVars,
+      infiniteScroll,
+      infiniteScrollKey,
+      isLodeMoreDisabled,
       onRowClick,
-      onSelectionChange,
+      spanMethod,
       onSortChange,
+      onDbRowClick,
       onPageChange,
-      onPageSizeChange,
-      onPageRefresh,
-      handleRowClassName,
-      handleHeaderCellClassName,
       renderNoData,
       summaryMethod,
-      spanMethod,
       headerDragend,
       renderPopover,
-      defaultSort,
+      onPageRefresh,
+      renderRowDetail,
+      onPageSizeChange,
+      renderTableColumn,
+      onSelectionChange,
+      handleRowClassName,
       renderBatchToolBar,
-      headerCssVars,
       renderDragIconColumn,
-      isLodeMoreDisabled,
-      infiniteScroll,
-      infiniteScrollKey
+      handleHeaderCellClassName
     };
   },
   render() {
@@ -519,7 +596,7 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
               "type": "selection",
               "width": "55",
               "align": "center"
-            }, null), this.renderColumns.map((model, index) => {
+            }, null), this.renderRowDetail(), this.renderColumns.map((model, index) => {
               return this.renderTableColumn(model, index);
             })];
           },