@ibiz-template/vue3-components 0.7.39 → 0.7.40

package/es/control/grid/grid/grid.d.ts

@@ -1,56 +1,76 @@
-import { PropType, VNode } from 'vue';
+import { VNode, PropType } from 'vue';
 import { IDEGrid, IDEGridColumn } from '@ibiz/model-core';
-import { GridController, GridFieldColumnController, GridRowState, IControlProvider } from '@ibiz-template/runtime';
+import { GridRowState, GridController, IControlProvider, GridFieldColumnController } from '@ibiz-template/runtime';
 import './grid.scss';
 export declare function renderFieldColumn(c: GridFieldColumnController, row: GridRowState): JSX.Element;
 export declare function renderColumn(c: GridController, model: IDEGridColumn, renderColumns: IDEGridColumn[], index: number): VNode | null;
 export declare function renderChildColumn(c: GridController, model: IDEGridColumn, renderColumns: IDEGridColumn[], index: number): VNode | null;
 export declare const GridControl: import("vue").DefineComponent<{
+    /**
+     * @description 表格模型数据
+     */
     modelData: {
         type: PropType<IDEGrid>;
         required: true;
     };
+    /**
+     * @description 应用上下文对象
+     */
     context: {
-        type: PropType<IContext>;
+        type: PropType<import("@ibiz-template/core").IApiContext>;
         required: true;
     };
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
-        type: PropType<IParams>;
+        type: PropType<import("@ibiz-template/core").IApiParams>;
         default: () => {};
     };
+    /**
+     * @description 部件适配器
+     */
     provider: {
         type: PropType<IControlProvider>;
     };
     /**
-     * 部件行数据默认激活模式
-     * - 0 不激活
-     * - 1 单击激活
-     * - 2 双击激活(默认值)
-     *
-     * @type {(number | 0 | 1 | 2)}
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
      */
     mdctrlActiveMode: {
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否启用行编辑
+     */
     rowEditOpen: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
     isSimple: {
         type: BooleanConstructor;
         required: false;
     };
+    /**
+     * @description 简单模式下传入的数据
+     */
     data: {
         type: {
-            (arrayLength: number): IData[];
-            (...items: IData[]): IData[];
-            new (arrayLength: number): IData[];
-            new (...items: IData[]): IData[];
+            (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            new (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            new (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];
@@ -62,6 +82,10 @@ export declare const GridControl: import("vue").DefineComponent<{
         };
         required: false;
     };
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -69,97 +93,118 @@ export declare const GridControl: import("vue").DefineComponent<{
 }, {
     c: GridController<IDEGrid, import("@ibiz-template/runtime").IGridState, import("@ibiz-template/runtime").IGridEvent>;
     ns: import("@ibiz-template/core").Namespace;
+    tableRef: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
+    tableData: import("vue").Ref<import("@ibiz-template/core").IApiData>;
     sysCssName: string | undefined;
-    tableRef: import("vue").Ref<IData | undefined>;
-    tableData: import("vue").Ref<IData>;
+    defaultSort: import("vue").Ref<import("@ibiz-template/core").IApiData>;
     renderColumns: import("vue").Ref<IDEGridColumn[]>;
-    renderTableColumn: (model: IDEGridColumn, index: number) => VNode | null;
-    onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
-    onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
-    onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
+    headerCssVars: import("@ibiz-template/core").IApiData;
+    infiniteScroll: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
+    infiniteScrollKey: import("vue").Ref<string>;
+    isLodeMoreDisabled: import("vue").ComputedRef<boolean>;
+    onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: import("@ibiz-template/core").IApiData, event: MouseEvent) => Promise<void>;
+    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
+        row: import("@ibiz-template/core").IApiData;
+        column: import("@ibiz-template/core").IApiData;
+        rowIndex: number;
+        columnIndex: number;
+    }) => void | import("@ibiz-template/core").IApiData;
     onSortChange: (opts: {
-        _column: IData;
+        _column: import("@ibiz-template/core").IApiData;
         prop: string;
         order: "ascending" | "descending";
     }) => void;
+    onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
     onPageChange: (page: number) => void;
-    onPageSizeChange: (size: number) => void;
+    renderNoData: () => VNode | null;
+    summaryMethod: ({ columns, }: {
+        columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<import("@ibiz-template/core").IApiData>[];
+        data: import("@ibiz-template/core").IApiData[];
+    }) => string[];
+    headerDragend: (newWidth: number, oldWidth: number, column: import("@ibiz-template/core").IApiData) => void;
+    renderPopover: () => JSX.Element[];
     onPageRefresh: () => void;
+    renderRowDetail: () => JSX.Element | undefined;
+    onPageSizeChange: (size: number) => void;
+    renderTableColumn: (model: IDEGridColumn, index: number) => VNode | null;
+    onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
     handleRowClassName: ({ row }: {
-        row: IData;
+        row: import("@ibiz-template/core").IApiData;
     }) => string;
+    renderBatchToolBar: () => VNode | undefined;
+    renderDragIconColumn: () => JSX.Element;
     handleHeaderCellClassName: ({ _row, column, _rowIndex, _columnIndex, }: {
-        _row: IData;
-        column: IData;
+        _row: import("@ibiz-template/core").IApiData;
+        column: import("@ibiz-template/core").IApiData;
         _rowIndex: number;
         _columnIndex: number;
     }) => string;
-    renderNoData: () => VNode | null;
-    summaryMethod: ({ columns, }: {
-        columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
-        data: IData[];
-    }) => string[];
-    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
-        row: IData;
-        column: IData;
-        rowIndex: number;
-        columnIndex: number;
-    }) => void | IData;
-    headerDragend: (newWidth: number, oldWidth: number, column: IData) => void;
-    renderPopover: () => JSX.Element[];
-    defaultSort: import("vue").Ref<IData>;
-    renderBatchToolBar: () => VNode | undefined;
-    headerCssVars: IData;
-    renderDragIconColumn: () => JSX.Element;
-    isLodeMoreDisabled: import("vue").ComputedRef<boolean>;
-    infiniteScroll: import("vue").Ref<IData | undefined>;
-    infiniteScrollKey: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 表格模型数据
+     */
     modelData: {
         type: PropType<IDEGrid>;
         required: true;
     };
+    /**
+     * @description 应用上下文对象
+     */
     context: {
-        type: PropType<IContext>;
+        type: PropType<import("@ibiz-template/core").IApiContext>;
         required: true;
     };
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
-        type: PropType<IParams>;
+        type: PropType<import("@ibiz-template/core").IApiParams>;
         default: () => {};
     };
+    /**
+     * @description 部件适配器
+     */
     provider: {
         type: PropType<IControlProvider>;
     };
     /**
-     * 部件行数据默认激活模式
-     * - 0 不激活
-     * - 1 单击激活
-     * - 2 双击激活(默认值)
-     *
-     * @type {(number | 0 | 1 | 2)}
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
      */
     mdctrlActiveMode: {
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否启用行编辑
+     */
     rowEditOpen: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
     isSimple: {
         type: BooleanConstructor;
         required: false;
     };
+    /**
+     * @description 简单模式下传入的数据
+     */
     data: {
         type: {
-            (arrayLength: number): IData[];
-            (...items: IData[]): IData[];
-            new (arrayLength: number): IData[];
-            new (...items: IData[]): IData[];
+            (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
+            new (arrayLength: number): import("@ibiz-template/core").IApiData[];
+            new (...items: import("@ibiz-template/core").IApiData[]): import("@ibiz-template/core").IApiData[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];
@@ -171,12 +216,16 @@ export declare const GridControl: import("vue").DefineComponent<{
         };
         required: false;
     };
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
-    params: IParams;
+    params: import("@ibiz-template/core").IApiParams;
     mdctrlActiveMode: number;
     singleSelect: boolean;
     rowEditOpen: boolean;

package/es/control/grid/grid/grid.mjs

@@ -27,7 +27,7 @@ function renderAttrs(model, params) {
   return attrs;
 }
 function renderFieldColumn(c, row) {
-  var _a, _b;
+  var _a, _b, _c;
   const ns = useNamespace("grid-field-column");
   const fieldValue = row.data[c.fieldName];
   let actionToolbar;
@@ -52,6 +52,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 = createVNode(resolveComponent("iBizControlShell"), {
       "data": row.data,
@@ -59,6 +60,12 @@ function renderFieldColumn(c, row) {
       "context": c.context,
       "params": c.params
     }, null);
+  } else if (columnType === "attachment") {
+    content = createVNode(resolveComponent("iBizAttachmentColumn"), {
+      "data": row.data,
+      "value": fieldValue,
+      "controller": c
+    }, null);
   } else {
     const showValue = c.formatValue(fieldValue);
     const tooltip = computed(() => {
@@ -118,7 +125,7 @@ function renderFieldColumn(c, row) {
     }
   };
   return 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 ? [createVNode("div", {
     "class": ns.b("text-container")
@@ -127,7 +134,7 @@ function renderFieldColumn(c, row) {
   }, [actionToolbar])] : content]);
 }
 function renderColumn(c, model, renderColumns, index) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     codeName: columnName,
     width
@@ -138,16 +145,32 @@ function renderColumn(c, model, renderColumns, index) {
   const widthName = widthFlexGrow ? "min-width" : "width";
   const tempWidth = (columnState == null ? void 0 : columnState.columnWidth) || width;
   return createVNode(resolveComponent("el-table-column"), 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
   }, {
     [widthName]: tempWidth
   }, {
     "fixed": columnState.fixed,
-    "sortable": model.enableSort ? "custom" : false,
-    "align": ((_b = model.align) == null ? void 0 : _b.toLowerCase()) || "center"
+    "sortable": model.enableSort ? c.model.sortMode === "LOCAL" || "custom" : false,
+    "sortMethod": (a, b) => {
+      const fieldName = model.id.toLowerCase();
+      if (a[fieldName] < b[fieldName] || !a[fieldName])
+        return -1;
+      if (a[fieldName] > b[fieldName] || !b[fieldName])
+        return 1;
+      return 0;
+    },
+    "align": ((_c = model.align) == null ? void 0 : _c.toLowerCase()) || "center"
   }), {
+    header: ({
+      column
+    }) => {
+      return createVNode(resolveComponent("iBizGridColumnHeader"), {
+        "key": column.property,
+        "controller": columnC
+      }, null);
+    },
     default: ({
       row
     }) => {
@@ -182,8 +205,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 createVNode(resolveComponent("el-table-column"), {
       "prop": model.codeName,
@@ -191,6 +216,14 @@ function renderChildColumn(c, model, renderColumns, index) {
       "min-width": width,
       "align": align
     }, {
+      header: ({
+        column
+      }) => {
+        return createVNode(resolveComponent("iBizGridColumnHeader"), {
+          "key": column.property,
+          "controller": columnC
+        }, null);
+      },
       default: () => {
         return childColumns.map((column, index2) => {
           return renderChildColumn(c, column, renderColumns, index2);
@@ -203,49 +236,73 @@ function renderChildColumn(c, model, renderColumns, index) {
 const GridControl = /* @__PURE__ */ 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
@@ -272,10 +329,9 @@ const GridControl = /* @__PURE__ */ defineComponent({
       onSortChange,
       handleRowClassName,
       handleHeaderCellClassName,
-      cleanKeyDown = NOOP,
-      cleanKeyUp = NOOP,
       cleanClick = NOOP,
-      cleanEnter = NOOP
+      cleanEnter = NOOP,
+      cleanTab = NOOP
     } = useITableEvent(c);
     const {
       onPageChange,
@@ -286,8 +342,14 @@ const GridControl = /* @__PURE__ */ defineComponent({
       headerCssVars
     } = useGridHeaderStyle(tableRef, ns);
     const {
-      cleanup = NOOP
+      cleanup = NOOP,
+      setDragEvent
     } = useGridDraggable(tableRef, ns, c);
+    c.evt.on("onLoadSuccess", () => {
+      if (setDragEvent) {
+        setDragEvent();
+      }
+    });
     const renderNoData = () => {
       var _a;
       const {
@@ -395,23 +457,45 @@ const GridControl = /* @__PURE__ */ defineComponent({
         }
       });
     };
+    const renderRowDetail = () => {
+      const {
+        navAppViewId,
+        navViewHeight
+      } = c.model;
+      if (navAppViewId && c.state.showRowDetail)
+        return createVNode(resolveComponent("el-table-column"), {
+          "type": "expand"
+        }, {
+          default: ({
+            row
+          }) => {
+            const {
+              context,
+              params
+            } = c.calcNavParams(row);
+            const style = {
+              height: navViewHeight ? "".concat(navViewHeight, "px") : "auto"
+            };
+            return h(resolveComponent("IBizViewShell"), {
+              style,
+              params,
+              context,
+              viewId: navAppViewId,
+              class: ns.b("row-detail-view")
+            });
+          }
+        });
+    };
     onUnmounted(() => {
       zIndex.decrement();
-      if (cleanup !== NOOP) {
+      if (cleanup !== NOOP)
         cleanup();
-      }
-      if (cleanKeyDown !== NOOP) {
-        cleanKeyDown();
-      }
-      if (cleanKeyUp !== NOOP) {
-        cleanKeyUp();
-      }
-      if (cleanClick !== NOOP) {
+      if (cleanClick !== NOOP)
         cleanClick();
-      }
-      if (cleanEnter !== NOOP) {
+      if (cleanEnter !== NOOP)
         cleanEnter();
-      }
+      if (cleanTab !== NOOP)
+        cleanTab();
     });
     const isLodeMoreDisabled = computed(() => {
       if (c.model.pagingMode !== 2) {
@@ -435,32 +519,33 @@ const GridControl = /* @__PURE__ */ 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() {
@@ -509,7 +594,7 @@ const GridControl = /* @__PURE__ */ 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);
             })];
           },