kede-client/js/component/manageCenter/set/projectConfigure/officialFees.js

import React,{Component} from 'react';
import {Button, Input, message, Select, Spin, Table, Modal, Popconfirm, Tabs} from "antd";
import AddOfficialFeePrice from './addOfficialFeePrice'
import $ from "jquery/src/ajax";
import '../content.less';
import {ChooseList} from "../../order/orderNew/chooseList";

const TabPane = Tabs.TabPane;

class OfficialFees extends Component{
    constructor(props) {
        super(props);
        this.state={
            type:'',
            dataSource: [],
            columns: [
                {
                    title: '项目类型',
                    dataIndex: 'typeName',
                    key: 'typeName',
                },
                {
                    title: '专利类型',
                    dataIndex: 'typePatentName',
                    key: 'typePatentName',
                },
                {
                    title: '全额(万元)',
                    dataIndex: 'amount',
                    key: 'amount',
                },
                {
                    title: '减缴85%',
                    dataIndex: 'proportion85',
                    key: 'proportion85',
                },
                {
                    title: '备注',
                    dataIndex: 'remarks',
                    key: 'remarks',
                },
                {
                    title: '操作',
                    dataIndex: 'id',
                    key: 'id',
                    render: (text) => {
                        return <div>
                            <Popconfirm
                                title="是否删除?"
                                onConfirm={() => {
                                    this.deleteOfficialFeePrice(text);
                                }}
                                okText="删除"
                                cancelText="不删除"
                            >
                                <Button type="danger" onClick={(e) => {
                                    e.stopPropagation()
                                }}>
                                    删除
                                </Button>
                            </Popconfirm>
                        </div>
                    }
                },
            ],
            addSoftVisible: false,
            infor: {},
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return "共" + total + "条数据";
                },
            }
        }
        this.loadData = this.loadData.bind(this);
        this.tableRowClick = this.tableRowClick.bind(this);
        this.reset = this.reset.bind(this);
        this.changeList = this.changeList.bind(this);
    }

    componentDidMount() {
        this.loadData();
    }

    //搜索功能和初始列表加载
    loadData(pageNo) {
        this.setState({
            loading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/company/listOfficialFeePrice',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
            },
            success: function (data) {
                if (!data.data || !data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    data.data.list.map((v,i)=>{v.key = i})
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                    if (data.data && data.data.list && !data.data.list.length) {
                        this.state.pagination.current = 0;
                        this.state.pagination.total = 0;
                    }
                    this.setState({
                        dataSource: data.data.list,
                        page: data.data.pageNo,
                        pagination: this.state.pagination,
                    });
                };

            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    tableRowClick(infor) {
        this.setState({
            addSoftVisible : true,
            infor: infor
        })
    }

    reset(){
        this.setState({
            type:'',       //名称
        },()=>{
            this.loadData();
        })
    }

    //删除
    deleteOfficialFeePrice(id) {
        let _this = this;
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url:globalConfig.context + '/api/admin/company/deleteOfficialFeePrice',
            data:{
                id: id
            },
        }).done(function (data) {
            _this.setState({
                loading: false
            });
            if (!data.error.length) {
                message.success('删除成功！');
                _this.loadData();
            } else {
                message.warning(data.error[0].message);
            }
        }.bind(this));
    }

    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">
                    <Tabs defaultActiveKey="1" className="test">
                        <TabPane tab="操作" key="1">
                            <div className="user-search" style={{display:'flex',flexFlow:'row',marginBottom:'10px'}}>
                                <span>
                                    <Button type="primary" size={'middle'} onClick={()=>{
                                        this.setState({
                                            addSoftVisible : true
                                        })
                                    }}>
                                        增加
                                    </Button>
                                </span>
                            </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 size="middle" columns={
                                    this.state.changeList
                                        ? this.state.changeList
                                        : this.state.columns
                                    }
                                   pagination={this.state.pagination}
                                   dataSource={this.state.dataSource}
                                   style={{
                                       cursor: 'pointer',
                                   }}
                                   onRowClick={this.tableRowClick}/>
                        </Spin>
                    </div>
                </div>
                {this.state.addSoftVisible ? <AddOfficialFeePrice
                    infor={this.state.infor}
                    visible={this.state.addSoftVisible}
                    onCancel={()=>{
                        this.setState({
                            addSoftVisible : false,
                            infor: {},
                        })
                    }}
                    successFn={()=>{
                        this.loadData(this.state.page);
                        this.setState({
                            addSoftVisible : false,
                            infor: {}
                        })
                    }}/> : <div/>}
            </div>
        )
    }
}

export default OfficialFees