import React from 'react'; import moment from 'moment'; import { Form, Input, Button, Row, Col, InputNumber, DatePicker } from 'antd'; import './index.less'; import Editor from '@src/components/Editor'; import Page from '@src/containers/Page'; import Block from '@src/components/Block'; import Select from '@src/components/Select'; // import FileUpload from '@src/components/FileUpload'; import { formatFormError, generateSearch } from '@src/services/Tools'; import { asyncSMessage } from '@src/services/AsyncTools'; import { PrepareStatus, ExperienceScoreRange, ExperiencePercent } from '../../../../Constant'; import { Course } from '../../../stores/course'; import { User } from '../../../stores/user'; const [minScore, maxScore, step] = ExperienceScoreRange; let tmp = minScore; const ExperienceScore = []; while (tmp <= maxScore) { ExperienceScore.push({ label: `${tmp}`, value: tmp }); tmp += step; } export default class extends Page { initState() { return { showNickname: true }; } initData() { const { id } = this.params; const { form } = this.props; let handler; if (id) { handler = Course.getExperience({ id }); } else { handler = Promise.resolve({}); } handler .then(result => { if (result.userId) { this.setState({ showNickname: false }); } result.experienceTime = moment(result.experienceTime); generateSearch('userId', { allowClear: true, }, this, (search) => { return User.list(search); }, (row) => { return { title: `${row.nickname}(${row.mobile})`, value: row.id, }; }, result.userId, null); form.setFieldsValue(result); }); } submit() { const { form } = this.props; form.validateFields((err) => { if (!err) { const data = form.getFieldsValue(); let handler; data.description = (data.content || '').replace(/<[^>]+>/g, '').substr(0, 200); if (data.id) { handler = Course.editExperience(data); } else { handler = Course.addExperience(data); } handler.then(() => { asyncSMessage('保存成功'); goBack(); }).catch((e) => { if (e.result) form.setFields(formatFormError(data, e.result)); }); } }); } renderBase() { const { getFieldDecorator } = this.props.form; const { showNickname } = this.state; return <Block> <Form> {getFieldDecorator('id')(<input hidden />)} <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='题目'> {getFieldDecorator('title', { rules: [ { required: true, message: '请输入名称' }, ], })(<Input placeholder='请输入名称' />)} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='作者'> {getFieldDecorator('userId', { rules: [ { required: !showNickname, message: '请选择作者' }, ], })( <Select {...this.state.userId} onChange={(value) => { this.setState({ showNickname: !value }); }} placeholder='请选择作者' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='昵称'> {getFieldDecorator('nickname', { rules: [ { required: showNickname, message: '请输入昵称' }, ], })( <Input disabled={!showNickname} placeholder='输入昵称' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='作者信息'> <Row> <Col span={12}> <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='身份'> {getFieldDecorator('prepareStatus', { rules: [{ required: true, message: '请选择', }], })( <Select select={PrepareStatus} placeholder='身份' />, )} </Form.Item> </Col> <Col span={12}> <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='备考周期'> {getFieldDecorator('experienceDay', { rules: [{ required: true, message: '请输入备考天数', }], })( <InputNumber placeholder='备考周期: 天' />, )} </Form.Item> </Col> <Col span={12}> <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='分手成绩'> {getFieldDecorator('experienceScore', { rules: [{ required: true, message: '请选择', }], })( <Select select={ExperienceScore} placeholder='分手成绩' />, )} </Form.Item> </Col> <Col span={12}> <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='提分范围'> {getFieldDecorator('experiencePercent', { rules: [{ required: true, message: '请选择', }], })( <Select select={ExperiencePercent} placeholder='提分范围' />, )} </Form.Item> </Col> <Col span={12}> <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 14 }} label='考试时间'> {getFieldDecorator('experienceTime', { rules: [{ required: true, message: '请选择', }], })( <DatePicker placeholder='考试时间' />, )} </Form.Item> </Col> </Row> </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='问卷链接'> {getFieldDecorator('link', { })( <Input placeholder='输入内容' />, )} </Form.Item> <Form.Item label='正文'> {getFieldDecorator('content', { })( <Editor placeholder='输入内容' />, )} </Form.Item> </Form> </Block>; } renderView() { return <div flex> {this.renderBase()} <Row type="flex" justify="center"> <Col> <Button type="primary" onClick={() => { this.submit(); }}>保存</Button> </Col> </Row> </div>; } }