save

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

@@ -1,11 +1,14 @@
 import React, {Component} from 'react';
-import {Input, Collapse, Button, Radio, Icon, Tooltip} from 'antd';
-import {ADD_APIGROUP, UPDATE_APIGROUP, UPDATE_PROJECT_GROUP} from "../../../../gql";
+import {Input, Collapse, Button, Radio, Icon, Tooltip, Spin} from 'antd';
+import {ADD_APIGROUP, GET_PROJECT, UPDATE_APIGROUP, UPDATE_PROJECT_GROUP} from "../../../../gql";
 import {request} from 'graphql-request'
 import {idGen} from "../../../../func";
 import {graphqlUrl} from "../../../../config";
 import {manageUsers} from "../../../../config";
 import {FormattedMessage} from 'react-intl';
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+
 const Panel = Collapse.Panel;
 
 // 如需改变显示，请在此处 value 处更改
@@ -54,7 +57,7 @@ const shiftPrefix = (prefix, value) => {
 class APIGroupCard extends Component {
     constructor(props) {
         super(props);
-        if(props.group !== '' && props.group !== null) {
+        if (props.group !== '' && props.group !== null) {
             let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = props.group;
             this.state = {
                 showOK: false,
@@ -81,19 +84,19 @@ class APIGroupCard extends Component {
     }
 
     componentWillReceiveProps(next) {
-        if(next.group !== '' && next.group !== null) {
+        if (next.group !== '' && next.group !== null) {
             let {groupName, environmentName, defaultDomain, frontType, userDomain, userStatus, region} = next.group;
-            this.setState( {
+            this.setState({
                 groupName,
                 environmentName,
                 defaultDomain,
                 frontType,
                 userDomain,
                 userStatus,
-                groupRegion: next.region === '' ? region: next.region
+                groupRegion: next.region === '' ? region : next.region
             })
         } else {
-            this.setState ( {
+            this.setState({
                 groupName: 'graphql_endpoint',
                 environmentName: 'test',
                 defaultDomain: '',
@@ -145,11 +148,11 @@ class APIGroupCard extends Component {
                             updatedAt: new Date().getTime(),
                             apiGWGroup_id: id
                         }).then(data => {
-                            if(data.update_project !== null)
+                            if (data.update_project !== null)
                                 this.props.stepByStep(2);
                         });
                     }
-                    setTimeout(()=>{
+                    setTimeout(() => {
                         this.setState({
                             showOK: false
                         })
@@ -177,7 +180,7 @@ class APIGroupCard extends Component {
                         });
                         this.props.stepByStep(2);
                     }
-                    setTimeout(()=>{
+                    setTimeout(() => {
                         this.setState({
                             showOK: false
                         })
@@ -197,172 +200,198 @@ class APIGroupCard extends Component {
         };
 
         return (
-            <div>
-                <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>
-                                {
-                                    youMustFill['groupName']?
-                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                        :
-                                        ''
-                                }
-                                <FormattedMessage id={valueToKey['groupName']}/>
-                                &nbsp;
-                                <Tooltip placement="top" title={toolTipTitle['groupName']}>
-                                    <Icon type="question-circle"/>
-                                </Tooltip>
-                            </span>
-                    <Input value={this.state.groupName} style={{width: 400}}
-                           onChange={this.switchConfig('groupName')}/>
-                </div>
+            <Query query={gql(GET_PROJECT)} variables={{id: this.props.projectID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        return (
+                            <div>
+                                <div style={{marginBottom: 10}}>
+                                    <span className='vice-title'>
+                                        {
+                                            youMustFill['groupName'] ?
+                                                <span
+                                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                                :
+                                                ''
+                                        }
+                                        <FormattedMessage id={valueToKey['groupName']}/>
+                                        &nbsp;
+                                        <Tooltip placement="top" title={toolTipTitle['groupName']}>
+                                            <Icon type="question-circle"/>
+                                        </Tooltip>
+                                    </span>
+                                    <Input value={this.state.groupName} style={{width: 400}}
+                                           onChange={this.switchConfig('groupName')}/>
+                                </div>
 
-                <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>
-                                {
-                                    youMustFill['region']?
-                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                        :
-                                        ''
-                                }
-                                <FormattedMessage id={valueToKey['region']}/>
-                                &nbsp;
-                                <Tooltip placement="top" title={toolTipTitle['region']}>
-                                    <Icon type="question-circle"/>
-                                </Tooltip>
-                            </span>
-                    <Radio.Group onChange={(e)=>{
-                        // 如果不想一变所有都变，就将 onchange 改成
-                        // onChange={this.switchConfig('groupRegion')}
-                        this.props.switchRegion(e);
-                    }} value={removePrefix('ap-', this.state.groupRegion)} buttonStyle="solid">
-                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
-                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
-                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
-                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
-                    </Radio.Group>
-                </div>
+                                <div style={{marginBottom: 10}}>
+                                    <span className='vice-title'>
+                                        {
+                                            youMustFill['region'] ?
+                                                <span
+                                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                                :
+                                                ''
+                                        }
+                                        <FormattedMessage id={valueToKey['region']}/>
+                                        &nbsp;
+                                        <Tooltip placement="top" title={toolTipTitle['region']}>
+                                            <Icon type="question-circle"/>
+                                        </Tooltip>
+                                    </span>
+                                    <Radio.Group onChange={(e) => {
+                                        // 如果不想一变所有都变，就将 onchange 改成
+                                        // onChange={this.switchConfig('groupRegion')}
+                                        this.props.switchRegion(e);
+                                    }} value={removePrefix('ap-', this.state.groupRegion)} buttonStyle="solid">
+                                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
+                                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
+                                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
+                                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
+                                    </Radio.Group>
+                                </div>
 
-                <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>
-                                {
-                                    youMustFill['environmentName']?
-                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                        :
-                                        ''
-                                }
-                                <FormattedMessage id={valueToKey['environmentName']}/>
-                                &nbsp;
-                                <Tooltip placement="top" title={toolTipTitle['environmentName']}>
-                                    <Icon type="question-circle"/>
-                                </Tooltip>
-                            </span>
-                    <Radio.Group onChange={this.switchConfig('environmentName')} defaultValue={this.state.environmentName}
-                                 buttonStyle="solid">
-                        <Radio.Button value="test"><FormattedMessage id="test"/></Radio.Button>
-                        <Radio.Button value="prepub"><FormattedMessage id="prepub"/></Radio.Button>
-                        <Radio.Button value="release"><FormattedMessage id="release"/></Radio.Button>
-                    </Radio.Group>
-                </div>
-                <Collapse bordered={false}>
-                    <Panel header=<FormattedMessage id="Want more options?"/> style={customPanelStyle}>
+                                <div style={{marginBottom: 10}}>
+                                    <span className='vice-title'>
+                                        {
+                                            youMustFill['environmentName'] ?
+                                                <span
+                                                    style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                                :
+                                                ''
+                                        }
+                                        <FormattedMessage id={valueToKey['environmentName']}/>
+                                        &nbsp;
+                                        <Tooltip placement="top" title={toolTipTitle['environmentName']}>
+                                            <Icon type="question-circle"/>
+                                        </Tooltip>
+                                    </span>
+                                    <Radio.Group onChange={this.switchConfig('environmentName')}
+                                                 defaultValue={this.state.environmentName}
+                                                 buttonStyle="solid">
+                                        <Radio.Button value="test"><FormattedMessage id="test"/></Radio.Button>
+                                        <Radio.Button value="prepub"><FormattedMessage id="prepub"/></Radio.Button>
+                                        <Radio.Button value="release"><FormattedMessage id="release"/></Radio.Button>
+                                    </Radio.Group>
+                                </div>
+                                <Collapse bordered={false}>
+                                    <Panel header={<FormattedMessage id="Want more options?"/>}
+                                           style={customPanelStyle}>
 
-                        <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>
-                                {
-                                    youMustFill['frontType']?
-                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                        :
-                                        ''
-                                }
-                                <FormattedMessage id={valueToKey['frontType']}/>
-                                &nbsp;
-                                <Tooltip placement="top" title={toolTipTitle['frontType']}>
-                                    <Icon type="question-circle"/>
-                                </Tooltip>
-                            </span>
-                            <Radio.Group onChange={this.switchConfig('frontType')} defaultValue={this.state.frontType}
-                                         buttonStyle="solid">
-                                <Radio.Button value="http">http</Radio.Button>
-                                <Radio.Button value="https">https</Radio.Button>
-                                <Radio.Button value="http&https">http&https</Radio.Button>
-                            </Radio.Group>
-                        </div>
-                        {/*<div style={{marginBottom: 10}}>*/}
-                            {/*<span className='vice-title'>{valueToKey['defaultDomain']}*/}
-                                {/*&nbsp;*/}
-                                {/*<Tooltip placement="top" title={toolTipTitle['defaultDomain']}>*/}
-                                    {/*<Icon type="question-circle"/>*/}
-                                {/*</Tooltip>*/}
-                            {/*</span>*/}
-                            {/*<Input value={this.state.defaultDomain} style={{width: 400}} disabled/>*/}
-                        {/*</div>*/}
+                                        <div style={{marginBottom: 10}}>
+                                            <span className='vice-title'>
+                                                {
+                                                    youMustFill['frontType'] ?
+                                                        <span style={{
+                                                            color: 'red',
+                                                            display: 'inline',
+                                                            marginRight: 10
+                                                        }}>*</span>
+                                                        :
+                                                        ''
+                                                }
+                                                <FormattedMessage id={valueToKey['frontType']}/>
+                                                &nbsp;
+                                                <Tooltip placement="top" title={toolTipTitle['frontType']}>
+                                                    <Icon type="question-circle"/>
+                                                </Tooltip>
+                                            </span>
+                                            <Radio.Group onChange={this.switchConfig('frontType')}
+                                                         defaultValue={this.state.frontType}
+                                                         buttonStyle="solid">
+                                                <Radio.Button value="http">http</Radio.Button>
+                                                <Radio.Button value="https">https</Radio.Button>
+                                                <Radio.Button value="http&https">http&https</Radio.Button>
+                                            </Radio.Group>
+                                        </div>
+                                        {/*<div style={{marginBottom: 10}}>*/}
+                                        {/*<span className='vice-title'>{valueToKey['defaultDomain']}*/}
+                                        {/*&nbsp;*/}
+                                        {/*<Tooltip placement="top" title={toolTipTitle['defaultDomain']}>*/}
+                                        {/*<Icon type="question-circle"/>*/}
+                                        {/*</Tooltip>*/}
+                                        {/*</span>*/}
+                                        {/*<Input value={this.state.defaultDomain} style={{width: 400}} disabled/>*/}
+                                        {/*</div>*/}
 
-                        <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>
-                                {
-                                    youMustFill['userDomain']?
-                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                        :
-                                        ''
-                                }
-                                <FormattedMessage id={valueToKey['userDomain']}/>
-                                &nbsp;
-                                <Tooltip placement="top" title={toolTipTitle['userDomain']}>
-                                    <Icon type="question-circle"/>
-                                </Tooltip>
-                            </span>
-                            <Input value={this.state.userDomain} style={{width: 400}}
-                                   onChange={this.switchConfig('userDomain')}/>
-                        </div>
-                        {/*<div style={{marginBottom: 10}}>*/}
-                            {/*<span className='vice-title'>{valueToKey['userStatus']}*/}
-                                {/*&nbsp;*/}
-                                {/*<Tooltip placement="top" title={toolTipTitle['userStatus']}>*/}
-                                    {/*<Icon type="question-circle"/>*/}
-                                {/*</Tooltip>*/}
-                            {/*</span>*/}
-                            {/*<Radio.Group onChange={this.switchConfig('userStatus')} defaultValue={this.state.userStatus}*/}
-                                         {/*buttonStyle="solid">*/}
-                                {/*<Radio.Button value="open">open</Radio.Button>*/}
-                                {/*<Radio.Button value="close">close</Radio.Button>*/}
-                            {/*</Radio.Group>*/}
-                        {/*</div>*/}
-                    </Panel>
-                </Collapse>
-                {
-                    manageUsers.includes(this.props.userID)?
-                        <div>
-                            <Button onClick={()=>{
-                                const id = idGen('group');
-                                this.ok(id);
-                                this.props.pass(id, 'group');
-                            }} type='primary'><FormattedMessage id="save"/></Button>
-                            {
-                                this.state.showOK === true?
-                                    <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
-                                    :
-                                    ''
-                            }
-                        </div>
-                        :
-                        this.props.trialcase?
-                            ''
-                            :
-                            <div>
-                                <Button onClick={()=>{
-                                    const id = idGen('group');
-                                    this.ok(id);
-                                    this.props.pass(id, 'group');
-                                }} type='primary'><FormattedMessage id="save"/></Button>
+                                        <div style={{marginBottom: 10}}>
+                                            <span className='vice-title'>
+                                                {
+                                                    youMustFill['userDomain'] ?
+                                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                                        :
+                                                        ''
+                                                }
+                                                <FormattedMessage id={valueToKey['userDomain']}/>
+                                                &nbsp;
+                                                <Tooltip placement="top" title={toolTipTitle['userDomain']}>
+                                                    <Icon type="question-circle"/>
+                                                </Tooltip>
+                                            </span>
+                                            <Input value={this.state.userDomain} style={{width: 400}}
+                                                   onChange={this.switchConfig('userDomain')}/>
+                                        </div>
+                                        {/*<div style={{marginBottom: 10}}>*/}
+                                        {/*<span className='vice-title'>{valueToKey['userStatus']}*/}
+                                        {/*&nbsp;*/}
+                                        {/*<Tooltip placement="top" title={toolTipTitle['userStatus']}>*/}
+                                        {/*<Icon type="question-circle"/>*/}
+                                        {/*</Tooltip>*/}
+                                        {/*</span>*/}
+                                        {/*<Radio.Group onChange={this.switchConfig('userStatus')} defaultValue={this.state.userStatus}*/}
+                                        {/*buttonStyle="solid">*/}
+                                        {/*<Radio.Button value="open">open</Radio.Button>*/}
+                                        {/*<Radio.Button value="close">close</Radio.Button>*/}
+                                        {/*</Radio.Group>*/}
+                                        {/*</div>*/}
+                                    </Panel>
+                                </Collapse>
                                 {
-                                    this.state.showOK === true?
-                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                                    manageUsers.includes(this.props.userID) ?
+                                        <div>
+                                            <Button onClick={() => {
+                                                const id = idGen('group');
+                                                this.ok(id);
+                                                this.props.pass(id, 'group');
+                                            }} type='primary'><FormattedMessage id="save"/></Button>
+                                            {
+                                                this.state.showOK === true ?
+                                                    <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                                                    :
+                                                    ''
+                                            }
+                                        </div>
                                         :
-                                        ''
+                                        this.props.trialcase ?
+                                            ''
+                                            :
+                                            <div>
+                                                <Button onClick={() => {
+                                                    const id = idGen('group');
+                                                    this.ok(id);
+                                                    this.props.pass(id, 'group');
+                                                }} type='primary'><FormattedMessage id="save"/></Button>
+                                                {
+                                                    this.state.showOK === true ?
+                                                        <Icon type="check-circle" theme="twoTone"
+                                                              twoToneColor="#52c41a"/>
+                                                        :
+                                                        ''
+                                                }
+                                            </div>
                                 }
                             </div>
+                        )
+                    }
                 }
-            </div>
+            </Query>
+
         )
     }
 }

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

@@ -153,7 +153,7 @@ class APIPathCard extends Component {
         return (
             <div>
                 <Collapse bordered={false}>
-                    <Panel header=<FormattedMessage id="Want more options?"/> style={customPanelStyle}>
+                    <Panel header={<FormattedMessage id="Want more options?"/>} style={customPanelStyle}>
                         {
                             this.state.configs.map(config => (
                                 <div key={config} style={{marginBottom: 10}}>

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

@@ -1,12 +1,13 @@
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Input, Radio, Collapse, Button, Icon, Tooltip} from 'antd';
-import {ADD_DEPLOY, UPDATE_DEPLOY, UPDATE_PROJECT_DEPLOY_AND_CLOUD} from "../../../../gql";
+import {Input, Radio, Collapse, Button, Icon, Tooltip, Spin} from 'antd';
+import {ADD_DEPLOY, GET_PROJECT, UPDATE_DEPLOY, UPDATE_PROJECT_DEPLOY_AND_CLOUD} from "../../../../gql";
 import {request} from 'graphql-request'
 import {idGen} from "../../../../func";
 import {graphqlUrl} from "../../../../config";
 import {manageUsers} from "../../../../config";
-
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
 const Panel = Collapse.Panel;
 
 // 如需改变显示，请在此处 value 处更改
@@ -167,7 +168,6 @@ class DeployCard extends Component {
                             deploy_id: id,
                             cloud_id: this.props.cloudID
                         }).then(data => {
-                            console.log('write back',data);
                             if(data.update_project !== null)
                                 this.props.stepByStep(1);
                         })
@@ -230,26 +230,36 @@ class DeployCard extends Component {
         };
 
         return (
-            <div>
-                <div style={{marginBottom: 10}}>
-                    <span className='vice-title'>
-                        {
-                            youMustFill['functionName']?
-                                <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
-                                :
-                                ''
+            <Query query={gql(GET_PROJECT)} variables={{id: this.props.projectID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
                         }
-                        <FormattedMessage id={valueToKey['functionName']}/>
-                        &nbsp;
-                        <Tooltip placement="top" title={toolTipTitle['functionName']}>
-                            <Icon type="question-circle"/>
-                        </Tooltip>
-                    </span>
-                    <Input value={this.state.functionName} style={{width: 400}}
-                           onChange={this.switchConfig('functionName')}/>
-                </div>
-                <div style={{marginBottom: 10}}>
-                    <span className='vice-title'>
+                        if (error) {
+                            return 'error!';
+                        }
+                        return (
+                            <div>
+                                <div style={{marginBottom: 10}}>
+                                    <span className='vice-title'>
+                                        {
+                                            youMustFill['functionName']?
+                                                <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
+                                                :
+                                                ''
+                                        }
+                                        <FormattedMessage id={valueToKey['functionName']}/>
+                                        &nbsp;
+                                        <Tooltip placement="top" title={toolTipTitle['functionName']}>
+                                            <Icon type="question-circle"/>
+                                        </Tooltip>
+                                    </span>
+                                    <Input value={this.state.functionName} style={{width: 400}}
+                                           onChange={this.switchConfig('functionName')}/>
+                                </div>
+                                <div style={{marginBottom: 10}}>
+                                    <span className='vice-title'>
                         {
                             youMustFill['region']?
                                 <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
@@ -262,20 +272,20 @@ class DeployCard extends Component {
                             <Icon type="question-circle"/>
                         </Tooltip>
                     </span>
-                    <Radio.Group onChange={(e) => {
-                        this.props.switchRegion(e);
-                    }} defaultValue={this.state.region} value={removePrefix('ap-', this.state.region)}
-                                 buttonStyle="solid">
-                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
-                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
-                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
-                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
-                    </Radio.Group>
-                </div>
-                <Collapse bordered={false}>
-                    <Panel header=<FormattedMessage id="Want more options?"/> style={customPanelStyle}>
-                        <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>
+                                    <Radio.Group onChange={(e) => {
+                                        this.props.switchRegion(e);
+                                    }} defaultValue={this.state.region} value={removePrefix('ap-', this.state.region)}
+                                                 buttonStyle="solid">
+                                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
+                                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
+                                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
+                                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
+                                    </Radio.Group>
+                                </div>
+                                <Collapse bordered={false}>
+                                    <Panel header={<FormattedMessage id="Want more options?"/>} style={customPanelStyle}>
+                                    <div style={{marginBottom: 10}}>
+                                    <span className='vice-title'>
                                 {
                                     youMustFill['cosBucketRegion']?
                                         <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
@@ -288,32 +298,32 @@ class DeployCard extends Component {
                                     <Icon type="question-circle"/>
                                 </Tooltip>
                             </span>
-                            <Radio.Group onChange={(e) => {
-                                // 如果不想一变所有都变，就将 onchange 改成
-                                // onChange={this.switchConfig('cosBucketRegion')}
-                                this.props.switchRegion(e);
-                            }} defaultValue={this.state.region}
-                                         value={removePrefix('ap-', this.state.cosBucketRegion)} buttonStyle="solid">
-                                <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
-                                <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
-                                <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
-                                <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
-                            </Radio.Group>
-                        </div>
-                        {/*腾讯云为空字符串，不显示，这里未作区分*/}
-                        {/*<div style={{marginBottom: 10}}>*/}
-                        {/*<span className='vice-title'>{valueToKey['serviceName']}*/}
-                        {/*<span> </span>*/}
-                        {/*<Tooltip placement="top" title={toolTipTitle['serviceName']}>*/}
-                        {/*<Icon type="question-circle"/>*/}
-                        {/*</Tooltip>*/}
-                        {/*</span>*/}
-                        {/*<Input value={this.state.serviceName} style={{width: 200}} disabled*/}
-                        {/*onChange={this.switchConfig('serviceName')}/>*/}
-                        {/*</div>*/}
-                        {
-                            this.state.configs.map(config => (
-                                <div key={config} style={{marginBottom: 10}}>
+                                        <Radio.Group onChange={(e) => {
+                                            // 如果不想一变所有都变，就将 onchange 改成
+                                            // onChange={this.switchConfig('cosBucketRegion')}
+                                            this.props.switchRegion(e);
+                                        }} defaultValue={this.state.region}
+                                                     value={removePrefix('ap-', this.state.cosBucketRegion)} buttonStyle="solid">
+                                            <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
+                                            <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
+                                            <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
+                                            <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
+                                        </Radio.Group>
+                                    </div>
+                                    {/*腾讯云为空字符串，不显示，这里未作区分*/}
+                                    {/*<div style={{marginBottom: 10}}>*/}
+                                    {/*<span className='vice-title'>{valueToKey['serviceName']}*/}
+                                    {/*<span> </span>*/}
+                                    {/*<Tooltip placement="top" title={toolTipTitle['serviceName']}>*/}
+                                    {/*<Icon type="question-circle"/>*/}
+                                    {/*</Tooltip>*/}
+                                    {/*</span>*/}
+                                    {/*<Input value={this.state.serviceName} style={{width: 200}} disabled*/}
+                                    {/*onChange={this.switchConfig('serviceName')}/>*/}
+                                    {/*</div>*/}
+                                    {
+                                        this.state.configs.map(config => (
+                                            <div key={config} style={{marginBottom: 10}}>
                                     <span className='vice-title'>
                                         {
                                             youMustFill[config]?
@@ -327,48 +337,56 @@ class DeployCard extends Component {
                                             <Icon type="question-circle"/>
                                         </Tooltip>
                                     </span>
-                                    <Input value={this.state[config]} style={{width: 200}}
-                                           disabled={disable[config] === true}
-                                           onChange={this.switchConfig(config)}/>
+                                                <Input value={this.state[config]} style={{width: 200}}
+                                                       disabled={disable[config] === true}
+                                                       onChange={this.switchConfig(config)}/>
+                                            </div>
+                                        ))
+                                    }
+                                </Panel>
+                            </Collapse>
+                                <div>
+                                    {
+                                        manageUsers.includes(this.props.userID) ?
+                                            <div>
+                                                <Button onClick={() => {
+                                                    const id = idGen('deploy');
+                                                    this.ok(id);
+                                                    this.props.pass(id, 'deploy');
+                                                }} type='primary'><FormattedMessage id="save"/></Button>
+                                                {
+                                                    this.state.showOK === true ?
+                                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                                                        :
+                                                        ''
+                                                }
+                                            </div>
+                                            :
+                                            this.props.trialcase ?
+                                                ''
+                                                :
+                                                <div>
+                                                    <Button onClick={() => {
+                                                        const id = idGen('deploy');
+                                                        this.ok(id);
+                                                        this.props.pass(id, 'deploy');
+                                                    }} type='primary'><FormattedMessage id="save"/></Button>
+                                                    {
+                                                        this.state.showOK === true ?
+                                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
+                                                            :
+                                                            ''
+                                                    }
+                                                </div>
+                                    }
+
                                 </div>
-                            ))
-                        }
-                    </Panel>
-                </Collapse>
-                {
-                    manageUsers.includes(this.props.userID) ?
-                        <div>
-                            <Button onClick={() => {
-                                const id = idGen('deploy');
-                                this.ok(id);
-                                this.props.pass(id, 'deploy');
-                            }} type='primary'><FormattedMessage id="save"/></Button>
-                            {
-                                this.state.showOK === true ?
-                                    <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
-                                    :
-                                    ''
-                            }
-                        </div>
-                        :
-                        this.props.trialcase ?
-                            ''
-                            :
-                            <div>
-                                <Button onClick={() => {
-                                    const id = idGen('deploy');
-                                    this.ok(id);
-                                    this.props.pass(id, 'deploy');
-                                }} type='primary'><FormattedMessage id="save"/></Button>
-                                {
-                                    this.state.showOK === true ?
-                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
-                                        :
-                                        ''
-                                }
                             </div>
+                        )
+                    }
                 }
-            </div>
+            </Query>
+
         )
     }
 }

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

@@ -135,11 +135,11 @@ class TencentConfig extends Component {
                             path = '',
                             schemaID = '',
                             configID = '',
-                            api = '',
                             cloudID = 'tencent_CloudID';
 
                         let dataProject = data.project_by_id;
                         let {cloud_id, apiGWGroup_id, deploy_id, projectType, schema_id, wxConfig_id, projectName} = dataProject;
+                        console.log('dataProject', dataProject);
 
                         let defaultName = projectName;
 
@@ -190,6 +190,7 @@ class TencentConfig extends Component {
                                                                     trialcase={this.props.trialcase}
                                                                     pass={this.pass}
                                                                     projectID={projectID}
+                                                                    stepByStep={this.stepByStep}
                                                                 />
                                                             </Card>
                                                     }
@@ -207,6 +208,7 @@ class TencentConfig extends Component {
                                                                     trialcase={this.props.trialcase}
                                                                     pass={this.pass}
                                                                     projectID={projectID}
+                                                                    stepByStep={this.stepByStep}
                                                                 />
                                                             </Card>
                                                     }
@@ -237,6 +239,7 @@ class TencentConfig extends Component {
                                                                                     deployID={deploy ? deploy.id : this.state.deployIdPassToPath}
                                                                                     groupID={group ? group.id : this.state.groupIdPassToPath}
                                                                                     pass={this.pass}
+                                                                                    stepByStep={this.stepByStep}
                                                                                 />
                                                                             </Card>
                                                                     }
@@ -254,6 +257,7 @@ class TencentConfig extends Component {
                                                                     defalutName={defaultName}
                                                                     trialcase={this.props.trialcase}
                                                                     projectID={projectID}
+                                                                    stepByStep={this.stepByStep}
                                                                 />
                                                             </Card>
                                                     }