admin-vben5/apps/web-antd/src/views/workflow/components/flow-designer.vue
2024-12-18 11:20:39 +08:00

53 lines
1.3 KiB
Vue

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { useAppConfig, useTabs } from '@vben/hooks';
import { stringify } from '@vben/request';
import { useAccessStore } from '@vben/stores';
import { useEventListener } from '@vueuse/core';
defineOptions({ name: 'FlowDesigner' });
const route = useRoute();
const definitionId = route.query.definitionId as string;
const disabled = route.query.disabled === 'true';
const { clientId } = useAppConfig(import.meta.env, import.meta.env.PROD);
const accessStore = useAccessStore();
const params = {
Authorization: `Bearer ${accessStore.accessToken}`,
id: definitionId,
clientid: clientId,
disabled,
};
/**
* iframe设计器的地址
*/
const url = `${import.meta.env.VITE_GLOB_API_URL}/warm-flow-ui/index.html?${stringify(params)}`;
const { closeCurrentTab } = useTabs();
const router = useRouter();
function messageHandler(event: MessageEvent) {
switch (event.data.method) {
case 'close': {
// 关闭当前tab
closeCurrentTab();
// 跳转到流程定义列表
router.push('/workflow/processDefinition');
break;
}
}
}
// iframe监听组件内设计器保存事件
useEventListener('message', messageHandler);
</script>
<template>
<iframe :src="url" class="size-full"></iframe>
</template>