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

package/es/hooks/design-view/layout/useToolkit.mjs

@@ -1,315 +1,304 @@
-import { ref } from 'vue';
-import { ToolkitEnum, CategoryTypeEnum, FormComponents, Platform } from '@gct-paas/core';
-import { cloneDeep, clone } from 'lodash-es';
-import { useWidgetRegistry } from '../widget/useWidgetRegistry.mjs';
-import { getWidgetInfo } from '@gct-paas/schema';
-import '../design-state.mjs';
-import './useScope.mjs';
-import '../global/useGlobal.mjs';
-import '@vueuse/core';
-import '../../develop/useCacheHistory.mjs';
-import 'ant-design-vue';
-import '../widget/useSelectedWidget.mjs';
-import '../widget/useWidget.mjs';
-import '../page/usePage.mjs';
-import '../page/usePageOccupy.mjs';
-import '../../../constant/page-designer.mjs';
-import 'async-validator';
-import 'qx-util';
-import 'pinia';
-import '@jsplumb/browser-ui';
-import { useModelField } from '../../use-model-field/use-model-field.mjs';
-
-const toolkit = ref(ToolkitEnum.OUTLINE);
-const toolkitWidgets = ref([]);
-const toolkitShow = ref(true);
-const toolkitFixed = ref(false);
-const toolkitPinned = ref(false);
-const { reloadFieldToolkit } = useModelField();
-function useComponents() {
-  class ComponentUtils {
-    /** 表单 */
-    category_form = CategoryTypeEnum.FORM;
-    /** 布局 */
-    category_layout = CategoryTypeEnum.LAYOUT;
-    /** 高级 */
-    category_advanced = CategoryTypeEnum.ADVANCED;
-    /** 数据展示 */
-    category_data = CategoryTypeEnum.DATA;
-    /** 按钮 */
-    category_button = CategoryTypeEnum.BUTTON;
-    /** 套件 */
-    category_kit = CategoryTypeEnum.KIT;
-    /**流程 */
-    category_process = CategoryTypeEnum.PROCESS;
-    static instance;
-    static SubTableGroup = "SubTableGroup";
-    static CardListGroup = "CardListGroup";
-    groupType = "";
-    static getInstance() {
-      if (!this.instance) {
-        this.instance = new ComponentUtils();
-      }
-      return this.instance;
-    }
-    set setGroupType(type) {
-      this.groupType = type;
-    }
-    get categoryTypes() {
-      if (this.groupType === ComponentUtils.SubTableGroup) {
-        return [
-          this.category_form,
-          this.category_layout,
-          this.category_advanced
-        ];
-      }
-      return [
-        this.category_form,
-        this.category_layout,
-        this.category_advanced,
-        this.category_data,
-        this.category_button,
-        this.category_kit,
-        this.category_process
-      ];
-    }
-    get form2Comps() {
-      if (this.groupType === ComponentUtils.SubTableGroup)
-        return ["GenRadio", "GenCheckbox", "GenSwitch", "Text", "GenImage"];
-      return [
-        "GenRadio",
-        "GenCheckbox",
-        "GenSwitch",
-        "Text",
-        "GenImage",
-        "Form"
-      ];
-    }
-    get layout2Comps() {
-      if (this.groupType === ComponentUtils.SubTableGroup)
-        return [
-          "Collapse",
-          "SpaceOccupation",
-          "Divider",
-          "LayoutContainer",
-          "Grid",
-          "LeftRightColumns",
-          "Tabs"
-        ];
-      return [
-        "Collapse",
-        "SpaceOccupation",
-        "Divider",
-        "ButtonContainer",
-        "LayoutContainer",
-        "Grid",
-        "LeftRightColumns",
-        "Tabs"
-      ];
-    }
-    get advanced2Comps() {
-      if ([ComponentUtils.SubTableGroup].includes(this.groupType))
-        return ["Iframe", "CustomCode"];
-      return [
-        "Search",
-        "QuickSearch",
-        "SelectSearch",
-        "TableSelect",
-        "Iframe",
-        "CustomCode"
-      ];
-    }
-    get process2Comps() {
-      if ([ComponentUtils.SubTableGroup].includes(this.groupType)) return [];
-      return [
-        "FormProcess",
-        "ProcessButton",
-        "ButtonProcessContainer",
-        "ApprovalHistory",
-        "FlowDiagram"
-      ];
-    }
-    get button2Comps() {
-      if ([ComponentUtils.SubTableGroup].includes(this.groupType)) return [];
-      return [
-        "CustomButton",
-        // 'CreateButton',
-        // 'CopyButton',
-        // 'DeleteButton',
-        "SubmitButton",
-        "RefreshButton",
-        "ResetButton",
-        // 'ImportButton',
-        // 'ExportButton',
-        "LabelPrintButton"
-        // 'ModelingButton',
-        // 'DocumentPrintButton',
-      ];
-    }
-    get data2Comps() {
-      if ([ComponentUtils.SubTableGroup].includes(this.groupType)) return [];
-      return [
-        // 'DataList',
-        "CardList",
-        "DataTable",
-        "DataVTable",
-        "TreeTable",
-        "RefDataTable",
-        "Descriptions"
-      ];
-    }
-    changeGroupType({ data, modalState }) {
-      if (data.type === FormComponents.CardList) {
-        this.setGroupType = ComponentUtils.CardListGroup;
-        return;
-      }
-      if (modalState) {
-        this.setGroupType = ComponentUtils.SubTableGroup;
-        return;
-      }
-      this.setGroupType = "";
-    }
-    /**
-     * 根据平台特殊过滤，显示的组件
-     *
-     * @param platform
-     * @param suiteKey
-     * @returns
-     */
-    _filterWidgets(tag, platform, _suiteKey) {
-      if (platform === Platform.PAD) {
-        if (tag === FormComponents.DataTable) {
-          return false;
-        }
-      }
-      return true;
-    }
-    getWidgetsToolkit({
-      platform,
-      suiteKey
-    }) {
-      const { pluginConfigs } = useWidgetRegistry();
-      const schemas = getWidgetInfo(platform).schema;
-      const schemaKeys = Object.values(schemas).filter((i) => !!i && !i.internal).map((schema) => schema.type);
-      const configs = this.categoryTypes.map((categoryType) => {
-        if (categoryType === CategoryTypeEnum.KIT) {
-          const design = platform === Platform.WEB ? _gct.register.designer.web : platform === Platform.PAD ? _gct.register.designer.pad : _gct.register.designer.mobile;
-          const list2 = design.getProviders().filter((designer) => {
-            if (designer.kit && designer.kit.length) {
-              return designer.kit.includes(suiteKey);
-            }
-            if (designer.kit && designer.kit.length > 0 && !suiteKey) {
-              return false;
-            }
-            return true;
-          }).map((designer) => {
-            return designer.schema;
-          });
-          return {
-            categoryType,
-            categoryName: "sys.pageDesigner.category_" + categoryType,
-            list: list2
-          };
-        }
-        const list = this[`${categoryType}2Comps`].filter(
-          (i) => schemaKeys.includes(
-            FormComponents[i]
-          ) && this._filterWidgets(
-            FormComponents[i],
-            platform,
-            suiteKey
-          )
-        ).map(
-          (compKey) => cloneDeep(
-            schemas[FormComponents[compKey]]
-          )
-        );
-        return {
-          categoryType,
-          categoryName: "sys.pageDesigner.category_" + categoryType,
-          list
-        };
-      }).filter((i) => i.list.length);
-      if (window._gct && pluginConfigs.value) {
-        const register = platform === Platform.WEB ? _gct.register.designer.web : platform === Platform.PAD ? _gct.register.designer.pad : _gct.register.designer.mobile;
-        pluginConfigs.value.forEach((pluginConfig) => {
-          const { category, plugins } = pluginConfig;
-          configs.push({
-            categoryType: category.module,
-            categoryName: category.name,
-            list: plugins.map((plugin) => {
-              const provider = register.getProvider(plugin.key);
-              if (provider) {
-                const obj = clone(provider.schema);
-                obj._plugin = clone(plugin);
-                return obj;
-              }
-              return null;
-            }).filter((item) => {
-              return !!item;
-            })
-          });
-        });
-      }
-      return configs;
-    }
-  }
-  return {
-    instance: ComponentUtils.getInstance()
-  };
-}
-const { instance } = useComponents();
+import { useWidgetRegistry } from "../widget/useWidgetRegistry.mjs";
+import { useModelField } from "../../use-model-field/use-model-field.mjs";
+import "../../index.mjs";
+import { clone, cloneDeep } from "lodash-es";
+import { CategoryTypeEnum, FormComponents, Platform, ToolkitEnum } from "@gct-paas/core";
+import { ref } from "vue";
+import { getWidgetInfo } from "@gct-paas/schema";
+//#region src/hooks/design-view/layout/useToolkit.ts
+var toolkit = ref(ToolkitEnum.OUTLINE);
+var toolkitWidgets = ref([]);
+var toolkitShow = ref(true);
+var toolkitFixed = ref(false);
+/** 是否固定工具栏，不可自动切换 */
+var toolkitPinned = ref(false);
+var instance = class ComponentUtils {
+	static SubTableGroup = "SubTableGroup";
+	static CardListGroup = "CardListGroup";
+	static _instance;
+	/** 当前所处的组件分组上下文 */
+	groupType = "";
+	/** 获取单例 */
+	static getInstance() {
+		if (!this._instance) this._instance = new ComponentUtils();
+		return this._instance;
+	}
+	/** 根据当前分组上下文返回应显示的分类列表 */
+	get categoryTypes() {
+		if (this.groupType === ComponentUtils.SubTableGroup) return [
+			CategoryTypeEnum.FORM,
+			CategoryTypeEnum.LAYOUT,
+			CategoryTypeEnum.ADVANCED
+		];
+		return [
+			CategoryTypeEnum.FORM,
+			CategoryTypeEnum.LAYOUT,
+			CategoryTypeEnum.ADVANCED,
+			CategoryTypeEnum.DATA,
+			CategoryTypeEnum.BUTTON,
+			CategoryTypeEnum.KIT,
+			CategoryTypeEnum.PROCESS
+		];
+	}
+	/**
+	* 根据分类类型返回当前上下文下允许使用的组件 key 列表
+	*
+	* @param categoryType - 组件分类枚举值
+	* @returns 当前上下文下允许使用的组件枚举值列表
+	*/
+	_getCompsForCategory(categoryType) {
+		const isSubTable = this.groupType === ComponentUtils.SubTableGroup;
+		switch (categoryType) {
+			case CategoryTypeEnum.FORM:
+				if (isSubTable) return [
+					FormComponents.GenRadio,
+					FormComponents.GenCheckbox,
+					FormComponents.GenSwitch,
+					FormComponents.Text,
+					FormComponents.GenImage
+				];
+				return [
+					FormComponents.GenRadio,
+					FormComponents.GenCheckbox,
+					FormComponents.GenSwitch,
+					FormComponents.Text,
+					FormComponents.GenImage,
+					FormComponents.Form
+				];
+			case CategoryTypeEnum.LAYOUT:
+				if (isSubTable) return [
+					FormComponents.Collapse,
+					FormComponents.SpaceOccupation,
+					FormComponents.Divider,
+					FormComponents.LayoutContainer,
+					FormComponents.Grid,
+					FormComponents.LeftRightColumns,
+					FormComponents.Tabs
+				];
+				return [
+					FormComponents.Collapse,
+					FormComponents.SpaceOccupation,
+					FormComponents.Divider,
+					FormComponents.ButtonContainer,
+					FormComponents.LayoutContainer,
+					FormComponents.Grid,
+					FormComponents.LeftRightColumns,
+					FormComponents.Tabs
+				];
+			case CategoryTypeEnum.ADVANCED:
+				if (isSubTable) return [FormComponents.Iframe, FormComponents.CustomCode];
+				return [
+					FormComponents.Search,
+					FormComponents.QuickSearch,
+					FormComponents.SelectSearch,
+					FormComponents.TableSelect,
+					FormComponents.Iframe,
+					FormComponents.CustomCode
+				];
+			case CategoryTypeEnum.PROCESS:
+				if (isSubTable) return [];
+				return [
+					FormComponents.FormProcess,
+					FormComponents.ProcessButton,
+					FormComponents.ButtonProcessContainer,
+					FormComponents.ApprovalHistory,
+					FormComponents.FlowDiagram
+				];
+			case CategoryTypeEnum.BUTTON:
+				if (isSubTable) return [];
+				return [
+					FormComponents.CustomButton,
+					FormComponents.SubmitButton,
+					FormComponents.RefreshButton,
+					FormComponents.ResetButton,
+					FormComponents.LabelPrintButton
+				];
+			case CategoryTypeEnum.DATA:
+				if (isSubTable) return [];
+				return [
+					FormComponents.CardList,
+					FormComponents.DataTable,
+					FormComponents.DataVTable,
+					FormComponents.TreeTable,
+					FormComponents.RefDataTable,
+					FormComponents.Descriptions
+				];
+			default: return [];
+		}
+	}
+	/**
+	* 根据所处分组上下文更新 groupType
+	*
+	* @param data - 当前选中组件数据
+	* @param modalState - 是否处于子表单（弹框）状态
+	*/
+	changeGroupType({ data, modalState }) {
+		if (data.type === FormComponents.CardList) {
+			this._setGroupType(ComponentUtils.CardListGroup);
+			return;
+		}
+		if (modalState) {
+			this._setGroupType(ComponentUtils.SubTableGroup);
+			return;
+		}
+		this._setGroupType("");
+	}
+	/** 更新组件分组上下文 */
+	_setGroupType(type) {
+		this.groupType = type;
+	}
+	/**
+	* 根据平台特殊规则过滤组件
+	*
+	* @param tag - 组件 tag（FormComponents 枚举值）
+	* @param platform - 当前平台
+	* @param _suiteKey - 套件 key（暂未使用）
+	* @returns 是否保留该组件
+	*/
+	_filterWidgets(tag, platform, _suiteKey) {
+		if (platform === Platform.PAD && tag === FormComponents.DataTable) return false;
+		return true;
+	}
+	/**
+	* 根据平台获取对应端的设计器注册实例
+	*
+	* @param platform - 当前平台
+	*/
+	_getDesignerRegister(platform) {
+		if (platform === Platform.WEB) return _gct.register.designer.web;
+		if (platform === Platform.PAD) return _gct.register.designer.pad;
+		return _gct.register.designer.mobile;
+	}
+	/**
+	* 构建 KIT 分类（套件组件）的数据
+	*
+	* @param platform - 当前平台
+	* @param suiteKey - 套件 key
+	* @returns KIT 分类的 ToolkitWidgetGroup 数据
+	*/
+	_buildKitCategory(platform, suiteKey) {
+		const list = this._getDesignerRegister(platform).getProviders().filter((designer) => {
+			if (designer.kit && designer.kit.length) return designer.kit.includes(suiteKey);
+			if (designer.kit && designer.kit.length > 0 && !suiteKey) return false;
+			return false;
+		}).map((designer) => designer.schema);
+		return {
+			categoryType: CategoryTypeEnum.KIT,
+			categoryName: "sys.pageDesigner.category_" + CategoryTypeEnum.KIT,
+			list
+		};
+	}
+	/**
+	* 将外部插件分类追加到 configs 中
+	*
+	* @param configs - 已构建的分类列表，会在原地追加
+	* @param platform - 当前平台
+	*/
+	_appendPluginCategories(configs, platform) {
+		const { pluginConfigs } = useWidgetRegistry();
+		if (!window._gct || !pluginConfigs.value) return;
+		const register = this._getDesignerRegister(platform);
+		pluginConfigs.value.forEach((pluginConfig) => {
+			const { category, plugins } = pluginConfig;
+			configs.push({
+				categoryType: category.module,
+				categoryName: category.name,
+				list: plugins.map((plugin) => {
+					const provider = register.getProvider(plugin.key);
+					if (!provider) return null;
+					const obj = clone(provider.schema);
+					obj._plugin = clone(plugin);
+					return obj;
+				}).filter((item) => !!item)
+			});
+		});
+	}
+	/**
+	* 生成工具栏的完整组件分类列表
+	*
+	* @param platform - 当前平台
+	* @param suiteKey - 套件 key
+	* @returns 工具栏组件分类列表
+	*/
+	getWidgetsToolkit({ platform, suiteKey }) {
+		const schemas = getWidgetInfo(platform).schema;
+		const schemaKeys = Object.values(schemas).filter((i) => !!i && !i.internal).map((schema) => schema.type);
+		const configs = this.categoryTypes.map((categoryType) => {
+			if (categoryType === CategoryTypeEnum.KIT) return this._buildKitCategory(platform, suiteKey);
+			const list = this._getCompsForCategory(categoryType).filter((key) => schemaKeys.includes(key) && this._filterWidgets(key, platform, suiteKey)).map((key) => cloneDeep(schemas[key]));
+			return {
+				categoryType,
+				categoryName: "sys.pageDesigner.category_" + categoryType,
+				list
+			};
+		}).filter((group) => group.list.length > 0);
+		this._appendPluginCategories(configs, platform);
+		return configs;
+	}
+}.getInstance();
 function useToolkit() {
-  function toggleToolkit(payload, force) {
-    if (toolkitPinned.value && !force) {
-      return;
-    }
-    toolkit.value = payload;
-    toolkitShow.value = true;
-  }
-  function initToolkitWidgets() {
-    const widgets = instance.getWidgetsToolkit({
-      platform: _gct.store.context.platform,
-      suiteKey: _gct.store.appInfo.suiteKey
-    });
-    toolkitWidgets.value = widgets;
-  }
-  function changeToolkitWidgets({ data, modalState }) {
-    const oldGroupType = instance.groupType;
-    instance.changeGroupType({ data, modalState });
-    if (oldGroupType !== instance.groupType) {
-      toolkitWidgets.value = instance.getWidgetsToolkit({
-        platform: _gct.store.context.platform,
-        suiteKey: _gct.store.appInfo.suiteKey
-      });
-    }
-  }
-  async function setFieldToolkit({
-    modelKey,
-    formId,
-    childParentModelKey
-  }) {
-    await reloadFieldToolkit(modelKey, formId, childParentModelKey);
-  }
-  function fixedToolkit() {
-    toolkitFixed.value = !toolkitFixed.value;
-  }
-  function pinnedToolkit() {
-    toolkitPinned.value = !toolkitPinned.value;
-  }
-  return {
-    toolkit,
-    toolkitShow,
-    toolkitFixed,
-    toolkitPinned,
-    toggleToolkit,
-    pinnedToolkit,
-    toolkitWidgets,
-    initToolkitWidgets,
-    changeToolkitWidgets,
-    fixedToolkit,
-    setFieldToolkit
-  };
+	const { reloadFieldToolkit } = useModelField();
+	/**
+	* 切换工具栏
+	*
+	* @param payload - 工具栏类型
+	* @param force - 是否强制切换（忽略固定状态）
+	*/
+	function toggleToolkit(payload, force) {
+		if (toolkitPinned.value && !force) return;
+		toolkit.value = payload;
+		toolkitShow.value = true;
+	}
+	/** 初始化组件列表 */
+	function initToolkitWidgets() {
+		toolkitWidgets.value = instance.getWidgetsToolkit({
+			platform: _gct.store.context.platform,
+			suiteKey: _gct.store.appInfo.suiteKey
+		});
+	}
+	/** 根据当前选中组件的上下文刷新组件列表 */
+	function changeToolkitWidgets({ data, modalState }) {
+		const oldGroupType = instance.groupType;
+		instance.changeGroupType({
+			data,
+			modalState
+		});
+		if (oldGroupType !== instance.groupType) toolkitWidgets.value = instance.getWidgetsToolkit({
+			platform: _gct.store.context.platform,
+			suiteKey: _gct.store.appInfo.suiteKey
+		});
+	}
+	/**
+	* 选中表单组件且关联了模型后，刷新字段面板数据
+	*
+	* @param modelKey - 模型 key
+	* @param formId - 表单 ID
+	* @param childParentModelKey - 子关联父模型 key（可选）
+	*/
+	async function setFieldToolkit({ modelKey, formId, childParentModelKey }) {
+		await reloadFieldToolkit(modelKey, formId, childParentModelKey);
+	}
+	/** 切换工具栏固定状态 */
+	function fixedToolkit() {
+		toolkitFixed.value = !toolkitFixed.value;
+	}
+	/** 切换工具栏锁定状态（锁定后不可自动切换） */
+	function pinnedToolkit() {
+		toolkitPinned.value = !toolkitPinned.value;
+	}
+	return {
+		toolkit,
+		toolkitShow,
+		toolkitFixed,
+		toolkitPinned,
+		toggleToolkit,
+		pinnedToolkit,
+		toolkitWidgets,
+		initToolkitWidgets,
+		changeToolkitWidgets,
+		fixedToolkit,
+		setFieldToolkit
+	};
 }
-
+//#endregion
 export { useToolkit };

package/es/hooks/design-view/page/usePage.d.ts

@@ -39,7 +39,7 @@ export declare const currentPanel: Ref<PanelEnum>;
  * 加载页面信息
  * @returns
  */
-export declare function loadPageInfo(_app: App): Promise<void>;
+export declare function loadPageInfo(app: App): Promise<void>;
 /**
  * 初始化界面占用信息
  */