import React, { Component } from 'react'; import { Form, Modal, Alert } from 'antd'; import './index.less'; import Select from '@src/components/Select'; import QuestionNoList from '../QuestionNoList'; class Association extends Component { constructor(props) { super(props); this.state = { ids: this.props.ids, nos: this.props.nos, show: !!props.modal, loading: false, err: '' }; this.questionNos = []; } onConfirm() { this.props.form.validateFields((err, fieldsValue) => { if (err) { return; } if (this.props.onConfirm && this.props.modal) { this.setState({ loading: true }); this.props .onConfirm(fieldsValue) .then(() => { this.setState({ loading: false }); this.onCancel(); }) .catch(e => { this.setState({ loading: false, err: e.message }); }); } else { this.onCancel(); } }); } onCancel() { if (this.props.modal) this.setState({ show: false }); if (this.props.onCancel) this.props.onCancel(); } renderForm() { const { getFieldDecorator, setFieldsValue } = this.props.form; const { field = 'questionNoIds' } = this.props; return <Form> <Form.Item> {getFieldDecorator(field)( <Select mode='tags' maxTagCount={200} notFoundContent={null} placeholder='输入题目id, 逗号分隔' tokenSeparators={[',', ',']} onChange={(values) => { this.setState({ nos: values }); }} />, )} </Form.Item> <QuestionNoList module={this.props.module} loading={false} ids={this.state.ids} nos={this.state.nos} onChange={(questionNos) => { this.questionNos = questionNos; getFieldDecorator(field); const nos = questionNos.map(row => row.no); setFieldsValue({ [field]: nos }); }} /> </Form>; } render() { const { modal, title, confirmText = '确定', cancelText = '取消' } = this.props; const { show, loading, err } = this.state; return modal ? ( <Modal title={title} visible={show} okText={confirmText} cancelText={cancelText} confirmLoading={loading} onOk={() => this.onConfirm()} onCancel={() => this.onCancel()} > {err && <Alert type="error" showIcon message={err} closable onClose={() => this.setState({ err: '' })} />} {this.renderForm()} </Modal> ) : (<div>{this.renderForm()}</div>); } } export default Form.create()(Association);