仅支持一个 user，一个 schema 的修改

src/components/common/schema/Schema.jsx

@@ -19,13 +19,14 @@ class Schema extends Component {
         this.state = {
             currentSchema: '',
             currentTable: '',
-            schemaID: 'schema_1542073902985_52726425'
+            schemaID: 'schema_1542089023472_19873755',
+            userID: 'xy_1'
         };
     }
 
-    findColumns = data => this.state.currentTable === '' ? [] : data.find(table => table.name === this.state.currentTable).cols;
+    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).remark;
+    findRemark = data => this.state.currentTable === '' ? '' : data.find(table => table.name === this.state.currentTable) ? data.find(table => table.name === this.state.currentTable).remark : '';
 
     switchSchema = (schema) => {
         this.setState({
@@ -46,28 +47,34 @@ class Schema extends Component {
                     <Col span={6}>
                         <div className='wrapper'>
                             <div className='current'>{this.state.currentSchema}</div>
-                            <AddSchemaInput userID={this.props.userID}/>
+                            <AddSchemaInput userID={this.state.userID}/>
                         </div>
-                        <ShowSchemaList userID={this.props.userID} switchTable={this.switchTable}
-                                        switchSchema={this.switchSchema}/>
+                        <ShowSchemaList
+                            userID={this.state.userID}
+                            switchTable={this.switchTable}
+                            switchSchema={this.switchSchema}/>
                     </Col>
 
                     <Col span={17} offset={1}>
                         {
                             this.state.currentTable === 'add' ?
-                                <SchemaChange currentSchema={this.state.currentSchema} currentTableIndex={-2}
-                                              columns={[]} remark=''/> :
+                                <SchemaChange
+                                    currentSchema={this.state.currentSchema}
+                                    currentTableIndex={-2}
+                                    columns={[]}
+                                    remark=''
+                                    schemaID={this.state.schemaID}
+                                /> :
                                 <Query query={SHOW_TABLE}
-                                       variables={{schema_id: 'schema_1542073902985_52726425'}}>
+                                       variables={{schema_id: this.state.schemaID}}>
                                     {
                                         ({loading, error, data}) => {
                                             if (loading)
                                                 return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                                             if (error)
                                                 return 'error';
-                                            console.log('raw-data', data);
-                                            data = JSON.parse(data.schema_by_id.schemaData);
-                                            console.log('schema_by_id', data);
+                                            if (data.schema_by_id === null) data = [];
+                                            else data = JSON.parse(data.schema_by_id.schemaData);
                                             return (
                                                 <SchemaChange
                                                     currentSchema={this.state.currentSchema}
@@ -76,6 +83,7 @@ class Schema extends Component {
                                                     columns={this.findColumns(data)}
                                                     remark={this.findRemark(data)}
                                                     schemaID={this.state.schemaID}
+                                                    userID={this.state.userID}
                                                 />
                                             )
                                         }
@@ -94,9 +102,11 @@ export default Schema;
 class AddSchemaInput extends Component {
 
     render() {
+        let userID = this.props.userID;
+
         let varobj = {
             id: idGen('schema'),
-            user_id: 'xy_1',
+            user_id: userID,
             createdAt: new Date().getTime(),
             updatedAt: '',
             schemaState: 'create',
@@ -108,14 +118,12 @@ class AddSchemaInput extends Component {
             <Mutation
                 mutation={ADD_SCHEMA}
                 update={(cache, {data: {create_schema}}) => {
-                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: 'xy_1'}});
-
-                    // console.log('showSchemaData', data);
+                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});
 
                     data.schema_by_props.push(create_schema);
                     cache.writeQuery({
                         query: SHOW_SCHEMA,
-                        variables: {user_id: 'xy_1'},
+                        variables: {user_id: userID},
                         data
                     });
                 }}
@@ -155,8 +163,9 @@ class AddSchemaInput extends Component {
 
 class ShowSchemaList extends Component {
     render() {
+        let userID = this.props.userID;
         return (
-            <Query query={SHOW_SCHEMA} variables={{user_id: 'xy_1'}}>
+            <Query query={SHOW_SCHEMA} variables={{user_id: userID}}>
 
                 {
                     ({loading, error, data}) => {
@@ -188,7 +197,10 @@ class ShowSchemaList extends Component {
                                                         <Button onClick={() => this.props.switchTable('add')}
                                                                 type="primary"
                                                                 shape="circle" icon="plus" size='small'/>
-                                                        <DeleteSchemaButton schemaName={schema.schemaName}/>
+                                                        <DeleteSchemaButton
+                                                            schemaName={schema.schemaName}
+                                                            userID={this.props.userID}
+                                                        />
                                                     </Col>
                                                 </Row>
 
@@ -228,16 +240,17 @@ class DeleteSchemaButton extends Component {
     }
 
     render() {
+        let userID = this.props.userID;
         return (
             <Mutation
                 mutation={DELETE_SCHEMA}
                 update={(cache) => {
-                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: 'xy_1'}});
+                    let data = cache.readQuery({query: SHOW_SCHEMA, variables: {user_id: userID}});
 
                     data.schema_by_props.splice(data.schema_by_props.findIndex(obj => obj.schemaName === this.state.schemaName), 1);
                     cache.writeQuery({
                         query: SHOW_SCHEMA,
-                        variables: {user_id: 'xy_1'},
+                        variables: {user_id: userID},
                         data
                     });
                 }}

src/components/common/schema/change/SchemaChange.jsx

@@ -56,7 +56,7 @@ class SchemaChange extends Component {
     handleTypeNew = (value) => {
         if (this.state.newColName !== '') {
             let columns = this.state.columns;
-            columns.push({name: this.state.newColName, type: value, desc: 'description'});
+            columns.push({name: this.state.newColName, type: value, description: 'description'});
             this.setState({
                 columns,
                 newColName: '',
@@ -73,7 +73,7 @@ class SchemaChange extends Component {
     handleDescChange = (index) => {
         return (value) => {
             let columns = this.state.columns;
-            columns[index].desc = value;
+            columns[index].description = value;
             this.setState({
                 columns
             });
@@ -170,12 +170,19 @@ class SchemaChange extends Component {
                         remark={this.state.remark}
                         currentTableIndex={this.props.currentTableIndex}
                         schemaID={this.props.schemaID}
-
-                    />
-                    <DeleteTableButton
-                        currentTableIndex={this.props.currentTableIndex}
-                        schemaID = {this.props.schemaID}
+                        userID={this.props.userID}
                     />
+                    {
+                        // undefined的时候 上层未传进来 currentTable === 'add'，为的是输入框内不默认显示 add
+                        this.state.currentTable === ''? '' : this.state.currentTable === undefined ? '' :
+                        <DeleteTableButton
+                            currentTable={this.state.currentTable}
+                            currentTableIndex={this.props.currentTableIndex}
+                            schemaID={this.props.schemaID}
+                            userID={this.props.userID}
+                        />
+                    }
+
                 </div>
             </div>
         )
@@ -189,6 +196,7 @@ class UpdateTableButton extends Component {
 
     render() {
         let schemaID = this.props.schemaID;
+        let userID = this.props.userID;
 
         let varobj = {
             id: schemaID,
@@ -196,9 +204,6 @@ class UpdateTableButton extends Component {
             schemaState: 'updated-update-table',
         };
 
-        // console.log(this.props.currentTable);
-        // console.log(this.props.currentSchema);
-
         return (
             <Query query={SHOW_TABLE} variables={{schema_id: schemaID}}>
 
@@ -219,23 +224,15 @@ class UpdateTableButton extends Component {
                                         query: SHOW_TABLE,
                                         variables: {schema_id: schemaID}
                                     });
+                                    data.schema_by_id = update_schema;
 
                                     let showSchemaData = cache.readQuery({
                                         query: SHOW_SCHEMA,
-                                        variables: {user_id: 'xy_1'}
+                                        variables: {user_id: userID}
                                     });
                                     let index = showSchemaData.schema_by_props.findIndex(obj => obj.schemaName === update_schema.schemaName);
-                                    // console.log('我是',index);
-                                    // console.log('test', update_schema);
-                                    // console.log('testss', showSchemaData.schema_by_props);
-
                                     showSchemaData.schema_by_props.splice(index, 1, update_schema);
 
-                                    console.log('showTableData', data);
-                                    // console.log('update_schema', update_schema);
-
-                                    data.schema_by_id = update_schema;
-
                                     cache.writeQuery(
                                         {
                                             query: SHOW_TABLE,
@@ -244,7 +241,7 @@ class UpdateTableButton extends Component {
                                         },
                                         {
                                             query: SHOW_SCHEMA,
-                                            variables: {user_id: 'xy_1'},
+                                            variables: {user_id: userID},
                                             showSchemaData
                                         }
                                     );
@@ -257,25 +254,26 @@ class UpdateTableButton extends Component {
                                     if (error)
                                         return 'error';
 
-
                                     // 更新代码
                                     // 先 query 再 mutation，然后替换，做一个判断
-                                    let schemaCols = JSON.parse(schemaData.schema_by_id.schemaData);
+                                    let schemaCols;
+                                    if (schemaData.schema_by_id === null) schemaCols = [];
+                                    else schemaCols = JSON.parse(schemaData.schema_by_id.schemaData);
                                     let newTable = {
                                         name: this.props.currentTable,
                                         remark: this.props.remark,
                                         cols: this.props.columns
                                     };
+
                                     const index = this.props.currentTableIndex;
                                     if (index === -2) {
                                         schemaCols.push(newTable);
                                     } else if (index === -1) {
-                                        console.log('未知错误，数据库信息不匹配');
+                                        console.log('进行了一次删除操作 或 未知错误，数据库信息不匹配');
                                     } else {
                                         schemaCols.splice(index, 1, newTable);
                                     }
 
-
                                     return (
                                         <div style={{display: 'inline-block'}}>
                                             <Button type="primary" onClick={() => {
@@ -304,9 +302,10 @@ class UpdateTableButton extends Component {
 class DeleteTableButton extends Component {
     render() {
         let schemaID = this.props.schemaID;
+        let userID = this.props.userID;
 
         let varobj = {
-            id: 'schema_1542006423662_89419168',
+            id: schemaID,
             updatedAt: new Date().getTime(),
             schemaState: 'updated-delete-table',
         };
@@ -331,16 +330,42 @@ class DeleteTableButton extends Component {
                                         query: SHOW_TABLE,
                                         variables: {schema_id: schemaID}
                                     });
-
-                                    // console.log('data', data);
-                                    // console.log('update_schema', update_schema);
-
                                     data.schema_by_id = update_schema;
-                                    cache.writeQuery({
-                                        query: SHOW_TABLE,
-                                        variables: {schema_id: schemaID},
-                                        data
+
+                                    let showSchemaData = cache.readQuery({
+                                        query: SHOW_SCHEMA,
+                                        variables: {user_id: userID}
                                     });
+                                    let schemas = showSchemaData.schema_by_props;
+                                    // console.log('schemas', schemas);
+                                    let targetSchema = schemas.find(obj => obj.schemaName === update_schema.schemaName);
+                                    // console.log('targetSchema', targetSchema);
+                                    let targetSchemaIndex = schemas.findIndex(obj => obj.schemaName === update_schema.schemaName);
+                                    // console.log('targetSchemaIndex', targetSchemaIndex);
+                                    let targetTables = JSON.parse(schemas[targetSchemaIndex].schemaData);
+                                    // console.log('targetTables', targetTables);
+                                    let targetTableIndex = targetTables.findIndex(obj=> obj.name===this.props.currentTable);
+                                    // console.log('targetTableIndex', targetTableIndex);
+                                    targetTables.splice(targetTableIndex, 1);
+                                    // console.log('targetTablesAfterDelete', targetTables);
+                                    let temp = {schemaData: JSON.stringify(targetTables)};
+                                    // console.log('temp', temp);
+                                    let tempSchema = {...targetSchema, ...temp};
+                                    // console.log('tempSchema', tempSchema);
+                                    showSchemaData.schema_by_props.splice(targetSchemaIndex, 1, tempSchema);
+
+                                    cache.writeQuery(
+                                        {
+                                            query: SHOW_TABLE,
+                                            variables: {schema_id: schemaID},
+                                            data
+                                        },
+                                        {
+                                            query: SHOW_SCHEMA,
+                                            variables: {user_id: userID},
+                                            showSchemaData
+                                        }
+                                    );
                                 }}
                             >
 
@@ -351,28 +376,31 @@ class DeleteTableButton extends Component {
                                         return 'error';
 
                                     // 先 query 再 mutation，然后删除
-                                    let schemaCols = JSON.parse(schemaData.schema_by_id.schemaData);
-                                    console.log('删除之前的 schemaCols', schemaCols);
+                                    let schemaCols;
+                                    if (schemaData.schema_by_id === null) schemaCols = [];
+                                    else schemaCols = JSON.parse(schemaData.schema_by_id.schemaData);
+
                                     const index = this.props.currentTableIndex;
+                                    // 设置-2 标志为新建页面，防止通过 tablename 被修改导致每次 index 都为 -1 从而修改最后一个
                                     if (index === -2) {
                                         console.log('初始页面')
                                     } else if (index === -1) {
-                                        console.log('未知错误，数据库信息不匹配');
+                                        console.log('进行了一次删除操作 或 未知错误，数据库信息不匹配');
                                     } else {
                                         schemaCols.splice(index, 1);
                                     }
-                                    console.log('删除之后的 schemaCols', schemaCols);
 
                                     return (
                                         <div style={{display: 'inline-block'}}>
-                                            <Button type="danger" onClick={() => {
-                                                update_schema({
-                                                    variables: {
-                                                        ...varobj,
-                                                        schemaData: JSON.stringify(schemaCols)
-                                                    }
-                                                });
-                                            }}>
+                                            <Button type="danger"
+                                                    onClick={() => {
+                                                        update_schema({
+                                                            variables: {
+                                                                ...varobj,
+                                                                schemaData: JSON.stringify(schemaCols)
+                                                            }
+                                                        });
+                                                    }}>
                                                 DELETE
                                             </Button>
                                         </div>