@jari-ace/element-plus-component 0.6.2 → 0.6.3

package/dist/components/flowShell/FlowFormShell.vue.js

@@ -1,7 +1,7 @@
 import { ref, watch, computed, nextTick } from 'vue';
 import { useTaskQueryApi, useFlowDefinitionApi } from '@jari-ace/app-bolts';
 import { createAxiosWithoutCache, useLoading } from '@jari-ace/app-bolts';
-import { ElMessage, ElTag, ElCard, ElButton, ElTimeline, ElTimelineItem, ElEmpty, ElIcon, ElResult } from 'element-plus';
+import { ElMessage, ElTag, ElCard, ElButton, ElTimeline, ElTimelineItem, ElEmpty, ElIcon, ElResult, ElDialog, ElScrollbar } from 'element-plus';
 import { JaButton } from '../button';
 import { JaUserInfoTag } from '../userTag';
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
@@ -16,11 +16,13 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
     const props = withDefaults(defineProps(), {
         appName: undefined,
         flowKey: undefined,
+        bizTag: undefined,
         startNodeKey: undefined,
         taskInstanceId: undefined,
         width: undefined,
         height: undefined,
-        defaultCollapsed: false
+        defaultCollapsed: false,
+        isNewForm: false
     });
     const dialogVisible = defineModel({
         default: false
@@ -136,32 +138,62 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                 return '未知状态';
         }
     };
+    const actualFlowKey = ref(props.flowKey);
+    const flowSelectionDialogVisible = ref(false);
+    const selectableFlows = ref([]);
+    const selectableFlowParams = ref([]);
     // 监听dialogVisible变化
     watch(() => dialogVisible.value, async (newValue) => {
         resetState();
+        actualFlowKey.value = props.flowKey;
         if (newValue) {
             emits('open');
-            // 等待下一个事件循环，确保父组件的open事件处理完成（可能包含异步loadData）
+            //等待状态同步
             await nextTick();
-            loadFlowFormParam();
+            if (props.taskId) {
+                // 场景一：通过 taskId 打开，直接加载
+                loadFlowFormParam();
+            }
+            else if (props.isNewForm) {
+                // 场景二：明确是新表单发起流程，不等待 formId，直接加载流程定义
+                loadFlowFormParam();
+            }
+            else if (props.formData?.flowFormId) {
+                // 场景三：非新表单，且一开始就已经有 formId，直接加载
+                loadFlowFormParam();
+            }
+            // 场景四：非新表单且没有 formId，什么都不做，等待 formData.flowFormId 的 watcher 触发
         }
         else {
             emits('closed');
         }
     });
+    // 监听 formData 的 flowFormId 变化，用于处理异步加载表单数据的场景
+    watch(() => props.formData?.flowFormId, (newFormId, oldFormId) => {
+        // 只有在 dialog 打开的情况下，且从无到有，或者发生了变化，且没有 taskId 的时候，才重新加载流程参数
+        if (dialogVisible.value && !props.taskId && !props.isNewForm && newFormId && newFormId !== oldFormId) {
+            // 避免重复加载，可以先重置
+            resetState();
+            actualFlowKey.value = props.flowKey;
+            loadFlowFormParam();
+        }
+    });
     // 重置状态
     const resetState = () => {
         error.value = '';
         flowFormParam.value = undefined;
+        selectableFlows.value = [];
+        selectableFlowParams.value = [];
+        actualFlowKey.value = undefined;
     };
     // 加载流程表单参数
     const loadFlowFormParam = async () => {
         resetState();
         const formId = props.formData?.flowFormId;
         // 检查参数
-        // 必须提供 taskId，或者 appName 和 flowKey
-        if (!props.taskId && !(props.appName && props.flowKey)) {
-            ElMessage.error('参数错误: 必须提供taskId或appName、flowKey和flowFormId');
+        // 必须提供 taskId，或者 appName 和 (flowKey 或 bizTag)
+        if (!props.taskId && !(props.appName && (props.flowKey || props.bizTag))) {
+            ElMessage.error('参数错误: 必须提供taskId或appName、flowKey/bizTag和flowFormId');
             return;
         }
         try {
@@ -169,19 +201,41 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                 // 优先使用Id
                 flowFormParam.value = await taskQueryApi.getTaskInstanceById(props.taskId);
             }
-            else if (formId) {
+            else if (formId && props.flowKey) {
                 // 使用appName、flowKey、formId
-                flowFormParam.value = await taskQueryApi.getTaskByFormIdAndAppAndFlowKey(formId, props.appName, props.flowKey);
+                const param = await taskQueryApi.getTaskByFormIdAndAppAndFlowKey(formId, props.appName, props.flowKey);
+                if (param && param.flowDefinition) {
+                    flowFormParam.value = param;
+                }
+                else {
+                    // 兜底：如果没查到流程参数或者只有表单数据没有流程实例，按照新建模式加载流程定义
+                    const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName, props.flowKey);
+                    flowFormParam.value = {
+                        flowDefinition: flowDefinition,
+                    };
+                }
+            }
+            else if (formId && props.bizTag) {
+                // formId 存在，但没有 flowKey，有 bizTag，查询可能存在的多个流程参数
+                const params = await taskQueryApi.getTasksByFormIdAndAppAndBizTag(formId, props.appName, props.bizTag);
+                if (!params || params.length === 0 || !params.some(p => p.flowDefinition)) {
+                    // 兜底：如果没查到，或者查出来的都没有流程定义，直接按照没有formId走新建模式处理
+                    await loadNewFlowParamWithBizTag();
+                }
+                else if (params.length === 1) {
+                    flowFormParam.value = params[0];
+                    actualFlowKey.value = params[0].flowDefinition?.flowKey;
+                }
+                else {
+                    // 多于1个，不立即弹出选择框，先存起来，留到点击"发起工作"时再选
+                    selectableFlowParams.value = params;
+                    selectableFlows.value = params.map(p => p.flowDefinition);
+                    return;
+                }
             }
             else {
-                // 新建模式：只有 appName 和 flowKey，没有 formId
-                // 获取流程定义
-                const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName, props.flowKey);
-                // 构造部分 flowFormParam
-                flowFormParam.value = {
-                    flowDefinition: flowDefinition,
-                    // 其他字段为空
-                };
+                // 新建模式
+                await loadNewFlowParamWithBizTag();
             }
         }
         catch (e) {
@@ -189,6 +243,63 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
             error.value = e.message;
         }
     };
+    const loadNewFlowParamWithBizTag = async () => {
+        let keyToUse = props.flowKey;
+        if (!keyToUse && props.bizTag) {
+            // 根据 bizTag 查询当前生效的可用流程
+            const res = await flowDefinitionApi.getEffectiveDefinitionsByBizTag(props.appName, props.bizTag);
+            if (!res || res.length === 0) {
+                throw new Error(`未找到业务标签为 ${props.bizTag} 的生效可用流程定义`);
+            }
+            else if (res.length === 1) {
+                keyToUse = res[0].flowKey;
+            }
+            else {
+                // 弹出选择对话框的动作延迟到点击发起工作
+                selectableFlows.value = res;
+                return;
+            }
+        }
+        actualFlowKey.value = keyToUse;
+        // 获取流程定义
+        const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName, keyToUse);
+        // 构造部分 flowFormParam
+        flowFormParam.value = {
+            flowDefinition: flowDefinition,
+            // 其他字段为空
+        };
+    };
+    const handleSelectFlow = async (flow) => {
+        flowSelectionDialogVisible.value = false;
+        actualFlowKey.value = flow.flowKey;
+        try {
+            if (selectableFlowParams.value.length > 0) {
+                // 已经有完整的流程参数了，直接使用
+                const param = selectableFlowParams.value.find(p => p.flowDefinition?.flowKey === flow.flowKey);
+                if (param) {
+                    flowFormParam.value = param;
+                    // 选择了之后，直接执行原先因为需要选择而暂停的 发起/提交流程 操作
+                    await executeForward();
+                    return;
+                }
+            }
+            // 否则作为新建模式加载最新流程定义
+            const flowDefinition = await flowDefinitionApi.getEffectiveDefinition(props.appName, flow.flowKey);
+            flowFormParam.value = {
+                flowDefinition: flowDefinition,
+            };
+            // 选择了之后，直接执行原先因为需要选择而暂停的 发起/提交流程 操作
+            await executeForward();
+        }
+        catch (e) {
+            ElMessage.error(e.message || '加载流程信息失败');
+            error.value = e.message;
+        }
+    };
+    const handleCancelFlowSelection = () => {
+        flowSelectionDialogVisible.value = false;
+        // 取消选择不再关闭整个表单，只是取消本次的发起动作
+    };
     // 底部按钮处理
     const handleSave = async () => {
         saving.value = true;
@@ -198,7 +309,7 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                     taskId: flowFormParam.value?.taskInstance?.id || '',
                     processRequestType: "SAVE_FORM",
                     appName: props.appName || '',
-                    flowKey: props.flowKey || '',
+                    flowKey: actualFlowKey.value || '',
                     startNodeKey: props.startNodeKey || '',
                     forwardTo: []
                 },
@@ -209,7 +320,8 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
             saving.value = false;
         }
     };
-    const handleForward = async () => {
+    // 实际执行保存并转发的核心逻辑
+    const executeForward = async () => {
         saving.value = true;
         try {
             const p = flowFormParam.value;
@@ -218,7 +330,7 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                     taskId: p?.taskInstance?.id || '',
                     processRequestType: p?.taskInstance ? "FORWARD" : "INITIATE",
                     appName: props.appName || '',
-                    flowKey: props.flowKey || '',
+                    flowKey: actualFlowKey.value || '',
                     startNodeKey: props.startNodeKey || '',
                     forwardTo: []
                 },
@@ -230,15 +342,25 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
             saving.value = false;
         }
     };
+    const handleForward = async () => {
+        // 如果需要选择流程，并且还没有确定实际使用的 flowKey，则弹出选择对话框
+        if (selectableFlows.value.length > 1 && !actualFlowKey.value) {
+            flowSelectionDialogVisible.value = true;
+            return;
+        }
+        await executeForward();
+    };
     debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
     const __VLS_withDefaultsArg = (function (t) { return t; })({
         appName: undefined,
         flowKey: undefined,
+        bizTag: undefined,
         startNodeKey: undefined,
         taskInstanceId: undefined,
         width: undefined,
         height: undefined,
-        defaultCollapsed: false
+        defaultCollapsed: false,
+        isNewForm: false
     });
     const __VLS_fnComponent = (await import('vue')).defineComponent({
         __typeEmits: {},
@@ -264,6 +386,8 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
     /** @type {__VLS_StyleScopedClasses['side-panel-header']} */ ;
     /** @type {__VLS_StyleScopedClasses['collapse-btn']} */ ;
     /** @type {__VLS_StyleScopedClasses['comment-content']} */ ;
+    /** @type {__VLS_StyleScopedClasses['flow-selection-card']} */ ;
+    /** @type {__VLS_StyleScopedClasses['flow-selection-card']} */ ;
     // CSS variable injection 
     // CSS variable injection end 
     if (__VLS_ctx.dialogVisible) {
@@ -446,26 +570,12 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
             }
             var __VLS_23;
         }
-        else if (__VLS_ctx.flowFormParam) {
+        else {
             __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({});
             var __VLS_32 = {
                 flowParam: (__VLS_ctx.flowFormParam),
             };
         }
-        else {
-            __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
-                ...{ class: "no-form-tip" },
-            });
-            const __VLS_34 = {}.ElEmpty;
-            /** @type {[typeof __VLS_components.ElEmpty, typeof __VLS_components.elEmpty, ]} */ ;
-            // @ts-ignore
-            const __VLS_35 = __VLS_asFunctionalComponent(__VLS_34, new __VLS_34({
-                description: "暂无表单内容",
-            }));
-            const __VLS_36 = __VLS_35({
-                description: "暂无表单内容",
-            }, ...__VLS_functionalComponentArgsRest(__VLS_35));
-        }
         __VLS_asFunctionalElement(__VLS_intrinsicElements.aside, __VLS_intrinsicElements.aside)({
             ...{ class: "side-panel" },
             ...{ class: ({ 'collapsed': __VLS_ctx.sidePanelCollapsed }) },
@@ -483,59 +593,59 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
             ...{ class: "collapse-btn" },
             title: (__VLS_ctx.sidePanelCollapsed ? '展开' : '收起'),
         });
-        const __VLS_38 = {}.ElIcon;
+        const __VLS_34 = {}.ElIcon;
         /** @type {[typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ]} */ ;
         // @ts-ignore
-        const __VLS_39 = __VLS_asFunctionalComponent(__VLS_38, new __VLS_38({}));
-        const __VLS_40 = __VLS_39({}, ...__VLS_functionalComponentArgsRest(__VLS_39));
-        __VLS_41.slots.default;
+        const __VLS_35 = __VLS_asFunctionalComponent(__VLS_34, new __VLS_34({}));
+        const __VLS_36 = __VLS_35({}, ...__VLS_functionalComponentArgsRest(__VLS_35));
+        __VLS_37.slots.default;
         if (!__VLS_ctx.sidePanelCollapsed) {
-            const __VLS_42 = {}.ArrowRight;
+            const __VLS_38 = {}.ArrowRight;
             /** @type {[typeof __VLS_components.ArrowRight, ]} */ ;
             // @ts-ignore
-            const __VLS_43 = __VLS_asFunctionalComponent(__VLS_42, new __VLS_42({}));
-            const __VLS_44 = __VLS_43({}, ...__VLS_functionalComponentArgsRest(__VLS_43));
+            const __VLS_39 = __VLS_asFunctionalComponent(__VLS_38, new __VLS_38({}));
+            const __VLS_40 = __VLS_39({}, ...__VLS_functionalComponentArgsRest(__VLS_39));
         }
         else {
-            const __VLS_46 = {}.ArrowLeft;
+            const __VLS_42 = {}.ArrowLeft;
             /** @type {[typeof __VLS_components.ArrowLeft, ]} */ ;
             // @ts-ignore
-            const __VLS_47 = __VLS_asFunctionalComponent(__VLS_46, new __VLS_46({}));
-            const __VLS_48 = __VLS_47({}, ...__VLS_functionalComponentArgsRest(__VLS_47));
+            const __VLS_43 = __VLS_asFunctionalComponent(__VLS_42, new __VLS_42({}));
+            const __VLS_44 = __VLS_43({}, ...__VLS_functionalComponentArgsRest(__VLS_43));
         }
-        var __VLS_41;
+        var __VLS_37;
         __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
             ...{ class: "side-panel-content" },
         });
         __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, value: (!__VLS_ctx.sidePanelCollapsed) }, null, null);
         if (__VLS_ctx.sortedTasks.length > 0) {
-            const __VLS_50 = {}.ElTimeline;
+            const __VLS_46 = {}.ElTimeline;
             /** @type {[typeof __VLS_components.ElTimeline, typeof __VLS_components.elTimeline, typeof __VLS_components.ElTimeline, typeof __VLS_components.elTimeline, ]} */ ;
             // @ts-ignore
-            const __VLS_51 = __VLS_asFunctionalComponent(__VLS_50, new __VLS_50({}));
-            const __VLS_52 = __VLS_51({}, ...__VLS_functionalComponentArgsRest(__VLS_51));
-            __VLS_53.slots.default;
+            const __VLS_47 = __VLS_asFunctionalComponent(__VLS_46, new __VLS_46({}));
+            const __VLS_48 = __VLS_47({}, ...__VLS_functionalComponentArgsRest(__VLS_47));
+            __VLS_49.slots.default;
             for (const [task, index] of __VLS_getVForSourceType((__VLS_ctx.sortedTasks))) {
-                const __VLS_54 = {}.ElTimelineItem;
+                const __VLS_50 = {}.ElTimelineItem;
                 /** @type {[typeof __VLS_components.ElTimelineItem, typeof __VLS_components.elTimelineItem, typeof __VLS_components.ElTimelineItem, typeof __VLS_components.elTimelineItem, ]} */ ;
                 // @ts-ignore
-                const __VLS_55 = __VLS_asFunctionalComponent(__VLS_54, new __VLS_54({
+                const __VLS_51 = __VLS_asFunctionalComponent(__VLS_50, new __VLS_50({
                     key: (index),
                     timestamp: (__VLS_ctx.formatFriendlyTime(task.finishTime)),
                     placement: "top",
                 }));
-                const __VLS_56 = __VLS_55({
+                const __VLS_52 = __VLS_51({
                     key: (index),
                     timestamp: (__VLS_ctx.formatFriendlyTime(task.finishTime)),
                     placement: "top",
-                }, ...__VLS_functionalComponentArgsRest(__VLS_55));
-                __VLS_57.slots.default;
-                const __VLS_58 = {}.ElCard;
+                }, ...__VLS_functionalComponentArgsRest(__VLS_51));
+                __VLS_53.slots.default;
+                const __VLS_54 = {}.ElCard;
                 /** @type {[typeof __VLS_components.ElCard, typeof __VLS_components.elCard, typeof __VLS_components.ElCard, typeof __VLS_components.elCard, ]} */ ;
                 // @ts-ignore
-                const __VLS_59 = __VLS_asFunctionalComponent(__VLS_58, new __VLS_58({}));
-                const __VLS_60 = __VLS_59({}, ...__VLS_functionalComponentArgsRest(__VLS_59));
-                __VLS_61.slots.default;
+                const __VLS_55 = __VLS_asFunctionalComponent(__VLS_54, new __VLS_54({}));
+                const __VLS_56 = __VLS_55({}, ...__VLS_functionalComponentArgsRest(__VLS_55));
+                __VLS_57.slots.default;
                 __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
                     ...{ class: "task-info" },
                 });
@@ -546,23 +656,23 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                     ...{ class: "handler-name" },
                 });
                 (task.handlerName || '未知');
-                const __VLS_62 = {}.ElTooltip;
+                const __VLS_58 = {}.ElTooltip;
                 /** @type {[typeof __VLS_components.ElTooltip, typeof __VLS_components.elTooltip, typeof __VLS_components.ElTooltip, typeof __VLS_components.elTooltip, ]} */ ;
                 // @ts-ignore
-                const __VLS_63 = __VLS_asFunctionalComponent(__VLS_62, new __VLS_62({
+                const __VLS_59 = __VLS_asFunctionalComponent(__VLS_58, new __VLS_58({
                     content: (__VLS_ctx.formatDate(task.finishTime)),
                     placement: "top",
                 }));
-                const __VLS_64 = __VLS_63({
+                const __VLS_60 = __VLS_59({
                     content: (__VLS_ctx.formatDate(task.finishTime)),
                     placement: "top",
-                }, ...__VLS_functionalComponentArgsRest(__VLS_63));
-                __VLS_65.slots.default;
+                }, ...__VLS_functionalComponentArgsRest(__VLS_59));
+                __VLS_61.slots.default;
                 __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({
                     ...{ class: "task-status" },
                 });
                 (__VLS_ctx.getTaskStatus(task.state));
-                var __VLS_65;
+                var __VLS_61;
                 if (task.comment) {
                     __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
                         ...{ class: "task-comment" },
@@ -586,60 +696,60 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                         ...{ class: "comment-content empty" },
                     });
                 }
-                var __VLS_61;
                 var __VLS_57;
+                var __VLS_53;
             }
-            var __VLS_53;
+            var __VLS_49;
         }
         else {
             __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
                 ...{ class: "no-history-tip" },
             });
-            const __VLS_66 = {}.ElEmpty;
+            const __VLS_62 = {}.ElEmpty;
             /** @type {[typeof __VLS_components.ElEmpty, typeof __VLS_components.elEmpty, ]} */ ;
             // @ts-ignore
-            const __VLS_67 = __VLS_asFunctionalComponent(__VLS_66, new __VLS_66({
+            const __VLS_63 = __VLS_asFunctionalComponent(__VLS_62, new __VLS_62({
                 description: "暂无办理历史",
                 imageSize: (100),
             }));
-            const __VLS_68 = __VLS_67({
+            const __VLS_64 = __VLS_63({
                 description: "暂无办理历史",
                 imageSize: (100),
-            }, ...__VLS_functionalComponentArgsRest(__VLS_67));
+            }, ...__VLS_functionalComponentArgsRest(__VLS_63));
         }
         __VLS_asFunctionalElement(__VLS_intrinsicElements.footer, __VLS_intrinsicElements.footer)({
             ...{ class: "flow-shell-footer" },
         });
-        const __VLS_70 = {}.JaButton;
+        const __VLS_66 = {}.JaButton;
         /** @type {[typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, ]} */ ;
         // @ts-ignore
-        const __VLS_71 = __VLS_asFunctionalComponent(__VLS_70, new __VLS_70({
+        const __VLS_67 = __VLS_asFunctionalComponent(__VLS_66, new __VLS_66({
             ...{ 'onClick': {} },
             shortcut: "Ctrl+S",
             tooltip: "保存",
             loading: (__VLS_ctx.saving),
             disabled: (__VLS_ctx.saving),
         }));
-        const __VLS_72 = __VLS_71({
+        const __VLS_68 = __VLS_67({
             ...{ 'onClick': {} },
             shortcut: "Ctrl+S",
             tooltip: "保存",
             loading: (__VLS_ctx.saving),
             disabled: (__VLS_ctx.saving),
-        }, ...__VLS_functionalComponentArgsRest(__VLS_71));
-        let __VLS_74;
-        let __VLS_75;
-        let __VLS_76;
-        const __VLS_77 = {
+        }, ...__VLS_functionalComponentArgsRest(__VLS_67));
+        let __VLS_70;
+        let __VLS_71;
+        let __VLS_72;
+        const __VLS_73 = {
             onClick: (__VLS_ctx.handleSave)
         };
-        __VLS_73.slots.default;
-        var __VLS_73;
+        __VLS_69.slots.default;
+        var __VLS_69;
         if (__VLS_ctx.showForwardButton) {
-            const __VLS_78 = {}.JaButton;
+            const __VLS_74 = {}.JaButton;
             /** @type {[typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, ]} */ ;
             // @ts-ignore
-            const __VLS_79 = __VLS_asFunctionalComponent(__VLS_78, new __VLS_78({
+            const __VLS_75 = __VLS_asFunctionalComponent(__VLS_74, new __VLS_74({
                 ...{ 'onClick': {} },
                 type: "danger",
                 shortcut: "Ctrl+F",
@@ -647,27 +757,139 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                 loading: (__VLS_ctx.saving),
                 disabled: (__VLS_ctx.saving),
             }));
-            const __VLS_80 = __VLS_79({
+            const __VLS_76 = __VLS_75({
                 ...{ 'onClick': {} },
                 type: "danger",
                 shortcut: "Ctrl+F",
                 tooltip: ('保存并' + (__VLS_ctx.flowFormParam?.taskInstance ? '结束当前工作步骤办理' : '发起工作')),
                 loading: (__VLS_ctx.saving),
                 disabled: (__VLS_ctx.saving),
-            }, ...__VLS_functionalComponentArgsRest(__VLS_79));
-            let __VLS_82;
-            let __VLS_83;
-            let __VLS_84;
-            const __VLS_85 = {
+            }, ...__VLS_functionalComponentArgsRest(__VLS_75));
+            let __VLS_78;
+            let __VLS_79;
+            let __VLS_80;
+            const __VLS_81 = {
                 onClick: (__VLS_ctx.handleForward)
             };
-            __VLS_81.slots.default;
-            (__VLS_ctx.flowFormParam?.taskInstance ? "办理结束" : "发起工作");
-            var __VLS_81;
+            __VLS_77.slots.default;
+            (__VLS_ctx.flowFormParam?.taskInstance ? "办理结束" : "发起流程");
+            var __VLS_77;
         }
-        var __VLS_86 = {
+        var __VLS_82 = {
             flowParam: (__VLS_ctx.flowFormParam),
         };
+        const __VLS_84 = {}.ElDialog;
+        /** @type {[typeof __VLS_components.ElDialog, typeof __VLS_components.elDialog, typeof __VLS_components.ElDialog, typeof __VLS_components.elDialog, ]} */ ;
+        // @ts-ignore
+        const __VLS_85 = __VLS_asFunctionalComponent(__VLS_84, new __VLS_84({
+            modelValue: (__VLS_ctx.flowSelectionDialogVisible),
+            title: "选择流程",
+            width: "500px",
+            closeOnClickModal: (false),
+            showClose: (false),
+            alignCenter: true,
+            appendToBody: true,
+        }));
+        const __VLS_86 = __VLS_85({
+            modelValue: (__VLS_ctx.flowSelectionDialogVisible),
+            title: "选择流程",
+            width: "500px",
+            closeOnClickModal: (false),
+            showClose: (false),
+            alignCenter: true,
+            appendToBody: true,
+        }, ...__VLS_functionalComponentArgsRest(__VLS_85));
+        __VLS_87.slots.default;
+        const __VLS_88 = {}.ElScrollbar;
+        /** @type {[typeof __VLS_components.ElScrollbar, typeof __VLS_components.elScrollbar, typeof __VLS_components.ElScrollbar, typeof __VLS_components.elScrollbar, ]} */ ;
+        // @ts-ignore
+        const __VLS_89 = __VLS_asFunctionalComponent(__VLS_88, new __VLS_88({
+            maxHeight: "50vh",
+        }));
+        const __VLS_90 = __VLS_89({
+            maxHeight: "50vh",
+        }, ...__VLS_functionalComponentArgsRest(__VLS_89));
+        __VLS_91.slots.default;
+        __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+            ...{ class: "flow-selection-list" },
+        });
+        for (const [flow] of __VLS_getVForSourceType((__VLS_ctx.selectableFlows))) {
+            const __VLS_92 = {}.ElCard;
+            /** @type {[typeof __VLS_components.ElCard, typeof __VLS_components.elCard, typeof __VLS_components.ElCard, typeof __VLS_components.elCard, ]} */ ;
+            // @ts-ignore
+            const __VLS_93 = __VLS_asFunctionalComponent(__VLS_92, new __VLS_92({
+                ...{ 'onClick': {} },
+                key: (flow.flowKey),
+                ...{ class: "flow-selection-card" },
+                shadow: "hover",
+            }));
+            const __VLS_94 = __VLS_93({
+                ...{ 'onClick': {} },
+                key: (flow.flowKey),
+                ...{ class: "flow-selection-card" },
+                shadow: "hover",
+            }, ...__VLS_functionalComponentArgsRest(__VLS_93));
+            let __VLS_96;
+            let __VLS_97;
+            let __VLS_98;
+            const __VLS_99 = {
+                onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.dialogVisible))
+                        return;
+                    __VLS_ctx.handleSelectFlow(flow);
+                }
+            };
+            __VLS_95.slots.default;
+            __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+                ...{ class: "flow-card-content" },
+            });
+            __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+                ...{ class: "flow-caption" },
+            });
+            (flow.flowCaption);
+            __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+                ...{ class: "flow-key" },
+            });
+            (flow.flowKey);
+            const __VLS_100 = {}.ElIcon;
+            /** @type {[typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ]} */ ;
+            // @ts-ignore
+            const __VLS_101 = __VLS_asFunctionalComponent(__VLS_100, new __VLS_100({}));
+            const __VLS_102 = __VLS_101({}, ...__VLS_functionalComponentArgsRest(__VLS_101));
+            __VLS_103.slots.default;
+            const __VLS_104 = {}.ArrowRight;
+            /** @type {[typeof __VLS_components.ArrowRight, ]} */ ;
+            // @ts-ignore
+            const __VLS_105 = __VLS_asFunctionalComponent(__VLS_104, new __VLS_104({}));
+            const __VLS_106 = __VLS_105({}, ...__VLS_functionalComponentArgsRest(__VLS_105));
+            var __VLS_103;
+            var __VLS_95;
+        }
+        var __VLS_91;
+        {
+            const { footer: __VLS_thisSlot } = __VLS_87.slots;
+            __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({
+                ...{ class: "dialog-footer" },
+            });
+            const __VLS_108 = {}.ElButton;
+            /** @type {[typeof __VLS_components.ElButton, typeof __VLS_components.elButton, typeof __VLS_components.ElButton, typeof __VLS_components.elButton, ]} */ ;
+            // @ts-ignore
+            const __VLS_109 = __VLS_asFunctionalComponent(__VLS_108, new __VLS_108({
+                ...{ 'onClick': {} },
+            }));
+            const __VLS_110 = __VLS_109({
+                ...{ 'onClick': {} },
+            }, ...__VLS_functionalComponentArgsRest(__VLS_109));
+            let __VLS_112;
+            let __VLS_113;
+            let __VLS_114;
+            const __VLS_115 = {
+                onClick: (__VLS_ctx.handleCancelFlowSelection)
+            };
+            __VLS_111.slots.default;
+            var __VLS_111;
+        }
+        var __VLS_87;
     }
     /** @type {__VLS_StyleScopedClasses['flow-shell-wrapper']} */ ;
     /** @type {__VLS_StyleScopedClasses['flow-shell-container']} */ ;
@@ -691,7 +913,6 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
     /** @type {__VLS_StyleScopedClasses['main-content']} */ ;
     /** @type {__VLS_StyleScopedClasses['content-wrapper']} */ ;
     /** @type {__VLS_StyleScopedClasses['error-tip']} */ ;
-    /** @type {__VLS_StyleScopedClasses['no-form-tip']} */ ;
     /** @type {__VLS_StyleScopedClasses['side-panel']} */ ;
     /** @type {__VLS_StyleScopedClasses['collapsed']} */ ;
     /** @type {__VLS_StyleScopedClasses['side-panel-header']} */ ;
@@ -710,8 +931,14 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
     /** @type {__VLS_StyleScopedClasses['empty']} */ ;
     /** @type {__VLS_StyleScopedClasses['no-history-tip']} */ ;
     /** @type {__VLS_StyleScopedClasses['flow-shell-footer']} */ ;
+    /** @type {__VLS_StyleScopedClasses['flow-selection-list']} */ ;
+    /** @type {__VLS_StyleScopedClasses['flow-selection-card']} */ ;
+    /** @type {__VLS_StyleScopedClasses['flow-card-content']} */ ;
+    /** @type {__VLS_StyleScopedClasses['flow-caption']} */ ;
+    /** @type {__VLS_StyleScopedClasses['flow-key']} */ ;
+    /** @type {__VLS_StyleScopedClasses['dialog-footer']} */ ;
     // @ts-ignore
-    var __VLS_33 = __VLS_32, __VLS_87 = __VLS_86;
+    var __VLS_33 = __VLS_32, __VLS_83 = __VLS_82;
     var __VLS_dollars;
     const __VLS_self = (await import('vue')).defineComponent({
         setup() {
@@ -724,6 +951,8 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                 ElEmpty: ElEmpty,
                 ElIcon: ElIcon,
                 ElResult: ElResult,
+                ElDialog: ElDialog,
+                ElScrollbar: ElScrollbar,
                 JaButton: JaButton,
                 JaUserInfoTag: JaUserInfoTag,
                 ArrowLeft: ArrowLeft,
@@ -744,7 +973,11 @@ export default ((__VLS_props, __VLS_ctx, __VLS_expose, __VLS_setup = (async () =
                 formatFriendlyTime: formatFriendlyTime,
                 getFlowStatus: getFlowStatus,
                 getTaskStatus: getTaskStatus,
+                flowSelectionDialogVisible: flowSelectionDialogVisible,
+                selectableFlows: selectableFlows,
                 loadFlowFormParam: loadFlowFormParam,
+                handleSelectFlow: handleSelectFlow,
+                handleCancelFlowSelection: handleCancelFlowSelection,
                 handleSave: handleSave,
                 handleForward: handleForward,
             };