salary-management-front/pc4mobx/hrmSalary/pages/ledger/step3/AddSalaryItemModal.js

import React from 'react'
import { inject, observer } from 'mobx-react';
import { Modal, Button, message, Switch } from 'antd'
import { WeaInputSearch, WeaTable } from 'ecCom'
import { WeaTableNew } from "comsMobx"
import { toJS } from 'mobx'
import CustomTable from '../../../components/customTable'


@inject('ledgerStore')
@observer
export default class AddSalaryItemModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            searchValue: "",
            selectedRowKeys:[]
        }
    }

    componentWillMount() {
        const { ledgerStore: {listSalaryItem}} = this.props;
        listSalaryItem()
    }

    // 增加编辑功能，重写columns绑定事件
    getColumns(columns) {
        if(!columns) {
            return []
        }
        let newColumns = '';
        newColumns = columns.map(column => {
            let newColumn = column;
            newColumn.render = (text, record, index) => { //前端元素转义
                let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
                switch(newColumn.dataIndex) {
                case "useDefault":
                case "useInEmployeeSalary":
                    return <Switch checked={text == 1}/>
                default:
                    return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
                }
            }
            return newColumn;
        });
        return newColumns;
    }

    handleAdd() {
        const { ledgerStore } = this.props;
        const { addSalaryItemDataSource, addItemsToGroup, addExcludeIds } = ledgerStore
        const { selectedRowKeys } = this.state;
        if(selectedRowKeys.length == 0) {
            message.warning("未选择条目")
        }
        let selectItems = []
        
        addSalaryItemDataSource.map(item => {
            item = {...item}
            selectedRowKeys.map(key => {
                if(item.id == key) {
                    item.salaryItemId = item.id
                    item.key = item.id
                    selectItems.push(item)
                }
            })
        })
        
        addItemsToGroup(this.props.title, selectItems)
        this.props.onCancel();
    }

    handleSearch = (value) => {
        const { ledgerStore: {listSalaryItem}} = this.props
        listSalaryItem(value)
    }


    onSelectChange = selectedRowKeys => {
        this.setState({ selectedRowKeys });
    }

    // 分页
    handleDataPageChange(value) {
        const { ledgerStore: {listSalaryItem}} = this.props;
        listSalaryItem(this.state.searchValue, value)
    }

    render() {
        const { ledgerStore } = this.props;
        const { addSalaryItemDataSource, addSalaryItemColumns, addSalaryItemPageInfo,loading } = ledgerStore
        const { searchValue, selectedRowKeys } = this.state;

        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        return (
            <Modal
                visible={this.props.visible} onCancel={() => {
this.props.onCancel()
}} width={900} height={600}
                style={{top: 20}}
                footer={null}
            >
                 <div style={{height: "47px", lineHeight: '47px'}}>
                    <span style={{marginLeft: "10px", fontSize: '14px'}}>添加薪资项目</span>
                    <div style={{float: "right", marginRight: "40px"}}>
                        <Button type="primary" style={{marginRight: '10px'}} onClick={() => {
this.handleAdd()
}}>添加</Button>
                        <WeaInputSearch value={searchValue} onChange={(value) => {
this.setState({searchValue: value})
}} onSearch={(value) => {
this.handleSearch(value)
}}/>
                    </div>
                </div>

                <div style={{margin: "10px", height: "400px", overflowY: "scroll"}}>
                    {/* <WeaTable // table内部做了loading加载处理，页面就不需要再加了
                        comsWeaTableStore={salaryItemTableStore} // table store
                        hasOrder={true} // 是否启用排序
                        needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
                        getColumns={this.getColumns}
                        // onOperatesClick={this.onOperatesClick.bind(this)}
                    /> */}

                    <CustomTable 
                        loading={loading}
                        dataSource={addSalaryItemDataSource}
                        columns={this.getColumns(addSalaryItemColumns)}
                        rowSelection={rowSelection}
                        pagination={{
                            onChange: (value) => {
this.handleDataPageChange(value)
},
                            total: addSalaryItemPageInfo.total,
                            showTotal: (total) => `共 ${total} 条`,
                            current: addSalaryItemPageInfo.pageNum
                          }}
                    />
                </div>
            </Modal>
        )
    }
}