feat: 将我发起的流程列表独立出来，改为tab中打开，调整审批记录的样式

src/components/SecondDev/FlowHistory.vue

@@ -1,17 +1,26 @@
 <template>
     <div class="geg-flow-history">
-        <div v-for="(item, index) in items" :class="{ sep: index !== 0 }" class="item">
+        <div v-for="(item, index) in comments" :class="{ sep: index !== 0 }" class="item">
-            <template v-if="mode === 'simple'"></template>
+            <template v-if="mode === 'simple'">
+                <div class="row">
+                    <div class="col-node">{{ item.taskName }}</div>
+                    <div class="col-1">{{ item.approveUserName }}</div>
+                    <div class="col-2">{{ parseTime(item.approveTime) }}</div>
+                    <div class="col-3"
+                        ><span :class="getTagCls(item)">[{{ item.approveResult }}]</span>{{ item.approveComment }}</div
+                    >
+                </div>
+            </template>
             <template v-if="mode === 'complex'">
                 <div class="row">
-                    <div class="col-1">审批人</div>
+                    <div class="col-1">{{ item.approveUserName }}</div>
                     <div class="col-2">用时：1小时10分</div>
-                    <div class="col-3 agree">{{ item.nodeName }}</div>
+                    <div class="col-3 agree">{{ item.taskName }}</div>
                 </div>
                 <div class="row">
-                    <div class="col-1 position">职务</div>
+                    <div class="col-1 position"></div>
-                    <div class="col-2">2023-03-27 12:00:00</div>
+                    <div class="col-2">{{ parseTime(item.approveTime) }}</div>
-                    <div class="col-3">{{ item.comment }}</div>
+                    <div class="col-3">{{ item.approveComment }}</div>
                 </div>
             </template>
         </div>
@@ -29,11 +38,11 @@
         }
 
         .col-1 {
-            width: 180px;
+            width: 140px;
         }
 
         .col-2 {
-            width: 180px;
+            width: 130px;
             color: #5a6875;
         }
 
@@ -45,6 +54,22 @@
             }
         }
 
+        .tag {
+            padding-right: 4px;
+
+            &.agree {
+                color: #52c41a;
+            }
+
+            &.reject {
+                color: #eaa63c;
+            }
+        }
+
+        .col-node {
+            width: 120px;
+        }
+
         .position {
             color: #90a0af;
         }
@@ -60,12 +85,13 @@
 </style>
 
 <script setup>
-    import { defineProps, ref } from 'vue';
+    import { defineProps, onMounted, ref, watch } from 'vue';
+    import dayjs from 'dayjs';
 
     const props = defineProps({
         mode: {
             type: String,
-            default: 'complex'
+            default: 'simple'
         },
         items: Array,
         autoHide: {
@@ -77,4 +103,42 @@
             default: 'desc'
         }
     });
+
+    const comments = ref([]);
+
+    function parseTime(t) {
+        return dayjs(t).format('YYYY-MM-DD HH:mm');
+    }
+
+    onMounted(() => {
+        if (props.items?.length) {
+            sortList();
+        }
+    });
+
+    watch(
+        () => props.items,
+        () => {
+            sortList();
+        }
+    );
+
+    function sortList() {
+        const newList = props.items.map((item) => {
+            item.ts = dayjs(item.approveTime).valueOf();
+            return item;
+        });
+        newList.sort((item1, item2) => {
+            return props.sort === 'desc' ? item2.ts - item1.ts : item1.ts - item2.ts;
+        });
+        comments.value = newList;
+    }
+
+    function getTagCls(item) {
+        return {
+            agree: item.approveType === 0,
+            reject: item.approveType === 2,
+            tag: true
+        };
+    }
 </script>

src/components/SecondDev/OpinionDialog.vue

@@ -1,11 +1,15 @@
 <template>
-    <a-modal :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg" @cancel="onClickCancel" @ok="onClickOK">
+    <a-modal :mask-closable="false" :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg">
+        <template #footer>
+            <a-button :disabled="loading" @click="onClickCancel">取消</a-button>
+            <a-button :loading="loading" type="primary" @click="onClickOK">确定</a-button>
+        </template>
         <div class="dialog-wrap">
             <a-form :label-col="{ span: 5 }" :model="formState" autocomplete="off">
                 <a-form-item v-if="_action === 'agree'" label="下一节点" name="nextNodeName">
                     <span>{{ formState.nextNodeName }}</span>
                 </a-form-item>
-                <a-form-item v-if="_action === 'agree'" label="审批人">
+                <a-form-item v-if="_action === 'agree' && !isEnd" label="审批人">
                     <a-select v-model:value="formState.assignees" :options="nextAssignees" max-tag-count="responsive" mode="multiple" placeholder="请选择审批人"></a-select>
                 </a-form-item>
                 <a-form-item v-if="_action === 'reject'" label="退回至" name="rejectNode">
@@ -24,6 +28,7 @@
 <script setup>
     import { reactive, ref } from 'vue';
     import { getRejectNodeList } from '/@/api/workflow/task';
+    import { message } from 'ant-design-vue';
 
     const dialogTitle = ref('审批');
     const isOpen = ref(false);
@@ -31,6 +36,8 @@
     const rejectNodeId = ref('');
     const nextAssigneeName = ref(''); // 不可选审批人
     const nextAssignees = ref([]);
+    const loading = ref(false);
+    const isEnd = ref(false);
 
     let _action = ref('agree');
     let _processId = '';
@@ -48,6 +55,7 @@
     function toggleDialog({ isClose, action, callback, processId, taskId, nextNodes } = {}) {
         if (isClose) {
             isOpen.value = false;
+            loading.value = false;
             return;
         }
         isOpen.value = true;
@@ -62,6 +70,7 @@
             // 下一个节点唯一时（可能有并行节点）
             const nNode = nextNodes[0];
             formState.nextNodeName = nNode.activityName;
+            isEnd.value = nNode.isEnd;
             if (nNode.chooseAssign) {
                 const selected = [];
                 nextAssignees.value = nNode.userList.map((item) => {
@@ -90,26 +99,36 @@
     }
 
     function onClickOK() {
+        if (!isEnd.value && _action.value === 'agree' && !formState.assignees.length) {
+            return message.error('请选择审批人');
+        }
         const nextTaskUser = {};
-        if (_nextNodes.length === 1) {
+        if (_nextNodes && _nextNodes.length === 1) {
-            nextTaskUser[_nextNodes[0].activityId] = formState.assignees.join(',');
+            nextTaskUser[_nextNodes[0].activityId] = isEnd.value ? '' : formState.assignees.join(',');
         }
         if (_callback && typeof _callback === 'function') {
+            loading.value = true;
             _callback({
                 opinion: formState.opinion,
                 rejectNodeId: rejectNodeId.value,
                 nextTaskUser
             });
-        }
+        } else {
             isOpen.value = false;
         }
+    }
 
     function onClickCancel() {
         isOpen.value = false;
     }
 
+    function stopLoading() {
+        loading.value = false;
+    }
+
     defineExpose({
-        toggleDialog
+        toggleDialog,
+        stopLoading
     });
 </script>
 

src/hooks/event/useEventBus.js

@@ -0,0 +1,9 @@
+import mitt from '../../utils/mitt';
+const bus = new mitt();
+
+export default function () {
+    return {
+        bus,
+        FLOW_PROCESSED: 'flow_processed'
+    };
+}

src/router/routes/basic.ts

@@ -174,6 +174,14 @@ export const FLOW_ROUTE: AppRouteRecordRaw[] = [{
             meta: {
                 title: '待办列表'
             }
+        },
+        {
+            path: 'myProcess',
+            name: 'FlowListPage3',
+            component: () => import('/@/views/secondDev/processTasksPage.vue'),
+            meta: {
+                title: '我发起的'
+            }
         }
     ]
 }];

src/views/secondDev/approveFlowPage.vue

@@ -9,13 +9,13 @@
                         </slot>
                         关闭
                     </a-button>
-                    <a-button type="primary" @click="onApproveClick">
+                    <a-button v-if="!readonly" type="primary" @click="onApproveClick">
                         <slot name="icon">
                             <check-circle-outlined />
                         </slot>
                         同意
                     </a-button>
-                    <a-button @click="onDenyClick">
+                    <a-button v-if="!readonly" @click="onDenyClick">
                         <slot name="icon">
                             <stop-outlined />
                         </slot>
@@ -24,8 +24,8 @@
                     <a-dropdown>
                         <template #overlay>
                             <a-menu @click="onMoreClick">
-                                <a-menu-item key="terminate">终止</a-menu-item>
+                                <a-menu-item v-if="!readonly" key="terminate">终止</a-menu-item>
-                                <a-menu-item key="transfer">转办</a-menu-item>
+                                <a-menu-item v-if="!readonly" key="transfer">转办</a-menu-item>
                                 <a-menu-item key="flowchart">查看流程图</a-menu-item>
                             </a-menu>
                         </template>
@@ -39,7 +39,7 @@
             <FormInformation
                 :key="renderKey"
                 ref="formInformation"
-                :disabled="false"
+                :disabled="readonly"
                 :formAssignmentData="data.formAssignmentData"
                 :formInfos="data.formInfos"
                 :opinions="data.opinions"
@@ -66,8 +66,11 @@
     import { useMultipleTabStore } from '/@/store/modules/multipleTab';
     import Title from '/@/components/Title/src/Title.vue';
     import FlowHistory from '/@/components/SecondDev/FlowHistory.vue';
+    import { message } from 'ant-design-vue';
+    import useEventBus from '/@/hooks/event/useEventBus';
 
     const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = userTaskItem();
+    const { bus, FLOW_PROCESSED } = useEventBus();
 
     const tabStore = useMultipleTabStore();
     const router = useRouter();
@@ -77,6 +80,7 @@
     const schemaId = ref(rParams.arg1);
     const taskId = ref(rQuery.taskId);
     const processId = ref(rParams.arg2);
+    const readonly = ref(!!rQuery.readonly); // 查看流程会触发只读模式
     const renderKey = ref('');
     const formConfigs = ref();
     const opinionDlg = ref();
@@ -140,6 +144,21 @@
         });
     }
 
+    function flowSuccess() {
+        opinionDlg.value.toggleDialog({
+            isClose: true
+        });
+        message.success('操作成功');
+        setTimeout(() => {
+            bus.emit(FLOW_PROCESSED);
+            close();
+        }, 500);
+    }
+
+    function flowFail() {
+        opinionDlg.value.stopLoading();
+    }
+
     function reset() {
         approvalData.isAddOrSubSign = false;
         approvalData.stampInfo = {
@@ -155,8 +174,8 @@
     }
 
     function getTaskRecords() {
-        if (data.taskRecords.length) {
+        if (data?.taskApproveOpinions?.length) {
-            return data.taskRecords[0]?.records || [];
+            return data.taskApproveOpinions || [];
         }
     }
 
@@ -165,6 +184,7 @@
             try {
                 let res = await getApprovalProcess(unref(taskId), unref(processId));
                 initProcessData(res);
+                if (!readonly.value) {
                     if (res.buttonConfigs) {
                         approvalData.buttonConfigs = res.buttonConfigs;
                     }
@@ -181,7 +201,7 @@
                     approvalData.rejectNodeActivityId = '';
                     approvalData.rejectNodeActivityIds = [];
                     approvalData.circulateConfigs = [];
-
+                }
                 renderKey.value = Math.random() + '';
             } catch (error) {}
         } else {
@@ -253,38 +273,12 @@
         try {
             if (/*validateSuccess.value*/ true) {
                 let params = await getApproveParams();
-                let res = await postApproval(params);
+                await postApproval(params);
-                // 下一节点审批人
+                flowSuccess();
-                let taskList = [];
-                if (res && res.length > 0) {
-                    taskList = res
-                        .filter((ele) => {
-                            return ele.isMultiInstance == false && ele.isAppoint == true;
-                        })
-                        .map((ele) => {
-                            return {
-                                taskId: ele.taskId,
-                                taskName: ele.taskName,
-                                provisionalApprover: ele.provisionalApprover,
-                                selectIds: []
-                            };
-                        });
-                    if (taskList.length > 0) {
-                        approveUserData.list = taskList;
-                        approveUserData.schemaId = props.schemaId;
-                        approveUserData.visible = true;
                 data.submitLoading = false;
-                    } else {
-                        opinionDlg.value.toggleDialog({ isClose: true });
-                        data.submitLoading = false;
-                        save(true, t('审批流程'));
             }
-                } else {
+        } catch (error) {
-                    opinionDlg.value.toggleDialog({ isClose: true });
+            flowFail();
-                    data.submitLoading = false;
-                    save(true, t('审批流程'));
         }
     }
-        } catch (error) {}
-    }
 </script>

src/views/secondDev/processTasksPage.vue

@@ -21,7 +21,7 @@
     });
 
     const MyProcess = defineAsyncComponent({
-        loader: () => import('../workflow/task/components/processTasks/MyProcess.vue')
+        loader: () => import('../workflow/task/components/processTasks/MyProcessV2.vue')
     });
     const TaskDone = defineAsyncComponent({
         loader: () => import('../workflow/task/components/processTasks/TaskDone.vue')
@@ -98,6 +98,8 @@
     const lHash = location.hash;
     if (lHash.indexOf('/draft') > 0) {
         id = 'Drafts';
+    } else if (lHash.indexOf('/myProcess') > 0) {
+        id = 'MyProcess';
     }
     let data = reactive({
         componentName: shallowRef(ToDoTasks)

src/views/workflow/task/components/processTasks/MyProcessV2.vue

@@ -0,0 +1,183 @@
+<template>
+    <BasicTable @register="registerTable" @selection-change="selectionChange" @row-dbClick="showProcess">
+        <template #toolbar>
+            <RejectProcess :processId="processId" :taskId="taskId" @close="reload" @restart="restartProcess">
+                <a-button v-auth="'processtasks:withdraw'">{{ t('撤回') }}</a-button>
+            </RejectProcess>
+            <a-button v-auth="'processtasks:view'" @click="showProcess">{{ t('查看') }}</a-button>
+            <a-button v-auth="'processtasks:relaunch'" @click="restartProcess">{{ t('重新发起') }}</a-button>
+        </template>
+
+        <template #currentProgress="{ record }">
+            <a-progress v-if="record.currentProgress" :percent="record.currentProgress" size="small" />
+        </template>
+        <template #action="{ record }">
+            <TableAction
+                :actions="[
+                    {
+                        icon: 'ant-design:delete-outlined',
+                        auth: 'processtasks:delete',
+                        color: 'error',
+                        popConfirm: {
+                            title: t('移入回收站'),
+                            confirm: handleDelete.bind(null, record)
+                        }
+                    }
+                ]"
+            />
+        </template>
+    </BasicTable>
+    <LaunchProcess v-if="restartProcessVisible" :processId="processId" :schemaId="schemaId" :taskId="taskId" @close="restartProcessClose" />
+</template>
+
+<script lang="ts" setup>
+    import userTaskTable from './../../hooks/userTaskTable';
+
+    import { ref, unref, watch } from 'vue';
+
+    import LaunchProcess from './../LaunchProcess.vue';
+    import RejectProcess from './../RejectProcess.vue';
+
+    import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
+    import { getSchemaTask, moveRecycle } from '/@/api/workflow/process';
+    import { notification } from 'ant-design-vue';
+    import { TaskTypeUrl } from '/@/enums/workflowEnum';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { useRouter } from 'vue-router';
+
+    const { t } = useI18n();
+    const restartProcessVisible = ref(false);
+    const configColumns: BasicColumn[] = [
+        {
+            title: t('流水号'),
+            dataIndex: 'serialNumber',
+            width: 50,
+            sorter: true
+        },
+        {
+            title: t('流程名称'),
+            dataIndex: 'processName',
+            align: 'left',
+            width: '32%',
+            sorter: true
+        },
+        {
+            title: t('任务名称'),
+            dataIndex: 'currentTaskName',
+            sorter: true,
+            width: '17%',
+            align: 'left'
+        },
+        {
+            title: t('当前进度'),
+            dataIndex: 'currentProgress',
+            sorter: true,
+            width: '17%',
+            slots: { customRender: 'currentProgress' }
+        },
+        {
+            title: t('发起人'),
+            dataIndex: 'originator',
+            align: 'left',
+            width: 80
+        },
+        {
+            title: t('发起时间'),
+            align: 'left',
+            width: 120,
+            dataIndex: 'createTime'
+        }
+    ];
+
+    const { formConfig, processId, taskId, schemaId, selectionChange } = userTaskTable();
+
+    const [registerTable, { reload }] = useTable({
+        title: t('我的流程列表'),
+        api: getSchemaTask,
+        rowKey: 'id',
+        columns: configColumns,
+        formConfig: formConfig('MyProcess'),
+        rowSelection: {
+            type: 'radio'
+        },
+        beforeFetch: (params) => {
+            return { data: params, taskUrl: TaskTypeUrl.MY_PROCESS };
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        striped: false,
+        pagination: {
+            pageSize: 18
+        },
+        actionColumn: {
+            width: 60,
+            title: t('操作'),
+            dataIndex: 'action',
+            slots: { customRender: 'action' },
+            fixed: undefined
+        }
+    });
+
+    function restartProcess() {
+        if (processId.value) {
+            restartProcessVisible.value = true;
+        } else {
+            notification.open({
+                type: 'error',
+                message: t('提示'),
+                description: t('请选择一个流程重新发起')
+            });
+        }
+    }
+
+    function restartProcessClose() {
+        restartProcessVisible.value = false;
+        reload();
+    }
+
+    async function handleDelete(record: Recordable) {
+        if (record.processId) {
+            try {
+                let res = await moveRecycle(record.processId);
+                if (res) {
+                    notification.open({
+                        type: 'success',
+                        message: t('移入回收站'),
+                        description: t('移入回收站成功')
+                    });
+                    reload();
+                } else {
+                    notification.open({
+                        type: 'error',
+                        message: t('移入回收站'),
+                        description: t('移入回收站失败')
+                    });
+                }
+            } catch (error) {}
+        }
+    }
+
+    const router = useRouter();
+    const { currentRoute } = router;
+
+    function showProcess(record, index) {
+        const { processId, taskId, schemaId } = record;
+        router.push({
+            path: `/flow/${schemaId}/${processId}/approveFlow`,
+            query: {
+                taskId,
+                readonly: 1
+            }
+        });
+    }
+
+    watch(
+        () => unref(currentRoute),
+        (val) => {
+            if (val.name == 'ProcessTasks') reload();
+        },
+        { deep: true }
+    );
+</script>
+
+<style scoped></style>

src/views/workflow/task/components/processTasks/ToDoTasksV2.vue

@@ -1,22 +1,10 @@
 <template>
-    <BasicTable @register="registerTable" @row-dbClick="onRowDblClick"
+    <BasicTable @register="registerTable" @row-dbClick="onRowDblClick" @selection-change="selectionChange">
-                @selection-change="selectionChange">
         <template #toolbar>
-            <BatchApprovalProcess
+            <BatchApprovalProcess v-if="showBatchApproval" :selectedRows="data.selectedRows" @close="BatchClearHandler">
-                v-if="showBatchApproval"
-                :selectedRows="data.selectedRows"
-                @close="BatchClearHandler"
-            >
                 <a-button v-auth="'processtasks:batchApproval'">{{ t('批量审批') }}</a-button>
             </BatchApprovalProcess>
-            <ApprovalProcess
+            <ApprovalProcess v-else :processId="processId" :schemaId="schemaId" :taskId="taskId" :visible="false" @close="clearHandler">
-                v-else
-                :processId="processId"
-                :schemaId="schemaId"
-                :taskId="taskId"
-                :visible="false"
-                @close="clearHandler"
-            >
                 <a-button v-auth="'processtasks:approve'">{{ t('审批') }}</a-button>
             </ApprovalProcess>
             <LookProcess :processId="processId" :taskId="taskId" @close="clearHandler">
@@ -25,70 +13,70 @@
         </template>
 
         <template #currentProgress="{ record }">
-            <a-progress v-if="record.currentProgress" :percent="record.currentProgress"
+            <a-progress v-if="record.currentProgress" :percent="record.currentProgress" size="small" />
-                        size="small" />
         </template>
     </BasicTable>
     <InfoModal @register="registerModal" @success="reload" />
 </template>
 
 <script lang="ts" setup>
-    import userTaskTable from "./../../hooks/userTaskTable";
+    import userTaskTable from './../../hooks/userTaskTable';
-    import { useModal } from "/@/components/Modal";
+    import { useModal } from '/@/components/Modal';
-    import LookProcess from "./../LookProcess.vue";
+    import LookProcess from './../LookProcess.vue';
-    import ApprovalProcess from "./../ApprovalProcess.vue";
+    import ApprovalProcess from './../ApprovalProcess.vue';
-    import BatchApprovalProcess from "./../BatchApprovalProcess.vue";
+    import BatchApprovalProcess from './../BatchApprovalProcess.vue';
-    import InfoModal from "../BatchApprovalInfo.vue";
+    import InfoModal from '../BatchApprovalInfo.vue';
-    import { BasicTable, useTable, BasicColumn } from "/@/components/Table";
+    import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
-    import { getSchemaTask } from "/@/api/workflow/process";
+    import { getSchemaTask } from '/@/api/workflow/process';
-    import { TaskTypeUrl } from "/@/enums/workflowEnum";
+    import { TaskTypeUrl } from '/@/enums/workflowEnum';
-    import { useI18n } from "/@/hooks/web/useI18n";
+    import { useI18n } from '/@/hooks/web/useI18n';
-    import { unref, watch } from "vue";
+    import { unref, watch, onMounted, onUnmounted } from 'vue';
-    import { useRouter } from "vue-router";
+    import { useRouter } from 'vue-router';
+    import useEventBus from '/@/hooks/event/useEventBus';
 
     const { t } = useI18n();
     const configColumns: BasicColumn[] = [
         {
-            title: t("流水号"),
+            title: t('流水号'),
-            dataIndex: "serialNumber",
+            dataIndex: 'serialNumber',
             width: 80,
-            align: "left"
+            align: 'left'
         },
         {
-            title: t("流程名称"),
+            title: t('流程名称'),
-            dataIndex: "processName",
+            dataIndex: 'processName',
-            width: "32%",
+            width: '32%',
-            align: "left"
+            align: 'left'
         },
         {
-            title: t("任务名称"),
+            title: t('任务名称'),
-            dataIndex: "taskName",
+            dataIndex: 'taskName',
-            width: "17%",
+            width: '17%',
-            align: "left"
+            align: 'left'
         },
         {
-            title: t("当前进度"),
+            title: t('当前进度'),
-            dataIndex: "currentProgress",
+            dataIndex: 'currentProgress',
-            width: "17%",
+            width: '17%',
-            align: "left",
+            align: 'left',
-            slots: { customRender: "currentProgress" }
+            slots: { customRender: 'currentProgress' }
         },
         {
-            title: t("发起人"),
+            title: t('发起人'),
-            dataIndex: "startUserName",
+            dataIndex: 'startUserName',
             width: 80,
-            align: "left"
+            align: 'left'
         },
         {
-            title: t("发起时间"),
+            title: t('发起时间'),
             width: 120,
-            dataIndex: "startTime",
+            dataIndex: 'startTime',
-            align: "left"
+            align: 'left'
         }
     ];
     const [registerModal, { openModal }] = useModal();
-    const { formConfig, data, processId, taskId, schemaId, selectionChange, showBatchApproval } =
+    const { formConfig, data, processId, taskId, schemaId, selectionChange, showBatchApproval } = userTaskTable();
-        userTaskTable();
+    const {bus, FLOW_PROCESSED} = useEventBus();
 
     function BatchClearHandler(v) {
         if (v) {
@@ -102,16 +90,16 @@
         reload();
     };
     const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
-        title: t("待办任务列表"),
+        title: t('待办任务列表'),
         api: getSchemaTask,
-        rowKey: "id",
+        rowKey: 'id',
         columns: configColumns,
         formConfig: formConfig(),
         beforeFetch: (params) => {
             return { data: params, taskUrl: TaskTypeUrl.PENDING_TASKS };
         },
         rowSelection: {
-            type: "checkbox"
+            type: 'checkbox'
         },
         useSearchForm: true,
         showTableSetting: true,
@@ -129,7 +117,7 @@
     watch(
         () => unref(currentRoute),
         (val) => {
-            if (val.name == "ProcessTasks") reload();
+            if (val.name == 'ProcessTasks') reload();
         },
         { deep: true }
     );
@@ -142,6 +130,18 @@
             }
         });
     };
+
+    function onFlowProcessed() {
+        reload();
+    }
+
+    onMounted(() => {
+        bus.on(FLOW_PROCESSED, onFlowProcessed);
+    });
+
+    onUnmounted(() => {
+        bus.off(FLOW_PROCESSED, onFlowProcessed);
+    });
 </script>
 
 <style scoped></style>