Merge pull request #80 from codingapi/dev

Dev

Author: xlorne

admin-ui/package.json

@@ -6,6 +6,8 @@
     "@ant-design/icons": "^5.4.0",
     "@ant-design/pro-components": "^2.7.19",
     "@babel/standalone": "^7.25.6",
+    "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/sortable": "^9.0.0",
     "@logicflow/core": "^2.0.5",
     "@logicflow/extension": "^2.0.9",
     "@reduxjs/toolkit": "^2.2.7",

admin-ui/src/api/flow.ts

@@ -38,8 +38,12 @@ export async function schema(body: any) {
 
 // 流程控制
 
-export async function detail(id:any) {
-    return get('/api/query/flowRecord/detail', {id});
+export async function startFlow(body:any) {
+    return post('/api/cmd/flowRecord/startFlow', body);
+}
+
+export async function detail(id?:any,workCode?:any) {
+    return get('/api/query/flowRecord/detail', {id,workCode});
 }
 
 export async function saveFlow(body:any) {
@@ -50,6 +54,14 @@ export async function submitFlow(body:any) {
     return post('/api/cmd/flowRecord/submitFlow', body);
 }
 
+export async function trySubmitFlow(body:any) {
+    return post('/api/cmd/flowRecord/trySubmitFlow', body);
+}
+
+export async function custom(body:any) {
+    return post('/api/cmd/flowRecord/custom', body);
+}
+
 export async function recall(body:any) {
     return post('/api/cmd/flowRecord/recall', body);
 }

admin-ui/src/api/user.ts

@@ -1,4 +1,4 @@
-import {page, post} from "@/api/index";
+import {page, post,get} from "@/api/index";
 
 export async function list(
     params: any,
@@ -12,6 +12,10 @@ export async function list(
     return page('/api/query/user/list', params, sort, filter, match);
 }
 
+export async function users() {
+    return get('/api/query/user/list', {current:1,pageSize:999999});
+}
+
 
 export async function save(body: any) {
     return post('/api/cmd/user/save', body);

admin-ui/src/components/Flow/components/PostponedFormView.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import {ModalForm, ProFormDigit} from "@ant-design/pro-components";
+import {PostponedFormProps} from "@/components/Flow/flow/types";
+
+
+const PostponedFormView:React.FC<PostponedFormProps> = (props)=>{
+
+    return (
+        <ModalForm
+            title={"延期调整"}
+            open={props.visible}
+            modalProps={{
+                onCancel: () => {
+                    props.setVisible(false);
+                },
+                onClose: () => {
+                    props.setVisible(false);
+                },
+                destroyOnClose:true,
+            }}
+            onFinish={async (values) => {
+                props.onFinish(values);
+            }}
+        >
+            <ProFormDigit
+                name={"hours"}
+                label={"延期时间"}
+                tooltip={"以当前时间开始延期，延期单位为小时"}
+                addonAfter={"小时"}
+                rules={[
+                    {
+                        required: true,
+                        message: "请输入延期时间"
+                    }
+                ]}
+            />
+        </ModalForm>
+    )
+}
+
+export default PostponedFormView;

admin-ui/src/components/Flow/components/ResultFormView.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {Modal, Result} from "antd";
+import {ProDescriptions} from "@ant-design/pro-components";
+import {FlowResultItem, ResultFormProps} from "@/components/Flow/flow/types";
+
+
+const ResultFormView: React.FC<ResultFormProps> = (props) => {
+    const {result} = props;
+
+    if (!result) {
+        return null;
+    }
+
+    const resultStateTag = ()=>{
+        const resultState = result.resultState;
+        if(resultState === "SUCCESS") {
+            return "success"
+        }
+        if(resultState === "WARNING") {
+            return "warning"
+        }
+        return "info";
+    };
+
+
+    return (
+        <Modal
+            width={"40%"}
+            height={"60%"}
+            open={props.visible}
+            onCancel={() => {
+                props.setVisible(false);
+                if (props.flowCloseable) {
+                    props.closeFlow();
+                }
+            }}
+            onClose={() => {
+                props.setVisible(false);
+                if (props.flowCloseable) {
+                    props.closeFlow();
+                }
+            }}
+            onOk={() => {
+                props.setVisible(false);
+                if (props.flowCloseable) {
+                    props.closeFlow();
+                }
+            }}
+            destroyOnClose={true}
+        >
+
+            <Result
+                status={resultStateTag()}
+                title={result.title}
+            >
+                {result.items && result.items.map((item: FlowResultItem, index: number) => {
+                    return (
+                        <ProDescriptions
+                            column={2}
+                        >
+                            <ProDescriptions.Item
+                                span={2}
+                                label={item.label}
+                                valueType="text"
+                            >
+                                {item.value}
+                            </ProDescriptions.Item>
+                        </ProDescriptions>
+                    )
+                })}
+            </Result>
+        </Modal>
+    )
+}
+
+export default ResultFormView;

admin-ui/src/components/Flow/components/UserSelectView.tsx

@@ -0,0 +1,66 @@
+import React, {useEffect} from "react";
+import {UserSelectProps} from "@/components/Flow/flow/types";
+import {ModalForm, ProForm, ProFormSelect} from "@ant-design/pro-components";
+import {users} from "@/api/user";
+
+
+const UserSelectView: React.FC<UserSelectProps> = (props) => {
+
+    const [form] = ProForm.useForm();
+
+    const [userList, setUserList] = React.useState<any[]>([]);
+
+    useEffect(() => {
+        users().then((res) => {
+            if (res.success) {
+                const list = res.data.list.filter((item:any)=>{
+                    const specifyUserIds = props.specifyUserIds;
+                    if(specifyUserIds && specifyUserIds.length > 0){
+                        return specifyUserIds.includes(item.id);
+                    }
+                });
+                setUserList(list);
+                // 默认选中当前用户
+                form.setFieldValue("users", props.currentUserIds);
+            }
+        })
+    }, []);
+
+    return (
+        <ModalForm
+            form={form}
+            open={props.visible}
+            title={"用户选择（模拟测试）"}
+            modalProps={{
+                onCancel: () => {
+                    props.setVisible(false);
+                },
+                onClose: () => {
+                    props.setVisible(false);
+                }
+            }}
+            onFinish={async (values) => {
+                const users = values.users;
+                const selectedUsers = userList.filter((item: any) => {
+                    return users.includes(item.id);
+                });
+                props.onFinish(selectedUsers);
+                props.setVisible(false);
+            }}
+        >
+            <ProFormSelect
+                mode={"tags"}
+                name={"users"}
+                label={"用户"}
+                options={userList.map((item: any) => {
+                    return {
+                        label: item.name,
+                        value: item.id
+                    }
+                })}
+            />
+        </ModalForm>
+    )
+}
+
+export default UserSelectView;

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

@@ -0,0 +1,52 @@
+import React from "react";
+import {FlowData} from "@/components/Flow/flow/data";
+import {Button, Space} from "antd";
+
+
+interface FlowButtonsProps {
+    flowData: FlowData;
+    requestLoading: boolean;
+    setRequestLoading: (loading: boolean) => void;
+    handlerClick: (item: any) => void;
+}
+
+const FlowButtons: React.FC<FlowButtonsProps> = (props) => {
+    const flowData = props.flowData;
+
+    if (!flowData ) {
+        return null;
+    }
+
+    if(flowData.hasData() && flowData.isDone()){
+        return null;
+    }
+
+    const buttons = flowData.getNodeButtons();
+
+    return (
+        <Space>
+            {buttons && buttons.map((item: any) => {
+                const style = item.style && {
+                    ...JSON.parse(item.style),
+                    color: "white",
+                } || {};
+                return (
+                    <Button
+                        key={item.id}
+                        onClick={() => {
+                            props.handlerClick(item);
+                        }}
+                        loading={props.requestLoading}
+                        style={{
+                            ...style
+                        }}
+                    >
+                        {item.name}
+                    </Button>
+                )
+            })}
+        </Space>
+    )
+}
+
+export default FlowButtons;

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

@@ -0,0 +1,19 @@
+.flow-chart-content {
+  border: 1px solid #ebeef5;
+  transition: 0.3s;
+  padding: 15px 16px;
+  border-radius: 12px;
+  position: relative;
+
+  .flow-view {
+    width: 100%;
+    height: 85vh;
+  }
+}
+
+
+
+.lf-mini-map {
+  border: none !important;
+  box-shadow: 3px 0 10px 1px rgb(228, 224, 219);
+}

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

@@ -0,0 +1,69 @@
+import React, {useEffect, useRef} from "react";
+import {FlowData} from "@/components/Flow/flow/data";
+import {LogicFlow} from "@logicflow/core";
+import {DndPanel, Menu, MiniMap, Snapshot} from "@logicflow/extension";
+import Start from "@/components/Flow/nodes/Start";
+import Node from "@/components/Flow/nodes/Node";
+import Over from "@/components/Flow/nodes/Over";
+import Circulate from "@/components/Flow/nodes/Circulate";
+import '@logicflow/core/es/index.css';
+import '@logicflow/extension/lib/style/index.css';
+import "./FlowChart.scss";
+
+interface FlowChartProps {
+    flowData: FlowData
+}
+
+const FlowChart: React.FC<FlowChartProps> = (props) => {
+
+    const flowData = props.flowData;
+
+    const container = useRef<HTMLDivElement>(null);
+    const lfRef = 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'
+            },
+            plugins: [Menu, DndPanel, MiniMap, Snapshot],
+            grid: false,
+            edgeType: 'bezier',
+        });
+
+        lfRef.current.setTheme({
+            bezier: {
+                stroke: '#8f94e3',
+                strokeWidth: 1,
+            },
+        });
+        lfRef.current.register(Start);
+        lfRef.current.register(Node);
+        lfRef.current.register(Over);
+        lfRef.current.register(Circulate);
+
+        lfRef.current.render(flowData.getFlowSchema());
+    }, []);
+
+    return (
+        <>
+            <div className="flow-chart-content">
+                <div className={"flow-view"} ref={container}/>
+            </div>
+        </>
+    )
+}
+
+export default FlowChart;