flow-designer.vue
1.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<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';
import { Alert } from 'ant-design-vue';
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>
<div class="size-full">
<Alert
class="mx-4 my-2"
type="warning"
:show-icon="true"
message="这是iframe页面! iframe页面! iframe页面! 不是我写的真服了"
/>
<iframe :src="url" class="size-full"></iframe>
</div>
</template>