add custom event

xlorne · xlorne · commit 438e82ffb15d · 2024-11-29T20:18:05.000+08:00
diff --git a/admin-ui/src/components/Flow/flow/FlowDetail.tsx b/admin-ui/src/components/Flow/flow/FlowDetail.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import { Divider, Result } from "antd";
 import { ProForm, ProFormTextArea } from "@ant-design/pro-components";
-import { FlowFormView, FlowFormViewProps } from "@/components/Flow/flow/types";
+import {CustomButtonType, FlowFormView, FlowFormViewProps} from "@/components/Flow/flow/types";
 import { FlowData } from "@/components/Flow/flow/data";
+import {useDispatch, useSelector} from "react-redux";
+import {clearTriggerClick, FlowReduxState} from "@/components/Flow/store/FlowSlice";
 
 interface FlowDetailProps {
     view: React.ComponentType<FlowFormViewProps> | FlowFormView;
@@ -11,24 +13,41 @@ interface FlowDetailProps {
     adviceForm: any;
     review?: boolean;
     flowData: FlowData;
+    // 流程交互操作
+    handlerClick: (data: {
+        type: CustomButtonType;
+        id?: string;
+    }) => void;
 }
 
 const FlowDetail: React.FC<FlowDetailProps> = (props) => {
     const flowData = props.flowData;
 
     const FlowFormView = flowData.getFlowFormView(props.view) as React.ComponentType<FlowFormViewProps>;
 
+    // 触发点击事件
+    const triggerClickVisible = useSelector((state: FlowReduxState) => state.flow.triggerClickVisible);
+
+    // flow store redux
+    const dispatch = useDispatch();
+
     return (
         <>
             <div className="flowApprovalViewBox">
                 {FlowFormView && (
                     <div className="flowViewDetail" style={{ height: !FlowFormView || flowData.isStartFlow() ? '85vh' : '68vh' }}>
                         <FlowFormView
+                            handlerClick={props.handlerClick}
                             data={flowData.getFlowData()}
                             form={props.form}
+                            flowData={flowData}
                             visible={props.visible}
                             editable={!flowData.isDone() && flowData.getFlowNodeEditable()}
                             compare={!flowData.isStartFlow()}
+                            triggerClickVisible={triggerClickVisible}
+                            clearTriggerClick={() => {
+                                dispatch(clearTriggerClick());
+                            }}
                         />
                     </div>
                 )}
diff --git a/admin-ui/src/components/Flow/flow/FlowTabs.tsx b/admin-ui/src/components/Flow/flow/FlowTabs.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {FlowData} from "@/components/Flow/flow/data";
 import {Skeleton, Tabs} from "antd";
-import {FlowFormView, FlowFormViewProps} from "@/components/Flow/flow/types";
+import {CustomButtonType, FlowFormView, FlowFormViewProps} from "@/components/Flow/flow/types";
 import {FormInstance} from "antd/es/form/hooks/useForm";
 import FlowHistory from "@/components/Flow/flow/FlowHistory";
 import FlowChart from "@/components/Flow/flow/FlowChart";
@@ -16,6 +16,12 @@ interface FlowTabsProps {
     adviceForm: FormInstance<any>;
     // 预览模式
     review?: boolean;
+
+    // 流程交互操作
+    handlerClick: (data: {
+        type: CustomButtonType;
+        id?: string;
+    }) => void;
 }
 
 const FlowTabs: React.FC<FlowTabsProps> = (props) => {
@@ -66,6 +72,7 @@ const FlowTabs: React.FC<FlowTabsProps> = (props) => {
             label: '流程详情',
             children: (
                 <FlowDetail
+                    handlerClick={props.handlerClick}
                     flowData={flowData}
                     adviceForm={props.adviceForm}
                     form={props.form}
diff --git a/admin-ui/src/components/Flow/flow/events.tsx b/admin-ui/src/components/Flow/flow/events.tsx
@@ -5,11 +5,14 @@ import {custom, postponed, recall, saveFlow, startFlow, submitFlow, transfer, tr
 import {message} from "antd";
 import {useDispatch, useSelector} from "react-redux";
 import {
-    clearUserSelect, closeUserSelect,
+    clearTriggerClick,
+    clearUserSelect,
+    closeUserSelect,
     FlowReduxState,
     setUserSelectModal,
     showPostponed,
-    showResult
+    showResult,
+    triggerClick
 } from "@/components/Flow/store/FlowSlice";
 import {FlowUser} from "@/components/Flow/flow/types";
 
@@ -28,6 +31,8 @@ export const registerEvents = (id: string,
 
     const selectUserType = useSelector((state: FlowReduxState) => state.flow.userSelectType);
 
+    const triggerClickVisible = useSelector((state: FlowReduxState) => state.flow.triggerClickVisible);
+
     const dispatch = useDispatch();
 
     let recordId = id;
@@ -126,7 +131,7 @@ export const registerEvents = (id: string,
     }
 
     // 提交流程
-    const handleSubmitFlow = (flowState: boolean, callback: (res: any) => void,operatorIds?:any[]) => {
+    const handleSubmitFlow = (flowState: boolean, callback: (res: any) => void, operatorIds?: any[]) => {
         const advice = adviceForm.getFieldValue('advice');
         setRequestLoading(true);
 
@@ -135,7 +140,7 @@ export const registerEvents = (id: string,
             const body = {
                 recordId,
                 advice: advice,
-                operatorIds:operatorIds,
+                operatorIds: operatorIds,
                 success: flowState,
                 formData: {
                     ...flowData,
@@ -292,22 +297,25 @@ export const registerEvents = (id: string,
             handlerTransferFlow(currentUser);
         }
 
-        if(selectUserType === 'nextNodeUser' && selectUsers && selectUsers.length > 0){
-            handleSubmitFlow(true,(res)=>{
+        if (selectUserType === 'nextNodeUser' && selectUsers && selectUsers.length > 0) {
+            handleSubmitFlow(true, (res) => {
                 const flowSubmitResultBuilder = new FlowSubmitResultBuilder(res.data);
                 dispatch(closeUserSelect());
                 dispatch(showResult({
                     closeFlow: true,
                     result: flowSubmitResultBuilder.builder()
                 }));
-            },selectUsers.map((item:FlowUser)=> {
+            }, selectUsers.map((item: FlowUser) => {
                 return item.id;
             }));
         }
     }, [selectUsers]);
 
 
-    return (button: any) => {
+    return (button: {
+        type: string,
+        id?: string
+    }) => {
         switch (button.type) {
             case 'SAVE': {
                 // 保存流程，如果没有创建流程先创建，若已经创建则保存
@@ -336,16 +344,16 @@ export const registerEvents = (id: string,
                         });
                         const approvalType = res.data.flowNode.approvalType;
                         dispatch(setUserSelectModal({
-                            mode: approvalType==='SIGN'?'single':'multiple',
+                            mode: approvalType === 'SIGN' ? 'single' : 'multiple',
                             type: 'nextNodeUser',
                             visible: true,
                             specifyUserIds: userIds
                         }));
                     });
                 }
-                if(recordId){
+                if (recordId) {
                     _trySubmitFlow();
-                }else{
+                } else {
                     handlerStartFlow((id) => {
                         recordId = id;
                         _trySubmitFlow();
@@ -415,13 +423,24 @@ export const registerEvents = (id: string,
                 break;
             }
             case 'CUSTOM': {
-                if (recordId) {
-                    handleCustomFlow(button.id);
+                if (button.id) {
+                    const buttonId = button.id;
+                    if (recordId) {
+                        handleCustomFlow(buttonId);
+                    } else {
+                        handlerStartFlow((id) => {
+                            recordId = id;
+                            handleCustomFlow(buttonId);
+                        });
+                    }
+                }
+                break;
+            }
+            case 'VIEW': {
+                if (triggerClickVisible) {
+                    dispatch(clearTriggerClick());
                 } else {
-                    handlerStartFlow((id) => {
-                        recordId = id;
-                        handleCustomFlow(button.id);
-                    });
+                    dispatch(triggerClick());
                 }
                 break;
             }
diff --git a/admin-ui/src/components/Flow/flow/index.tsx b/admin-ui/src/components/Flow/flow/index.tsx
@@ -169,6 +169,7 @@ const $FlowView: React.FC<FlowViewProps> = (props) => {
             }
         >
             <FlowTabs
+                handlerClick={handlerClicks}
                 flowData={new FlowData(data, props.formParams)}
                 view={props.view}
                 visible={props.visible}
diff --git a/admin-ui/src/components/Flow/flow/types.ts b/admin-ui/src/components/Flow/flow/types.ts
@@ -1,5 +1,9 @@
 import React from "react";
-import { FormInstance } from "antd/es/form/hooks/useForm";
+import {FormInstance} from "antd/es/form/hooks/useForm";
+import {FlowData} from "@/components/Flow/flow/data";
+
+// 自定义按钮类型
+export type CustomButtonType = 'SAVE' | 'START' | 'SUBMIT' | 'TRY_SUBMIT' | 'SPECIFY_SUBMIT' | 'REJECT' | 'TRANSFER' | 'RECALL' | 'POSTPONED' | 'URGE' | 'CUSTOM' | 'VIEW';
 
 // 表单视图属性
 export interface FlowFormViewProps {
@@ -15,9 +19,21 @@ export interface FlowFormViewProps {
     compare: boolean;
     // 审批意见
     opinions?: any;
+    // 流程详情数据信息
+    flowData?: FlowData;
+    // 流程交互操作
+    handlerClick?: (item: {
+        type: CustomButtonType;
+        id?: string;
+    }) => void;
+
+    // 自定义前端点击事件触发
+    triggerClickVisible?: boolean;
+
+    // 关闭自定义前端点击事件触发
+    clearTriggerClick?: () => void;
 }
 
-
 // 表单视图
 export interface FlowFormView {
     [key: string]: React.ComponentType<FlowFormViewProps>;
@@ -44,7 +60,7 @@ export const ResultFormViewKey = 'ResultFormView';
 
 export interface FlowResultMessage {
     title: string,
-    resultState:string,
+    resultState: string,
     items: FlowResultItem[]
 }
 
diff --git a/admin-ui/src/components/Flow/panel/ButtonPanel.tsx b/admin-ui/src/components/Flow/panel/ButtonPanel.tsx
@@ -14,6 +14,7 @@ import {Button, ColorPicker, Popconfirm, Space} from "antd";
 import FlowUtils from "@/components/Flow/utils";
 import ScriptModal from "@/components/Flow/panel/ScriptModal";
 import {EyeOutlined, ReloadOutlined} from "@ant-design/icons";
+import {CustomButtonType} from "@/components/Flow/flow/types";
 
 interface ButtonPanelProps {
     id: string;
@@ -61,10 +62,17 @@ const buttonEventOptions = [
         value: "URGE"
     },
     {
-        label: "自定义",
+        label: "自定义接口",
         value: "CUSTOM"
     },
-]
+    {
+        label: "自定义事件",
+        value: "VIEW"
+    },
+] as {
+    label: string;
+    value: CustomButtonType;
+}[];
 
 
 const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
@@ -224,7 +232,7 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
                         </Space>
                     )}
                     normalize={(value) => {
-                        if(value) {
+                        if (value) {
                             return {
                                 background: value.toHexString()
                             };
diff --git a/admin-ui/src/components/Flow/store/FlowSlice.ts b/admin-ui/src/components/Flow/store/FlowSlice.ts
@@ -24,6 +24,9 @@ export interface FlowStore {
     currentUsers: FlowUser[];
     // 指定人员
     specifyUserIds: number[];
+
+    // 自定义前端点击事件触发
+    triggerClickVisible: boolean;
 }
 
 export type FlowStoreAction = {
@@ -46,6 +49,9 @@ export type FlowStoreAction = {
     setSelectUsers: (state: FlowStore, action: PayloadAction<FlowUser[]>) => void;
     closeUserSelect: (state: FlowStore) => void;
     clearUserSelect: (state: FlowStore) => void;
+
+    triggerClick: (state: FlowStore) => void;
+    clearTriggerClick: (state: FlowStore) => void;
 }
 
 export const flowSlice = createSlice<FlowStore, FlowStoreAction, "flow", {}>({
@@ -61,6 +67,7 @@ export const flowSlice = createSlice<FlowStore, FlowStoreAction, "flow", {}>({
         resultCloseFlow: false,
         currentUsers: [],
         specifyUserIds: [],
+        triggerClickVisible: false
     },
     reducers: {
         showPostponed: (state) => {
@@ -108,6 +115,14 @@ export const flowSlice = createSlice<FlowStore, FlowStoreAction, "flow", {}>({
             state.currentUsers = [];
             state.specifyUserIds = [];
             state.userSelectType = null;
+        },
+
+        triggerClick: (state) => {
+            state.triggerClickVisible = true;
+        },
+
+        clearTriggerClick: (state) => {
+            state.triggerClickVisible = false;
         }
     },
 });
@@ -122,7 +137,9 @@ export const {
     clearUserSelect,
     setUserSelectModal,
     closeUserSelect,
-    setSelectUsers
+    setSelectUsers,
+    triggerClick,
+    clearTriggerClick
 } = flowSlice.actions;
 export const flowStore = configureStore({
     reducer: {
diff --git a/admin-ui/src/pages/flow/leave/LeaveForm.tsx b/admin-ui/src/pages/flow/leave/LeaveForm.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect} from "react";
 import {ProForm, ProFormDigit, ProFormText, ProFormTextArea} from "@ant-design/pro-components";
 import {FlowFormViewProps} from "@/components/Flow/flow/types";
+import {Button} from "antd";
 
 
 const LeaveForm: React.FC<FlowFormViewProps> = (props) => {
@@ -9,6 +10,8 @@ const LeaveForm: React.FC<FlowFormViewProps> = (props) => {
         props.form.setFieldsValue(props.data);
     }, []);
 
+    const triggerClickVisible = props.triggerClickVisible;
+
 
     return (
         <ProForm
@@ -50,6 +53,15 @@ const LeaveForm: React.FC<FlowFormViewProps> = (props) => {
                     }
                 ]}
             />
+
+            {triggerClickVisible && (
+                <Button
+                    onClick={()=>{
+                        props.clearTriggerClick && props.clearTriggerClick();
+                    }}
+                >点击了自定义事件</Button>
+            )}
+
         </ProForm>
     )
 }
diff --git a/springboot-starter-flow/src/main/java/com/codingapi/springboot/flow/em/FlowButtonType.java b/springboot-starter-flow/src/main/java/com/codingapi/springboot/flow/em/FlowButtonType.java
@@ -24,4 +24,6 @@ public enum FlowButtonType {
     URGE,
     // 自定义
     CUSTOM,
+    // 前端
+    VIEW,
 }

Original file line number	Diff line number	Diff line change
`@@ -169,6 +169,7 @@ const $FlowView: React.FC<FlowViewProps> = (props) => {`
`169`	`169`	`}`
`170`	`170`	`>`
`171`	`171`	`<FlowTabs`
	`172`	`+ handlerClick={handlerClicks}`
`172`	`173`	`flowData={new FlowData(data, props.formParams)}`
`173`	`174`	`view={props.view}`
`174`	`175`	`visible={props.visible}`
Original file line number	Diff line number	Diff line change
`@@ -24,4 +24,6 @@ public enum FlowButtonType {`
`24`	`24`	`URGE,`
`25`	`25`	`// 自定义`
`26`	`26`	`CUSTOM,`
	`27`	`+ // 前端`
	`28`	`+ VIEW,`
`27`	`29`	`}`