修改创建表的页面

src/components/app/App.jsx

@@ -13,6 +13,7 @@ import WechatService from "../wechatService/WechatService";
 import QuantService from "../quantService/QuantService";
 import TrialCase from "../trialCase/TrialCase";
 import Login from "../login/Login";
+import Column from '../common/schema/Column.jsx';
 import '../common/graphql/index.css';
 import './index.css'
 import Create from "../common/schema/Create";
@@ -257,6 +258,7 @@ class App extends Component {
                                 <Route path="/graphql-service/:sidebar/:caseId" component={TrialCase}/>
                                 <Route path="/wechat-service/:sidebar/:caseId" component={WechatService}/>
                                 <Route path="/quant-service/" component={QuantService}/>
+                                <Route path="/table/:name" component={Column}/>
                                 <Route path="/login" component={Login}/>
                                 <Redirect path="*" to="/"/>
                             </Switch>
@@ -304,11 +306,13 @@ class GraphqlSidebar extends Component {
 
 
     render() {
+        console.log('userID',this.state.userID);
         return (
             this.state.show ?
                 <Query query={gql(SHOW_SCHEMA)} variables={{user_id: this.state.userID}}>
                     {
                         ({loading, error, data}) => {
+                            console.log('schema data',data);
                             if (loading) return <Spin style={{marginLeft: 3}}/>;
                             if (error) return 'error!';
                             return (

src/components/common/schema/Column.jsx

@@ -1,21 +1,24 @@
 import React, {Component} from 'react';
 
-import {Select, Input, Icon, Button, notification, Spin} from 'antd';
+import {Layout,Select, Input, Icon, Button, notification, Spin} from 'antd';
 import {UPDATE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE} from "../../gql";
 import gql from "graphql-tag";
 
 import {Mutation, Query} from "react-apollo";
+import {getCookie} from "../../cookie";
 
 const Option = Select.Option;
+const {Content} = Layout;
 
 class Column extends Component {
     constructor(props) {
         super(props);
+        console.log('column props',props);
         this.state = {
-            currentSchema: props.currentSchema,
-            currentTable: props.currentTable,
-            remark: props.remark,
-            columns: props.columns,
+            currentSchema: props.currentSchema || [{}],
+            currentTable: props.currentTable || ' ',
+            remark: props.remark || '',
+            columns: props.columns || [],
             newColName: '',
             newColType: 'type',
             types: ['ID', 'String', 'Int', 'Float', 'Boolean', 'DateTime'],
@@ -66,7 +69,7 @@ class Column extends Component {
         } else {
             notification['warning']({
                 message: 'Notification',
-                description: 'Input a name first.',
+                description: 'Input a field name first.',
             });
         }
     };
@@ -95,96 +98,127 @@ class Column extends Component {
         this.setState({
             currentTable: next.currentTable,
             currentSchema: next.currentSchema,
-            columns: next.columns,
+            columns: next.columns || [],
             remark: next.remark
         });
     };
 
     render() {
-        return (
-            <div style={{margin: 20}}>
-                <div style={{marginBottom: 20}}>
-                    <span className='table-title'> Table name</span>
-                    <Input value={this.state.currentTable} placeholder="table_name" style={{width: 120}}
-                           onChange={(e) => {
-                               this.setState({currentTable: e.target.value})
-                           }}/>
-
-                </div>
+        console.log('columns',this.state.columns);
+        let schemaID = this.props.location.search.substr(this.props.location.search.indexOf("=")+1);
+        let userID = this.props.userID || getCookie('user_id');
+        console.log('schemaID',schemaID,'userID',userID);
 
-                <div style={{marginBottom: 20}}>
-                    <span className='table-title'> Table remark</span>
-                    <Input value={this.state.remark} placeholder="table_remark" style={{width: 250}} onChange={(e) => {
-                        this.setState({remark: e.target.value})
-                    }}/>
+        return (
+            <div>
+                <div className="column-menu" onClick={()=>this.props.history.goBack()}>
+                    <Icon type="left" style={{color:'#3187FA'}} /> {this.props.match.params.name}
                 </div>
 
-                <div>
-                    <span className='table-title'> Table columns</span>
-                    <span className='column-title'>name</span>
-                    <span className='column-title'>type</span>
-                    <span className='column-title'>description</span>
-                    {
-                        this.state.columns.map((col, index) =>
-                            <div key={index} style={{marginBottom: 3}}>
-                                <Input style={{width: 120, marginRight: 10}} value={col.name}
-                                       onChange={this.handleNameChange(index)}/>
-                                <Select defaultValue={col.type} style={{width: 120, marginRight: 10}}
-                                        onChange={this.handleTypeChange(index)}>
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
+                        <div className="column-content">
+                            <span className='table-title'> Table name</span>
+                            <Input
+                                value={this.state.currentTable}
+                                placeholder="please input table name"
+                                style={{width: 200, margin:'10px 0'}}
+                                onChange={(e) => {
+                                    this.setState({currentTable: e.target.value})
+                                }}/>
+                        </div>
+
+                        <div style={{marginBottom: 20}}>
+                            <span className='table-title'> Table remark</span>
+                            <Input
+                                value={this.state.remark}
+                                placeholder="please input table remark"
+                                style={{width: 250, margin:'10px 0'}}
+                                onChange={(e) => {
+                                    this.setState({remark: e.target.value})
+                                }}/>
+                        </div>
+
+                        <div>
+                            <span className='table-title'> Table fields</span>
+                            <span className='column-title'>name</span>
+                            <span className='column-title'>type</span>
+                            <span className='column-title'>description</span>
+                            {
+                                this.state.columns.map((col, index) =>
+                                    <div key={index} style={{marginBottom: 3}}>
+                                        <Input
+                                            className="column-details"
+                                            value={col.name}
+                                            onChange={this.handleNameChange(index)}
+                                        />
+                                        <Select
+                                            className="column-details"
+                                            defaultValue={col.type}
+                                            onChange={this.handleTypeChange(index)}>
+                                            {
+                                                this.state.types.map((value) =>
+                                                    <Option key={Math.random()+'types'} value={value.toLowerCase()}>{value}</Option>
+                                                )
+                                            }
+                                        </Select>
+                                        <Select
+                                            className="column-details"
+                                            defaultValue={col.description}
+                                            onChange={this.handleDescChange(index)}>
+                                            {
+                                                this.state.descriptions.map((value) =>
+                                                    <Option key={Math.random()+'descriptions'} value={value.toLowerCase()}>{value}</Option>
+                                                )
+                                            }
+                                        </Select>
+                                        <Icon type="delete" theme="twoTone" style={{cursor: 'pointer'}} onClick={this.handleColDelete(index)}/>
+                                    </div>
+                                )
+                            }
+                            <div>
+                                <Input
+                                    className="column-details"
+                                    placeholder="field name"
+                                    onChange={this.handleNameNew}
+                                    value={this.state.newColName}
+                                />
+                                <Select
+                                    className="column-details"
+                                    defaultValue="type"
+                                    onChange={this.handleTypeNew}
+                                    value={this.state.newColType}>
                                     {
                                         this.state.types.map((value) =>
                                             <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
                                         )
                                     }
                                 </Select>
-                                <Select defaultValue={col.description} style={{width: 120, marginRight: 10}}
-                                        onChange={this.handleDescChange(index)}>
-                                    {
-                                        this.state.descriptions.map((value) =>
-                                            <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                                        )
-                                    }
-                                </Select>
-                                <Icon type="delete" theme="outlined" style={{cursor: 'pointer'}}
-                                      onClick={this.handleColDelete(index)}/>
                             </div>
-                        )
-                    }
-                    <div>
-                        <Input placeholder="column_name" style={{width: 120, marginRight: 10}}
-                               onChange={this.handleNameNew}
-                               value={this.state.newColName}/>
-                        <Select defaultValue="type" style={{width: 120, marginRight: 10}} onChange={this.handleTypeNew}
-                                value={this.state.newColType}>
-                            {
-                                this.state.types.map((value) =>
-                                    <Option key={Math.random()} value={value.toLowerCase()}>{value}</Option>
-                                )
-                            }
-                        </Select>
-                    </div>
-                </div>
-                <div style={{marginTop: 20}}>
-                    <UpdateTableButton
-                        currentTable={this.state.currentTable}
-                        columns={this.state.columns}
-                        remark={this.state.remark}
-                        currentTableIndex={this.props.currentTableIndex}
-                        schemaID={this.props.schemaID}
-                        userID={this.props.userID}
-                    />
-                    {
-                        // undefined的时候 上层未传进来 currentTable === 'add'，为的是输入框内不默认显示 add
-                        this.state.currentTable === '' ? '' : this.state.currentTable === undefined ? '' :
-                            <DeleteTableButton
+                        </div>
+
+                        <div style={{marginTop: 20}}>
+                            <UpdateTableButton
                                 currentTable={this.state.currentTable}
+                                columns={this.state.columns}
+                                remark={this.state.remark}
                                 currentTableIndex={this.props.currentTableIndex}
-                                schemaID={this.props.schemaID}
-                                userID={this.props.userID}
+                                schemaID={schemaID}
+                                userID={userID}
                             />
-                    }
-
-                </div>
+                            {/*{*/}
+                                {/*// undefined的时候 上层未传进来 currentTable === 'add'，为的是输入框内不默认显示 add*/}
+                                {/*this.state.currentTable === '' ? '' : this.state.currentTable === undefined ? '' :*/}
+                                    {/*<DeleteTableButton*/}
+                                        {/*currentTable={this.state.currentTable}*/}
+                                        {/*currentTableIndex={this.props.currentTableIndex}*/}
+                                        {/*schemaID={schemaID}*/}
+                                        {/*userID={userID}*/}
+                                    {/*/>*/}
+                            {/*}*/}
+                        </div>
+                    </Content>
+                </Layout>
             </div>
         )
     }
@@ -297,7 +331,7 @@ class UpdateTableButton extends Component {
                                                     }
                                                 });
                                             }}>
-                                                SUBMIT
+                                                save
                                             </Button>
                                         </div>
                                     )

src/components/common/schema/Create.js

@@ -7,6 +7,7 @@ import gql from "graphql-tag";
 
 import {SHOW_SCHEMA, ADD_SCHEMA} from '../../gql'
 import './index.css';
+import {getCookie} from "../../cookie";
 
 const idGen = (kind) => {
     return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
@@ -58,12 +59,11 @@ class Create extends Component {
             });
         }, 1000);
         this.props.hideModal();
-        this.props.history.push(`/quant-service/`);
+        this.props.history.push(`/table/${this.state.schemaName}?id=${varobj.id}`);
     };
 
     render() {
-        let userID = this.props.userID || "user_1543305776799_25177768";
-        console.log('userid', userID);
+        let userID = this.props.userID || getCookie('user_id');
         const {visible, confirmLoading} = this.state;
 
         return (
@@ -101,7 +101,6 @@ class Create extends Component {
                                         placeholder="input schema_name"
                                         onChange={e => {
                                             e.persist();
-                                            console.log('schema name', e.target.value);
                                             this.setState({
                                                 schemaName: e.target.value,
                                             });

src/components/common/schema/index.css

@@ -35,27 +35,48 @@ p.show {
     margin-top: 10px;
 }
 
+.column-menu {
+    padding: 0 24px;
+    position: fixed;
+    width: 100%;
+    z-index: 1;
+    line-height:50px;
+    font-weight:600;
+    background-color: white;
+}
+
 .column-title {
     /*padding-left: 10px;*/
-    font-weight: bolder;
-    font-size: larger;
+    font-weight: 500;
+    font-size: 16px;
     display: inline-block;
-    width: 130px;
+    width: 168px;
     height: 35px;
+    color: #3a76c5;
+}
+
+.column-content {
+    margin-bottom: 20px;
+}
+
+.column-details {
+    width: 120px;
+    margin:10px 48px 10px 0 !important;
 }
 
 .table-title {
-    font-weight: bold;
-    font-size: large;
+    font-weight: 500;
+    font-size: 20px;
     display: block;
     height: 35px;
+    margin: 10px 0;
 }
 
 .table-title::before {
     content: '|';
     display: inline-block;
     font-weight: 900;
-    color: #0B7FC7;
+    color: #3187FA;
     /*border-right: */
 }
 .remark {

src/components/cookie.js

@@ -0,0 +1,27 @@
+export function setCookie(name,value,exdays) {
+    // expires表示过期时间。如果不设置，默认会话结束即关闭浏览器的时候就消失。
+    // 第一步，设置过期时间
+    let date = new Date();
+    date.setDate(date.getDate()+(exdays*24*60*60*1000));
+    document.cookie = name + "=" + value + ";expires=" + date;
+    // alert(document.cookie);
+}
+
+export function getCookie(key) {
+    // 第一步：将字符串转化为数组形式,分割字符串时；后需加空格
+    let arrStr = document.cookie.split('; ');
+    // 第二步：将数组arrStr中的元素再次切割，转换成数组
+    let arrStrLength = arrStr.length;
+
+    for (let i=0;i<arrStrLength;i++){
+        let arr = arrStr[i].split('=');
+        if(arr[0] === key){
+            return arr[1];
+        }
+    }
+    return '';
+}
+
+export function removeCookie(key) {
+    setCookie(key,"任意值",-1);
+}

src/components/login/Login.js

@@ -10,6 +10,8 @@ import gql from "graphql-tag";
 // todo: _.debounce 的引入
 import _ from 'lodash';
 
+import {setCookie} from "../cookie";
+
 axios.defaults.withCredentials = true;
 
 const {Content} = Layout;
@@ -51,6 +53,7 @@ class Login extends Component {
                     loginStatus: 'logined',
                     loginOnce: false
                 });
+                setCookie("user_id",res.data);
 
                 request('http://123.206.193.98:3000/graphql', GET_USER, {id: res.data}).then(data => {
                         this.setState({
@@ -179,6 +182,7 @@ class Login extends Component {
         axios.get(this.state.getID_url)
             .then((res) => {
                 if (res.data !== '') {
+                    setCookie("user_id",res.data);
                     _this.setState({
                             userID: res.data,
                             hasLogin: true,