add flow detail

Author: xlorne

admin-pro-ui/src/components/descriptions/index.scss

@@ -0,0 +1,34 @@
+@use "@/config/variables" as *;
+
+.descriptions-list {
+  padding: 3px;
+  background-color: white;
+
+  .descriptions-list-item {
+    background-color: white;
+    padding: 15px;
+    font-size: $content-font-size;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid $body-background-color;
+
+    .descriptions-list-item-label {
+      font-weight: bold;
+    }
+
+    .descriptions-list-item-value {
+    }
+  }
+
+  .form-header-title {
+    width: 100%;
+    height: 20px;
+    border-left: 4px solid $theme-primary-color;
+    padding-left: 4px;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+}
+
+

admin-pro-ui/src/components/descriptions/index.tsx

@@ -0,0 +1,99 @@
+import React, {useEffect, useImperativeHandle} from "react";
+import {FormField} from "@/components/form/types";
+import "./index.scss";
+
+export interface DescriptionsAction {
+    // 重新刷新数据
+    reload: () => void;
+}
+
+// 详情展示属性
+interface DescriptionsProps {
+    // 展示的字段
+    columns?: FormField[];
+    // 请求数据
+    request?: () => Promise<any>;
+    // 操作对象
+    actionRef?: React.Ref<DescriptionsAction>;
+    // 页脚
+    footer?: React.ReactNode;
+    // 页头
+    header?: React.ReactNode;
+    // 数据转换
+    dataConvert?: (field: FormField, data: any) => Promise<any>;
+}
+
+// 详情展示
+const Descriptions: React.FC<DescriptionsProps> = (props) => {
+
+    const [data, setData] = React.useState<any>(null);
+
+    const reload = () => {
+        if (props.request) {
+            props.request().then((data) => {
+                if(props.dataConvert) {
+                    const promise = [] as Promise<any>[];
+                    props.columns?.map(item => {
+                        promise.push(new Promise<any>((resolve, reject) => {
+                            props.dataConvert?.(item, data).then(value => {
+                                data[item.props.name] = value;
+                                resolve(value);
+                            }).catch(reject);
+                        }));
+                    });
+                    Promise.all(promise).then(() => {
+                        setData(data);
+                    });
+                }else {
+                    setData(data);
+                }
+            })
+        }
+    }
+
+    useImperativeHandle(props.actionRef, () => ({
+        reload: () => {
+            reload()
+        }
+    }), [props.actionRef]);
+
+    useEffect(() => {
+        reload();
+
+        return () => {
+            setData(null);
+        }
+    }, []);
+
+    return (
+        <div className={"descriptions-list"}>
+            {props.header}
+            {data && props.columns && props.columns
+                .filter(item => !item.props.hidden)
+                .map((item) => {
+                    const key = item.props.name;
+                    const label = item.props.label as string || "";
+                    const value = data[key];
+                    const valueType = typeof value === 'object' ? 'object' : 'string';
+                    return (
+                        <div className={"descriptions-list-item"}>
+                            <div className={"descriptions-list-item-label"}
+                                 dangerouslySetInnerHTML={{__html: label }}/>
+                            {valueType === 'string' && (
+                                <div className={"descriptions-list-item-value"}
+                                     dangerouslySetInnerHTML={{__html: value}}/>
+                            )}
+                            {valueType === 'object' && (
+                                <div className={"descriptions-list-item-value"}>
+                                    {value}
+                                </div>
+                            )}
+                        </div>
+                    )
+                })}
+            {props.footer}
+        </div>
+    )
+}
+
+export default Descriptions;

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

@@ -0,0 +1,95 @@
+import React, {useContext, useEffect} from "react";
+import '@logicflow/core/es/index.css';
+import '@logicflow/extension/lib/style/index.css';
+import {LogicFlow, Options} from "@logicflow/core";
+import {DndPanel, Menu, MiniMap, Snapshot} from "@logicflow/extension";
+import {FlowViewReactContext} from "@/components/flow/view";
+import Start from "@/components/flow/nodes/Start";
+import Over from "@/components/flow/nodes/Over";
+import Circulate from "@/components/flow/nodes/Circulate";
+import Node from "@/components/flow/nodes/Node";
+import "@/components/flow/index.scss";
+
+import EdgeType = Options.EdgeType;
+
+interface FlowChartProps {
+    edgeType?: EdgeType;
+}
+
+const FlowChart: React.FC<FlowChartProps> = (props) => {
+
+    const flowViewReactContext = useContext(FlowViewReactContext);
+    const flowRecordContext = flowViewReactContext?.flowRecordContext;
+    const flowSchema = flowRecordContext?.getFlowSchema();
+
+    const [url, setUrl] = React.useState<string>('');
+
+    const edgeType = props.edgeType || 'polyline';
+    const container = React.useRef<HTMLDivElement>(null);
+    const lfRef = React.useRef<LogicFlow>(null);
+
+    useEffect(() => {
+        const SilentConfig = {
+            isSilentMode: true,
+            stopScrollGraph: false,
+            stopMoveGraph: false,
+            stopZoomGraph: false,
+            edgeTextEdit: false,
+        };
+
+        //@ts-ignore
+        lfRef.current = new LogicFlow({
+            //@ts-ignore
+            container: container.current,
+            ...SilentConfig,
+            background: {
+                backgroundColor: '#f3f5f8'
+            },
+            width: 0,
+            height: 0,
+            plugins: [Menu, DndPanel, MiniMap, Snapshot],
+            grid: false,
+            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);
+        lfRef.current.register(Over);
+        lfRef.current.register(Circulate);
+        lfRef.current.render(flowSchema);
+
+        setTimeout(() => {
+            lfRef.current?.getSnapshotBlob().then((blob: any) => {
+                setUrl(URL.createObjectURL(blob.data));
+            });
+        }, 100)
+
+    }, [flowViewReactContext]);
+
+    return (
+        <div>
+            <div className="flow-chart">
+                <div className={"flow-chart-content"} ref={container}/>
+                {url && (
+                    <img src={url} className={"flow-img"}/>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default FlowChart;

admin-pro-ui/src/components/flow/components/FlowContent.tsx

@@ -3,7 +3,12 @@ import {FlowFormViewProps} from "@/components/flow/types";
 import {FlowViewReactContext} from "@/components/flow/view";
 import {useSelector} from "react-redux";
 import {FlowReduxState} from "@/components/flow/store/FlowSlice";
-import {Tabs, TabsProps} from "antd";
+import {Divider, Tabs, TabsProps} from "antd";
+import FlowFormOpinion from "@/components/flow/components/FlowFormOpinion";
+import FlowHistory from "@/components/flow/components/FlowHistory";
+import FlowOpinion from "@/components/flow/components/FlowOpinion";
+import FlowChart from "@/components/flow/components/FlowChart";
+import FlowHistoryLine from "@/components/flow/components/FlowHistoryLine";
 
 const FlowContent = () => {
     const flowViewReactContext = useContext(FlowViewReactContext);
@@ -18,6 +23,7 @@ const FlowContent = () => {
     const opinionVisible = useSelector((state: FlowReduxState) => state.flow.opinionVisible);
     const dataVersion = useSelector((state: FlowReduxState) => state.flow.dataVersion);
     const contentHiddenVisible = useSelector((state: FlowReduxState) => state.flow.contentHiddenVisible);
+    const [currentTab, setCurrentTab] = React.useState('detail');
 
     useEffect(() => {
         if (!flowRecordContext?.isEditable()) {
@@ -46,7 +52,44 @@ const FlowContent = () => {
 
     return (
         <div className={"flow-view-content"} style={style}>
-            <Tabs items={items}/>
+            <Tabs
+                items={items}
+                activeKey={currentTab}
+                onChange={(value) => {
+                    setCurrentTab(value)
+                }}/>
+
+            {currentTab ==='detail' && (
+                <>
+                    {formInstance && (
+                        <FlowFormView
+                            data={formParams}
+                            form={formInstance}
+                            dataVersion={dataVersion}
+                        />
+                    )}
+
+                    {opinionVisible && (
+                        <FlowFormOpinion/>
+                    )}
+                </>
+            )}
+
+            {currentTab ==='record' && (
+                <>
+                    <FlowHistory/>
+                    <Divider>审批记录</Divider>
+                    <FlowOpinion/>
+                </>
+            )}
+
+            {currentTab ==='chart' && (
+                <>
+                    <FlowChart/>
+                    <Divider>流转历史</Divider>
+                    <FlowHistoryLine/>
+                </>
+            )}
         </div>
     )
 }

admin-pro-ui/src/components/flow/components/FlowFormOpinion.tsx

@@ -0,0 +1,45 @@
+import React, {useContext, useEffect} from "react";
+import Form from "@/components/form";
+import {FlowViewReactContext} from "@/components/flow/view";
+
+const FlowFormOpinion = ()=>{
+
+    const flowViewReactContext = useContext(FlowViewReactContext);
+    const opinionInstance = flowViewReactContext?.opinionInstance;
+    const flowRecordContext = flowViewReactContext?.flowRecordContext;
+
+    useEffect(() => {
+        opinionInstance?.setFieldValue("advice", flowRecordContext?.getOpinionAdvice());
+    }, []);
+
+    return (
+        <>
+            <Form
+                form={opinionInstance}
+                loadFields={async ()=>{
+                    return [
+                        {
+                            type:'textarea',
+                            props:{
+                                name:"advice",
+                                label:"审批意见",
+                                textAreaRows:2,
+                                required:true,
+                                validateFunction:async (content)=>{
+                                    const value = content.value;
+                                    if(value){
+                                        return [];
+                                    }
+                                    return ["请输入审批意见"];
+                                }
+                            }
+                        }
+                    ]
+                }}
+            >
+            </Form>
+        </>
+    )
+}
+
+export default FlowFormOpinion;