#12

Author: xlorne

flow-engine-framework/src/main/java/com/codingapi/flow/pojo/response/FlowContent.java

@@ -2,6 +2,7 @@
 
 import com.codingapi.flow.action.IFlowAction;
 import com.codingapi.flow.form.FormMeta;
+import com.codingapi.flow.manager.ActionManager;
 import com.codingapi.flow.manager.NodeStrategyManager;
 import com.codingapi.flow.manager.OperatorManager;
 import com.codingapi.flow.node.IFlowNode;
@@ -40,6 +41,16 @@ public class FlowContent {
      */
     private String view;
 
+    /**
+     * 审批意见是否必填
+     */
+    private boolean adviceNullable;
+
+    /**
+     * 签名是否必填
+     */
+    private boolean signable;
+
     /**
      * 表单元数据
      */
@@ -107,9 +118,13 @@ public void pushNextNodes(FlowSession flowSession, List<IFlowNode> nextNodes) {
     }
 
     public void pushCurrentNode(IFlowNode currentNode) {
-        this.actions = currentNode.actionManager().getActions();
+        ActionManager actionManager = currentNode.actionManager();
+        NodeStrategyManager strategyManager = currentNode.strategyManager();
+        this.actions = actionManager.getActions();
         Map<String,Object> nodeData = currentNode.toMap();
         this.view = (String) nodeData.get("view");
+        this.adviceNullable = strategyManager.isEnableAdvice();
+        this.signable = strategyManager.isEnableSignable();
     }
 
     public void pushWorkflow(Workflow workflow) {

flow-engine-framework/src/main/java/com/codingapi/flow/record/FlowRecord.java

@@ -16,7 +16,6 @@
 import lombok.Setter;
 import org.springframework.util.StringUtils;
 
-import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 

frontend/apps/app-pc/src/pages/todo.tsx

@@ -8,6 +8,7 @@ import {
     WorkflowSelectModal
 } from "@flow-engine/flow-design";
 import {Button, Space, Tabs, type TabsProps} from "antd";
+import dayjs from "dayjs";
 
 const TodoPage: React.FC = () => {
 
@@ -18,10 +19,12 @@ const TodoPage: React.FC = () => {
     const [selectVisible, setSelectVisible] = React.useState(false);
     const [approvalVisible, setApprovalVisible] = React.useState(false);
     const [workflowCode, setWorkflowCode] = React.useState<string>('');
+    const [currentRecordId, setCurrentRecordId] = React.useState<string>('');
+    const [currentTab, setCurrentTab] = React.useState<string>('all');
 
     const columns: TableProps<any>['columns'] = [
         {
-            dataIndex: 'id',
+            dataIndex: 'recordId',
             title: '编号',
         },
         {
@@ -31,28 +34,45 @@ const TodoPage: React.FC = () => {
         {
             dataIndex: 'readTime',
             title: '读取状态',
+            render: (text, record) => {
+                return text ? '已读' : '未读';
+            }
         },
         {
             dataIndex: 'createTime',
             title: '创建时间',
+            render: (text, record) => {
+                return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+            }
         },
         {
             dataIndex: 'currentOperatorId',
             title: '审批人',
+            hidden: true,
+        },
+        {
+            dataIndex: 'currentOperatorName',
+            title: '审批人',
         },
         {
             dataIndex: 'recordState',
             title: '状态',
+            render: (text, record) => {
+                return text ? '已办' : '待办';
+            }
         },
         {
             dataIndex: 'option',
             title: '操作',
             render: (value, record) => {
                 return (
                     <Space>
-                        <a onClick={() => {
-
-                        }}>办理</a>
+                        <a
+                            onClick={() => {
+                                setCurrentRecordId(record.recordId);
+                                setApprovalVisible(true);
+                            }}
+                        >办理</a>
                     </Space>
                 )
             }
@@ -104,21 +124,29 @@ const TodoPage: React.FC = () => {
         }
     ];
 
+    const reloadCurrentTab = () => {
+        if (currentTab === 'all') {
+            actionAll.current?.reload();
+        }
+        if (currentTab === 'done') {
+            actionDone.current?.reload();
+        }
+        if (currentTab === 'todo') {
+            actionTodo.current?.reload();
+        }
+    }
+
+    React.useEffect(() => {
+        reloadCurrentTab();
+    },[currentTab]);
+
     return (
         <div>
             <Tabs
                 items={items}
                 centered={true}
                 onChange={(currentKey) => {
-                    if (currentKey === 'all') {
-                        actionAll.current?.reload();
-                    }
-                    if (currentKey === 'done') {
-                        actionDone.current?.reload();
-                    }
-                    if (currentKey === 'todo') {
-                        actionTodo.current?.reload();
-                    }
+                   setCurrentTab(currentKey);
                 }}
                 tabBarExtraContent={{
                     right: (
@@ -147,8 +175,10 @@ const TodoPage: React.FC = () => {
             <ApprovalPanelDrawer
                 workflowCode={workflowCode}
                 open={approvalVisible}
+                recordId={currentRecordId}
                 onClose={() => {
                     setApprovalVisible(false);
+                    reloadCurrentTab();
                 }}
             />
         </div>

frontend/packages/flow-design/src/components/flow-approval/index.tsx

@@ -4,7 +4,6 @@ import {detail} from "@/api/record";
 import {FlowContent} from "@/components/flow-approval/typings";
 import {ApprovalLayout} from "@/components/flow-approval/layout";
 
-
 interface ApprovalPanelProps {
     workflowCode?: string;
     recordId?:string;

frontend/packages/flow-design/src/components/flow-approval/layout/body.tsx

@@ -3,34 +3,60 @@ import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-
 import {Col, Form, Row} from "antd";
 import {ViewPlugin} from "@/plugins/view";
 
-export const Body = () => {
-    const {state, context} = useApprovalContext();
 
+const FormViewComponent: React.FC = () => {
+    const {state, context} = useApprovalContext();
     const ViewComponent = ViewPlugin.getInstance().get(state.flow?.view || 'default');
-
+    // 是否可合并审批
+    const mergeable = state.flow?.mergeable || false;
     const todos = state.flow?.todos || [];
-    const [viewForm] = Form.useForm();
+    const viewForms = todos.map(item=>{
+        return {
+            instance:Form.useForm()[0],
+            data:item.data,
+        }
+    })
 
     React.useEffect(() => {
-        context.getPresenter().getFormActionContext().addAction({
-            save(): any {
-                return viewForm.getFieldsValue();
-            },
-            key(): string {
-                return 'view-form'
-            }
-        })
+        viewForms.forEach(item=>{
+            const formInstance = item.instance;
+            const data = item.data;
+            context.getPresenter().getFormActionContext().addAction({
+                save(): any {
+                    return formInstance.getFieldsValue();
+                },
+                key(): string {
+                    return 'view-form'
+                }
+            });
+            formInstance.setFieldsValue(data);
+        });
     }, []);
 
+    if(ViewComponent){
+        if(mergeable){
+            return (
+                <div>
+                    <h3>合并审批</h3>
+                </div>
+            )
+        }
+        return (
+            <>
+                {viewForms.map((item,index)=>(
+                    <ViewComponent key={index} form={item.instance}/>
+                ))}
+            </>
+        )
+    }
+}
+
+export const Body = () => {
     return (
         <Row>
             <Col span={18}>
                 表单详情
-
-                {ViewComponent && todos.length <= 1 && (
-                    <ViewComponent form={viewForm}/>
-                )}
-
+                <FormViewComponent/>
             </Col>
             <Col span={6}>
                 流转历史

frontend/packages/flow-design/src/components/flow-approval/layout/header.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import {useApprovalContext} from "@/components/flow-approval/hooks/use-approval-context";
 import {Button, Flex, message} from "antd";
-import {create} from "@/api/record";
 
 export const Header = () => {
     const {state, context} = useApprovalContext()
 
     const actions = state.flow?.actions || [];
 
-    const formActionContext = context.getPresenter().getFormActionContext();
+    const actionPresenter = context.getPresenter().getFlowActionPresenter();
 
     return (
         <Flex
@@ -18,24 +17,21 @@ export const Header = () => {
             {actions.map(item => {
                 return (
                     <Button
-                        onClick={()=>{
+                        onClick={() => {
                             const actionId = item.id;
-                            const formData = formActionContext.save();
-                            const body = {
-                                formData,
-                                actionId,
-                                workId: state.flow?.workId,
-                            }
-                            create(body).then((res)=>{
-                                message.success("流程已经创建")
-                            })
+                            actionPresenter.action(actionId).then(() => {
+                                message.success("操作成功");
+                                context.close();
+                            });
                         }}
                     >{item.title}</Button>
                 )
             })}
-            <Button onClick={() => {
-                context.close();
-            }}>关闭</Button>
+            <Button
+                onClick={() => {
+                    context.close();
+                }}
+            >关闭</Button>
         </Flex>
     )
 }

frontend/packages/flow-design/src/components/flow-approval/model.ts

@@ -1,5 +1,17 @@
 import {FlowApprovalApi} from "@/components/flow-approval/typings";
+import {action as actionRecord, create as createRecord} from "@/api/record";
 
 export class FlowApprovalApiImpl implements FlowApprovalApi {
 
+    create = async (body: Record<string, any>)=> {
+        const response = await createRecord(body);
+        if(response.success){
+            return response.data;
+        }
+    }
+
+    action =async (body: Record<string, any>)=> {
+        return await actionRecord(body);
+    }
+
 }

frontend/packages/flow-design/src/components/flow-approval/presenters/action.ts

@@ -0,0 +1,54 @@
+import {FlowApprovalApi, State} from "@/components/flow-approval/typings";
+import {FormActionContext} from "@/components/flow-approval/presenters/form";
+
+export class FlowActionPresenter {
+
+    private readonly api: FlowApprovalApi;
+    private readonly formActionContext:FormActionContext;
+    private state: State;
+
+    constructor(state: State,
+                api: FlowApprovalApi,
+                formActionContext:FormActionContext) {
+        this.state = state;
+        this.api = api;
+        this.formActionContext = formActionContext;
+    }
+
+    public syncState(state: State) {
+        this.state = state;
+    }
+
+
+    public async action(actionId:string) {
+        const recordId = this.state.flow?.recordId;
+        const workId = this.state.flow?.workId;
+        const formData = this.formActionContext.save();
+        if(recordId){
+            const request = {
+                formData,
+                recordId,
+                advice:{
+                    actionId,
+                }
+            }
+            await this.api.action(request);
+        }else {
+            const createRequest = {
+                workId,
+                formData,
+                actionId,
+            }
+            const recordId = await this.api.create(createRequest);
+            const actionRequest = {
+                formData,
+                recordId,
+                advice:{
+                    actionId,
+                }
+            }
+            await this.api.action(actionRequest);
+        }
+    }
+
+}