Skip to content

Commit e161c91

Browse files
xlornexlorne
committed
add flow FlowHeader
1 parent cf3e2ca commit e161c91

File tree

7 files changed

+145
-79
lines changed

7 files changed

+145
-79
lines changed

‎admin-pro-ui/src/components/flow/components/FlowButton.tsx

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, {useContext} from "react";
2+
import {FlowViewReactContext} from "@/components/flow/view";
3+
import {useSelector} from "react-redux";
4+
import {FlowReduxState} from "@/components/flow/store/FlowSlice";
5+
import {Button} from "antd";
6+
7+
interface FlowHeaderProps{
8+
setVisible:(visible:boolean)=>void;
9+
}
10+
11+
const FlowButton:React.FC<FlowHeaderProps> = (props) => {
12+
const flowViewReactContext = useContext(FlowViewReactContext);
13+
14+
const flowRecordContext = flowViewReactContext?.flowRecordContext;
15+
16+
const flowButtonClickContext = flowViewReactContext?.flowButtonClickContext;
17+
18+
const buttons = flowRecordContext?.getFlowButtons()||[];
19+
const requestLoading = useSelector((state: FlowReduxState) => state.flow.requestLoading);
20+
const contentHiddenVisible = useSelector((state: FlowReduxState) => state.flow.contentHiddenVisible);
21+
22+
const style = contentHiddenVisible ? {"display":"none"} : {};
23+
24+
if(flowRecordContext?.isEditable()){
25+
return (
26+
<div className={"flow-buttons-content"} style={style}>
27+
{buttons.map((item) => {
28+
const style = item.style && JSON.parse(item.style) || {};
29+
return (
30+
<Button
31+
loading={requestLoading}
32+
key={item.id}
33+
className={"flow-buttons-item"}
34+
style={{
35+
...style
36+
}}
37+
onClick={() => {
38+
flowButtonClickContext?.handlerClick(item);
39+
}}
40+
>{item.name}</Button>
41+
)
42+
})}
43+
44+
<Button
45+
color={"default"}
46+
className={"flow-buttons-item"}
47+
onClick={() => {
48+
props.setVisible(false);
49+
}}
50+
>
51+
关闭
52+
</Button>
53+
54+
</div>
55+
)
56+
}else {
57+
return (
58+
<div className={"flow-buttons-content"} style={style}>
59+
<Button
60+
loading={requestLoading}
61+
style={{
62+
marginLeft:'15%',
63+
marginRight:'15%'
64+
}}
65+
className={"flow-buttons-item"}
66+
onClick={() => {
67+
props.setVisible(false);
68+
}}
69+
>关闭</Button>
70+
</div>
71+
)
72+
}
73+
}
74+
75+
export default FlowButton;

‎admin-pro-ui/src/components/flow/components/FlowContent.tsx

+23-9
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import {FlowFormViewProps} from "@/components/flow/types";
33
import {FlowViewReactContext} from "@/components/flow/view";
44
import {useSelector} from "react-redux";
55
import {FlowReduxState} from "@/components/flow/store/FlowSlice";
6-
import {Tabs} from "antd";
6+
import {Tabs, TabsProps} from "antd";
77

8-
const FlowContent= () => {
8+
const FlowContent = () => {
99
const flowViewReactContext = useContext(FlowViewReactContext);
1010

1111
const flowRecordContext = flowViewReactContext?.flowRecordContext;
@@ -20,19 +20,33 @@ const FlowContent= () => {
2020
const contentHiddenVisible = useSelector((state: FlowReduxState) => state.flow.contentHiddenVisible);
2121

2222
useEffect(() => {
23-
if(!flowRecordContext?.isEditable()){
24-
setTimeout(()=>{
23+
if (!flowRecordContext?.isEditable()) {
24+
setTimeout(() => {
2525
formInstance?.disableAll();
26-
},100);
26+
}, 100);
2727
}
2828
}, []);
2929

30-
const style = contentHiddenVisible ? {"display":"none"} : {};
30+
const style = contentHiddenVisible ? {"display": "none"} : {};
31+
32+
const items = [
33+
{
34+
label: '流程详情',
35+
key: 'detail'
36+
},
37+
{
38+
label: '流程记录',
39+
key: 'record'
40+
},
41+
{
42+
label: '流程图',
43+
key: 'chart'
44+
}
45+
] as TabsProps['items'];
46+
3147
return (
3248
<div className={"flow-view-content"} style={style}>
33-
<Tabs>
34-
35-
</Tabs>
49+
<Tabs items={items}/>
3650
</div>
3751
)
3852
}

‎admin-pro-ui/src/components/flow/components/FlowHeader.tsx

+13-61
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,27 @@
11
import React, {useContext} from "react";
2+
import FlowButton from "@/components/flow/components/FlowButton";
23
import {FlowViewReactContext} from "@/components/flow/view";
3-
import {useSelector} from "react-redux";
4-
import {FlowReduxState} from "@/components/flow/store/FlowSlice";
5-
import {Button} from "antd";
64

75
interface FlowHeaderProps{
86
setVisible:(visible:boolean)=>void;
97
}
108

11-
const FlowHeader:React.FC<FlowHeaderProps> = (props) => {
9+
// 流程详情header头信息
10+
const FlowHeader:React.FC<FlowHeaderProps> = (props)=>{
1211
const flowViewReactContext = useContext(FlowViewReactContext);
12+
const flowRecordContext = flowViewReactContext?.flowRecordContext;
13+
const currentNode = flowRecordContext?.getCurrentNode();
1314

14-
const flowRecordContext = flowViewReactContext?.flowRecordContext;
15-
16-
const flowButtonClickContext = flowViewReactContext?.flowButtonClickContext;
17-
18-
const buttons = flowRecordContext?.getFlowButtons()||[];
19-
const requestLoading = useSelector((state: FlowReduxState) => state.flow.requestLoading);
20-
const contentHiddenVisible = useSelector((state: FlowReduxState) => state.flow.contentHiddenVisible);
21-
22-
const style = contentHiddenVisible ? {"display":"none"} : {};
23-
24-
if(flowRecordContext?.isEditable()){
25-
return (
26-
<div className={"flow-view-header"} style={style}>
27-
{buttons.map((item) => {
28-
const style = item.style && JSON.parse(item.style) || {};
29-
return (
30-
<Button
31-
loading={requestLoading}
32-
key={item.id}
33-
className={"flow-view-header-button"}
34-
style={{
35-
...style
36-
}}
37-
onClick={() => {
38-
flowButtonClickContext?.handlerClick(item);
39-
}}
40-
>{item.name}</Button>
41-
)
42-
})}
43-
44-
<Button
45-
color={"default"}
46-
className={"flow-view-header-button"}
47-
onClick={() => {
48-
props.setVisible(false);
49-
}}
50-
>
51-
关闭
52-
</Button>
53-
15+
return (
16+
<div className={"flow-header"}>
17+
<div className={"flow-header-left"}>
18+
{currentNode && currentNode.name}
5419
</div>
55-
)
56-
}else {
57-
return (
58-
<div className={"flow-view-header"} style={style}>
59-
<Button
60-
loading={requestLoading}
61-
style={{
62-
marginLeft:'15%',
63-
marginRight:'15%'
64-
}}
65-
className={"flow-view-header-button"}
66-
onClick={() => {
67-
props.setVisible(false);
68-
}}
69-
>关闭</Button>
20+
<div className={"flow-header-right"}>
21+
<FlowButton setVisible={props.setVisible}/>
7022
</div>
71-
)
72-
}
23+
</div>
24+
)
7325
}
7426

7527
export default FlowHeader;

‎admin-pro-ui/src/components/flow/components/FlowPage.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
UserSelectFormProps,
88
UserSelectFormViewKey
99
} from "@/components/flow/types";
10-
import FlowHeader from "@/components/flow/components/FlowHeader";
10+
import FlowButton from "@/components/flow/components/FlowButton";
1111
import {FlowReduxState, updateState} from "@/components/flow/store/FlowSlice";
1212
import {FlowTriggerContext} from "@/components/flow/domain/FlowTriggerContext";
1313
import {FlowStateContext} from "@/components/flow/domain/FlowStateContext";
@@ -21,6 +21,7 @@ import {FlowViewReactContext} from "../view";
2121
import FlowResult from "@/components/flow/components/FlowResult";
2222
import FlowContent from "@/components/flow/components/FlowContent";
2323
import FlowForm404 from "@/components/flow/components/FlowForm404";
24+
import FlowHeader from "@/components/flow/components/FlowHeader";
2425

2526

2627
interface FlowPageProps extends FlowViewProps {
@@ -75,6 +76,7 @@ const FlowPage:React.FC<FlowPageProps> = (props)=>{
7576
}}>
7677
<div className={"flow-view"}>
7778
<FlowHeader setVisible={props.setVisible}/>
79+
7880
{currentState.result && (
7981
<FlowResult/>
8082
)}

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

+6
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@ export class FlowRecordContext {
4242
return null;
4343
}
4444

45+
// 获取当前的节点信息
46+
getCurrentNode=()=>{
47+
const currentNodeCode = this.getNodeCode();
48+
return this.getNode(currentNodeCode);
49+
}
50+
4551
// 获取当前节点的表单数据 （内部使用）
4652
private getNodeState = (code: string) => {
4753
const historyRecords = this.data.historyRecords || [];

‎admin-pro-ui/src/components/flow/view/index.scss

+19-8
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,30 @@ $flow-footer-height: 80px;
1616
width: 100%;
1717
}
1818

19-
20-
.flow-view-header {
21-
height: $flow-footer-height;
19+
.flow-header{
2220
display: flex;
21+
justify-content: space-between;
2322
align-items: center;
23+
24+
.flow-header-left{
25+
font-size: 16pt;
26+
}
27+
28+
.flow-header-right{
29+
30+
}
31+
32+
}
33+
34+
.flow-buttons-content {
35+
display: flex;
2436
justify-content: center;
2537

26-
.flow-view-header-button {
27-
margin: 10px;
38+
.flow-buttons-item {
2839
font-size: 14px;
29-
padding: 8px 8px;
30-
width: 100%;
31-
border-color: $theme-primary-color;
40+
margin: 5px 5px;
41+
padding-left: 20px;
42+
padding-right: 20px;
3243
white-space: nowrap;
3344
overflow: hidden;
3445
text-overflow: ellipsis;

‎mobile-ui/src/components/flow/domain/FlowRecordContext.ts

+6
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@ export class FlowRecordContext {
4242
return null;
4343
}
4444

45+
// 获取当前的节点信息
46+
getCurrentNode=()=>{
47+
const currentNodeCode = this.getNodeCode();
48+
return this.getNode(currentNodeCode);
49+
}
50+
4551
// 获取当前节点的表单数据 （内部使用）
4652
private getNodeState = (code: string) => {
4753
const historyRecords = this.data.historyRecords || [];

0 commit comments

Comments
 (0)