限制 step 跳转

src/app/common/deploy/tencent/TencentConfig.js

@@ -22,6 +22,7 @@ class TencentConfig extends Component {
             deployIdPassToPath: '',
             groupIdPassToPath: '',
             pathIdPassToConfig: '',
+            reachStep: '',
             currentStep: '',
             stepAllShow: false,
             deploying: '',
@@ -44,33 +45,39 @@ class TencentConfig extends Component {
                         case 'deployed':
                             this.setState({
                                 currentStep: 5,
+                                reachStep: 5,
                                 stepAllShow: true,
                                 deploying: 'deployed'
                             });
                             break;
                         case 'notificationed':
                             this.setState({
-                                currentStep: 4
+                                currentStep: 4,
+                                reachStep: 4,
                             });
                             break;
                         case 'pathed':
                             this.setState({
-                                currentStep: 3
+                                currentStep: 3,
+                                reachStep: 3,
                             });
                             break;
                         case 'grouped':
                             this.setState({
-                                currentStep: 2
+                                currentStep: 2,
+                                reachStep: 2
                             });
                             break;
                         case 'functioned':
                             this.setState({
-                                currentStep: 1
+                                currentStep: 1,
+                                reachStep: 1
                             });
                             break;
                         case 'created':
                             this.setState({
-                                currentStep: 0
+                                currentStep: 0,
+                                reachStep: 0
                             });
                             break;
                         case 'updated':
@@ -87,7 +94,8 @@ class TencentConfig extends Component {
                             break;
                         default:
                             this.setState({
-                                currentStep: 0
+                                currentStep: 0,
+                                reachStep: 0
                             });
                             break;
                     }
@@ -125,32 +133,38 @@ class TencentConfig extends Component {
                             this.setState({
                                 deploying: 'deployed',
                                 currentStep: 5,
+                                reachStep: 5,
                                 stepAllShow: true
                             });
                             break;
                         case 'notificationed':
                             this.setState({
-                                currentStep: 4
+                                currentStep: 4,
+                                reachStep: 4
                             });
                             break;
                         case 'pathed':
                             this.setState({
-                                currentStep: 3
+                                currentStep: 3,
+                                reachStep: 3
                             });
                             break;
                         case 'grouped':
                             this.setState({
-                                currentStep: 2
+                                currentStep: 2,
+                                reachStep: 2
                             });
                             break;
                         case 'functioned':
                             this.setState({
-                                currentStep: 1
+                                currentStep: 1,
+                                reachStep: 1
                             });
                             break;
                         case 'created':
                             this.setState({
-                                currentStep: 0
+                                currentStep: 0,
+                                reachStep: 0
                             });
                             break;
                         case 'updated':
@@ -167,7 +181,8 @@ class TencentConfig extends Component {
                             break;
                         default:
                             this.setState({
-                                currentStep: 0
+                                currentStep: 0,
+                                reachStep: 0
                             });
                             break;
                     }
@@ -268,10 +283,13 @@ class TencentConfig extends Component {
         );
     };
 
-    stepByStep = (stepNum) => {
-        this.setState({
-            currentStep: stepNum
-        })
+    stepByStep = (bool) => {
+        return (stepNum) => {
+            this.setState({
+                currentStep: stepNum,
+                reachStep: bool ? stepNum : this.state.reachStep
+            })
+        };
     };
 
     stepStatus = (value) => {
@@ -311,16 +329,19 @@ class TencentConfig extends Component {
                                     <Steps current={this.state.deploying !== 'deploying' ? this.state.currentStep : 4}
                                            style={{marginBottom: 30}}>
                                         <Step onClick={() => {
-                                            this.stepByStep(0)
+                                            this.stepByStep(false)(0)
                                         }} title={this.stepStatus(0)} description="云函数配置"/>
                                         <Step onClick={() => {
-                                            this.stepByStep(1)
+                                            if (this.state.reachStep > 0)
+                                                this.stepByStep(false)(1);
                                         }} title={this.stepStatus(1)} description="服务配置"/>
                                         <Step onClick={() => {
-                                            this.stepByStep(2)
+                                            if (this.state.reachStep > 1)
+                                                this.stepByStep(false)(2)
                                         }} title={this.stepStatus(2)} description="API 配置"/>
                                         <Step onClick={() => {
-                                            this.stepByStep(3)
+                                            if (this.state.reachStep > 2)
+                                                this.stepByStep(false)(3)
                                         }} title={this.stepStatus(3)} description="通知配置"/>
                                     </Steps>
                                     :
@@ -337,7 +358,7 @@ class TencentConfig extends Component {
                                                         switchRegion={this.switchRegion}
                                                         region={this.state.region}
                                                         trialcase={this.props.trialcase}
-                                                        stepByStep={this.stepByStep}
+                                                        stepByStep={this.stepByStep(true)}
                                                         userID={this.props.userID}
                                                         projectID={projectID}
                                                     />
@@ -358,7 +379,7 @@ class TencentConfig extends Component {
                                                         switchRegion={this.switchRegion}
                                                         region={this.state.region}
                                                         trialcase={this.props.trialcase}
-                                                        stepByStep={this.stepByStep}
+                                                        stepByStep={this.stepByStep(true)}
                                                         userID={this.props.userID}
                                                         projectID={projectID}
                                                         stepAllShow={this.state.stepAllShow}
@@ -377,7 +398,7 @@ class TencentConfig extends Component {
                                                 <Card title={msg} style={{marginBottom: 10}}>
                                                     <APIPathCardFetch
                                                         trialcase={this.props.trialcase}
-                                                        stepByStep={this.stepByStep}
+                                                        stepByStep={this.stepByStep(true)}
                                                         userID={this.props.userID}
                                                         projectID={projectID}
                                                         stepAllShow={this.state.stepAllShow}
@@ -398,7 +419,7 @@ class TencentConfig extends Component {
                                                     <NotificationCardFetch
                                                         userID={this.props.userID}
                                                         trialcase={this.props.trialcase}
-                                                        stepByStep={this.stepByStep}
+                                                        stepByStep={this.stepByStep(true)}
                                                         projectID={projectID}
                                                         stepAllShow={this.state.stepAllShow}
                                                     />