Blame view

Yi.Vben5.Vue3/apps/web-antd/src/views/workflow/components/flow-designer.vue 1.54 KB
515fceeb   “wangming”   框架初始化
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>