@ibiz-template/vue3-components 0.1.28 → 0.1.29-dev.0

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

@@ -0,0 +1,162 @@
+import { PropType, VNode } from 'vue';
+import { IDEGrid } from '@ibiz/model-core';
+import { IControlProvider, TreeGridController } from '@ibiz-template/runtime';
+export declare const TreeGridControl: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IDEGrid>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+    provider: {
+        type: PropType<IControlProvider>;
+    };
+    /**
+     * 部件行数据默认激活模式
+     * - 0 不激活
+     * - 1 单击激活
+     * - 2 双击激活(默认值)
+     *
+     * @type {(number | 0 | 1 | 2)}
+     */
+    mdctrlActiveMode: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    rowEditOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    data: {
+        type: {
+            (arrayLength: number): IData[];
+            (...items: IData[]): IData[];
+            new (arrayLength: number): IData[];
+            new (...items: IData[]): IData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+    loadDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    c: TreeGridController;
+    ns: import("@ibiz-template/core").Namespace;
+    ns2: import("@ibiz-template/core").Namespace;
+    tableRef: import("vue").Ref<IData | undefined>;
+    tableData: import("vue").ComputedRef<IData[]>;
+    renderColumns: import("vue").Ref<import("@ibiz/model-core").IDEGridColumn[]>;
+    defaultSort: import("vue").Ref<IData>;
+    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;
+    onSortChange: (opts: {
+        _column: IData;
+        prop: string;
+        order: "ascending" | "descending";
+    }) => void;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onPageRefresh: () => void;
+    handleRowClassName: ({ row }: {
+        row: IData;
+    }) => string;
+    renderNoData: () => VNode | false;
+    loadData: (item: IData, row: unknown, callback: (nodes: IData[]) => void) => Promise<void>;
+    summaryMethod: ({ columns, }: {
+        columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
+        data: IData[];
+    }) => string[];
+    renderPopover: () => JSX.Element[];
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IDEGrid>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+    provider: {
+        type: PropType<IControlProvider>;
+    };
+    /**
+     * 部件行数据默认激活模式
+     * - 0 不激活
+     * - 1 单击激活
+     * - 2 双击激活(默认值)
+     *
+     * @type {(number | 0 | 1 | 2)}
+     */
+    mdctrlActiveMode: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    rowEditOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    isSimple: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    data: {
+        type: {
+            (arrayLength: number): IData[];
+            (...items: IData[]): IData[];
+            new (arrayLength: number): IData[];
+            new (...items: IData[]): IData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+    loadDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    params: IParams;
+    isSimple: boolean;
+    mdctrlActiveMode: number;
+    singleSelect: boolean;
+    rowEditOpen: boolean;
+    loadDefault: boolean;
+}, {}>;

package/es/control/tree-grid/tree-grid.mjs

@@ -0,0 +1,212 @@
+import { defineComponent, computed, createVNode, resolveComponent } from 'vue';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { TreeGridController } from '@ibiz-template/runtime';
+import { RuntimeModelError } from '@ibiz-template/core';
+import { useRowEditPopover } from '../grid/row-edit-popover/use-row-edit-popover.mjs';
+import '../grid/grid/index.mjs';
+import { renderChildColumn } from '../grid/grid/grid.mjs';
+import { useITableEvent, useAppGridPagination, useAppGridBase } from '../grid/grid/grid-control.util.mjs';
+
+"use strict";
+const TreeGridControl = /* @__PURE__ */ defineComponent({
+  name: "IBizTreeGridControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    },
+    /**
+     * 部件行数据默认激活模式
+     * - 0 不激活
+     * - 1 单击激活
+     * - 2 双击激活(默认值)
+     *
+     * @type {(number | 0 | 1 | 2)}
+     */
+    mdctrlActiveMode: {
+      type: Number,
+      default: void 0
+    },
+    singleSelect: {
+      type: Boolean,
+      default: void 0
+    },
+    rowEditOpen: {
+      type: Boolean,
+      default: void 0
+    },
+    isSimple: {
+      type: Boolean,
+      required: false
+    },
+    data: {
+      type: Array,
+      required: false
+    },
+    loadDefault: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const c = useControlController((...args) => new TreeGridController(...args));
+    const ns = useNamespace(`control-grid`);
+    const ns2 = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const {
+      tableRef,
+      onRowClick,
+      onDbRowClick,
+      onSelectionChange,
+      onSortChange,
+      handleRowClassName
+    } = useITableEvent(c);
+    const {
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
+    } = useAppGridPagination(c);
+    const {
+      renderColumns,
+      defaultSort,
+      summaryMethod
+    } = useAppGridBase(c, props);
+    const {
+      renderPopover
+    } = useRowEditPopover(tableRef, c);
+    let treeGridValueField = "";
+    let treeGridParentField = "";
+    const initTreeGridField = () => {
+      var _a, _b;
+      const treeGridParent = (_a = c.model.degridColumns) == null ? void 0 : _a.find((item) => {
+        return item.treeColumnMode === 4 || item.treeColumnMode === 12;
+      });
+      const treeGridValue = (_b = c.model.degridColumns) == null ? void 0 : _b.find((item) => {
+        return item.treeColumnMode === 2 || item.treeColumnMode === 3;
+      });
+      if (!treeGridParent) {
+        throw new RuntimeModelError(c.model, "\u6811\u8868\u683C\u65E0\u503C\u5217\u6A21\u5F0F");
+      }
+      if (!treeGridValue) {
+        throw new RuntimeModelError(c.model, "\u6811\u8868\u683C\u65E0\u7236\u503C\u5217\u6A21\u5F0F");
+      }
+      treeGridValueField = treeGridValue.appDEFieldId.toLowerCase();
+      treeGridParentField = treeGridParent.appDEFieldId.toLowerCase();
+    };
+    initTreeGridField();
+    const getTreeGridDataItem = (data) => {
+      data.hasChildren = c.state.items.some((item) => data[treeGridValueField] === item[treeGridParentField]);
+      data.children = [];
+      return data;
+    };
+    const tableData = computed(() => {
+      const state = c.state;
+      const items = state.rows.map((item) => getTreeGridDataItem(item.data));
+      const noParentData = items.filter((item) => !item[treeGridParentField]);
+      return noParentData;
+    });
+    const renderNoData = () => {
+      const {
+        isLoaded
+      } = c.state;
+      return isLoaded && createVNode(resolveComponent("iBizNoData"), {
+        "text": c.model.emptyText,
+        "emptyTextLanguageRes": c.model.emptyTextLanguageRes
+      }, null);
+    };
+    const loadData = async (item, row, callback) => {
+      const items = c.state.items.filter((data) => item[treeGridValueField] === data[treeGridParentField]);
+      callback(items);
+    };
+    return {
+      c,
+      ns,
+      ns2,
+      tableRef,
+      tableData,
+      renderColumns,
+      defaultSort,
+      onDbRowClick,
+      onRowClick,
+      onSelectionChange,
+      onSortChange,
+      onPageChange,
+      onPageSizeChange,
+      onPageRefresh,
+      handleRowClassName,
+      renderNoData,
+      loadData,
+      summaryMethod,
+      renderPopover
+    };
+  },
+  render() {
+    const state = this.c.state;
+    const {
+      hideHeader,
+      enablePagingBar
+    } = this.c.model;
+    return createVNode(resolveComponent("iBizControlBase"), {
+      "class": [this.ns.b(), this.ns2.b(), this.ns.is("show-header", !hideHeader), this.ns.is("enable-page", enablePagingBar), this.ns.is("enable-group", this.c.model.enableGroup)],
+      "controller": this.c
+    }, {
+      default: () => [this.c.state.isLoaded && createVNode(resolveComponent("el-table"), {
+        "ref": "tableRef",
+        "class": this.ns.e("table"),
+        "default-sort": this.defaultSort,
+        "border": true,
+        "show-header": !hideHeader,
+        "show-summary": this.c.enableAgg,
+        "summary-method": this.summaryMethod,
+        "highlight-current-row": state.singleSelect,
+        "row-class-name": this.handleRowClassName,
+        "row-key": "srfkey",
+        "data": this.tableData,
+        "onRowClick": this.onRowClick,
+        "onRowDblclick": this.onDbRowClick,
+        "onSelectionChange": this.onSelectionChange,
+        "onSortChange": this.onSortChange,
+        "tooltip-effect": "light",
+        "tree-props": {
+          children: "children",
+          hasChildren: "hasChildren"
+        },
+        "load": this.loadData,
+        "lazy": true
+      }, {
+        empty: this.renderNoData,
+        default: () => {
+          return [!state.singleSelect && createVNode(resolveComponent("el-table-column"), {
+            "class-name": this.ns.e("selection"),
+            "type": "selection",
+            "width": "55"
+          }, null), state.isCreated && this.renderColumns.map((model, index) => {
+            return renderChildColumn(this.c, model, this.renderColumns, index);
+          })];
+        },
+        append: () => {
+          return this.renderPopover();
+        }
+      }), enablePagingBar && createVNode(resolveComponent("iBizGridPagination"), {
+        "total": state.total,
+        "curPage": state.curPage,
+        "size": state.size,
+        "onChange": this.onPageChange,
+        "onPageSizeChange": this.onPageSizeChange,
+        "onPageRefresh": this.onPageRefresh
+      }, null)]
+    });
+  }
+});
+
+export { TreeGridControl };

package/es/control/tree-grid/tree-grid.provider.d.ts

@@ -0,0 +1,13 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+/**
+ * 表格适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class GridProvider
+ * @implements {IControlProvider}
+ */
+export declare class TreeGridProvider implements IControlProvider {
+    component: string;
+}

package/es/control/tree-grid/tree-grid.provider.mjs

@@ -0,0 +1,14 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class TreeGridProvider {
+  constructor() {
+    __publicField(this, "component", "IBizTreeGridControl");
+  }
+}
+
+export { TreeGridProvider };

package/es/control/tree-grid-ex/index.d.ts

@@ -0,0 +1,41 @@
+export * from './tree-grid-ex.provider';
+export declare const IBizTreeGridExControl: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDETree>;
+        required: true;
+    };
+    context: {
+        type: import("vue").PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: import("vue").PropType<IParams>;
+        default: () => {};
+    };
+}, {
+    c: import("@ibiz-template/runtime").TreeGridExController;
+    ns: import("@ibiz-template/core").Namespace;
+    ns2: import("@ibiz-template/core").Namespace;
+    treeData: import("vue").ComputedRef<IData[] | import("@ibiz-template/runtime").ITreeNodeData[]>;
+    renderColumns: import("vue").ComputedRef<import("@ibiz/model-core").IDETreeColumn[]>;
+    renderNoData: () => false | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    loadData: (item: IData, treeNode: unknown, callback: (nodes: IData[]) => void) => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDETree>;
+        required: true;
+    };
+    context: {
+        type: import("vue").PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: import("vue").PropType<IParams>;
+        default: () => {};
+    };
+}>>, {
+    params: IParams;
+}, {}>>;
+export default IBizTreeGridExControl;

package/es/control/tree-grid-ex/index.mjs

@@ -0,0 +1,18 @@
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { TreeGridExControl } from './tree-grid-ex.mjs';
+import { TreeGridExProvider } from './tree-grid-ex.provider.mjs';
+
+"use strict";
+const IBizTreeGridExControl = withInstall(
+  TreeGridExControl,
+  function(v) {
+    v.component(TreeGridExControl.name, TreeGridExControl);
+    registerControlProvider(
+      ControlType.TREE_GRIDEX,
+      () => new TreeGridExProvider()
+    );
+  }
+);
+
+export { IBizTreeGridExControl, TreeGridExProvider, IBizTreeGridExControl as default };

package/es/control/tree-grid-ex/tree-grid-ex.css

@@ -0,0 +1 @@
+.ibiz-control-treegridex{--ibiz-control-treegridex-cell-padding:var(--ibiz-spacing-tight)}.ibiz-control-treegridex .is-first-column .cell{padding:0 var(--ibiz-control-treegridex-cell-padding)}

package/es/control/tree-grid-ex/tree-grid-ex.d.ts

@@ -0,0 +1,41 @@
+import { PropType, VNode } from 'vue';
+import { IDETree, IDETreeColumn } from '@ibiz/model-core';
+import { ITreeNodeData, TreeGridExController } from '@ibiz-template/runtime';
+import './tree-grid-ex.scss';
+export declare const TreeGridExControl: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IDETree>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+}, {
+    c: TreeGridExController;
+    ns: import("@ibiz-template/core").Namespace;
+    ns2: import("@ibiz-template/core").Namespace;
+    treeData: import("vue").ComputedRef<IData[] | ITreeNodeData[]>;
+    renderColumns: import("vue").ComputedRef<IDETreeColumn[]>;
+    renderNoData: () => VNode | false;
+    loadData: (item: IData, treeNode: unknown, callback: (nodes: IData[]) => void) => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IDETree>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+}>>, {
+    params: IParams;
+}, {}>;

package/es/control/tree-grid-ex/tree-grid-ex.mjs

@@ -0,0 +1,166 @@
+import { defineComponent, createVNode, resolveComponent, computed, mergeProps, h } from 'vue';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { TreeGridExController } from '@ibiz-template/runtime';
+import './tree-grid-ex.css';
+
+"use strict";
+const TreeGridExControl = /* @__PURE__ */ defineComponent({
+  name: "IBizTreeGridExControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup() {
+    const c = useControlController((...args) => new TreeGridExController(...args));
+    const ns2 = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const ns = useNamespace(`control-grid`);
+    const renderNoData = () => {
+      const {
+        isLoaded
+      } = c.state;
+      return isLoaded && createVNode(resolveComponent("iBizNoData"), {
+        "text": c.model.emptyText,
+        "emptyTextLanguageRes": c.model.emptyTextLanguageRes
+      }, null);
+    };
+    const renderColumns = computed(() => {
+      const columns = [];
+      c.state.columnStates.forEach((item) => {
+        var _a, _b;
+        if (item.hidden) {
+          return;
+        }
+        const columnModel = ((_a = c.fieldColumns[item.key]) == null ? void 0 : _a.model) || ((_b = c.uaColumns[item.key]) == null ? void 0 : _b.model);
+        if (columnModel) {
+          columns.push(columnModel);
+        }
+      });
+      return columns;
+    });
+    const findNodeData = (id) => {
+      return c.state.items.find((item) => item.id === id);
+    };
+    const calcHasChildren = (node) => {
+      node.hasChildren = !node.leaf;
+      return node;
+    };
+    const treeData = computed(() => {
+      if (!c.state.isLoaded) {
+        return [];
+      }
+      return c.model.rootVisible ? c.state.rootNodes : c.state.rootNodes.reduce((result, nodeData) => {
+        calcHasChildren(nodeData);
+        if (nodeData.children) {
+          return result.concat(nodeData.children.map(calcHasChildren));
+        }
+        return result;
+      }, []);
+    });
+    const loadData = async (item, treeNode, callback) => {
+      let nodes;
+      if (item.level === 0) {
+        nodes = treeData.value;
+      } else {
+        const nodeData = findNodeData(item.id);
+        if (nodeData.children) {
+          nodes = nodeData.children;
+        } else {
+          nodes = await c.loadNodes(nodeData);
+        }
+      }
+      callback(nodes);
+    };
+    return {
+      c,
+      ns,
+      ns2,
+      treeData,
+      renderColumns,
+      renderNoData,
+      loadData
+    };
+  },
+  render() {
+    const state = this.c.state;
+    const renderColumn = (model, index) => {
+      var _a;
+      if (model.hideDefault) {
+        return null;
+      }
+      const {
+        codeName: columnName,
+        width
+      } = model;
+      const columnC = this.c.columns[columnName];
+      const columnState = this.c.state.columnStates.find((item) => item.key === columnName);
+      const widthFlexGrow = index === this.renderColumns.length - 1;
+      const widthName = widthFlexGrow ? "min-width" : "width";
+      return createVNode(resolveComponent("el-table-column"), mergeProps({
+        "label": model.caption,
+        "prop": columnName
+      }, {
+        [widthName]: width
+      }, {
+        "fixed": columnState.fixed,
+        "sortable": model.enableSort ? "custom" : false,
+        "align": ((_a = model.align) == null ? void 0 : _a.toLowerCase()) || "center"
+      }), {
+        default: ({
+          row
+        }) => {
+          const elRow = row;
+          const rowState = state.items.find((item) => item.srfkey === elRow.srfkey);
+          if (rowState) {
+            Object.assign(rowState, {
+              data: rowState.deData
+            });
+            const comp = resolveComponent(this.c.providers[columnName].component);
+            return h(comp, {
+              controller: columnC,
+              row: rowState,
+              key: elRow.srfkey + columnName
+            });
+          }
+          return null;
+        }
+      });
+    };
+    return createVNode(resolveComponent("iBizControlBase"), {
+      "controller": this.c,
+      "class": [this.ns.b(), this.ns2.b()]
+    }, {
+      default: () => [this.c.state.isLoaded && createVNode(resolveComponent("el-table"), {
+        "ref": "tableRef",
+        "class": this.ns.e("table"),
+        "border": true,
+        "row-key": "id",
+        "lazy": true,
+        "data": this.treeData,
+        "tree-props": {
+          children: "children",
+          hasChildren: "hasChildren"
+        },
+        "load": this.loadData
+      }, {
+        empty: this.renderNoData,
+        default: () => {
+          return [this.renderColumns.map((model, index) => {
+            return renderColumn(model, index);
+          })];
+        }
+      })]
+    });
+  }
+});
+
+export { TreeGridExControl };

package/es/control/tree-grid-ex/tree-grid-ex.provider.d.ts

@@ -0,0 +1,13 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+/**
+ * 树适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class TreeProvider
+ * @implements {IControlProvider}
+ */
+export declare class TreeGridExProvider implements IControlProvider {
+    component: string;
+}