改变目录结构

src/app/App.jsx

@@ -9,15 +9,17 @@ import 'moment/locale/zh-cn';
 import {FormattedMessage} from 'react-intl';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 
-import WechatService from "./wechatService/WechatService";
 import QuantService from "./quantService/QuantService";
 import TrialCase from "./graphqlService/trialCase/TrialCase";
 import UserCreate from "./graphqlService/userCreate/UserCreate";
+import WXTrialCase from "./wechatService/wxTrialCase/WXTrialCase";
+import WXUserCreate from "./wechatService/wxUserCreate/WXUserCreate";
 import Login from "../login/Login";
 import './graphqlService/common/graphql/index.css';
 import './index.css'
 import Create from "./graphqlService/common/schema/Create";
-import WxCreate from "./wechatService/WxCreate";
+import WxCreate from "./wechatService/wxCreate/WxCreate";
+
 
 import {SHOW_ALL_SCHEMA, SHOW_ALL_WXCONFIG} from "../gql";
 import axios from 'axios';
@@ -315,7 +317,8 @@ class App extends Component {
                                 <Route path="/" exact component={TrialCase}/>
                                 <Route path="/graphql-service/trial-case/:case" component={TrialCase}/>
                                 <Route path="/graphql-service/my-create/:case" component={UserCreate}/>
-                                <Route path="/wechat-service/:sidebar/:case" component={WechatService}/>
+                                <Route path="/wechat-service/trial-case/:case" component={WXTrialCase}/>
+                                <Route path="/wechat-service/my-create/:case" component={WXUserCreate}/>
                                 <Route path="/quant-service/:sidebar/:case" component={QuantService}/>
                                 <Route path="/login/:setting" component={Login}/>
                                 <Route path="/login" component={Login}/>

src/app/wechatService/WxConfig.jsx → src/app/wechatService/wxConfig/WxConfig.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {Input, Radio, Collapse, Button, Icon} from 'antd';
 import './index.css';
-import {idGen} from "../../func";
+import {idGen} from "../../../func";
 
 class WxConfig extends Component {
 
@@ -9,6 +9,19 @@ class WxConfig extends Component {
         super(props);
         this.state = {
             configs: ['AppName', 'AppID', 'AppSecret', 'URL', 'Token', 'welcome_words', 'pay_api_key', 'attach', 'mch_id', 'body', 'spbill_create_ip', 'notify_url'],
+            appName: '',
+            configID: '',
+            mch_id: '',
+            notify_url: '',
+            appSecret: '',
+            appID: '',
+            token: '',
+            spbill_create_ip: '',
+            enter_url: '',
+            pay_api_key: '',
+            body: '',
+            welcome_words: '',
+            attach: ''
         }
     }
 

src/app/wechatService/WxCreate.js → src/app/wechatService/wxCreate/WxCreate.js

@@ -5,10 +5,10 @@ import {Modal, Row, Col, Input, Icon, Button, Spin} from 'antd';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
 
-import {ADD_WXCONFIG, SHOW_WXCONFIG} from '../../gql'
+import {ADD_WXCONFIG, SHOW_WXCONFIG} from '../../../gql'
 import './index.css';
-import {getCookie} from "../../cookie";
-import {idGen} from "../../func";
+import {getCookie} from "../../../cookie";
+import {idGen} from "../../../func";
 
 class WxCreate extends Component {
     constructor(props) {

src/app/wechatService/wxCreate/index.css

@@ -0,0 +1,3 @@
+.add-input {
+  margin-top: 10px;
+}

src/app/wechatService/WechatService.jsx → src/app/wechatService/wxTrialCase/WXTrialCase.js

@@ -2,13 +2,13 @@ import React, {Component} from 'react';
 
 import {Layout, Menu} from 'antd';
 
-import WxConfig from "./WxConfig";
-import WxDeploy from "./WxDeploy";
-import WxResult from './WxResult';
+import WxConfig from "../wxConfig/WxConfig";
+import WxDeploy from "../wxDeploy/WxDeploy";
+import WxResult from '../wxResult/WxResult';
 
 const {Content} = Layout;
 
-class WechatService extends Component {
+class WXTrialCase extends Component {
     constructor() {
         super();
         this.state = {
@@ -65,4 +65,4 @@ class WechatService extends Component {
     }
 }
 
-export default WechatService;
+export default WXTrialCase;

src/app/wechatService/wxUserCreate/WXUserCreate.js

@@ -0,0 +1,68 @@
+import React, {Component} from 'react';
+
+import {Layout, Menu} from 'antd';
+
+import WxConfig from "../wxConfig/WxConfig";
+import WxDeploy from "../wxDeploy/WxDeploy";
+import WxResult from '../wxResult/WxResult';
+
+const {Content} = Layout;
+
+class WXUserCreate extends Component {
+    constructor() {
+        super();
+        this.state = {
+            menuLevel3: "wechat-config",
+        }
+    }
+
+    switchMenu = (menuName, e) => {
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['wechat-config']}
+                    style={{
+                        padding: '0 24px',
+                        position: 'fixed',
+                        width: '100%',
+                        zIndex: '1',
+                        lineHeight: '50px',
+                        fontWeight: 600
+                    }}
+                    onClick={(e) => this.switchMenu('menuLevel3', e)}
+                    selectedKeys={[this.state.menuLevel3]}
+                >
+                    <Menu.Item key="wechat-config">config settings</Menu.Item>
+                    <Menu.Item key="wechat-deploy">deploy settings</Menu.Item>
+                    <Menu.Item key="wechat-result">result</Menu.Item>
+                </Menu>
+
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff', marginTop: '48px'}}>
+                        {(() => {
+                            switch (this.state.menuLevel3) {
+                                case 'wechat-config':
+                                    return <WxConfig/>;
+                                case 'wechat-deploy':
+                                    return <WxDeploy/>;
+                                case 'wechat-result':
+                                    return <WxResult/>;
+                                default:
+                                    return <WxConfig/>
+                            }
+                        })()}
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default WXUserCreate;