增加样式

src/components/common/schema/Schema.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import {Row, Col, Input, Icon, Button, Spin} from 'antd';
+import {Row, Col, Input, Icon, Button, Spin, Pagination} from 'antd';
 import './index.css';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
@@ -77,11 +77,11 @@ class Schema extends Component {
                                             </div>
                                             <div className={'schema-table-list-title'}>
                                                 <Row>
-                                                    <Col span={8}><span
+                                                    <Col span={10}><span
                                                         className={'schema-table-title'}>Name</span></Col>
-                                                    <Col span={8}><span
+                                                    <Col span={10}><span
                                                         className={'schema-table-title'}>Remark</span></Col>
-                                                    <Col span={8}>
+                                                    <Col span={2} offset={2}>
                                                         <span
                                                             className={'schema-table-title'}
                                                             onClick={() => {
@@ -99,15 +99,15 @@ class Schema extends Component {
                                                     <div key={table.name} className={'schema-table-list-content'}>
                                                         <Row>
                                                             <Col
-                                                                span={8}
+                                                                span={10}
                                                                 onClick={() => this.switchTable(table.name)}
                                                             >
                                                                 <span className={'schema-table-content'}>{table.name}</span>
                                                             </Col>
-                                                            <Col span={8}>
+                                                            <Col span={10}>
                                                                 <span className={'schema-table-content'}>{table.remark}</span>
                                                             </Col>
-                                                            <Col span={8}>
+                                                            <Col span={2} offset={2}>
                                                                 <span className={'schema-table-content'}>
                                                                     <DeleteTableButton
                                                                         currentTable={table.name}
@@ -122,6 +122,21 @@ class Schema extends Component {
 
                                                 ))
                                             }
+                                            <div className={'schema-bottom'}>
+                                                <Row>
+                                                    <Col span={4}>
+                                                        <div className={'delete-schema'}>
+                                                            {/*<DeleteSchemaButton/>*/}
+                                                            <Button type="danger">delete</Button>
+                                                        </div>
+                                                    </Col>
+                                                    <Col span={4} offset={16}>
+                                                        <div className={'pagination'}>
+                                                            <Pagination simple defaultCurrent={2} total={50} />
+                                                        </div>
+                                                    </Col>
+                                                </Row>
+                                            </div>
                                         </div>
                                         :
                                         this.state.currentTable === 'add' ?
@@ -160,47 +175,45 @@ class Schema extends Component {
 export default Schema;
 
 
-// 备用代码
-
-// class DeleteSchemaButton extends Component {
-//     constructor(props) {
-//         super(props);
-//         this.state = {
-//             schemaName: props.schemaName
-//         }
-//     }
-//
-//     render() {
-//         let userID = this.props.userID;
-//         return (
-//             <Mutation
-//                 mutation={DELETE_SCHEMA}
-//                 update={(cache) => {
-//                     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: userID},
-//                         data
-//                     });
-//                 }}
-//             >
-//                 {(delete_schema, {loading, error}) => {
-//                     if (error)
-//                         return 'error';
-//                     if (loading)
-//                         return <Spin style={{marginLeft: 3}}/>;
-//                     return (
-//                         <Button onClick={(e) => {
-//                             delete_schema({variables: {schemaName: this.props.schemaName}});
-//                         }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
-//                     )
-//                 }}
-//             </Mutation>
-//         )
-//     }
-// }
+class DeleteSchemaButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            schemaName: props.schemaName
+        }
+    }
+
+    render() {
+        let userID = this.props.userID;
+        return (
+            <Mutation
+                mutation={DELETE_SCHEMA}
+                update={(cache) => {
+                    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: userID},
+                        data
+                    });
+                }}
+            >
+                {(delete_schema, {loading, error}) => {
+                    if (error)
+                        return 'error';
+                    if (loading)
+                        return <Spin style={{marginLeft: 3}}/>;
+                    return (
+                        <Button onClick={(e) => {
+                            delete_schema({variables: {schemaName: this.props.schemaName}});
+                        }} type="danger" shape="circle" icon="delete" size='small' style={{marginLeft: 3}}/>
+                    )
+                }}
+            </Mutation>
+        )
+    }
+}
 
 
 class DeleteTableButton extends Component {

src/components/common/schema/index.css

@@ -122,4 +122,12 @@ p.show {
 
 .schema-table-content {
   line-height: 40px;
+}
+
+.schema-bottom {
+  margin-top: 70px;
+}
+
+.delete-schema {
+
 }