sourcecode/front/project/admin/routes/setting/index/page.js

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));
      this.setState({ load: true, data: result });
    });
  }

  addLength(field, info) {
    let { data } = this.state;
    data = data || {};
    data[field] = data[field] || [];
    data[field].push(info);
    this.setState({ data });
  }

  deleteLength(field, start, length) {
    let { data } = this.state;
    data = data || {};
    data[field] = data[field] || [];
    data[field].splice(start, length);
    this.setState({ data });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        data.class = Object.keys(data.class || {}).map((key) => data.class[key]);
        data.activity = Object.keys(data.activity || {}).map((key) => data.activity[key]);
        data.evaluation = Object.keys(data.evaluation || {}).map((key) => data.evaluation[key]);
        System.setIndex(data)
          .then(() => {
            this.setState(data);
            asyncSMessage('保存成功');
          }).catch((e) => {
            form.setFields(formatFormError(data, e.result));
          });
      }
    });
  }

  renderPrepare() {
    const { getFieldDecorator } = this.props.form;
    return <Block>
      <h1>备考攻略</h1>
      <Form>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='自学-从零开始'>
          {getFieldDecorator('prepare.first', {
            rules: [
              { required: false, message: '请输入跳转地址' },
            ],
          })(
            <Input placeholder='请输入跳转地址' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='自学-继续练习'>
          {getFieldDecorator('prepare.continue', {
            rules: [
              { required: false, message: '请输入跳转地址' },
            ],
          })(
            <Input placeholder='请输入跳转地址' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程-初学'>
          {getFieldDecorator('prepare.classJunior', {
            rules: [
              { required: false, message: '请输入跳转地址' },
            ],
          })(
            <Input placeholder='请输入跳转地址' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程-中级'>
          {getFieldDecorator('prepare.classMiddle', {
            rules: [
              { required: false, message: '请输入跳转地址' },
            ],
          })(
            <Input placeholder='请输入跳转地址' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='课程-高级'>
          {getFieldDecorator('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('user.numberOffline', {
            rules: [
              { required: false, message: '' },
            ],
          })(
            <InputNumber placeholder='请输入线下用户量' style={{ width: '200px' }} />,
          )}
        </Form.Item>

        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='700+学员数'>
          {getFieldDecorator('user.number700', {
            rules: [
              { required: false, message: '' },
            ],
          })(
            <InputNumber placeholder='请输入700+学员数' style={{ width: '200px' }} />,
          )}
        </Form.Item>

        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='学员平均分'>
          {getFieldDecorator('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(`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(`course.${index}.title`, {
                  rules: [
                    { required: true, message: '输入课程名称' },
                  ],
                  initialValue: row.title,
                })(
                  <Input placeholder='请输入课程名称' />,
                )}
              </Form.Item>
              <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='跳转链接'>
                {getFieldDecorator(`course.${index}.link`, {
                  rules: [
                    { required: true, message: '输入跳转链接' },
                  ],
                  initialValue: row.link,
                })(
                  <Input placeholder='请输入跳转链接' />,
                )}
              </Form.Item>
              <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='背景图片'>
                {getFieldDecorator(`course.${index}.image`, {
                  rules: [
                    { required: true, message: '上传图片' },
                  ],
                })(
                  <Upload
                    listType="picture-card"
                    showUploadList={false}
                    beforeUpload={(file) => System.uploadImage(file).then((result) => {
                      setFieldsValue({ [`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(`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(`activity.${index}.link`, {
                  rules: [
                    { required: true, message: '输入跳转链接' },
                  ],
                  initialValue: row.link,
                })(
                  <Input placeholder='请输入跳转链接' />,
                )}
              </Form.Item>
              <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='活动图片'>
                {getFieldDecorator(`activity.${index}.image`, {
                  rules: [
                    { required: true, message: '上传图片' },
                  ],
                })(
                  <Upload
                    listType="picture-card"
                    showUploadList={false}
                    beforeUpload={(file) => System.uploadImage(file).then((result) => {
                      setFieldsValue({ [`claactivityss.${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(`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(`evaluation.${index}.nickname`, {
                  rules: [
                    { required: true, message: '输入学员昵称' },
                  ],
                  initialValue: row.nickname,
                })(
                  <Input placeholder='请输入学员昵称' />,
                )}
              </Form.Item>
              <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='学员头像'>
                {getFieldDecorator(`evaluation.${index}.avatar`, {
                  rules: [
                    { required: true, message: '上传图片' },
                  ],
                })(
                  <Upload
                    listType="picture-card"
                    showUploadList={false}
                    beforeUpload={(file) => System.uploadImage(file).then((result) => {
                      setFieldsValue({ [`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(`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('contact.wechatImage');
    const weiboImage = getFieldValue('contacct.weiboImage');
    return <Block>
      <Form>
        <h1>联系方式</h1>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='电话'>
          {getFieldDecorator('contact.phone', {
            rules: [
              { required: false, message: '请输入电话' },
            ],
          })(
            <Input placeholder='请输入电话' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='邮箱'>
          {getFieldDecorator('contact.email', {
            rules: [
              { required: false, message: '请输入邮箱' },
            ],
          })(
            <Input placeholder='请输入邮箱' />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='微信号'>
          {getFieldDecorator('contact.wechat', {
            rules: [
              { required: false, message: '请输入微信号' },
            ],
          })(
            <Input placeholder='请输入微信号' />,
          )}
        </Form.Item>

        <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label='公众号二维码'>
          {getFieldDecorator('contact.wechatImage')(
            <Upload
              listType="picture-card"
              showUploadList={false}
              beforeUpload={(file) => {
                System.uploadImage(file).then((result) => {
                  setFieldsValue({ '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('contact.weiboImage')(
            <Upload
              listType="picture-card"
              showUploadList={false}
              beforeUpload={(file) => System.uploadImage(file).then((result) => {
                setFieldsValue({ '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>;
  }
}