连通 sidebar 和 deploy，schema'页面增加按钮可用

src/components/common/deploy/Deploy.jsx

@@ -42,9 +42,9 @@ class Deploy extends Component {
             amazonFC: ''
         };
 
-        request('http://123.206.193.98:3000/graphql', SHOW_FC, {schema_id: this.state.schemaID}).then(
+        request('http://123.206.193.98:3000/graphql', SHOW_FC, {schema_id: this.props.schemaID || this.state.schemaID}).then(
             data => {
-                request('http://123.206.193.98:3000/graphql', SEARCH_SCHEMA, {id: this.state.schemaID}).then(
+                request('http://123.206.193.98:3000/graphql', SEARCH_SCHEMA, {id: this.props.schemaID || this.state.schemaID}).then(
                     _data => {
                         if (data.fc_by_props.length === 0) {
                             request('http://123.206.193.98:3000/graphql', SHOW_CLOUD, {user_id: this.props.userID}).then(
@@ -116,6 +116,8 @@ class Deploy extends Component {
         );
     }
 
+
+
     render() {
         const contentListNoTitle = {
             tencent: <TencentConfig cloudID={this.state.tencentCloudID} fc={this.tencentFC}

src/components/common/schema/Schema.jsx

@@ -5,6 +5,7 @@ import './index.css';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
 import {SHOW_SCHEMA, DELETE_SCHEMA, SHOW_TABLE} from '../../gql'
+import Table from "./Table";
 
 
 const Search = Input.Search;
@@ -32,85 +33,90 @@ class Schema extends Component {
         })
     };
 
+    findColumns = data => this.state.currentTable === '' ? [] : data.find(table => table.name === this.state.currentTable) ? data.find(table => table.name === this.state.currentTable).cols : [];
+
+    findRemark = data => this.state.currentTable === '' ? '' : data.find(table => table.name === this.state.currentTable) ? data.find(table => table.name === this.state.currentTable).remark : '';
+
     render() {
         let userID = this.props.userID;
         return (
-                <Query query={gql(SHOW_TABLE)} variables={{schema_id: this.props.schemaID || this.state.schemaID}}>
-
-                    {
-                        ({loading, error, data}) => {
-                            if (loading) {
-                                return <Spin style={{marginLeft: 3}}/>
-                            }
-                            if (error) {
-                                return 'error!';
-                            }
-                            console.log(data);
-                            return (
-                                <div>
-                                    <div>
-                                        {data.schema_by_id.schemaName || this.state.schemaName}
-                                    </div>
-                                    <div>
-                                        <Row>
-                                            <Col span={8}><span>Name</span></Col>
-                                            <Col span={8}><span>Remark</span></Col>
-                                            <Col span={8}><span><Icon type="plus"/></span></Col>
-                                        </Row>
-                                    </div>
-                                    {
-                                        JSON.parse(data.schema_by_id.schemaData).map(table => (
-                                            <Row key={table.name} className='show'>
-                                                <Col span={8}><span>{table.name}</span></Col>
-                                                <Col span={8}><span>{table.remark}</span></Col>
-                                                <Col span={8}><Icon type="delete"/></Col>
-                                            </Row>
-                                        ))
-                                    }
-                                </div>
-                            );
+            <Query query={gql(SHOW_TABLE)} variables={{schema_id: this.props.schemaID || this.state.schemaID}}>
+
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
                         }
+
+                        let schemaName = data.schema_by_id.schemaName;
+
+                        if (data.schema_by_id === null) data = [];
+                        else data = JSON.parse(data.schema_by_id.schemaData);
+
+
+                        return (
+                            <div>
+                                <div onClick={()=>{this.setState({
+                                    currentTable: ''
+                                })}}>
+                                    {schemaName || this.state.schemaName}
+                                </div>
+                                {
+                                    this.state.currentTable === '' ?
+                                        <div>
+                                            <div>
+                                                <Row>
+                                                    <Col span={8}><span>Name</span></Col>
+                                                    <Col span={8}><span>Remark</span></Col>
+                                                    <Col span={8}>
+                                                        <span onClick={()=> {
+                                                            this.setState({
+                                                                currentTable: 'add'
+                                                            })
+                                                        }}>
+                                                            <Icon type="plus"/>
+                                                        </span>
+                                                    </Col>
+                                                </Row>
+                                            </div>
+                                            {
+                                                data.map(table => (
+                                                    <Row key={table.name} className='show'>
+                                                        <Col span={8}
+                                                             onClick={() => this.switchTable(table.name)}><span>{table.name}</span></Col>
+                                                        <Col span={8}><span>{table.remark}</span></Col>
+                                                        <Col span={8}><Icon type="delete"/></Col>
+                                                    </Row>
+                                                ))
+                                            }
+                                        </div>
+                                        :
+                                        this.state.currentTable === 'add' ?
+                                            <Table
+                                                currentTableIndex={-2}
+                                                columns={[]}
+                                                remark=''
+                                                schemaID={this.props.schemaID || this.state.schemaID}
+                                                userID={userID}
+                                            /> :
+                                            <Table
+                                                currentTable={this.state.currentTable}
+                                                currentTableIndex={this.state.currentTable === '' ? -2 : data.findIndex(obj => obj.name === this.state.currentTable)}
+                                                columns={this.findColumns(data)}
+                                                remark={this.findRemark(data)}
+                                                schemaID={this.props.schemaID || this.state.schemaID}
+                                                userID={userID}
+                                            />
+                                }
+
+                            </div>
+                        );
                     }
-                    {/*<Row>*/}
-                    {/*<Col span={17} offset={1}>*/}
-                    {/*{*/}
-                    {/*this.state.currentTable === 'add' ?*/}
-                    {/*<Column*/}
-                    {/*currentSchema={this.state.currentSchema}*/}
-                    {/*currentTableIndex={-2}*/}
-                    {/*columns={[]}*/}
-                    {/*remark=''*/}
-                    {/*userID={userID}*/}
-                    {/*schemaID={this.state.schemaID}*/}
-                    {/*/> :*/}
-                    {/*<Query query={gql(SHOW_TABLE)}*/}
-                    {/*variables={{schema_id: this.state.schemaID}}>*/}
-                    {/*{*/}
-                    {/*({loading, error, data}) => {*/}
-                    {/*if (loading)*/}
-                    {/*return <Spin style={{marginLeft: 30, marginTop: 10}}/>;*/}
-                    {/*if (error)*/}
-                    {/*return 'error';*/}
-                    {/*if (data.schema_by_id === null) data = [];*/}
-                    {/*else data = JSON.parse(data.schema_by_id.schemaData);*/}
-                    {/*return (*/}
-                    {/*<Column*/}
-                    {/*currentSchema={this.state.currentSchema}*/}
-                    {/*currentTable={this.state.currentTable}*/}
-                    {/*currentTableIndex={this.state.currentTable === '' ? -2 : data.findIndex(obj => obj.name === this.state.currentTable)}*/}
-                    {/*columns={this.findColumns(data)}*/}
-                    {/*remark={this.findRemark(data)}*/}
-                    {/*schemaID={this.state.schemaID}*/}
-                    {/*userID={userID}*/}
-                    {/*/>*/}
-                    {/*)*/}
-                    {/*}*/}
-                    {/*}*/}
-                    {/*</Query>*/}
-                    {/*}*/}
-                    {/*</Col>*/}
-                    {/*</Row>*/}
-                </Query>
+                }
+            </Query>
 
         )
     }
@@ -119,8 +125,6 @@ class Schema extends Component {
 export default Schema;
 
 
-
-
 // 备用代码
 
 class DeleteSchemaButton extends Component {

src/components/common/schema/Table.jsx → src/components/common/schema/Table.js

@@ -12,7 +12,6 @@ class Table extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            currentSchema: props.currentSchema,
             currentTable: props.currentTable,
             remark: props.remark,
             columns: props.columns,
@@ -94,7 +93,6 @@ class Table extends Component {
     componentWillReceiveProps(next) {
         this.setState({
             currentTable: next.currentTable,
-            currentSchema: next.currentSchema,
             columns: next.columns,
             remark: next.remark
         });

src/components/trialCase/TrialCase.jsx

@@ -98,7 +98,7 @@ class TrialCase extends Component {
                                     case 'schema':
                                         return <Schema userID={this.state.userID} schemaID={this.state.schemaID}/>;
                                     case 'deploy':
-                                        return <Deploy userID={this.state.userID}/>;
+                                        return <Deploy userID={this.state.userID} schemaID={this.state.schemaID}/>;
                                     case 'graphql':
                                         return <GenerateJs/>;
                                     case 'graphiql':