增加页面

src/App.js

@@ -3,14 +3,11 @@ import ReactDOM from 'react-dom';
 import './App.css';
 import { Menu, Button } from 'antd';
 import { SettingOutlined, DollarCircleOutlined,  } from '@ant-design/icons';
+import * as Icons from "@ant-design/icons";
 import {
-  AppstoreOutlined,
   MenuUnfoldOutlined,
   MenuFoldOutlined,
   PieChartOutlined,
-  DesktopOutlined,
-  ContainerOutlined,
-  MailOutlined,
 } from '@ant-design/icons';
 // import { $Axios } from '&/common/publish';
 
@@ -21,50 +18,71 @@ export default class App extends React.Component {
       isLogin: true,
       current: 'one',
       arr1 : [
-        { txt : '商户入网' , icon : '' , assembly:'Layout' },
-        { txt : '商户入网列表' , icon : '', assembly:'center-tab'}
+        { txt : '商户入网' , icon : 'GlobalOutlined' , assembly:'Layout' },
+        { txt : '商户入网列表' , icon : 'SlidersOutlined', assembly:'center-tab'}
       ],
       arr2 : [
-        { txt : '订单查询' , icon : ''},
-        { txt : '退款查询' , icon : ''},
-        { txt : '账户概览' , icon : ''},
-        { txt : '发起提现' , icon : ''},
-        { txt : '提现记录' , icon : ''},
-        { txt : '分账收益记录' , icon : ''},
+        { txt : '订单查询' , icon : '', assembly:'Finance-orderQuery'},
+        { txt : '退款查询' , icon : '', assembly:'x1'},
+        { txt : '账户概览' , icon : '', assembly:'x2'},
+        { txt : '发起提现' , icon : '', assembly:'Fi'},
+        { txt : '提现记录' , icon : '', assembly:'x4'},
+        { txt : '分账收益记录' , icon : '', assembly:'x5'},
       ],
-      assembly : 'Layout'
+      assembly : 'Layout',
+      defaultSelectedKeys : 'Layout',
+      defaultSelectedKeys1 : 'Finance-orderQuery',
+      assembly_cw :  'Finance-orderQuery'
     }
   }
 
 
   componentDidMount() {
-
+    
   }
 
   handleClick(e){
-    console.log('点击的 ', e);
+    console.log( this.state);
     this.setState({	
-      current : e.key
-    })
+      current : e.key,
+    });
+    this.initassembly()
   }
 
   toggleCollapsed(e){
     this.setState({
       collapsed: !this.state.collapsed,
     });
-    // this.setState({ current: e.key });
   }
+
   toggleNavs(e){
-    this.setState({
-      assembly: e.key,
-    });
-    console.log(e)
+    let current = this.state.current;
+    if(current == 'one'){
+      this.setState({
+        assembly: e.key,
+      });
+    }else{
+      this.setState({
+        assembly_cw : e.key
+      });
+    }
+  
   }
   initassembly(){
-    const MapDialog = React.lazy(() => import(`./component/${this.state.assembly}/${this.state.assembly}.jsx`));
-    return <Suspense  fallback="" key="dialog"><MapDialog refModal={this.state.current} /></Suspense>
+    let current = this.state.current;
+    let Assembly = null;
+    if(current == 'one'){
+      Assembly = React.lazy(() => import(`./component/${this.state.assembly}/${this.state.assembly}.jsx`));
+    }else{
+      Assembly = React.lazy(() => import(`./component/${this.state.assembly_cw}/${this.state.assembly_cw}.jsx`));
+    }
+    
+    return <Suspense  fallback="" key="dialog"><Assembly refModal={this.state.current} /></Suspense>
+  }
+  initIcon(item){
+    let Icon = item.icon;
+    return React.createElement(Icons[Icon])
   }
-  
 
   // autoLogin = () => {
   //     let param = {
@@ -86,7 +104,7 @@ export default class App extends React.Component {
   // }
 
   render() {
-    const { current, arr1, arr2 } = this.state;
+    const { current, arr1, arr2 ,keys } = this.state;
     const { SubMenu } = Menu;
     return (
       <React.Fragment>
@@ -111,26 +129,35 @@ export default class App extends React.Component {
             </div>
           </div>
           <div className='main_centers'>
-            <Menu
+            {current === 'one' && <Menu
                 className='main_left_nav'
                 defaultSelectedKeys={[this.state.assembly]}
-                // defaultOpenKeys={[this.state.assembly]}
                 mode="inline"
                 theme="dark"
                 inlineCollapsed={this.state.collapsed}
                 onClick={this.toggleNavs.bind(this)}
               >
                 {current === 'one' && (arr1.map((item,index) =>(
-                  <Menu.Item key={item.assembly} data={item.txt} icon={<PieChartOutlined />}>
+                  <Menu.Item key={item.assembly} data={item.txt} icon={this.initIcon(item)}>
                     {item.txt}
                   </Menu.Item>
                 )))}
+              </Menu>}
+              {current === 'tow' && <Menu
+                className='main_left_nav'
+                defaultSelectedKeys={[this.state.assembly_cw]}
+                mode="inline"
+                theme="dark"
+                inlineCollapsed={this.state.collapsed}
+                onClick={this.toggleNavs.bind(this)}
+              >
                 {current === 'tow' && (arr2.map((item,index) =>(
-                  <Menu.Item key={item.assembly} data={item.txt} icon={<PieChartOutlined />}>
+                  <Menu.Item key={item.assembly} data={item.txt} icon={<DollarCircleOutlined />}>
                     {item.txt}
                   </Menu.Item>
                 )))}
-              </Menu>
+              </Menu>}
+              
               <div className='main_right_center'>
                 {
                     this.initassembly()

src/component/Finance-orderQuery/Finance-orderQuery.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Button, Table } from 'antd';
+import { $Axios } from '../../common/publish';
+import '../Finance-orderQuery/Finance-orderQuery.scss'
+const { Column, ColumnGroup } = Table;
+export default class FinanceoRderQuery extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            headTxt : '财务管理 > 订单查询',
+            data : [
+                {
+                  key: '1',
+                  name: 'John Brown',
+                  age: 32,
+                  address: 'New York No. 1 Lake Park',
+                },
+                {
+                  key: '2',
+                  name: 'Jim Green',
+                  age: 42,
+                  address: 'London No. 1 Lake Park',
+                },
+                {
+                  key: '3',
+                  name: 'Joe Black',
+                  age: 32,
+                  address: 'Sidney No. 1 Lake Park',
+                },
+              ],
+              columns : [
+                {
+                    title: '序号',
+                    dataIndex: 'name',
+                    key: 'name',
+                    
+                },
+                {
+                    title: '签约名称',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '商户简称',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '入网时间',
+                    dataIndex: 'age',
+                    key: 'age',
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'age',
+                    key: 'age',
+                    render: text => <a>查看详情</a>,
+                },
+            ]
+        }
+        
+    }
+	
+	componentDidMount() {
+        
+    }
+
+
+        // let params = {
+        //     token : localStorage.getItem('token'),
+        //     config_code : 'titleList',
+        //     system_code : "COMBINE",
+        // }
+        // $Axios('post','http://user_api.airqualitychina.cn:7070/auth/getConfigList',params,(res) => {
+        //     let titleLists = []
+        //     let result = res.data.result[0].config_value.split(',');
+        //     for(let i = 0 ; i < result.length; i++){
+        //         for(let k = 0; k < titleList.menuList.length; k ++){
+        //             if(result[i] == titleList.menuList[0][k].id){
+        //                 titleLists.push(titleList.menuList[0][k])
+        //             }
+        //         }
+        //         if( i == result.length - 1){
+        //             this.setState({
+        //                 menuList : titleLists,
+        //             })
+        //         }
+        //     }
+           
+        // })
+
+
+    render() {
+        const { data , columns , headTxt } = this.state;
+        return(
+            <div className='wrap_table'>
+                <div className='header_center'>
+                   { headTxt }
+               </div>
+               <div className='tables'>
+                <Table columns={columns} dataSource={data} />
+               </div>
+            </div>
+        )
+    }
+}

src/component/Finance-orderQuery/Finance-orderQuery.scss

@@ -0,0 +1,18 @@
+.wrap_table{
+    width: 100%;
+    height: 100%;
+}
+.header_center{
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    text-indent: 20px;
+    font-size: 15px;
+    font-weight: 600;
+    border-bottom: 1px solid #ccc;
+}
+.tables{
+    width: 100%;
+    height: calc(100% - 60px);
+    padding: 20px;
+}