salary-management-front/pc4mobx/hrmSalary/pages/salaryFile/salaryItemChangeList.js

import React from 'react';
import { Table } from 'antd'
import { WeaTable } from 'ecCom'
import { inject, observer } from 'mobx-react';
import ChangeSalaryModal from './changeSalaryModal'

@inject('salaryFileStore')
@observer
export default class SalaryItemChangeList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            changeSalaryVisible: false,
            recordId: ""
        }
        this.searchParams = {}
    }

    componentWillMount() {
        const { salaryFileStore: { fetchSingleSalaryItemList }, id} = this.props;
        this.searchParams = {salaryArchiveId: this.props.id, current: 1}
        fetchSingleSalaryItemList(this.searchParams)
    }

    handleEdit(record) {
        this.setState({
            recordId: record.id
        }, () => {
            this.setState({
                changeSalaryVisible: true
            })
        })
    }

    // 获取Columns
    getColumns() {
        const { salaryFileStore: {singleSalaryItemList} } = this.props;
        let columns = []
        if(singleSalaryItemList.columns) {
            columns = [...singleSalaryItemList.columns]
        }
        return columns
    }

    // 页面跳转
    handlePageChange(value) {
        this.searchParams.current = value
        const { salaryFileStore: {fetchSingleSalaryItemList} } = this.props;
        fetchSingleSalaryItemList(this.searchParams)
    }

    render() {
        const { salaryFileStore } = this.props;
        const { singleSalaryItemList } = salaryFileStore
        return (
            <div>
                <WeaTable dataSource={singleSalaryItemList.list ? singleSalaryItemList.list: []} columns={this.getColumns()}
                    pagination={{
                        onChange: (value) => {this.handlePageChange(value)},
                        total: singleSalaryItemList.total,
                        showTotal: (total) => `共 ${total} 条`,
                        current: singleSalaryItemList.pageNum
                    }}
                />
                {
                    this.state.changeSalaryVisible && <ChangeSalaryModal 
                        currentId={this.props.id}
                        recordId={this.state.recordId}
                        visible={this.state.changeSalaryVisible}
                        onCancel={() => {this.setState({changeSalaryVisible: false})}}
                    />
                }
            </div>
        )
    }
}