@ibiz-template/vue3-components 0.5.7-alpha.6 → 0.6.0-alpha.0

package/lib/view-engine/edit-view.engine.cjs

@@ -2,9 +2,26 @@
 
 var core = require('@ibiz-template/core');
 var runtime = require('@ibiz-template/runtime');
+var ramda = require('ramda');
 
 "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 EditViewEngine extends runtime.ViewEngineBase {
+  constructor() {
+    super(...arguments);
+    /**
+     * 实体名称
+     * @author lxm
+     * @date 2024-01-31 11:05:49
+     * @type {string}
+     */
+    __publicField(this, "deName");
+  }
   get form() {
     return this.view.getController("form");
   }
@@ -12,6 +29,7 @@ class EditViewEngine extends runtime.ViewEngineBase {
     await super.onCreated();
     const { childNames, modal } = this.view;
     childNames.push("form");
+    this.deName = runtime.calcDeCodeNameById(this.view.model.appDataEntityId);
     if (!this.view.slotProps.form) {
       this.view.slotProps.form = {};
     }
@@ -30,6 +48,7 @@ class EditViewEngine extends runtime.ViewEngineBase {
   }
   async onMounted() {
     await super.onMounted();
+    this.initMarkOpenData();
     const { model, evt } = this.view;
     const formDeId = this.form.model.appDataEntityId;
     const formDataStateChange = (event) => {
@@ -218,6 +237,77 @@ class EditViewEngine extends runtime.ViewEngineBase {
     );
     ibiz.mc.command.send({ srfdecodename: "SysTodo" }, "OBJECTUPDATED");
   }
+  /**
+   * 初始化标记打开数据相关逻辑
+   * @author lxm
+   * @date 2024-01-31 11:52:13
+   * @return {*}  {void}
+   */
+  initMarkOpenData() {
+    if (ramda.isNil(this.view.modal.routeDepth)) {
+      return;
+    }
+    let srfkey;
+    const callback = (data) => {
+      if (!this.view.state.activated) {
+        return;
+      }
+      const dataInfo = this.form.getData()[0].srfmajortext;
+      let actionMsg = "";
+      switch (data.action) {
+        case "VIEW":
+          actionMsg = "\u6D4F\u89C8\u4E86";
+          break;
+        case "EDIT":
+          actionMsg = "\u7F16\u8F91\u4E86";
+          break;
+        case "UPDATE":
+          actionMsg = "\u66F4\u65B0\u4E86";
+          break;
+        default:
+          break;
+      }
+      ibiz.notification.info({
+        position: "bottom-right",
+        title: data.username,
+        desc: "".concat(actionMsg, " ").concat(this.view.state.caption, "-").concat(dataInfo)
+      });
+    };
+    this.form.evt.on("onLoadSuccess", (event) => {
+      const formData = event.data[0];
+      srfkey = formData.srfkey;
+      ibiz.markOpenData.action(this.deName, srfkey, "VIEW");
+      ibiz.markOpenData.subscribe(this.deName, srfkey, callback);
+      this.view.evt.on("onDestroyed", () => {
+        ibiz.markOpenData.unsubscribe(this.deName, srfkey, callback);
+      });
+    });
+    let isWait = false;
+    const actionEdit = () => {
+      if (!srfkey || isWait) {
+        return;
+      }
+      isWait = true;
+      ibiz.markOpenData.action(this.deName, srfkey, "EDIT");
+      setTimeout(
+        () => {
+          isWait = false;
+        },
+        1e3 * 60 * 5
+      );
+    };
+    this.form.evt.on("onFormDataChange", actionEdit);
+    this.form.evt.on("onSaveSuccess", () => {
+      if (srfkey) {
+        ibiz.markOpenData.action(this.deName, srfkey, "UPDATE");
+      }
+    });
+    this.view.evt.on("onCloseView", () => {
+      if (srfkey) {
+        ibiz.markOpenData.action(this.deName, srfkey, "CLOSE");
+      }
+    });
+  }
 }
 
 exports.EditViewEngine = EditViewEngine;

package/lib/web-app/App.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./App.css');
+
+"use strict";
+var App = /* @__PURE__ */ vue.defineComponent({
+  setup() {
+    const modal = new runtime.Modal({
+      mode: runtime.ViewMode.ROUTE,
+      viewUsage: 1,
+      routeDepth: 1
+    });
+    const listenDevtool = async (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.code === "F12") {
+        document.removeEventListener("keydown", listenDevtool);
+        const module = await import('@ibiz-template/devtool');
+        const devtool = module.default || module;
+        vue3Util.AppHooks.useComponent.callSync(null, devtool);
+      }
+    };
+    document.addEventListener("keydown", listenDevtool);
+    return {
+      modal
+    };
+  },
+  render() {
+    return vue.createVNode(vue.resolveComponent("router-view"), {
+      "modal": this.modal
+    }, null);
+  }
+});
+
+exports.default = App;

package/lib/web-app/App.css

@@ -0,0 +1 @@
+#app{width:100vw;height:100vh;background-color:var(--ibiz-color-bg-0)}body,html{padding:0;margin:0;border:0}

package/lib/web-app/attach-environment-config.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var qs = require('qs');
+var ramda = require('ramda');
+
+"use strict";
+const envMap = /* @__PURE__ */ new Map([
+  ["baseUrl", "BaseUrl"],
+  ["remoteModelUrl", "remoteDynaPath"],
+  ["dcSystem", "mockDcSystemId"],
+  ["enablePermission", "enablePermissionValid"]
+]);
+async function attachEnvironmentConfig() {
+  const env = window.Environment;
+  const query = qs.parse(window.location.search, { ignoreQueryPrefix: true });
+  Object.keys(ibiz.env).forEach((key) => {
+    const key2 = envMap.has(key) ? envMap.get(key) : key;
+    if (env[key2] != null) {
+      ibiz.env[key] = env[key2];
+    }
+  });
+  if (query) {
+    if (query.srfdcsystem) {
+      ibiz.env.dcSystem = query.srfdcsystem;
+    }
+  }
+  if (env.AppTitle) {
+    document.title = env.AppTitle;
+  }
+  if (env.favicon) {
+    const favicon = document.getElementById("favicon");
+    if (favicon) {
+      const fav = env.favicon;
+      if (fav.endsWith(".png")) {
+        favicon.type = "image/png";
+      } else if (fav.endsWith(".ico")) {
+        favicon.type = "image/x-icon";
+      } else if (fav.endsWith(".gif")) {
+        favicon.type = "image/gif";
+      } else if (fav.endsWith(".svg")) {
+        favicon.type = "image/svg+xml";
+      }
+      favicon.href = fav;
+    }
+  }
+  if (env.globalConfig) {
+    ibiz.env.globalConfig = env.globalConfig;
+    ibiz.config = ramda.mergeDeepRight(ibiz.config, env.globalConfig);
+  }
+  ibiz.log.setLevel(ibiz.env.logLevel);
+}
+
+exports.attachEnvironmentConfig = attachEnvironmentConfig;

package/lib/web-app/components/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var modalRouterShell = require('./modal-router-shell/modal-router-shell.cjs');
+var routerShell = require('./router-shell/router-shell.cjs');
+
+"use strict";
+
+exports.ModalRouterShell = modalRouterShell.ModalRouterShell;
+exports.RouterShell = routerShell.RouterShell;

package/lib/web-app/components/modal-router-shell/modal-router-shell.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var vueRouter = require('vue-router');
+var core = require('@ibiz-template/core');
+var runtime = require('@ibiz-template/runtime');
+var ramda = require('ramda');
+var qs = require('qs');
+require('../../../view/index.cjs');
+var _404View = require('../../../view/404-view/404-view.cjs');
+
+"use strict";
+const ModalRouterShell = /* @__PURE__ */ vue.defineComponent({
+  name: "ModalRouterShell",
+  props: {
+    modal: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const route = vueRouter.useRoute();
+    const router = vueRouter.useRouter();
+    const isDestroyed = vue.ref(false);
+    const viewData = vue.ref({});
+    const destroyContext = () => {
+      if (viewData.value.context) {
+        const {
+          context
+        } = vue.toRaw(viewData.value);
+        if (context)
+          context.destroy();
+      }
+    };
+    const routeDepth = props.modal.routeDepth;
+    let overlay = null;
+    vue.onUnmounted(() => {
+      isDestroyed.value = true;
+      if (overlay) {
+        overlay.dismiss();
+        overlay = null;
+      }
+      destroyContext();
+    });
+    const openView = async () => {
+      var _a;
+      viewData.value = await vue3Util.parseRouteViewData(route, routeDepth, true);
+      if (!(viewData.value.context instanceof core.IBizContext)) {
+        viewData.value.context = core.IBizContext.create(viewData.value.context);
+      }
+      const appViewId = route.params.modalView;
+      const paramsStr = route.params.modalParams;
+      if (paramsStr) {
+        const params = qs.parse(paramsStr, {
+          strictNullHandling: true,
+          delimiter: ";"
+        });
+        if (params.srfnavctx) {
+          const srfnavctx = JSON.parse(decodeURIComponent(params.srfnavctx));
+          Object.assign(viewData.value.context, srfnavctx);
+          delete params.srfnavctx;
+        }
+        if (params.srfnav) {
+          viewData.value.srfnav = params.srfnav;
+          delete params.srfnav;
+        }
+        if (!ramda.isEmpty(params)) {
+          if (viewData.value.params) {
+            Object.assign(viewData.value.params, params);
+          } else {
+            viewData.value.params = params;
+          }
+        }
+      }
+      if (!viewData.value.context) {
+        const _context = core.IBizContext.create({});
+        viewData.value.context = _context;
+      }
+      let appView = null;
+      let component;
+      try {
+        appView = await ibiz.hub.config.view.get(appViewId);
+        component = vue3Util.createOverlayView({
+          context: viewData.value.context,
+          params: viewData.value.params,
+          viewId: appView.id
+        });
+      } catch (error) {
+        component = _404View.View404;
+      }
+      const opts = {
+        width: (appView == null ? void 0 : appView.width) || "80%",
+        height: (appView == null ? void 0 : appView.height) || "80%",
+        footerHide: true
+      };
+      overlay = ibiz.overlay.createModal(component, void 0, opts);
+      overlay.present();
+      await overlay.onWillDismiss();
+      overlay = null;
+      if (isDestroyed.value === false) {
+        if ((_a = window.history.state) == null ? void 0 : _a.back) {
+          router.back();
+        } else {
+          const path = route.path;
+          const index = path.indexOf("/".concat(runtime.RouteConst.ROUTE_MODAL_TAG, "/"));
+          router.replace(path.substring(0, index));
+        }
+      }
+    };
+    openView();
+    return {};
+  },
+  render() {
+    return vue.createVNode("div", {
+      "style": "width: 0;height: 0;"
+    }, [vue.createTextVNode("\u8DEF\u7531\u6A21\u6001\u5360\u4F4D")]);
+  }
+});
+
+exports.ModalRouterShell = ModalRouterShell;

package/lib/web-app/components/router-shell/router-shell.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var vueRouter = require('vue-router');
+var runtime = require('@ibiz-template/runtime');
+var core = require('@ibiz-template/core');
+var ramda = require('ramda');
+
+"use strict";
+const RouterShell = /* @__PURE__ */ vue.defineComponent({
+  name: "RouterShell",
+  props: {
+    modal: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const route = vueRouter.useRoute();
+    const router = vueRouter.useRouter();
+    const viewData = vue.ref({});
+    const isLoaded = vue.ref(false);
+    const isActivated = vue.ref(true);
+    const destroyContext = () => {
+      if (viewData.value.context) {
+        const {
+          context
+        } = vue.toRaw(viewData.value);
+        if (context)
+          context.destroy();
+      }
+    };
+    const routeDepth = props.modal.routeDepth;
+    vue.onUnmounted(() => {
+      destroyContext();
+    });
+    const calcViewData = async () => {
+      try {
+        const _viewData = await vue3Util.parseRouteViewData(route, routeDepth);
+        const _context = core.IBizContext.create(_viewData.context);
+        viewData.value = {
+          ..._viewData,
+          context: _context
+        };
+        isLoaded.value = true;
+      } catch (error) {
+        router.push({
+          name: "404View".concat(routeDepth)
+        });
+      }
+    };
+    calcViewData();
+    vue.watch(() => route.params.view1, () => {
+      if (routeDepth === 1) {
+        destroyContext();
+        calcViewData();
+      }
+    });
+    const routeModal = new runtime.Modal({
+      mode: runtime.ViewMode.ROUTE,
+      routeDepth: routeDepth + 1
+    });
+    vue.onActivated(() => {
+      isActivated.value = true;
+    });
+    vue.onDeactivated(() => {
+      isActivated.value = false;
+    });
+    return {
+      routeModal,
+      route,
+      viewData,
+      isLoaded,
+      isActivated
+    };
+  },
+  render() {
+    if (!this.isLoaded) {
+      return null;
+    }
+    const {
+      context,
+      params,
+      srfnav,
+      viewModel
+    } = this.viewData;
+    const props = ramda.mergeDeepLeft({
+      ...this.$props,
+      ...this.$attrs,
+      context,
+      params,
+      modelData: viewModel,
+      key: viewModel.codeName
+    }, {
+      state: {
+        srfnav
+      }
+    });
+    return vue.createVNode(vue.Fragment, null, [vue.h(vue.resolveComponent("IBizViewShell"), props, this.$slots), this.isActivated && vue.createVNode(vue.resolveComponent("router-view"), {
+      "key": viewModel.codeName,
+      "name": runtime.RouteConst.ROUTE_MODAL_TAG,
+      "modal": this.routeModal
+    }, null)]);
+  }
+});
+
+exports.RouterShell = RouterShell;

package/lib/web-app/create-vue-app.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var vue = require('vue');
+var ElementPlus = require('element-plus');
+var zhCn = require('../node_modules/.pnpm/element-plus@2.4.2_vue@3.3.8/node_modules/element-plus/dist/locale/zh-cn.cjs');
+var vue3Util = require('@ibiz-template/vue3-util');
+var ibizVue3 = require('../ibiz-vue3.cjs');
+var index = require('../locale/index.cjs');
+
+"use strict";
+function createVueApp(rootComponent, rootProps) {
+  const app = vue.createApp(rootComponent, rootProps);
+  app.component("KeepAlive", vue.KeepAlive);
+  app.config.errorHandler = function(err) {
+    ibiz.util.error.handle(err);
+  };
+  const installPlugin = (_, plugin) => {
+    app.use(plugin);
+  };
+  vue3Util.AppHooks.useComponent.tap(installPlugin);
+  if (rootProps) {
+    const oldUnMounted = rootProps.unmounted;
+    rootProps.unmounted = () => {
+      oldUnMounted();
+      vue3Util.AppHooks.useComponent.removeTap(installPlugin);
+    };
+  }
+  app.use(index.i18n);
+  app.use(ElementPlus, {
+    locale: zhCn.default
+  });
+  app.use(vue3Util.piniaInstance);
+  app.use(ibizVue3.default);
+  vue3Util.AppHooks.createApp.callSync(null, app);
+  ibiz.plugin.register(app);
+  return app;
+}
+
+exports.createVueApp = createVueApp;

package/lib/web-app/guard/auth-guard/auth-guard.cjs

@@ -0,0 +1,171 @@
+'use strict';
+
+var core = require('@ibiz-template/core');
+var modelHelper = require('@ibiz-template/model-helper');
+var ramda = require('ramda');
+var vue3Util = require('@ibiz-template/vue3-util');
+var index = require('../../../locale/index.cjs');
+
+"use strict";
+async function loadAppData() {
+  const res = await ibiz.net.get("/appdata");
+  if (res.ok) {
+    ibiz.appData = res.data;
+  }
+}
+async function loadOrgData() {
+  const res = await ibiz.net.get("/uaa/getbydcsystem/".concat(ibiz.env.dcSystem));
+  if (res.ok) {
+    const orgDataItems = res.data;
+    if (orgDataItems) {
+      const [data] = orgDataItems;
+      ibiz.orgData = data;
+    }
+  }
+}
+async function loadTheme() {
+  const app = ibiz.hub.getApp();
+  const uiThemes = app.model.appUIThemes || [];
+  if (uiThemes.length > 0) {
+    const theme = uiThemes[0];
+    await ibiz.util.theme.loadTheme(theme);
+  }
+}
+async function initEnvironment(helper) {
+  if (helper) {
+    const app = await helper.getAppModel();
+    const userParam = app.userParam;
+    if (userParam) {
+      Object.keys(userParam).forEach((key) => {
+        const value = ibiz.util.rawValue.format(userParam[key]);
+        const keys = key.split(".");
+        let currentObj = ibiz.env;
+        for (let i = 0; i < keys.length; i++) {
+          const k = keys[i];
+          if (i === keys.length - 1) {
+            currentObj[k] = value;
+          } else {
+            currentObj[k] = currentObj[k] || {};
+            currentObj = currentObj[k];
+          }
+        }
+      });
+      if (ibiz.env.globalConfig) {
+        ibiz.config = ramda.mergeDeepRight(ibiz.config, ibiz.env.globalConfig);
+      }
+      ibiz.log.setLevel(ibiz.env.logLevel);
+    }
+  }
+}
+let hasModelInit = false;
+let noPermissionModel = false;
+async function initModel(permission = true) {
+  if (!hasModelInit || hasModelInit && noPermissionModel !== permission) {
+    ibiz.hub.reset();
+    const helper = new modelHelper.ModelHelper(
+      async (url, params) => {
+        const res = await ibiz.net.get(
+          "".concat(ibiz.env.remoteModelUrl).concat(url),
+          params,
+          permission ? {} : { srfdcsystem: ibiz.env.dcSystem }
+        );
+        return res.data;
+      },
+      ibiz.env.appId,
+      permission
+    );
+    await initEnvironment(helper);
+    const app = await ibiz.hub.getAppAsync(ibiz.env.appId);
+    const appModel = app.model;
+    ibiz.env.isMob = appModel.mobileApp === true;
+    if (ibiz.env.isEnableMultiLan) {
+      const lang = ibiz.i18n.getLang();
+      const m = await helper.getPSAppLang(lang.replace("-", "_").toUpperCase());
+      const items = m.languageItems || [];
+      const data = {};
+      items.forEach((item) => {
+        data[item.lanResTag] = item.content;
+      });
+      index.i18n.global.mergeLocaleMessage(lang, data);
+    }
+    if (!appModel.appUIThemes) {
+      const module = await import('@ibiz-template/web-theme');
+      const theme = module.default || module;
+      vue3Util.AppHooks.useComponent.callSync(null, theme);
+    } else {
+      await loadTheme();
+    }
+  }
+  noPermissionModel = permission;
+  hasModelInit = true;
+}
+async function appInit() {
+  if (ibiz.env.isSaaSMode === true) {
+    await loadOrgData();
+  }
+  await loadAppData();
+  await initModel();
+  await ibiz.auth.extendLogin();
+  await ibiz.hub.notice.init();
+}
+function throw401() {
+  throw new core.HttpError({
+    response: {
+      status: 401,
+      statusText: "\u65E0\u6743\u9650\u8BBF\u95EE\uFF01"
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  });
+}
+async function anonymousValidate() {
+  const authInfo = ibiz.auth.getAuthInfo();
+  if (authInfo && !authInfo.isAnonymous) {
+    return;
+  }
+  await initModel(false);
+  const urlPaths = window.location.hash.split("/");
+  const viewName = urlPaths[urlPaths.length - 2];
+  let viewModel;
+  if (viewName !== "#") {
+    try {
+      viewModel = await ibiz.hub.getAppView(viewName);
+    } catch (error) {
+      ibiz.log.error(error);
+    }
+  }
+  if (!viewModel) {
+    ibiz.log.error(
+      "\u627E\u4E0D\u5230\u89C6\u56FE\u6A21\u578B".concat(viewName, ",\u8BF7\u786E\u4FDD\u8BE5\u89C6\u56FE\u914D\u7F6E\u4E86\u533F\u540D\u8BBF\u95EE\u548C\u7528\u6237\u5F15\u7528")
+    );
+    throw401();
+    return;
+  }
+  if (viewModel.accUserMode !== 3) {
+    throw401();
+  }
+  if (!authInfo) {
+    const loginResult = await ibiz.auth.anonymousLogin();
+    if (!loginResult) {
+      throw new core.RuntimeError("\u533F\u540D\u7528\u6237\u767B\u5F55\u5931\u8D25");
+    }
+  }
+}
+async function AuthGuard(notLogin = true) {
+  if (notLogin) {
+    let result = true;
+    try {
+      if (ibiz.env.enableAnonymous) {
+        await anonymousValidate();
+      }
+      await appInit();
+    } catch (error) {
+      result = false;
+      ibiz.util.error.handle(error);
+    }
+    return result;
+  }
+  await initModel(false);
+  return true;
+}
+
+exports.AuthGuard = AuthGuard;

package/lib/web-app/guard/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var authGuard = require('./auth-guard/auth-guard.cjs');
+
+"use strict";
+
+exports.AuthGuard = authGuard.AuthGuard;

package/lib/web-app/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var main = require('./main.cjs');
+
+"use strict";
+
+exports.runApp = main.runApp;