部署 进度条

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

@@ -138,7 +138,8 @@ class APIGroupCard extends Component {
                     if (data.create_apiGWGroup !== null) {
                         this.setState({
                             showOK: true
-                        })
+                        });
+                        this.props.stepByStep(2);
                     }
                     setTimeout(()=>{
                         this.setState({
@@ -165,7 +166,8 @@ class APIGroupCard extends Component {
                     if (data.update_apiGWGroup !== null) {
                         this.setState({
                             showOK: true
-                        })
+                        });
+                        this.props.stepByStep(2);
                     }
                     setTimeout(()=>{
                         this.setState({

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

@@ -103,7 +103,8 @@ class APIPathCard extends Component {
                         if (data.create_apiGWPath !== null) {
                             this.setState({
                                 showOK: true
-                            })
+                            });
+                            this.props.stepByStep(3);
                         }
                         setTimeout(()=>{
                             this.setState({
@@ -127,7 +128,8 @@ class APIPathCard extends Component {
                     if (data.update_apiGWPath !== null) {
                         this.setState({
                             showOK: true
-                        })
+                        });
+                        this.props.stepByStep(3);
                     }
                     setTimeout(()=>{
                         this.setState({

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

@@ -159,7 +159,8 @@ class DeployCard extends Component {
                     if (data.create_deploy !== null) {
                         this.setState({
                             showOK: true
-                        })
+                        });
+                        this.props.stepByStep(1);
                     }
                     setTimeout(() => {
                         this.setState({
@@ -189,7 +190,8 @@ class DeployCard extends Component {
                     if (data.update_deploy !== null) {
                         this.setState({
                             showOK: true
-                        })
+                        });
+                        this.props.stepByStep(1);
                     }
                     setTimeout(() => {
                         this.setState({

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

@@ -91,14 +91,14 @@ class NotificationCard extends Component {
                 {
                     manageUsers.includes(this.props.userID) ?
                         <Button type="primary" onClick={() => {
-                            console.log('hello');
+                            this.props.stepByStep(4);
                         }}><FormattedMessage id="save"/></Button>
                         :
                         this.props.trialcase?
                             ''
                             :
                             <Button type="primary" onClick={() => {
-                                console.log('hello');
+                                this.props.stepByStep(4);
                             }}><FormattedMessage id="save"/></Button>
                 }
 

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

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Row, Col, Card, Button, Spin, Alert} from 'antd';
+import {Row, Col, Card, Button, Spin, Alert, Steps} from 'antd';
 import axios from 'axios';
 import APIGroupCard from './APIGroupCard';
 import APIPathCard from './APIPathCard';
@@ -12,6 +12,8 @@ import {FormattedMessage} from 'react-intl';
 import gql from "graphql-tag";
 import {Query} from "react-apollo";
 
+const Step = Steps.Step;
+
 class TencentConfig extends Component {
     constructor(props) {
         super(props);
@@ -19,7 +21,8 @@ class TencentConfig extends Component {
             region: '',
             couldDeploy: false,
             deployIdPassToPath: '',
-            groupIdPassToPath: ''
+            groupIdPassToPath: '',
+            currentStep: 0
         };
     }
 
@@ -28,7 +31,8 @@ class TencentConfig extends Component {
             couldDeploy: false,
             region: '',
             deployIdPassToPath: '',
-            groupIdPassToPath: ''
+            groupIdPassToPath: '',
+            currentStep: 0
         });
     }
 
@@ -50,9 +54,9 @@ class TencentConfig extends Component {
             })
     };
 
-    deployFC = (schema,deploy,api,group) => {
+    deployFC = (schema, deploy, api, group) => {
 
-        if(schema && deploy && api && group){
+        if (schema && deploy && api && group) {
             axios.get(`${deployUrl}`,
                 // axios.get(`http://localhost:8999/graphql/deployall`,
                 {
@@ -76,6 +80,22 @@ class TencentConfig extends Component {
 
     };
 
+    stepByStep = (stepNum) => {
+        console.log(2);
+        this.setState({
+            currentStep: stepNum
+        })
+    };
+
+    stepStatus = (value) => {
+        if (this.state.currentStep === value)
+            return '进行中';
+        else if (this.state.currentStep > value)
+            return '完成';
+        else
+            return '等待';
+    };
+
     render() {
         let projectID = this.props.projectID ? this.props.projectID : 'ecommerce_projectID';
 
@@ -102,134 +122,308 @@ class TencentConfig extends Component {
                         let dataProject = data.project_by_id;
                         let {cloud_id, apiGWGroup_id, deploy_id, projectType, schema_id, wxConfig_id, projectName} = dataProject;
 
+                        let defaultName = projectName;
+
+                        console.log('ccc', cloud_id);
                         if (cloud_id !== null && cloud_id.cloudName === 'tencent') {
                             group = apiGWGroup_id;
                             deploy = deploy_id;
                             cloudID = cloud_id.id;
-                            if(projectType === 'graphql')
+                            if (projectType === 'graphql')
                                 schemaID = schema_id.id;
                             else
-                                configID = wxConfig_id.id
-                        }
+                                configID = wxConfig_id.id;
 
-                        let defaultName = projectName;
-                        return (
-                            <div>
-                                {
-                                    projectType === 'graphql' ?
-                                        schema_id.schemaState === 'ok' ?
-                                            ''
+                            return (
+                                <div>
+                                    {
+                                        projectType === 'graphql' ?
+                                            schema_id.schemaState === 'ok' ?
+                                                ''
+                                                :
+                                                this.props.trialcase ?
+                                                    ''
+                                                    :
+                                                    <div style={{marginBottom: 10}}>
+                                                        <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
+                                                               banner closable/>
+                                                    </div>
                                             :
-                                            this.props.trialcase ?
+                                            ''
+                                    }
+                                    <div style={{padding: '30px'}}>
+                                        <Row gutter={16}>
+                                            <Col span={14}>
+                                                <FormattedMessage id="fc Deploy">
+                                                    {
+                                                        msg =>
+                                                            <Card title={msg} style={{marginBottom: 10}}>
+                                                                <DeployCard
+                                                                    deploy={deploy}
+                                                                    switchRegion={this.switchRegion}
+                                                                    region={this.state.region}
+                                                                    defalutName={defaultName}
+                                                                    userID={this.props.userID}
+                                                                    cloudID={cloudID}
+                                                                    trialcase={this.props.trialcase}
+                                                                    pass={this.pass}
+                                                                />
+                                                            </Card>
+                                                    }
+                                                </FormattedMessage>
+                                                <FormattedMessage id="API Group">
+                                                    {
+                                                        msg =>
+                                                            <Card title={msg} style={{marginBottom: 10}}>
+                                                                <APIGroupCard
+                                                                    group={group}
+                                                                    userID={this.props.userID}
+                                                                    switchRegion={this.switchRegion}
+                                                                    region={this.state.region}
+                                                                    cloudID={cloudID}
+                                                                    trialcase={this.props.trialcase}
+                                                                    pass={this.pass}
+                                                                />
+                                                            </Card>
+                                                    }
+                                                </FormattedMessage>
+                                                <Query query={gql(SHOW_APIGWPATH)}
+                                                       variables={{apiGWGroup_id: apiGWGroup_id ? apiGWGroup_id.id : ''}}>
+                                                    {
+                                                        ({loading, error, data}) => {
+                                                            if (loading) {
+                                                                return <Spin style={{marginLeft: 3}}/>
+                                                            }
+                                                            if (error) {
+                                                                return 'error!';
+                                                            }
+                                                            if (data.apiGWPath_by_props.length > 0)
+                                                                path = data.apiGWPath_by_props[0];
+                                                            return (
+                                                                <FormattedMessage id="API Path">
+                                                                    {
+                                                                        msg =>
+                                                                            <Card title={msg}
+                                                                                  style={{marginBottom: 10}}>
+                                                                                <APIPathCard
+                                                                                    path={path}
+                                                                                    defalutName={defaultName}
+                                                                                    userID={this.props.userID}
+                                                                                    trialcase={this.props.trialcase}
+                                                                                    deployID={deploy ? deploy.id : this.state.deployIdPassToPath}
+                                                                                    groupID={group ? group.id : this.state.groupIdPassToPath}
+                                                                                />
+                                                                            </Card>
+                                                                    }
+                                                                </FormattedMessage>
+                                                            )
+                                                        }
+                                                    }
+                                                </Query>
+                                                <FormattedMessage id="Notification">
+                                                    {
+                                                        msg =>
+                                                            <Card title={msg}>
+                                                                <NotificationCard
+                                                                    userID={this.props.userID}
+                                                                    defalutName={defaultName}
+                                                                    trialcase={this.props.trialcase}
+                                                                />
+                                                            </Card>
+                                                    }
+                                                </FormattedMessage>
+                                            </Col>
+                                            <Col offset={2} span={6}>
+                                                {
+                                                    this.props.trialcase ?
+                                                        ''
+                                                        :
+                                                        projectType === 'graphql' ?
+                                                            schema_id.schemaState === 'ok' ?
+                                                                <Button type='primary'
+                                                                        onClick={() => this.deployFC(schemaID, deploy, api, group)}><FormattedMessage
+                                                                    id="deploy"/>!</Button>
+                                                                :
+                                                                <Button type='primary' disabled><FormattedMessage
+                                                                    id="deploy"/>!</Button>
+                                                            :
+                                                            <Button type='primary' onClick={() => {
+                                                            }}><FormattedMessage id="deploy"/>!</Button>
+
+                                                }
+                                            </Col>
+                                        </Row>
+                                    </div>
+                                </div>
+                            )
+
+                        } else {
+
+                            return (
+                                <div>
+                                    {
+                                        projectType === 'graphql' ?
+                                            schema_id.schemaState === 'ok' ?
                                                 ''
                                                 :
-                                                <div style={{marginBottom: 10}}>
-                                                    <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
-                                                           banner closable/>
-                                                </div>
-                                        :
-                                        ''
-                                }
-                                <div style={{padding: '30px'}}>
-                                    <Row gutter={16}>
-                                        <Col span={14}>
-                                            <FormattedMessage id="fc Deploy">
+                                                this.props.trialcase ?
+                                                    ''
+                                                    :
+                                                    <div style={{marginBottom: 10}}>
+                                                        <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
+                                                               banner closable/>
+                                                    </div>
+                                            :
+                                            ''
+                                    }
+                                    <div style={{padding: '30px'}}>
+                                        <Row gutter={16}>
+                                            <Col span={14}>
+
+                                                <Steps current={this.state.currentStep} style={{marginBottom: 30}}>
+                                                    <Step title={this.stepStatus(0)} description="云函数配置"/>
+                                                    <Step title={this.stepStatus(1)} description="服务配置"/>
+                                                    <Step title={this.stepStatus(2)} description="API 配置"/>
+                                                    <Step title={this.stepStatus(3)} description="通知配置"/>
+                                                </Steps>
+
                                                 {
-                                                    msg =>
-                                                        <Card title={msg} style={{marginBottom: 10}}>
-                                                            <DeployCard
-                                                                deploy={deploy}
-                                                                switchRegion={this.switchRegion}
-                                                                region={this.state.region}
-                                                                defalutName={defaultName}
-                                                                userID={this.props.userID}
-                                                                cloudID={cloudID}
-                                                                trialcase={this.props.trialcase}
-                                                                pass={this.pass}
-                                                            />
-                                                        </Card>
+                                                    this.state.currentStep === 0 ?
+                                                        <FormattedMessage id="fc Deploy">
+                                                            {
+                                                                msg =>
+                                                                    <Card title={msg} style={{marginBottom: 10}}>
+                                                                        <DeployCard
+                                                                            deploy={deploy}
+                                                                            switchRegion={this.switchRegion}
+                                                                            region={this.state.region}
+                                                                            defalutName={defaultName}
+                                                                            userID={this.props.userID}
+                                                                            cloudID={cloudID}
+                                                                            trialcase={this.props.trialcase}
+                                                                            pass={this.pass}
+                                                                            stepByStep={this.stepByStep}
+                                                                        />
+                                                                    </Card>
+                                                            }
+                                                        </FormattedMessage>
+                                                        :
+                                                        ''
                                                 }
-                                            </FormattedMessage>
-                                            <FormattedMessage id="API Group">
+
                                                 {
-                                                    msg =>
-                                                        <Card title={msg} style={{marginBottom: 10}}>
-                                                            <APIGroupCard
-                                                                group={group}
-                                                                userID={this.props.userID}
-                                                                switchRegion={this.switchRegion}
-                                                                region={this.state.region}
-                                                                cloudID={cloudID}
-                                                                trialcase={this.props.trialcase}
-                                                                pass={this.pass}
-                                                            />
-                                                        </Card>
+                                                    this.state.currentStep === 1 ?
+                                                        <FormattedMessage id="API Group">
+                                                            {
+                                                                msg =>
+                                                                    <Card title={msg} style={{marginBottom: 10}}>
+                                                                        <APIGroupCard
+                                                                            group={group}
+                                                                            userID={this.props.userID}
+                                                                            switchRegion={this.switchRegion}
+                                                                            region={this.state.region}
+                                                                            cloudID={cloudID}
+                                                                            trialcase={this.props.trialcase}
+                                                                            pass={this.pass}
+                                                                            stepByStep={this.stepByStep}
+                                                                        />
+                                                                    </Card>
+                                                            }
+                                                        </FormattedMessage>
+                                                        :
+                                                        ''
                                                 }
-                                            </FormattedMessage>
-                                            <Query query={gql(SHOW_APIGWPATH)}
-                                                   variables={{apiGWGroup_id: apiGWGroup_id ? apiGWGroup_id.id : ''}}>
                                                 {
-                                                    ({loading, error, data}) => {
-                                                        if (loading) {
-                                                            return <Spin style={{marginLeft: 3}}/>
-                                                        }
-                                                        if (error) {
-                                                            return 'error!';
-                                                        }
-                                                        if (data.apiGWPath_by_props.length > 0)
-                                                            path = data.apiGWPath_by_props[0];
-                                                        return (
-                                                            <FormattedMessage id="API Path">
-                                                                {
-                                                                    msg =>
-                                                                        <Card title={msg} style={{marginBottom: 10}}>
-                                                                            <APIPathCard
-                                                                                path={path}
-                                                                                defalutName={defaultName}
-                                                                                userID={this.props.userID}
-                                                                                trialcase={this.props.trialcase}
-                                                                                deployID={deploy ? deploy.id : this.state.deployIdPassToPath}
-                                                                                groupID={group ? group.id : this.state.groupIdPassToPath}
-                                                                            />
-                                                                        </Card>
+                                                    this.state.currentStep === 2 ?
+                                                        <Query query={gql(SHOW_APIGWPATH)}
+                                                               variables={{apiGWGroup_id: apiGWGroup_id ? apiGWGroup_id.id : ''}}>
+                                                            {
+                                                                ({loading, error, data}) => {
+                                                                    if (loading) {
+                                                                        return <Spin style={{marginLeft: 3}}/>
+                                                                    }
+                                                                    if (error) {
+                                                                        return 'error!';
+                                                                    }
+                                                                    if (data.apiGWPath_by_props.length > 0)
+                                                                        path = data.apiGWPath_by_props[0];
+                                                                    return (
+                                                                        <FormattedMessage id="API Path">
+                                                                            {
+                                                                                msg =>
+                                                                                    <Card title={msg}
+                                                                                          style={{marginBottom: 10}}>
+                                                                                        <APIPathCard
+                                                                                            path={path}
+                                                                                            defalutName={defaultName}
+                                                                                            userID={this.props.userID}
+                                                                                            trialcase={this.props.trialcase}
+                                                                                            deployID={deploy ? deploy.id : this.state.deployIdPassToPath}
+                                                                                            groupID={group ? group.id : this.state.groupIdPassToPath}
+                                                                                            stepByStep={this.stepByStep}
+                                                                                        />
+                                                                                    </Card>
+                                                                            }
+                                                                        </FormattedMessage>
+                                                                    )
                                                                 }
-                                                            </FormattedMessage>
-                                                        )
-                                                    }
+                                                            }
+                                                        </Query>
+                                                        :
+                                                        ''
                                                 }
-                                            </Query>
-                                            <FormattedMessage id="Notification">
+
                                                 {
-                                                    msg =>
-                                                        <Card title={msg}>
-                                                            <NotificationCard
-                                                                userID={this.props.userID}
-                                                                defalutName={defaultName}
-                                                                trialcase={this.props.trialcase}
-                                                            />
-                                                        </Card>
+                                                    this.state.currentStep === 3 ?
+                                                        <FormattedMessage id="Notification">
+                                                            {
+                                                                msg =>
+                                                                    <Card title={msg}>
+                                                                        <NotificationCard
+                                                                            userID={this.props.userID}
+                                                                            defalutName={defaultName}
+                                                                            trialcase={this.props.trialcase}
+                                                                            stepByStep={this.stepByStep}
+                                                                        />
+                                                                    </Card>
+                                                            }
+                                                        </FormattedMessage>
+                                                        :
+                                                        ''
                                                 }
-                                            </FormattedMessage>
-                                        </Col>
-                                        <Col offset={2} span={6}>
+
+                                            </Col>
+
                                             {
-                                                this.props.trialcase ?
-                                                    ''
-                                                    :
-                                                    projectType === 'graphql' ?
-                                                        schema_id.schemaState === 'ok' ?
-                                                            <Button type='primary' onClick={() => this.deployFC(schemaID,deploy,api,group)}><FormattedMessage id="deploy"/>!</Button>
-                                                            :
-                                                            <Button type='primary' disabled><FormattedMessage id="deploy"/>!</Button>
-                                                        :
-                                                        <Button type='primary' onClick={() =>{}}><FormattedMessage id="deploy"/>!</Button>
+                                                this.state.currentStep === 4 ?
+                                                    <Col offset={2} span={6}>
+                                                        {
+                                                            this.props.trialcase ?
+                                                                ''
+                                                                :
+                                                                projectType === 'graphql' ?
+                                                                    schema_id.schemaState === 'ok' ?
+                                                                        <Button type='primary'
+                                                                                onClick={() => this.deployFC(schemaID, deploy, api, group)}><FormattedMessage
+                                                                            id="deploy"/>!</Button>
+                                                                        :
+                                                                        <Button type='primary'
+                                                                                disabled><FormattedMessage id="deploy"/>!</Button>
+                                                                    :
+                                                                    <Button type='primary' onClick={() => {
+                                                                    }}><FormattedMessage id="deploy"/>!</Button>
 
+                                                        }
+                                                    </Col>
+                                                    :
+                                                    ''
                                             }
-                                        </Col>
-                                    </Row>
+
+                                        </Row>
+                                    </div>
                                 </div>
-                            </div>
-                        )
+                            )
+                        }
                     }
                 }
             </Query>

src/app/wechatService/wxConfig/WxConfig.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Input, Spin, Button, Icon, Modal} from 'antd';
+import {Input, Spin, Button, Icon, Modal, Tooltip} from 'antd';
 import './index.css';
 import {UPDATE_WXCONFIG, SHOW_WXCONTENT, DELETE_WXCONFIG, SHOW_WXCONFIG,DELETE_PROJECT,SHOW_PROJECT} from "../../../gql";
 import gql from "graphql-tag";
@@ -183,6 +183,10 @@ class Display extends Component {
                                         ''
                                 }
                                 <FormattedMessage id={valueToKey[config]}/>
+                                &nbsp;
+                                <Tooltip placement="top" title={toolTipTitle[config]}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
                             </span>
                             <Input value={this.state[config]} style={{width: 200}}
                                    onChange={this.switchConfig(config)}/>
@@ -203,6 +207,10 @@ class Display extends Component {
                                         ''
                                 }
                                 <FormattedMessage id={valueToKey[config]}/>
+                                &nbsp;
+                                <Tooltip placement="top" title={toolTipTitle[config]}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
                             </span>
                             <Input value={this.state[config]} style={{width: 200}}
                                    onChange={this.switchConfig(config)}/>
@@ -223,6 +231,10 @@ class Display extends Component {
                                         ''
                                 }
                                 <FormattedMessage id={valueToKey[config]}/>
+                                &nbsp;
+                                <Tooltip placement="top" title={toolTipTitle[config]}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
                             </span>
                             <Input value={this.state[config]} style={{width: 200}}
                                    onChange={this.switchConfig(config)}/>

src/language/en_US.js

@@ -131,10 +131,10 @@ const en_US = {
     'Server configurations': 'Server configurations',
     'Pay configurations': 'Pay configurations',
 
-    'appName': 'appName',
-    'appID': 'appID',
-    'appSecret': 'appSecret',
-    'enter_url': 'enter url',
+    'appName': 'App Name',
+    'appID': 'App ID',
+    'appSecret': 'App Secret',
+    'enter_url': 'Server URL',
     'token': 'token',
     'welcome_words': 'welcome words',
     'pay_api_key': 'pay api key',

src/language/zh_CN.js

@@ -131,9 +131,9 @@ const zh_CN = {
     'Server configurations': '服务器配置',
     'Pay configurations': '支付配置',
 
-    'appName': '名称',
-    'appID': 'AppID',
-    'appSecret': 'AppSecret',
+    'appName': 'APP 名称',
+    'appID': 'App ID',
+    'appSecret': 'App Secret',
     'enter_url': '服务器地址',
     'token': '令牌',
     'welcome_words': '关注回复语',