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

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

@@ -0,0 +1,315 @@
+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();
+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
+  };
+}
+
+export { useToolkit };

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

@@ -0,0 +1,57 @@
+import { Ref, App } from 'vue';
+import { PanelEnum } from '@gct-paas/core';
+import { PermissionResponse, WebpageResponse } from '@gct-paas/api/apaas';
+export declare const newKeyTag = "___new___";
+export type PageInfo = WebpageResponse & {
+    categoryId?: string;
+};
+export declare const pageInfo: Ref<PageInfo>;
+export declare const pagePermissions: Ref<{
+    createTime?: string | undefined;
+    createUserId?: string | undefined;
+    createUserName?: string | undefined;
+    id?: string | undefined;
+    key?: string | undefined;
+    modifyTime?: string | undefined;
+    modifyUserId?: string | undefined;
+    modifyUserName?: string | undefined;
+    name?: string | undefined;
+    relationId?: string | undefined;
+    sysBuiltin?: string | undefined;
+    terminalType?: string | undefined;
+}[], PermissionResponse[] | {
+    createTime?: string | undefined;
+    createUserId?: string | undefined;
+    createUserName?: string | undefined;
+    id?: string | undefined;
+    key?: string | undefined;
+    modifyTime?: string | undefined;
+    modifyUserId?: string | undefined;
+    modifyUserName?: string | undefined;
+    name?: string | undefined;
+    relationId?: string | undefined;
+    sysBuiltin?: string | undefined;
+    terminalType?: string | undefined;
+}[]>;
+export declare const unlockAvailable: import('vue').ComputedRef<boolean>;
+export declare const currentPanel: Ref<PanelEnum>;
+/**
+ * 加载页面信息
+ * @returns
+ */
+export declare function loadPageInfo(_app: App): Promise<void>;
+/**
+ * 初始化界面占用信息
+ */
+declare function initLockState(): void;
+/**
+ * 更新页面锁定状态
+ * @param {boolean} value
+ */
+export declare function lockPage(value?: boolean): Promise<void>;
+export declare function togglePanel(value: PanelEnum): void;
+export declare function usePage(): {
+    togglePanel: typeof togglePanel;
+    initLockState: typeof initLockState;
+};
+export {};

package/es/hooks/design-view/page/usePage.mjs

@@ -0,0 +1,154 @@
+import { ref, computed, createVNode } from 'vue';
+import { PanelEnum, Platform, FormComponents, t } from '@gct-paas/core';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useCacheHistory } from '../../develop/useCacheHistory.mjs';
+import { Modal } from 'ant-design-vue';
+import { useDesigner } from '../useDesigner.mjs';
+import { useToolkit } from '../layout/useToolkit.mjs';
+import { isNil, isEmpty } from 'lodash-es';
+import { platform } from '../design-state.mjs';
+
+const newKeyTag = "___new___";
+const pageInfo = ref({});
+const pagePermissions = ref([]);
+const unlockAvailable = computed(() => {
+  const { userId, username } = _gct.store.userInfo;
+  return pageInfo.value.lockUserId === userId || username === "admin";
+});
+const currentPanel = ref(PanelEnum.PAGE);
+async function loadPageInfo(_app) {
+  const { initToolkitWidgets } = useToolkit();
+  const {
+    setPageJson,
+    loadPageDesignHistoryList,
+    emitCache,
+    pageJson,
+    // setPluginConfigs,
+    savePageJsonSnapshot
+  } = useDesigner();
+  const { historyUtils } = useCacheHistory();
+  platform.value = _gct.store.context.platform || Platform.WEB;
+  const pid = _gct.store.context.pid || "";
+  if (pid.startsWith(newKeyTag)) {
+    const key = pid.replace(`${newKeyTag}:`, "");
+    pageInfo.value = {
+      id: newKeyTag,
+      name: "",
+      key,
+      designerJson: ""
+    };
+  } else {
+    const pageInfoRes = platform.value === Platform.WEB ? await _api.apaas.webpage.getInfo({
+      id: _gct.store.context.pid
+    }) : platform.value === Platform.PAD ? await _api.apaas.padPage.getInfo({
+      id: _gct.store.context.pid
+    }) : await _api.apaas.mobilePage.getInfo({
+      id: _gct.store.context.pid
+    });
+    pageInfo.value = pageInfoRes;
+  }
+  if (!historyUtils.isHistoryInfoExist(_gct.store.context.pid)) {
+    historyUtils.init({ historyId: _gct.store.context.pid ?? "" });
+  }
+  if (pageInfo.value.designerJson && !isNil(pageInfo.value.designerJson) && !isEmpty(pageInfo.value.designerJson)) {
+    const _json = JSON.parse(pageInfo.value.designerJson);
+    if (_json && _json.plugins) ;
+    if (!_json.pageConfig) {
+      _json.pageConfig = {
+        title: "",
+        i18n: {},
+        hasFooter: false
+      };
+    }
+    setPageJson({ ..._json, id: pageInfo.value.id });
+  } else {
+    emitCache();
+    if (platform.value === Platform.WEB) {
+      setPageJson({
+        newDesigner: true,
+        style: {
+          paddingAll: "",
+          paddingTop: "",
+          paddingRight: "16",
+          paddingBottom: "16",
+          paddingLeft: "16"
+        }
+      });
+    } else if (platform.value === Platform.PAD) {
+      setPageJson({
+        newDesigner: true,
+        style: {
+          paddingAll: "0",
+          paddingTop: "0",
+          paddingRight: "0",
+          paddingBottom: "0",
+          paddingLeft: "0",
+          backgroundColor: "#fff"
+        }
+      });
+    } else {
+      setPageJson({
+        newDesigner: true,
+        style: {
+          paddingAll: "16",
+          paddingTop: "16",
+          paddingRight: "16",
+          paddingBottom: "16",
+          paddingLeft: "16",
+          backgroundColor: "#fff"
+        }
+      });
+    }
+  }
+  if (!pageJson.widgets.some(
+    (item) => item.type === FormComponents.BottomButtonContainer
+  )) ;
+  initToolkitWidgets();
+  loadPageDesignHistoryList();
+  pagePermissions.value = await _api.apaas.permission.getList({
+    relationId: _gct.store.context.pid
+  }) || [];
+  if (!pid.startsWith(newKeyTag)) ;
+  savePageJsonSnapshot();
+}
+function initLockState() {
+}
+const lockPageWithConfirm = (id) => {
+  Modal.confirm({
+    title: t("sys.sureToLock"),
+    icon: createVNode(ExclamationCircleOutlined),
+    okText: t("sys.ok"),
+    cancelText: t("sys.cancel"),
+    async onOk() {
+      await _api.apaas.webpage.postLockWebPage({
+        id
+      });
+      pageInfo.value.lockUserId = _gct.store.userInfo.userId;
+      pageInfo.value.lockUserName = _gct.store.userInfo.fullname;
+    }
+  });
+};
+async function lockPage(value = true) {
+  const id = _gct.store.context.pid;
+  if (value) {
+    lockPageWithConfirm(id);
+  } else {
+    await _api.apaas.webpage.postUnLockWebPage({
+      id
+    });
+    pageInfo.value.lockUserId = "";
+    pageInfo.value.lockUserName = "";
+  }
+}
+function togglePanel(value) {
+  if (currentPanel.value === value) return;
+  currentPanel.value = value;
+}
+function usePage() {
+  return {
+    togglePanel,
+    initLockState
+  };
+}
+
+export { currentPanel, loadPageInfo, lockPage, newKeyTag, pageInfo, pagePermissions, togglePanel, unlockAvailable, usePage };

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

@@ -0,0 +1,33 @@
+import { Ref } from 'vue';
+import { WebPageOccupyResponse } from '@gct-paas/api/apaas';
+/** 页面占用信息 */
+export declare const pageOccupyInfo: Ref<WebPageOccupyResponse>;
+/**
+ * 销毁占用轮询定时器
+ */
+export declare function destroyOccupyTimer(): void;
+/**
+ * 获取占用信息
+ *
+ * @returns {Promise<void>}
+ */
+export declare function loadPageOccupyInfo(): Promise<void>;
+/**
+ * 页面占用或取消占用
+ *
+ * @param {boolean} value true 为占用，false 为取消占用
+ * @returns {Promise<void>}
+ */
+export declare function occupyPage(value?: boolean): Promise<void>;
+/**
+ * 页面占用 composable
+ * 初始化占用信息监听，根据 occupyId 状态启动或销毁轮询定时器
+ *
+ * @returns {{ pageOccupyInfo, destroyOccupyTimer, loadPageOccupyInfo, occupyPage }}
+ */
+export declare function usePageOccupy(): {
+    pageOccupyInfo: Ref<WebPageOccupyResponse, WebPageOccupyResponse>;
+    destroyOccupyTimer: typeof destroyOccupyTimer;
+    loadPageOccupyInfo: typeof loadPageOccupyInfo;
+    occupyPage: typeof occupyPage;
+};

package/es/hooks/design-view/page/usePageOccupy.mjs

@@ -0,0 +1,77 @@
+import { ref, computed, watch } from 'vue';
+import { throttle } from 'lodash-es';
+
+const pageOccupyInfo = ref({
+  querySpanNum: 120,
+  // 占用查询间隔
+  cacheNum: 500
+  // 占用缓存间隔
+});
+const timeout = computed(() => {
+  return pageOccupyInfo.value.querySpanNum * 1e3;
+});
+const wait = computed(() => {
+  return (pageOccupyInfo.value.cacheNum - 10) / 2 * 1e3;
+});
+let occupyTimer = null;
+function initOccupyTimer() {
+  destroyOccupyTimer();
+  occupyTimer = window.setInterval(() => {
+    console.info("【获取占用】");
+    loadPageOccupyInfo();
+  }, timeout.value);
+}
+function destroyOccupyTimer() {
+  if (!occupyTimer) return;
+  console.info("【销毁占用轮询】");
+  clearInterval(occupyTimer);
+}
+async function loadPageOccupyInfo() {
+  const res = await _api.apaas.webpage.postGetWebPageOccupyMsg({
+    id: _gct.store.context.pid
+  });
+  pageOccupyInfo.value = res;
+}
+async function occupyPageTrue(id) {
+  console.info("【页面占用】【节流】", Date.now() / 1e3);
+  await _api.apaas.webpage.postOccupyWebPage({
+    id
+  });
+  pageOccupyInfo.value.occupyId = _gct.store.userInfo.userId;
+  pageOccupyInfo.value.occupyName = _gct.store.userInfo.fullname;
+}
+const throttledOccupyPageTrue = throttle(occupyPageTrue, wait.value);
+async function occupyPage(value = true) {
+  const id = _gct.store.context.pid;
+  if (value) {
+    console.info("【占用】");
+    throttledOccupyPageTrue(id);
+  } else {
+    console.info("【取消占用】");
+    await _api.apaas.webpage.postCancelOccupyWebPage({
+      id
+    });
+    pageOccupyInfo.value.occupyId = "";
+    pageOccupyInfo.value.occupyName = "";
+  }
+}
+function usePageOccupy() {
+  watch(
+    () => pageOccupyInfo.value.occupyId,
+    (value) => {
+      if (value) {
+        destroyOccupyTimer();
+      } else {
+        initOccupyTimer();
+      }
+    }
+  );
+  return {
+    pageOccupyInfo,
+    destroyOccupyTimer,
+    loadPageOccupyInfo,
+    occupyPage
+  };
+}
+
+export { destroyOccupyTimer, loadPageOccupyInfo, occupyPage, pageOccupyInfo, usePageOccupy };