salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/editSlideContent.js

import React from 'react';
import { Row, Col, Table, DatePicker } from "antd"
import { inject, observer } from 'mobx-react';
import { WeaInput, WeaTextarea, WeaSearchGroup, WeaSelect } from "ecCom";
import { slideColumns} from './columns';
import "./editSlideContent.less"
import { WeaTableNew } from "comsMobx"
const WeaTable = WeaTableNew.WeaTable;
import moment from 'moment'

const { MonthPicker } = DatePicker;


let emptyItem = {
    incomeLowerLimit: "0.00",
    incomeUpperLimit: "0.00",
    dutyFreeValue: "0.00",
    dutyFreeRate: "0.00",
    taxableIncomeLl: "0.00",
    taxableIncomeUl: "0.00",
    taxRate: "0.00",
    taxDeduction: "0.00"
}

@inject('otherDeductStore', "taxAgentStore")
@observer
export default class EditSlideContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            taxAgentId: "",
            startDate: moment(new Date()).format("YYYY-MM"),
            endDate: moment(new Date()).format("YYYY-MM"),
            editable: this.props.editable === undefined ? "true": this.props.editable
        }
    }

    componentWillMount() { // 初始化渲染页面
        const { taxAgentStore: { fetchTaxAgentOption } } = this.props;
        fetchTaxAgentOption();
    }

    addItem() {
        const { taxRateStore: {setDataSource}} = this.props;
        let dataSource = [...this.props.taxRateStore.dataSource];
        let indexNum = 1;
        if(dataSource.length > 0) {
            indexNum = dataSource[dataSource.length - 1].indexNum +  1
        }
        let item = {...emptyItem}
        item.indexNum = indexNum
        dataSource.push(item);
        setDataSource(dataSource)
    }

    fetchCumDeductDetailList(param) {
        const { otherDeductStore} = this.props;
        const { getOtherDeductDetailList, currentRecord } = otherDeductStore;
        getOtherDeductDetailList(currentRecord.id, param);
    }


    render() {
        const { taxAgentStore: {taxAgentOption}} = this.props;
        const { otherDeductStore } = this.props;
        const { slideTableStore, currentRecord } = otherDeductStore;
        const { startDate, endDate, taxAgentId } = this.state;
        return (
            <div className="cumDeductSlide">
                <Row className="topLabelBar">
                    <Col span={4}>
                        <span className="username">{currentRecord.username}</span>
                    </Col>
                    <Col span={12}>
                        <span className="formLabel">申报月份</span>
                        <div className="weaRangePickerWrapper">
                        <div className="monthPickerWrapper">
                            <MonthPicker width={100} format="YYYY-MM" value={startDate} 
                                onChange={(v) => {
                                    let startDate = moment(v).format("YYYY-MM")
                                    this.setState({startDate})
                                    this.fetchCumDeductDetailList({
                                        declareMonth: [startDate, endDate],
                                        taxAgentId: taxAgentId
                                    })
                                }}
                            />
                        </div>
                        <span className="betweenLable">
                            至
                        </span>
                        <div className="monthPickerWrapper">
                            <MonthPicker width={100} 
                                value={endDate} 
                                onChange={(v) => {
                                    let endDate = moment(v).format("YYYY-MM")
                                    this.setState({endDate})
                                    this.fetchCumDeductDetailList({
                                        declareMonth: [startDate, endDate],
                                        taxAgentId: taxAgentId
                                    })
                                }}
                            />
                        </div>
                        </div>
                    </Col>
                    <Col span={8}>
                        <span className="formLabel">个税扣缴义务人</span>
                        <WeaSelect
                            showSearch // 设置select可搜索
                            style={{ width: 100 }}
                            options={taxAgentOption}
                            value={taxAgentId}
                            onChange={v => {
                                this.setState({taxAgentId: v})
                                this.fetchCumDeductDetailList({
                                    declareMonth: [startDate, endDate],
                                    taxAgentId: v
                                })
                            }}
                        />
                    </Col>
                </Row>

                <div>
                    <WeaTable // table内部做了loading加载处理，页面就不需要再加了
                        comsWeaTableStore={slideTableStore} // table store
                        hasOrder={true} // 是否启用排序
                        needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
                        />
                </div>
            </div>                    
        )
    }
}