58 |
60 |
85 |
86 | );
87 | }
88 |
89 | export default App;
90 |
--------------------------------------------------------------------------------
/examples/approval-process-designer-react/src/activities/ApprovalActivity.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ActivityFC,
3 | ApprovalActivity as TdApprovalActivity,
4 | DesignerCore, IActivity
5 | } from "@trionesdev/approval-process-designer-react";
6 | import createResource = DesignerCore.createResource;
7 | import {Button, Drawer, Form, Input} from "antd";
8 | import {useState} from "react";
9 |
10 | export const ApprovalActivity: ActivityFC
66 | Triones Approval Process Designer
67 |
71 |
68 | Github
69 |
70 |
72 |
73 |
74 |
82 |
83 |
84 |
32 |
33 |
}
34 | >
35 |
40 |
162 |
183 |
163 |
182 |
164 | }
176 |
177 |
165 | {editing ? :
167 | {
169 | e.stopPropagation();
170 | setEditing(true)
171 | }}>{processNode?.title}}
172 |
173 |
174 | {closeable &&
175 |
178 |
181 | {processNode.description || `请设置${processNode.title}`}
179 | {React.cloneElement(RightIcon)}
180 |
89 |
91 | {addableActivityResources?.map((resource) => {
92 | return {
94 | setOpen(false)
95 | }}/>
96 |
97 | }) || []}
98 | }>
99 |
102 |
103 |
104 |
73 |
74 | }
75 | {lastCol && <>
76 |
77 |
78 | }
79 | {children}
80 |
81 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/activity/CcActivity.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from "react"
2 | import {Activity} from "./Activity";
3 | import {IActivity} from "../types";
4 |
5 | type CcActivityProps = IActivity
6 |
7 | export const CcActivity: FC = ({
8 | processNode,
9 | nextActivity,
10 | onClick
11 | }) => {
12 | return <>
13 |
15 | {nextActivity}
16 |
17 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/activity/CondiitionActivity.tsx:
--------------------------------------------------------------------------------
1 | import styled from "@emotion/styled";
2 | import React, {createRef, FC, useEffect, useState} from "react";
3 | import classNames from "classnames";
4 | import {AddActivityBox} from "./AddActivityBox";
5 | import {BranchBox} from "./BranchBox";
6 | import {CloseIcon, QuestionIcon} from "../Icons";
7 | import {Tooltip} from "../components";
8 | import {IconWidget} from "../widget/IconWidget";
9 | import {IActivity} from "../types";
10 |
11 | const ConditionActivityStyled = styled('div')({
12 | boxSizing: 'border-box',
13 | minHeight: '220px',
14 | display: 'inline-flex',
15 | flexDirection: 'column',
16 | '.condition-activity-wrapper': {
17 | marginTop: '30px',
18 | paddingRight: '50px',
19 | paddingLeft: '50px',
20 | display: 'inline-flex',
21 | alignItems: 'center',
22 | flexDirection: 'column',
23 | flexGrow: 1,
24 | position: 'relative',
25 | '&::before': {
26 | content: '" "',
27 | position: 'absolute',
28 | top: 0,
29 | left: 0,
30 | right: 0,
31 | bottom: 0,
32 | margin: 'auto',
33 | width: '2px',
34 | height: '100%',
35 | backgroundColor: `#CACACA`
36 | },
37 | '.condition-activity-box': {
38 | boxSizing: 'border-box',
39 | position: 'relative',
40 | width: '220px',
41 | minHeight: '72px',
42 | background: '#FFFFFF',
43 | borderRadius: '4px',
44 | padding: '14px 19px',
45 | cursor: 'pointer',
46 | '&::after': {
47 | pointerEvents: 'none',
48 | content: '" "',
49 | position: 'absolute',
50 | top: 0,
51 | bottom: 0,
52 | left: 0,
53 | right: 0,
54 | zIndex: 2,
55 | borderRadius: '4px',
56 | border: '1px solid transparent',
57 | transition: 'all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)',
58 | boxShadow: ' 0 2px 5px 0 rgba(0, 0, 0, 0.1)'
59 | },
60 | '&:hover': {
61 | '.editable-title': {
62 | borderBottom: 'dashed 1px #FFFFFF',
63 | borderColor: '#15BC83'
64 | },
65 | '.priority-title': {
66 | display: 'none!important',
67 | },
68 | '.close': {
69 | display: 'inline-flex!important'
70 | }
71 | },
72 | '.header': {
73 | display: 'flex',
74 | width: '1005',
75 | justifyContent: 'space-between',
76 | alignItems: 'center',
77 | position: 'relative',
78 | fontSize: '12px',
79 | color: '#15BC83',
80 | textAlign: 'left',
81 | lineHeight: '16px',
82 | 'input': {
83 | outline: 'none'
84 | },
85 | '.default-title': {
86 | color: 'rgba(25, 31, 37, 0.56)',
87 | display: 'inline-flex',
88 | alignItems: 'center',
89 | gap: '4px'
90 | },
91 | '.editable-title': {
92 | lineHeight: '15px',
93 | overflow: 'hidden',
94 | whiteSpace: 'nowrap',
95 | textOverflow: 'ellipsis',
96 | // borderBottom: 'dashed 1px transparent'
97 | },
98 | '.priority-title': {
99 | display: 'inline-block',
100 | float: 'right',
101 | marginRight: '10px',
102 | color: 'rgba(25, 31, 37, 0.56)'
103 | },
104 | '.close': {
105 | display: 'none',
106 | width: '14px',
107 | height: '14px',
108 | position: 'absolute',
109 | right: '-2px',
110 | top: '-2px',
111 | fontSize: '14px',
112 | textAlign: 'center',
113 | lineHeight: '20px',
114 | zIndex: 2,
115 | color: 'rgba(25, 31, 37, 0.56)'
116 | }
117 | },
118 | '.body': {
119 | position: 'relative',
120 | fontSize: '14px',
121 | // padding: '16px',
122 | // paddingRight: '30px',
123 | display: 'flex',
124 | marginTop: '6px',
125 | justifyContent: 'space-between',
126 | '.description': {
127 | overflow: 'hidden',
128 | textOverflow: 'ellipsis',
129 | display: '-webkit-box',
130 | whiteSpace: 'pre'
131 | }
132 | }
133 | }
134 | }
135 | })
136 |
137 | type ConditionActivityProps = IActivity
138 |
139 | export const ConditionActivity: FC = ({
140 | processNode,
141 | nextActivity,
142 | onClick
143 | }) => {
144 | const inputRef = createRef()
145 | const [editing, setEditing] = useState(false)
146 |
147 | const handleOnClick = (e: any) => {
148 | if (processNode?.defaultCondition) {
149 | return
150 | }
151 | onClick?.(processNode)
152 | }
153 |
154 | const handleInputBlur = (e: any) => {
155 | setEditing(false)
156 | }
157 |
158 | const handleRemove = () => {
159 | processNode.remove()
160 | }
161 |
162 | useEffect(() => {
163 | if (inputRef.current) {
164 | inputRef.current.focus()
165 | }
166 | }, [inputRef])
167 |
168 |
169 | return
170 |
171 |
210 |
211 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/activity/EndActivity.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import styled from "@emotion/styled";
3 |
4 | const EndActivityStyled = styled('div')({
5 |
6 | '&.end-activity': {
7 | borderRadius: '50%',
8 | fontSize: '14px',
9 | color: `rgba(25, 31, 37, 0.4)`,
10 | '.end-activity-circle': {
11 | width: '10px',
12 | height: '10px',
13 | margin: 'auto',
14 | borderRadius: '50%',
15 | background: '#DBDCDC'
16 | },
17 | '.end-activity-text': {
18 | marginTop: '5px',
19 | textAlign: 'center'
20 | }
21 | }
22 |
23 | })
24 |
25 | export const EndActivity = () => {
26 | return
27 |
172 |
207 |
208 | {nextActivity}
209 |
173 |
206 |
174 | {
175 | processNode?.defaultCondition ?
176 | <>
177 | 默认条件
178 |
180 | {React.cloneElement(QuestionIcon)}
182 |
183 |
184 | 优先级{(processNode.index || 0) + 1}
186 | :
187 | <>{
188 | editing ? : <>
191 | setEditing(true)}>{processNode?.title || `条件${(processNode.index || 0) + 1}`}
193 | 优先级{(processNode.index || 0) + 1}
195 |
197 |
198 | }
199 | }
200 |
201 |
202 |
205 | {processNode?.defaultCondition ? '其他条件进入此流程' : (processNode.description || '请设置条件')}
204 |
28 | = ({children, processNode, nextActivity}) => {
48 |
49 | const handleAddBranch = () => {
50 | processNode.addConditionBranch()
51 | }
52 |
53 | return <>
54 |
55 |
56 |
57 | {children}
58 |
59 |
60 | {nextActivity}
61 |
62 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/activity/RouteBranches.tsx:
--------------------------------------------------------------------------------
1 | import styled from "@emotion/styled";
2 | import React, {FC} from "react";
3 | import {AddActivityBox} from "./AddActivityBox";
4 | import {ProcessNode} from "../model";
5 |
6 | const RouteBranchesStyled = styled('div')({
7 | display: 'flex',
8 | flexDirection: 'column',
9 | flexWrap: 'wrap',
10 | alignItems: 'center',
11 | minHeight: '270px',
12 | width: '100%',
13 | flexShrink: 0,
14 | })
15 |
16 | type RouteBranchesProps = {
17 | children?: React.ReactNode
18 | processNode?: ProcessNode
19 | }
20 |
21 | export const RouteBranches: FC = ({children, processNode}) => {
22 | return
23 | {children}
24 |
25 |
26 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/activity/StartActivity.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from "react"
2 | import {Activity} from "./Activity";
3 | import {IActivity} from "../types";
4 |
5 | type StartActivityProps = IActivity
6 |
7 | export const StartActivity: FC = ({
8 | processNode,
9 | nextActivity,
10 | onClick
11 |
12 | }) => {
13 | return <>
14 |
15 | {nextActivity}
16 |
17 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/activity/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./Activity"
2 | export * from "./StartActivity"
3 | export * from "./EndActivity"
4 | export * from "./ApprovalActivity"
5 | export * from "./RouteActivity"
6 | export * from "./CondiitionActivity"
7 | export * from "./CcActivity"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/components/Popover/Popover.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from "react"
2 | import RcTooltip from "rc-tooltip"
3 | import styled from "@emotion/styled";
4 | import {css, Global} from "@emotion/react";
5 | import {TooltipProps as RcTooltipProps} from "rc-tooltip/es/Tooltip";
6 |
7 | const prefixCls = 'td-popover'
8 | const popoverCss = css({
9 | [`.${prefixCls}`]: {
10 | position: 'absolute',
11 | zIndex: 1070,
12 | display: 'block',
13 | visibility: 'visible',
14 | lineHeight: 1.5,
15 | fontSize: '12px',
16 | backgroundColor: '#ffffff',
17 | borderRadius:'6px',
18 | padding: '0px',
19 | opacity: .9,
20 | // width: 'max-content',
21 | minWidth: '250px',
22 | color: 'rgba(255,255,255)',
23 | transformOrigin: 'var(--arrow-x, 50%) var(--arrow-y, 50%)',
24 | boxShadow:'0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
25 | [`&-hidden`]: {
26 | display: 'none'
27 | },
28 | [`&-arrow`]: {
29 | zIndex: 1,
30 | width: '16px',
31 | height: '16px',
32 | display: 'block',
33 | overflow: 'hidden',
34 | '&::before': {
35 | position: 'absolute',
36 | bottom: 0,
37 | insetInlineStart: 0,
38 | content: '" "',
39 | width: '16px',
40 | height: '8px',
41 | backgroundColor: 'rgba(255,255,255)',
42 | clipPath: 'path(\'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z\')',
43 | pointerEvents: 'none'
44 | },
45 | '&::after': {
46 | position: 'absolute',
47 | content: '" "',
48 | width: '8.970562748477143px',
49 | height: '8.970562748477143px',
50 | bottom: 0,
51 | insetInline: 0,
52 | margin: 0,
53 | borderRadius: '0 0 2px 0',
54 | transform: 'translateY(50%) rotate(-135deg)',
55 | background: 'transparent',
56 | boxShadow: '2px 2px 5px rgba(0, 0, 0)'
57 | }
58 | },
59 | [`&-placement-rightTop &-arrow`]:{
60 | transform:' translateX(-100%) rotate(-90deg)'
61 | },
62 | [`$-content`]: {
63 | position: 'relative',
64 | margin: 0,
65 | padding: 0
66 | },
67 | [`&-inner`]: {
68 | textAlign: 'start',
69 | textDecoration: 'none',
70 | wordWrap: 'break-word',
71 | backgroundColor: 'rgba(255,255,255)',
72 | color: '#ffffff',
73 | padding: '6px 8px',
74 | minWidth: '32px',
75 | minHeight: '32px',
76 | borderRadius: '6px',
77 | boxSizing: 'border-box'
78 | }
79 | }
80 | })
81 |
82 | const PopoverStyled = styled(RcTooltip)((props) => {
83 | return {}
84 | })
85 |
86 | type PopoverProps = {
87 | content?: React.ReactNode
88 | } & Omit
89 |
90 | export const Popover: FC = ({
91 | children,
92 | content,
93 | ...props
94 | }) => {
95 | const overlay =
98 |
102 | {children}
103 |
104 |
105 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/components/Popover/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./Popover"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/components/Row/Col.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from "react";
2 | import styled from "@emotion/styled";
3 | import classnames from "classnames"
4 |
5 | type Span = 0 | 2 | 3 | 4 | 6 | 8 | 12
6 |
7 |
8 | const ColStyled = styled('div')((props) => {
9 |
10 | return {
11 | flex: `0 0 ${props.style.width}`,
12 | maxWidth: `${props.style.width}`,
13 | boxSizing: 'border-box',
14 | }
15 | })
16 |
17 | type ColProps = {
18 | children?: React.ReactNode;
19 | className?: string;
20 | style?: React.CSSProperties;
21 | span?: Span;
22 | }
23 |
24 | export const Col: FC = ({
25 | children,
26 | className,
27 | style,
28 | span
29 | }) => {
30 | const width = span ? `${100 / (24 / span)}%` : '100%'
31 | return
32 |
34 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/components/Row/Row.tsx:
--------------------------------------------------------------------------------
1 | import React, {forwardRef} from "react";
2 | import styled from "@emotion/styled";
3 | import _ from "lodash";
4 |
5 | const RowStyled = styled.div`
6 | display: flex;
7 | flex-flow: row wrap;
8 | min-width: 0;
9 | `
10 |
11 | type RowProps = {
12 | children?: React.ReactNode;
13 | className?: string;
14 | style?: React.CSSProperties;
15 | gutter?: number | number[]
16 | }
17 |
18 | export const Row = forwardRef(({
19 | children,
20 | className,
21 | style,
22 | gutter
23 | }: RowProps, ref: any) => {
24 | let rowGap: number = 0;
25 | let columnGap: number = 0;
26 | let margin: number = 0;
27 | if (_.isArray(gutter)) {
28 | columnGap = gutter[0] / 2
29 | rowGap = gutter[1]
30 | margin = 0 - gutter[0] / 2
31 | } else if (typeof gutter === "number") {
32 | columnGap = gutter / 2
33 | rowGap = gutter
34 | margin = 0 - gutter / 2
35 | }
36 |
37 | const handleRender = (children: React.ReactNode) => {
38 | const childArray = React.Children.toArray(children);
39 | return childArray.map((child: React.ReactNode) => {
40 | if (React.isValidElement(child)) {
41 | return React.cloneElement(child, _.merge({}, child.props, {
42 | style: {
43 | background: "white",
44 | ...child.props.style,
45 | paddingLeft: columnGap, paddingRight: columnGap
46 | }, ...child.props
47 | }))
48 | }
49 | })
50 | }
51 |
52 | return {handleRender(children)}
57 | })
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/components/Row/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./Row"
2 | export * from "./Col"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/components/Tooltip/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from "react"
2 | import RcTooltip from "rc-tooltip"
3 | import styled from "@emotion/styled";
4 | import {css, Global} from "@emotion/react";
5 | import {TooltipProps as RcTooltipProps} from "rc-tooltip/es/Tooltip";
6 |
7 | const prefixCls = 'td-tooltip'
8 | const tooltipCss = css({
9 | [`.${prefixCls}`]: {
10 | position: 'absolute',
11 | zIndex: 1070,
12 | display: 'block',
13 | visibility: 'visible',
14 | lineHeight: 1.5,
15 | fontSize: '12px',
16 | backgroundColor: '#0000000d',
17 | padding: '0px',
18 | opacity: .9,
19 | width: 'max-content',
20 | maxWidth: '250px',
21 | color: 'rgba(0,0,0,0.88)',
22 | boxShadow:'0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
23 | [`&-hidden`]: {
24 | display: 'none'
25 | },
26 | [`&-arrow`]: {
27 | transform: ' translateX(-50%) translateY(100%) rotate(180deg)',
28 | zIndex: 1,
29 | width: '16px',
30 | height: '16px',
31 | display: 'block',
32 | overflow: 'hidden',
33 | '&::before': {
34 | position: 'absolute',
35 | bottom: 0,
36 | insetInlineStart: 0,
37 | content: '" "',
38 | width: '16px',
39 | height: '8px',
40 | backgroundColor: 'rgba(0,0,0,0.85)',
41 | clipPath: 'path(\'M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z\')',
42 | pointerEvents: 'none'
43 | },
44 | '&::after': {
45 | position: 'absolute',
46 | content: '" "',
47 | width: '8.970562748477143px',
48 | height: '8.970562748477143px',
49 | bottom: 0,
50 | insetInline: 0,
51 | margin: 0,
52 | borderRadius: '0 0 2px 0',
53 | transform: 'translateY(50%) rotate(-135deg)',
54 | background: 'transparent',
55 | boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.05)'
56 | }
57 | },
58 | [`$-content`]: {
59 | position: 'relative',
60 | margin:0,
61 | padding:0
62 | },
63 | [`&-inner`]: {
64 | textAlign: 'start',
65 | textDecoration: 'none',
66 | wordWrap: 'break-word',
67 | backgroundColor: 'rgba(0,0,0,0.85)',
68 | color: '#ffffff',
69 | padding: '6px 8px',
70 | minWidth: '32px',
71 | minHeight: '32px',
72 | borderRadius: '6px',
73 | boxSizing: 'border-box'
74 | },
75 | }
76 | })
77 |
78 | const TooltipStyled = styled(RcTooltip)((props) => {
79 | return {}
80 | })
81 |
82 | type TooltipProps = {
83 | title?: React.ReactNode
84 | } & Omit
85 |
86 | export const Tooltip: FC = ({
87 | children,
88 | title,
89 | ...props
90 | }) => {
91 | return <>
92 |
93 |
94 | {children}
95 |
96 |
97 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/components/Tooltip/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./Tooltip"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/components/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./Tooltip"
2 | export * from "./Popover"
3 | export * from "./Row"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/container/ApprovalProcessDesigner.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC, useEffect, useMemo, useState} from "react"
2 | import {ApprovalProcessContext} from "../context";
3 | import {ApprovalProcessEngine} from "../model/ApprovalProcessEngine";
4 | import {IProcessNode} from "../model";
5 | import _ from "lodash";
6 |
7 | type ApprovalProcessDesignerProps = {
8 | children?: React.ReactNode;
9 | engine?: ApprovalProcessEngine
10 | value?: IProcessNode
11 | onChange?: (value: any) => void
12 | }
13 |
14 | export const ApprovalProcessDesigner: FC = ({
15 | children,
16 | engine,
17 | value,
18 | onChange
19 | }) => {
20 | const [scopeValue, setScopeValue] = useState(value)
21 |
22 |
23 | let designerEngine = useMemo(() => {
24 | let scopeEngine = engine;
25 | if (!engine) {
26 | scopeEngine = new ApprovalProcessEngine({value: value});
27 | }
28 | return scopeEngine
29 | }, [engine])
30 |
31 | designerEngine?.setOnchange((value: any) => {
32 | if (!_.isEqual(scopeValue, value)) {
33 | setScopeValue(value)
34 | onChange?.(value)
35 | }
36 | })
37 |
38 |
39 | useEffect(() => {
40 | if (value && !_.isEqual(value, scopeValue)) {
41 | designerEngine.process.from(value)
42 | }
43 | }, [value])
44 |
45 | return
46 | {children}
47 |
48 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/container/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./ApprovalProcessDesigner"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/context.tsx:
--------------------------------------------------------------------------------
1 | import {createContext} from "react";
2 | import {ApprovalProcessEngine} from "./model/ApprovalProcessEngine";
3 | import {IActivities} from "./types";
4 | import {ProcessNode} from "./model";
5 |
6 | export const ApprovalProcessContext = createContext(null)
7 |
8 | export const ActivitiesContext = createContext(null)
9 |
10 | export const ProcessNodeContext = createContext(null)
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/hooks/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./useProcessEngine"
2 | export * from "./useActivities"
3 | export * from "./useProcess"
4 | export * from "./useProcessNode"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/hooks/useActivities.tsx:
--------------------------------------------------------------------------------
1 | import {useContext} from "react";
2 | import {ActivitiesContext} from "../context";
3 |
4 | export const useActivities = () => {
5 | return useContext(ActivitiesContext)
6 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/hooks/useProcess.tsx:
--------------------------------------------------------------------------------
1 | import {useProcessEngine} from "./useProcessEngine";
2 |
3 | export const useProcess = () => {
4 | return useProcessEngine().process
5 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/hooks/useProcessEngine.tsx:
--------------------------------------------------------------------------------
1 | import {useContext} from "react";
2 | import {ApprovalProcessContext} from "../context";
3 |
4 | export const useProcessEngine = () => {
5 | return useContext(ApprovalProcessContext)
6 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/hooks/useProcessNode.tsx:
--------------------------------------------------------------------------------
1 | import {useContext} from "react";
2 | import {ProcessNodeContext} from "../context";
3 |
4 | export const useProcessNode = () => {
5 | return useContext(ProcessNodeContext)
6 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./model"
2 | export * from "./container"
3 | export * from "./activity"
4 | export * from "./widget"
5 | export * from "./panel"
6 | export * from "./types"
7 | export * from "./util"
8 | export * from "./store"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/model/ApprovalProcessEngine.ts:
--------------------------------------------------------------------------------
1 | import {IProcessNode, ProcessNode} from "./ProcessNode";
2 | import {define, observable} from "@formily/reactive";
3 | import {GlobalStore} from "../store";
4 | import {DesignerCore} from "../util";
5 | import _ from "lodash";
6 |
7 | interface IApprovalProcessEngine {
8 | value?: IProcessNode
9 | }
10 |
11 | export class ApprovalProcessEngine {
12 | process: ProcessNode;
13 | onChange?: (value: any) => void
14 |
15 | constructor(engine?: IApprovalProcessEngine) {
16 | this.process = new ProcessNode({
17 | engine: this,
18 | type: 'START',
19 | componentName: 'StartActivity',
20 | title: '开始'
21 | })
22 | if (engine?.value) {
23 | this.process.from(engine.value)
24 | }
25 | this.makeObservable()
26 | }
27 |
28 | makeObservable() {
29 | define(this, {
30 | process: observable,
31 | addableActivityResources: observable.computed
32 | })
33 | }
34 |
35 | handleChange = _.debounce((msg: any) => {
36 | this.onChange?.(DesignerCore.transformToSchema(this.process))
37 | }, 0)
38 |
39 | setOnchange(fn: (value: any) => void) {
40 | this.onChange = fn
41 | }
42 |
43 | get addableActivityResources() {
44 | return GlobalStore.getAddableActivityResources()
45 | }
46 |
47 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/model/ProcessNode.ts:
--------------------------------------------------------------------------------
1 | import {define, observable, observe, reaction} from "@formily/reactive";
2 | import Chance from 'chance';
3 | import _ from "lodash";
4 | import {GlobalStore} from "../store";
5 | import {ApprovalProcessEngine} from "./ApprovalProcessEngine";
6 |
7 | const chance = new Chance();
8 |
9 | export type ProcessNodeType = 'START' | 'ROUTE' | 'CONDITION' | 'APPROVAL' | 'CC' | 'END'
10 |
11 | export interface IProcessNode {
12 | engine?: ApprovalProcessEngine
13 | isSourceNode?: boolean
14 | id?: string
15 | type: ProcessNodeType
16 | componentName?: string
17 | nextNode?: IProcessNode
18 | conditionNodes?: IProcessNode[]
19 | title?: string
20 | description?: string
21 | props?: any
22 | defaultCondition?: boolean
23 | }
24 |
25 | const ProcessNodes = new Map()
26 |
27 | export class ProcessNode {
28 | engine: ApprovalProcessEngine
29 | isSourceNode: boolean
30 | id: string
31 | type: ProcessNodeType
32 | componentName: string
33 | prevNodeId: string
34 | nextNode: ProcessNode
35 | conditionNodes: ProcessNode[]
36 | title: string
37 | description: string
38 | props: any
39 | defaultCondition?: boolean
40 |
41 | constructor(node: IProcessNode, parentNode?: ProcessNode) {
42 | this.engine = node.engine
43 | this.isSourceNode = node.isSourceNode
44 | this.id = node.id || `Activity_${chance.string({length: 10, alpha: true})}`
45 | this.type = node.type
46 | this.componentName = node.componentName || node.type
47 | this.prevNodeId = parentNode?.id
48 | this.nextNode = null
49 | this.conditionNodes = []
50 | this.title = node.title
51 | this.description = node.description
52 | this.props = node.props
53 | this.engine = parentNode?.engine
54 | this.defaultCondition = node.defaultCondition
55 |
56 | ProcessNodes.set(this.id, this)
57 | if (node) {
58 | this.from(node)
59 | }
60 | this.makeObservable()
61 | }
62 |
63 | makeObservable() {
64 | define(this, {
65 | prevNodeId: observable.ref,
66 | title: observable.ref,
67 | description: observable.ref,
68 | nextNode: observable.ref,
69 | conditionNodes: observable.shallow,
70 | props: observable,
71 | defaultCondition: observable.ref
72 | })
73 |
74 | reaction(() => {
75 | return this.prevNodeId + this.title + this.description + this.nextNode?.id + this.conditionNodes.length
76 | }, () => {
77 | if (!this.isSourceNode) {
78 | this.engine.handleChange(`${this.id} something changed`)
79 | }
80 | })
81 |
82 | observe(this.props, (change) => {
83 | if (!this.isSourceNode) {
84 | this.engine.handleChange(`${this.id} props changed`)
85 | }
86 | })
87 |
88 | }
89 |
90 | setNextNode(node: ProcessNode) {
91 | if (!node) {
92 | this.nextNode = null
93 | return
94 | }
95 |
96 |
97 | node.nextNode = this.nextNode
98 | node.prevNodeId = this.id
99 | this.nextNode = node
100 |
101 | }
102 |
103 | setConditionNodes(nodes: ProcessNode[]) {
104 | if (_.isEmpty(nodes)) {
105 | return
106 | }
107 | _.forEach(nodes, (node) => {
108 | node.prevNodeId = this.id
109 | })
110 | this.conditionNodes = nodes
111 | }
112 |
113 | from(node?: IProcessNode) {
114 | if (!node) return
115 | if (node.id && node.id !== this.id) {
116 | ProcessNodes.delete(this.id)
117 | ProcessNodes.set(node.id, this)
118 | this.id = node.id
119 | }
120 | this.type = node.type
121 | this.componentName = node.componentName || node.type
122 | this.title = node.title
123 | this.description = node.description
124 | this.props = node.props ?? {}
125 | if (node.engine) {
126 | this.engine = node.engine
127 | }
128 |
129 | if (node.nextNode) {
130 | this.nextNode = new ProcessNode(node.nextNode, this)
131 | }
132 | if (node.conditionNodes && node.conditionNodes.length > 0) {
133 | this.conditionNodes = node.conditionNodes?.map((node) => {
134 | return new ProcessNode(node, this)
135 | }) || []
136 | }
137 | }
138 |
139 | clone(parentNode?: ProcessNode) {
140 | const node = new ProcessNode({
141 | type: this.type,
142 | componentName: this.componentName,
143 | title: this.title,
144 | description: this.description,
145 | props: _.cloneDeep(this.props),
146 | }, parentNode)
147 | if (this.type == 'ROUTE') {
148 | const conditionResource = GlobalStore.getConditionActivityResource()
149 | const firstCondition = conditionResource.node.clone(node)
150 | const conditionDefault = conditionResource.node.clone(node)
151 | // conditionDefault.props = _.assign(conditionDefault.props, {defaultCondition: true})
152 | conditionDefault.defaultCondition = true
153 | node.setConditionNodes([firstCondition, conditionDefault])
154 | }
155 | return node
156 | }
157 |
158 | cloneDeep(node?: ProcessNode) {
159 | if (!node) {
160 | return
161 | }
162 | const cloneNode = _.cloneDeep(node)
163 | ProcessNodes.set(cloneNode.id, cloneNode)
164 | return cloneNode;
165 | }
166 |
167 | remove() {
168 | const parentNode = ProcessNodes.get(this.prevNodeId)
169 |
170 | if (this.type == "CONDITION") { //当前节点是条件节点
171 | const linkedIds = this.collectLinkIds()
172 | if (parentNode.conditionNodes.length > 2) { //当分支超过2个时，只需要删除当前节点，否则，清除整个路由节点
173 | parentNode.conditionNodes = _.filter(parentNode.conditionNodes, (conditionNode: any) => {
174 | return conditionNode.id !== this.id
175 | })
176 | } else {
177 | //只有2个分支的时候，删除当前分支所有链路节点，另一分支，如果有除了条件节点之外的节点，则保留，否则，清除整个路由节点
178 | const parentParentNode = ProcessNodes.get(parentNode.prevNodeId) //条件节点的父节点是路由节点，如果清除整个路由，需要找到父节点的父节点
179 | const parentNodeNextNode = parentNode.nextNode
180 | parentParentNode.setNextNode(null) //这里要断开节点链，否则可能造成递归渲染
181 |
182 |
183 | linkedIds.push(parentNode.id);
184 | const remainNode = _.find(parentNode.conditionNodes, (conditionNode: any) => {
185 | return conditionNode.id !== this.id
186 | })
187 | const {deleteIds, startNode, endNode} = this.processRaminRouteBranch(remainNode)
188 | linkedIds.push(...deleteIds)
189 | if (startNode) {
190 | parentParentNode.setNextNode(startNode)
191 | endNode.setNextNode(parentNodeNextNode)
192 | } else {
193 | parentParentNode?.setNextNode(parentNodeNextNode)
194 | }
195 | }
196 | _.forEach(linkedIds, (id: string) => {
197 | ProcessNodes.delete(id)
198 | })
199 | } else {
200 | if (this.nextNode) {
201 | this.nextNode.prevNodeId = this.prevNodeId
202 | }
203 | parentNode.nextNode = this.nextNode
204 | ProcessNodes.delete(this.id)
205 | }
206 | }
207 |
208 | /**
209 | * 添加条件分支
210 | */
211 | addConditionBranch() {
212 | if (this.type !== "ROUTE") {
213 | return
214 | }
215 | const conditionActivity = GlobalStore.getConditionActivityResource()?.node.clone(this)
216 | if (conditionActivity) {
217 | const newChildren = _.concat(this.conditionNodes.slice(0, this.conditionNodes.length - 1), conditionActivity, this.conditionNodes.slice(this.conditionNodes.length - 1))
218 | this.setConditionNodes(newChildren)
219 | }
220 | }
221 |
222 | /**
223 | * 获取下面链路上的所有节点id
224 | */
225 | collectLinkIds() {
226 | let ids = []
227 | if (this.nextNode) {
228 | ids.push(this.nextNode.id)
229 | ids = ids.concat(this.nextNode.collectLinkIds())
230 | }
231 | if (this.conditionNodes && this.conditionNodes.length > 0) {
232 | this.conditionNodes.forEach(child => {
233 | ids.push(child.id)
234 | ids = ids.concat(child.collectLinkIds())
235 | })
236 | }
237 | return ids
238 | }
239 |
240 | /**
241 | * 处理剩下的分支(default branch)，删除条件节点，保留其他节点
242 | * @param node
243 | */
244 | processRaminRouteBranch = (node: ProcessNode): {
245 | deleteIds?: string[],
246 | startNode?: ProcessNode,
247 | endNode?: ProcessNode
248 | } => {
249 | const ids = []
250 | const getStartNode = (node: ProcessNode) => {
251 | if (!node) {
252 | return null;
253 | }
254 | let startNode = node
255 | while (startNode?.type === 'CONDITION') {
256 | ids.push(startNode.id)
257 | startNode = startNode.nextNode
258 | }
259 | return startNode
260 | }
261 |
262 | const getEndNode = (node: ProcessNode) => {
263 | if (!node) {
264 | return null
265 | }
266 | let endNode = node
267 | while (endNode?.nextNode) {
268 | endNode = endNode.nextNode
269 | }
270 | return endNode
271 | }
272 | const startNode = getStartNode(node)
273 | const endNode = getEndNode(startNode)
274 | return {
275 | deleteIds: ids,
276 | startNode: startNode,
277 | endNode: endNode
278 | }
279 | }
280 |
281 | get index() {
282 | if (this.type === 'CONDITION') {
283 | const parentNode = ProcessNodes.get(this.prevNodeId)
284 | if (parentNode) {
285 | return parentNode.conditionNodes?.indexOf(this) || 0
286 | }
287 | }
288 | return null
289 | }
290 |
291 | isFirst() {
292 | if (this.type !== 'CONDITION') {
293 | return false
294 | }
295 | return this.index === 0
296 | }
297 |
298 | isLast() {
299 | if (this.type !== 'CONDITION') {
300 | return false
301 | }
302 | const parentNode = ProcessNodes.get(this.prevNodeId)
303 | return this.index === ((parentNode?.conditionNodes?.length || 0) - 1)
304 | }
305 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/model/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./ProcessNode"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/panel/StudioPanel.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from "react";
2 | import {css, Global} from "@emotion/react";
3 | import {GlobalStore} from "../store";
4 | import * as Icons from "../Icons"
5 |
6 | type StudioPanelProps = {
7 | children?: React.ReactNode;
8 | }
9 |
10 | export const StudioPanel: FC = ({children}) => {
11 | GlobalStore.registerIcons(Icons)
12 | return } = observable.ref({})
7 | export const DESIGNER_RESOURCES_STORE: { value: Record } = observable.ref({})
8 |
9 |
10 | export namespace GlobalStore {
11 | export function registerIcons(icons: Record) {
12 | Object.assign(DESIGNER_ICONS_STORE.value, icons)
13 | }
14 |
15 | export function getIcon(iconName: string) {
16 | return DESIGNER_ICONS_STORE.value[iconName]
17 | }
18 |
19 | export function registerActivityResources(activities: Record>) {
20 | const resourceMap = {};
21 | _.forEach(activities, (activity: ActivityFC, key: string) => {
22 | resourceMap[activity?.Resource?.componentName || key] = activity?.Resource
23 | })
24 | Object.assign(DESIGNER_RESOURCES_STORE.value, resourceMap)
25 | }
26 |
27 | export function getActivityResource(componentName: string): IResource {
28 | return DESIGNER_RESOURCES_STORE.value[componentName]
29 | }
30 |
31 | export function getAddableActivityResources(): IResource[] {
32 | return _.filter(_.values(DESIGNER_RESOURCES_STORE.value), (resource: IResource) => {
33 | return resource?.addable
34 | }) || []
35 | }
36 |
37 |
38 | /**
39 | * 获取条件节点资源
40 | */
41 | export function getConditionActivityResource(): IResource {
42 | return _.find(_.values(DESIGNER_RESOURCES_STORE.value), (resource: IResource) => {
43 | return resource?.type == 'CONDITION'
44 | })
45 | }
46 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/types.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {ProcessNode, ProcessNodeType} from "./model";
3 |
4 | export type IActivities={
5 | [key:string]:ActivityFC
6 | }
7 |
8 | export interface IResourceCreator {
9 | type: ProcessNodeType
10 | icon?: string;
11 | componentName?: string;
12 | title?: string;
13 | description?: string;
14 | props?: any;
15 | addable?: boolean;
16 | }
17 | export interface IResource extends IResourceCreator{
18 | node?: ProcessNode
19 | }
20 |
21 | export interface IActivity{
22 | nextActivity: React.ReactNode
23 | processNode: ProcessNode
24 | onClick?: (processNode: ProcessNode) => void
25 | }
26 |
27 | export type ActivityFC
流程结束
29 |
30 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/activity/RouteActivity.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from "react"
2 | import {RouteBranches} from "./RouteBranches";
3 | import styled from "@emotion/styled";
4 | import {IActivity} from "../types";
5 |
6 | const RouteActivityStyled = styled('div')({
7 | display: 'flex',
8 | overflow: 'visible',
9 | minWidth: '220px',
10 | minHeight: '180px',
11 | height: 'auto',
12 | borderBottom: '2px solid #cccccc',
13 | borderTop: '2px solid #cccccc',
14 | position: 'relative',
15 | marginTop: '15px',
16 | '.add-branch': {
17 | border: 'none',
18 | outline: 'none',
19 | userSelect: 'none',
20 | justifyContent: 'center',
21 | fontSize: '12px',
22 | padding: '0 10px',
23 | height: '30px',
24 | lineHeight: '30px',
25 | borderRadius: '15px',
26 | color: '#0089FF',
27 | background: '#fff',
28 | boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.1)',
29 | position: 'absolute',
30 | top: '-16px',
31 | left: '50%',
32 | transform: 'translateX(-50%)',
33 | transformOrigin: 'center center',
34 | cursor: 'pointer',
35 | zIndex: 1,
36 | display: 'inline-flex',
37 | alignItems: 'center',
38 | transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
39 |
40 | }
41 | })
42 |
43 | type RouteActivityProps = IActivity & {
44 | children?: React.ReactNode,
45 | }
46 |
47 | export const RouteActivity: FC{content}
96 | return <>
97 | {children}
33 |
13 |
39 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/panel/index.tsx:
--------------------------------------------------------------------------------
1 | export * from "./StudioPanel"
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/store.tsx:
--------------------------------------------------------------------------------
1 | import {observable} from "@formily/reactive";
2 | import {ActivityFC, IResource} from "./types";
3 | import _ from "lodash";
4 | import {JSX} from "react";
5 |
6 | export const DESIGNER_ICONS_STORE: { value: Record= React.FC
& {
28 | Resource?: IResource;
29 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/util.ts:
--------------------------------------------------------------------------------
1 | import {IResource, IResourceCreator} from "./types";
2 | import _ from "lodash";
3 | import {ProcessNode} from "./model";
4 |
5 | export namespace DesignerCore {
6 | export function createResource(resource: IResourceCreator): IResource {
7 | return _.assign(resource, {
8 | node: new ProcessNode({
9 | isSourceNode: true,
10 | type: resource.type,
11 | componentName: resource.componentName,
12 | title: resource.title,
13 | description: resource.description,
14 | props: resource.props
15 | })
16 | })
17 | }
18 |
19 | export function transformToSchema(processNode: ProcessNode) {
20 | function toSchema(processNode: ProcessNode) {
21 | if (!processNode) {
22 | return null
23 | }
24 | return {
25 | id: processNode.id,
26 | prevNodeId: processNode.prevNodeId,
27 | type: processNode.type,
28 | componentName: processNode.componentName,
29 | title: processNode.title,
30 | description: processNode.description,
31 | props: _.isEmpty(processNode.props) ? null : processNode.props,
32 | nextNode: toSchema(processNode.nextNode),
33 | conditionNodes: processNode.conditionNodes?.map(toSchema) || [],
34 | defaultCondition: processNode.defaultCondition
35 | }
36 | }
37 |
38 | return toSchema(processNode)
39 | }
40 | }
--------------------------------------------------------------------------------
/packages/approval-process-designer-react/src/widget/ActivityWidget.tsx:
--------------------------------------------------------------------------------
1 | import React, {FC} from "react";
2 | import {ProcessNode} from "../model";
3 | import {observer} from "@formily/react";
4 | import {useActivities} from "../hooks";
5 | import {ActivityFC} from "../types";
6 | import _ from "lodash"
7 | import {ProcessNodeContext} from "../context";
8 |
9 | type ActivityWidgetProps = {
10 | processNode: ProcessNode;
11 | [key: string]: any
12 | }
13 |
14 | export const ActivityWidget: FC{resource?.title}
49 |
23 |
37 | );
38 | ```
39 | 参考范例：[examples/approval-process-designer-react](examples/approval-process-designer-react)
40 |
41 | #### 互相吹捧，共同进步
42 |
43 |
--------------------------------------------------------------------------------
44 |