@ibiz-template/vue3-components 0.0.1-alpha.1 → 0.0.1-alpha.3

package/src/view-engine/grid-view-engine.ts

@@ -0,0 +1,200 @@
+import { RuntimeModelError } from '@ibiz-template/core';
+import {
+  executeViewLogic,
+  IControlController,
+  IGridViewEngine,
+  IUIActionResult,
+  PresetViewEngine,
+  SysUIActionTag,
+  ViewController,
+} from '@ibiz-template/runtime';
+import { IAppDEGridView } from '@ibiz/model-core';
+import { GridController } from '../control';
+import { SearchFormController } from '../control/form/search-form/search-form.controller';
+
+export class GridViewEngine
+  extends PresetViewEngine
+  implements IGridViewEngine
+{
+  protected declare view: ViewController<IAppDEGridView>;
+
+  get grid() {
+    return this.view.getController('grid') as GridController;
+  }
+
+  get searchForm() {
+    return this.view.getController('searchform') as SearchFormController;
+  }
+
+  get xdataControl(): IControlController {
+    return this.view.getController(
+      this.view.model.xdataControlName!,
+    ) as IControlController;
+  }
+
+  getData(): IData[] {
+    return this.grid.getData();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async call(key: string, args: any): Promise<IData | null | undefined> {
+    if (key === SysUIActionTag.TOGGLE_FILTER) {
+      this.searchForm.setVisible();
+      return null;
+    }
+    if (key === SysUIActionTag.EDIT) {
+      this.openData(args!);
+      return null;
+    }
+    if (key === SysUIActionTag.NEW) {
+      this.newData(args!);
+      return null;
+    }
+    if (key === SysUIActionTag.REMOVE) {
+      await this.grid.remove();
+      return null;
+    }
+    if (key === SysUIActionTag.IMPORT) {
+      await this.grid.importData();
+      return null;
+    }
+    if (key === SysUIActionTag.EXPORT_EXCEL) {
+      await this.grid.exportData(args);
+      return null;
+    }
+    return super.call(key, args);
+  }
+
+  /**
+   * 打开编辑数据视图
+   *
+   * @author lxm
+   * @date 2022-09-01 18:09:19
+   * @param {IData} data
+   * @param {MouseEvent} [event]
+   * @returns {*}
+   */
+  async openData(args: {
+    data: IData[];
+    event?: MouseEvent;
+  }): Promise<IUIActionResult> {
+    const { data, event } = args;
+    const openAppViewLogic =
+      this.view.model.viewLayoutPanel?.appViewLogics?.find(
+        item => item.id === 'opendata',
+      );
+    if (!openAppViewLogic) {
+      throw new RuntimeModelError(this.view.model, `缺少opendata的视图逻辑`);
+    }
+
+    // 添加选中数据的主键
+    const _context = this.view.context.clone();
+    const { codeName } = await ibiz.hub.getAppDataEntity(
+      this.xdataControl.model.appDataEntityId!,
+      this.view.context.srfappid,
+    )!;
+    _context[codeName!.toLowerCase()] = data[0].srfkey;
+
+    const result = await executeViewLogic(
+      openAppViewLogic,
+      _context,
+      data,
+      this.view.params,
+      {
+        event,
+      },
+    );
+    return result;
+  }
+
+  /**
+   * 打开编辑数据视图
+   *
+   * @author lxm
+   * @date 2022-09-01 18:09:19
+   * @param {IData} data
+   * @param {MouseEvent} [event]
+   * @returns {*}
+   */
+  async newData(args: {
+    data: IData[];
+    event?: MouseEvent;
+  }): Promise<IUIActionResult> {
+    const { data, event } = args;
+    const openAppViewLogic =
+      this.view.model.viewLayoutPanel?.appViewLogics?.find(
+        item => item.id === 'newdata',
+      );
+    if (!openAppViewLogic) {
+      throw new RuntimeModelError(this.view.model, `缺少newdata的视图逻辑`);
+    }
+
+    // 删除上下文里的视图主键
+    const _context = this.view.context.clone();
+    // const { codeName } = await ibiz.hub.getAppDataEntity(
+    //   this.xdataControl.model.appDataEntityId!,
+    //   this.view.context.srfappid,
+    // )!;
+    // _context[codeName!.toLowerCase()] = data[0].srfkey;
+
+    const result = await executeViewLogic(
+      openAppViewLogic,
+      _context,
+      data,
+      this.view.params,
+      {
+        event,
+      },
+    );
+    return result;
+  }
+
+  /**
+   * 视图删除方法
+   *
+   * @author lxm
+   * @date 2022-08-30 19:08:59
+   * @returns {*}  {Promise<void>}
+   */
+  async remove(): Promise<void> {
+    await this.grid.remove();
+  }
+
+  load() {
+    this.grid.load();
+  }
+
+  init() {
+    super.init();
+    const { childNames, evt, model } = this.view;
+    childNames.push('grid');
+    evt.on('onMounted', () => {
+      this.grid.evt.on('onActive', async event => {
+        await this.openData(event);
+      });
+      this.grid.evt.on('onSelectionChange', async event => {
+        this.toolbar.calcButtonState(
+          event.data[0],
+          this.grid.model.appDataEntityId,
+        );
+      });
+      this.grid.evt.on('onBeforeLoad', event => {
+        const params: IParams = {};
+        // 有搜索表单的整合相关参数
+        if (this.searchForm) {
+          const addParams = this.searchForm.data;
+          Object.assign(params, addParams);
+        }
+        this.grid.state.searchParams = params;
+      });
+
+      this.searchForm?.evt.on('onSearch', () => {
+        this.grid.load();
+      });
+
+      if (model.loadDefault) {
+        this.load();
+      }
+    });
+  }
+}

package/src/view-engine/index-view-engine.ts

@@ -0,0 +1,34 @@
+import {
+  IIndexViewEngine,
+  IViewController,
+  PresetViewEngine,
+  IIndexViewState,
+} from '@ibiz-template/runtime';
+import { IAppIndexView } from '@ibiz/model-core';
+import { AppMenuController } from '../control';
+
+export class IndexViewEngine
+  extends PresetViewEngine
+  implements IIndexViewEngine
+{
+  protected declare view: IViewController<IAppIndexView, IIndexViewState>;
+
+  get appmenu() {
+    return this.view.getController('grid') as AppMenuController;
+  }
+
+  initViewState() {
+    super.initViewState();
+    this.view.state.isCollapse = false;
+  }
+
+  init() {
+    this.view.childNames.push('appmenu');
+
+    // 清除加载动画
+    const el = document.querySelector('.app-loading-x') as HTMLDivElement;
+    if (el) {
+      el.style.display = 'none';
+    }
+  }
+}

package/src/view-engine/index.ts

@@ -0,0 +1,24 @@
+import { IViewController } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { GridViewEngine } from './grid-view-engine';
+import { IndexViewEngine } from './index-view-engine';
+
+export * from './grid-view-engine';
+export * from './index-view-engine';
+
+export const IBizViewEngine = {
+  install: (_v: App) => {
+    ibiz.engine.register(
+      `VIEW_AppIndexView`,
+      (c: IViewController) => new IndexViewEngine(c),
+    );
+    ibiz.engine.register(
+      `VIEW_APPINDEXVIEW`,
+      (c: IViewController) => new IndexViewEngine(c),
+    );
+    ibiz.engine.register(
+      'VIEW_GridView',
+      (c: IViewController) => new GridViewEngine(c),
+    );
+  },
+};

package/es/common/app-user/app-user.d.ts

@@ -1,8 +0,0 @@
-import './app-user.scss';
-export declare const AppUser: import("vue").DefineComponent<{}, {
-    ns: any;
-    srfusername: any;
-    router: any;
-}, {}, {}, {
-    onClick(): Promise<void>;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

package/es/common/app-user/app-user.js

@@ -1,60 +0,0 @@
-import { defineComponent, createVNode, resolveComponent, createTextVNode } from "vue";
-import { useRouter } from "vue-router";
-import { useNamespace } from "@ibiz-template/vue3-util";
-const appUser = "";
-const AppUser = /* @__PURE__ */ defineComponent({
-  name: "AppUser",
-  setup() {
-    var _a;
-    const ns = useNamespace("app-user");
-    const {
-      srfusername = "游客"
-    } = ((_a = ibiz.appData) == null ? void 0 : _a.context) || {};
-    const router = useRouter();
-    return {
-      ns,
-      srfusername,
-      router
-    };
-  },
-  methods: {
-    async onClick() {
-      const res = await ibiz.auth.v7logout();
-      if (res.ok) {
-        ibiz.message.success("登出成功");
-        this.router.push(`/login?ru=${encodeURIComponent(window.location.hash.replace("#/", "/"))}`);
-      } else {
-        ibiz.message.error("登出失败");
-      }
-    }
-  },
-  render() {
-    return createVNode("div", {
-      "class": this.ns.b()
-    }, [createVNode(resolveComponent("el-dropdown"), {
-      "class": this.ns.b("avatar")
-    }, {
-      default: () => createVNode("span", {
-        "class": this.ns.b("avatar-wrapper")
-      }, [createVNode(resolveComponent("el-avatar"), {
-        "size": "small",
-        "src": "https://i.loli.net/2017/08/21/599a521472424.jpg"
-      }, null), createVNode("span", {
-        "class": this.ns.be("avatar", "name")
-      }, [this.srfusername])]),
-      dropdown: () => createVNode(resolveComponent("el-dropdown-menu"), null, {
-        default: () => [createVNode(resolveComponent("el-dropdown-item"), null, {
-          default: () => [createVNode(resolveComponent("ion-icon"), {
-            "name": "log-out-outline",
-            "class": this.ns.be("avater", "icon")
-          }, null), createVNode("span", {
-            "onClick": this.onClick
-          }, [createTextVNode("退出登录")])]
-        })]
-      })
-    })]);
-  }
-});
-export {
-  AppUser
-};

package/es/common/grid-pagination/index.d.ts

@@ -1,40 +0,0 @@
-export declare const IbizGridPagination: import("../../util/install").TypeWithInstall<import("vue").DefineComponent<{
-    total: {
-        type: NumberConstructor;
-        required: true;
-    };
-    curPage: {
-        type: NumberConstructor;
-        required: true;
-    };
-    size: {
-        type: NumberConstructor;
-        required: true;
-    };
-}, {
-    ns: any;
-    start: import("vue").ComputedRef<number>;
-    end: import("vue").ComputedRef<number>;
-    onPageChange: (page: number) => void;
-    onPageSizeChange: (size: number) => void;
-    pageReset: () => void;
-    inputChange: (event: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "pageSizeChange" | "pageReset")[], "change" | "pageSizeChange" | "pageReset", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    total: {
-        type: NumberConstructor;
-        required: true;
-    };
-    curPage: {
-        type: NumberConstructor;
-        required: true;
-    };
-    size: {
-        type: NumberConstructor;
-        required: true;
-    };
-}>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    onPageSizeChange?: ((...args: any[]) => any) | undefined;
-    onPageReset?: ((...args: any[]) => any) | undefined;
-}, {}>>;
-export default IbizGridPagination;

package/es/common/grid-pagination/index.js

@@ -1,9 +0,0 @@
-import { withInstall } from "../../util/install";
-import GridPagination from "./grid-pagination";
-const IbizGridPagination = withInstall(GridPagination, function(v) {
-  v.component(GridPagination.name, GridPagination);
-});
-export {
-  IbizGridPagination,
-  IbizGridPagination as default
-};

package/es/common/quick-search/quick-search.d.ts

@@ -1,30 +0,0 @@
-import './quick-search.scss';
-export declare const QuickSearch: import("vue").DefineComponent<{
-    value: {
-        type: StringConstructor;
-    };
-    viewMode: {
-        type: StringConstructor;
-        required: true;
-    };
-    placeholder: {
-        type: StringConstructor;
-    };
-}, {
-    ns: any;
-    inputValue: import("vue").WritableComputedRef<string | undefined>;
-    search: () => void;
-    onInput: (value: string | undefined) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: StringConstructor;
-    };
-    viewMode: {
-        type: StringConstructor;
-        required: true;
-    };
-    placeholder: {
-        type: StringConstructor;
-    };
-}>>, {}>;
-export default QuickSearch;

package/es/common/quick-search/quick-search.js

@@ -1,63 +0,0 @@
-import { defineComponent, computed, createVNode, resolveComponent } from "vue";
-import { useNamespace } from "@ibiz-template/vue3-util";
-import { debounce } from "lodash-es";
-const quickSearch = "";
-const QuickSearch = /* @__PURE__ */ defineComponent({
-  name: "QuickSearch",
-  props: {
-    value: {
-      type: String
-    },
-    viewMode: {
-      type: String,
-      required: true
-    },
-    placeholder: {
-      type: String
-    }
-  },
-  setup(props, {
-    emit
-  }) {
-    const ns = useNamespace("quick-search");
-    const inputValue = computed({
-      get() {
-        return props.value;
-      },
-      set(val) {
-        emit("update", val);
-      }
-    });
-    const search = () => {
-      emit("search");
-    };
-    const debounceSearch = debounce(() => {
-      if (search) {
-        search();
-      }
-    }, 500);
-    const onInput = (value) => {
-      inputValue.value = value;
-      debounceSearch();
-    };
-    return {
-      ns,
-      inputValue,
-      search,
-      onInput
-    };
-  },
-  render() {
-    return createVNode(resolveComponent("el-input"), {
-      "model-value": this.value,
-      "class": [this.ns.b(), this.ns.m(this.viewMode.toLowerCase())],
-      "placeholder": this.placeholder,
-      "onInput": this.onInput,
-      "onChange": this.search
-    }, null);
-  }
-});
-export {
-  QuickSearch,
-  QuickSearch as default
-};

package/es/common/tab-page-exp/tab-page-exp.d.ts

@@ -1,69 +0,0 @@
-import './tab-page-exp.scss';
-interface RouteMsg {
-    key: string;
-    fullPath: string;
-    modelPath?: string;
-    caption?: string;
-}
-interface dropdownAction {
-    text: string;
-    value?: string;
-}
-export declare const TabPageExp: import("vue").DefineComponent<{
-    routeMsgs: {
-        type: {
-            (arrayLength: number): RouteMsg[];
-            (...items: RouteMsg[]): RouteMsg[];
-            new (arrayLength: number): RouteMsg[];
-            new (...items: RouteMsg[]): RouteMsg[];
-            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: true;
-    };
-    currentKey: {
-        type: StringConstructor;
-        required: true;
-    };
-}, {
-    ns: any;
-    tabsValue: import("vue").Ref<number>;
-    actions: dropdownAction[];
-    changePage: (pane: TabsPaneContext, _ev: Event) => void;
-    onClose: (name: TabPaneName) => void;
-    handleCommand: (command: dropdownAction) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("tab-delete" | "tab-click" | "close-all" | "close-other")[], "tab-delete" | "tab-click" | "close-all" | "close-other", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    routeMsgs: {
-        type: {
-            (arrayLength: number): RouteMsg[];
-            (...items: RouteMsg[]): RouteMsg[];
-            new (arrayLength: number): RouteMsg[];
-            new (...items: RouteMsg[]): RouteMsg[];
-            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: true;
-    };
-    currentKey: {
-        type: StringConstructor;
-        required: true;
-    };
-}>> & {
-    "onTab-delete"?: ((...args: any[]) => any) | undefined;
-    "onTab-click"?: ((...args: any[]) => any) | undefined;
-    "onClose-all"?: ((...args: any[]) => any) | undefined;
-    "onClose-other"?: ((...args: any[]) => any) | undefined;
-}, {}>;
-export {};

package/es/common/tab-page-exp/tab-page-exp.js

@@ -1,117 +0,0 @@
-import { defineComponent, ref, watch, createVNode, resolveComponent, createTextVNode, isVNode } from "vue";
-import { useNamespace } from "@ibiz-template/vue3-util";
-const tabPageExp = "";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-const TabPageExp = /* @__PURE__ */ defineComponent({
-  name: "TabPageExp",
-  props: {
-    routeMsgs: {
-      type: Array,
-      required: true
-    },
-    currentKey: {
-      type: String,
-      required: true
-    }
-  },
-  emits: ["tab-delete", "tab-click", "close-all", "close-other"],
-  setup(props, {
-    emit
-  }) {
-    const ns = useNamespace("tab-page-exp");
-    const tabsValue = ref(0);
-    const actions = [{
-      text: "关闭所有",
-      value: "closeAll"
-    }, {
-      text: "关闭其他",
-      value: "closeOther"
-    }];
-    watch(() => props.currentKey, (newVal, _oldVal) => {
-      const currentRouteMsgIndex = props.routeMsgs.findIndex((msg) => msg.key === newVal);
-      if (currentRouteMsgIndex !== -1) {
-        tabsValue.value = currentRouteMsgIndex;
-      }
-    });
-    const changePage = (pane, _ev) => {
-      const index = Number(pane.index);
-      tabsValue.value = index;
-      emit("tab-click", index);
-    };
-    const onClose = (name) => {
-      emit("tab-delete", name);
-    };
-    const handleCommand = (command) => {
-      if (command.value === "closeAll") {
-        emit("close-all");
-      } else if (command.value === "closeOther") {
-        emit("close-other");
-      }
-    };
-    return {
-      ns,
-      tabsValue,
-      actions,
-      changePage,
-      onClose,
-      handleCommand
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "class": this.ns.b()
-    }, [createVNode("div", {
-      "class": this.ns.e("left")
-    }, [createVNode(resolveComponent("el-tabs"), {
-      "type": "card",
-      "modelValue": this.tabsValue,
-      "onUpdate:modelValue": ($event) => this.tabsValue = $event,
-      "closable": true,
-      "onTabClick": this.changePage,
-      "onTabRemove": this.onClose
-    }, {
-      default: () => {
-        var _a;
-        return [(_a = this.routeMsgs) == null ? void 0 : _a.map((msg, index) => {
-          return createVNode(resolveComponent("el-tab-pane"), {
-            "name": index,
-            "key": index,
-            "label": msg.caption
-          }, null);
-        })];
-      }
-    })]), createVNode("div", {
-      "class": this.ns.e("right")
-    }, [createVNode(resolveComponent("el-dropdown"), {
-      "onCommand": this.handleCommand
-    }, {
-      default: () => {
-        return createVNode(resolveComponent("el-button"), {
-          "size": "small",
-          "type": "primary"
-        }, {
-          default: () => [createTextVNode("更多 "), createVNode(resolveComponent("ion-icon"), {
-            "name": "arrow-down"
-          }, null)]
-        });
-      },
-      dropdown: () => {
-        let _slot;
-        return createVNode(resolveComponent("el-dropdown-menu"), null, _isSlot(_slot = this.actions.map((action) => {
-          return createVNode(resolveComponent("el-dropdown-item"), {
-            "command": action
-          }, {
-            default: () => [action.text]
-          });
-        })) ? _slot : {
-          default: () => [_slot]
-        });
-      }
-    })])]);
-  }
-});
-export {
-  TabPageExp
-};