Skip to content

Commit 35f9511

Browse files
xlornexlorne
committed
#72 change version
1 parent d343994 commit 35f9511

4 files changed

Lines changed: 186 additions & 138 deletions

File tree

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/version/components/version-content.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import {WorkflowVersion} from "@/components/design-editor/version/types";
3+
import {VersionPresenter} from "@/components/design-editor/version/presenter";
4+
import {VersionItem} from "./version-item";
5+
6+
7+
interface VersionContentProps {
8+
versions: WorkflowVersion[];
9+
presenter: VersionPresenter;
10+
}
11+
12+
export const VersionContent: React.FC<VersionContentProps> = (props) => {
13+
return (
14+
<div style={{
15+
padding: "10px",
16+
}}>
17+
{props.versions.map((version: WorkflowVersion) => {
18+
return (
19+
<VersionItem
20+
version={version}
21+
onUpdateVersionName={async (id, name) => {
22+
await props.presenter.updateVersionName(id, name);
23+
}}
24+
onVersionChange={async (versionId) => {
25+
await props.presenter.changeVersion(versionId);
26+
}}
27+
/>
28+
)
29+
})}
30+
</div>
31+
)
32+
}

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/version/components/version-item.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from "react";
2+
import {Badge, Input, message, Popconfirm, Space, Typography} from "antd";
3+
import {WorkflowVersion} from "@/components/design-editor/version/types";
4+
import dayjs from "dayjs";
5+
import {useDesignContext} from "@/components/design-panel/hooks/use-design-context";
6+
7+
const {Text} = Typography;
8+
9+
interface VersionItemProps {
10+
version: WorkflowVersion;
11+
onUpdateVersionName: (id: number, name: string) => Promise<void>;
12+
onVersionChange: (id: number) => Promise<void>;
13+
}
14+
15+
export const VersionItem: React.FC<VersionItemProps> = (props) => {
16+
const {version} = props;
17+
18+
const [editeVisible, setEditeVisible] = React.useState(false);
19+
const versionName = version.versionName;
20+
const versionDate = dayjs(version.updatedTime).format('YYYY-MM-DD HH:mm:ss');
21+
22+
const [title, setTitle] = React.useState(versionName);
23+
const {context} = useDesignContext();
24+
25+
return (
26+
<div
27+
style={{
28+
padding: 3,
29+
borderBottom: "1px solid #808080",
30+
}}
31+
>
32+
33+
<Space>
34+
{editeVisible && (
35+
<Space>
36+
<Input
37+
value={title}
38+
onChange={(e) => {
39+
setTitle(e.target.value);
40+
}}
41+
placeholder={"请输入版本名称"}
42+
/>
43+
<a onClick={() => {
44+
props.onUpdateVersionName(version.id, title).then(() => {
45+
setEditeVisible(false);
46+
message.success('保存成功')
47+
});
48+
}}>确定</a>
49+
<a onClick={() => {
50+
setEditeVisible(false)
51+
}}>取消</a>
52+
</Space>
53+
)}
54+
{!editeVisible && (
55+
<Space>
56+
<div
57+
style={{
58+
marginRight: 30,
59+
width: 150
60+
}}>
61+
<Badge
62+
count={version.current ? "当前" : undefined}
63+
offset={[20, 5]}
64+
style={{
65+
fontSize: 10,
66+
}}
67+
size="small"
68+
color={'green'}
69+
>
70+
<Text>版本名称：{versionName}</Text>
71+
</Badge>
72+
<div style={{
73+
fontSize: 12,
74+
color: "gray",
75+
}}>{versionDate}</div>
76+
</div>
77+
<a
78+
onClick={() => {
79+
setTitle(versionName);
80+
setEditeVisible(true)
81+
}}
82+
>编辑</a>
83+
{!version.current && (
84+
<Popconfirm
85+
title={"确认要切换到该版本吗？"}
86+
onConfirm={async () => {
87+
props.onVersionChange(version.id).then(() => {
88+
context.initState();
89+
});
90+
}}
91+
>
92+
<a>切换</a>
93+
</Popconfirm>
94+
)}
95+
</Space>
96+
)}
97+
</Space>
98+
99+
</div>
100+
)
101+
}
102+

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-editor/version/edtior-version.tsx‎

Lines changed: 15 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,9 @@
11
import React from "react";
22
import {VersionContainer, VersionSection} from "@/components/design-editor/styles";
3-
import {Badge, Button, Input, message, Popconfirm, Popover, Space, Tag, Typography} from "antd";
3+
import {Button, Popover} from "antd";
44
import {HistoryOutlined} from "@ant-design/icons";
55
import {useVersionPresenter} from "@/components/design-editor/version/hooks/use-version-presenter";
6-
import {WorkflowVersion} from "@/components/design-editor/version/types";
7-
import {VersionPresenter} from "@/components/design-editor/version/presenter";
8-
import dayjs from "dayjs";
9-
10-
const {Text} = Typography;
11-
12-
13-
interface VersionItemProps {
14-
version: WorkflowVersion;
15-
onUpdateVersionName: (id: number, name: string) => Promise<void>;
16-
onVersionChange: (id: number) => void;
17-
}
18-
19-
const VersionItem: React.FC<VersionItemProps> = (props) => {
20-
const {version} = props;
21-
22-
const [editeVisible, setEditeVisible] = React.useState(false);
23-
const versionName = version.versionName;
24-
const versionDate = dayjs(version.updatedTime).format('YYYY-MM-DD');
25-
26-
const [title, setTitle] = React.useState(versionName);
27-
28-
return (
29-
<div style={{
30-
padding: 3,
31-
borderBottom: "1px solid #808080",
32-
}}>
33-
<Space>
34-
{editeVisible && (
35-
<Space>
36-
<Input
37-
value={title}
38-
onChange={(e) => {
39-
setTitle(e.target.value);
40-
}}
41-
placeholder={"请输入版本名称"}
42-
/>
43-
<a onClick={() => {
44-
props.onUpdateVersionName(version.id, title).then(() => {
45-
setEditeVisible(false);
46-
message.success('保存成功')
47-
});
48-
}}>确定</a>
49-
<a onClick={() => {
50-
setEditeVisible(false)
51-
}}>取消</a>
52-
</Space>
53-
)}
54-
{!editeVisible && (
55-
<Space>
56-
<Text>{versionName}</Text>
57-
<Text>({versionDate})</Text>
58-
<a
59-
onClick={() => {
60-
setTitle(versionName);
61-
setEditeVisible(true)
62-
}}
63-
>编辑</a>
64-
{!version.current && (
65-
<Popconfirm
66-
title={"确认要切换到该版本吗？"}
67-
onConfirm={() => {
68-
props.onVersionChange(version.id);
69-
}}
70-
>
71-
<a>切换</a>
72-
</Popconfirm>
73-
74-
)}
75-
76-
{version.current && (
77-
<Tag color={'success'}>当前版本</Tag>
78-
)}
79-
</Space>
80-
)}
81-
</Space>
82-
</div>
83-
)
84-
}
85-
86-
87-
interface VersionContentProps {
88-
versions: WorkflowVersion[];
89-
presenter: VersionPresenter;
90-
}
91-
92-
const VersionContent: React.FC<VersionContentProps> = (props) => {
93-
return (
94-
<div style={{
95-
padding: "10px",
96-
}}>
97-
{props.versions.map((version: WorkflowVersion) => {
98-
return (
99-
<VersionItem
100-
version={version}
101-
onUpdateVersionName={async (id, name) => {
102-
await props.presenter.updateVersionName(id, name);
103-
}}
104-
onVersionChange={async (versionId) => {
105-
await props.presenter.changeVersion(versionId);
106-
}}
107-
/>
108-
)
109-
})}
110-
</div>
111-
)
112-
}
6+
import {VersionContent} from "./components/version-content";
1137

1148
export const EditorVersion = () => {
1159

@@ -118,23 +12,20 @@ export const EditorVersion = () => {
11812
return (
11913
<VersionContainer>
12014
<VersionSection>
121-
<Badge count={state.length}>
122-
<Popover
123-
content={<VersionContent versions={state} presenter={presenter}/>}
124-
trigger="click"
125-
placement="bottom"
15+
16+
<Popover
17+
content={<VersionContent versions={state} presenter={presenter}/>}
18+
trigger="click"
19+
placement="bottom"
20+
>
21+
<Button
22+
type={"text"}
23+
icon={<HistoryOutlined/>}
12624
>
127-
<Button
128-
type={"text"}
129-
icon={<HistoryOutlined/>}
130-
onClick={() => {
131-
console.log(presenter);
132-
}}
133-
>
134-
版本
135-
</Button>
136-
</Popover>
137-
</Badge>
25+
版本共{state.length}条
26+
</Button>
27+
</Popover>
28+
13829
</VersionSection>
13930
</VersionContainer>
14031
)

‎frontend/packages/flow-pc/flow-pc-design/src/components/design-panel/layout/header.tsx‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import {Button, Input, message, Popover, Space, Tabs} from "antd";
2+
import {Button, Form, Input, message, Popover, Space, Tabs} from "antd";
33
import {LayoutHeaderHeight, TabPanelType} from "../types";
44
import {useDesignContext} from "../hooks/use-design-context";
55
import {CloseOutlined, SaveOutlined} from "@ant-design/icons";
@@ -16,36 +16,59 @@ const Left = () => {
1616
const SaveAsButton = () => {
1717

1818
const [visible, setVisible] = React.useState(false);
19-
const [name, setName] = React.useState<string>();
19+
const [form] = Form.useForm();
2020
const {context} = useDesignContext();
2121

22-
const handleOk = () => {
23-
context.save(name);
24-
}
22+
React.useEffect(()=>{
23+
if(!visible){
24+
form.resetFields();
25+
}
26+
},[visible]);
2527

2628
return (
2729
<Popover
28-
title={"另存版本"}
2930
placement={"bottom"}
3031
trigger={"click"}
3132
open={visible}
3233
content={() => {
3334
return (
3435
<div>
35-
<Input
36-
placeholder={"请输入版本名称"}
37-
value={name}
38-
onChange={(e) => {
39-
setName(e.target.value)
36+
<Form
37+
layout={"vertical"}
38+
form={form}
39+
onFinish={(values)=>{
40+
context.save(values.name).then(()=>{
41+
setVisible(false);
42+
message.success('版本已保存');
43+
});
4044
}}
41-
/>
45+
>
46+
<Form.Item
47+
name="name"
48+
label={"版本名称"}
49+
required={true}
50+
rules={[
51+
{
52+
required: true,
53+
message:'请输入版本名称'
54+
}
55+
]}
56+
>
57+
<Input
58+
placeholder={"请输入版本名称"}
59+
/>
60+
</Form.Item>
61+
</Form>
4262
<Space
4363
style={{
4464
marginTop: 8,
4565
}}
4666
>
4767
<Button
48-
onClick={handleOk}
68+
onClick={()=>{
69+
form.submit();
70+
}}
71+
type="primary"
4972
>确定</Button>
5073
<Button
5174
onClick={() => {
@@ -63,7 +86,7 @@ const SaveAsButton = () => {
6386
setVisible(true)
6487
}}
6588
>
66-
另存版本
89+
版本另存
6790
</Button>
6891
</Popover>
6992
)

0 commit comments

Comments
 (0)