Skip to content

Commit 7f9d1c6

Browse files
xlornexlorne
committed
add form
1 parent ed710cb commit 7f9d1c6

File tree

7 files changed

+430
-11
lines changed

7 files changed

+430
-11
lines changed

‎admin-ui/src/components/Flow/index.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import ControlPanel from "@/components/Flow/layout/ControlPanel";
1313
import NodePanel from "@/components/Flow/layout/NodePanel";
1414
import {message} from "antd";
1515
import {copy} from "@/components/Flow/panel/shortcuts";
16+
import FlowUtils from "@/components/Flow/utils";
1617

1718
export interface FlowActionType {
1819
getData: () => any;
@@ -23,15 +24,6 @@ interface FlowProps {
2324
actionRef?: React.Ref<any>
2425
}
2526

26-
27-
const generateUUID = ()=> {
28-
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
29-
const r = (Math.random() * 16) | 0;
30-
const v = c === 'x' ? r : (r & 0x3) | 0x8;
31-
return v.toString(16);
32-
});
33-
}
34-
3527
const Flow: React.FC<FlowProps> = (props) => {
3628
const container = useRef<HTMLDivElement>(null);
3729
const lfRef = useRef<LogicFlow>(null);
@@ -132,7 +124,7 @@ const Flow: React.FC<FlowProps> = (props) => {
132124
className={"flow-panel"}
133125
onDrag={async (type, properties) => {
134126
if (await nodeVerify(type)) {
135-
const UUID = generateUUID();
127+
const UUID = FlowUtils.generateUUID();
136128
lfRef.current?.dnd.startDrag({
137129
id: UUID,
138130
type: type,

‎admin-ui/src/components/Flow/panel/ButtonPanel.tsx‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import React from "react";
2+
import {
3+
ActionType,
4+
ModalForm,
5+
ProColumns,
6+
ProForm,
7+
ProFormColorPicker,
8+
ProFormDigit,
9+
ProFormSelect,
10+
ProFormText,
11+
ProTable
12+
} from "@ant-design/pro-components";
13+
import {Button, ColorPicker, Form, Popconfirm} from "antd";
14+
import FlowUtils from "@/components/Flow/utils";
15+
16+
17+
interface ButtonPanelProps {
18+
id: string;
19+
}
20+
21+
22+
const buttonEventOptions = [
23+
{
24+
label: "保存",
25+
value: "save"
26+
},
27+
{
28+
label: "提交",
29+
value: "submit"
30+
}
31+
]
32+
33+
34+
const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
35+
36+
const actionRef = React.useRef<ActionType>();
37+
38+
const [form] = ProForm.useForm();
39+
40+
const [visible, setVisible] = React.useState(false);
41+
42+
const columns = [
43+
{
44+
title: 'id',
45+
dataIndex: 'id',
46+
key: 'id',
47+
hidden: true
48+
},
49+
{
50+
title: '按钮名称',
51+
dataIndex: 'name',
52+
key: 'name',
53+
},
54+
{
55+
title: '事件类型',
56+
dataIndex: 'event',
57+
key: 'event',
58+
render: (value: string) => {
59+
return buttonEventOptions.find((item: any) => item.value == value)?.label;
60+
}
61+
},
62+
{
63+
title: '按钮颜色',
64+
dataIndex: 'color',
65+
valueType: 'color',
66+
key: 'color',
67+
},
68+
{
69+
title: '排序',
70+
dataIndex: 'order',
71+
key: 'order',
72+
},
73+
{
74+
title: "操作",
75+
valueType: "option",
76+
render: (_: any, record: any) => {
77+
return [
78+
<a
79+
key={"edit"}
80+
onClick={() => {
81+
form.resetFields();
82+
form.setFieldsValue(record);
83+
setVisible(true);
84+
}}
85+
>
86+
修改
87+
</a>,
88+
<Popconfirm
89+
key={"delete"}
90+
title={"确认要删除吗？"}
91+
onConfirm={() => {
92+
FlowUtils.deleteButton(props.id, record.id);
93+
actionRef.current?.reload();
94+
}}>
95+
<a>删除</a>
96+
</Popconfirm>
97+
]
98+
}
99+
}
100+
] as ProColumns[];
101+
102+
return (
103+
<>
104+
<ProTable
105+
columns={columns}
106+
actionRef={actionRef}
107+
key={"id"}
108+
search={false}
109+
options={false}
110+
pagination={false}
111+
request={async () => {
112+
const buttons = FlowUtils.getButtons(props.id);
113+
return {
114+
data: buttons,
115+
total: buttons.length,
116+
}
117+
}}
118+
toolBarRender={() => {
119+
return [
120+
<Button
121+
type={"primary"}
122+
onClick={() => {
123+
form.resetFields();
124+
setVisible(true);
125+
}}
126+
>添加按钮</Button>
127+
]
128+
}}
129+
/>
130+
131+
<ModalForm
132+
title={"添加节点按钮"}
133+
open={visible}
134+
form={form}
135+
modalProps={{
136+
onCancel: () => {
137+
setVisible(false);
138+
},
139+
onOk: () => {
140+
setVisible(false);
141+
},
142+
destroyOnClose: true
143+
}}
144+
onFinish={async (values) => {
145+
FlowUtils.updateButton(props.id, values);
146+
actionRef.current?.reload();
147+
setVisible(false);
148+
}}
149+
>
150+
<ProFormText
151+
name={"id"}
152+
hidden={true}
153+
/>
154+
155+
<ProFormText
156+
name={"name"}
157+
label={"按钮名称"}
158+
placeholder={"请输入按钮名称"}
159+
rules={[
160+
{
161+
required: true,
162+
message: '请输入按钮名称'
163+
}
164+
]}
165+
/>
166+
167+
<ProFormSelect
168+
name={"event"}
169+
label={"按钮类型"}
170+
placeholder={"请输入按钮类型"}
171+
rules={[
172+
{
173+
required: true,
174+
message: '请输入按钮类型'
175+
}
176+
]}
177+
options={buttonEventOptions}
178+
/>
179+
180+
<ProFormColorPicker
181+
name={"color"}
182+
label={"按钮颜色"}
183+
normalize={(value) => {
184+
return value.toHexString();
185+
}}
186+
placeholder={"请选择按钮颜色"}
187+
rules={[
188+
{
189+
required: true,
190+
message: '请选择按钮颜色'
191+
}
192+
]}
193+
/>
194+
195+
<ProFormDigit
196+
name={"order"}
197+
label={"排序"}
198+
min={0}
199+
fieldProps={{
200+
step:1
201+
}}
202+
placeholder={"请输入排序"}
203+
rules={[
204+
{
205+
required: true,
206+
message: '请输入排序'
207+
}
208+
]}
209+
/>
210+
211+
</ModalForm>
212+
</>
213+
)
214+
}
215+
216+
export default ButtonPanel;

‎admin-ui/src/components/Flow/panel/node.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {ProForm} from "@ant-design/pro-components";
33
import {Button, Drawer, Space, Tabs} from "antd";
44
import NodePanel from "@/components/Flow/panel/NodePanel";
55
import EdgePanel from "@/components/Flow/panel/EdgePanel";
6+
import ButtonPanel from "@/components/Flow/panel/ButtonPanel";
67

78
interface SettingPanelProps {
89
visible: boolean;
@@ -57,6 +58,14 @@ const NodeSettingPanel: React.FC<SettingPanelProps> = (props) => {
5758
/>
5859
)
5960
},
61+
{
62+
label: "节点按钮",
63+
key: "buttons",
64+
children: (
65+
<ButtonPanel
66+
id={props.properties?.id}/>
67+
)
68+
},
6069
{
6170
label: "关系设置",
6271
key: "edges",
@@ -65,7 +74,7 @@ const NodeSettingPanel: React.FC<SettingPanelProps> = (props) => {
6574
type={"node"}
6675
id={props.properties?.id}/>
6776
)
68-
}
77+
},
6978
]}
7079
/>
7180

‎admin-ui/src/components/Flow/panel/start.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import EdgePanel from "@/components/Flow/panel/EdgePanel";
44
import NodePanel from "@/components/Flow/panel/NodePanel";
55
import {ProForm} from "@ant-design/pro-components";
66
import {SettingPanelProps} from "@/components/Flow/panel/panel.types";
7+
import ButtonPanel from "@/components/Flow/panel/ButtonPanel";
78

89
const StartSettingPanel: React.FC<SettingPanelProps> = (props) => {
910

@@ -52,6 +53,14 @@ const StartSettingPanel: React.FC<SettingPanelProps> = (props) => {
5253
/>
5354
)
5455
},
56+
{
57+
label: "节点按钮",
58+
key: "buttons",
59+
children: (
60+
<ButtonPanel
61+
id={props.properties?.id}/>
62+
)
63+
},
5564
{
5665
label: "关系设置",
5766
key: "edges",

‎admin-ui/src/components/Flow/utils/index.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,90 @@ import GroovyScript from "@/components/Flow/utils/script";
22

33
const FlowUtils = {
44

5+
generateUUID (){
6+
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
7+
const r = (Math.random() * 16) | 0;
8+
const v = c === 'x' ? r : (r & 0x3) | 0x8;
9+
return v.toString(16);
10+
});
11+
},
12+
13+
getNode(nodeId:string){
14+
//@ts-ignore
15+
const data = window.lfRef?.current.getGraphData();
16+
const nodes = data.nodes;
17+
18+
const getNode = (nodeId: String) => {
19+
for (const node of nodes) {
20+
if (node.id === nodeId) {
21+
return node;
22+
}
23+
}
24+
}
25+
return getNode(nodeId);
26+
},
27+
28+
getButtons(nodeId:string){
29+
const node = FlowUtils.getNode(nodeId);
30+
const buttons = node.properties.buttons || [];
31+
buttons.sort((a:any,b:any)=>{
32+
return a.order - b.order;
33+
})
34+
return buttons;
35+
},
36+
37+
38+
updateButton(nodeId:string,button:any){
39+
//@ts-ignore
40+
const data = window.lfRef?.current.getGraphData();
41+
const nodes = data.nodes;
42+
const getNode = (nodeId: String) => {
43+
for (const node of nodes) {
44+
if (node.id === nodeId) {
45+
return node;
46+
}
47+
}
48+
}
49+
const node = getNode(nodeId);
50+
const buttons = node.properties.buttons || [];
51+
52+
let update = false;
53+
54+
for(const item of buttons){
55+
if(item.id == button.id){
56+
item.name = button.name;
57+
item.color = button.color;
58+
item.event = button.event;
59+
item.order = button.order;
60+
61+
update = true;
62+
}
63+
}
64+
if(!update){
65+
button.id = FlowUtils.generateUUID();
66+
node.properties.buttons = [...buttons,button];
67+
}
68+
this.render(data);
69+
},
70+
71+
72+
deleteButton(nodeId:string,buttonId:string){
73+
//@ts-ignore
74+
const data = window.lfRef?.current.getGraphData();
75+
const nodes = data.nodes;
76+
const getNode = (nodeId: String) => {
77+
for (const node of nodes) {
78+
if (node.id === nodeId) {
79+
return node;
80+
}
81+
}
82+
}
83+
const node = getNode(nodeId);
84+
const buttons = node.properties.buttons || [];
85+
node.properties.buttons = buttons.filter((item:any)=>item.id !== buttonId);
86+
this.render(data);
87+
},
88+
589
getEdges(nodeId: String) {
690
//@ts-ignore
791
const data = window.lfRef?.current.getGraphData();

0 commit comments

Comments
 (0)