Dev

flow-engine-framework/src/main/java/com/codingapi/flow/manager/FlowNodeState.java

@@ -66,9 +66,10 @@ public String getName() {
     }
 
     public List<IFlowNode> getFirstBlocks() {
-        List<IFlowNode> blocks = this.node.blocks().stream().sorted(Comparator.comparingInt(IFlowNode::getOrder)).toList();
-        if (!blocks.isEmpty()) {
-            return Stream.of(blocks.get(0)).toList();
+        List<IFlowNode> blocks = this.node.blocks();
+        if (blocks!=null && !blocks.isEmpty()) {
+            List<IFlowNode> sortList = blocks.stream().sorted(Comparator.comparingInt(IFlowNode::getOrder)).toList();
+            return Stream.of(sortList.get(0)).toList();
         }
         return new ArrayList<>();
     }

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action-button.tsx

@@ -0,0 +1,50 @@
+import {Button} from "antd";
+import React from "react";
+import {DisplayStyle, FlowActionDisplay} from "@flow-engine/flow-types";
+import {Icon} from "@flow-engine/flow-pc-ui";
+
+interface ActionButtonProps {
+    onClick: () => void;
+    title: string;
+    display: FlowActionDisplay;
+}
+
+export const ActionButton: React.FC<ActionButtonProps> = (props) => {
+
+    const display = props.display;
+    const title = display.title || props.title;
+
+    const style = React.useMemo(() => {
+        if (display) {
+            const data = JSON.parse(display.style) as DisplayStyle | undefined;
+            if (data) {
+                let style = {}
+                if (data.backgroundColor) {
+                    style = Object.assign(data, {backgroundColor: `#${data.backgroundColor}`});
+                }
+                if (data.borderColor) {
+                    style = Object.assign(data, {borderColor: `#${data.borderColor}`});
+                }
+                if (data.borderRadius) {
+                    style = Object.assign(data, {borderRadius: Number.parseInt(data.borderRadius)});
+                }
+                if (data.borderSize) {
+                    style = Object.assign(data, {borderWidth: Number.parseInt(data.borderSize)});
+                }
+                return style;
+            }
+        }
+        return {}
+    }, [display]);
+
+
+    return (
+        <Button
+            onClick={props.onClick}
+            style={style}
+            icon={<Icon type={display.icon} />}
+        >
+            {title}
+        </Button>
+    )
+}

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action/add-audit.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import {FlowActionProps} from "./type";
-import {Button, Form, message, Modal} from "antd";
+import {Form, message, Modal} from "antd";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
 import {AddAuditView} from "@/components/flow-approval/plugins/view/add-audit-view";
+import {ActionButton} from "@/components/flow-approval/components/action-button";
 
 /**
  * 加签
@@ -30,14 +31,14 @@ export const AddAuditAction: React.FC<FlowActionProps> = (props) => {
     }
     return (
         <>
-            <Button
+            <ActionButton
+                display={props.action.display}
                 onClick={() => {
                     form.resetFields();
                     setModalVisible(true);
                 }}
-            >
-                {action.title}
-            </Button>
+                title={action.title}
+            />
 
             <Modal
                 title={"加签审批"}

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action/custom.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import {FlowActionProps} from "./type";
-import {Button, message} from "antd";
+import {message} from "antd";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
 import {GroovyScriptConvertorUtil} from "@flow-engine/flow-core";
 import {ActionFactory} from "@/components/flow-approval/components/action/factory";
+import {ActionButton} from "@/components/flow-approval/components/action-button";
 
 /**
  * 自定义
@@ -31,7 +32,8 @@ export const CustomAction: React.FC<FlowActionProps> = (props) => {
     }
 
     return (
-        <Button
+        <ActionButton
+            display={props.action.display}
             onClick={() => {
                 actionPresenter.action(action.id).then((res) => {
                     if (res.success) {
@@ -40,8 +42,7 @@ export const CustomAction: React.FC<FlowActionProps> = (props) => {
                     }
                 });
             }}
-        >
-            {action.title}
-        </Button>
+            title={action.title}
+        />
     )
 }

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action/delegate.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import {FlowActionProps} from "./type";
-import {Button, Form, message, Modal} from "antd";
+import {Form, message, Modal} from "antd";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
 import {DelegateView} from "@/components/flow-approval/plugins/view/delegate-view";
+import {ActionButton} from "@/components/flow-approval/components/action-button";
 
 /**
  * 委派
@@ -30,14 +31,14 @@ export const DelegateAction: React.FC<FlowActionProps> = (props) => {
     }
     return (
         <>
-            <Button
+            <ActionButton
+                display={props.action.display}
                 onClick={() => {
                     form.resetFields();
                     setModalVisible(true);
                 }}
-            >
-                {action.title}
-            </Button>
+                title={action.title}
+            />
 
             <Modal
                 title={"委派审批"}

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action/pass.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import {FlowActionProps} from "./type";
-import {Button, Form, Input, message, Modal} from "antd";
+import {Form, Input, message, Modal} from "antd";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
 import {SignKeyView} from "@/components/flow-approval/plugins/view/sign-key-view";
+import {ActionButton} from "@/components/flow-approval/components/action-button";
 
 const {TextArea} = Input;
 
@@ -44,7 +45,8 @@ export const PassAction: React.FC<FlowActionProps> = (props) => {
 
     return (
         <>
-            <Button
+            <ActionButton
+                display={props.action.display}
                 onClick={() => {
                     if (isStartNode) {
                         handleSubmit();
@@ -53,9 +55,8 @@ export const PassAction: React.FC<FlowActionProps> = (props) => {
                         setModalVisible(true);
                     }
                 }}
-            >
-                {action.title}
-            </Button>
+                title={action.title}
+            />
 
             <Modal
                 title={"审批通过"}
@@ -85,7 +86,6 @@ export const PassAction: React.FC<FlowActionProps> = (props) => {
                     </Form.Item>
 
 
-
                     {state.flow?.signRequired && currentOperator && (
                         <Form.Item
                             name={"signKey"}

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action/reject.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import {FlowActionProps} from "./type";
-import {Button, Form, message, Modal,Input} from "antd";
+import {Form, Input, message, Modal} from "antd";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
+import {ActionButton} from "@/components/flow-approval/components/action-button";
 
 const {TextArea} = Input;
 
@@ -13,7 +14,7 @@ const {TextArea} = Input;
 export const RejectAction: React.FC<FlowActionProps> = (props) => {
 
     const action = props.action;
-    const {state,context} = useApprovalContext()
+    const {state, context} = useApprovalContext()
     const actionPresenter = context.getPresenter().getFlowActionPresenter();
     const [modalVisible, setModalVisible] = React.useState(false);
     const [form] = Form.useForm();
@@ -37,14 +38,14 @@ export const RejectAction: React.FC<FlowActionProps> = (props) => {
 
     return (
         <>
-            <Button
+            <ActionButton
+                display={props.action.display}
                 onClick={() => {
                     form.resetFields();
                     setModalVisible(true);
                 }}
-            >
-                {action.title}
-            </Button>
+                title={action.title}
+            />
 
             <Modal
                 title={"审批拒绝"}

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action/return.tsx

@@ -3,6 +3,7 @@ import {FlowActionProps} from "./type";
 import {Button, Form, message, Modal} from "antd";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
 import {ReturnView} from "@/components/flow-approval/plugins/view/return-view";
+import {ActionButton} from "@/components/flow-approval/components/action-button";
 
 /**
  * 退回
@@ -30,14 +31,14 @@ export const ReturnAction: React.FC<FlowActionProps> = (props) => {
     }
     return (
         <>
-            <Button
+            <ActionButton
+                display={props.action.display}
                 onClick={() => {
                     form.resetFields();
                     setModalVisible(true);
                 }}
-            >
-                {action.title}
-            </Button>
+                title={action.title}
+            />
 
             <Modal
                 title={"退回审批"}

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action/save.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import {FlowActionProps} from "./type";
-import {Button, message} from "antd";
+import {message} from "antd";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
+import {ActionButton} from "@/components/flow-approval/components/action-button";
 
 /**
  * 保存
@@ -15,16 +16,16 @@ export const SaveAction: React.FC<FlowActionProps> = (props) => {
     const actionPresenter = context.getPresenter().getFlowActionPresenter();
 
     return (
-        <Button
+        <ActionButton
+            display={props.action.display}
             onClick={() => {
                 actionPresenter.action(action.id).then((res) => {
                     if (res.success) {
                         message.success("流程数据已保存");
                     }
                 });
             }}
-        >
-            {action.title}
-        </Button>
+            title={action.title}
+        />
     )
 }

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/action/transfer.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import {FlowActionProps} from "./type";
-import {Button, Form, message, Modal} from "antd";
+import {Form, message, Modal} from "antd";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
 import {TransferView} from "@/components/flow-approval/plugins/view/transfer-view";
+import {ActionButton} from "@/components/flow-approval/components/action-button";
 
 /**
  * 转办
@@ -30,14 +31,14 @@ export const TransferAction: React.FC<FlowActionProps> = (props) => {
     }
     return (
         <>
-            <Button
+            <ActionButton
+                display={props.action.display}
                 onClick={() => {
                     form.resetFields();
                     setModalVisible(true);
                 }}
-            >
-                {action.title}
-            </Button>
+                title={action.title}
+            />
 
             <Modal
                 title={"转办审批"}