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

import React from 'react';
import { Button, Table ,Select, message, DatePicker, Space , Input } 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 : [],
              columns : [
                {
                    title: '序号',
                    dataIndex: 'num',
                    key: 'num',
                },
                {
                    title: '分账流水号',
                    dataIndex: 'requestId',
                    key: 'requestId',
                },
                {
                    title: '分账金额',
                    dataIndex: 'amount',
                    key: 'amount',
                    render: (text, record, index) => <text style={{color: record.amount < 0 ? 'green' : 'red'}}>{record.amount}</text>,
                },
                {
                    title: '关联分账商户',
                    dataIndex: 'ownerName',
                    key: 'ownerName',
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                },
                {
                    title: '到账完成时间',
                    dataIndex: 'finishTime',
                    key: 'finishTime',
                },
                {
                    title: '分账状态',
                    dataIndex: 'status',
                    key: 'status',
                },
            ],
            timeType : null,
            keys : 1,
            starTime : '',
            endTime : '',
            status : '',
            total: null,
            current: 1,
            paginationProps: {
                showSizeChanger: false,//设置每页显示数据条数
                showQuickJumper: false,
                showTotal: () => `共${this.state.total}条`,
                pageSize: 10,
                total: null,  //数据的总的条数
                onChange: (current) => this.changePage(current), //点击当前页码
            },
            lodings : null,
            shdata : ''
        }
        
    }
	
	componentDidMount() {
        this.initData()
    }

    onChange(date, dateString){
        console.log(date, dateString);
    }


    queryClick(){

        if(this.state.timeType !== 0 && this.state.timeType !== null){
            if(this.state.endTime <= this.state.starTime && (this.state.starTime !== '' && this.state.endTime !== '')){
                message.error('结束时间不可小于或者等于开始时间!');
            }else{
                if(this.state.starTime == '' && this.state.endTime == ''){
                    this.initData()
                }else if(this.state.starTime !== '' && this.state.endTime !== ''){
                    this.initData()
                }else{
                    if(this.state.starTime == ''){
                        message.error('请选择开始时间!');
                    }else if(this.state.endTime == ''){
                        message.error('请选择结束时间!');
                    }
                }
            }
        }else{
            this.initData()
        }
      
    }

    initData(){
        this.setState({
            lodings : true
        })
        let that_ = this;
        let url = '/payment/spare.bill.list.groovy';
        let params = {
            userId: JSON.parse(localStorage.getItem('userData')).userId,//当前登陆用户userid
            ownerId:document.getElementById("fzsh").value,//关联分账商户
            status: this.state.status,//分账状态，1：分账成功2：分账中3：分账撤回
            createTimeStart : '',//创建开始时间
            createTimeEnd : '',//创建结束时间
            finishTimeStart : '',//完成开始时间
            finishTimeEnd : '',//完成结束时间
            psize:10,//每页大小
            pno:1 //第几页，起始值从1开始
        }
        let timeType = this.state.timeType;
        if(timeType == 0){
            params.createTimeStart = ''
            params.createTimeEnd = ''
            params.finishTimeStart = ''
            params.finishTimeEnd = ''
        }else if(timeType == 1){
            params.createTimeStart = this.state.starTime
            params.createTimeEnd = this.state.endTime
            params.finishTimeStart = ''
            params.finishTimeEnd = ''
        }else if(timeType == 2){
            params.finishTimeStart = this.state.starTime
            params.finishTimeEnd = this.state.endTime
            params.createTimeStart = ''
            params.createTimeEnd = ''
        }
        $Axios('get',url,params,(res) => {
            let status = res.data.head.status;
            if(status == 200){
                let data = res.data.body.list;
                let arr = [];
                data.map((item,index) => {
                    let obj = {
                        num : index + 1,
                        amount: item.amount,
                        createTime: item.createTime,
                        finishTime: item.finishTime,
                        id: item.id,
                        ownerId: item.ownerId,
                        requestId: item.requestId,
                        status: item.status
                    };
                    arr.push(obj)
                })
                let total = res.data.body.totalCount;
                that_.state.paginationProps.total = total;
                that_.setState({
                    data: arr,
                    total: total,  //数据的总的条数
                    lodings : false
                })
            }
        })
    }
    
    handleChange_2(e) {  //分账状态
        this.setState({
            status : e
        })
    }

    handleChange_5(e) {
        this.setState({
            timeType : e
        });
        if(e == 0){
            this.setState({
                starTime: '',
                endTime: '',
                keys : new Date().getTime()
            });
        }
    }


    starTime = (value,dateString)=>{
        if(dateString !== ''){
            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
            let time = new Date(dateString).getTime()/1000;
            this.setState({
                starTime: time
            })
        }else{
            this.setState({
                starTime: ''
            })
        }
        
    }

    endTime = (value,dateString)=>{
        if(dateString !== ''){
            dateString = new Date(value).formats('yyyy-MM-dd 00:00:00')
            let time = new Date(dateString).getTime()/1000;
            this.setState({
                endTime: Number(time) + 86400  //加24小时
            })
        }else{
            this.setState({
                endTime: ''
            })
        }
    }
        


    render() {
        const { data , columns , headTxt ,timeType,keys,paginationProps,lodings,shdata } = 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>
                        <Input id='fzsh' style={{width:'200px',marginRight:'20px'}}  placeholder="请输入分账商户"/>
                        <div style={{display : 'inline-block',}}> 分账状态 ： </div>
                        <Select size='default' placeholder="请选择分账状态"  onChange={ this.handleChange_2.bind(this) } 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_5.bind(this)} style={{ width: 200,marginRight:'20px' }}>
                            <Option key={0} value={0}>不限时间类型</Option>
                            <Option key={1} value={1}>创建时间</Option>
                            <Option key={2} value={2}>到账完成时间</Option>
                        </Select>
                        <Space direction="vertical">
                            <DatePicker key={keys} onChange={this.starTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false} placeholder='请选择开始时间' />
                        </Space>
                        <div style={{ display: 'inline-block', margin: '0px 10px', color: '#d9d9d9' }}>-</div>
                        <Space direction="vertical">
                            <DatePicker key={keys} onChange={this.endTime} locale={locale} disabled={timeType == null ? true : false || timeType == 0 ? true : false}  placeholder='请选择结束时间' />
                        </Space>
                        <Button type="primary" style={{
                            float: 'right', display: 'inline-block', margin: '15px 60px',
                        }} onClick={this.queryClick.bind(this)}>搜索</Button>
                   </div>
               </div>
               <div className='tables'>
                    <Table 
                        columns={columns} 
                        dataSource={data} 
                        pagination={paginationProps}
                        loading = {lodings}
                        locale={{ emptyText: '暂无数据' }}
                    />
               </div>
            </div>
        )
    }
}