Skip to content

Commit 1872fcf

Browse files
xlornexlorne
committed
fix FlowContext
1 parent 38e7d84 commit 1872fcf

File tree

6 files changed

+222
-75
lines changed

6 files changed

+222
-75
lines changed

‎admin-pro-ui/src/components/flow/domain/FlowPanelContext.ts

Lines changed: 134 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from "react";
22
import {LogicFlow} from "@logicflow/core";
3-
import {NodeProperties, NodeType} from "@/components/flow/types";
3+
import {NodeButtonProperties, NodeProperties, NodeType} from "@/components/flow/types";
44
import {message} from "antd";
55
import {isEmpty} from "lodash-es";
6+
import {CustomButtonType} from "@/components/flow/flow/types";
7+
import {FormField} from "@/components/form/types";
8+
import ValidateUtils from "@/components/form/utils";
69
import NodeData = LogicFlow.NodeData;
710
import RegisterConfig = LogicFlow.RegisterConfig;
811
import GraphConfigData = LogicFlow.GraphConfigData;
@@ -15,10 +18,103 @@ class FlowPanelContext {
1518

1619
private readonly lfRef: React.RefObject<LogicFlow>;
1720

21+
// 按钮事件选项
22+
private readonly buttonEventOptions = [
23+
{
24+
label: "保存",
25+
value: "SAVE"
26+
},
27+
{
28+
label: "发起",
29+
value: "START"
30+
},
31+
{
32+
label: "提交",
33+
value: "SUBMIT"
34+
},
35+
{
36+
label: "预提交",
37+
value: "TRY_SUBMIT"
38+
},
39+
{
40+
label: "指定人员提交",
41+
value: "SPECIFY_SUBMIT"
42+
},
43+
{
44+
label: "驳回",
45+
value: "REJECT"
46+
},
47+
{
48+
label: "转办",
49+
value: "TRANSFER"
50+
},
51+
{
52+
label: "撤销",
53+
value: "RECALL"
54+
},
55+
{
56+
label: "延期",
57+
value: "POSTPONED"
58+
},
59+
{
60+
label: "催办",
61+
value: "URGE"
62+
},
63+
{
64+
label: "自定义接口",
65+
value: "CUSTOM"
66+
},
67+
{
68+
label: "自定义事件",
69+
value: "VIEW"
70+
},
71+
{
72+
label: "删除",
73+
value: "REMOVE"
74+
},
75+
] as {
76+
label: string;
77+
value: CustomButtonType;
78+
}[];
79+
80+
81+
private readonly defaultNodeButtons = [
82+
{
83+
type: "input",
84+
props: {
85+
name: "id",
86+
hidden: true
87+
}
88+
},
89+
{
90+
type: "input",
91+
props: {
92+
label: "按钮名称",
93+
name: "name",
94+
required: true,
95+
placeholder: "请输入按钮名称",
96+
validateFunction: ValidateUtils.validateNotEmpty
97+
}
98+
}
99+
] as FormField[];
100+
101+
18102
constructor(lfRef: React.RefObject<LogicFlow>) {
19103
this.lfRef = lfRef;
20104
}
21105

106+
/**
107+
* 获取按钮事件选项
108+
* @param value 事件值
109+
*/
110+
convertButtonValue = (value: string) => {
111+
return this.buttonEventOptions.find(item => item.value === value)?.label;
112+
}
113+
114+
getButtonEventOptions() {
115+
return this.buttonEventOptions;
116+
}
117+
22118
/**
23119
* 生成uuid
24120
*/
@@ -83,6 +179,43 @@ class FlowPanelContext {
83179
return []
84180
}
85181

182+
/**
183+
* 更新节点按钮数据
184+
*/
185+
updateButton(nodeId: string, button: NodeButtonProperties) {
186+
const data = this.getGraphData();
187+
if (data) {
188+
//@ts-ignore
189+
const nodes = data.nodes;
190+
const getNode = (nodeId: String) => {
191+
for (const node of nodes) {
192+
if (node.id === nodeId) {
193+
return node;
194+
}
195+
}
196+
}
197+
const node = getNode(nodeId);
198+
const buttons = node.properties.buttons || [];
199+
let update = false;
200+
for (const item of buttons) {
201+
if (item.id == button.id) {
202+
item.name = button.name;
203+
item.style = button.style;
204+
item.type = button.type;
205+
item.order = button.order;
206+
item.groovy = button.groovy;
207+
item.eventKey = button.eventKey;
208+
update = true;
209+
}
210+
}
211+
if (!update) {
212+
button.id = this.generateUUID();
213+
node.properties.buttons = [...buttons, button];
214+
}
215+
this.render(data as GraphConfigData);
216+
}
217+
}
218+
86219

87220
/**
88221
* 添加节点

‎admin-pro-ui/src/components/flow/nodes/panel/ButtonPanel.tsx

Lines changed: 5 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -14,72 +14,12 @@ import {Button, ColorPicker, Popconfirm, Space} from "antd";
1414
import FlowUtils from "@/components/flow/utils";
1515
import ScriptModal from "@/components/flow/nodes/panel/ScriptModal";
1616
import {EyeOutlined, ReloadOutlined} from "@ant-design/icons";
17-
import {CustomButtonType} from "@/components/flow/flow/types";
1817
import FlowContext from "@/components/flow/domain/FlowContext";
1918

2019
interface ButtonPanelProps {
2120
id: string;
2221
}
2322

24-
const buttonEventOptions = [
25-
{
26-
label: "保存",
27-
value: "SAVE"
28-
},
29-
{
30-
label: "发起",
31-
value: "START"
32-
},
33-
{
34-
label: "提交",
35-
value: "SUBMIT"
36-
},
37-
{
38-
label: "预提交",
39-
value: "TRY_SUBMIT"
40-
},
41-
{
42-
label: "指定人员提交",
43-
value: "SPECIFY_SUBMIT"
44-
},
45-
{
46-
label: "驳回",
47-
value: "REJECT"
48-
},
49-
{
50-
label: "转办",
51-
value: "TRANSFER"
52-
},
53-
{
54-
label: "撤销",
55-
value: "RECALL"
56-
},
57-
{
58-
label: "延期",
59-
value: "POSTPONED"
60-
},
61-
{
62-
label: "催办",
63-
value: "URGE"
64-
},
65-
{
66-
label: "自定义接口",
67-
value: "CUSTOM"
68-
},
69-
{
70-
label: "自定义事件",
71-
value: "VIEW"
72-
},
73-
{
74-
label: "删除",
75-
value: "REMOVE"
76-
},
77-
] as {
78-
label: string;
79-
value: CustomButtonType;
80-
}[];
81-
82-
8323
const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
8424

8525
const actionRef = React.useRef<ActionType>();
@@ -113,7 +53,7 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
11353
dataIndex: 'type',
11454
key: 'type',
11555
render: (value: string) => {
116-
return buttonEventOptions.find((item: any) => item.value == value)?.label;
56+
return flowContext.getFlowPanelContext()?.convertButtonValue(value);
11757
}
11858
},
11959
{
@@ -202,7 +142,7 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
202142
destroyOnClose: true
203143
}}
204144
onFinish={async (values) => {
205-
FlowUtils.updateButton(props.id, values);
145+
flowContext.getFlowPanelContext()?.updateButton(props.id, values);
206146
setVisible(false);
207147
actionRef.current?.reload();
208148
}}
@@ -238,15 +178,15 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
238178
/>
239179
</Space>
240180
)}
241-
normalize={(value:any) => {
181+
normalize={(value: any) => {
242182
if (value) {
243183
return {
244184
background: value.toHexString()
245185
};
246186
}
247187
return value;
248188
}}
249-
getValueProps={(value:any) => {
189+
getValueProps={(value: any) => {
250190
const color = value?.background;
251191
if (color) {
252192
return {
@@ -285,7 +225,7 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
285225
message: '请输入按钮类型'
286226
}
287227
]}
288-
options={buttonEventOptions}
228+
options={flowContext.getFlowPanelContext()?.getButtonEventOptions()}
289229
onChange={(value: string) => {
290230
setType(value);
291231
}}

‎admin-pro-ui/src/components/flow/types.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,24 @@ export type NodeState = "done" | "wait" | "undone" | "current";
44
// 节点类型
55
export type NodeType = 'start-node' | 'node-node' | 'over-node' | 'circulate-node';
66

7+
// 自定义按钮类型
8+
export type CustomButtonType =
9+
| 'RELOAD' // 重新加载
10+
| 'SAVE' // 保存
11+
| 'START' // 发起
12+
| 'SUBMIT' // 提交
13+
| 'TRY_SUBMIT' // 预提交
14+
| 'SPECIFY_SUBMIT' // 指定人员提交
15+
| 'REJECT' // 驳回
16+
| 'TRANSFER' // 转办
17+
| 'RECALL' // 撤销
18+
| 'POSTPONED' // 延期
19+
| 'URGE' // 催办
20+
| 'CUSTOM' // 自定义后端接口
21+
| 'VIEW' // 自定义前端事件
22+
| 'REMOVE'; // 删除
723

24+
// 节点属性
825
export interface NodeProperties {
926
name: string;
1027
code: string;
@@ -20,3 +37,14 @@ export interface NodeProperties {
2037
settingVisible?: boolean;
2138
flowState?: NodeState;
2239
}
40+
41+
// 节点按钮属性
42+
export interface NodeButtonProperties {
43+
id:string;
44+
name:string;
45+
type:CustomButtonType;
46+
style:string;
47+
order:number;
48+
groovy:string;
49+
eventKey:string;
50+
}

‎admin-pro-ui/src/components/form/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export interface FormAction {
4949
setFieldsValue: (values: any) => void;
5050
// 设置Field字段
5151
setFields: (fields: FiledData[]) => void;
52+
// 获取Field属性
53+
getFieldProps: (name: NamePath) => FormField | null;
5254
// 校验表单
5355
validate: () => Promise<boolean>;
5456
}
@@ -257,6 +259,15 @@ const Form:React.FC<FormProps> = (props)=>{
257259
return form.getFieldsValue();
258260
},
259261

262+
getFieldProps(name: NamePath): FormField | null {
263+
for (const field of fields) {
264+
if (namePathEqual(field.props.name,name)) {
265+
return field;
266+
}
267+
}
268+
return null;
269+
},
270+
260271
reloadOptions:(name: NamePath) => {
261272
optionContext.notify(name);
262273
},

‎admin-pro-ui/src/components/form/utils.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {FormValidateContent} from "@/components/form/validate";
2+
3+
class ValidateUtils {
4+
5+
/**
6+
* 非空校验
7+
* @param content 校验对象
8+
* @param message 错误信息
9+
*/
10+
static validateNotEmpty = async (content: FormValidateContent, message?: string) => {
11+
const field = content.getFieldProps();
12+
const errorMessage = message ? message : field?.props.label + '不能为空' || '不能为空';
13+
const value = content.value;
14+
if (value) {
15+
if (Array.isArray(value)) {
16+
if (value.length === 0) {
17+
return [errorMessage];
18+
}
19+
} else {
20+
return [];
21+
}
22+
} else {
23+
return [errorMessage];
24+
}
25+
}
26+
}
27+
28+
export default ValidateUtils;

0 commit comments

Comments
 (0)