@gct-paas/design 0.1.4-dev.8 → 0.1.4-dev.9

package/es/hooks/design-view/designer/useDesignModal.mjs

@@ -0,0 +1,80 @@
+import { BuiltinType, TreeHelper } from '@gct-paas/core';
+import { modalCfg } from '@gct-paas/schema';
+import { cloneDeep } from 'lodash-es';
+import { computed } from 'vue';
+import { modalInfo, subTableModalId, subTableModalState, modalDesignId, modalDesignState, pageJson } from '../design-state.mjs';
+import { useScope } from '../layout/useScope.mjs';
+import { useGlobal } from '../global/useGlobal.mjs';
+
+function useDesignModal() {
+  const { queryInfo } = useGlobal();
+  const { scopeData } = useScope();
+  async function setModalDesignState(flag, modalId = "", isGlobal = false) {
+    if (flag) {
+      await getModalInfo(modalId, isGlobal);
+    } else {
+      modalInfo.value = cloneDeep(modalCfg.widget);
+    }
+    modalDesignState.value = flag;
+    modalDesignId.value = modalId;
+  }
+  async function getModalInfo(modelId, isGlobal = false) {
+    if (isGlobal) {
+      const data = await queryInfo(modelId);
+      if (data && data.length > 0) {
+        modalInfo.value = JSON.parse(data[0].configJson);
+      }
+    } else {
+      modalInfo.value = pageJson.modals.find(
+        (d) => d.id === modelId
+      );
+    }
+  }
+  function setSubTableModalDesignState(flag, needId = "") {
+    subTableModalState.value = flag;
+    subTableModalId.value = needId;
+  }
+  function setModalInfo(modal) {
+    modalInfo.value = modal;
+  }
+  const modalBody = computed(() => {
+    return modalInfo.value.children.find(
+      (d) => d?.type === BuiltinType.MODAL_BODY
+    );
+  });
+  const modalFooter = computed(() => {
+    return modalInfo.value.children.find(
+      (d) => d?.type === BuiltinType.MODAL_FOOTER
+    );
+  });
+  const modalBottomBtn = computed(() => {
+    return modalInfo.value.children.find(
+      (d) => d?.type === BuiltinType.BottomButtonContainer
+    );
+  });
+  const subTableInfo = computed(() => {
+    return TreeHelper.findNode(scopeData.value, (widget) => {
+      return widget.id === subTableModalId.value;
+    });
+  });
+  const isGlobalModal = computed(() => {
+    return /^i?g_modal_/.test(modalInfo.value.id);
+  });
+  return {
+    modalInfo,
+    modalDesignState,
+    modalDesignId,
+    modalBody,
+    modalFooter,
+    modalBottomBtn,
+    isGlobalModal,
+    subTableInfo,
+    setModalDesignState,
+    setModalInfo,
+    setSubTableModalDesignState,
+    subTableModalState,
+    subTableModalId
+  };
+}
+
+export { useDesignModal };

package/es/hooks/design-view/designer/useDesignPreview.d.ts

@@ -0,0 +1,11 @@
+import { Platform } from '@gct-paas/core';
+export declare function useDesignPreview(): {
+    preview: import('@vueuse/core').UseDebounceFnReturn<() => void>;
+    previewSandbox: import('@vueuse/core').UseDebounceFnReturn<() => void>;
+    sandboxList: import('vue').Ref<any, any>;
+    getDataList: () => Promise<void>;
+    historyPreview: (hid: string) => {
+        url: string;
+        platform: Platform;
+    };
+};

package/es/hooks/design-view/designer/useDesignPreview.mjs

@@ -0,0 +1,143 @@
+import { Platform, genUrl, getToken, openWindow, getTenant } from '@gct-paas/core';
+import { useDebounceFn } from '@vueuse/core';
+import { ref } from 'vue';
+import { platform } from '../design-state.mjs';
+
+function useDesignPreview() {
+  function basicPreview({ pid, webUrl, mobileUrl, padUrl }) {
+    if (platform.value === Platform.MOBILE) {
+      const { origin } = location;
+      const appOrigin = origin;
+      const curWin = openWindow(
+        genUrl(`${appOrigin}${mobileUrl}?_t=${Date.now()}`, {
+          aid: _gct.store.context.aid,
+          pid,
+          bid: _gct.store.context.bid,
+          token: getToken(),
+          "tenant-id": getTenant()
+        }),
+        {
+          noopener: false,
+          noreferrer: false,
+          target: "_blank",
+          optionStr: `width=414,height=896,top=200,left=${(window.screen.availWidth - 360) / 2}`
+        }
+      );
+      curWin?.resizeTo(414, 896);
+    } else if (platform.value === Platform.PAD) {
+      const { origin } = location;
+      const appOrigin = origin;
+      openWindow(
+        genUrl(`${appOrigin}${padUrl}?_t=${Date.now()}`, {
+          aid: _gct.store.context.aid,
+          pid,
+          bid: _gct.store.context.bid,
+          token: getToken(),
+          "tenant-id": getTenant()
+        }),
+        {
+          target: "_blank"
+        }
+      );
+    } else {
+      openWindow(
+        genUrl(`${location.origin}${webUrl}?_t=${Date.now()}`, {
+          aid: _gct.store.context.aid,
+          pid,
+          bid: _gct.store.context.bid
+        }),
+        {
+          target: "_blank"
+        }
+      );
+    }
+  }
+  const _doPreview = () => {
+    basicPreview({
+      pid: _gct.store.context.pid,
+      webUrl: undefined                                      ,
+      mobileUrl: undefined                                         ,
+      padUrl: undefined                                      
+    });
+  };
+  const preview = useDebounceFn(_doPreview, 400);
+  const sandboxList = ref();
+  const getDataList = async () => {
+    const data = await _api.apaas.sandboxConfig.getList();
+    if (!data.length) {
+      return;
+    }
+    if (data && data.length && data[0].status !== "INIT") {
+      sandboxList.value = data.map((i) => {
+        return {
+          ...i,
+          web: i.webRoutePath,
+          mobile: i.pdaRoutePath,
+          pad: i.padRoutePath
+        };
+      });
+    }
+  };
+  const _doPreviewSandbox = () => {
+    basicPreview({
+      pid: _gct.store.context.pid,
+      webUrl: undefined                                      .replace(
+        "web-render",
+        "web-sandbox"
+      ),
+      mobileUrl: undefined                                         .replace(
+        "mobile-render",
+        "mobile-sandbox"
+      ),
+      padUrl: undefined                                      .replace(
+        "pad-render",
+        "pad-sandbox"
+      )
+    });
+  };
+  const previewSandbox = useDebounceFn(_doPreviewSandbox, 400);
+  function historyPreview(hid) {
+    if (platform.value === Platform.MOBILE) {
+      const url = genUrl(
+        `http://${location.hostname}${undefined                                                 }?_t=${Date.now()}`,
+        {
+          aid: _gct.store.context.aid,
+          pid: hid,
+          bid: _gct.store.context.bid,
+          token: getToken()
+        }
+      );
+      return { url, platform: platform.value };
+    } else if (platform.value === Platform.PAD) {
+      const url = genUrl(
+        `http://${location.hostname}${undefined                                              }?_t=${Date.now()}`,
+        {
+          aid: _gct.store.context.aid,
+          pid: hid,
+          bid: _gct.store.context.bid,
+          token: getToken()
+        }
+      );
+      return { url, platform: platform.value };
+    } else {
+      const url = genUrl(
+        `${location.origin}${undefined                                              }?_t=${Date.now()}`,
+        {
+          aid: _gct.store.context.aid,
+          pid: hid,
+          bid: _gct.store.context.bid
+        }
+      );
+      return { url, platform: platform.value };
+    }
+  }
+  return {
+    preview,
+    previewSandbox,
+    sandboxList,
+    getDataList,
+    historyPreview
+  };
+}
+
+export { useDesignPreview };

package/es/hooks/design-view/designer/useDesignSave.d.ts

@@ -0,0 +1,12 @@
+import { PageJson, RuntimePageJson } from '@gct-paas/schema';
+export declare function useDesignSave(): {
+    save: (_flag?: boolean, showSuccess?: boolean) => Promise<boolean>;
+    validateWidgets: (widgets: IData[], parents?: IData[]) => boolean;
+    savePageJsonSnapshot: (json?: PageJson) => void;
+};
+/**
+ * 递归遍历 tree 并组装运行时 JSON
+ *
+ * @returns {RuntimePageJson} 运行时页面JSON
+ */
+export declare function buildRuntimeJson(): RuntimePageJson;

package/es/hooks/design-view/designer/useDesignSave.mjs

@@ -0,0 +1,239 @@
+import { TreeHelper, t, SearchComponents, Platform } from '@gct-paas/core';
+import { isArray, isNil, isEmpty } from 'lodash-es';
+import { message } from 'ant-design-vue';
+import { pageJson, widgetInfo, pageJsonSnapshot, regRoot, transformPageJson, platform, pageDesignHistoryList, noMore, pageNo } from '../design-state.mjs';
+
+function useDesignSave() {
+  const { cancelOccupy } = {};
+  function savePageJsonSnapshot(json) {
+    pageJsonSnapshot.value = JSON.stringify(json ?? pageJson);
+  }
+  function validateWidgets(widgets, parents = []) {
+    for (let i = 0; i < widgets.length; i++) {
+      const widget = widgets[i];
+      const { type, props } = widget;
+      const configs = widgetInfo.value.propEditors[type];
+      const models = configs && isArray(configs) ? configs : configs(widgets, parents);
+      for (let j = 0; j < models.length; j++) {
+        const model = models[j];
+        if (model?.required === true) {
+          const { name } = model;
+          let keys = [];
+          const isObject = typeof name === "object";
+          if (typeof name === "object") {
+            keys = Object.keys(name).map((item) => {
+              return name[item];
+            });
+          } else if (name?.startsWith("root:")) {
+            const key = name.substring(5);
+            const val = widget[key];
+            if (isNil(val) || isEmpty(val)) {
+              message.error(
+                `【${widget.alias || widget.props.label || widget.props.fieldName || ""} ${widget.id}】${t("sys.pageDesigner.widget")} -【${t("sys.pageDesigner.prop")} - ${t(
+                  `sys.pageDesigner.${model.group}Prop`
+                )} ${model.label ? "-" + t(model.label) : ""}】${t("sys.model.required")}`
+              );
+              return false;
+            }
+          } else {
+            keys = name.replace(regRoot, "").split(".");
+          }
+          let memo = props;
+          for (let k = 0; k < keys.length; k++) {
+            const key = keys[k];
+            const val = isObject ? props[key] : memo[key];
+            memo = val;
+            if (model.hidden) {
+              const hide = model.hidden(widget);
+              if (hide === true) {
+                continue;
+              }
+            }
+            if (isNil(val) || isEmpty(val)) {
+              message.error(
+                `【${widget.alias || widget.props.label || widget.props.fieldName || ""} ${widget.id}】${t("sys.pageDesigner.widget")} -【${t("sys.pageDesigner.prop")} - ${t(
+                  `sys.pageDesigner.${model.group}Prop`
+                )} ${model.label ? "-" + t(model.label) : ""}】${t("sys.model.required")}`
+              );
+              return false;
+            }
+          }
+        }
+        if (model?.saveHook) {
+          model.saveHook(widget);
+        }
+      }
+      if ([
+        SearchComponents.SearchNumberInput,
+        SearchComponents.SearchStringNumberInput
+      ].includes(type) && props?.isRang && props?.defaultValue && Array.isArray(props?.defaultValue)) {
+        const start = props.defaultValue[0];
+        const end = props.defaultValue[1];
+        if ((start || start === 0) && (end || end === 0) && start > end) {
+          message.error(
+            `【${widget.alias || widget.props.label || widget.props.fieldName || ""} ${widget.id}】${t("sys.pageDesigner.widget")} -【${t("sys.pageDesigner.prop")} - ${t("sys.pageDesigner.defaultValue")}】- ${t("sys.model.numMaxGTMin")}`
+          );
+          return false;
+        }
+      }
+      if (widget.children) {
+        parents.push(widget);
+        const bol = validateWidgets(widget.children, parents);
+        if (bol === false) {
+          return bol;
+        }
+      }
+    }
+    return true;
+  }
+  async function save(_flag = true, showSuccess = true) {
+    const pageId = _gct.store.context.pid;
+    const _pageJson = transformPageJson(pageJson);
+    const bol = validateWidgets(_pageJson.widgets);
+    if (bol === false) {
+      return false;
+    }
+    if (_pageJson.widgets.some((n) => n.type === "data-list")) {
+      _pageJson.widgets.forEach((item) => {
+        if (item.type === "data-list" && !item.props.showFieldExp) {
+          item.props.showFieldExpVal = "";
+        }
+      });
+    }
+    const bol2 = validateWidgets(_pageJson.modals);
+    if (bol2 === false) {
+      return false;
+    }
+    if (_pageJson.modals.length) {
+      _pageJson.modals.forEach((item) => {
+        if (!item.props.hasFooter) {
+          item.children = item.children.filter((n) => {
+            return n?.type !== "bottom-button-container";
+          });
+        }
+        if (item.props.hasFooter && item.children.some((n) => n?.type === "modalFooter")) {
+          item.children = item.children.filter((n) => {
+            return n?.type !== "modalFooter";
+          });
+        }
+      });
+    }
+    const plugins = [];
+    function deepFindPlugins(widgets) {
+      const items = [];
+      widgets.forEach((widget) => {
+        if (widget._plugin) {
+          items.push({
+            key: widget._plugin.key,
+            version: widget._plugin.version,
+            url: widget._plugin.url
+          });
+        }
+        if (widget.children && widget.children.length > 0) {
+          items.push(...deepFindPlugins(widget.children));
+        }
+      });
+      return items;
+    }
+    plugins.push(...deepFindPlugins(_pageJson.widgets));
+    if (_pageJson.modals) {
+      _pageJson.modals.forEach((modal) => {
+        if (modal.children) {
+          modal.children.forEach((item) => {
+            plugins.push(...deepFindPlugins(item.children));
+          });
+        }
+      });
+    }
+    _pageJson.plugins = plugins;
+    if (platform.value === Platform.MOBILE) {
+      await _api.apaas.mobilePage.putUpdateDesignerJsonId(
+        { id: pageId },
+        {
+          designerJson: JSON.stringify(_pageJson),
+          runtimeJson: JSON.stringify(buildRuntimeJson()),
+          logId: (pageDesignHistoryList.value[0] ?? {}).id
+        }
+      );
+    } else if (platform.value === Platform.PAD) {
+      await _api.apaas.padPage.putUpdateDesignerJsonId(
+        { id: pageId },
+        {
+          designerJson: JSON.stringify(_pageJson),
+          runtimeJson: JSON.stringify(buildRuntimeJson()),
+          logId: (pageDesignHistoryList.value[0] ?? {}).id
+        }
+      );
+    } else {
+      await _api.apaas.webpage.putUpdateDesignerJsonId(
+        { id: pageId },
+        {
+          designerJson: JSON.stringify(_pageJson),
+          runtimeJson: JSON.stringify(buildRuntimeJson()),
+          logId: (pageDesignHistoryList.value[0] ?? {}).id
+        }
+      );
+    }
+    savePageJsonSnapshot(_pageJson);
+    cancelOccupy();
+    noMore.value = false;
+    pageNo.value = 1;
+    return true;
+  }
+  return {
+    save,
+    validateWidgets,
+    savePageJsonSnapshot
+  };
+}
+function buildRuntimeJson() {
+  try {
+    const runtimeWidgets = TreeHelper.traverseAndBuildTree(
+      // cloneDeep 在 schema 包中
+      JSON.parse(JSON.stringify(pageJson.widgets)),
+      (node) => findWidgetCallback(node)
+    );
+    const funcStr = "";
+    const modals = pageJson.modals.map((modal) => {
+      const modalFuncStr = "";
+      const runtimeWidgets2 = TreeHelper.traverseAndBuildTree(
+        JSON.parse(JSON.stringify(modal.children)),
+        (node) => findWidgetCallback(node, modal)
+      );
+      return {
+        props: modal.props,
+        css: modal.css,
+        modalName: modal.modalName,
+        id: modal.id,
+        i18n: modal.i18n || {},
+        events: modal.events,
+        children: runtimeWidgets2,
+        runJs: modalFuncStr,
+        style: modal.style
+      };
+    });
+    return {
+      widgets: runtimeWidgets,
+      runJs: funcStr,
+      modals,
+      css: pageJson.css,
+      keepAlive: pageJson.keepAlive,
+      globalEvents: pageJson.globalEvents,
+      pageEvents: pageJson.pageEvents,
+      permissions: pageJson.permissions,
+      pageStyle: pageJson.style,
+      pageConfig: pageJson.pageConfig,
+      pageVars: pageJson.pageVars,
+      plugins: pageJson.plugins,
+      pageLayoutMode: pageJson.pageLayoutMode
+    };
+  } catch (error) {
+    message.warn(t("sys.pageDesigner.codeError"));
+    throw new Error(error.message);
+  }
+}
+function findWidgetCallback(node, modal) {
+  return widgetInfo.value.callback[node.type]?.(node, modal);
+}
+
+export { buildRuntimeJson, useDesignSave };

package/es/hooks/design-view/{usePropEditor.d.ts → editor/usePropEditor.d.ts}

@@ -4,7 +4,7 @@ import { LowCodeWidget, LowCodeModal } from '@gct-paas/schema';
  * propName 类型定义:可以是字符串或对象映射
  */
 type PropNameType = string | Record<string, string>;
-export declare const props: {
+export declare const propEditorProps: {
     propName: {
         type: (ObjectConstructor | StringConstructor)[];
         default: string;

package/es/hooks/design-view/editor/usePropEditor.mjs

@@ -0,0 +1,99 @@
+import { computed, nextTick } from 'vue';
+import { useSelectedWidget } from '../widget/useSelectedWidget.mjs';
+import { isString, isObject } from 'lodash-es';
+import { useDesignCache } from '../designer/useDesignCache.mjs';
+import { regRoot } from '../design-state.mjs';
+
+const propEditorProps = {
+  propName: {
+    type: [String, Object],
+    default: ""
+  },
+  propConfig: {
+    type: Object,
+    default: {}
+  },
+  changeCallback: {
+    type: Function
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  validate: {
+    type: Promise
+  },
+  widget: {
+    type: Object
+  }
+};
+function usePropEditor(propName, changeCallback, globData = {}) {
+  const { selectedProps, selectedRef } = useSelectedWidget();
+  const { emitCache } = useDesignCache();
+  function setValue(value, name) {
+    if (isString(name)) {
+      const widget = regRoot.test(name) ? selectedRef : selectedProps;
+      const keyslist = name.replace(regRoot, "").split(".");
+      const len = keyslist.length - 1;
+      keyslist.reduce(
+        (memo, cur, index) => {
+          if (index === len) {
+            memo[cur] = value;
+          }
+          return memo[cur];
+        },
+        widget.value
+      );
+    }
+    if (isObject(name)) {
+      const valueMap = value;
+      for (const key in name) {
+        const valKey = name[key];
+        setValue(valueMap[key], valKey);
+      }
+    }
+  }
+  function getValue(name) {
+    if (isString(name)) {
+      const widget = regRoot.test(name) ? selectedRef : selectedProps;
+      if (!widget?.value) return;
+      const keyslist = name.replace(regRoot, "").split(".");
+      try {
+        return keyslist.reduce(
+          (memo, cur) => memo[cur],
+          widget.value
+        );
+      } catch (err) {
+        console.warn(err);
+      }
+    }
+    if (isObject(name)) {
+      const valueMap = {};
+      for (const key in name) {
+        const valKey = name[key];
+        valueMap[key] = getValue(valKey);
+      }
+      return valueMap;
+    }
+  }
+  const propValue = computed({
+    get() {
+      const baseValue = getValue(propName);
+      return baseValue ?? (isString(propName) ? globData[propName] : baseValue);
+    },
+    set(val) {
+      setValue(val, propName);
+      if (!!changeCallback && typeof changeCallback === "function") {
+        nextTick().then(() => {
+          changeCallback(selectedRef.value, val);
+        });
+      }
+      emitCache();
+    }
+  });
+  return {
+    propValue
+  };
+}
+
+export { propEditorProps, usePropEditor };

package/es/hooks/design-view/{useStyle.d.ts → editor/useStyle.d.ts}

@@ -1,5 +1,5 @@
-import { LowCodeWidget } from '@gct-paas/schema';
-export declare function useStyle(widget: LowCodeWidget.BasicSchema): {
+import { LowCodeModal, LowCodeWidget } from '@gct-paas/schema';
+export declare function useStyle(widget: LowCodeWidget.BasicSchema | LowCodeModal.Modal): {
     wrapperStyle: import('vue').ComputedRef<IObject>;
     wStyle: import('vue').ComputedRef<IObject>;
     labelFont: import('vue').ComputedRef<IObject>;

package/es/hooks/design-view/{useStyle.mjs → editor/useStyle.mjs}

@@ -2,7 +2,7 @@ import { computed } from 'vue';
 import { propsToStyle as propsToStyle$1, extractFontStyle, generateWrapperStyle } from '@gct-paas/schema';
 
 function useStyle(widget) {
-  const { style = {}, ignoringStyle = [] } = widget || {};
+  const { style = {}, ignoringStyle } = widget;
   const wStyle = computed(() => {
     return propsToStyle$1(style);
   });

package/es/hooks/design-view/editor/useStyleEditor.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { LowCodeWidget, LowCodeModal } from '@gct-paas/schema';
+import { shadeColor, rgba2hex } from '../utils/color.util';
+import { PRESET_COLOR, BTN_TYPE_COLOR } from '../constants/style-editor.const';
+export { shadeColor, rgba2hex };
+export { PRESET_COLOR as presetColor, BTN_TYPE_COLOR as btnTypeColor };
+export declare const styleEditorProps: {
+    editor: {
+        type: PropType<LowCodeWidget.StyleEditor>;
+        default: {};
+    };
+    widget: {
+        type: PropType<LowCodeWidget.BasicSchema | LowCodeModal.Modal>;
+    };
+    propConfig: {
+        type: ObjectConstructor;
+        default: {};
+    };
+};
+/**
+ * 样式编辑器 composable
+ * 封装样式属性的读写逻辑，支持链式路径和对象映射
+ *
+ * @template T 样式值类型
+ * @param {IObject} editor 样式编辑器配置
+ * @returns {{ styleValue: ComputedRef<T> }}
+ */
+export declare function useStyleEditor<T = IObject>(editor: IObject): {
+    styleValue: import('vue').WritableComputedRef<T, T>;
+};