kede-client/js/component/manageCenter/project/task/payApplyReject/index.jsx

import React,{Component} from 'react';
import $ from "jquery/src/ajax";
import {
    Spin,
    Table,
    message,
    Tooltip, Tabs, Button,Modal
} from "antd";
import {ShowModal,getProjectStatus} from "@/tools";
import FilterColumn from './filterColumn';
import DetailsModal from './detailsModal/index';
import OrderPaymentModal from './component/orderPaymentModal';
import './index.less';
import CheckProject from "../../../components/checkProject";
import PayRecord from "../../../components/checkProject/payRecord";
import {ChooseList} from "../../../order/orderNew/chooseList";
import {getProjectName} from "../../../../tools";

const { TabPane } = Tabs;

class PayApplyReject extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading: true,
            columns: [
                {
                    title: "支付编号",
                    dataIndex: "key",
                    key: "key",
                },
                {
                    title: "项目编号",
                    dataIndex: "tid",
                    key: "tid",
                },
                {
                    title: "项目名称",
                    dataIndex: "pname",
                    key: "pname",
                },
                {
                    title: "项目状态",
                    dataIndex: "projectStatus",
                    key: "projectStatus",
                    render: (text) => {
                        return getProjectName(text);
                    },
                },
                {
                    title: "分类名称",
                    dataIndex: "cname",
                    key: "cname",
                },
                {
                    title: "合同编号",
                    dataIndex: "contractNo",
                    key: "contractNo",
                },
                {
                    title: "订单编号",
                    dataIndex: "orderNo",
                    key: "orderNo",
                },
                {
                    title: "客户名称",
                    dataIndex: "userName",
                    key: "userName",
                    width: 150,
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "部门名称",
                    dataIndex: "depName",
                    key: "depName",
                    render: (text) => {
                        return (
                            <Tooltip placement="bottom" title={text && text.length > 9 ? text : ''}>
                                {text && text.length > 9 ? text.substr(0, 9) + "..." : text}
                            </Tooltip>
                        )
                    },
                },
                // {
                //     title: "实际总付款",
                //     dataIndex: "costAmount",
                //     key: "costAmount",
                // },
                {
                    title: "付款类型",
                    dataIndex: "chooseType",
                    key: "chooseType",
                    render: (text) => {
                        return text == 0 ? '第三方成本' :
                            text == 1 ? '催款节点' :'官费';
                    },
                },
                {
                    title: "本次申请金额",
                    dataIndex: "applicationAmount",
                    key: "applicationAmount",
                    render: (text) => {
                        return isNaN(parseFloat(text)) ? text : parseFloat(text);
                    }
                },
                {
                    title: "已支付",
                    dataIndex: "paymentAmount",
                    key: "paymentAmount",
                    render: (text) => {
                        return isNaN(parseFloat(text)) ? text : parseFloat(text);
                    },
                },
                {
                    title: "供应商",
                    dataIndex: "companyName",
                    key: "companyName",
                },
                {
                    title: "申请人",
                    dataIndex: "aname",
                    key: "aname",
                },
                {
                    title: "财务名称",
                    dataIndex: "financeName",
                    key: "financeName",
                },
                {
                    title: "状态",
                    dataIndex: "status",
                    key: "status",
                    render: (text) => {
                        return text === 0 ? '审核' :
                            text === 1 ? '待支付' :
                                text === 2 ? '驳回' :
                                    text === 3 ? '已支付' :
                                        text === 4 ? '已取消' : '';
                    },
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    key: "createTime",
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    key: 'action',
                    render: (text, record) => {
                        return (
                            <div style={{
                                display:'flex',
                                alignItems:'center',
                            }}>
                                <Button type="primary" size="small" onClick={(e) => {
                                    e.stopPropagation();
                                    this.setState({
                                        payRecordVisible: true,
                                        orderPaymentsId: record.id,
                                        tid: record.tid,
                                        projectType: record.projectType,
                                    })
                                }}>
                                    {
                                        record.status === 0 ? '待审核' :
                                            record.status === 1 ? '待支付' :
                                                record.status === 2 ? '查看详情' : '查看详情'
                                    }
                                </Button>
                                <Button
                                    type="primary"
                                    style={{
                                        marginLeft: "10px",
                                        background: "orangered",
                                        border: "none"
                                    }}
                                    size="small"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.setState({
                                            paymentVisible: true,
                                            tid: record.tid,
                                            projectType: record.projectType,
                                        })
                                    }}>
                                    付款记录
                                </Button>
                            </div>
                        )
                    }
                }
            ],
            dataSource: [],
            selectedRowKeys: [],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page,this.state.searchInfor);
                }.bind(this),
                showTotal: function (total) {
                    return "共" + total + "条数据";
                },
            },
            page: 1,
            selectInfor: {},
            visible: false,
            paymentVisible: false,
            tid: 0,
            projectType: 0,
            payRecordVisible: false,
            orderPaymentsId: 0,
        }
        this.changeList = this.changeList.bind(this);
    }

    componentDidMount() {
        this.loadData()
    }

    loadData(pageNo,data={}) {
        this.setState({
            loading: true,
        });
        data.pageNo = pageNo || 1;
        data.pageSize = this.state.pagination.pageSize;
        data.status = 2;   //驳回状态
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/company/selectPaymentList",
            data: data,
            success: function (data) {
                ShowModal(this);
                let theArr = [];
                if (data.error.length || data.data.list == "") {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    this.setState({
                        page: data.data.pageNo
                    });
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        let obj = thisdata;
                        obj.key = thisdata.id;
                        theArr.push(obj);
                    }
                    this.state.pagination.total = data.data.totalCount;
                }
                if (data.data && data.data.list && !data.data.list.length) {
                    this.state.pagination.total = 0;
                }
                this.setState({
                    dataSource: theArr,
                    pageNo: pageNo,
                    pagination: this.state.pagination,
                });
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    tableRowClick(record){
        this.setState({
            visible: true,
            selectInfor: record,
        })
    }

    changeList(arr) {
        const newArr = [];
        this.state.columns.forEach(item => {
            arr.forEach(val => {
                if (val === item.title) {
                    newArr.push(item);
                }
            });
        });
        this.setState({
            changeList: newArr
        });
    }

    render() {
        return (
            <div className="user-content">
                <div className="content-title">
                    <span>付款驳回列表</span>
                </div>
                <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
                    <TabPane tab="搜索" key="1">
                        <div style={{paddingTop:'10px'}}>
                            <FilterColumn
                                {...this.props}
                                onSearch={(data)=>{
                                    this.setState({
                                        searchInfor: data
                                    });
                                    this.loadData(1,data);
                                }}
                                onResetSearch={()=>{
                                    this.setState({
                                        searchInfor: {}
                                    });
                                    this.loadData();
                                }}
                            />
                        </div>
                    </TabPane>
                    <TabPane tab="更改表格显示数据" key="2">
                        <div style={{ marginLeft: 10 }}>
                            <ChooseList
                                columns={this.state.columns}
                                changeFn={this.changeList}
                                changeList={this.state.changeList}
                                top={55}
                                margin={11}
                            />
                        </div>
                    </TabPane>
                </Tabs>
                <div className="patent-table">
                    <Spin spinning={this.state.loading}>
                        <Table
                            columns={
                                this.state.changeList
                                    ? this.state.changeList
                                    : this.state.columns
                            }
                            dataSource={this.state.dataSource}
                            pagination={this.state.pagination}
                            onRowClick={(record)=>{
                                this.tableRowClick(record)
                            }}
                            style={{
                                cursor: 'pointer',
                            }}
                            scroll={{ x: "max-content", y: 0 }}
                            bordered
                            size="small"
                        />
                    </Spin>
                </div>
                {
                    this.state.visible ?
                        <DetailsModal
                            tid={this.state.selectInfor.tid}
                            orderNo={this.state.selectInfor.orderNo}
                            projectType={this.state.selectInfor.projectType}
                            projectStatus={this.state.selectInfor.projectStatus}
                            taskName={this.state.selectInfor.pname}
                            taskID={this.state.selectInfor.tid}
                            visible={this.state.visible}
                            refreshList={()=>{
                                this.loadData(this.state.page,this.state.searchInfor);
                            }}
                            visitCancel={()=>{
                                this.setState({
                                    visible: false
                                })
                                this.loadData(this.state.page,this.state.searchInfor);
                            }}/> : <div/>
                }
                {this.state.paymentVisible ?
                    <OrderPaymentModal
                        tid={this.state.tid}
                        visible={this.state.paymentVisible}
                        projectType={this.state.projectType}
                        onCancer={()=>{
                            this.setState({
                                paymentVisible: false,
                                tid: 0,
                                projectType: 0,
                            });
                            this.loadData(this.state.page,this.state.searchInfor);
                        }}
                        onSuccess={()=>{
                            this.setState({
                                paymentVisible: false,
                                tid: 0,
                                projectType: 0,
                            });
                            this.loadData(this.state.page,this.state.searchInfor);
                        }}/> :
                    <div/>
                }
                {this.state.payRecordVisible ? <PayRecord
                    {...this.props}
                    payId={this.state.orderPaymentsId}
                    visible={this.state.payRecordVisible}
                    tid={this.state.tid}
                    projectType={this.state.projectType}
                    changeVisible={()=>{
                        this.loadData(this.state.page,this.state.searchInfor);
                        this.setState({
                            payRecordVisible: false,
                            orderPaymentsId: 0,
                            tid: 0,
                            projectType: 0,
                        })
                    }}
                /> : <div/>}
            </div>
        );
    }
}

export default PayApplyReject