@gct-paas/design 0.1.4-dev.9 → 0.1.5-dev.0

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

@@ -1,239 +1,225 @@
-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';
-
+import { platform } from "../../../utils/design-view/index.mjs";
+import { buildRunJs } from "../../../utils/transform-js/transform-js.mjs";
+import "../../../utils/index.mjs";
+import { noMore, pageDesignHistoryList, pageJson, pageJsonSnapshot, pageNo, regRoot, transformPageJson, widgetInfo } from "../design-state.mjs";
+import { useUserOccupy } from "../../../components/user-occupy/useUserOccupy.mjs";
+import "../../../components/index.mjs";
+import { isArray, isEmpty, isNil } from "lodash-es";
+import { Platform, SearchComponents, TreeHelper, t } from "@gct-paas/core";
+import { message } from "ant-design-vue";
+//#region src/hooks/design-view/designer/useDesignSave.ts
+/**
+* 保存与数据校验 Hook
+*
+* 管理设计器页面数据的保存、预处理和校验逻辑，
+* 包括组件必填校验、数值范围校验、运行时 JSON 构建等。
+*/
 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
-  };
+	const { cancelOccupy } = useUserOccupy();
+	/**
+	* 保存页面数据快照，用于脏检查对比
+	*
+	* @param {PageJson} json 可选，传入则保存此 json 的快照，否则保存当前 pageJson
+	*/
+	function savePageJsonSnapshot(json) {
+		pageJsonSnapshot.value = JSON.stringify(json ?? pageJson);
+	}
+	/**
+	* 保存时对数据做校验
+	*
+	* @author zhanghanrui
+	* @date 2024-05-11 11:05:14
+	* @param {IData[]} widgets 组件数据列表
+	* @param {IData[]} parents 父级数据列表
+	* @returns {boolean} 是否校验通过
+	*/
+	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 val = widget[name.substring(5)];
+						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) {
+							if (model.hidden(widget) === 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;
+	}
+	/**
+	* 保存完成解除占用
+	*
+	* @param {boolean} flag 是否为保存操作（true为保存，false为恢复）
+	* @param {boolean} showSuccess 是否显示成功提示
+	* @returns {Promise<boolean>} 是否保存成功
+	*/
+	async function save(flag = true, showSuccess = true) {
+		const pageId = _gct.store.context.pid;
+		const _pageJson = transformPageJson(pageJson);
+		if (validateWidgets(_pageJson.widgets) === 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 = "";
+		});
+		if (validateWidgets(_pageJson.modals) === 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 = [];
+		/**
+		* 递归查找所有插件
+		*
+		* @param {LowCodeWidget.BasicSchema[]} widgets 组件列表
+		* @returns {PagePlugin[]} 插件列表
+		*/
+		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;
+		const runtimeJson = await buildRuntimeJson();
+		if (platform.value === Platform.MOBILE) await _api.apaas.mobilePage.putUpdateDesignerJsonId({ id: pageId }, {
+			designerJson: JSON.stringify(_pageJson),
+			runtimeJson: JSON.stringify(runtimeJson),
+			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(runtimeJson),
+			logId: (pageDesignHistoryList.value[0] ?? {}).id
+		});
+		else await _api.apaas.webpage.putUpdateDesignerJsonId({ id: pageId }, {
+			designerJson: JSON.stringify(_pageJson),
+			runtimeJson: JSON.stringify(runtimeJson),
+			logId: (pageDesignHistoryList.value[0] ?? {}).id
+		});
+		savePageJsonSnapshot(_pageJson);
+		if (showSuccess) _gct.message.success(flag ? "sys.saveSuccess" : "sys.recoverSuccess");
+		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);
-  }
+/**
+* 递归遍历 tree 并组装运行时 JSON
+*
+* @returns {Promise<RuntimePageJson>} 运行时页面JSON
+*/
+async function buildRuntimeJson() {
+	try {
+		const runtimeWidgets = TreeHelper.traverseAndBuildTree(JSON.parse(JSON.stringify(pageJson.widgets)), (node) => findWidgetCallback(node));
+		/**经过babel转换过的所有函数集合包含未export ES5字符串
+		来源于页面JS和逻辑编排*/
+		const funcStr = await buildRunJs(pageJson.js);
+		const modals = pageJson.modals.map(async (modal) => {
+			const modalFuncStr = await buildRunJs(modal.js);
+			const runtimeWidgets = 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: runtimeWidgets,
+				runJs: modalFuncStr,
+				style: modal.style
+			};
+		});
+		return {
+			widgets: runtimeWidgets,
+			runJs: funcStr,
+			modals: await Promise.all(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 error;
+	}
 }
+/**
+* 查找组件的运行时回调处理
+*
+* @param {LowCodeWidget.BasicSchema} node 组件节点
+* @param {LowCodeModal.Modal} modal 所属弹框
+* @returns {*} 回调结果
+*/
 function findWidgetCallback(node, modal) {
-  return widgetInfo.value.callback[node.type]?.(node, modal);
+	return widgetInfo.value.callback[node.type]?.(node, modal);
 }
-
+//#endregion
 export { buildRuntimeJson, useDesignSave };

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

@@ -6,7 +6,7 @@ import { LowCodeWidget, LowCodeModal } from '@gct-paas/schema';
 type PropNameType = string | Record<string, string>;
 export declare const propEditorProps: {
     propName: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: StringConstructor;
         default: string;
     };
     propConfig: {
@@ -14,7 +14,7 @@ export declare const propEditorProps: {
         default: {};
     };
     changeCallback: {
-        type: FunctionConstructor;
+        type: PropType<(widget: LowCodeWidget.BasicSchema | LowCodeModal.Modal | Partial<LowCodeWidget.BasicSchema> | Partial<LowCodeModal.Modal> | undefined, value: unknown) => void>;
     };
     required: {
         type: BooleanConstructor;