增加部分页面

src/App.js

@@ -23,11 +23,11 @@ export default class App extends React.Component {
       ],
       arr2 : [
         { 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'},
+        { txt : '退款查询' , icon : '', assembly:'Refund-inquiry'},
+        { txt : '账户概览' , icon : '', assembly:'Account-overview'},
+        { txt : '发起提现' , icon : '', assembly:'Cash-initiated'},
+        { txt : '提现记录' , icon : '', assembly:'Withdrawal-record'},
+        { txt : '分账收益记录' , icon : '', assembly:'Income-record'},
       ],
       assembly : 'Layout',
       defaultSelectedKeys : 'Layout',

src/component/Account-overview/Account-overview.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Card  } from 'antd';
+import { $Axios } from '../../common/publish';
+import '../Account-overview/Account-overview.scss'
+export default class AccountOverview extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            headTxt : '财务管理 > 账户概览',
+        }
+        
+    }
+	
+	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 { headTxt } = this.state;
+        return(
+            <div className='wrap_table'>
+                <div className='header_center'>
+                   { headTxt }
+               </div>
+               <div className='query_table'
+                style={{
+                    padding:'30px'
+                }}
+               >
+               <Card title="企业账户" extra={<a href="#">设置/修改支付密码</a>} style={{ width: 400,display:'inline-block' }}>
+                   <div style={{width:'30%',height:'100px',background:'#f60',float:'left'}}>
+
+                   </div>
+                   <div style={{width:'70%',height:'100px',background:'#ccc',float:'left'}}>
+                        <div>xxxx : xxxxx</div>
+                   </div>
+               </Card>
+               <Card title="入网信息" extra={<a href="#"></a>} style={{ width: 400,display:'inline-block',marginLeft:'20px'  }}>
+                   <div style={{width:'30%',height:'100px',background:'#f60',float:'left'}}>
+
+                   </div>
+                   <div style={{width:'70%',height:'100px',background:'#ccc',float:'left'}}>
+                        <div>xxxx : xxxxx</div>
+                   </div>
+               </Card>
+               <Card title="收支汇总" extra={<a href="#"></a>} style={{ width: 400,display:'inline-block',marginLeft:'20px'  }}>
+                   <div style={{width:'30%',height:'100px',background:'#f60',float:'left'}}>
+
+                   </div>
+                   <div style={{width:'70%',height:'100px',background:'#ccc',float:'left'}}>
+                        <div>xxxx : xxxxx</div>
+                   </div>
+               </Card>
+               </div>
+            </div>
+        )
+    }
+}

src/component/Account-overview/Account-overview.scss

@@ -0,0 +1,35 @@
+.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% - 180px);
+    padding: 20px;
+}
+.query_table{
+    width: 100%;
+    height: 120px;
+    .top_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+        // background-color: #f60;
+    }
+    .btm_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+    }
+}

src/component/Cash-initiated/Cash-initiated.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Input, Button   } from 'antd';
+import { $Axios } from '../../common/publish';
+export default class AccountOverview extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            headTxt : '财务管理 > 发起提现',
+        }
+        
+    }
+	
+	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 { headTxt } = this.state;
+        return(
+            <div className='wrap_table'>
+                <div className='header_center'>
+                   { headTxt }
+               </div>
+               <div className='query_table'
+                style={{
+                    padding:'30px',
+                }}
+               >
+                   <div className='top_div'>
+                        <div>
+                            <div style={{width:'120px',display : 'inline-block',}}> 可提现金额 ： </div>
+                            xxxxxxxxx
+                       </div>
+                       <div>
+                            <div style={{width:'120px',display : 'inline-block',}}> 提现金额 ： </div>
+                            <div style={{width:'200px',display:'inline-block'}}><Input placeholder="请输入金额" /></div>
+                       </div>
+                       <div>
+                            <div style={{width:'120px',display : 'inline-block',}}> 手续费 ： </div>
+                            222222222元
+                       </div>
+                       <div>
+                            <div style={{width:'120px',display : 'inline-block',}}> 交易密码 ： </div>
+                            <div style={{width:'200px',display:'inline-block'}}><Input placeholder="请输入密码" /></div>
+                       </div>
+                       <div>
+                            <Button>重置</Button>
+                            <Button type="primary" style={{marginLeft:'20px'}}>提交</Button>
+                       </div>
+                   </div>
+               </div>
+            </div>
+        )
+    }
+}

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Button, Table } from 'antd';
+import { Button, Table ,Select, Input, DatePicker, Space } from 'antd';
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
 import { $Axios } from '../../common/publish';
 import '../Finance-orderQuery/Finance-orderQuery.scss'
 const { Column, ColumnGroup } = Table;
@@ -56,6 +58,16 @@ export default class FinanceoRderQuery extends React.Component {
                     key: 'age',
                     render: text => <a>查看详情</a>,
                 },
+            ],
+            certificate : [
+                { txt : '统一社会信用代码证',value : 1 },
+                { txt : '民办非企业单位登记证书',value : 2 },
+                { txt : '个体工商户营业执照',value : 3 },
+                { txt : '社会团体法人登记证书',value : 4 },
+                { txt : '事业单位法人证书',value : 5 },
+                { txt : '基金法人登记证书',value : 6 },
+                { txt : '营业执照',value : 7 },
+                { txt : '其他',value : 8 },
             ]
         }
         
@@ -65,7 +77,9 @@ export default class FinanceoRderQuery extends React.Component {
         
     }
 
-
+    onChange(date, dateString){
+        console.log(date, dateString);
+    }
         // let params = {
         //     token : localStorage.getItem('token'),
         //     config_code : 'titleList',
@@ -91,14 +105,52 @@ export default class FinanceoRderQuery extends React.Component {
 
 
     render() {
-        const { data , columns , headTxt } = this.state;
+        const { data , columns , headTxt, certificate } = this.state;
+        const { Option } = Select;
         return(
             <div className='wrap_table'>
                 <div className='header_center'>
                    { headTxt }
                </div>
+               <div className='query_table'>
+                   <div className='top_div'>
+                        <div style={{display : 'inline-block',}}> 订单状态 ： </div>
+                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight : '20px' }}>
+                            {certificate.map((item,index) => (
+                                <Option key={index} value={item.value}>{item.txt}</Option>
+                            ))}
+                        </Select>
+                        <Select size='default' placeholder="商户订单号"  onChange={ this.handleChange } style={{ width: 200 }}>
+                            {certificate.map((item,index) => (
+                                <Option key={index} value={item.value}>{item.txt}</Option>
+                            ))}
+                        </Select>
+                        <div style={{width:'200px',display:'inline-block',marginLeft : '20px'}}><Input placeholder="请输入订单号" /></div>
+                   </div>
+                   <div className='btm_div'>
+                        <div style={{display : 'inline-block',}}> 发起人 ： </div>
+                        <div style={{width:'200px',display:'inline-block',marginLeft : '20px',marginRight:'20px'}}><Input placeholder="请输入用户名" /></div>
+                        <div style={{display : 'inline-block',}}> 支付方式 ： </div>
+                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            {certificate.map((item,index) => (
+                                <Option key={index} value={item.value}>{item.txt}</Option>
+                            ))}
+                        </Select>
+                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={1} value={1}>完成时间</Option>
+                            <Option key={2} value={2}>下单时间</Option>
+                        </Select>
+                        <Space direction="vertical">
+                            <DatePicker onChange={this.onChange} locale={locale}/>
+                        </Space>
+                        <div style={{display : 'inline-block',margin:'0px 10px',color:'#d9d9d9'}}>-</div>
+                        <Space direction="vertical">
+                            <DatePicker onChange={this.onChange} locale={locale}/>
+                        </Space>
+                   </div>
+               </div>
                <div className='tables'>
-                <Table columns={columns} dataSource={data} />
+                    <Table columns={columns} dataSource={data} />
                </div>
             </div>
         )

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

@@ -13,6 +13,23 @@
 }
 .tables{
     width: 100%;
-    height: calc(100% - 60px);
+    height: calc(100% - 180px);
     padding: 20px;
+}
+.query_table{
+    width: 100%;
+    height: 120px;
+    .top_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+        // background-color: #f60;
+    }
+    .btm_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+    }
 }

src/component/Income-record/Income-record.jsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { Button, Table ,Select, Input, DatePicker, Space } from 'antd';
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
+import { $Axios } from '../../common/publish';
+import '../Income-record/Income-record.scss'
+const { Column, ColumnGroup } = Table;
+export default class IncomeRecord 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>,
+                },
+            ],
+            certificate : [
+                { txt : '统一社会信用代码证',value : 1 },
+                { txt : '民办非企业单位登记证书',value : 2 },
+                { txt : '个体工商户营业执照',value : 3 },
+                { txt : '社会团体法人登记证书',value : 4 },
+                { txt : '事业单位法人证书',value : 5 },
+                { txt : '基金法人登记证书',value : 6 },
+                { txt : '营业执照',value : 7 },
+                { txt : '其他',value : 8 },
+            ]
+        }
+        
+    }
+	
+	componentDidMount() {
+        
+    }
+
+    onChange(date, dateString){
+        console.log(date, dateString);
+    }
+        // 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, certificate } = this.state;
+        const { Option } = Select;
+        return(
+            <div className='wrap_table'>
+                <div className='header_center'>
+                   { headTxt }
+               </div>
+               <div className='query_table_l' style={{height:'60px'}}>
+                   <div className='btm_div' style={{height:'100%',lineHeight:'60px',paddingLeft:'20px'}}>
+                        <div style={{display : 'inline-block',}}> 关联分账商户 ： </div>
+                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={1} value={1}>提现中</Option>
+                            <Option key={2} value={2}>提现成功</Option>
+                            <Option key={3} value={3}>提现失败</Option>
+                        </Select>
+                        <div style={{display : 'inline-block',}}> 分账状态 ： </div>
+                        <Select size='default' placeholder="请选择分账状态"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={1} value={1}>分账中</Option>
+                            <Option key={2} value={2}>分账成功</Option>
+                            <Option key={2} value={2}>分账撤回</Option>
+                        </Select>
+                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={1} value={1}>创建时间</Option>
+                            <Option key={2} value={2}>到账完成时间</Option>
+                        </Select>
+                        <Space direction="vertical">
+                            <DatePicker onChange={this.onChange} locale={locale}/>
+                        </Space>
+                        <div style={{display : 'inline-block',margin:'0px 10px',color:'#d9d9d9'}}>-</div>
+                        <Space direction="vertical">
+                            <DatePicker onChange={this.onChange} locale={locale}/>
+                        </Space>
+                   </div>
+               </div>
+               <div className='tables'>
+                    <Table columns={columns} dataSource={data} />
+               </div>
+            </div>
+        )
+    }
+}

src/component/Income-record/Income-record.scss

@@ -0,0 +1,35 @@
+.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% - 180px);
+    padding: 20px;
+}
+.query_table{
+    width: 100%;
+    height: 120px;
+    .top_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+        // background-color: #f60;
+    }
+    .btm_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+    }
+}

src/component/Refund-inquiry/Refund-inquiry.jsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Button, Table ,Select, Input, DatePicker, Space } from 'antd';
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
+import { $Axios } from '../../common/publish';
+import '../Refund-inquiry/Refund-inquiry.scss'
+const { Column, ColumnGroup } = Table;
+export default class RefundInquiry 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>,
+                },
+            ],
+            certificate : [
+                { txt : '统一社会信用代码证',value : 1 },
+                { txt : '民办非企业单位登记证书',value : 2 },
+                { txt : '个体工商户营业执照',value : 3 },
+                { txt : '社会团体法人登记证书',value : 4 },
+                { txt : '事业单位法人证书',value : 5 },
+                { txt : '基金法人登记证书',value : 6 },
+                { txt : '营业执照',value : 7 },
+                { txt : '其他',value : 8 },
+            ]
+        }
+        
+    }
+	
+	componentDidMount() {
+        
+    }
+
+    onChange(date, dateString){
+        console.log(date, dateString);
+    }
+        // 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, certificate } = this.state;
+        const { Option } = Select;
+        return(
+            <div className='wrap_table'>
+                <div className='header_center'>
+                   { headTxt }
+               </div>
+               <div className='query_table'>
+                   <div className='top_div'>
+                        <div style={{display : 'inline-block',}}> 退款状态 ： </div>
+                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight : '20px' }}>
+                            <Option key={1} value={1}>成功</Option>
+                            <Option key={2} value={2}>失败</Option>
+                            <Option key={3} value={3}>处理中</Option>
+                            <Option key={4} value={4}>取消</Option>
+                        </Select>
+                        <div style={{display : 'inline-block',}}> 订单类型 ： </div>
+                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={1} value={1}>网购</Option>
+                            <Option key={2} value={2}>线下消费</Option>
+                        </Select>
+                        <Select size='default' placeholder="订单号选择"  onChange={ this.handleChange } style={{ width: 200 }}>
+                        <Option key={1} value={1}>商户订单号</Option>
+                            <Option key={2} value={2}>退款请求号</Option>
+                        </Select>
+                        <div style={{width:'200px',display:'inline-block',marginLeft : '20px'}}><Input placeholder="请输入订单号" /></div>
+                   </div>
+                   <div className='btm_div'>
+                        <div style={{display : 'inline-block',}}> 发起人 ： </div>
+                        <div style={{width:'200px',display:'inline-block',marginLeft : '20px',marginRight:'20px'}}><Input placeholder="请输入用户名" /></div>
+                        <div style={{display : 'inline-block',}}> 支付方式 ： </div>
+                        <Select size='default' placeholder="请选择"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            {certificate.map((item,index) => (
+                                <Option key={index} value={item.value}>{item.txt}</Option>
+                            ))}
+                        </Select>
+                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={1} value={1}>退款请求时间</Option>
+                            <Option key={2} value={2}>退款完成时间</Option>
+                        </Select>
+                        <Space direction="vertical">
+                            <DatePicker onChange={this.onChange} locale={locale}/>
+                        </Space>
+                        <div style={{display : 'inline-block',margin:'0px 10px',color:'#d9d9d9'}}>-</div>
+                        <Space direction="vertical">
+                            <DatePicker onChange={this.onChange} locale={locale}/>
+                        </Space>
+                   </div>
+               </div>
+               <div className='tables'>
+                    <Table columns={columns} dataSource={data} />
+               </div>
+            </div>
+        )
+    }
+}

src/component/Refund-inquiry/Refund-inquiry.scss

@@ -0,0 +1,35 @@
+.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% - 180px);
+    padding: 20px;
+}
+.query_table{
+    width: 100%;
+    height: 120px;
+    .top_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+        // background-color: #f60;
+    }
+    .btm_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+    }
+}

src/component/Withdrawal-record/Withdrawal-record.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Button, Table ,Select, Input, DatePicker, Space } from 'antd';
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
+import { $Axios } from '../../common/publish';
+import '../Withdrawal-record/Withdrawal-record.scss'
+const { Column, ColumnGroup } = Table;
+export default class WithdrawalRecord 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>,
+                },
+            ],
+            certificate : [
+                { txt : '统一社会信用代码证',value : 1 },
+                { txt : '民办非企业单位登记证书',value : 2 },
+                { txt : '个体工商户营业执照',value : 3 },
+                { txt : '社会团体法人登记证书',value : 4 },
+                { txt : '事业单位法人证书',value : 5 },
+                { txt : '基金法人登记证书',value : 6 },
+                { txt : '营业执照',value : 7 },
+                { txt : '其他',value : 8 },
+            ]
+        }
+        
+    }
+	
+	componentDidMount() {
+        
+    }
+
+    onChange(date, dateString){
+        console.log(date, dateString);
+    }
+        // 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, certificate } = this.state;
+        const { Option } = Select;
+        return(
+            <div className='wrap_table'>
+                <div className='header_center'>
+                   { headTxt }
+               </div>
+               <div className='query_table_l' style={{height:'60px'}}>
+                   <div className='btm_div' style={{height:'100%',lineHeight:'60px',paddingLeft:'20px'}}>
+                        <div style={{display : 'inline-block',}}> 提现状态 ： </div>
+                        <Select size='default' placeholder="请选择提现状态"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={1} value={1}>提现中</Option>
+                            <Option key={2} value={2}>提现成功</Option>
+                            <Option key={3} value={3}>提现失败</Option>
+                        </Select>
+                        <Select size='default' placeholder="请选择时间类型"  onChange={ this.handleChange } style={{ width: 200,marginRight:'20px' }}>
+                            <Option key={1} value={1}>创建时间</Option>
+                            <Option key={2} value={2}>完成时间</Option>
+                        </Select>
+                        <Space direction="vertical">
+                            <DatePicker onChange={this.onChange} locale={locale}/>
+                        </Space>
+                        <div style={{display : 'inline-block',margin:'0px 10px',color:'#d9d9d9'}}>-</div>
+                        <Space direction="vertical">
+                            <DatePicker onChange={this.onChange} locale={locale}/>
+                        </Space>
+                   </div>
+               </div>
+               <div className='tables'>
+                    <Table columns={columns} dataSource={data} />
+               </div>
+            </div>
+        )
+    }
+}

src/component/Withdrawal-record/Withdrawal-record.scss

@@ -0,0 +1,35 @@
+.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% - 180px);
+    padding: 20px;
+}
+.query_table{
+    width: 100%;
+    height: 120px;
+    .top_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+        // background-color: #f60;
+    }
+    .btm_div{
+        width: 100%;
+        height: 50%;
+        line-height: 60px;
+        padding-left: 20px;
+    }
+}