schema -> table 可以点击

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,121 @@ 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><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>
+                }
+                {/*<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>
 
         )
     }
@@ -119,8 +156,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
         });