Merge pull request #83 from codingapi/dev

Dev

Author: xlorne

admin-ui/src/components/Flow/flow/FlowChart.tsx

@@ -9,15 +9,17 @@ import Circulate from "@/components/Flow/nodes/Circulate";
 import '@logicflow/core/es/index.css';
 import '@logicflow/extension/lib/style/index.css';
 import "./FlowChart.scss";
+import {EdgeType} from "@/components/Flow/flow/types";
 
 interface FlowChartProps {
-    flowData: FlowData
+    flowData: FlowData;
+    edgeType?: EdgeType;
 }
 
 const FlowChart: React.FC<FlowChartProps> = (props) => {
 
     const flowData = props.flowData;
-
+    const edgeType = props.edgeType || 'polyline';
     const container = useRef<HTMLDivElement>(null);
     const lfRef = useRef<LogicFlow>(null);
 
@@ -40,14 +42,22 @@ const FlowChart: React.FC<FlowChartProps> = (props) => {
             },
             plugins: [Menu, DndPanel, MiniMap, Snapshot],
             grid: false,
-            edgeType: 'bezier',
+            edgeType: edgeType,
         });
 
         lfRef.current.setTheme({
             bezier: {
                 stroke: '#8f94e3',
                 strokeWidth: 1,
             },
+            polyline: {
+                stroke: '#8f94e3',
+                strokeWidth: 1,
+            },
+            line: {
+                stroke: '#8f94e3',
+                strokeWidth: 1,
+            },
         });
         lfRef.current.register(Start);
         lfRef.current.register(Node);

admin-ui/src/components/Flow/flow/FlowDetail.tsx

@@ -1,18 +1,22 @@
-import React from "react";
-import { Divider, Result } from "antd";
-import { ProForm, ProFormTextArea } from "@ant-design/pro-components";
+import React, {useEffect} from "react";
+import {Divider, Result} from "antd";
+import {ProForm, ProFormTextArea} from "@ant-design/pro-components";
 import {CustomButtonType, FlowFormView, FlowFormViewProps} from "@/components/Flow/flow/types";
-import { FlowData } from "@/components/Flow/flow/data";
+import {FlowData} from "@/components/Flow/flow/data";
 import {useDispatch, useSelector} from "react-redux";
-import {clearTriggerClick, FlowReduxState} from "@/components/Flow/store/FlowSlice";
+import {FlowReduxState, hideOpinionEditor, showOpinionEditor} from "@/components/Flow/store/FlowSlice";
+import {FormInstance} from "antd/es/form/hooks/useForm";
 
 interface FlowDetailProps {
     view: React.ComponentType<FlowFormViewProps> | FlowFormView;
-    visible: boolean;
-    form: any;
-    adviceForm: any;
+    form: FormInstance<any>;
+    adviceForm: FormInstance<any>;
     review?: boolean;
     flowData: FlowData;
+    // 请求数据加载
+    requestLoading: boolean;
+    // 设置请求数据加载状态
+    setRequestLoading: (loading: boolean) => void;
     // 流程交互操作
     handlerClick: (data: {
         type: CustomButtonType;
@@ -25,28 +29,51 @@ const FlowDetail: React.FC<FlowDetailProps> = (props) => {
 
     const FlowFormView = flowData.getFlowFormView(props.view) as React.ComponentType<FlowFormViewProps>;
 
-    // 触发点击事件
-    const triggerClickVisible = useSelector((state: FlowReduxState) => state.flow.triggerClickVisible);
+    // 触发点击事件Key
+    const eventKey = useSelector((state: FlowReduxState) => state.flow.eventKey);
+
+    // 审批意见输入框
+    const opinionEditorVisible = useSelector((state: FlowReduxState) => state.flow.opinionEditorVisible);
+
+    // 流程视图内容
+    const flowViewVisible = useSelector((state: FlowReduxState) => state.flow.flowViewVisible);
 
     // flow store redux
     const dispatch = useDispatch();
 
+    useEffect(() => {
+        if (flowViewVisible) {
+            const advice = flowData.getOpinionAdvice();
+            props.adviceForm.setFieldsValue({
+                advice: advice
+            });
+        }
+    }, [flowViewVisible]);
+
     return (
         <>
             <div className="flowApprovalViewBox">
                 {FlowFormView && (
-                    <div className="flowViewDetail" style={{ height: !FlowFormView || flowData.isStartFlow() ? '85vh' : '68vh' }}>
+                    <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}
+                            visible={flowViewVisible}
+                            opinions={flowData.getOpinions()}
                             editable={!flowData.isDone() && flowData.getFlowNodeEditable()}
                             compare={!flowData.isStartFlow()}
-                            triggerClickVisible={triggerClickVisible}
-                            clearTriggerClick={() => {
-                                dispatch(clearTriggerClick());
+                            eventKey={eventKey}
+                            requestLoading={props.requestLoading}
+                            setRequestLoading={props.setRequestLoading}
+                            opinionEditorVisible={(visible) => {
+                                if (visible) {
+                                    dispatch(showOpinionEditor());
+                                } else {
+                                    dispatch(hideOpinionEditor());
+                                }
                             }}
                         />
                     </div>
@@ -61,7 +88,7 @@ const FlowDetail: React.FC<FlowDetailProps> = (props) => {
                 )}
 
                 {/*仅当非发起流程时再展示审批意见框*/}
-                {FlowFormView && flowData.showOpinion() && (
+                {FlowFormView && opinionEditorVisible && (
                     <div className="opinionForm">
                         <div>
                             <Divider>
@@ -74,7 +101,6 @@ const FlowDetail: React.FC<FlowDetailProps> = (props) => {
                             >
                                 <ProFormTextArea
                                     disabled={props.review}
-                                    label={""}
                                     placeholder={'请输入审批意见'}
                                     name={"advice"}
                                 />

admin-ui/src/components/Flow/flow/FlowTabs.tsx

@@ -6,16 +6,21 @@ import {FormInstance} from "antd/es/form/hooks/useForm";
 import FlowHistory from "@/components/Flow/flow/FlowHistory";
 import FlowChart from "@/components/Flow/flow/FlowChart";
 import FlowDetail from "@/components/Flow/flow/FlowDetail";
+import {useSelector} from "react-redux";
+import {FlowReduxState} from "@/components/Flow/store/FlowSlice";
 
 
 interface FlowTabsProps {
     flowData: FlowData;
     view: React.ComponentType<FlowFormViewProps> | FlowFormView;
-    visible: boolean;
     form: FormInstance<any>;
     adviceForm: FormInstance<any>;
     // 预览模式
     review?: boolean;
+    // 请求数据加载
+    requestLoading: boolean;
+    // 设置请求数据加载状态
+    setRequestLoading: (loading: boolean) => void;
 
     // 流程交互操作
     handlerClick: (data: {
@@ -76,7 +81,8 @@ const FlowTabs: React.FC<FlowTabsProps> = (props) => {
                     flowData={flowData}
                     adviceForm={props.adviceForm}
                     form={props.form}
-                    visible={props.visible}
+                    requestLoading={props.requestLoading}
+                    setRequestLoading={props.setRequestLoading}
                     view={props.view}/>
             ),
         },

admin-ui/src/components/Flow/flow/FlowTitle.tsx

@@ -2,9 +2,10 @@ import React from "react";
 import {Button, Space} from "antd";
 import {FlowData} from "@/components/Flow/flow/data";
 import FlowButtons from "@/components/Flow/flow/FlowButtons";
+import {useDispatch} from "react-redux";
+import {hideFlowView} from "@/components/Flow/store/FlowSlice";
 
 interface FlowTitleProps {
-    setVisible: (visible: boolean) => void;
     flowData: FlowData;
     requestLoading: boolean;
     setRequestLoading: (loading: boolean) => void;
@@ -17,6 +18,9 @@ const FlowTitle: React.FC<FlowTitleProps> = (props) => {
 
     const title = flowData.getCurrentNodeTitle();
 
+    // flow store redux
+    const dispatch = useDispatch();
+
     return (
         <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
             <h3 style={{margin: 0}}>{title}</h3>
@@ -31,7 +35,7 @@ const FlowTitle: React.FC<FlowTitleProps> = (props) => {
 
                 <Button
                     onClick={() => {
-                        props.setVisible(false);
+                        dispatch(hideFlowView());
                     }}
                 >
                     关闭

admin-ui/src/components/Flow/flow/data.ts

@@ -121,7 +121,24 @@ export class FlowData extends FlowWorkData {
     // 获取当前节点的按钮
     getNodeButtons = () => {
         if (this.data) {
-            return this.data.flowNode.buttons;
+            const buttons = this.data.flowNode.buttons;
+            if(buttons){
+                return buttons.sort((item1:any, item2:any) => {
+                    return item1.order - item2.order;
+                })
+            }
+            return [];
+        }
+        return null;
+    }
+
+    // 获取当前节点的按钮
+    getNodeButton = (buttonId: string) => {
+        if (this.data) {
+            const buttons = this.data.flowNode.buttons;
+            if(buttons){
+                return buttons.find((item:any) => item.id === buttonId);
+            }
         }
         return null;
     }
@@ -169,20 +186,23 @@ export class FlowData extends FlowWorkData {
     getNodeState = (code: string) => {
         const historyRecords = this.data.historyRecords || [];
 
-
-        if (this.isFinished()) {
+        if (code==='over' && this.isFinished()) {
             return "done";
         }
 
         for (const record of historyRecords) {
             if (record.nodeCode === code) {
                 if (record.flowType === 'TODO') {
-                    return "wait";
+                    return "current";
                 }
                 return "done";
             }
         }
 
+        if(this.isFinished()){
+            return "undone";
+        }
+
         return "wait";
     }
 
@@ -211,6 +231,30 @@ export class FlowData extends FlowWorkData {
         return this.data.flowRecord;
     }
 
+    // 获取审批意见
+    getOpinionAdvice = () => {
+        if(this.data.flowRecord){
+            if(this.data.flowRecord.opinion){
+                return this.data.flowRecord.opinion.advice;
+            }
+        }
+        return null;
+    }
+
+
+    // 获取历史审批意见
+    getOpinions() {
+        if(this.data.opinions){
+            return this.data.opinions.filter((item:any)=>{
+                if(!item.opinion){
+                    return false;
+                }
+                return item.opinion.result!==0;
+            });
+        }
+        return [];
+    }
+
     // 获取历史记录
     getHistoryRecords = () => {
         return this.data.historyRecords;
@@ -244,5 +288,6 @@ export class FlowData extends FlowWorkData {
     showOpinion() {
         return this.canHandle() && !this.isStartFlow();
     }
+
 }