批量添加、编辑回显

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            operateType: '添加',
            flag: false,
            records: '',
        }
        this.uuid = 0;
    }//点击添加弹出框
    handleAdd = (operateType, record) => {
        this.setState({
            flag: true,
            operateType,
        })
        if (operateType === '编辑') {
            this.props.dispatch({ type: 'observeIpModel/getQuery', payload: { id: record.id } })
                .then((str) => {
                    this.setState({
                        records: str
                    })
                    if (str && str.path.length > 0) {
                        for (let i = 0; i < str.path.length - 1; i++) {
                            this.add()
                        }
                    }
                })
        }
    }
    //关闭弹出框
    handleModalVisible = () => {
        const { dispatch, form } = this.props;
        dispatch({ type: 'observeIpModel/changeQuerys__', payload: {} });
        form.resetFields();
        this.setState({
            flag: false,
            records: ''
        })
    }
    //保存
    handleSave = (e) => {
        e.preventDefault();
        const { operateType } = this.state;
        const type = operateType === '编辑' ? 'observeIpModel/updateRule' : 'observeIpModel/addRule';
        const { dispatch, form } = this.props;
        form.validateFields((err, values) => {
            if (!err) {
                const path = [];
                values.keys.forEach(i => {
                    path.push(values[`path#${i}`])
                })
                dispatch({ type, payload: { id: operateType === '编辑' ? values.id : '', file_id: values.file_id, path: path.join() } })
                    .then((xhr) => {
                        if (xhr) {
                            dispatch({ type: 'observeIpModel/changeQuerys__', payload: {} });
                            form.resetFields();
                            this.setState({
                                flag: false,
                                records: ''
                            })
                        }
                    })
            }
        });
    }
    add = () => {
        const { form } = this.props;
        const keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(this.uuid);
        this.uuid++;
        form.setFieldsValue({
            keys: nextKeys,
        });
    }
    remove = (k, index) => {
        const { form } = this.props;
        const { records } = this.state;
        // can use data-binding to get
        const keys = form.getFieldValue('keys');
        // We need at least one passenger
        if (keys.length === 1) {
            return;
        }
        // can use data-binding to set
        form.setFieldsValue({
            keys: keys.filter(key => key !== k)
        });
        records && records.path.splice(index, 1)
    }
    render() {
        const { operateType, flag, records } = this.state;
       
        form.getFieldDecorator('keys', { initialValue: [-1] });
        const keys = form.getFieldValue('keys');
        return (
            <div>
                <Modal
                    width={520}
                    title={operateType === '添加' ? '添加' : '编辑'}
                    visible={flag}
                    destroyOnClose={true}
                    maskClosable={false}
                    onOk={this.handleSave}
                    okText={intl.get("Intl_save")}
                    confirmLoading={updateLoading || addLoading}
                    onCancel={this.handleModalVisible}
                >
                    {
                        keys.map((k, index) => {
                            return (
                                <div
                                    key={k}
                                >
                                    <FormItem
                                        label={index + 1}
                                        className={styles.value}
                                    >
                                        {form.getFieldDecorator(`path#${k}`, {
                                            initialValue: records && records.path ? records.path[index] : '',
                                            rules: [
                                                {
                                                    required: true,
                                                    message: intl.get('Intl_not_null')
                                                },
                                                {
                                                    validator: checkPath
                                                }
                                            ]
                                        })(
                                            <Input style={{ width: 400 }} />
                                        )}
                                        {keys.length > 1 ? (
                                            <Icon
                                                type="delete"
                                                disabled={keys.length === 1}
                                                onClick={() => this.remove(k, index)}
                                                style={{ marginLeft: 8 }}
                                            />
                                        ) : null}
                                    </FormItem>
                                </div>
                            );
                        })
                    }
                </Modal>
            </div >
        );
    }
}