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;
      // (result.course || []).forEach((row, index) => {
      //   form.getFieldDecorator(`index.course.${index}.image`);
      // });
      // (result.activity || []).forEach((row, index) => {
      //   form.getFieldDecorator(`index.activity.${index}.image`);
      // });
      // (result.course || []).forEach((row, index) => {
      //   form.getFieldDecorator(`index.evaluation.${index}.avatar`);
      // });
      form.setFieldsValue(flattenObject(result, 'index'));
      this.setState({ load: true, indexInfo: result });
    });
    System.getBase().then(result => {
      const { form } = this.props;
      form.setFieldsValue(flattenObject(result, 'base'));
      this.setState({ load: true, base: result });
    });
  }

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

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

  submit() {
    this.submitIndex();
    this.submitBase();
  }

  submitIndex() {
    const { form } = this.props;
    form.validateFields(['index'], (err) => {
      if (!err) {
        // const { indexInfo } = this.state;
        const { index } = form.getFieldsValue();
        index.course = index.course.filter(row => row);
        index.activity = index.activity.filter(row => row);
        index.evaluation = index.evaluation.filter(row => row);
        System.setIndex(index)
          .then(() => {
            this.setState({ indexInfo: 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>;
  }

  renderCourse() {
    const { getFieldDecorator, getFieldValue, setFieldsValue } = this.props.form;
    const { indexInfo = {} } = this.state;
    const course = indexInfo.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: '上传图片' },
                  ],
                  initialValue: row.image,
                })(
                  <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 { indexInfo = {} } = this.state;
    const activity = indexInfo.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: '上传图片' },
                  ],
                  initialValue: row.image,
                })(
                  <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 { indexInfo = {} } = this.state;
    const evaluation = indexInfo.evaluation || [];
    return <Block>
      <h1>学员评价</h1>
      <Form>
        <Row>
          {evaluation.map((row, index) => {
            const avatar = getFieldValue(`index.evaluation.${index}.avatar`) || null;
            console.log(getFieldValue(`index.evaluation.${index}.avatar`));
            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}.createTime`, {
                  rules: [
                    { required: true, message: '输入发布时间' },
                  ],
                  initialValue: row.createTime,
                })(
                  <Input placeholder='请输入发布时间' />,
                )}
              </Form.Item>
              <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label='学员头像'>
                {getFieldDecorator(`index.evaluation.${index}.avatar`, {
                  rules: [
                    { required: true, message: '上传图片' },
                  ],
                  initialValue: row.avatar,
                })(
                  <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.contact.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.renderCourse()}
      {this.renderActivity()}
      {this.renderEvaluation()}
      {this.renderContact()}
      <Affix style={{ position: 'absolute', bottom: '50px', right: '50px' }}>
        <Button type="primary" onClick={() => {
          this.submit();
        }}>保存</Button>
      </Affix>
    </div>;
  }
}