react 数值改变联动

原创 emily2013 随笔 React 86阅读 25 天前 举报

import React, { Component, PropTypes } from 'react';
import _ from 'eplodash';
import { Form, Icon, DatePicker, Select } from 'antd';
import ClearFix from '~/src/components/assembly/ClearFix';
import SelectAntd from '~/src/components/inquiry/SelectAntd';
import InputAntd from '~/src/components/inquiry/InputAntd';
import moment from 'moment'
const dateFormat = 'DD/MM/YYYY';
import './style.less';
const Translatable = require('epui-intl');
const Option = Select.Option;
const FormItem = Form.Item;

let indexId = 0;

class AddInvitationLetter extends Component {
static contextTypes = {
muiTheme: PropTypes.object,
}

static propTypes = {
title: PropTypes.string,
edit: PropTypes.bool,
formData: PropTypes.array,
columns: PropTypes.array,
    personData: PropTypes.array,
    form: PropTypes.object,

};

static defaultProps = {
title: '',
edit: true,
columns: [],

};

constructor(props) {
super(props);
this.state = {
  dataSource: [],
        personArr: props.personData,
        defaultNames: []
  }
}

componentDidMount() {
this.initState();

}

componentWillReceiveProps(nextProps) {
    if(!_.isEqual(nextProps.personData, this.props.personData)){
        let dataSource = this.state.dataSource;
        for (let ds of dataSource) {
            let field = `letters[${ds._id}].person`;
            let selectedPerson = this.props.form.getFieldValue(field);
            let xor = _.xor(selectedPerson, _.map(nextProps.personData, '_id'));
            _.remove(selectedPerson, p => _.includes(xor, p));
            let newValue = {};
            newValue[field] = selectedPerson;
            this.props.form.setFieldsValue(newValue);
        }
        this.setState({
            personArr: nextProps.personData,
            defaultNames: [],
        })
    }
}

initState(dataSource = _.cloneDeep(this.props.formData)) {
if (!dataSource) {
  dataSource = [];
}
this.setState({
  dataSource,
})

}

renderEidtTable = (columns,dataSource,index) => {
    const {form} = this.props;
    const {personArr, defaultNames} = this.state;
    const {getFieldDecorator} = form;
    return(
        <div className="ep-port-letter_table" key={`letter${dataSource._id}`}>
            <div className="letter_table_title">
                {this.t('nTextInvitationLetter')}
            </div>
            <div className="letter_table_head">
                {
                    _.map(columns,(item,i) => {
                        return (
                            <div key={`column${i + 1}`}  className="table_con_title" style={_.merge({}, item.fill
                ? {
                  flex: '1'
                }
                : {
                  width: item.width
                })}>
                                {item.title}
                            </div>
                        );
                    })
                }
            </div>
            <div className="letter_line">
                    <div className="letter-table_body">
                        <div className="letter-table_body_common">
                            <FormItem
                                key= {`letterDate${dataSource._id}`}
                    >
                      {getFieldDecorator(`letters[${dataSource._id}].letterDate`)(
                        <DatePicker placeholder={this.t('nTextClickToSelect')}/>
                      )}
                    </FormItem>
                        </div>
                        <div className="letter-table_body_common">
                            <FormItem
                                key= {`letterDay${dataSource._id}`}
                    >
                      {getFieldDecorator(`letters[${dataSource._id}].letterDay`)(
                                    <Select
                                        placeholder={this.t('nTextClickToSelect')}
                                        style={{width: '90%'}}
                                        showArrow={false}
                                        size="default"
                                        >
                          <Option value="30 Days">30 Days</Option>
                          <Option value="60 Days">60 Days</Option>
                                        <Option value="90 Days">90 Days</Option>
                        </Select>
                      )}
                    </FormItem>
                        </div>
                        <div className="letter-table_body_common">
                            <FormItem
                                key= {`letterTimes${dataSource._id}`}
                    >
                      {getFieldDecorator(`letters[${dataSource._id}].letterTimes`)(
                                    <Select
                                        placeholder={this.t('nTextClickToSelect')}
                                        style={{width: '90%'}}
                                        showArrow={false}
                                        size="default"
                                        >
                          <Option value="Single Entry">Single Entry</Option>
                          <Option value="Multiple Entry">Multiple Entry</Option>
                        </Select>
                      )}
                    </FormItem>
                        </div>
                    </div>
            </div>
            <div key={`person${dataSource._id}`} className="letter_line select_person">
                {
                    dataSource.isSelect ?
                    <div>
                        <FormItem
                            key={`person${dataSource._id}`}
                        >
                            {getFieldDecorator(`letters[${dataSource._id}].person`,{
                      initialValue: defaultNames
                            })(
                                <Select
                                    placeholder={this.t('nTextClickToSelect')}
                                    style={{width: '300px'}}
                                    size="default"
                                    mode="multiple"
                                    key={`letters[${dataSource._id}].person + key`}
                                    >
                                        {
                                            _.map(personArr, (item, i) => {
                                                return (
                                                    <Option value={item._id} key={item._id + item.name}>
                                                        {item.name}
                                                    </Option>
                                                )
                                            })
                                        }
                                </Select>
                            )}
                        </FormItem>
                    </div>
                    :
                    <div onClick={this.handleSelectPerson.bind(this,index)}>
                        <Icon type="plus" style={{fontSize:'10px',fontWeight:'500'}}/>
                        <span>{this.t('nTextSelectPerson')}</span>
                    </div>
                }
            </div>
            <div className="letter_hide_id">
                <InputAntd
                    key={"letter" + dataSource._id}
                    formName={`letters[${dataSource._id}]._id`}
                    initialValue={dataSource && dataSource._id}
                    form={form}
                    style={{display: 'none'}}
                />
            </div>
            <div className="letter-table_body_del">
      <Icon type="close-circle" style={{fontSize:'14px'}} onClick={this.handlerDeleteLetter.bind(this,index)}/>
    </div>
        </div>
    );
}

handleSelectPerson= (index)=>{
        this.setState((preState)=>{
                preState.dataSource[index].isSelect = true;
        })

}

render() {
const {edit, title, formData, columns} = this.props;
    const {dataSource} = this.state;
    return (
        <div>
            <div className="ep-port-letter">
                <div className="ep-port-letter_title">
                    {title}
                </div>
                {
                    _.map(dataSource,(item,index) => {
                        return edit ? this.renderEidtTable(columns,item,index) : this.renderShowTable(columns,item,index)
                    })
                }
                {
                    edit ?
                    <div className="ep-port-add-letter" onClick={this.handlerAddLetter.bind(this)}>
                        <Icon type="plus" style={{fontSize:'20px',fontWeight:'500',color:'#4990e2'}}/>
                        <span>{this.t('nTextAddInvitationLetter')}</span>
                    </div> : null
                }
            </div>
        </div>
    )
}

renderShowTable = (columns,dataSource,index) => {
    let arr = _.map(dataSource.person,item => {
        return item.split('-')[0]
    });
    return (
        <div>
            <div className="ep-port-letter_table" key={`letter${dataSource._id}`} style={{borderBottom:'none'}}>
                <div className="letter_table_title">
                    {this.t('nTextInvitationLetter')}
                </div>
                <div className="letter_table_head">
                    {
                        _.map(columns,(item,i) => {
                            return (
                                <div key={`column${i + 1}`}  className={i == columns.length - 1 ? "table_con_title" : "table_con_title letter-table-borderRight"} style={_.merge({}, item.fill
                    ? {
                      flex: '1'
                    }
                    : {
                      width: item.width
                    })}>
                                    {item.title}
                                </div>
                            );
                        })
                    }
                </div>
                <div className="letter_line">
                    <div className="letter-table_body ">
                        {
                            _.size(dataSource) > 0 ?
                            <div style={{display: 'flex'}}>
                                <div className="letter-table_body_common letter-table-borderRight" style={{width:'157px'}}>
                                    {moment(dataSource.letterDate).format(dateFormat)}
                                </div>
                                <div className="letter-table_body_common letter-table-borderRight" style={{width:'157px'}}>
                                    {dataSource.letterDay}
                                </div>
                                <div className="letter-table_body_common" style={{width:'157px'}}>
                                    {dataSource.letterTimes}
                                </div>
                            </div>
                            : <div className="letter-no-data">{this.t('nTextNoData')}</div>
                        }
                    </div>
                </div>
                <div className="letter_line letter_person_list">
                    {this.t('nTextNameList')}
                </div>
            </div>
            <div className="letter-table_body ">
                <table className="ep-letter_table">
                    <tbody>
                        {
                            _.size(dataSource.person) > 0 ?
                            _.map(_.chunk(arr,3), (item,i) => {
                                return (
                                    <tr>
                                        {
                                            _.map(item,(val) => {
                                                return <td>{val}</td>
                                            })
                                        }
                                    </tr>
                                )
                            })
                            : <div className="letter-no-data">{this.t('nTextNoData')}</div>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    );
}

handlerDeleteLetter = (i) => {
    const {dataSource} = this.state;
dataSource.splice(i, 1);
this.setState({dataSource});
}

handlerAddLetter = () => {
    const {dataSource} = this.state;
    const letter = {
        isSelect:false,
        letterDate: '',
        letterDay: '',
        letterTimes: '',
        person: [],
        _id: indexId
    };
    dataSource.push(letter);
    indexId++;
    this.setState({dataSource});
}

}

export default AddInvitationLetter

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复