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

import React from 'react'
import { Row, Col, Table, Modal, Icon, Button, Select, message } from 'antd'
const { Option } = Select
import { WeaInput, WeaSelect, WeaDatePicker, WeaTable } from "ecCom"
import { changeSalaryModalColumns, dataSource } from './columns'
import RequiredLabelTip from '../../components/requiredLabelTip'
import "./index.less"
import { inject, observer } from 'mobx-react';
import moment from 'moment'

@inject('salaryFileStore')
@observer
export default class ChangeSalaryModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            inited: false,
            selectedRowKeys: [],
            salaryArchiveItems: [
                {
                    key: "1",
                    salaryItem: "",
                    salaryBefore: "",
                    adjustAfter: ""
                }
            ],
            request: {
                effectiveTime: moment(new Date()).format("YYYY-MM-DD"),
                salaryArchiveId: this.props.currentId,
                adjustReason: "",
                description: ""
            }
        }
    }

    // 改变回调
    handleChange(params) {
        let request = {...this.state.request, ...params}
        this.setState({
            request
        })
    }

    // 表格中薪资项目选择项下拉，改变事件
    handleSalaryItemChange(item, value) {
        const {salaryFileStore: {getSalaryItemAdjustBeforeValue}} = this.props;
        const { salaryArchiveItems} = this.state;
        // alert("item.id : "+ item.id)
        // alert(JSON.stringify({salaryArchiveId: this.props.currentId, salaryItemId: item.id}))
        getSalaryItemAdjustBeforeValue({salaryArchiveId: this.props.currentId, salaryItemId: value}).then((data) => {
            let dataSource = [ ...salaryArchiveItems ]
            dataSource.map(i => {
                if(i.key == item.key) {
                    i.salaryItem = value;
                    i.salaryBefore = data
                }
            })
            this.setState({
                salaryArchiveItems: dataSource
            })
        })
    }

    // 调整后表格字段变化回调
    handleSalaryAfterItemChange(item, value) {
        const { salaryArchiveItems } = this.state;
        let dataSource = [ ...salaryArchiveItems ]
        dataSource.map(i => {
            if(i.key == item.key) {
                i.adjustAfter = value;
            }
        })
        this.setState({
            salaryArchiveItems: dataSource
        })
    }

    // 解析Columns
    getColumns() {
        const {salaryFileStore: {salaryItemChangeForm} } = this.props;
        const { salaryItemList } = salaryItemChangeForm
        let {columns} = salaryItemChangeForm
        return columns.map(item => {
            item = {...item}
            if(item.dataIndex == "salaryItem") {
                item.title = <span>{item.title}<RequiredLabelTip /></span>
                item.render = (text, record) => {
                    return (
                        <Select defaultValue={text} style={{ width: 150 }} onChange={(value) => this.handleSalaryItemChange(record, value)}>
                            {
                                salaryItemList && salaryItemList.map(item => (
                                    <Option value={item.key}>{item.showname}</Option>
                                ))
                            }
                        </Select>
                    )
                }
            }else if(item.dataIndex == "adjustAfter"){
                item.title = <span>{item.title}<RequiredLabelTip /></span>
                item.render = (text, record) => {
                    return (
                        <WeaInput type={"number"} style={{width: '150px'}} value={text} onChange={(value) => {
                            this.handleSalaryAfterItemChange(record, value)
                        }}/>
                    )
                }
            }
            return item;
        })
    }

    // 添加按钮点击回调
    handleAddItemClick() {
        const { salaryArchiveItems } = this.state;
        let result = [...salaryArchiveItems]
        let lastKey = "1";
        if(result.length > 0) {
            lastKey = parseInt(result[result.length - 1].key) + 1
        }
        result.push({
            key: lastKey + "",
            salaryItem: "",
            adjustBefore: "",
            adjustAfter: ""
        })

        this.setState({
            salaryArchiveItems: result
        })
    }
    
    componentWillMount() {
        const { salaryFileStore: {salaryItemChangeForm, getSalaryItemForm, getSalaryItemFormByItemId}, currentId, recordId} = this.props;
        if(recordId) {
            getSalaryItemFormByItemId(recordId).then(data => {
                let request = {...this.state.request}
                request.effectiveTime = data.effectiveTime
                request.adjustReason = data.adjustReason
                request.description = data.description
                this.setState({
                    salaryArchiveItems: data.dataSource,
                    inited: true,
                    request
                })
            })
        } else {
            getSalaryItemForm(currentId).then(() => {this.setState({
                inited: true
            })})
        }
    }

    // 保存
    handleSave() {
        const { salaryFileStore: {saveSalaryItem, fetchSingleSalaryItemList}} = this.props;
        let saveRequest = {...this.state.request}
        const { salaryArchiveItems } = this.state;
        if(salaryArchiveItems.length == 0) {
            message.warning("请添加调薪明细")
            return
        }
        saveRequest.salaryArchiveItems = salaryArchiveItems.map(item => {
            let result = {}
            result.salaryItemId = item.salaryItem
            result.adjustValue = item.adjustAfter
            return result
        })
        saveSalaryItem(saveRequest).then(() => {
            fetchSingleSalaryItemList({salaryArchiveId: this.props.currentId})
            this.props.onCancel()
        })
    }

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

    // 批量删除回调
    handleRemoveClick = () => {
        const { selectedRowKeys, salaryArchiveItems } = this.state;
        let result = [...salaryArchiveItems]
        if(selectedRowKeys.length == 0) {
            message.warning("未选择条目")
        }

        this.setState({
            salaryArchiveItems: result.filter(item => selectedRowKeys.indexOf(item.key) < 0)
        })
    }

    render() {
        const { salaryFileStore: {salaryItemChangeForm} } = this.props;
        const { request, salaryArchiveItems, selectedRowKeys } = this.state;
        const { effectiveTime, adjustReason, description } = request

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

        return (
            <Modal title="调薪" width={800} visible={this.props.visible} onClose={() => {this.props.onCancel()}}
                footer={<Button type="primary" onClick={() => {
                    this.handleSave()
                }}>保存</Button>}
            >
                <div className="changeSalaryModal" style={{padding: "10px 20px"}}>
                    <Row className="itemWrapper" style={{lineHeight: '47px'}}>
                        <Col span={6}>
                            生效日期<RequiredLabelTip />
                        </Col>
                        <Col span={18}>
                        <WeaDatePicker
                            format="yyyy-MM-dd"
                            style={{width: "200px"}}
                            value={effectiveTime}
                            onChange={(value) => {this.handleChange({ effectiveTime: value })}}
                            />
                        </Col>
                    </Row>
                    <Row className="itemWrapper" style={{lineHeight: "47px"}}>
                        <Col span={6}>
                            调整原因<RequiredLabelTip />
                        </Col>
                        <Col span={18}>
                            {/* {
                                this.state.inited && <WeaSelect 
                                options={salaryItemChangeForm.adjustReasonList} 
                                style={{width: "200px"}}
                                value={adjustReason}
                                onChange={(value) => {this.handleChange({ adjustReason: value })}}
                                />
                            } */}

                            <Select defaultValue={adjustReason} value={adjustReason} style={{ width: 200 }} onChange={(value) => this.handleChange({adjustReason: value})}>
                                {
                                    salaryItemChangeForm.adjustReasonList && salaryItemChangeForm.adjustReasonList.map(item => (
                                        <Option value={item.key}>{item.showname}</Option>
                                    ))
                                }
                            </Select>
                        </Col>
                    </Row>
                    <Row className="itemWrapper" style={{lineHeight: '47px'}}>
                        <Col span={6}>
                            说明
                        </Col>
                        <Col span={18}>

                            <WeaInput 
                            style={{width: "200px"}} 
                            value={description} 
                            onChange={value => {this.handleChange({description: value})}}
                             />
                        </Col>
                    </Row>
                </div>

                <div className="contentWrapper">
                    <div className="contentTitleWrapper" style={{height: "40px",lineHeight: "40px"}}>
                        <span className="contentTitle" style={{fontSize: "14px", color: "#666"}}>调薪明细</span>
                        <div className="rightIconWrapper" style={{display: "inline-block", float: "right"}}>
                            <Icon type="minus-square" style={{color: "#2db7f5", cursor: "pointer", marginRight: "15px"}} onClick={() => {this.handleRemoveClick()}}/>
                            <Icon type="plus-square" style={{color: "#2db7f5", cursor: "pointer"}} onClick={() => {this.handleAddItemClick()}}/>
                        </div>
                    </div>

                    <div className="tableWrapper">
                        {
                            this.state.inited && <WeaTable rowSelection={rowSelection} dataSource={salaryArchiveItems} columns={this.getColumns()}/>
                        }
                    </div>
                </div>
                
            </Modal>
        )
    }
}