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

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

@@ -1,154 +1,161 @@
-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";
+import { PageTypeEnum } from "../../../constant/page-designer.mjs";
+import "../../../constant/index.mjs";
+import { platform } from "../../../utils/design-view/index.mjs";
+import { DesignPluginPgkUtil } from "../../../utils/design-plugin-pkg-util/design-plugin-pkg-util.mjs";
+import { createWidgetByType } from "../../../utils/schema/index.mjs";
+import "../../../utils/index.mjs";
+import "../design-state.mjs";
+import { useCacheHistory } from "../../develop/useCacheHistory.mjs";
+import { useToolkit } from "../layout/useToolkit.mjs";
+import { useDesigner } from "../useDesigner.mjs";
+import { useUserOccupy } from "../../../components/user-occupy/useUserOccupy.mjs";
+import "../../../components/index.mjs";
+import { isEmpty, isNil } from "lodash-es";
+import { FormComponents, PanelEnum, Platform, t } from "@gct-paas/core";
+import { computed, createVNode, ref } from "vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import { Modal } from "ant-design-vue";
+//#region src/hooks/design-view/page/usePage.ts
+var newKeyTag = "___new___";
+var pageInfo = ref({});
+var pagePermissions = ref([]);
+var { setLockInfo, initOccupy, loadOccupyInfo } = useUserOccupy();
+var 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();
+var currentPanel = ref(PanelEnum.PAGE);
+/**
+* 加载页面信息
+* @returns
+*/
+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("___new___")) pageInfo.value = {
+		id: newKeyTag,
+		name: "",
+		key: pid.replace(`${newKeyTag}:`, ""),
+		designerJson: ""
+	};
+	else pageInfo.value = 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 });
+	const [configs] = await DesignPluginPgkUtil.loadDesignPlugin(app, platform.value, _gct.store.appInfo.suiteKey ? [_gct.store.appInfo.suiteKey] : void 0);
+	setPluginConfigs(configs);
+	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) {
+			const items = _json.plugins.filter((item) => {
+				return configs.findIndex((config) => config.key === item.key) === -1;
+			});
+			await DesignPluginPgkUtil.loadDesignDeletedPlugins(platform.value, items);
+		}
+		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)) {
+		const bottomBtnWidget = createWidgetByType(FormComponents.BottomButtonContainer);
+		pageJson.widgets.push(bottomBtnWidget);
+	}
+	initToolkitWidgets();
+	loadPageDesignHistoryList();
+	pagePermissions.value = await _api.apaas.permission.getList({ relationId: _gct.store.context.pid }) || [];
+	if (!pid.startsWith("___new___")) initLockState();
+	savePageJsonSnapshot();
 }
+/**
+* 初始化界面占用信息
+*/
 function initLockState() {
+	initOccupy({
+		id: _gct.store.context.pid || "",
+		type: (platform.value === Platform.WEB ? PageTypeEnum.WEB : platform.value === Platform.PAD ? PageTypeEnum.PAD : PageTypeEnum.MOBILE).toString()
+	});
+	loadOccupyInfo();
+	setLockInfo({
+		id: pageInfo.value?.lockUserId,
+		name: pageInfo.value?.lockUserName
+	});
 }
-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;
-    }
-  });
+var 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;
+		}
+	});
 };
+/**
+* 更新页面锁定状态
+* @param {boolean} value
+*/
 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 = "";
-  }
+	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;
+	if (currentPanel.value === value) return;
+	currentPanel.value = value;
 }
 function usePage() {
-  return {
-    togglePanel,
-    initLockState
-  };
+	return {
+		togglePanel,
+		initLockState
+	};
 }
-
+//#endregion
 export { currentPanel, loadPageInfo, lockPage, newKeyTag, pageInfo, pagePermissions, togglePanel, unlockAvailable, usePage };

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

@@ -1,77 +1,98 @@
-import { ref, computed, watch } from 'vue';
-import { throttle } from 'lodash-es';
-
-const pageOccupyInfo = ref({
-  querySpanNum: 120,
-  // 占用查询间隔
-  cacheNum: 500
-  // 占用缓存间隔
+import { throttle } from "lodash-es";
+import { computed, ref, watch } from "vue";
+//#region src/hooks/design-view/page/usePageOccupy.ts
+/** 页面占用信息 */
+var pageOccupyInfo = ref({
+	querySpanNum: 120,
+	cacheNum: 500
 });
-const timeout = computed(() => {
-  return pageOccupyInfo.value.querySpanNum * 1e3;
+/** 轮询间隔（毫秒） */
+var timeout = computed(() => {
+	return pageOccupyInfo.value.querySpanNum * 1e3;
 });
-const wait = computed(() => {
-  return (pageOccupyInfo.value.cacheNum - 10) / 2 * 1e3;
+/** 节流等待时间（毫秒） */
+var wait = computed(() => {
+	return (pageOccupyInfo.value.cacheNum - 10) / 2 * 1e3;
 });
-let occupyTimer = null;
+/**
+* 页面占用轮询定时器
+*/
+var occupyTimer = null;
+/**
+* 初始化占用轮询定时器
+*/
 function initOccupyTimer() {
-  destroyOccupyTimer();
-  occupyTimer = window.setInterval(() => {
-    console.info("【获取占用】");
-    loadPageOccupyInfo();
-  }, timeout.value);
+	destroyOccupyTimer();
+	occupyTimer = window.setInterval(() => {
+		console.info("【获取占用】");
+		loadPageOccupyInfo();
+	}, timeout.value);
 }
+/**
+* 销毁占用轮询定时器
+*/
 function destroyOccupyTimer() {
-  if (!occupyTimer) return;
-  console.info("【销毁占用轮询】");
-  clearInterval(occupyTimer);
+	if (!occupyTimer) return;
+	console.info("【销毁占用轮询】");
+	clearInterval(occupyTimer);
 }
+/**
+* 获取占用信息
+*
+* @returns {Promise<void>}
+*/
 async function loadPageOccupyInfo() {
-  const res = await _api.apaas.webpage.postGetWebPageOccupyMsg({
-    id: _gct.store.context.pid
-  });
-  pageOccupyInfo.value = res;
+	pageOccupyInfo.value = await _api.apaas.webpage.postGetWebPageOccupyMsg({ id: _gct.store.context.pid });
 }
+/**
+* 页面占用（带节流）
+*
+* @param {string} id 页面 id
+*/
 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;
+	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);
+/** 页面占用节流函数 */
+var throttledOccupyPageTrue = throttle(occupyPageTrue, wait.value);
+/**
+* 页面占用或取消占用
+*
+* @param {boolean} value true 为占用，false 为取消占用
+* @returns {Promise<void>}
+*/
 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 = "";
-  }
+	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 = "";
+	}
 }
+/**
+* 页面占用 composable
+* 初始化占用信息监听，根据 occupyId 状态启动或销毁轮询定时器
+*
+* @returns {{ pageOccupyInfo, destroyOccupyTimer, loadPageOccupyInfo, occupyPage }}
+*/
 function usePageOccupy() {
-  watch(
-    () => pageOccupyInfo.value.occupyId,
-    (value) => {
-      if (value) {
-        destroyOccupyTimer();
-      } else {
-        initOccupyTimer();
-      }
-    }
-  );
-  return {
-    pageOccupyInfo,
-    destroyOccupyTimer,
-    loadPageOccupyInfo,
-    occupyPage
-  };
+	/** 监听占用信息变更，控制轮询定时器 */
+	watch(() => pageOccupyInfo.value.occupyId, (value) => {
+		if (value) destroyOccupyTimer();
+		else initOccupyTimer();
+	});
+	return {
+		pageOccupyInfo,
+		destroyOccupyTimer,
+		loadPageOccupyInfo,
+		occupyPage
+	};
 }
-
+//#endregion
 export { destroyOccupyTimer, loadPageOccupyInfo, occupyPage, pageOccupyInfo, usePageOccupy };