import React from 'react'; import { Form, Input, InputNumber, Card, Icon, Button, Row, Col, Upload, Affix } from 'antd'; import './index.less'; import Page from '@src/containers/Page'; import Block from '@src/components/Block'; // import FileUpload from '@src/components/FileUpload'; import { flattenObject, formatFormError } from '@src/services/Tools'; import { asyncSMessage } from '@src/services/AsyncTools'; import { System } from '../../../stores/system'; export default class extends Page { initData() { System.getIndex().then(result => { const { form } = this.props; form.setFieldsValue(flattenObject(result, 'index')); this.setState({ load: true, index: result }); }); System.getBase().then(result => { const { form } = this.props; form.setFieldsValue(flattenObject(result, 'base')); this.setState({ load: true, base: result }); }); } addLength(field, info) { let { index } = this.state; index = index || {}; index[field] = index[field] || []; index[field].push(info); this.setState({ index }); } deleteLength(field, start, length) { let { index } = this.state; index = index || {}; index[field] = index[field] || []; index[field].splice(start, length); this.setState({ index }); } submit() { this.submitIndex(); this.submitBase(); } submitIndex() { const { form } = this.props; form.validateFields(['index'], (err) => { if (!err) { const { index } = form.getFieldsValue(); index.class = Object.keys(index.class || {}).map((key) => index.class[key]); index.activity = Object.keys(index.activity || {}).map((key) => index.activity[key]); index.evaluation = Object.keys(index.evaluation || {}).map((key) => index.evaluation[key]); System.setIndex(index) .then(() => { this.setState({ index }); asyncSMessage('保存成功'); }).catch((e) => { form.setFields(formatFormError(index, e.result)); }); } }); } submitBase() { const { form } = this.props; form.validateFields(['base'], (err) => { if (!err) { const { base } = form.getFieldsValue(); System.setBase(base) .then(() => { this.setState({ base }); asyncSMessage('保存成功'); }).catch((e) => { form.setFields(formatFormError(base, e.result)); }); } }); } renderPrepare() { const { getFieldDecorator } = this.props.form; return <Block> <h1>备考攻略</h1> <Form> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='自学-从零开始'> {getFieldDecorator('index.prepare.first', { rules: [ { required: false, message: '请输入跳转地址' }, ], })( <Input placeholder='请输入跳转地址' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='自学-继续练习'> {getFieldDecorator('index.prepare.continue', { rules: [ { required: false, message: '请输入跳转地址' }, ], })( <Input placeholder='请输入跳转地址' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程-初学'> {getFieldDecorator('index.prepare.classJunior', { rules: [ { required: false, message: '请输入跳转地址' }, ], })( <Input placeholder='请输入跳转地址' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程-中级'> {getFieldDecorator('index.prepare.classMiddle', { rules: [ { required: false, message: '请输入跳转地址' }, ], })( <Input placeholder='请输入跳转地址' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程-高级'> {getFieldDecorator('index.prepare.classSenior', { rules: [ { required: false, message: '请输入跳转地址' }, ], })( <Input placeholder='请输入跳转地址' />, )} </Form.Item> </Form> </Block>; } renderUser() { const { getFieldDecorator } = this.props.form; return <Block> <h1>用户数据</h1> <Form> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='线下用户量'> {getFieldDecorator('index.user.numberOffline', { rules: [ { required: false, message: '' }, ], })( <InputNumber placeholder='请输入线下用户量' style={{ width: '200px' }} />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='700+学员数'> {getFieldDecorator('index.user.number700', { rules: [ { required: false, message: '' }, ], })( <InputNumber placeholder='请输入700+学员数' style={{ width: '200px' }} />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='学员平均分'> {getFieldDecorator('index.user.numberScore', { rules: [ { required: false, message: '' }, ], })( <InputNumber placeholder='请输入学员平均分' style={{ width: '200px' }} />, )} </Form.Item> </Form> </Block>; } renderClass() { const { getFieldDecorator, getFieldValue, setFieldsValue } = this.props.form; const { data } = this.state; const course = data.course || []; return <Block> <h1>千行课堂</h1> <Form> <Row> {course.map((row, index) => { const image = getFieldValue(`index.course.${index}.image`) || null; return <Col span={7} offset={index % 3 ? 1 : 0}><Card> <Button className="delete-button" size="small" onClick={() => { this.deleteLength('course', index, 1); }}> <Icon type="delete" /> </Button> <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='课程名称'> {getFieldDecorator(`index.course.${index}.title`, { rules: [ { required: true, message: '输入课程名称' }, ], initialValue: row.title, })( <Input placeholder='请输入课程名称' />, )} </Form.Item> <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='跳转链接'> {getFieldDecorator(`index.course.${index}.link`, { rules: [ { required: true, message: '输入跳转链接' }, ], initialValue: row.link, })( <Input placeholder='请输入跳转链接' />, )} </Form.Item> <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='背景图片'> {getFieldDecorator(`index.course.${index}.image`, { rules: [ { required: true, message: '上传图片' }, ], })( <Upload listType="picture-card" showUploadList={false} beforeUpload={(file) => System.uploadImage(file).then((result) => { setFieldsValue({ [`index.course.${index}.image`]: result.url }); return Promise.reject(); })} > {image ? <img src={image} alt="avatar" /> : <div> <Icon type={this.state.loading ? 'loading' : 'plus'} /> <div className="ant-upload-text">Upload</div> </div>} </Upload>, )} </Form.Item> </Card></Col>; })} <Col span={7} offset={course.length % 3 ? 1 : 0}> <Card className="plus" onClick={() => { this.addLength('course', { title: '', link: '', image: '' }); }}> <Icon type={'plus'} /> </Card> </Col> </Row> </Form> </Block >; } renderActivity() { const { getFieldDecorator, getFieldValue, setFieldsValue } = this.props.form; const { data } = this.state; const activity = data.activity || []; return <Block> <h1>活动信息</h1> <Form> <Row> {activity.map((row, index) => { const image = getFieldValue(`index.activity.${index}.image`) || null; return <Col span={7} offset={index % 3 ? 1 : 0}><Card> <Button className="delete-button" size="small" onClick={() => { this.deleteLength('activity', index, 1); }}> <Icon type="delete" /> </Button> <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='跳转链接'> {getFieldDecorator(`index.activity.${index}.link`, { rules: [ { required: true, message: '输入跳转链接' }, ], initialValue: row.link, })( <Input placeholder='请输入跳转链接' />, )} </Form.Item> <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='活动图片'> {getFieldDecorator(`index.activity.${index}.image`, { rules: [ { required: true, message: '上传图片' }, ], })( <Upload listType="picture-card" showUploadList={false} beforeUpload={(file) => System.uploadImage(file).then((result) => { setFieldsValue({ [`index.activity.${index}.image`]: result.url }); return Promise.reject(); })} > {image ? <img src={image} alt="avatar" /> : <div> <Icon type={this.state.loading ? 'loading' : 'plus'} /> <div className="ant-upload-text">Upload</div> </div>} </Upload>, )} </Form.Item> </Card></Col>; })} <Col span={7} offset={activity.length % 3 ? 1 : 0}> <Card className="plus" onClick={() => { this.addLength('activity', { link: '', image: '' }); }}> <Icon type={'plus'} /> </Card> </Col> </Row> </Form> </Block>; } renderEvaluation() { const { getFieldDecorator, getFieldValue, setFieldsValue } = this.props.form; const { data } = this.state; const evaluation = data.evaluation || []; return <Block> <h1>学员评价</h1> <Form> <Row> {evaluation.map((row, index) => { const avatar = getFieldValue(`index.evaluation.${index}.avatar`) || null; return <Col span={7} offset={index % 3 ? 1 : 0}><Card> <Button className="delete-button" size="small" onClick={() => { this.deleteLength('evaluation', index, 1); }}> <Icon type="delete" /> </Button> <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='学员昵称'> {getFieldDecorator(`index.evaluation.${index}.nickname`, { rules: [ { required: true, message: '输入学员昵称' }, ], initialValue: row.nickname, })( <Input placeholder='请输入学员昵称' />, )} </Form.Item> <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='学员头像'> {getFieldDecorator(`index.evaluation.${index}.avatar`, { rules: [ { required: true, message: '上传图片' }, ], })( <Upload listType="picture-card" showUploadList={false} beforeUpload={(file) => System.uploadImage(file).then((result) => { setFieldsValue({ [`index.evaluation.${index}.avatar`]: result.url }); return Promise.reject(); })} > {avatar ? <img src={avatar} alt="avatar" /> : <div> <Icon type={this.state.loading ? 'loading' : 'plus'} /> <div className="ant-upload-text">Upload</div> </div>} </Upload>, )} </Form.Item> <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='评价内容'> {getFieldDecorator(`index.evaluation.${index}.content`, { rules: [ { required: true, message: '输入评价内容' }, ], initialValue: row.content, })( <Input placeholder='请输入评价内容' />, )} </Form.Item> </Card></Col>; })} <Col span={7} offset={evaluation.length % 3 ? 1 : 0}> <Card className="plus" onClick={() => { this.addLength('evaluation', { title: '', link: '', image: '' }); }}> <Icon type={'plus'} /> </Card> </Col> </Row> </Form> </Block>; } renderContact() { const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form; const wechatImage = getFieldValue('base.contact.wechatImage'); const weiboImage = getFieldValue('base.contacct.weiboImage'); return <Block> <Form> <h1>联系方式</h1> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='电话'> {getFieldDecorator('base.contact.phone', { rules: [ { required: false, message: '请输入电话' }, ], })( <Input placeholder='请输入电话' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='邮箱'> {getFieldDecorator('base.contact.email', { rules: [ { required: false, message: '请输入邮箱' }, ], })( <Input placeholder='请输入邮箱' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='微信号'> {getFieldDecorator('base.contact.wechat', { rules: [ { required: false, message: '请输入微信号' }, ], })( <Input placeholder='请输入微信号' />, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='公众号二维码'> {getFieldDecorator('base.contact.wechatImage')( <Upload listType="picture-card" showUploadList={false} beforeUpload={(file) => { System.uploadImage(file).then((result) => { setFieldsValue({ 'base.contact.wechatImage': result.url }); return Promise.reject(); }); } } > {wechatImage ? <img src={wechatImage} alt="avatar" /> : <div> <Icon type={this.state.loading ? 'loading' : 'plus'} /> <div className="ant-upload-text">Upload</div> </div>} </Upload>, )} </Form.Item> <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='微博二维码'> {getFieldDecorator('base.contact.weiboImage')( <Upload listType="picture-card" showUploadList={false} beforeUpload={(file) => System.uploadImage(file).then((result) => { setFieldsValue({ 'base.contact.weiboImage': result.url }); return Promise.reject(); })} > {weiboImage ? <img src={weiboImage} alt="avatar" /> : <div> <Icon type={this.state.loading ? 'loading' : 'plus'} /> <div className="ant-upload-text">Upload</div> </div>} </Upload>, )} </Form.Item> </Form> </Block>; } renderView() { return <div > {this.renderPrepare()} {this.renderUser()} {this.renderClass()} {this.renderActivity()} {this.renderEvaluation()} {this.renderContact()} <Affix style={{ position: 'absolute', bottom: '50px', right: '50px' }}> <Button type="primary" onClick={() => { this.submit(); }}>保存</Button> </Affix> </div>; } }