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

import React from 'react';
import { Tabs, Form, Row, Col, Input, InputNumber, Button, Upload, Icon } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import { flattenObject } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { System } from '../../../stores/system';

export default class extends Page {
  constructor(props) {
    super(props);
    this.state.tab = 'qx_cat';
    this.vipList = ['1个月', '3个月', '6个月'];
  }

  initData() {
    this.refresh(this.state.tab);
  }

  refresh(tab) {
    if (tab === 'qx_cat') {
      return this.refreshQxCat();
    }
    if (tab === 'textbook') {
      return this.refreshTextbook();
    }
    if (tab === 'vip') {
      return this.refreshVip();
    }
    return Promise.reject();
  }

  refreshQxCat() {
    return System.getServiceQxCat().then(result => {
      this.setState({ qx_cat: result || {} });
      const { form } = this.props;
      form.setFieldsValue(flattenObject(result, 'sentence'));
    });
  }

  refreshTextbook() {
    return System.getServiceTextbook().then(result => {
      this.setState({ textbook: result || {} });
    });
  }

  refreshVip() {
    return System.getServiceVip().then(result => {
      this.setState({ vip: result || {} });
    });
  }

  changeMapValue(field, index, key, value) {
    const data = this.state[field] || {};
    data[index] = data[index] || {};
    data[index][key] = value;
    this.setState({ [field]: data });
  }

  changeValue(field, key, value) {
    const data = this.state[field] || {};
    data[key] = value;
    this.setState({ [field]: data });
  }

  submit(tab) {
    let handler;
    if (tab === 'qx_cat') {
      handler = this.submitQxCat();
    }
    if (tab === 'textbook') {
      handler = this.submitTextbook();
    }
    if (tab === 'vip') {
      handler = this.submitVip();
    }
    handler.then(() => {
      asyncSMessage('保存成功');
    });
  }

  submitQxCat() {
    const { qx_cat } = this.state;
    return System.setServiceQxCat(qx_cat);
  }

  submitTextbook() {
    const { textbook } = this.state;
    return System.setServiceTextbook(textbook);
  }

  submitVip() {
    const { vip } = this.state;
    return System.setServiceVip(vip);
  }

  renderQxCat() {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
    const image = getFieldValue('qx_cat.image') || null;
    return <Form>
      <Row>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='商品价格'>
          {getFieldDecorator('qx_cat[0].price', {
            rules: [
              { required: true, message: '输入千行Cat价格' },
            ],
          })(
            <InputNumber placeholder='请输入千行Cat价格' onChange={(value) => {
              this.changeMapValue('qx_cat', 0, 'price', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='服务名称'>
          {getFieldDecorator('qx_cat[0].title', {
            rules: [
              { required: true, message: '输入千行Cat名称' },
            ],
          })(
            <Input placeholder='请输入千行Cat名称' onChange={(value) => {
              this.changeMapValue('qx_cat', 0, 'title', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='服务简介'>
          {getFieldDecorator('qx_cat[0].description', {
            rules: [
              { required: true, message: '输入千行Cat服务简介' },
            ],
          })(
            <Input placeholder='请输入千行Cat服务简介' onChange={(value) => {
              this.changeMapValue('qx_cat', 0, 'description', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='有效期说明'>
          {getFieldDecorator('qx_cat[0].expire_info', {
            rules: [
              { required: true, message: '输入千行Cat有效期说明' },
            ],
          })(
            <Input placeholder='请输入千行Cat有效期说明' onChange={(value) => {
              this.changeMapValue('qx_cat', 0, 'expire_info', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='退款政策'>
          {getFieldDecorator('qx_cat[0].refund_policy', {
            rules: [
              { required: true, message: '输入千行Cat退款政策' },
            ],
          })(
            <Input placeholder='请输入千行Cat退款政策' onChange={(value) => {
              this.changeMapValue('qx_cat', 0, 'refund_policy', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='版权说明'>
          {getFieldDecorator('qx_cat[0].copyright_notes', {
            rules: [
              { required: true, message: '输入千行Cat版权说明' },
            ],
          })(
            <Input placeholder='请输入千行Cat版权说明' onChange={(value) => {
              this.changeMapValue('qx_cat', 0, 'copyright_notes', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>

        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='商品图片'>
          {getFieldDecorator('qx_cat.image', {
            rules: [
              { required: true, message: '上传图片' },
            ],
          })(
            <Upload
              listType="picture-card"
              showUploadList={false}
              beforeUpload={(file) => System.uploadImage(file).then((result) => {
                setFieldsValue({ 'qx_cat.image': result });
              })}
            >
              {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>
      </Row>
    </Form>;
  }

  renderTextbook() {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
    const image = getFieldValue('textbook.image') || null;
    return <Form>
      <Row>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='商品图片'>
          {getFieldDecorator('textbook.image', {
            rules: [
              { required: true, message: '上传图片' },
            ],
          })(
            <Upload
              listType="picture-card"
              showUploadList={false}
              beforeUpload={(file) => System.uploadImage(file).then((result) => {
                setFieldsValue({ 'textbook.image': result });
              })}
            >
              {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>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='商品价格'>
          {getFieldDecorator('textbook[0].price', {
            rules: [
              { required: true, message: '输入数学机经价格' },
            ],
          })(
            <InputNumber placeholder='请输入数学机经价格' onChange={(value) => {
              this.changeMapValue('textbook', 0, 'price', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='服务名称'>
          {getFieldDecorator('textbook[0].title', {
            rules: [
              { required: true, message: '输入数学机经名称' },
            ],
          })(
            <Input placeholder='请输入数学机经名称' onChange={(value) => {
              this.changeMapValue('textbook', 0, 'title', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='服务简介'>
          {getFieldDecorator('textbook[0].description', {
            rules: [
              { required: true, message: '输入数学机经服务简介' },
            ],
          })(
            <Input placeholder='请输入数学机经服务简介' onChange={(value) => {
              this.changeMapValue('textbook', 0, 'description', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='有效期说明'>
          {getFieldDecorator('textbook[0].expire_info', {
            rules: [
              { required: true, message: '输入数学机经有效期说明' },
            ],
          })(
            <Input placeholder='请输入数学机经有效期说明' onChange={(value) => {
              this.changeMapValue('textbook', 0, 'expire_info', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='退款政策'>
          {getFieldDecorator('textbook[0].refund_policy', {
            rules: [
              { required: true, message: '输入数学机经退款政策' },
            ],
          })(
            <Input placeholder='请输入数学机经退款政策' onChange={(value) => {
              this.changeMapValue('textbook', 0, 'refund_policy', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
        <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='版权说明'>
          {getFieldDecorator('textbook[0].copyright_notes', {
            rules: [
              { required: true, message: '输入数学机经版权说明' },
            ],
          })(
            <Input placeholder='请输入数学机经版权说明' onChange={(value) => {
              this.changeMapValue('textbook', 0, 'copyright_notes', value);
            }} style={{ width: '200px' }} />,
          )}
        </Form.Item>
      </Row>
    </Form>;
  }

  renderVip() {
    const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
    const image = getFieldValue('vip.image') || null;
    return <Form>
      <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='商品图片'>
        {getFieldDecorator('vip.image', {
          rules: [
            { required: true, message: '上传图片' },
          ],
        })(
          <Upload
            listType="picture-card"
            showUploadList={false}
            beforeUpload={(file) => System.uploadImage(file).then((result) => {
              setFieldsValue({ 'vip.image': result });
            })}
          >
            {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>
      <Row>
        {this.vipList.map((row, index) => {
          return <Col span={12}>
            <h1>{row}</h1>
            <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='商品价格'>
              {getFieldDecorator(`vip[${index}].price`, {
                rules: [
                  { required: true, message: '输入价格' },
                ],
              })(
                <InputNumber placeholder={'输入价格'} onChange={(value) => {
                  this.changeMapValue('vip', index, 'price', value);
                }} style={{ width: '200px' }} />,
              )}
            </Form.Item>
            <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='服务名称'>
              {getFieldDecorator(`vip[${index}].title`, {
                rules: [
                  { required: true, message: '输入名称' },
                ],
              })(
                <Input placeholder={'输入名称'} onChange={(value) => {
                  this.changeMapValue('vip', index, 'title', value);
                }} style={{ width: '200px' }} />,
              )}
            </Form.Item>
            <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='服务简介'>
              {getFieldDecorator(`vip[${index}].description`, {
                rules: [
                  { required: true, message: '输入服务简介' },
                ],
              })(
                <Input placeholder='请输入服务简介' onChange={(value) => {
                  this.changeMapValue('vip', index, 'description', value);
                }} style={{ width: '200px' }} />,
              )}
            </Form.Item>
            <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='有效期说明'>
              {getFieldDecorator(`vip[${index}].expire_info`, {
                rules: [
                  { required: true, message: '输入有效期说明' },
                ],
              })(
                <Input placeholder='请输入有效期说明' onChange={(value) => {
                  this.changeMapValue('vip', index, 'expire_info', value);
                }} style={{ width: '200px' }} />,
              )}
            </Form.Item>
            <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='退款政策'>
              {getFieldDecorator(`vip[${index}].refund_policy`, {
                rules: [
                  { required: true, message: '输入退款政策' },
                ],
              })(
                <Input placeholder='请输入退款政策' onChange={(value) => {
                  this.changeMapValue('vip', index, 'refund_policy', value);
                }} style={{ width: '200px' }} />,
              )}
            </Form.Item>
            <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='版权说明'>
              {getFieldDecorator(`vip[${index}].copyright_notes`, {
                rules: [
                  { required: true, message: '输入版权说明' },
                ],
              })(
                <Input placeholder='请输入版权说明' onChange={(value) => {
                  this.changeMapValue('vip', index, 'copyright_notes', value);
                }} style={{ width: '200px' }} />,
              )}
            </Form.Item>
          </Col>;
        })}

      </Row>
    </Form>;
  }

  renderView() {
    const { tab } = this.state;
    return <Block><Tabs activeKey={tab} onChange={(value) => {
      this.setState({ tab: value, selectedKeys: [], checkedKeys: [] });
      this.refresh(value);
    }}>
      <Tabs.TabPane tab="千行Cat" key="qx_cat">
        {this.renderQxCat()}
      </Tabs.TabPane>
      <Tabs.TabPane tab="数学机经" key="textbook">
        {this.renderTextbook()}
      </Tabs.TabPane>
      <Tabs.TabPane tab="Vip" key="vip">
        {this.renderVip()}
      </Tabs.TabPane>
    </Tabs>
      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit(tab);
          }}>保存</Button>
        </Col>
      </Row>
    </Block>;
  }
}