cloud-web-corejs-haier 1.0.43 → 1.0.45

package/src/utils/componentDialog.js

@@ -0,0 +1,217 @@
+import Vue from "vue";
+
+const componentContext = require.context("../components", true, /\.vue$/, "lazy");
+const viewContext = require.context("../views", true, /\.vue$/, "lazy");
+const componentKeys = new Set(componentContext.keys());
+const viewKeys = new Set(viewContext.keys());
+
+function normalizePath(path) {
+  return String(path || "")
+    .trim()
+    .replace(/\\\\/g, "/")
+    .replace(/[?#].*$/, "")
+    .replace(/^\.\//, "")
+    .replace(/^src\//, "")
+    .replace(/^@base\//, "")
+    .replace(/^@\//, "")
+    .replace(/^\/+/, "")
+    .replace(/\/+$/, "");
+}
+
+function getComponentLoader(path) {
+  const normalizedPath = normalizePath(path);
+  if (!normalizedPath) {
+    throw new Error("[componentDialog] componentPath 不能为空");
+  }
+  if (normalizedPath.split("/").includes("..")) {
+    throw new Error("[componentDialog] componentPath 不允许包含 ..");
+  }
+
+  let context;
+  let contextKeys;
+  let relativePath;
+  if (normalizedPath.startsWith("components/")) {
+    context = componentContext;
+    contextKeys = componentKeys;
+    relativePath = normalizedPath.slice("components/".length);
+  } else if (normalizedPath.startsWith("views/")) {
+    context = viewContext;
+    contextKeys = viewKeys;
+    relativePath = normalizedPath.slice("views/".length);
+  } else {
+    throw new Error("[componentDialog] 只允许加载 src/components 或 src/views 下的组件");
+  }
+
+  const candidates = /\.vue$/i.test(relativePath)
+    ? [`./${relativePath}`]
+    : [`./${relativePath}.vue`, `./${relativePath}/index.vue`];
+  const componentKey = candidates.find((key) => contextKeys.has(key));
+  if (!componentKey) {
+    throw new Error(`[componentDialog] 找不到组件：${normalizedPath}`);
+  }
+  return () => Promise.resolve(context(componentKey));
+}
+
+async function loadComponent(path) {
+  const componentModule = await getComponentLoader(path)();
+  return componentModule.default || componentModule;
+}
+
+function callEvent(events, eventName, args) {
+  const handler = events[eventName];
+  if (typeof handler === "function") handler(...args);
+}
+
+function mountComponentDialog(component, options, parentVm) {
+  const {
+    wrapper = true,
+    dialog = {},
+    props = {},
+    attrs = {},
+    provide: provideValues = {},
+    events = {},
+    onClose,
+  } = options;
+  let hostInstance = null;
+  let destroyTimer = null;
+  let closeStarted = false;
+  let closeNotified = false;
+  let resizeHandler = null;
+  const centerTimers = [];
+
+  const centerDialog = () => {
+    if (!hostInstance || options.verticalCenter === false) return;
+    hostInstance.$nextTick(() => {
+      if (!hostInstance || !hostInstance.$el) return;
+      const hostElement = hostInstance.$el;
+      const dialogElement = hostElement.matches(".el-dialog")
+        ? hostElement
+        : hostElement.querySelector(".el-dialog");
+      if (!dialogElement || !dialogElement.offsetHeight) return;
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+      dialogElement.style.marginTop = `${Math.max((viewportHeight - dialogElement.offsetHeight) / 2, 0)}px`;
+    });
+  };
+
+  const notifyClose = () => {
+    if (closeNotified) return;
+    closeNotified = true;
+    if (typeof onClose === "function") onClose();
+  };
+  const removeHost = () => {
+    if (!hostInstance) return;
+    centerTimers.forEach((timer) => clearTimeout(timer));
+    if (resizeHandler) window.removeEventListener("resize", resizeHandler);
+    resizeHandler = null;
+    const element = hostInstance.$el;
+    hostInstance.$destroy();
+    if (element && element.parentNode) element.parentNode.removeChild(element);
+    hostInstance = null;
+  };
+  const destroy = () => {
+    if (closeStarted) return;
+    closeStarted = true;
+    notifyClose();
+    destroyTimer = setTimeout(removeHost, 300);
+  };
+  const forceDestroy = () => {
+    if (destroyTimer) clearTimeout(destroyTimer);
+    destroyTimer = null;
+    closeStarted = true;
+    notifyClose();
+    removeHost();
+  };
+
+  const DialogHost = Vue.extend({
+    name: "DynamicComponentDialogHost",
+    provide() {
+      return provideValues;
+    },
+    data() {
+      return { visible: true };
+    },
+    methods: {
+      closeDialog() {
+        this.visible = false;
+        const componentInstance = this.$refs.contentComponent;
+        if (componentInstance && Object.prototype.hasOwnProperty.call(componentInstance, "showDialog")) {
+          componentInstance.showDialog = false;
+        }
+        destroy();
+      },
+    },
+    render(h) {
+      const childEvents = {};
+      Object.keys(events).forEach((eventName) => {
+        childEvents[eventName] = (...args) => callEvent(events, eventName, args);
+      });
+      childEvents["update:visible"] = (visible) => {
+        callEvent(events, "update:visible", [visible]);
+        this.visible = visible;
+        if (visible === false) this.closeDialog();
+      };
+      childEvents["update:visiable"] = (visible) => {
+        callEvent(events, "update:visiable", [visible]);
+        this.visible = visible;
+        if (visible === false) this.closeDialog();
+      };
+      childEvents.close = (...args) => {
+        callEvent(events, "close", args);
+        if (!wrapper) this.closeDialog();
+      };
+      const componentNode = h(component, {
+        ref: "contentComponent",
+        props: { ...props, visible: this.visible, visiable: this.visible },
+        attrs,
+        on: childEvents,
+      });
+      if (!wrapper) return componentNode;
+      return h("el-dialog", {
+        props: {
+          title: "",
+          width: "700px",
+          appendToBody: true,
+          closeOnClickModal: false,
+          ...dialog,
+          visible: this.visible,
+        },
+        on: {
+          "update:visible": (visible) => {
+            this.visible = visible;
+          },
+          close: destroy,
+        },
+      }, [componentNode]);
+    },
+  });
+
+  const parent = parentVm || (typeof window !== "undefined" && window.$vueRoot ? window.$vueRoot : null);
+  const instanceOptions = {};
+  if (parent) {
+    instanceOptions.parent = parent;
+    if (parent._i18n) instanceOptions.i18n = parent._i18n;
+  }
+  hostInstance = new DialogHost(instanceOptions);
+  hostInstance.$mount();
+  document.body.appendChild(hostInstance.$el);
+  if (options.verticalCenter !== false) {
+    resizeHandler = centerDialog;
+    window.addEventListener("resize", resizeHandler);
+    centerTimers.push(setTimeout(centerDialog, 0));
+    centerTimers.push(setTimeout(centerDialog, 300));
+  }
+  return {
+    host: hostInstance,
+    instance: hostInstance.$refs.contentComponent,
+    close() {
+      if (hostInstance) hostInstance.closeDialog();
+    },
+    destroy: forceDestroy,
+    recenter: centerDialog,
+  };
+}
+
+export async function openComponentDialog(options = {}, parentVm) {
+  const component = await loadComponent(options.componentPath);
+  return mountComponentDialog(component, options, parentVm);
+}